Another great week to start with awesome Iphone App website in Photoshop, since I’ve been messing around with different layout to different clients I re-created this one for the sake of tutorial.
Today we will create an Iphone App Website in Photoshop that we will eventually convert into HTML, so you better watch out 😉 We will also use simple techniques to create a mock up and re-use some of our old techniques from the past tutorial.
You can download the PSD at the bottom of this tutorial!
Download these files first and let’s begin!
Things that we needed
- League Gothic from Fontsquirrel
- Iphone Image from Wikipedia
- Water Image from UniqueWedding
- Win7 wallpaper from PSDGraphics
- App store buttons from GraphicsFuel
- Twitter Bird from IconsArchive
- Custom Shapes from SmashingMagazine
- Icons from here (can’t remember where I download this one)
Let’s Begin
Open your photoshop, set the width to 980px to 1200px
From the files we downloaded earlier and drop it on the canvas, now select the Marquee Tool (M) and press delete.
Next, create a new layer CTRL + SHIFT + N and grab your Marquee Tool (M) on the top select a 50px like height and fill it with #000000 and change the Opacity to 58%
On the very top of the header, we will repeat the steps from above. Change the Opacity to 42%.
Next, grab the Single Row Marquee Tool (M) and use brush to fill it, use #FFFFFF as foreground color and set the Opacity to 24%
After that, we will add the logo and navigation. Just simple text will do, for the logo we used League Gothic 37.9pt Regular and for the navigation Arial Bold 12.9pt both colors are #FFFFFF.
Drop the iphone image from the files we just downloaded. Next is to select Marquee Tool (M) and draw the screen of the iphone, fill it with #FFFFF.
Next is drop the Win7 wallpaper, right click on that layer and select Create Clipping Mask and set the proper position from your iphone screen. Make sure that win7 layer is below the ipone screen we just created.
Here is our Iphone screen with logo, we added a text using League Gothic 20.9ot and the custom shape from smashing magazine (files from above)
We added a couple of text, the title used League Gothic 39pt and the content was Arial Regular 13pt. We also added the app store button from the files above, make sure you extracted the button before putting it here.
Grab the Marquee Tool (M) and select the bottom part of the canvas, make a new layer for this one.
In Blending Options > Gradient Overlay set this on gradient color settings
Here is the gradient settings for that.
After that, we added the icons and text. Icons are from the files above, text title is Arial Bold 19pt and the content is Arial Regular 13pt, both colors are #3f3f3f
As for the tweets, font used was Georgia Italic 16pt #7f7f7f, twitter bird are the from the files and link color is #1161a9.
Next is the footer background, grab Marquee Tools (M) and fill it with #ebeaea.
Select Single Row Marquee Tool (M) and fill it using brush, color is #bcbbbb Opacity is 40%
Add the logo and the navigation, font used was Arial Regular #555555 and set them to Uppercase
And we are done!
Using simple techniques you can create amazing layout, you just need an idea and a goal to what to really wanted. Hopefully you can learn from this, to sharpen your skills you need to challenge yourself, and create different layouts.
Next stop is the PSD to HTML conversion of this bad boy, if you’re stuck on some steps let me know in the comments.
