Free Photoshop Tutorials

If you're new here, you may want to subscribe to my RSS feed.

In this Photoshop tutorial I’ll show you a nice and easy way of making a kids style website logo using mainly the pen tool and layer styles, just like the one below.

1.

Let’s start by making a new document in Photoshop. For this tutorial I used a small size of 400 x 200 pixels with the default Resolution/DPI. (72)

Unless you have a different idea of how this should turn out, leave the background as white. Now, start by finding and getting out the Pen Tool, using the settings shown below.

1. Pen Tool:
   
2. Pen Tool settings:
   

Now, on your canvas draw out a random, somewhat elliptical shape, I went with a distorted bean shape of some sort.

With the Pen Tool still active, right-click your path and turn it into a vector mask. Get the Brush tool out and brush a dark red inside of the path.

2.

Now to add some detail. Right-click the layer in the layers palette and go into the Blending Options, where you can apply the following layer styles:

1. Drop Shadow
2. Inner Shadow
3. Gradient Overlay

If you used all of the correct settings, you should have a result just like this:

So far it’s a nice base for our logo.

3.

Now you can add some optional details to the main banner if you want to. I added two gradients set as the Screen layer mode.

All you have to do to get an effect like shown above is copy the first path, make it a bit smaller, create another vector mask and mess with the layer styles. To get the shown gradient I lowered the fill opacity to 0%, and added in a Gradient Overlay set as Screen.

4.

Now it’s time to add in the text. For what I’m going to tell you to do I believe you’ll need Photoshop CS or newer, so you might just have to write out your text regularly.

Using the Pen Tool, draw out a curved path similar as the one shown below:

Now get out the Text Tool, with the Text Tool active, click the left corner of the path and write out your text.

The font I’ve used in the above image is called VAG Round, you can download it from here. For my text I’ve used varying font sizes; colors; spacing; etc, in the below you can see what settings I’ve used for each text.

5.

After you’ve written out your text you might want to add some nice detail to it, so, you can apply the following layer styles to give it a cartoony look and feel:

1. Drop Shadow
2. Inner Shadow
3. Bevel and Emboss
4. Gradient Overlay
5. Stroke

If you used all of the correct settings you should be left with a result like this:

6.

Remember that this was simply a guide, you need to experiment with different shapes, layer styles, etc! If you need the PSD for help or learning purposes, you can download it from here.

I finished off by adding a larger copy of the logo in the background, I then lowered the opacity, erased the edges, and lastly Gaussian Blurred the layer (Filter > Blur > Gaussian Blur).

Thanks for reading the tutorial, I hope you enjoyed it!

 Loading ...