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.
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).
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.
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.
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.
Your mountains should look something like this:
6 On the highest two mountain peaks, create a random selection over the tops of the mountains using the Lasso Tool (L).
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.
You should have something like this:
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.
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.
You should have something like this:
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.
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.
You should have something like this:
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.
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.
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.
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.
18 Fill the selection with a white color (#FFFFFF) and then apply the following layer styles.
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:
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.
Your website title should look something like this:
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.
23 Fill the selection with any color then add the following Gradient Overlay layer styles in the following figures.
24 Using the Horizontal Type Tool (T), add your navigation links to 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.
You should have something like this:
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).
27 Using the Rounded Rectangle Tool with a radius set to 15px.
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.
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).
29 Load a selection around the rounded rectangle shape by holding down CTRL and clicking on the rounded rectangle layer.
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).
32 Repeat the Steps 25 – 31 to create more content boxes as needed.
33 As an added touch, fill your content boxes with dummy content and pictures.
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).
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.
Download the Source File!
The PSD source file is available for you to download and study.
- illustrative_web_design.zip (ZIP, 0.92 MB)
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
- How to Create a Sleek and Textured Web Layout in Photoshop
- How to Create a Dark and Sleek Web Design from Photoshop
- How to Create a Slick and Clean Button in Photoshop
- Related categories: Tutorials and Web Design
About the Author
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