Create an Apple inpired website layout in Photoshop
In this tutorial I will show you how to create an apple inspired website, very clean, and very attractive in the same time. This layout can be used very easy to showcase your portfolio, or your art work.
With small modifications you can transform this PSD layout into a wordpress theme.
Want to download ALL PSD layouts ? Join VIP membership.
Before you start this tutorial you will need the following set of vector icons : Universal icons. If you want teh direct download link please click here
I will create a new empty document with the following size: 960×900 pixels. Of course you can use another value for the height.
Select Rectangle Tool, and create a shape on the bottom of the layout. I will use a red color for this shape, and later in this tutorial I will add a simple gradient.
Now I will add a simple layer style:
This is my result so far
I will add some images with a “30-inch Apple Cinema HD Display”
On top of the layout I will create a navigation bar. I will make this navigation bar with Rounded Rectangle Tool.
For this navigation bar I will add some layer styles
This is my result
Select this layer in your layer palette, and duplicate the layer by pressing the CTRL+J key combination.
When you have two layers, please select them in your layer palette, and press CTRL+E to merge the 2 layers into a single one.
Select Eraser Tool, and use a round smooth brush to delete the left side of the navigation bar.
I will add our latest logo with Grafpedia on the left side of the navigation bar.
Now we will work on the body of the layout. I will choose Rounded Rectangle Tool to create a shape on the bottom of the layout. I will use a blue color, but in our next step this color will be changed with
some layer styles
For this blue shape I will add the following layer styles
This is my result so far
I will add some icons from this set of vector icons: Universal vector icons, on the left side of the body.
To add the icons download this set of icons: Direct download link, and open the vector .eps file inside Photoshop. It will look like in the following image
To copy each icon in separate layer you need to make a selection around each icon with Rectangular Marquee Tool.
Press on CTRL+C (copy), and then go to the layout document, and press on CTRL+V (paste), and you will see the new icons on a new separate layer. With Move Tool you can place the icons where you want.
I will add with this method another icon (pen icon) on the right side of the layout. In the same time I will add some text too.
On the top right side (above the navigation bar) I will place 2 round shapes and another icons with a membership card access. In this area you can create a login box.
On the bottom of the layout I will add some thin lines with Line Tool
My last step is to add some images inside the LED cinema display monitors. This is my final layout.
If you want to download This layered PSD layout please join the VIP membership. For 9.95$ you can download ALL premium resources from Grafpedia including this layout.










































Thanks for tutorial
Nice tutorial, thanks
Cool, i want this one…
Nice Tutorial!
Overall I like the design, although the monitors are a little too large for my taste. It especially amuses me the fact that the left side “lorem ipsum” is actually an explanation of what it actually is. lipsum.com?
Very nice indeed. Almost as nice as the Grafpedia redesign. I’ve been following along on a couple of these tutorials and they’re well written and easy to follow. Keep ‘em coming!
WoW
nice tutorial. Very easy and well defined . Thanks for sharing this nice post.
learnt something from this tutorial. thanks
That’s exactly what I need wow thanks!
very cool tutorial !!!!!!!!
thanks!
added to my tutorial Database
Good work
Great tutorial! I’ll definitely be linking to this from my site. I think people really want the clear step-by-step instructions. Many Thanks.
cool tutorial
Thank you. Great post
we always design a site with this in mind
Thanks very nice tutorial