Mobile design is getting bigger and bigger as the weeks go by, its only a matter of time before mobile design tutorials start popping up in every tutorial website. So to kick it off I'll be showing you how to create a simple mobile login screen.
What We'll Be Creating
Setting Up The Canvas
Before we start i just want to point out that we'll be designing the login screen based on the iphone 4 screen resolution, if you want to create a login screen for iphone 3GS and below then you can simply resize the canvas by 50% when the tutorial is finished.
Tip
Iphone 4 and 4s screen resolution is 640 x 960 pixels, Iphone 3gs and below is 50% smaller with a screen resolution of 320 x 480 pixels.
Create a new document (Ctrl + N) 640 x 960 pixels with any colored background then setup 4 sets of guides which will make up for 20 pixels padding around our canvas. To create a new guide go to "View > New Guide" enter the values in the image below.
Creating The Background
Once you've created the guides go ahead and add some style to the background using the following layer styles and settings below. If you find your background layer is locked simply right click and select "Layer From Background" to unlock it.
Were now going to add a subtle pattern to our canvas, start off by creating a new document (Ctrl + N) 4 x 4 pixels then using the "Pencil Tool" (B) replicate the image below pixel by pixel.
When you've finished go to "Edit > Define Pattern", saving it into your pattern library. Now fill a new layer using your pattern then set the layers blend mode to "Soft Light".
Creating The Mobile Page
Starting from the top, add your mobile websites logo. I haven't done anything specific I've just added a shape to represent my mobile page. On your design you can put a bit more thought behind the making of your logo.
Underneath the logo add some text making it clear to the user what it is you are asking them to do.
Creating The Social Buttons
Select the "Rounded Rectangle Tool" with a radius of about 5 - 10 pixels then drag out a rectangle from the left guide all the way over to the right guide. You want to make the buttons quite chunky and easy to press when on the mobile device.
Once you've created the rectangle add the following layer styles.
You should have something like this.
Using the "Rounded Rectangle Tool" again create a 2nd rectangle only this time make it about 10 pixels smaller all the way around.
Repeat the steps above and create a further two buttons only this time round make the last button half the size.
Your probably guessing which social buttons I've used. Starting with the first button (Light Blue) add the following layer styles.
To the darker blue button add the following layer styles.
Finally add the following layer styles the last small button.
Once all the layer styles have been applied, load a selection around one of the buttons. To load a selection simply hold down the Ctrl key on the keyboard and click the little thumbnail in the layers window.
Create a new layer above the button you have loaded the selection around then fill the layer with your pattern which you created earlier. Once the selection has been filled deselect (Ctrl + D) the selection and set the layers blend mode to "Soft Light" and opacity to around "10%".
Repeat the steps for the other two buttons.
Finishing Up
Finally label each button using the "Type Tool" (T) then using the icons from the resource list, add the button symbols to the relevant buttons.
Conclusion
Look out for mobile design and mobile coding tutorials soon.
