How to Create an Illustrative Web Design in Photoshop

Jun 24 2009 by Richard Carpenter | 53 Comments

How to Create an Illustrative Web Design in Photoshop

In this web design tutorial, you’ll learn how to create a professional web design with an illustrated "vector" header in Photoshop. You’ll see many techniques here including how to draw using the Pen Tool and a excellent type treatment using layer styles.

Final Result

To view the finished product, click on the following image to see the full-scale version.

Final Result

Setting Up the Photoshop Document

1 Open up Photoshop, create a new document that is 950 pixels by 1280 pixels and with a white background (#FFFFFF).

Setting Up the Photoshop Document

Creating the Header Section Background

2 Select the Rectangular Marquee Tool (M) and create a rectangular selection across the top part of the canvas. The height of the rectangle should be around 170-190 pixels.

3 Set the foreground color to #49B0D9 and the background color to #BCE2EF and then select the Gradient Tool (G) with the Linear Gradient option. Drag the linear gradient from the top of the selection downwards to create the linear gradient in the rectangular selection.

Creating the Header Section

Drawing the Mountain Range in the Header

4 Create a new layer. With the Pen Tool (P), begin to make a mountain backdrop (see the figure below); try to keep the mountains proportional to each other. Once you’ve created the mountain range, right-click on the mountain range drawing and select "Make Selection…" to convert the pen path to a selection.

Drawing the Mountain Range in the Header

5 Fill the mountain range selection with any color, double-click on its layer to open up the Layer Styles dialog box, and then add the layer styles shown in the following figures.

Drawing the Mountain Range in the Header

Drawing the Mountain Range in the Header

Drawing the Mountain Range in the Header

Your mountains should look something like this:

Drawing the Mountain Range in the Header

6 On the highest two mountain peaks, create a random selection over the tops of the mountains using the Lasso Tool (L).

Drawing the Mountain Range in the Header

7 Fill the selections with a white color (#FFFFFF), double-click on the layer to open up the Layer Styles dialog box, and then add a Stroke layer style following the settings on the following figure.

Drawing the Mountain Range in the Header

You should have something like this:

Drawing the Mountain Range in the Header

Drawing the Grassy Area in the Header

8 Create a new layer. Make a selection underneath your mountains using the Rectangular Marquee Tool (M). The selection should be no more than about 100px in height.

Drawing the Mountain Range in the Header

9 Set your foreground color to #8AA426 and your background color to #6F841F. Use the Gradient Tool (G) with the Linear Gradient option to drag a linear gradient from the top of the selection down to the bottom of the selection.

10 Add some noise using Filter > Noise > Add Noise.

Drawing the Mountain Range in the Header

You should have something like this:

Drawing the Mountain Range in the Header

Drawing Hills in the Header

11 Create a new layer. Using the Pen Tool (P), create a small "hump" somewhere on the grassy area; this will be one of our hills. Once the small hump/hill has been drawn, right-click on the path, and choose "Make a Selection…" to covert the pen path to a selection, and then fill in the selection with any color.

Drawing Hills in the Header

12 Add a Gradient Overlay by double-clicking on the layer to open up the Layer Styles dialog box using the settings in the following figure.

Drawing Hills in the Header

You should have something like this:

Drawing Hills in the Header

13 Select the hump/hill by holding down CTRL and clicking on the hump/hill layer. Add a stroke to the hump/hill selection, Edit > Stroke…, using the settings in the following figure.

Drawing Hills in the Header

14 Now, delete the flat bottom part of the hump/hill by using the Rectangular Marquee Tool (M), making a selection along the flat edge at the bottom, and then using Edit > Clear or pressing the Delete key.

Delete

15 Repeat the previous steps (Steps 11 – 14) but this time, don’t add the stroke (in Step 13).

Drawing the Clouds in the Header

16 We are now going to add some clouds to our sky area. Create a new layer. Use the Elliptical Marquee Tool to create a circle somewhere above the mountains, around the sky area.

Drawing the Clouds in the Header

17 Add to your selection by holding down the SHIFT key and drawing another circle, making sure that both circles overlap. Repeat this process until you have a shape that resembles a cloud.

Drawing the Clouds in the Header

Drawing the Clouds in the Header

18 Fill the selection with a white color (#FFFFFF) and then apply the following layer styles.

Drawing the Clouds in the Header

Drawing the Clouds in the Header

19 Repeat the Steps 16 – 18 to create as many clouds as you want. Try to experiment with the Layer Opacity to add a bit of depth to the clouds.

Your clouds should now look like this:

Drawing the Clouds in the Header

Applying a Nice Text Treatment for the Website Title

20 Using the Horizontal Type Tool (T), add your website’s title on the top left corner of the canvas – this will serve as our site’s title/logo. Feel free to use whatever font settings you wish, but the tutorial uses "Verdana" with a font size of 26pt.

21 Add the following layer styles to website title text layer.

Website Title

Website Title

Website Title

Website Title

Your website title should look something like this:

Website Title

Creating the Navigation Bar

22 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection at the bottom of your grassy area. Make sure that the selection slightly overlaps the grassy area.

Navigation bar

23 Fill the selection with any color then add the following Gradient Overlay layer styles in the following figures.

Creating the Navigation Bar

24 Using the Horizontal Type Tool (T), add your navigation links to the navigation bar.

Creating the Navigation Bar

Creating the Content Area and Content Boxes

25 Create a new layer. Using the Rectangular Marquee Tool (M), make a selection underneath your navigation all the way down to the very bottom of the canvas. Fill the selection with a white color (#FFFFFF) then add the following layer styles.

Creating the content area and boxes

Creating the content area and boxes

You should have something like this:

Creating the content area and boxes

26 The stroke you just added should be visible underneath the navigation bar, if it’s not, use the Move Tool (V) to move the background down until it appears. The stroke should be directly underneath the navigation. Use the Zoom Tool (Z) to zoom in to the stroke underneath the navigation bar. Use the Rectangular Marquee Tool (M) or the Single Row Marquee Tool to make a 1px selection right below the stroke underneath the navigation. Fill that 1-pixel selection with a white color (#FFFFFF).

Creating the content area and boxes

27 Using the Rounded Rectangle Tool with a radius set to 15px.

Creating the content area and boxes

Underneath the navigation bar, create a rounded rectangle shape and draw out a rounded rectangle. Set the color of the shape to a white color (#FFFFFF) and then add then add a 1px stroke using the color #D3D3D3.

Content area.

28 With the Rectangular Marquee Tool (M), make a selection over the top half of your rounded rectangle shape. Fill the selection with white color (#FFFFFF).

Content boxes

29 Load a selection around the rounded rectangle shape by holding down CTRL and clicking on the rounded rectangle layer.

Content boxes

30 Make the white rectangle layer from Step 28 the active layer, and then make an inverse selection, Select > Inverse (Shift + Ctrl + I). Delete the stuff beneath the inverse selection, Edit > Clear or by pressing the Delete key.

31 Where the vertical linear gradient ends, we need to add a gray border at the bottom. Create a new layer. Using the Rectangular Marquee Tool (M), create a 1px horizontal line across the content box and then fill the selection with a color of #D6D6D6, Edit > Fill… (Shift + F5).

Content boxes

32 Repeat the Steps 25 – 31 to create more content boxes as needed.

Content boxes

33 As an added touch, fill your content boxes with dummy content and pictures.

Content boxes

Content boxes

Content boxes

Content boxes

Creating the Footer

34 Duplicate your grassy area layer. Move it to the bottom of the canvas using the Move Tool (V).

35 Resize the height of the footer with Edit > Free Transform (Ctrl + T), and resizing the grassy area by dragging the transform controls, leaving a 1px gap at the top of the footer area.

36 Create a 1px line all the way across the footer using the Rectangular Marquee Tool (M) or the Single Row Marquee Tool, and then filling the selection with a color of your choice using Edit > Fill… (Shift + F5).

Content boxes

37 Finally, add your footer information to the footer area.

Congratulations, You’re Finished!

If you followed along the tutorial, you should come out with something that looks like the following figure, click on it to see the full-scale version.

Finished.

Download the Source File!

The PSD source file is available for you to download and study.

A Poll


Would you like to see an HTML/CSS tutorial based on this tutorial?(survey software)

Questions and Feedback

If you find places in the tutorial that are unclear or that you wish more information on, help us improve this tutorial by posing your questions in the comments.

Also, please provide us feedback on how we can better improve the tutorials here on Six Revisions

Related content

About the Author

Richard Carpenter is a freelance Web and Graphic Designer from England. Check out his portfolio here.

53 Comments

Arnold Dela Cruz

June 24th, 2009

Very nice tut, Richard. Sometimes it’s faster just to stay within the same application for simple graphics like these.

Greg

June 24th, 2009

nice tut, I like how you show how to make the goofy/fun graphics. something i don’t think i would have ever attempted until seeing this.

Kiran

June 24th, 2009

Wow! Thats some seriously detailed step by step guide Rich! Even developers like me can foray into design now may be :)

All in all, wonderfully crafted article, please let us know when we can see the HTML, CSS conversion article…

Spencer

June 24th, 2009

Do you have to then slice the website? How does that work?

BryanRegencia

June 24th, 2009

I usually do things like this in Illustrator. However, photoshop is nice too… Good stuff Richard! Thanks for sharing :)

Jake

June 24th, 2009

Really awesome background for the header, impressive illustrator / Photoshop skills!

Diego R

June 24th, 2009

Very nice tutorial, and very easy to follow.

Iwani

June 24th, 2009

Great tutorial. And if you’re doing the XHTML/CSS follow-up tutorial, it would be super duper awesome! I’ll definitely use them to show my new designers so they can learn from such great details you have written out

Pranav Shirodkar

June 25th, 2009

Wow! That was absolutely amazing! Beautiful work! Can’t believe it’s so easy to design websites so well!! Thanks for the tut.. Please make more.. <3

T-Law

June 25th, 2009

Beautiful result, thanks for tutorial.

WebsiteExpress

June 25th, 2009

OMG im lovin it :P great tutorial.

jaan

June 25th, 2009

Just awesome….

abczww

June 25th, 2009

wonderful, thanks so much.

arun

June 25th, 2009

I am great fan of Richard and his web design techniques with Photoshop. He keeps it simple and yet the results are very polished.

Richard, Nice to see you here at Six revisions. Hope you post some CSS tutorials too. Thanx a lot!!

Sarmad

June 25th, 2009

Excellent tutorial, really unique design.

Thanks a lot Richard.

Sarmad

richard

June 25th, 2009

thanks for your comments, much appreciated.

glad you like the tutorial

Jacob Gube

June 25th, 2009

Thank you every one for the wonderful feedback. @richard and I discussed the follow-up earlier today, and so we’re going to go ahead with it. Based on everyone’s vote, there’s an overwhelming majority that would find value and usefulness in a follow-up PSD -> (X)HTML tutorial written by him. Stay tuned here on Six Revisions to get more news on that (or stay tuned on Twitter @sixrevisions).

Talal Masood

June 25th, 2009

Seriously, Its a very very good and comprehensive guide. Bro, If you can record videos and put those tutorials, I guess you will get 10 times more hits on your websites.

sonnydesign

June 25th, 2009

another fantastic tutorial. I voted for HTML/CSS tutorial based on this tutorial. Im so excited to see it.

Jason

June 25th, 2009

A xhtml/css tutorial please. I love HV designs, been following them for months!

Akhtar

June 26th, 2009

Next tutorial: Going from this design to CSS/XHTML?

dpi

June 26th, 2009

Very useful, waiting for the CSS tut.

Thad

June 26th, 2009

Excellent Job. Thanks

Jacob Gube

June 26th, 2009

@dpi: Richard just finished the CSS/HTML tutorial follow-up, it’s scheduled to be published next week, stay tuned alright?

richard

June 26th, 2009

thx for all your comments. ;)

bootpress

June 27th, 2009

awesome dude..clean and beautiful design

Smith

June 27th, 2009

Thank you for sharing this Great tutorial.
As I am also working for web design this information will help me increase my knowledge.

Jason

June 27th, 2009

TY Jacob

Edir Pedro

June 28th, 2009

That was cool! :-)

Caitlin

June 29th, 2009

That was a great tutorial! I’m really looking forward to the CSS follow up. Thanks!

Heiko Schmieder

June 29th, 2009

What a tutorial – perfect. Always wanted to create such graphics in Illustrator – but to do it in Photoshop that’s great!
thx

Tyler

June 30th, 2009

Would be cool to see more examples of more fun graphics for websites. Using Photoshop and Illustrator to create cartoony style sites like this one. But it isn’t just cartoony and goofy, its actually nice to look at unlike some sites, where the designer is good with graphics, just applying them…

Can Elmas

June 30th, 2009

Simple, clean and very cute… I will try to design something like this when I have time again…

Jason

July 3rd, 2009

btw is it possible to do a multi page tutorial? e.g. coding the homepage, portfolio page, contact etc?

zeemiDesign

July 10th, 2009

I really enjoyed the vector-part,
who needs illustrator anyway xD

dmo

August 6th, 2009

Thank you for this tutorial … and greetings from germany.

Iuser

August 10th, 2009

Thanx for the very good work. It is great :D

Here’s the second part to convert it to CSS/XHTML :
http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-illustrative-web-design-from-scratch/

Bob

August 15th, 2009

Feeling dumb, but I’m stuck at step 29-30.
I’m assuming that the white rectangle in step 28 is on a new layer.
I make the selection. Fill it with white. Then ctrl click [the layer that contains the rounded rectangle? Or the actual rectangle? (I tried both)].
Then step 30 just doesn’t make sense to me. Everything I do either ends up clearing everything or clearing the box completely, not just clearing the area outside the rounded box. Do I need to do some masking or something? Totally lost.

Any help?

Ashley Adams

August 25th, 2009

Hey, this is really helpful and I think the illustrators are going to tremendously benefit from this comprehensive tutorial. Even I was searching for something like this on the Internet for a long time and glad to have found one. Thanks for sharing the methods..

Mr. Dee

October 29th, 2009

Awesome tutorial but what do you do if your somebody like me who cant draw?????

xRommelx

November 6th, 2009

XHTML/CSS please

Armine

January 13th, 2010

great tutorial! thanks you lot, I suggest that your tutorial is destinated for dairy or agricultural companies web site profile!

Thank you again

antisigma

January 17th, 2010

Simply amazing! Great stuff, one can tell you put alot of hard work into this tutorial.

Requesting an XHTML/CSS conversion! :)

ajmal

March 16th, 2010

how come u slice and edit the content

vionne

March 23rd, 2010

Nice! :)

lirik

March 30th, 2010

great tutorial.. thanks

nfnlfnosdfnosdf

May 13th, 2010

Wow. You missed a step. Fill the selection with white? Hmm, make a new layer? You don’t say. Load a selection around the wtf? Everything was great until this point when you begin to make no fckn sense at all. Sigh. fail.

Ebnat's Syukur

June 4th, 2010

Very nice tutorial n easy to follow but how about the coding?

Ibn Saeed

June 10th, 2010

Excellent tutorial

Can we use the above practice to get the desert design like in : http://www.floridaflourish.com/

asma

August 16th, 2010

thank you so much,really helpful

La Oveja Negra

September 14th, 2010

Thanks Richard… A Superb Tutorial, very clean design…

wdMaidstone

September 24th, 2010

yeah, nothing is as good as unique and nice custom built design.

please, keep posting similar tuts.

thank You for sharing

kATHY

October 24th, 2011

Super nice website, this will help me a lot to design website with Photoshop, I usually d them with Illustrator

Leave a Comment

Subscribe to the comments on this article.