How to Design a Cartoon Style Header in Photoshop

7,322 views | 14-October-2010 | Photoshop Tutorial

 
 

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.

 
 
 
 
 

How to create a leaf using an ellipse tool

Corel Draw Tutorial - How to create a leaf using an ellipse tool

In this Corel Draw 15 tutorial, you will learn to create a beautiful leaf from just an ellipse. This tutorial is for b...

Remove a person or an object from a photo

Photoshop Tutorial - Remove a person or an object from a photo

There are times in a web designer or graphic designer's colourful and creative life that they will encounter a situation wher...

Restore and Color Old Photo

Photoshop Tutorial - Restore and Color Old Photo

I bet we all have some old black and white photos at home. So, if you didn't tried this by now, let me show you how to color ...

How to make a shield icon in Corel Draw

Corel Draw Tutorial - How to make a shield icon in Corel Draw

In this CorelDraw Tutorial, we are going to turn a rectangle into a shiny sheild. We will use basic tools like trim and wel...

Flying Girl Photo Manipulation

Photoshop Tutorial - Flying Girl Photo Manipulation

Today lets do something magical. : ) I will be showing how to combine different images and make a beautiful flying girl Photo...

Less than a minute Twitter Application Registration

Twitter Tutorial - Less than a minute Twitter Application Registration

To begin with creating your Twitter Application you are required to Register your Twitter Application because it will allow T...

Digital Retouch Facial Portrait

Photoshop Tutorial - Digital Retouch Facial Portrait

In this Photoshop Tutorial I will show you how to photo retouch a facial portrait shot....

Cinema 4D Energetic Signature in Photoshop

Photoshop Tutorial - Cinema 4D Energetic Signature in Photoshop

A Photoshop Tutorial that will show you how to create an energetic Signature Effect using Cinema 4D resources and only requir...

How to Create a Mafia Style Wallpaper in Photoshop

Photoshop Tutorial - How to Create a Mafia Style Wallpaper in Photoshop

In this Photoshop Tutorial you will learn how to make a mafia style wallpaper in Photoshop. I will show you how to create lig...

How to get total feed burner RSS subscribers

Php Tutorial - How to get total feed burner RSS subscribers

Websites uses "RSS", "XML", and "Atom" to distribute their contents using browsers. This simple php tutorial will show you ho...

 
 
 

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.

 

More about the author

Adrien de Broglio has a total of 45 published webmaster tutorials on CienelDotNet. The last submitted tutorial was a Illustrator Tutorial entitled Create a Retro Valentines Robot in Love Poster in Illustrator, it was published last February 12, 2013. Color in the Sky Wallpaper is the most popular tutorial among all webmaster tutorials submitted by Adrien de Broglio with a total views of 15K, that is about 8% of the total tutorial views (193K) of all his 45 webmaster tutorials. He was last seen on the website last November 14, 2013, 154 days ago

 

Tutorial Comments

 
blog comments powered by Disqus

Free Download Files

 
The PSD source file/s of this How to Design a Cartoon Style Header in Photoshop Photoshop Tutorial is available for Free download at the end of the tutorial.
 

Share this Tutorial

 
 

More Webmaster Tutorials from the Author

Illustrator Tutorial - Create a Retro Valentines Robot in Love Poster in Illustrator

In this new Valentine’s Day Illustrator Tutorial we’ll learn how to create a cute retro robot in love...

Create a Retro Valentines Robot in Love Poster in Illustrator

12-Feb-2013
Photoshop Tutorial - Create a Vibrant Heart Bokeh Wallpaper in Photoshop

In this Photshop Tutorial, we’ll learn how to create vibrant heart bokeh effect wallpaper using a few filte...

Create a Vibrant Heart Bokeh Wallpaper in Photoshop

12-Feb-2013
Photoshop Tutorial - Create a Wallpaper with Flying Hearts Balloons and Cloud Text

In this new Valentine’s Day Photoshop Tutorial we’ll learn how to create a cool wallpaper with some f...

Create a Wallpaper with Flying Hearts Balloons and Cloud Text

11-Feb-2013
Photoshop Tutorial - Create a Trendy Minimalist Valentines Poster in Photoshop

In this new Valentine’s Day Photoshop Tutorial we’ll learn how to create a trendy Minimalist Valentin...

Create a Trendy Minimalist Valentines Poster in Photoshop

11-Feb-2013
Photoshop Tutorial - Create a Gingerbread Cookie in Photoshop

In this Photoshop Tutorial we’ll create a yummy Gingerbread Cookie in Photoshop using custom patterns, text...

Create a Gingerbread Cookie in Photoshop

03-Jan-2013
Photoshop Tutorial - Create a Sweet and Chocolate Text Valentines Day Card in Photoshop

With Valentine’s day coming, here’s a new Photoshop Tutorial on cienel.net we’ll create a cool ...

Create a Sweet and Chocolate Text Valentines Day Card in Photoshop

11-Feb-2013
Illustrator Tutorial - Create a Vintage Greeting Christmas Card in Illustrator

In this Illustrator Tutorial, we’ll learn how to create a Vintage Christmas Card you can send to family and...

Create a Vintage Greeting Christmas Card in Illustrator

03-Jan-2013
Illustrator Tutorial - Create a Halloween Vampire Icon in Illustrator

Halloween is just next week, and because of that this is the fifth I’ve created using simple tools and shap...

Create a Halloween Vampire Icon in Illustrator

29-Oct-2012
Illustrator Tutorial - Create a Halloween Skull Icon in Illustrator

In this fourth Illustrator Tutorial created using simple tools and shapes, we’ll create a Skull Icon. &n...

Create a Halloween Skull Icon in Illustrator

29-Oct-2012
Illustrator Tutorial - Create a Halloween Pumpkin Icon in Illustrator

The third installment I’ve created using simple tools and shapes. In this new Illustrator Tutorial we&rsquo...

Create a Halloween Pumpkin Icon in Illustrator

29-Oct-2012
Illustrator Tutorial - Create a Halloween Mummy Icon in Illustrator

In this second out of five Illustrator Tutorial we’ll create a Mummy Icon, again using basic shape and tool...

Create a Halloween Mummy Icon in Illustrator

29-Oct-2012
Illustrator Tutorial - Create a Halloween Frankenstein Icon in Illustrator

With the Halloween coming in few days, I’ve created a series of 5 icons using simple tools and shapes in Il...

Create a Halloween Frankenstein Icon in Illustrator

29-Oct-2012
Photoshop Tutorial - Create a Halloween Theme Poster

Hey fellow design enthusiast, here’s a new Photoshop Tutorial on how to create a Halloween Theme Poster, yo...

Create a Halloween Theme Poster

17-Oct-2012
Photoshop Tutorial - Quick Tip no. 10 - Create a Colour Picker UI in Photoshop

In today’s tip from the quick tips series, we’ll learn how to create a simple Colour Picker UI you ca...

Quick Tip no. 10 - Create a Colour Picker UI in Photoshop

28-Sep-2012
Photoshop Tutorial - Quick Tip no. 9 - Create a Magnifying Glass Icon in Photoshop

In today’s Photoshop Tutorial tip from the quick tips series, we’ll learn how to create a Magnifying ...

Quick Tip no. 9 - Create a Magnifying Glass Icon in Photoshop

28-Sep-2012
 
1 2 3
 
 
loading...