Design web templates from photo backgrounds

19 Icon illustrations rules

Three key factors in icon illustration are form, level of detail and number of colours. In Illustrator, we used the Pen tool to draw the objects, taking into account the best angles to communicate them. Then, we added a second element to make the icons more immediately recognisable, such as a sun symbol and pen.

20 Make the icon illustrations selectable as one

To make the icons selectable as one object, we converted the vectors to objects (Object>Path>Outline Stroke). Then we selected the objects we wanted as one, divided (from the Pathfinder tool), ungrouped and merged them. Now the icon is selectable as one single object with the details as knockouts.

21 Footer

When the user gets to the bottom of a page, it is convenient to have a smaller version of the navigation handy instead
of scrolling all the way back to the top. The footer is basically an end note echo of the navigation bar. The same content is repeated in a straightforward manner.

22 Dividing lines

Approaching the end now, we created a straight line in Illustrator and changed the stroke details to a dashed line. The reason for having dashed lines is because it is subtler than straight lines and acts as a polite gatekeeper from section to section. It also ties the design together and keeps it neat.

23 Overview

Now that the web design is finished, check it for errors, functions and, of course, design. Spend a good deal of time gazing over it to determine if the quality is truly satisfying. If not, then go back and improve the areas that need more work. A true designer is never satisfied with their designs!

(This tutorial originally appeared in Web Designer 151, by Wendy Ding)

Pages: 1 2 3 4