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.
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:
- Twitter Box User Interface Design in Photoshop
- Where to Find the Perfect Logo Inspiration
- Create a Chalkboard Style Wordpress Layout in Photoshop
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Create a Theme Store Website Layout in Photoshop
- Beautiful Music Streaming Website Design in Photoshop
Leave Your Response