How to Design a Cartoon Style Header in Photoshop

7,630 views | 14-October-2010 | Home > Photoshop Tutorials
 
 

Hey Photoshop enthusiasts, Here's my new Photoshop Tutorial on Rnel.net, How to Create a Cartoon Style Website Header.

Using layer styles and shapes we will be creating a website header with a cartoonish theme. You will practice your basic drawing skills with the creation of catoon clouds using the Elliptical Marquee Tool and simple lines with Rectangle Tool. The Warp Text Tool is also used for the text effects and more layer styles such as Outer Glow, Color Overlay, and Stroke together with a cool color combination for a more absolute cartoon effect.

  • Resources needed:
  • Anja Eliane Font from dafont.com LINK

Final Result Preview

 
 

Step 1: THE New Document

 

Open photoshop and create a new document, I used 1100x400px with a transparent background.

 
 

Step 2: Background Gradient

 

For the background, select the Gradient Tool (G) and create a radial gradient using yellow/orange colours, #ffd60e and #ff9f41 you should have a result like this, rename the layer Background.

 
 
 

Step 3: Clouds

 

In this step we'll create some cartoon style clouds using layer styles, to start create a new layer and select the Elliptical Marquee Tool (M) and start creating circle selections so it looks like clouds, make sure to press shift while creating selections.

 

When you've got 3 or 4 clouds fill the selection with black, Edit - Fill - Black and rename the layer Clouds.

Next add some layer styles on the Clouds layer to finish the cartoon effect:

 
 
 
 
 

Step 4: Text

 

Next we'll create the text, to start select the Text Tool (T) and write some text, I wrote RNELdotNET using a font called Anja Eliane, duplicate the text layer and copy the clouds layer style and paste it on the 3 text layers.

 

Next we'll used the warp text tool with arc for the style, put +30 for the top text layer then +25 for the middle text layer and to finish +20 to the last text layer.

 
 
 
 
 

Put the 3 text layer in a new group and rename the group Text, You should have something like this:

 
 

Step 5: String and Holes

 

Create a new layer, then select the Ellipse Tool (U) and create two small circles each side of the text, then select the Rectangle Tool (U) and create two stripes going from the small circles to the top of the header.

 
 
 
 
 
 
 
 
 

Free download files

Author

Adrien de Broglio - www.supercolorstudio.com

A 22 year old aspiring designer who is a Photoshop enthusiast and is from France. Has created numerous graphic related designs and tutorials on his website and portfolio as well as on other websites to share his knowledge and skills to other people.

 
 
View all author articles

Other articles from the author

Article discussions

blog comments powered by Disqus
 
 
 
loading...
 
 
Photoshop Tutorials | Php Tutorials | Cinema 4D Tutorials | 3D Studio Max Tutorials | Illustrator Tutorials | Twitter Tutorials | After Effects Tutorials | Corel Draw Tutorials