What You'll Be Creating In this tutorial I’ll guide you through the process of designing an elegant landing page for a fictional “gratitude log” service. We’ll start off totally from scratch, drafting the layout with Adobe Photoshop in no time. We’ll be using some basic and intermediate techniques to create this design with conversion in mind. Let’s get it started! Tutorial Assets In order to follow along you will need some (freely available) assets: Chillin’ in the sun photo from Skitterphoto PT Serif font from Font Squirrel Playfair Dislay font from Font Squirrel Source Sans Pro font from Font Squirrel User avatars from User Inter Faces Get the Document Ready Step 1 Begin by creating a new Photoshop document ( File > New… ) using the settings shown below. You’re free to use a canvas of whatever dimensions you prefer–the web is not fixed width, after all. Step 2 Let’s set some guides so our layout has enough space and looks balanced. I don’t always use a predefined grid, but setting some guidelines will ensure neatness and will help to define our website’s width.
↧