Intro

In this tutorial, Ruaridh Currie from creative agency Serps Invaders will show you how to create an iPad Retina display-ready fashion app UI using Photoshop (and a little bit of Illustrator). During this tutorial, the focus will be on establishing a good foundation by choosing the correct grid, colour palette, fonts and images in order to create a modern, sophisticated user interface.

We'll be using best practice for creating mockups - so we’re left with a tidy, neatly-put-together file that any developer would be happy to receive for development.

This tutorial assumes you have a working knowledge of Photoshop and know your way tools, styles, channels and paths.

Tools

Adobe Photoshop and Adobe Illustrator

Project Files

Ruaridh has used largely free assets for this tutorial. All icons and fonts used are freely available, but the photography he's used is from royalty-free library. However, you can substitute your own fashion shots easily - or even adapt it to a different type of app.

You can download the free Facebook icon, Twitter icon, Pinterest icon, Arrow forward icon, Magnifier icon and Anchor icon from Iconfinder.

Download these fonts: Six Caps from Font Squirrel, the Lato font family from Latofonts, Dustismo Roman from Dafont and Garamond italic from Fontpalace.

The stock photos Ruaridh's used are from iStock: Purse, Vintage woman, Watch, Glamorous girl, Ghetto girl and Portrait of woman.

Project Files

(it’s free!)

Next Step »