Smooth, rounded portfolio layout

smooth_layout250x100.gif

In this tutorial you will learn how to design a smooth, rounded portfolio layout.
Designing a layout is pretty easy when you have your idea written in your head, or on paper.
Sometimes even a simple thing looks good. The old one: “Less is more”
This is what this tutorial is.
Simple and cool looking smooth portfolio layout.


1. Make a new document. 800 x 550 px, background color set to #5F4545.

2. Make a new layer. Use Rectangular Marquee Tool (M) and make a selection 760 x 500 pixels.
Now go to Select -> Modify -> Smooth, set 10 as sample radius. This will make rounded corners on our selection.
Fill it with #818181.
CTRL + D to deselect and place layer like on picture below.

smooth_layout_1.gif

Add following layer style to this layer.

Drop Shadow
smooth_layout_2.gif

3. Again, make a new layer. Use Rectangular Marquee Tool (M) and make a selection 700 x 480 pixels.
Now go to Select -> Modify -> Smooth, set 10 as sample radius. This will make rounded corners on our selection.
Fill it with #B3B3B3.
CTRL + D to deselect and add the same layer style as in step 2.
Place this layer like on picture below.

smooth_layout_31.gif

4. Now, one more time, make a new layer. Use Rectangular Marquee Tool (M) and make a selection 650 x 460 pixels.
Now go to Select -> Modify -> Smooth, set 10 as sample radius. This will make rounded corners on our selection.
Fill it with #FFFFFF.
CTRL + D to deselect and add the same layer style as in step 2,3.
Place this layer like on picture below.



smooth_layout_4.gif

5. Ok, main part is over. Now, we will add navigation buttons.
So make new layer. Using Rectangular Marquee Tool (M) make selection 20 x 50 pixels.
Go to Select -> Modify -> Smooth, enter 2 a sample radius. This will make our buttons rounded.
Fill it with white and place like on picture below.

smooth_layout_5.gif

Add some text to this button (I used Verdana,14, bold). Your can rotate it by pressing CTRL + T.

smooth_layout_6.gif

With same technique add other buttons.

smooth_layout_7.gif

6. Now we will add some boxes.
Make a new layer. Make a selection 433 x 262. Fill it with any color.
Add this style:

Stroke
smooth_layout_8.gif
Use color: #DCDADA

Place it like here:

smooth_layout_91.gif

Here you can put your latest work screenshot. That’s why I added “latest work” text. You’ve learnt how to rotate text in step 5.

7. Again, make new layer, make new selection 500 x 150. Fill it with #E5E3E3, deselect and place like below:

smooth_layout_10.gif
I also added text.

8. Now, let’s add some site title.
Write some text. Rotate it as in step 5 and add style like in step 2. Here’s where I placed it!

smooth_layout_111.gif

9. I assume you all know hoe to write a text in Photoshop. Here’s how it looks like with some text.

smooth_layout_12.gif

10. Finally, I added some brush shape. I think I got these brushes from pixelchick.dk.

smooth_layout_13.gif

 
==== UNIK BLOG ==== - Wordpress Themes is proudly powered by WordPress and themed by Mukkamu Templates Novo Blogger