Portfolio Layout #6
Loading ...
Learn how to create a dark portfolio layout with custom made icons.
Create a new document 850×850 pixels, fill your background with the color #1b1b1b. Select the rectangular marquee tool and create a box the width of the canvas, fill with the color black for now.
Add these layer styles to your rectangle.
Your rectangle should now look like this.
Add your header title using the colors #adc203 and #424242.
Now add your navigation text to the right of your text using a smallish font size.
Above your text add a small icon to represent that section, all the icons i used are from the custom shapes libary.
Add these layer styles to each of the icons.
Now draw a square over each of the icons and text. (i have done each square seperatly, the image below is just to show the widths of each square)
Once you have drawn all the squares fill them white then merge them all together, set the layer opacity to 5%. Then add a layer mask and drag a reflected gradient over the top to blend in the top and bottom edges. Your end result should look like this.
The next steps are optional, duplicate your header title text and flip vertically drag the duplicated text under it to act like a mirror then add a layer mask to produce a reflection. Also if you make a diagnol line pattern (included in PSD) then add some diagnol lines to your header.
Now select the rounded rectangle tool with a radius of 10pixels draw out a small rectangle.
Add these layer styles.
Now using the same tool add a small square (hold shift while dragging with the mouse to produce a perfect square.)
Add these layer styles to your square.
Now duplicate your home icon and drag it into the center of your square, also add your content title. Select the elliptical marquee tool and create a white circle that overlaps your icon, ctrl + click your icon while the white circle layer is selected, goto “select > inverse” and hit the delete key set opacity to 25% and you’l be left with a simple shine over your icon. (do the same with your content title box using the polygonal lasso tool).
Now select the rectangular marquee tool and draw a rectangle underneath your icon.
Add these layer styles to your rectangle.
Finally set layer opacity to 24%. Follow the above steps for your other content boxes and footer.
Now add your content to each section.
FINISHED
Layout inspired by “carl”
41 responses so far!
Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!
-
1
Xphunt3r.blogspot.com ~ Jun 19, 2008 at 5:32 am
Another Top Rated
-
2
Dule ~ Jun 19, 2008 at 7:19 am
Nice man! I am searching designs for my own homepage and here I get a lot of good impressions. Maybe you could also do some CSS tutorials especially for handsome designs like this. Great job guy!
-
3
D. Carreira ~ Jun 19, 2008 at 12:20 pm
-
4
Arend ~ Jun 19, 2008 at 4:55 pm
WOW… very nice one man! really impressive.
too bad i dont have any websites that need refeshment… but otherwise this one would on the top of my list
Good luck on the updating
-
5
sky ~ Jun 20, 2008 at 10:12 am
This is precisely I wants to study thank your teaching
-
6
Neil ~ Jun 22, 2008 at 5:32 pm
This is cool! yet another great tutorial. Don’t know why you haven’t written a book on web design with a selection of some of these layouts. You would make a mint!!!
-
7
Sandeep hijam ~ Jun 23, 2008 at 10:50 am
Good, nice with the effective looks of the icons. Nicely layout contents. Keep up the good work. Always keep in touch
-
8
Mathew ~ Jun 23, 2008 at 8:32 pm
Thanks for this great tutorial, I might base parts of my next design on this tutorial!
-
9
Tanvir ~ Jun 28, 2008 at 10:51 am
I love the design. Something to think about
-
10
Ahmed El-ataoy ~ Jul 1, 2008 at 9:28 am
awesome tut i made it but i didn’t like my design . I’ll try to edit it
here is it
http://up5.m5zn.com/photos/00057/62rywqk8rnry.jpg -
11
waqas ~ Jul 3, 2008 at 6:09 am
outstanding work done………….simply awesome
-
12
Nibinaear ~ Jul 8, 2008 at 2:08 pm
Sorry but this is barely working for me. How is the #020203 and #333333 supposed to show up on the black background? You can’t even see anything. Also, some of the colour settings aren’t shown, for example on the stroke for the rounded rectangles.
Other than that the tut is going ok, making my way through, although slowly.
-
13
ADMIN ~ Jul 8, 2008 at 4:05 pm
i use an LCD HD flatscreen widescreen monitor, i surpose my colors must be much richer. nothing i can do, sorry.
-
14
Timo ~ Jul 9, 2008 at 1:14 pm
I would love to complete this tutorial but I’m unable proceed after the “Now draw a square over each of the icons and text” -part.
I draw the squares (OK), fill them with white color (OK) (PS asks to rasterize before filling them), merge layers (OK)and then add the opacity. After opacity setting I’m unable to see my icons. Any ideas? -
15
you filling the squares on the text layer.
create a new layer above the text layer 1st, fill with the color white. only merge the white squares together, then lower the opacity of the squares, hope this helps
-
16
Ok, thanks for the tip. I’ll give it a try soon and then let you know how it goes.
-
17
MuNkY ~ Jul 10, 2008 at 10:24 pm
Great tut,loved it.Tnx for all the help.
-
18
kovilen ~ Jul 12, 2008 at 3:22 pm
Nice tutorial, dude!! (as always)
-
19
27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts ~ Jul 14, 2008 at 4:05 pm
[...] Cool Dark website Design [...]
-
20
[...] Cool Dark website Design [...]
-
21
[...] Cool Dark website Design [...]
-
22
CSS TEMPLATE NOW ADDED FOR DOWNLOAD
-
23
Jiva ~ Jul 24, 2008 at 11:24 pm
thanks very mush
-
24
Jeremy ~ Jul 25, 2008 at 3:31 pm
Do we have to buy it? Cause when I clik download it shows I have to buy it.
-
25
yes im afraid you do. all helps with the runnings of the site
-
26
Mat Lynch ~ Aug 2, 2008 at 10:04 am
Sorry if it was rather similar to yours, but the tutorial was great and well explained, the end result is brilliant and will really help me in the future, thanks for sharing. Here is my result.
http://i219.photobucket.com/albums/cc86/Holystryk/WebPage1.png -
27
ravi ~ Aug 6, 2008 at 2:28 am
this site is very fine ..i really like this site…u r great my dear freind….thanx
and always make as this site ….ahead nothing…{..od bless you..} -
28
larissa tavares da conceição ~ Aug 8, 2008 at 5:07 pm
Liindas
-
29
black guy ~ Aug 15, 2008 at 3:56 pm
Wow!!!
-
30
PSnewb ~ Aug 16, 2008 at 7:15 am
Awesome Tutorial! But i got stuck at the icons… >.< Cant find where the Custom Shape Library is….
-
31
http://www.hv-designs.co.uk/tutorials/swiss_knife/step1.gif
check that image for custom shapes tool.
-
32
Zero ~ Aug 22, 2008 at 2:09 am
Thx allot I made this one, learned allot from this turorial, <3 !!!
-
33
ehem ~ Aug 23, 2008 at 8:54 am
im really new at these template stuff and this maybe a stupid question
that layout is reallly nice, but how do we put that in a blog or website? i mean that is just a pic right? no links work.. -
34
where do i get those custom shapes? can anyone plz give the link..
-
35
@ehem, Go to Adobe.com and you should be able to find some cool shapes… i found alot of em right after i posted…
-
36
Pro Photographer ~ Sep 16, 2008 at 3:36 pm
This is a very cool portfolio tutorial.
-
37
This is a very cool portfolio tutorial
-
38
rathod mehul ~ Sep 19, 2008 at 10:03 am
very very nice Design i like it.
thanks…
-
39
[...] Dersi Görüntüle [...]
-
40
WebMahsulleriOfisi ~ Oct 2, 2008 at 2:56 pm
good tutorial;) thanks!
-
41
Cool Dark Web Layout Design…
Learn how to create a dark portfolio layout with custom made icons.
……
