In case you aren’t familiar with this subject, an infographic is a visual representation of data that simplifies complex information quickly and clearly. ‘But how can that help me with my web design?’ you ask.
Well, for one thing you can entertain your viewers by presenting interesting facts and statistics about your business. You can also use your infographic to demonstrate the depth of your industry knowledge to prospective clients. Many people prefer reading a webpage while being visually stimulated – it’s hard to look away without studying an infographic more closely.
One-page and scrolling website formats are the most compelling ways to present your designs. You’ll be able to create a more enjoyable viewing experience, as readers of your site digest a lot of information from a relatively compact space. Recent technologies also determine the styles associated with infographics –responsive design certainly, and portable device technology (namely Apple iOS) most likely, which impedes the use of animation and rollovers, enforcing coherent point and click (or tap) 2D design.
In most cases bold becomes best. Designers will apply discernible shapes and structured layouts to enhance the clarity of the illustrated info. This means the use of plush icons, dials and charts, complemented with the application of vivid colour combinations – no more than four or five at a time. Gradients further enhance the luscious looks of these illustrated elements. In this Web Workshop we show you how Photoshop tool and option sets can help you build these infographic assets.
Create a spectrum coloured graph
A luxuriant set of coloured charts and illustrations deliver connections to your viewers in a much better way than decidedly dry tables and figures can – it makes sense that visual appeal can aid the transition of information. Visitors will spend time looking back and forth over an infographic full of these elements.
Those of you who use Photoshop can further enhance some luscious transitional imagery by applying a gradient. Use this to create a cold to hot (or vice versa) colour spectrum, then combine it with some simple filters to create a correlative looking chart. This can be achieved in three quick and easy steps.
Create a hot to cold/light to dark gradient style, select the Gradient tool, and make sure this is set to Linear Gradient style. Create a new layer, hold Shift and apply your gradient horizontally.
Apply a Clipping Mask to your gradient layer and make it more chart-like by applying Filter>Pixelate>
Mosaic. Set Cell Size to a size between 100 and 200 squares. Move your clipped gradient layer to reposition.
Illustrate a dial chart
It is easier to create illustrated dial charts with CS6’s vector shape functionality and integrated Stroke settings, but here we show you how to do it using CS5’s Shape tool options and Guides.
Select the Ellipse tool, hold Shift and create a perfect circle in the centre. Place guides to mark the centre. Click the attached Vector mask thumbnail and activate Exclude overlapping shape areas. Hold Shift+Alt and drag from the centre of your shape.
sualise your percentage using a coloured section. Create this by duplicating your original shape and selecting an area according to your percentage amount, using the Polygonal Lasso tool. Add a Layer Mask.
Couple with icons
Repeat to create new sections and represent multiple percentage values. Create an illustrated key graph with plush icons to support data and enhance interest with the Pen Shape tool and Path area options.