Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
26th September 2011

Photoshop: Vector-style infographics

Learn how to design a simple infographic which combines a statistical message and the current trend for stylish vector graphics

Photoshop: Vector-style infographics

Vector art is usually associated with Adobe Illustrator, but similar effects can be achieved using just Photoshop. The style has a minimalist, modern feel and can help to get a point across quickly, while also creating something that looks unique and clean for web or print purposes. This tutorial looks at how an interesting design with a focused subject matter can be created in under two hours. We’ll turn it into a simplified infographic with stats about the percentages of water, landmass, etc. This tutorial is fairly easy but ideally requires a good knowledge of the Pen tool.
The inspiration for this piece came from involvement in the Gaia 10 project – a community design project with over 5,000 designers looking to help raise awareness of climate change and support the planet. They can be found at www.gaia10.us.

tools | tech | trends: Photoshop CS5
expert: Josh Overton
tutorial files: Download here

01. Set up your file
Photoshop: Vector-style infographics
The first step is to establish the file size that you will be working with. Set your document to the international paper size A3 with a DPI of 300. This is great because you can even print up to A2 posters with this document size at no loss of quality and at the same time save a few megabytes on your computer’s memory.

02. Set your background
Photoshop: Vector-style infographics
Next set up the background colour. We are going to use a pale grey to off-white Radial gradient. For the grey, use ‘c4c4c4’ as the colour and for the off-white use ‘fcfcfc’. Do this in the Layer Style settings box, which can be activated by double-clicking on the layer in the Layers panel. Make the inner colour white.

03. Draw a circle
Photoshop: Vector-style infographics
Now draw a circle for your global warming planet to roughly follow within. Use the Ellipse tool and draw a big circle in the centre of the document. Set the Fill Opacity to 0% and give it a Stroke Size of 3. This way you can see the background through the circle.

04. Bring out the Pen tool
Photoshop: Vector-style infographics
On a new layer start to create the main shapes in the piece. With the Pen tool (see ‘Tools explained’ boxout), follow the circle near the top and draw a shape similar to that in the screenshot. Next look to the Paths tab located by the Layers tab.

05. Paths to shapes
Photoshop: Vector-style infographics
On the Paths tab, you should find your recent path. Simply Ctrl/right-click on it and select Fill Path and then Use: Foreground Color. Now deselect the path and head back to the Layers tab. Hide the circle layer for a better look. Apply a Reflected gradient at 141 degrees, using the colours ‘f9f9f9’ and ‘ededed’.

06. Underlying layer
Photoshop: Vector-style infographics
Now make a new layer, but be sure to place it below the previous layer that you created so that you can draw the 3D effect with your Pen tool underneath. Fill it just as you did before, but this time add a Linear gradient at 90 degrees with the colours ‘a7a6a6’ and ‘ffffff’.

07. Lay the turf
Photoshop: Vector-style infographics
On a new layer located at the top of the list, you can use your circle shape for guidance again and draw in a green element with soft curves similar to the white ice shape from before. You’ll then need to fill this with a Reflective gradient at 133 degrees and the colours ‘9ad429’ and ‘ddf470’.

08. What lies beneath?
Photoshop: Vector-style infographics
As you did with the ice layer, now create a layer under the green shape and, with the Pen tool, draw the under-shading and give it a Linear gradient, this time at -90 degrees, with the colours ‘87bc0f’ and ‘79aa08’. Remember that all colours and degrees provided are just guidelines. Experiment until you are happy with how it looks.

09. Turf’s up – again
Photoshop: Vector-style infographics
On a new layer, and still under the original green layer, you can draw the top part of the green shape. Ideally this should be a flat surface like a lawn. Fill it with a Linear gradient at 90 degrees and with the colours ‘9ddb16’ and ‘d7ff46’. This shape is made to look brighter than other elements as it is receiving more light.

10. Careful: falling rocks
Photoshop: Vector-style infographics
Add a brown shape below the green one to represent rocks. Use a Linear gradient at -70 with the darker colour at the top, indicating it’s overshadowed by the green shape. We will use the colours ‘8d6b50’ and ‘d1bc98’. We’ve aimed to keep the colour scheme light to remain in keeping with the clean vector style.

11. Water, water everywhere
Photoshop: Vector-style infographics
At this stage, you can begin to add the water element. Following your circle guideline, draw a shape for the water towards the bottom. You want to leave a small gap at the base for another ice element (see image). You can use a Reflected gradient at -36 degrees for the main shape, along with the colours ‘33abbb’ and ‘36e6ed’.

12. To the South Pole
Photoshop: Vector-style infographics
Now make a shape that fills the gap left by the water for another ice layer. Use the same colours as the original ice shape but add a third which is blue. Lastly incorporate an effect that looks like ice melting from the bottom of the shape. These will turn into water drops.

13. What a drip
Photoshop: Vector-style infographics
Now make some water drops falling/melting from the tip of the ice. Simply draw them with the Pen tool and use the same colour methods as the water shape, ensuring it has a darker shape placed behind. The last object we need to add is the desert.

14. Hot enough for ya?
Photoshop: Vector-style infographics
For the final shape you can fill the gap between the green and the white elements at the top to add the desert to our planet. Follow the same process as before and use the colours ‘dbc146’ and ‘ecf774’. Now you’ve finished the Earth graphic you can move on to the text.

15. World of words
Photoshop: Vector-style infographics
We use the classic font Futura Lt as it goes well with the simple and clean vector theme in this piece. The bolder font is Geometr706 Md BT, though a bold version of Futura would work equally well. or indeed your chosen web font might be best. Make the colours two variants of grey, light and darker shades for effect.

16. Add the statistics
Photoshop: Vector-style infographics
Finally add the percentage statistics, which are just rough estimates that reflect the shapes as this is a simplified interpretation as opposed to a detail-perfect representation. Last but not least, add a legend next to each category (Land, Water and Ice) to describe the various elements of the image. And that’s it! A powerful combination of vector graphics and statistics created fully in Photoshop.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • przem

      Graphically beautiful, but misleading. The percentages should correspond to the size of sphere elements, I believe. Although, Idea is brilliant. :)

    • d713

      nice job,,,,