Create Clean and Simple Typography

tipografi

In this tutorial we will be learning how to use selection, path, brush and gradient to create beautiful text effect in Photoshop. Let’s get started!

Final Result Preview

Below is a wallpaper that we will create in photoshop tutorial this time. You also can view the results of the image in a larger size here.

create simple cool typography using photoshop

Step 1

Run Photoshop and create a new document that is 1920 pixels wide by 1200 pixels high at a resolution of 300 pixels per inch. Change Foreground color to soft blue #46BBF1 and dark blue #024483 for the Backgound. Select the Gradient Tool (G), set to Radial Gradient with the gradient Foreground to Background color. Drag the gradient line from the middle to the edge of the canvas, we will get the following picture.

create simple cool typography using photoshop

Step 2

Start type ‘I am’ with each letter in a single layer. Here I use the font Helvetica Rounded with white text color #FFFFFF and 158 pt for the size. Transform positions of each layer to make it look interesting, press Ctrl+T to initiate the transformation.

create simple cool typography using photoshop

Step 3

Right-click on the layer ‘I’ and choose Create Work Path. Open the Paths window, there we have a Work Path, double-click to save it. Repeat this step for layer ‘a’ and ‘m’.

Step 4

Create a new ‘strip’ layer above the layer ‘I’, ‘a’ and ‘m’. Change the Foreground color to black #000000. Select the Brush Tool and open the brushes window, set brush as shown below.

create simple cool typography using photoshop

Now we will make dotted lines that form the word ‘I am’. Open paths window, there we got a three path from step 3. Right-click on Path 1 and select Stroke Path, do this on two other path. Now transform the position of ‘strip’ layers until we get the following picture.

create simple cool typography using photoshop

Step 5

Next step we’ll give 3D effect to the text. Double-click the layer ‘I’ to open Layer Style window. Add Drop Shadow to the text with color #c6c7c8 and set as the following figure. Press OK when done.

create simple cool typography using photoshop

Right-click on the layer ‘I’, select Copy Layer Style. Right-click on layer ‘a’ and select Paste Layer Style, so layer ‘a’ and ‘I’ now have the same layer style. Do it again for layer ‘m’.

create simple cool typography using photoshop

Step 6

At this stage we will make the shadow behind the word ‘I am’. First create a new layer behind all text layers. Press Ctrl+Shift and click on the layer thumbnail of ‘I’, ‘a’ and ‘m’ to load selection. Now go to Select > Modify > Expand, expand by 20 pixels. Fill the selection area with black #000000 using the Paint Bucket Tool (G). Then select Filter > Blur > Gaussian Blur, use 50 px for the radius.

create simple cool typography using photoshop

Set the layer Opacity to 70% and we’ll get the following picture.

create simple cool typography using photoshop

Step 7

Next set our Foregound to white #FFFFFF. I use akaDylan Plain to type nObOdY with the O, O and Y in the capital letters and lowercase letters for the others.

create simple cool typography using photoshop

Step 8

Add a new layer behind nObOdY layer, we called this layer ‘border 1’. Ceate a selection as in step 6, then go to Select > Modify > Expand and expand by 10 pixels. Fill the selection area with a light green #71d64d.

create simple cool typography using photoshop

Add a new layer again behind ‘border 1’ layer. Press Ctrl+click the ‘border 1’ layer to create new selection area. Repeat the step above but this time we fill the selection area with white.

create simple cool typography using photoshop

Step 9

Open this pin note image with photoshop, crop and add to our document. Resize pin note layer then add Drop Shadow to this layer.

create simple cool typography using photoshop

Step 10

Last step type ‘nobodi is perfect’ above pin note image. Here I use Smudger LET with varying font size, you can see screenshot below for the details.

create simple cool typography using photoshop

Final Result

I hope you enjoy this post and don’t forget subscribe to our RSS Feed.

create simple cool typography using photoshop

Download psd file

9 Comments

  1. pretty amazing … I love this blog

  2. so simple, I like your color choices, you have a nice comp

  3. The Web Tuts

    Tutorial added to the web tuts !

  4. NUTS!I wrote a really long response to your article but my internet crapped out and I lost it all! Oh well, just wanted to say that it was a great post! Awesome!

  5. Soft gradient + fancy font + nice color choise = beautiful typo art

  6. Awesome.. made one like it.. and love it..
    thanks a lot..

  7. types of kisses

    Pretty element of content. I simply stumbled upon your blog and in accession capital to assert that I get actually loved account your blog posts. Any way I’ll be subscribing for your feeds or even I achievement you get entry to consistently fast.

Leave a Reply