Photoshop Week Day 1: Add illustrations to your web templates

Use stock images and Photoshop’s tools to emulate a popular abstract style

Abstract is becoming more popular in commercial art, advertising, and certainly on the web so learning the basics of creating colourful shapes and abstract compositions will help expand your design knowledge in addition to thinking outside of the box.
In this tutorial, we will learn how to create a bright and colourful abstract design, teaching versatile techniques that can be applied to many other projects. While Adobe Illustrator does offer vector graphics, Photoshop is still a great program for abstract design because of the Transform tools and the Liquify filter. Manipulating shapes is much easier because of the variety of tools and features that are specific to Photoshop.
In this walkthrough, we will explore different ways of using the Liquify feature to create malleable lines, Transform tools such as Warp and Distort, and creating colourful gradients and shapes on a light blue background. We’ll assume you know the basics of navigation and tools, while Photoshop CS3 or higher is preferred, as tools like Warp only exist in the newest versions

01 Start to make shapes

Create a new document at your chosen size (ours is 350x305mm, 300dpi). Fill the Background layer with white. Create a new layer and, using the Polygonal Lasso tool, create a long triangle. Select the Gradient tool and create a gradient with the following three colours: 00a1c2, e2ff22 and f81b60. Drag the Linear Gradient from one end to the other inside of the selection.

02 Add some 3D perspective

Zoom in on the triangle. Create a new layer below the triangle layer, then use the Polygonal Lasso to draw out a thin portion on the long edge of the triangle as shown. Using the same gradient as before, drag from one end to another, but make sure that the colours flow in opposite directions to add interest and give the illusion of 3D. You can Burn and Dodge to blend and add 3D depth.

03 Start duplicating

Create a new copy-merged layer (hide the white Background layer, Cmd/Ctrl+Opt/Alt+Shift+E, then reshow the Background), which also saves the original layers. Start to duplicate this triangle. Through rotation and resizing (Cmd/Ctrl+T), place other duplications around the large shape. Create a copy-merged layer as before at the top of the one main shape to work with.

Pages: 1 2 3