Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Creative Portfolio Layout

Creative Portfolio Layout


As usual i will start with a new document. To open a new document please go to File > open, and choose the following size: 760x770 pixels.

First we will place a photo with a tree on our document.

Creative Portfolio Layout image 1

Based on this tree we will continue to work on our layout. i will create a place where we will add our buttons. i will use Rounded rectangle tool, and i will place an image exactly under the image with the tree.

Creative Portfolio Layout image 2

On the other side of the layout i will add another shapes ( all made with rounded rectangle tool ).

Creative Portfolio Layout image 3

Right above the background layer , please create a new layer. to create a new layer, please press on Ctrl+Shift+Alt+N in the same time.

With gradient tool, draw a line from the top of the layout to the bottom.

Creative Portfolio Layout image 4

Now please download the following set of cloud brushes: Cloud Brushes.

Create a new layer right above the last layer, then with the brushes you just downloaded , add some clouds.

Creative Portfolio Layout image 5

Select Rounded rectangle tool, and add some buttons. please be sure you will place the layers for this buttons under the big brown shape.

Creative Portfolio Layout image 6

Then for all this buttons , add some layer styles.

I am using the following layer styles for all the buttons.

Creative Portfolio Layout image 7

Creative Portfolio Layout image 8

Creative Portfolio Layout image 9

Creative Portfolio Layout image 10

This is my result.

Creative Portfolio Layout image 11

Now for all this big shapes, please add the following layer styles.

Creative Portfolio Layout image 12

Creative Portfolio Layout image 13

Creative Portfolio Layout image 14

Creative Portfolio Layout image 15

And here you can see the result.

Creative Portfolio Layout image 16

Now it is time to add some text on the top menu.

Creative Portfolio Layout image 17

After that please add some text and images also on the other parts of the website.

Creative Portfolio Layout image 18

Now if you have Talk-Mania Big-Pack go inside your Brush folder, then choose web icons.

Creative Portfolio Layout image 19

Load icons-1 file, and select the following brush.

Creative Portfolio Layout image 20

On a new layer ( press Ctrl+Shift+Alt+N ) add the icons.

Creative Portfolio Layout image 21

This is my final result. i hope you like it. tomorrow we will have another new tutorial.

Creative Portfolio Layout Tutorial: Final Result



Author's URL: amitk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Creative Portfolio Layout"

Only registered users can write comment

No comments yet...