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)