How to Create an Illustrative Web Design in Photoshop

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