3D Studio Layout - Portfolio Layout

3D Studio Layout - Portfolio Layout

Hello

Today i will create Tutorial Number 145 from 500 Tutorial Marathon
I will show you how to create a portfolio layout

Let's start with a new document with the following settings
760x770 pixels , and with a white background

Duplicate the background layer ( to duplicate the layer please be sure you have the layer selected , then press CTRL+J )
With this new layer selected , go to Filter > noise > Add noise and use the following settings :

Then Press CTRL+I to invert the colors. you will have a black background. do not worry. this is normal.
Create a new layer above this last layer ( to create a new layer press CTRL+SHIFT+ALT+N )

Change the foreground color to : #f3b502
and the background color to : #da5d03

then with gradient tool draw a line from the top of your canvas to the bottom.

After you will release the mouse button , please change the blending mode for this layer to difference

Select Rounded Rectangle tool , and crate a white shape

Then with the same tool create another shape, this time create this shape a little smaller, and with a light gray #ebebeb

Now we will load the selection for the small gray shape. to load the selection hold down the CTRL key down , and with left mouse button , click on the layer thumbnail like in the following image

You can see a selection around the small gray shape

Create a new layer ( press CTRL+SHIFT+ALT+N ) , then press on D. this action will reset the colors to black and white

now go to Filter > render > clouds

you will see some nice clouds on your layout

Press CTRL+D to deselect , then lower the opacity of this layer with clouds to 40 %

This is my result

Now please select all the layers except background layer, and press on CTRL+E ( this shortcut action will merge all the layers into a single one )

I have created for you a nice set of brushes. It is available on www.photo-shop-brush.com
Please download the brush set and load it in photoshop

Then with the first brush from this set, create the following drawings

Now select Eraser tool and with a small brush delete some parts of the layer until you have the same result like mine

Now i will add another new layer ( press CTRL+SHIFT+ALT+N ) and i will use a single brush from Talk-Mania Big-Pack
if you don't know in this pack you have over 4000 different brushes in 3 different sizes ( almost 12.000 brushes )
In case you don't have the big pack i recommend you to buy it, because it will save a lot of precious time.

For example i am creating this layout in less then 20 minutes with the help of this pack. ( and i need over one hour to write it here for you - LOL )

After i have played a few seconds this is my result

Now i will place a 3D rendering with a nice 3D truck
In the same time i will also some text on my layout with type tool
This is my final result. i hope you like it

Smooth, rounded portfolio layout

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.

Add following layer style to this layer.

Drop Shadow

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.

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.

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.

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

With same technique add other buttons.

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

Use color: #DCDADA

Place it like here:

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:

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!

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

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

Portfolio Web Layout

1. Make a 560×560 Photoshop document and then make a rounded rectangle with a radius of 15 pixels

2. Make a smaller brown rectangle for the content area

3. And a thing light brown one for the menu bar

4. A light grey rectangle for the header

5. Choose the custom shape, with the arrow pointing to it

6. Create a red version of the shape behing the brown rectangle, and you’ve finished!

Modern personal web layout

In this tutorial you will learn how to make a modern personaql layout.
Layout which you can use to express yourself on the internet.
To show people who you are and what you are.

1. Create a new document, width 600 px, height 600 px, background color - white.
2. Make a new layer.Name it header.
By using Rectangular Marquee Tool (M) with width 580 px and height 110 px make a
selection like on picture below.

Fill it with some color.

3. Add following layer styles to your header layer

Drop Shadow

Inner Shadow

Bevel and Emboss

Color Overlay
Use this color: #EDEDED

Stroke

Hit OK and proceed to next step.

4. Now hold CTRL and click on your header layer to make a selection around it.
Go to Select -> Modify -> Contract. Type 6 in contract box. Hit OK.

You should now have something like this.

Now, once again go to Select -> Modify -> Contract, but now enter 1 in contract value.
Make a new layer, call it header fill - this will be our fill of our header.
Fill this layer with white color.

Now, I’ used an image which I had from earlier on my computer as a header fill.
You could use mine or you can make your own or whatever you like.
Here’s mine image.

If you’re using my image, open it up in photoshop and then copy it to your layout file.
Place here, over the header fill layer by using your mouse or keyboard arrows.

5. We are done with header. Now we will add a placeholder for site title and also a site title text.
Grab Rectangular Marquee Tool (M), width 125 px, height 15 px. Place it like on picture below and click on header layer.

Make sure that you are on header layer and fill with any color.
Move your header layer above the header fill image in layers window.

Now by using Horizontal Type Tool (T) add some text. I used font 04b08.

6. That’s it with header part. Now we will add navigation buttons.
So, pick up rectangular marquee tool (m) and make a selection, width 80 px, height 15 px.

Place you selection like on picture below.

Make a new layer and fill your selection with any color. Now, CTRL + D to deselect and apply the same layer styles as in header.
Copy your layer for 4-5 times and place them like on picture below.

Add some text to your buttons. I used font 04b08.

7. Now, we will make a box where our fresh content will be. Make it like you’ve made header.
Make a selection 440×410 pixels. Fill with any color, add the same layer styles as in header or navigation. Go to Select -> Modify -> Contract, 6 pixels contract.
Hit Delete and CTRL+D to deselect. Place your layer like on picture below.

Now, make a new layer. Make a selection using Rectangular Marquee Tool (M), width 426 px, height 25. Fill this selection with #EDEDED.
Hit CTRL + D to deselect and place your layer like on picture below.

Make new layer again and with Pencil Tool (B) make a dotted line. (Set size of pencil to 1 pixel and paint every second pixel).
Also, I’ve added some text. I think you all know how to add text in photoshop. Don’t you?

Now we will add sideboxes.

8. Make new layer, and make a selection width 130 px, height 180 px, fill with any color and add the same layer styles as in header.
Go to Select->Modify->Contract. enter 6 as cotract value. Deselect
Now make new layer. Make a selection, width 115px, height 25px. Fill it with #EDEDED. Place it like on picture below.
Again, make new layer and add a dotted line. I think you know how to do that.