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

Create an Awesome Black Portfolio Layout


For this layout i will create a new document with the following size

image 1

I will choose Gradient Tool , and with for the start i will load a simple gradient from our

27.000 Photoshop gradients set

I highly recommend you to apply for a VIP account. The price is 49$ per month.
You can apply for a single month, and you can download all you can see, plus the new releases for the next 30 days

After you download our you need to load a small set. To load the gradients you need to select Gradient Tool, then on the top of the screen, click on the small arrow to open the Gradient Picker
From the drop down menu choose Load gradients

image 2

Browse to our huge set of gradients, and choose any .grd file you want

image 3

I will not tell you exactly what file you should pick. Try to load a few to see better what you have inside image 4
If you do now have downloaded our set with gradients, you can set your foreground color to the ones you see in this screen shot

image 5

To change a color simply double click on the small color thumbnail

Then with Gradient Tool, make a vertical line from the bottom of your layout to the top. Follow the arrow.

TIP : IF you want to draw a perfect vertically line hold down the SHIFT key from your keyboard while you make the line

image 6

Select Rounded Rectangle Tool. Change the Radius value to 6 pixels

image 7

Then create a simple shape on your layout with the following color : #212121

image 8

Be sure you have this layer selected in your layer palette

image 9

Press on CTRL+j to duplicate this layer

image 10

Right click on this last layer, and choose Rasterize Layer

image 11

Select Rectangular Marquee Tool, and make a selection like in the following image. I am going to delete the inside part of the selection. I will add another layer with a orange color ( this is not necessary. i want to show you better what i am going to do )

image 12

Then you have to be sure you have the rasterized layer selected. Hit the delete key from your keyboard
Then press ON CTRL+D to deselect ( hide the selection )

image 13

You can see the top navigation bar at the top. This is the result i want to archive. Now i will delete the layer with the orange color, because i don't need it, on on the top navigation bar i will add the following layer styles

image 14

image 15

image 16

image 17

This is my result

image 18

Create a new layer - the easy way to create a new layer is by pressing CTRL+SHIFT+ALT+N. Select Brush Tool, and choose a Smooth Round Brush with 600 pixels )
You can adjust the size of the brush by pressing on the square brackets
"[" - to lover the size
"]" - to increase the brush size

image 19

On this new layer click one time on the right side of the layout

image 20

Then change the opacity value for this layer to 30 %

image 21

Select Rectangle Tool, and create a small shape like in the following image

image 22

For this shape you can add some layer styles

image 23

image 24

image 25

image 26

Now with Horizontal Type Tool, i will add some text

image 27

I will take the end result from the previous tutorial i wrote a few days ago: Create a web 2.0 business layout , and i will place the image on my layout

image 28

I will duplicate this layer two times. to duplicate a layer simple select the layer first in your layer palette, then press CTRL+J
I will place the duplicated layers under the main one. Then with Move Tool i will place them like in the following image

image 29

I will select the left image with my last layout tutorial, then i will go to Filter > Blur > Gaussian Blur

image 30

And i will set the radius to 1 pixel

image 31

this is my result

image 32

I will apply the Gaussian blur filter also for the image from the right side, and in the same time i will lower the opacity value from both blurred images to 80%

image 33

Now i will duplicate the image from the middle. I will create a mirror. To duplicate you need to press on CTRL+J after you select the right layer in your layer palette.
Go to Edit > Transform > Flip Vertical, then choose Move Tool , and press a few times on the Down arrow from your keyboard, until you place the duplicated image like in the following image

image 34

Select Eraser Tool, and with a smooth round brush i will delete the bottom part of the mirror

image 35

You can also lower the opacity value for this layer, and you can also apply a blur effect with Gaussian blur filter.
I will create a mirror also for the other images.

image 36

With Rounded Rectangle Tool, i will create some simple shapes in the middle of the layout

image 37

For both shapes i will add a simple layer style

image 38

This is my result

image 39

Over this shapes i will add some other images

image 40

I will select Pen Tool, and i will create a scarf

image 41

Then i will duplicate the layer ( press CTRL+J ) and i will change the color of the other shape to black
With Move Tool, i will nudge the shape on the right side

image 42

With Horizontal Type Tool, i will write some text, then i will rotate the text until i will have this result

image 43

I will select Line Tool, and i will set the weight of the line to 1 pixel

image 44

I will create 2 lines over my top navigation bar. i will use two different color. for the left line i will choose black - #000000, and for the right line i will choose #d9d9d9

image 45

I will select both lines in my layer palette

image 46

Then i will press on CTRL+E ( in this i will merge this 2 lines into a single one )

image 47

You can notice that our both lines transformed into a single line ( the most important part is that this line is rasterized ( is not vector anymore )
This is a good think sometimes.

This time it will be very useful for me, because i am going to use Eraser Tool, to delete the top part of the line and the bottom part.

I will choose a small smooth round brush ( maybe 30-40 pixels ) and i will delete the extremities of this line

image 48

I will duplicate this line several times, and i will place it between the menu items

image 49

This is my final result.

Create an awesome black portfolio layout



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: