Web Design Layout #4 Tutorial
Loading ...
Learn how to create a dark style unique web design layout.
Create a new document 800×800, select the colors #2c2d2e & #47474a (or something similar) and drag a linear gradient over your canvas.
Now create a new layer, using some grunge brushes add some grunge.
Set layer opacity to 50% and blending mode to soft light. Now select your background layer and add some noise by going to “filter > disort > noise”.
Now merge both layers together, and goto “filter > render > lighting effects” use the settings below. (sorry about quality of image)
You should now have something like this.
Now select the rounded rectangle tool and make these 3 set of boxes.
Once you have made the boxes set the all the layers opacity to 40% and add these layer styles.
You should now have something like this.
Add your site title and logo.
Still with the text tool add your navigation text and main text.
Now using adobes custom shapes add a selection of small arrows next your navigation text and 2 big small arrows at the very bottom (see picture below).
Under “welcome to our site” add a small rectangle fill with a dark shade of blue/grey.
Now take abit of time to add a brief description of your website.
Now select the color white and select a grunge brush, add abit of grunge into your header on the right side.
Add your text for your other 2 sections and add a third section at the bottom labeled “featured work”.
Now select a couple of pictures of your choice for your work and recent entry.
Now were going add abit of shading to our header and navigation, starting with the navigation, select the color white and the rectangle marquee tool. Draw a rectangle across half of the navigation and fill with white.
With your white box layer selected, hold ctrl and click on your navigation, now goto “select > inverse” then hit the delete key on the keyboard. you should be left with this.
Now add a layer mask and select a reflected gradient, drag the gradient over the left side from the middle so both the left side and right side smooth into the box. do the same with the header. you should have something like this.
29 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
BitstreamDreamer ~ Nov 22, 2007 at 1:27 am
Very nice tutorial!!! THX, dude!!
-
2
Dev ~ Dec 2, 2007 at 6:48 am
Very nice tutorial! Thanks, dude!
-
3
Free Icons ~ Dec 3, 2007 at 1:09 am
Great layout.
Like the grunge effects
DM -
4
Great layout tut.
Thanks for sharingDM
-
5
omid ~ Dec 11, 2007 at 9:19 pm
Hello,
That’s Great, Thank u. -
6
Athar javed. ~ Jan 2, 2008 at 4:54 am
it is nice work and a good idalogy….
thanks to help for us that are new in photoshope..
by usuing this tutorial i feel confident in photoshope.
thaks. -
7
Imaine ~ Jan 3, 2008 at 9:17 pm
Thank you very much for this great tut ! You really helped !
-
8
spooxas ~ Jan 5, 2008 at 9:39 am
Hey
Really nice tut. Thanks. -
9
radwan ~ Jan 12, 2008 at 12:29 am
Great!!! Thank You!
-
10
Hunka Web Solutions ~ Feb 26, 2008 at 6:39 am
Very nice concept and good way of exploring the tutorial.
-
11
nvelopd ~ Mar 4, 2008 at 2:50 pm
This was a really good tutorial but I have one question about it. I have had this problem for a while now so I decided to just finally ask it. I notice that if you where to save this photoshop image for web and view the site on a web browser there would be a white background color. How do web designers avoid this problem?
-
12
PhotoshopHome ~ Mar 26, 2008 at 11:50 am
this is really awesome tutorial. Thanx 4 sharing!
-
13
Bobby Steels ~ Apr 13, 2008 at 11:05 pm
One little question… what format do you save this work under? Not Jpeg or any photoshop format?
-
14
ADMIN ~ Apr 14, 2008 at 4:09 pm
jpeg, PSD, etc… anything really depending what you plan to use it for
-
15
ps3 blog ~ Apr 14, 2008 at 8:53 pm
brilliant article i like the effect on the text box - also i love anything grundge keep up the good work.
-
16
in response to nvelopd question - you can assign the background of a webpage to any colour you like. default colour is white - so you can change it to what ever colour you like. explore css - you can change the background to graphics colours etc.
-
17
lorenz ~ Apr 15, 2008 at 11:26 am
totally cool… it helps me a lot
-
18
jpleon ~ Apr 20, 2008 at 2:15 pm
i got a question. :p you said in the tut:
Now create a new layer, using some grunge brushes add some grunge.
i know how to create a new layer. but i don’t understand the grunge…
can you help me with it? i have photoshop cs 3 -
19
you need to download some grunge brushes.
-
20
Clark ~ Apr 30, 2008 at 6:36 am
Very nice tutorial!!
I’m newbie in webdesign. I’m now wondering how to take this photoshop in the real on homepage.
How to begin first? Mockup or CSS, late photoshop. So final to take photoshop into CSS? -
21
Sindre Hansen ~ May 27, 2008 at 7:21 pm
Hi. I was following your tutorial, and when I got to the last step it said: “Now add a layer mask”. Which brings me to my question, What is a layer mask?
Except for that, a great tutorial
-
22
the layer mask button is the 3rd button at the bottom of the layers pallette looks like a square with a circle inside it
-
23
drone one ~ Jun 7, 2008 at 7:26 am
? how do you splice it all up ,and code the “featured works ” part.
thank you -
24
Wazz ~ Jun 14, 2008 at 10:42 pm
Muy bueno el tutorial, the tutorial is a good yeah!!
-
25
santu ~ Aug 12, 2008 at 6:17 pm
kool,.,.,
-
26
thanxxxx
-
27
Michel ~ Aug 28, 2008 at 12:00 pm
It’s cool … i did it … but how can i use it as a website? i mean there is no html code. i don’t make a website with photoshop yet. it’s my first time.
-
28
15 Amazing Web Design Layout Tutorials in Photoshop No.01 | Naldz Graphics ~ Sep 27, 2008 at 4:36 pm
[...] Web Design Layout #4-hv-designs [...]
-
29
[...] Dersi Görüntüle [...]
