Apr 13th

Simple & Cloudy Portfolio Layout in Photoshop

Simple & Cloudy Portfolio Layout in Photoshop

In this tutorial you will learn how to create a simplistic portfolio page design with a cloudy header. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

LusterForever.com – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.

Final Result

Part 2: PSD to XHTML: Simple & Cloudy Portfolio Layout

Tutorial Resources

Lets get started

1. The first thing we want to do is create a new document with the dimensions of 1020×1000.

2. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #C9EFFA.

3. Insert the following blending options onto your layer by right clicking your layer in the layers palette and choosing blending options from the drop down menu.

4. On a layer under the one you just created, make a selection of the rest of your document and fill it with #535353. This will serve as the background for the remainder of your document. Duplicate this layer (Command+J), and then go back to the original layer.

5. Now add the following blending options onto your original gray background layer.

6. Next select your duplicated layer in your layers palette and then go to Filter>Noise>Add Noise. Insert the following settings in the dialogue box that appears.

7. Lower the opacity of your duplicated layer to 65%, and then change its blend mode to Overlay.

8. Now it’s time to make our cloud header. Using your Elliptical Marquee Tool make an ellipse and then add to your selection by holding shift until you get something that looks like the following:

9. Fill your selection with #FFFFFF, and then insert the following blending options:

10. For our logo I used the font Myriad Pro with the color #5EADC6. The icon for the logo can be found in the resource list at the top of this post.

11. The navigation is very simple. Use the font Helvetica for all your links. Our active link color is #FFFFFF, and the non-active are #B64366. Then use your Rounded Rectangle with a radius of 15px to make a rounded rectangle similar to the following:

12. On your Rounded Rectangles layer, insert the following blending options:

13. Behind your clouds layer, we want to add some stripes on our blue background. Using your Rectangle Marquee Tool make a rectangle similar to the following and repeat it across the screen:

14. Lower your stripes layer to 17%, and change its blend mode to soft light. Next add some descriptive text about your company with the font Georgia and the color #51656A. I then used one of the icons out of the Mono Icon Pack.

15. For the content area we want to use our Rectangle Marquee Tool again and make a selection similar to the following and fill it with #FFFFFF.

16. Add the following blending options to your Rectangles layer.

17. The next step is to create our headings for each section. Using your Rectangle Marquee Tool make a rectangle similar to the following and fill it with #000000. Then use your Elliptical Marquee Tool and make a circle similar to the following. Select both layers and then merge them together.

18. Add the following blending options to this layer:

19. In the circle I added a heart icon from the Mono Icon Pack and put a color overlay of #BF637F. The font used is Helvetica and the color is #494949.

20. Next add a few thumbnails to represent where your projects will be displayed, and then some text on the right to describe the users browsing options.

21. Add the following blending options to your thumbnails layer:

22. We want to give the user a quick option to view more projects in our portfolio. To do so I wanted to create a button that fit a long with the theme. So using your Eliptical Marquee Tool, go ahead and make a selection that looks like the following and fill it with #000000. Remember to hold shift to add to your selection.

23. Now add the following blending options to your layer:

24. All that is left for your button is to add some Georgia text with the color #2C86A2. Then use an arrow icon from the Mono Icon Pack and add a color overlay of #87C8DC.

25. For the next section we want to repeat step 17, but instead add the following blending options to your layer and lower your layers opacity to 68%.

26. Your results will look something like the following:

27. The background of our latest blog entries will be a cloud to fit with the theme. Using your Ellitical Marquee Tool yet again make a selection similar to the following by making a selection and then adding to the selection by hitting SHIFT.

28. Fill your selection with #FFFFFF, and then insert the following blending options onto its layer:

29. Next add your example links within the cloud in a similar way to the following.

30. For your contact form I am going to show you what your finish result will look like, and then we will show you how to create the form.

31. For your input fields, use your Rectangle Marquee Tool to make a selection and fill it with #3F3F3F. Then add the following blending options to your layer:

32. For the “send email” button, add the following blending options to your shapes layer and then add some white text on top.

33. The last thing to do is add a simple footer and your final result will look something like the following:

Part 2: PSD to XHTML: Simple & Cloudy Portfolio Layout

The testking offers compact training program for developer and designers with self paced testking 642-062 study guide and other testking 642-481 photoshop tutorials.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts29 Comments

  • stellacyan April 13th, 2010 at 7:15 am

    thanks! i can learn so much thing from here!

  • Vin April 13th, 2010 at 5:15 pm

    Nice Tutorial!

  • designfollow April 13th, 2010 at 7:10 pm

    great tutorial, thank you very much.

  • melek April 14th, 2010 at 2:58 am

    bardzo fajny tutek, a najbardziej mnie się spodobała górna belka i menu.
    wielkie dzięki.

    great tutorial, thanks.

  • Langel April 14th, 2010 at 9:59 pm

    I can’t help it. Every time I look at it I see tropical waves against a white background. Maybe the clouds could use a subtle texture or an inner shadow.

    • Matthew Heidenreich April 14th, 2010 at 10:40 pm

      You know what, I see what you are saying, even though there is a slight gradient in it, you could make it a little noticable (darker gray) ;-) Or you could probably add a little noise to the clouds and lower the opacity a bit to give it a little texture.

  • Jenny April 16th, 2010 at 9:50 pm

    where is the picture for the dropshadow on the cloud?

    • Matthew Heidenreich April 16th, 2010 at 10:30 pm

      thanks for finding that. I’ll add that real quick.

  • iTropics April 19th, 2010 at 6:46 am

    Thanks for the tutorial.

  • Lee Fuller April 22nd, 2010 at 6:15 am

    Really nice looking portfolio layout. Thanks for the tutorial.

  • Paul April 24th, 2010 at 6:14 pm

    Really nice looking portfolio layout. Thanks for the tutorial.

  • Vim April 27th, 2010 at 3:00 am

    Really great tutorial, simple precise and to the point, i will use these techniques in future projects. Cheers

  • clippingimages May 13th, 2010 at 2:09 am

    Great tutorial.thanks for sharing..

  • The Web Tuts June 1st, 2010 at 5:49 am

    Tutorial added to the web tuts

  • Victormax June 15th, 2010 at 10:53 am

    good tutorial

  • large format color printing June 21st, 2010 at 3:22 pm

    Thank you for this tutorial, very helpful, at the beginning I thought it was the sea, I didnt read the page name :S.

  • Katie July 26th, 2010 at 3:32 pm

    Congrats, your tutorial has been added to a list of the best Photoshop website layout tutorials, featured here:
    http://smileyhelper.com/inspiration/50-photoshop-website-layout-tutorials/
    :)

  • saurabh kumar December 1st, 2010 at 4:00 pm

    its very helpful for biggners

  • Clipping Path Design July 6th, 2011 at 6:49 am

    Awesome layout. Thanks for share this useful post…

  • Image Clipping Path September 8th, 2011 at 6:49 am

    WOW! Brilliant Portfolio Layout. I am speechless to see this. Awesome!

  • apps android September 13th, 2011 at 8:15 pm

    I’m really loving the theme/design of your web site. Do you ever run into any internet browser compatibility issues? A small number of my blog audience have complained about my site not working correctly in Explorer but looks great in Opera. Do you have any solutions to help fix this issue?

  • Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:53 am

    Nice collection! Thanks for the share

  • poorvika mobile phones October 28th, 2011 at 7:39 pm

    Great morning, could be seriously is off of concept but , no matter what, i’ve already been hunting within your web sites as properly as aesthetics definitely surely elegant. I’m just creating a fresh, new journal as battling to get bode effectively, each i do get your hands on a specific thing the mess it up. The ways quickly seemed to be to in which as a way to your site? Could really another person as i am lacking discover exercise, although use parents redesign sheets devoid of having endangering everything aquatic treadmill?

  • t mobile phones for sale October 29th, 2011 at 8:24 am

    Extremely interesting details you’ve got mentioned , thanks for posting .

  • Web Hosting February 13th, 2012 at 6:51 am

    super cute design! would make for a nice kiddie site.

  • Taupo Accommodation February 27th, 2012 at 8:33 pm

    Great tutorial especially for beginners!

  • Building Inspections Auckland March 7th, 2012 at 8:27 pm

    Just right for starters like me! Thanks for this dude…

  • Clipping path September 6th, 2012 at 7:59 am

    thanks for whipping up a great post.. congrats :)

  • vibhor April 27th, 2013 at 4:53 am

    Thanks mate.
    You solved my problem
    I saw almost 20 article for this . But finally now i got the solution
    Keep sharing good stuff like this!

Leave Your Response