GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Create an Apple inpired website layout in Photoshop

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”

  1. tutorial blog 12.10.2009 um 11:11 pm

    Thanks for tutorial

  2. Ajay 14.10.2009 um 6:17 am

    Nice tutorial, thanks :)

  3. Irfan 15.10.2009 um 5:27 am

    Cool, i want this one…

  4. Chris Pierre 15.10.2009 um 10:01 am

    Nice Tutorial!

  5. Stelian 15.10.2009 um 4:17 pm

    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?

  6. Dave Wilkinson 16.10.2009 um 2:35 am

    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!

  7. clippingimages 17.10.2009 um 5:13 am

    WoW :) nice tutorial. Very easy and well defined . Thanks for sharing this nice post.

  8. Shitic 17.10.2009 um 7:31 pm

    learnt something from this tutorial. thanks

  9. Gucci handbags 2.11.2009 um 3:14 am

    That’s exactly what I need wow thanks!

  10. electronic toys for kids 2.11.2009 um 11:36 am

    very cool tutorial !!!!!!!!
    thanks!

  11. srrwebsite 5.11.2009 um 9:20 am

    added to my tutorial Database

    Good work

  12. Frank 14.11.2009 um 7:57 am

    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.

  13. Michael Weekley 11.12.2009 um 1:11 pm

    cool tutorial

  14. Stock-Vectors 14.12.2009 um 1:12 pm

    Thank you. Great post

  15. Ocala Web Design 31.12.2009 um 1:13 pm

    we always design a site with this in mind

  16. deepak kumar 23.01.2010 um 5:26 am

    Thanks very nice tutorial

  17. facebook design templates app 28.02.2010 um 2:50 pm

    Pleasant good

  18. Smart Web Design 1.03.2010 um 5:16 pm

    Really nice work :)

  19. iconz 1.03.2010 um 11:15 pm

    lovely tut!

    Ps: You have misspelled the word “inspired” as “inpired “

  20. sfg 10.03.2010 um 10:43 pm

    Excellent post,interesting article,thanks for sharing.

  21. dannysun 18.03.2010 um 8:31 am

    I am happy to visit this blog!haha

  22. allan 29.03.2010 um 10:49 am

    Great tutorial! But how do we put this in Dreamweaver? :)

  23. dropship 7.04.2010 um 2:58 am

    lovely tut!

    Ps: You have misspelled the word “inspired” as “inpired “

  24. Color Experts 7.04.2010 um 11:37 pm

    Very informative and organized tutorial…

    Thanks….

  25. loveyou 23.04.2010 um 1:08 am

    Helo, your blog is really good, I like it very much!By the way, if you like nike chaussures tn you

    can come here to have a look!

  26. optimizare seo 9.08.2010 um 6:07 pm

    This is a great post, very useful.
    Nice work!

  27. eric 29.08.2010 um 2:29 pm

    how do you link the search box, menu and links on the page? is the page basically one large picture? and then is the picture sliced up?

  28. Kelly Halberg 6.09.2010 um 2:00 pm

    That is not really clean information ;-) but thanks anyway. Wonderful blog by the way. Please check my site at Pressure Cooker Cookbook And Pressure Cooker Cookbook

  29. Habib Zaman 19.04.2011 um 3:23 am

    Wonderful site with great post. Thank you very much for share

  30. Gurbet Sohbet 17.05.2011 um 4:44 pm

    Hey, I read a lot of blogs and I just wanted to make a quick comment to say GREAT blog!

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

  • Sign up for Grafpedia VIP
Suscribe to Grafpedia's RSS feeds!

© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork

.