GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

12
Oct

Create an Apple inpired website layout in Photoshop

Psd Themes, Templates, Tutorials, Web layouts
38 Comments

apple-inspired-layout1

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.

16

Now I will add a simple layer style:

210

3

This is my result so far

4

I will add some images with a “30-inch Apple Cinema HD Display”

51

On top of the layout I will create a navigation bar. I will make this navigation bar with Rounded Rectangle Tool.

61

For this navigation bar I will add some layer styles

71

81

91

This is my result

101

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.

111

I will add our latest logo with Grafpedia on the left side of the navigation bar.

121

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

131

For this blue shape I will add the following layer styles

141

151

161

171

This is my result so far

181

I will add some icons from this set of vector icons: Universal vector icons, on the left side of the body.

192

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

201

To copy each icon in separate layer you need to make a selection around each icon with Rectangular Marquee Tool.

211

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.

221

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.

231

On the bottom of the layout I will add some thin lines with Line Tool

241

My last step is to add some images inside the LED cinema display monitors. This is my final layout.

251

If you want to download This layered PSD layout please join the VIP membership. For 49$ you can download ALL premium resources from Grafpedia including this layout.

With 646-204 course, improve your IT expertise and knowledge and pass real exam in first attempt using 640-816 dumps and 640-822 practice exam.

Download

Responses to “Create an Apple inpired website layout in Photoshop”

Trackbacks

  1. 50 Hot New Tutorials From Around The Web | designrfix.com
  2. Excellent Photoshop Web Design Layout Tutorials | MODERN VISION BLOG
  3. Web Tasarımcıları İçin 25 Faydalı Photoshop Dersi | Tasarim8.com
  4. 30+ Best Apple Inspired Photoshop Tutorials | Dzinebook blog | Inspirational design resource for Web design - development - freelancer tips
  5. rakhmat suwandi blog » Blog Archive » 66 Excellent Photoshop Web Design Layout Tutorials
  6. Round-up of some 50 Best Layout Photoshop Tutorials | Bitmag
  7. 39 Best Photoshop Web Page Layout Tutorials
  8. 67 Web Layout Design Photoshop Tutorials

Leave a reply

.