advanced photoshop

Tutorial preview: Design for web

Posted in:
Magazine previews, by Anna-lisa Saywell

Combine photos with typography and UI elements to create a dynamic layout

Photos now play a massive role in web design. These are being used to convey messages, applied with effects that complement a stylised user interface. Photos can appear in the form of thumbnails inside a grid, or as large backdrops to support floating elements including type, icons or buttons.

However, thought must go into selecting your photos so that you don’t end up disrupting your composition. If they clash with any other elements, your web design will be ruined.

In the following pages, you’ll discover how to tackle photo-based web styles and produce some great looks with the help of Photoshop. You’ll learn how to create a dynamic layout using shape and type juxtaposed with photos.

Creating depth by pairing elements is also explored, as is how to add dramatic lighting effects using adjustment layers. Ways to transform, composite and edit photos with layer masks is also looked at, leading to an exciting end result that will promote your design to global viewers.

Tutorial preview: Design for web

Read more in Advanced Photoshop 113, now on sale at and