Total Followers 132,503
Hello there! I know I’ve been promising tutorials over here for a long time, but as we all know things do not happen so fast as we wish, but good thing is they happen at all! Previous week I did a lot of designing, practicing myself, started to use DeviantArt more seriously – there are really good community! If you are DeviantArt user check out my profile there – dainix.deviantart.com – from now on, I’ll upload there new,fresh designs regularly!
Oh, and if you have never been using deviantart as community, I will definitely write an introduction article about DeviantArt revealing my good/bad impressions and discoveries in my devianting workflow!
Right..now about tutorial – since it’s the first professional web design Photoshop tutorial over here, I really want to hear your thoughts – where should I focus on and do you enjoy and want to see such tutorials more in future! Tutorial is also for advanced users, but I really tried to explain really detailed those hard points.
For this tutorial purposes I will be using Adobe Photoshop CS3, 960gs grid system and Windows.
This is what we will create, click on image for full preview:
Please download 960gs Photoshop template here and open 960_download\templates\photoshop\960_grid_16_col.psd file.
Hit ALT+CTRL+I or Image/Canvas Size and put new size 1200x1700px. Hit Enter. Select Background layer,set foreground color to White (#FFFFFF), press ALT+DELETE to fill whole background with white color.
Rename that Layer 1 folder to Header and create new layer there pressing CTRL+SHIFT+N. Rename it to – “Header Gradient”.
Notes
You can show/hide grid on/off pressing CTRL+;
You can show/hide rulers on pressing CTRL+R (I always show them, but I just tell this in case you don’t use them).
Take a new guide and put it on 400px. Now take Rectangular Marque tool and select that area. Use linear gradient with values – #b3b6ba to #47464e.
Create a new layer and call it “Lightning”.
Now let’s switch to Brush tool, we will use soft rounded brush with hardness 0%.
Press F5 or go Window/Brushes to bring up brush panel. Use these settings:
Brush Tip Shape:
Shape Dynamics:
With these settings use foreground color white #ffffff and just click and drag from left to right on that gradient.
Apply Filter/Blur/Gaussian Blur with 10px Radius and you should come up with pretty good effect.
To make visible only that lightning which is upon “header gradient” layer we need to make “lightning” layer dependent.
You can skip this step if you want but I wanted a little bit darker line at the top of our design.
Create a new layer “Upper Layer”, put foreground color to #2e2f33, select rectangular marque tool and create selection 20px high.
Press ALT+DELETE to fill it with that dark color and change “Upper Layer” opacity to 50%.
Create a new layer “Border”. select Single Row Marque Tool to add 1px line between that dark line and header.
Add these blending options to this layer:
Drop Shadow:
Inner Shadow:
You should get good looking border now!
We will have a lot of layers here, so it’s really important that you keep all layers organized.
Select all header layers we have created until now – “Header Gradient, Lightning, Upper Layer, Border” holding CTRL and when all of these layers are selected, press CTRL+G to group them in new folder – call that folder “BG”.
Now create a new layer and press again CTRL+G to create new group and call it “Logo”.
I did also quick text effect logo, but I will not go detailed about it, since I believe it’s not something unique.
I put logo in the left top side, which is usual placement for logotypes. Later we will add search button on the right side, to balance our composition.
In letters 1,S,T which I added separately I used Tahoma, 60pt, Strong, Bold and All Caps.
Blending Options:
Drop Shadow:
Gradient Overlay:
Also I added slogan there: “Endless inspiration and daily resources..”, where I made text a lot smaller and a little bit darker, so the main attention grabber is logotype and only then comes slogan. Only thing I added was subtle Drop shadow to slogan text.
Right now, let’s add search button on the right side. You can use horizontal guideline so logotype and search button are on the same level.
8.1. Create a new layer and call it “input box”, take rounded rectangle tool (U) and put corner radius to 5px. Draw it on the right side, mine is 260px width and 30px height.
Note – Press F8 to get Info panel – there you can see the size of your object while drawing.
Now add following blending options to Input box:
Drop Shadow:
Inner Shadow:
Gradient Overlay:
Okay, now let’s create a button. Create a new layer and call it “button”.
Grab Ellipse tool and while holding SHIFT button, create nice, rounded circle, mine has 46px height and 46px width.
Now let’s add blending options to that layer:
Outer glow:
Gradient Overlay:
I added simple Search icon which is very easy to create by yourself 
, but for this tutorial, just download this *.png search icon and add in the center of your circle.
Add some subtle text as well in input box and congratulations – we are done with search section!
Group all the search layers and call that group – “Search”.
Note
To align different layers horizontally, vertically, distribute vertical, horizontal centers use align panel on top part of Photoshop, press V button to see that panel.
Now we need to add our navigation. Create a new layer and call it “line”.
Add horizontal guideline 250px from top. Now grab Rectangle tool, color #ffffff and create rectangle 860px width, 5px height.
Let’s add our navigation on top of that line.
I used Calibri, 20pt, Sharp, color: #e2e1e2 and #ffffff color for active button. Also I would suggest to group all text layers to keep organized and clean.
Let’s just finish now, create a new layer “active cursor”, which will describe visually which section is currently active. I chose Portfolio section in this example, so we will add that cursor under portfolio text.
Take Polygon lasso tool and while holding SHIFT to get 45 degree angle and create selection like in the image below, fill it with #ffffff (foreground color) by pressing ALT+DELETE. I added also subtle gradient to that cursor, but that’s your own choice.
Group all navigation layers by selecting them all holding CTRL and pressing CTRL+G (group), call this group – navigation.
Excellent – we have finished our header section! Now select all groups we created previously – bg, logo, search and navigation and group them in new folder, call it “Header”. This is how our layer structure should look like now:
Create a new layer and call it “bg”. Add horizontal guide, which is 300px from top, our background will be right under that guide. Change foreground color to #313237, take rounded rectangle tool with radius 10px and create 910px wide and 390px high rectangle. Center that layer and press CTRL+CLICK on bg layer to select it.
Now let’s add some lightning. Go to Filter/Render/Lightning Effects.. and create something like I’ve got:
Press OK and now let’s add some noise. Go to Filter/Noise/Add noise and add 1% amount, uniform, monochromatic noise.
We should get nice looking background now, deselect bg layer by pressing CTRL+D.
We need to add 3 featured works now, where one will stay in front and other two will be a little bit behind. In that way we will get nice 3D effect.
I used here 3 of my previous works, should be easy – just add something similar like I’ve got here, but keep in mind that left and right images should be in one size to look better.
Finally add outer glow in blending options to all those 3 images:
Outer glow:
You should get something similar like I have here:
Create a new layer, behind featured work layers, take Elliptical Marque Tool (M), put feather to 20px, foreground color to white #ffffff and create selection like I’ve got. Press ALT+DELETE to fill it with foreground color, which is white. Change layer blending mode to overlay and we’ve got nice light shadow.
Right click on that layer and create 2 duplicates to other featured works. Finished result looks like this:
I grouped all the featured work images and shadows in separate group – “Feat-Img”.
Right, we will add also separate navigation for featured works as well as buttons later, but now create a new layer and call it “nav-bg”.
Take rectangle tool (U), change foreground color to #e8e8e8 and add 940px wide and 50px wide rectangle in the front of featured slideshow bottom side.
We need to add some shadow now on both sides, so change your foreground color to #d1d1d1 and CTRL+CLICK “nav-bg” layer to select it. Now create a new layer “Shadow”, find your gradient tool (G) choose this one – Foreground to Transparent, linear gradient, mode:overlay.
Apply gradient to both sides by clicking and dragging from left to right, and the same to right side, but then from right to left.
Right, now we need to get that 3D effect, just follow and you understand what I mean.
Create a new layer, call it “Left Side”, zoom left navigation side, take Polygonal lasso tool and create selection like I’ve got! Fill it with color.
Let’s go to blending effects now and add gradient overlay:
Gradient Overlay from #767676 to #d4d4d4 color. Duplicate this layer, CTRL+T to select it, then right click on it, flip it horizontal and add to the right side.
Okay, we have done featured navigation background, now let’s group all layers to group “Feat-Nav”.
As always, create a new layer and call it “btn1″. Take rounded rectangle tool, put radius to 5px and create rectangle.
Now add blending options to this layer:
Bevel and Emboss:
Gradient Overlay from #ebe9e9 to #ffffff, angle – 90 degree, linear gradient.
Right, now duplicate btn1 layer 3 times, rename those layers to btn2, btn3, btn4.
Great! Now let’s create active button are as well. I picked btn3 layer and just changed blending options:
Drop Shadow:
Inner Shadow:
Gradient Overlay: linear gradient, from #c2c0c0 to #e2e2e2.
Great! Now just add some text, grey on inactive areas, but white on active area. Looks pretty good already right?
Now group all navigation button and text layers and call that group “buttons”.
This is how far we are now:
Now we will add some rounded buttons on this featured work section so it would be easier understandable for new visitors.
Actually I just duplicated that search button and then put on some arrows and that was it.
Right, when you have those two buttons duplicated, group them in separate group called “rounded buttons”. I hope you know how do to that already.
I’ll just explain how I got those stylish arrows. As always, create a new layer, call it “arrow”.
Select Custom Shape Tool (U), and find Arrow 2. If you haven’t got such shape, click on little arrow button and load all shapes – you should see now arrow shape as well!
As you may see in rounded button picture, I added two arrows (both arrows are in the same layer in my case).
Let’s add some blending options to those arrows:
Drop Shadow:
Inner Shadow:
Gradient Overlay:
Gradient is from #b0b0b0 to #ffffff.
Duplicate your arrow layer, flip it horizontally and add to right rounded button. We are done with featured work section!
Now group all the featured sections groups in one – rounded buttons, buttons, feat-nav and feat-img and call the new group “featured-slideshow”.
Now let’s change that white background. Create a new layer “content-bg” and put new horizontal guide 1400px from the top, so there are still 300px for navigation left.
Take Rectangular Marque Tool and create selection, where our header ends until that 1400px guide mark. Change foreground color to light grey, I used #e9e9e9 and pick your gradient tool (G) Foreground to Transparent and just put some subtle gradient on our selection from your own choice.
I also added 1px horizontal white line and little shadow. Let’s do it now – create a new layer “line”, grab single row marque tool, click it where header and content section meets, change foreground color to white #ffffff and hit ALT+DELETE to fill your selection.
Now press ALT+D to deselect and from blending options add:
Drop Shadow:
I created one more layer “Shadow”, CTRL+CLICK on header background layer to load that selection.
Change foreground color to ~ #696b70 and again pick gradient tool (G) Foreground to Transparent, create light shadow.like I’ve got in Single Row Marque Tool image section.
Group layers – content-bg, shadow and line and call that group “content-bg”.
Yes, yes..we’ve got one more navigation..:) You guessed it – create a new layer, call it “Line-Up” and create a new guideline 850px high from top.
Now again take single row marque tool and click right on that guideline. Change your foreground color to #a8a8a8 and press ALT+DELETE to fill that selection.
With that line still selected, take Eraser tool (E), use ~20px soft brush and erase left and right side so it fits good in that 960px grid and ends smoothly.
Create a new layer, call it “shadow”. In this step we need to add a little shadow,, so repeat our previous step 16, where we put a little shadow on that header/content section. To get selection like I did in screenshot use rectangular marque tool.
We will create 3 buttons here, take a look at finished result here:
Let’s create a new layer, call it “btn1″ and take Rounded Rectangle Tool with radius 5px.
My button is 260px wide and 88px high, but we will delete bottom side anyway to get this good looking effect. Use your grid effectively and create rectangle a little bit over our bottom line like in the image below:
Take rectangular marque tool and create selection of that “btn1″ rectangle so you could delete that bottom side. When you have selection like I have, hit DELETE button.
Let’s add some Styling to this button to make it look good.
Add these blending options:
Color Overlay:
Stroke:
Create a new layer “Shadow”, CTRL+CLICK on “btn1″ layer, take your gradient tool (G) and set foreground color to #a8a8a8. Change gradient mode to Overlay as well.
To add some subtle shadows, click and drag really far from your button and stop when you’ve got similar good looking effect, like I have.
Here I will not explain very detailed what I did, since it’s really simple. Just add some text, icon like I did and group all Button1 layers in group “btn1-group”.
My top left button will be active one, so I left that icon to be colorful as well as text.
About icons – I just used some free icons from WeFunction 64px x 64px.
Now just duplicate “btn1-group” 2 times and align them. Change icons,text as well to other buttons – just use subtle grey text, because only one navigation section can be active.
Desaturate inactive navigation icons by pressing CTRL+SHIFT+U or Images/Adjustments/Desaturate.
Again group all the layers, button groups in one big group “btn-section” and your outcome should look like this now:
Remember we did – Step 17 – Center Content Navigation Shadows? We will use those two layers to bottom shadow as well.
Put guideline 1020px from the top, duplicate “Line-Up” and “Shadow” layers, flip them vertically and move right on the bottom of that new guideline.
We need center separator as well – I again just duplicated “Line-Up” layer, rotated it 90 degrees and transformed it to fit for our purposes.
Note – Press CTRL+T to transform it, right click to rotate.
Group those bottom shadow and center separator layers in group “various”.
This is how our outcome will look like:
From now on I will go faster through, because as you may see we are using the same technique we used in Step 18.
In the left section we will add four these buttons, which will be just some short text with “Read more” link to full article or section.
Take rounded rectangular tool, radius 5px and add 360px wide and 50px high rectangle. Repeat the same technique we used in Step 18 to get our section to look good. Notice also 1px stroke added to rectangle.
As for Read more button, it’s all the same, I will just explain what I did with that “Read more” text.
I used 14px Calibri, Sharp and White (#FFFFFF) color and then aplied following blending options:
Drop Shadow:
Inner Shadow:
I grouped all the layers which contain that one button and called it “feat-1″. Duplicate 3 times this group and arrange them.
We are finished with left section, just group all feat-1, feat-2, feat-3, feat-4 groups and call it “left-section”.
This is how our right section will look like:
This section was meant to be as one more featured works section, just here company will showcase their previously created icons or maybe logotypes.
Just go on and use the same style and techniques. Big rounded rectangle is perfectly aligned with left side and sits right on the grid.
For all the sections use 1px subtle grey stroke and the same lightning technique from Step 18.
I’ll just stop on white/grey border in featured work section. To get that effect, CTRL+CLICK on icon background layer, like in the image below:
Create a new layer now and then go to Select/Modify/Expand – put ther 2 pixels and hit OK.
Now change foreground color to white #FFFFFF and press ALT+DELETE to fill that selection. Put your white layer behind icon background layer and holla – you’ve got good looking border effect!
For the text “Team Works” use the same effect we did in Step 22 with Read more text, just now put text color to be grey.
If you are finished again organize yourself and group all layers in group “Right-Section”.
In the last blank content space we will add client testimonials. Create that rounded 5px rectangle to be perfectly aligned with Left-Section and Right-Section rectangles and again remember to use grid and guidelines to make that process easier.
With all the previous steps, you should be able to do this yourself. If you don’t, go back and repeat previous steps – it’s important to get the most out of this tutorial!
We have only 300px left blank so let’s finish! For background we will use the same header image, just a lot more lighter version.
Repeat Step 2 And Step 3 here, just now use very light gray color #d7d7da to almost white #f9f9f9 in your gradient. As for that brush, you can actually just duplicate that layer and not repeat the same steps over again.
Again on footer we will use the same techniques, so I will not repeat those steps. You should be able to figure out now how to add glance to your buttons, use icons and text effects effectively!
Just leave like 40px high line for alternative navigation and copyright information. Add more shadows, lines, lightnings, shadows, text effects, icons and you should get really good outcome!
This is what I came up with:
And we are finished! Don’t worry if you didn’t get everything – I am here to help and remember this is an intermediate tutorial, though I still tried to keep everything as simple as possible. If you feel I left something out or you didn’t get something please just write in comments and I am sure I will give you the right answer!
Yes, and actually this is my first web design photoshop tutorial – and I am really proud of it! More will come and hopefully in future I will also be able to cover coding part as well. For now, we will learn together how to create advanced and high quality web designs.
Once again if you don’t use DeviantArt regularly I strongly suggest you to involve in that friendly community and check out my DeviantArt profile as well. I will update it regularly from now on so add me to DeviantWatch or Subscribe to this blog – there will be a lot more good things to come!
In future I may offer free *.psd versions for only premium users, but now you are able to download my *.psd version of this design for free, however I would like to ask for some credits if you use that design for future projects.
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Wednesday, February 1st, 2012 11:17
Hello to you all! a special greeting to the creator of beautiful design (Dainis Graveris) – Congratulations!
I know this for a long time drawing, but I have not found the time to encode material in this work. I noticed that some users have asked to see the transformation from PSD to HTML, well now you can see it in HTML5 and CSS3 at this web address: http://www.imediacreatives.it/1stwebdesigner/ PS I have not written here for advertising me hope not to be misunderstood and I apologize if I use Google Translator. Best Regards!
Friday, February 24th, 2012 04:51
can you post some instructions how to code the psd into a working webpage?
Tuesday, October 4th, 2011 02:52
WOW You are very talented! Good work! Thank you for this tutorial.. it has inspired me to make my own website :)
Thursday, August 11th, 2011 12:30
Hello really Good Work am get unique idea Your Best Tutorials Thx and GOD BLESS YOU Get Complete Tutorials
on my website SEO Tips & web design Tips in Photoshop
Wednesday, July 13th, 2011 20:30
Thanks for putting this together for us..I have learn so much..now I can design something on my own.
Tuesday, May 3rd, 2011 20:53
Awesome tutorial, I especially like the 3D look for the slideshow navigation.
Monday, October 11th, 2010 20:34
when will you convert this to Xhtml? Lovely concept Thanks
Tuesday, December 8th, 2009 12:20
Hey great tutorial, I learnt lots. Thanks heaps =)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Eric B.
Wednesday, October 14th, 2009 04:54
Excellent tutorial! I love the design.
I don’t know about anyone else, but I would like to see some Gimp tutorials. There don’t seem to be enough of those :( (At least compared to Photoshop tutorials)
Tung
Wednesday, October 14th, 2009 04:42
Great tutorial! Love it!
Thomas
Wednesday, October 14th, 2009 11:05
Really nice tutorial, thanks
I love the slider design
Thomas
Wednesday, October 14th, 2009 08:16
Waho…
I’m always very impressed by these webdesign tutorials…
It must be very very long to create…
If I could say just one little remark, don’t you think the bottom area’s contrast is a bit low ? Maybe it’s my screen but I didn’t see very well the text and the read more buttons.
But there are some great ideas in this design !
Dainis Graveris
Wednesday, October 14th, 2009 08:58
Ah, yes, took many hours. It should be actually, because they are very light on my screen as well. Just wanted them to be this way this time. Yeah, looks like I did a little bit too much – on my screen text and buttons look clear, but if yours don’t then I am in trouble.
I will try to do better in the next time! :)
Pamela
Wednesday, October 14th, 2009 17:13
Great tut. How about a tutorial on how to code up the HTML/css?
Tomas
Wednesday, October 14th, 2009 17:09
Fantastic tutorial Dainis, big thanks!
Katelynd
Wednesday, October 14th, 2009 17:04
This is lush!
lindsay
Wednesday, October 14th, 2009 19:11
Well.. i was hoping that you would teach how to turn a photoshop mock up, like this, into an actual website!
Ayaz Malik
Wednesday, October 14th, 2009 04:00
simply fantastic !! good job buddy
Dicky
Wednesday, October 14th, 2009 03:41
Wow, the first Photoshop layout tutorial from Dainis. It is very detailed and definitely worth a look! Great job!
Dainis Graveris
Wednesday, October 14th, 2009 08:40
Thank you, Dicky! Still I need a lot of things to be improved, but this is the first step forward at least :)