Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

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


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.


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.


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.