Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
6th May 2013

How to create illustrative web styles

Illustrated layout have become a real hit with creative web designers. Its appeal lies in its limitless imagination. Find out how to get creative with Photoshop

How to create illustrative web styles

inspiration: www.andyward.co.uk

Heavily illustrated layout has become a real hit with creative web designers. Such appeal is be attributed to the limitless imagination and creativity applicable within your design projects. Creating blueprints for sites normally means that you will have to go against standard images, layouts and simple textures – thereby offering regular fresh challenges.
There is a no-holds-barred approach to style, which includes examples such as vector, photo-illustration, real world and mixed media. Designers are even able to experiment and renew retro looks, such as Web 2.0 and 8-bit.

These are applied in subtle and inventive ways. In essence, creating illustrative websites enables designers to have fun. This also extends to the use of colour, which is equally liberating. Vibrant tones are often encouraged to enhance what is essentially a very playful style. From a commercial point of view, even though numerous subcategories exist, illustration itself isn’t likely to be going away any time soon. Therefore it has become a web trend that clients and audiences can trust as it continues to be contemporary.
In a nutshell, illustration gives the viewer a wholly memorable experience when visiting your website. Applying relative styles gives your website the personality to stand out from the crowd, which is always one of the most important factors. In this Web Workshop we will be showing you how to produce exciting styles to achieve this aim using
Adobe Photoshop.

INSPIRATION

CS6 Vector shapes
Clean bold vector styles are in fashion, with many sites sporting vector-drawn mascots. You may think that Adobe Illustrator would be your choice tool, with its vector engine offering you resizable elements. But if you don’t want to make the jump from Photoshop to another software package, you needn’t. Version CS6 of Photoshop now includes its own vector engine, applied to Shape and Type tools.

How to create illustrative web styles

TECHNIQUE

Pen Path illustration
The Pen tool and its two settings, Shape and Path, become essential when creating digital illustrations inside of Photoshop. Here we look at how to apply the Path setting to create open paths. Add a stroke to these to create line work. Of course, this means we also must set the correct brush settings, which we also reveal to you. We finish this effect by using our brush to colour our line art.

Draw open paths
Create a new layer called ‘Lines’ then use the Pen Path tool to create an illustration outline. You can use paths to create line detail too. Just Cmd/Ctrl-click to close a path, then start a new one.

Set brush style
Select Paths Panel>Create New Path and add line areas to one layer. Select Brush Presets>Brush Tip Shape (Angle at 45°, Roundness at 12%). Activate Shape Dynamics from the same options.

Paint in colour
Shape Dynamics Size Jitter = 100, Control = Pen Pressure, Min Diameter 35, Angle Jitter 5. Cmd-click path, Stroke Path. Use same brush (10% Opacity, Shape Dynamics off) to add colour.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.runewebdesign.co.uk Lee Johnson

      I have been seeing more and more of these heavily illustrated images on designers’ websites. Some of these illustrations are so detailed they must take months to create.

      All and any tips are most welcome for helping us with our own designs. Keep them coming!