October 3rd, 2008 in Photoshop Tutorials by Richard Carpenter
Personal Portfolio Layout #2
39 Votes, Rating: 4.62
Loading ...Hello there, welcome to another tutorial, in this tutorial il show you how to make a personal portfolio layout.
Create a new document 850×790 pixels, fill your background layer with the color #080808. Create a rounded rectangle by using the rounded rectangle tool, make it slighly smaller than 850 pixels so its fits nicely on the canvas. Place the rectangle at the very top.
Find yourself a nice image to use as your header, im going to use the same image i used in one of my previous tutorials located HERE. Copy and paste your desired image to the clipboard. Head back over to your canvas click your rectangle layer whilst hold the CTRL key on the keyboard, this will load the selection. Now goto “edit > paste into” you image should now be inside the rectangle, you can still resize the image while its inside the rectangle, resize the image to suit. Heres mine.
Ive also desaturated my image to make it black and white, ive also added some layer styles which are listed below.
Select the rectangle marquee tool and create a small selection to the left of the header.
Fill with the color white and set opacity to 12% now add these layer styles to it.
Add your website title and slogan inside the box. Now select the rounded rectangle tool and create a your navigation under your header, make sure the two shapes align nicely on the sides. Add these layer styles to your rectangle.
You should have something like this.
Create a selection on top of the navigation like in the image below, fill with the color white then lower opacity to about 18%, add your navigation text, and add two 1pixels lines between each bit of text for a divider.
Thats the header and navigation sorted now for the content boxes. For this bit your going to need some diagonal line pattern, im not going to show you how to make the pattern as there are loads of tutorials out there already for that, althou i shall include the pattern file in the PSD download. Select the rounded rectangle tool and create a square.
Fill with the color black then delete the rounded part from the top of the square using your desired cutting tool then add these layer styles.
You should be left with this.
Still with the rounded rectangle tool create a selection like this.
Fill with the color black then add this stroke to it.
Now click your rounded rectangle layer that you just created (the small one out the two) whilst holding the ctrl key on the keyboard to load the selection, create a new layer and select your diagonal lines pattern, fill the selection. If your diagonal lines are black you might want to add a white color overlay to it, then lower opacity to around 8%.
Repeat the steps above to create more content boxes. Im going to add a further 3 to this layout.
Label your content boxes with the type tool, ive used a small arial font using the colors white (ffffff) and the green color (#afd107).
Now begin to add your content to each box.
Now for the footer, select the rectangular marquee tool and create a rectangle across the bottom of your canvas fill with the color black then add a simple stroke layer style.
Fill your footer box also with the diagonal lines pattern and add your copyright text.
To the right of the footer add a 1 pixel green line (#afd107).
Now select a small arrow from photoshop’s custom shapes libary and add that to the line, fill the arrow with the same green color as the line then add a black 1 pixel stroke to it.
Thats it all done.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
61 Responses to “Personal Portfolio Layout #2”