Have you ever wanted to design a beautiful website but just didn't know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I'm going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let's get going!
Step 1 - Download the 960 Grid System Template
The designs I create are nearly all based on the 960 Grid System. So, before we begin we need to download the grid system Photoshop templates. You can find them on the 960.gs official website. Simply unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col. The difference between these two are, as the name suggests, one is made with 12 columns and the other one with 16 columns. To explain it a bit more, if you have 3 boxes in your design you would choose the 12_col grid, because 12 is divisable by 3; or if you have 4 boxes in your design, you would choose either 12_col or 16_col grid because 12 and 16 are divisable by 4. If you follow this tutorial, you will see this in action.
Step 2 - Defining the Structure
Before we open our PSD grid template and begin drawing, we first need to define the structure of our site. This is a bit more of a complicated structure because we have a layout inside a layout. You can see this exemplified in the image above.
Step 3
After we've defined our site structure we're ready to move on. Open your 16_col.psd template. Go to Image > Canvas size . Set the canvas to 1200px wide and 1700px high. Set the background color to #ffffff.
Step 4
Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high. Fill it with the color #dddddd.
Step 5
Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers.
Step 6
New layer. Choose the Rectangle tool again and draw in a thin dark grey rectangle, as shown in the image.
Step 7
With the Rectangle tool selected, draw in a big box around 500px underneath the top rectangle. Make it 575px high and give it a Linear Gradient overlay from #d2d2d0 to #ffffff, direction -90, Scale 100%.
Step 8
Now we are going to create the same light effect as described in Step 5. We will be using this technique a lot; so next time I will just refer you to Step 5 for the effect.
Create a new layer above all the current layers. Ctrl+click the big rectangle. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, as shown in the image.
Step 9
Create a new layer and draw in a big rectangle about 400px high. This one is used for our header. Fill it with a nice blue gradient from #2787b7 to #258fcd.
See how subtle the color change is?
Step 10
Add a dark blue 1px line on the bottom of the header box, apply the Drop shadow effect. For drop shadow use Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px. Next, create a new layer above and draw another 1px white line under the dark blue one. This way we create sharp edges for our content box. Basically you can apply this border technique on every box in your design just with different colors.
Step 11
Create a new layer, and with the Rectangle Tool, draw a 50px high rectangle in the top part of the canvas, just as shown in the image. This will be used for our navigation.
Apply a Drop shadow. Use the values shown in the image.
Step 12
Time for the navigation. Use the Rounded Rectangle Tool and set the radius to 5px. Draw a rectangle, fill it with #f6a836, and apply the following effects:
- Inner Shadow - color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px.
- Inner glow - Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default.
- Stroke - Size: 1px, Position: inside, color: #ce7e01.
Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.
Create a new layer above, set the Blend mode to Overlay and create the same effect described in the Step 5 using a smaller brush size this time. Then add the navigation text. I used Arial for navigation links, all caps and Antialias set to "none".
Step 13
Now let's create the search box. With the Rounded Rectangle Tool, radius 5px, create a search box positioned on the right side of the grid layout and in the middle of the top gray stripe from Step 4. Add these layer styles:
- Inner Shadow - color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px.
- Stroke - Size: 1px, Position: inside, color: #dfdfdf.
I added the "search" text and a light gray "GO" button. This is how it should look.
So far we have a lot of layers and need to organize things a bit so we will create a new Layer folder and name it "search". Select all layers that make the search field and just Click + drag inside the new folder. Later we're going to organize other content inside the folders so we have a nice organized layer palette.
Step 14
Now create a new layer and draw a "Sign Up" button the same way we created the search field - just half the width. Place it under the search field in the middle of the navigation stripe.
Again we're creating the effect from Step 5.
Use a smaller soft brush size. In this case it was 45px.
Step 15
After adding the logo and the Tagline this is how our site should look like now.
Step 16
Now we're coming back to our layer organization mentioned a few steps earlier. Create a new empty layer folder and name it "top_bar". Move all graphics from the top of the layout inside this folder (logo, tagline, search field, sign up button, navigation and backgrounds).
Create another empty layer folder and name it "header". This is where we will put our header graphics. This is how it should look.
Step 17
Our header looks a bit plain right now so we're going to add the same light effect everywhere else on the site. Select the header box (blue). Create a new empty layer above and set the mode to Overlay.
Pick a large soft brush 600px, color #ffffff and click a few times in the area under the navigation. Furthermore, to gain more depth, we can switch the color to black and do the same thing just in the bottom part of the header. Give it a try!
Step 18
In this step I will explain to you how I created the reflection for the header images. Take two images of your choice, I used Safari screenshots of my two other templates, scale one down and place it behind the bigger one. Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool. Go to Select > Modify > Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.
Now to make those two images stand out a bit, create a new layer and set the mode to Overlay. Create the effect described in Step 5.
This is how our header should look after adding a nice tagline and some buttons. Don't forget to put all these graphics inside the "header" layer folder to keep things organized here ;)
Step 19
If you look at the final image preview, you can see that we have nice tabs in the content area. In order to create these tabs we'll need to perform a few extra steps, but it's definitely worth it. First, create a large rectangle shape with the Rounded Rectangle Tool. Make it 70px high and a radius of 10px or more if you wish. Now we have to get rid of the bottom radius and make a perfect corner out of it. Pick the Direct Selection Tool and click on the shape path. Click the vertical point and drag it down while holding the Shift key until it reaches the same level with the horizontal axis. So far so good but it's still deformed. You see the little handle. Click on it and move it upwards to the point of the path.
Now we have created a perfect corner. This is how it should look. Repeat this step for the right bottom corner.
Step 20
Pick the Line tool and set it to 1px.
Step 21
Draw in gray separators while holding the Shift key.
Step 22
Place some icons, headings, and a description for each tab. I used Ray Cheung icons available from - WebAppers.com. Usually one tab is always active and the others are inactive. To make this clear in our design, we need to find a way to accomplish this. I desaturated the other icons and reduced the opacity for the headings and text while keeping the first active tab colorful and bright.
Step 23
To make the active tab more obvious, we're going to give it a faded white background. To do this first select the whole object and then subtract from the selection to get only the first tab selected.
This is what your selection should look like.
With a smaller soft brush, paint in a white background.
Step 24
Add the shadow. Create a dark gray rectangle behind the tabs, as shown in the image.
Add a vector mask by clicking the little icon in the bottom of the layer palette.
Set the color to black, pick a large soft brush, and start deleting parts of the rectangle. As a result, we get a nice fake shadow effect behind our tabs.
Finaly the attention to detail. Draw in a 1px gray line on the bottom of the tabs. Mask the layer again like described earlier and with a big soft brush delete the left and right end of the line. Now we get a nicely faded line that follows our shadow behind the tabs.
This is how our tabs should look.
Step 25
It's time to design the content for our first tab. We need a featured design image, a nice heading and some text. First we will create the featured image. I thought that it would be nice to break the edginess of the design by creating a nice stacked photos effect for our featured design image. To do this, draw a white rectangle with a 1px light gray border, and a very subtle drop shadow effect.
Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.
Import your featured image and place it over the white rectangles. Don't worry if the image is flowing outside the boxes, we will fix that. Make a selection from the top rectangle, go to Select > Modify > Contract and insert 5px. With the featured image layer selected click the Quick Mask icon on the bottom of our layer palette. You will get nicely bordered image effect like shown in the image here.
This is how your layer order should look like.
Step 26
Don't forget to keep things organized. So create more layer folders and organize your palette. This is how I have done it.
By adding a nice heading, some text, and bullet lists, our web design work is finished. Let's move on.
And again some layer organization.
Step 27: Testimonials
I thought this one should be huge; so I've put this in a big box right after the main section. First draw a big light gray rectangle about 220px high. Give it a 1px gray border.
Then draw in another brighter rectangle by 10px smaller on all sides. Also add a 1px light gray border.
Finally add some text and we're done!
Step 28
It's time for the footer. Draw a big 400px high, dark gray rectangle.
Step 29
Add some light effect the same way as described in Step 5.
Step 30
Next, draw a 10px high rectangle above the footer and add some subtle effect by adding two more lines on top and bottom like shown in the image.
Step 31
Create the very bottom part where the repeated navigation will be placed. You can copy the rectangle from the top where the navigation is placed, move it down and make it about 40px high. Place it at the very bottom of your canvas. Please note that you may need to expand your canvas at this point so that all your graphics fit. If you need to do that, then go to Image > Canvas size and set the height to fit the entire layout.
Step 32
Attention to detail again. Add a 1px white line above the footer navigation box to give it a nice border effect.
Step 33
Add some footer content and separate it nicely within your grid.
Step 34
Finally organize all your layers inside the layer folders. This is how I've done it.
The Design
So there we go, the final design, with a couple of variations for different pages. The final PSD designs are, of course, on sale at ThemeForest.net.
Final Thoughts
I hope you have enjoyed this tutorial and have learned a few new techniques. Now, it's your turn to create more great designs. Remember, with attention to detail you, will be able to design beautiful websites with just two or three Photoshop tools. What do you think?
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Jeffrey Way April 29th
Hey everyone! I’d like to see more of these kinds of tutorials – ones that teach fundamental design techniques. If you’d like to submit one, email it to nettutsblog@gmail.com.
Of course, we’ll need to sign off on the finished design before agreeing to the tutorial!
( )Yoosuf April 29th
@wisefalco its a very very good job, nothing else to say than that. as like south indian saying its a “Pakka Tut”
@jeff, dont you feel like its should go to PSD TUTS+, becouse its a PSD based one(
you will try to justyfy your self)!
( )lawrence77 April 29th
yeah somewhat I agree u Yoousuf!
but its a website only, so its placed here!
Wherever they put we read, then what!
Yeah its a PAKKA Tutorial Mr.Writer!
mamjed April 29th
I agree, the psd part of it should go on psd tuts, but there should be a second part for coding it and making it into a finished website that should be on nettuts.
Nick Brown April 29th
I disagree, keep these kinds of tutorials on here. People who visit PSD tuts may not really be interested in this type of tutorial, but I’d say most of the nettuts visitors would be interested. After all, it’s the first step in creating a website.
lawrence77 April 29th
asp.net?
( )Yoosuf April 30th
what do u mean of ASP.NET?
Meshach April 30th
Well… It’s “Web Design” so it should go on NETTUTS+
That’s my opinion anyway.
rene April 29th
wow, well that gives a whole new meaning to “in-depth”. thanks a lot. its brilliant:)
( )Straw April 29th
Realy Beautiful website:)
( )Nate April 29th
Love this – really good tutorial…
but, seeing as this is net tuts…will we see a Pt. 2 with the CSS? That would be niiiiiiiice
( )Ryan Cook @ that graphic guy April 30th
I agree it would be cool to see a part two for the coding of the website… Give a real start to finish tut.
( )Eric April 30th
totally agree, also would be cool to see it integrated a bit further. Would you use PHP to theme it up so its all on one index.php site?
( )Norm May 6th
How about asp.net to theme it up?
( )Isaac Seymour May 12th
since when has nettuts used asp.net? lets keep it that way – open source jQuery, PHP and MySQL. With HTML and CSS of course
Norm May 6th
Beautiful job on the tutorial!!!
( )Furley April 29th
Great tutorial. I hope you you paid Marco a little extra for this on, Jeff.
( )idrish April 29th
this is a pretty good article..was always looking for such tuts…thanks a lot…
( )Ardhian Satrya April 29th
It’s a great tutorial. I like it. Very useful for newbies like me
I hope there’ll be another tutorial on how to make it live…
( )Paris Vega April 29th
Very nice.
( )jason April 29th
I’m on PSDtuts or does the mark-up, styling, and scripting come next week?
( )Starstuff April 29th
Great, great tut! Could we please have a follow up on how to turn this into a functioning web page? Since this a rather complex design, I’d love to see how to make it into a full-fledged page.
Again, great work, Marko! Thanks for sharing.
( )Robert April 29th
The detail provided in this tutorial really is great- I hope we see more of this style as well. My only criticism would be the use of a PSD template; but then I am always wary of boxing my design into any prefabricated template.
( )wouter April 29th
I thought this was a very good tutorial. Nice to see that people don’t keep their design secrets to them selves.
Keep up the good work.
( )Daan April 29th
Nice work Marko!
I love your themes on TF, and go on making these tuts!
( )jermaine April 29th
sweet tutorial
( )Ben G April 29th
Great tutorial, thanks for sharing!
( )chrisberthe April 29th
Amazing, thank you.
( )anon April 29th
BVD – Beautiful Website Design
shouldn’t that be BWD?
( )Marko April 30th
I knew someone would notice that. Yes, that was intentional.
( )kooboora April 29th
svaka čast majstore! odlican tutorial
( )Vladimir Carrer April 29th
Great work, Marko!
( )Chris April 29th
Very nice tutorial. I understand exactly where your coming from with seeing beautiful web sites and wishing you could do the same. I think my web sites improved when I started designing them in Photoshop first. The first few times it was a longer process than creating HTML/CSS, but now days I can knock some layouts together quite quickly, and if a client wants a change, its easily done.
I’ve also been using 960gs for a few months on bigger layouts and its a great framework! It would be great if they did one for 760pixels – or to fit 800×600. If anyone knows of one please share
( )redwall_hp April 29th
I generally subscribe to the 37Signals design ethos, or a variation of it: Sketch it on paper, then jump right into the HTML/CSS, creating graphics when necessary. Sometimes I’ll create a segment of a design (like a header) entirely in Photoshop first, but I pretty much never do a finished design in Photoshop before getting to work with the HTML.
Lately I’ve been wanting to try to move toward the “Photoshop first, code later” approach, as I think it might improve some of my shortcomings in design.
It’s kind of hard, though. I am, by nature, a coder. Little is more fun to me than building apps with PHP or hand-writing HTML.
( )Darren April 29th
Why would you subscribe to the design ethos of a company that has some of the ugliest websites on the internet? I realise their products are popular but maybe they’d be much more popular if they had decent websites.
redwall_hp April 30th
It’s not that I emulate their approach, I’ve just agreed with them…
Al April 29th
real weird one, not seeing any of the images from the tutorial on my screei
using FF on Windows 2000 system
Ak
( )SmeX April 29th
great! thx
( )Stephanie April 29th
Great tutorial! I would love to see more tutorials like this. I would also like to see how to take a design like this and put it into HTML/CSS. I always get stuck on trying to put gradients and fancier buttons in the final markup of a design.
( )Liam McCabe April 29th
Wow!
Love the style!
( )Jeff Geerling April 29th
Wow. Nice tut! Next tutorial: How to convert your PSD into a standards-compliant XHTML/CSS layout
( )Neil April 29th
I would expect that too
( )redwall_hp April 29th
And then something on turning it into a WordPress theme after that, no doubt…
Ibesoringola May 9th
Check this out!
http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
Sea April 29th
I agree that would be great.
Thanks I really enjoyed this tutorial
( )Carlos April 30th
Sure! That would be great!
( )Colin McFadden April 29th
Wow! Finally a great tutorial for those of us trying to get used to Photoshop (I’m transitioning from Fireworks). There have been a lot of awesome tutorials about going from PSD to HTML/CSS, but never from scratch in Photoshop. Awesome work.
( )Patrik April 29th
This was pretty awesome. Clean, modern and well explained! Great job putting this together.
( )Garry Aylott April 29th
Great design and great TUT. Can we have a Part 2 with converting to XHTML and CSS? Please?!?!?!?!?!?
( )Janko April 29th
Really great tutorial.
( )Michelle April 29th
Wonderful tutorial, thank you!
( )crypta April 29th
Very nice tutorial, nice style, love ! Pozdrav from Croatia
( )Shane April 29th
Fantastic, in-depth post. The tab icons look a little like the ones from IconExperience.
Great stuff!
( )Homar April 29th
Probably the best tutorial on nettuts to date!
( )CgBaran Tuts April 29th
Excellent tutorial thanks for sharing
( )Sal April 29th
Awesome Tutorial!! I would like to see a tutorials or a series of tutorials that starts from scratch to finish. Im saying…all the from opening up the a new composition in Ps to seeing it come alive on the web. That’ll be awesome!! This tutorials started off on the right foot to do all of that. Looked forward for the video response!
( )jem April 29th
Very nice looking design. I’ll agree this tutorial seems oddly placed.. it kind of seems more fit for PSDtuts unless its followed up with an actual “build” tutorial.
Looks great though!
( )Marko April 29th
@All: Thanks a lot. Much appreciated. I’ll try to write followup tut “Convert your Beautiful Website to (X)HTML / CSS”. Thanks again.
( )ant April 29th
Great job Marko, one of the better tuts on nettuts. Look forward to the follow up.
( )starlight86 May 1st
can’t wait to see it. thx again for writing this awesome tut!
( )akkis April 29th
Another great tutorial! Thank you very much!
( )Aaron Payne April 29th
Excellent in depth tut! It’s nice to see other people’s process. Thanks a ton!
( )David Rojas April 29th
That’s really great, I love those web design tutorials. But again, that kind of tutorials used to go to psdtuts, why put it here? (I’m not complaining, just curious).
( )lawrence77 April 29th
wow
really nice outcome…
soon I except a PSD to HTML/CSS for this!
( )lawrence77 April 29th
……..missed in above
I like ur naming of layers, pretty cool idea!
( )that guy April 29th
Thanks for the in-depth article! I’ve been trying to get into the swing of doing a full PS design *before* coding, and this is a big help.
If you’re using the site in this tutorial somewhere, though, you may want to fix the spelling of “delivered” in that testimonial! (it says “deliverd” right now)
( )T-Law April 29th
Very good tutorial, thanks.
( )Brady April 29th
Wow – great tutorial!
( )Myfacefriends April 29th
nothing i can say WOW! keep up!
( )MGK April 29th
Thanks a lot for this tut !!
Is there any other tutorial that explains now how to transform this psd file into html/css code ?
thanks in advance !
( )Shibi Kannan April 29th
very nice PSD tut in nettuts. !!!
Ah ha I see everyone pointing out the same fact. Well we do expect PSD to HTML type tuts. Hope we get more of these.
My suggestion – pick one winner from themeforest every week and ask them to write about their theme development from scratch like this one.
It would be fun to learn from all those brilliant guys out there.
( )Marko April 29th
Hey guys, just to let you know, I’m working on the next tut on how to convert this design into valid (x)html/css, cross browser website. Just stay tuned. Thanks.
( )bill April 29th
Ah good, that’s a huge part of the process and I was wondering why that was left out.
( )bill April 29th
Also, any tips on choosing color palettes?
( )Marko April 30th
Actually, with this one I started with shades of gray and then adding just one color did the job. I’ll try to explain it next time a bit more.
ant April 29th
Excellent…
( )Agence Web Toopixel April 29th
Marko you rock !
( )Marko April 30th
Thanks Christophe
EricB April 29th
This is a very useful and cool tutorial. I thinks you need start on your next tutorial – HOW TO CONVERT THIS BEAUTIFUL WEBSITE INTO XHTML/CSS TEMPLATE. Kudos Marko and please keep making more of these keep sharing!
( )clefevre April 29th
Great tutorial, I just this kind of funny:
“Have you ever wanted to design a beautiful website but just didn’t know how?”
And then the tutorial is of a portfolio / web company site.
( )Matt P April 29th
Great tutorial, Would love to see a whole series on photoshop website design as I really struggle, there are loads on converting PSD to webpages but not alot on actually making the PSDs in the first place… Screencast would be even better
Thanks…
( )Sam G. Daniel April 29th
This is what I really needed. Very thought out. Love to see more of these types of tutorials.
( )Ian April 29th
Very nice tutorial. Thank you.
( )Alex April 29th
this is amazing!! been waiting for something like this on here for ages, always wondered how people get stuff so polished, now I know their secrets
( )Craigsnedeker April 29th
Great tut but doesn’t this belong on psd.tutsplus.com?
( )Hassan April 29th
Shouldn’t this tut to be on PSDTUTS? It seems to me that this tut is just about the design, so psdtuts seems the right place for it…
( )Anyway, greate design. thanks for share.
JohnONolan April 29th
Did I log on to the wrong website?
( )Philo April 29th
Very Nice Tutorial!
( )I think it fits here at NETTUTS.
tarek April 29th
hello jeffrey way, i suggest you to start coding a website from scratch based on this template because it contains a lot of topics that you could cover using both php and jquery.
( )this is the perfect way that gonna really teach us to start building websites on our owns .
how to include sections that don’t dchange in all the pages like the menu and footer, login system using the robust php 5 and so on i guess you get the idea.
thank’s
Ryan Bickett April 29th
From my initial scan, looks like a great tutorial. I just need to find some time to read it! I am getting backed up in the tutorials I want to read…Need more time!
Thanks for the post.
( )Alex Hughes April 29th
Really like these articles.
( )Hope to see more.
Mike B April 29th
Great Tutorial! I think it could go in both PSDTUTS and here. Either way its a well thought out and professional tutorial. 5 stars!
( )Mason Sklut April 29th
Nice use of the grid framework!
( )Steve April 29th
Hey, i’ve started using the 960 grid system for a few designs recently. Do you always have to keep a 20px gap between grids? I find this a bit of a newsence…
( )Marko April 30th
Not always, really depends on the layout. But if the gap stays everywhere 20px then I keep it. Of course it has to look good
( )Michael April 29th
Great, now can you break down the css? haha
( )Microbrewmedia April 29th
Very Nice! I enjoyed it. I hope I can contribute at this level. Way to go!
( )Nate April 29th
I agree that this tutorial was great. With very little web design experience, I’m excited to have finally found a tutorial that will lay the whole thing out for me. I’m really looking forward to the valid XHTML/CSS tutorial. Will you be using the same site as you just designed here? I hope so.
Thanks a million!
( )Marko April 30th
Sure Nate, same design
( )Dels April 29th
waiting tutorial for converting this layout into (x)html, especially when it use 960 css template
( )Amir April 29th
Great tutorial, Thanks
( )Al April 29th
tried it again tonight on my Xp system, with IE7, displays correctly thank goodness, would not want to miss this one
al
( )tamtam April 29th
Very Very Nice Tutorial……
( )Zair Abbas April 30th
sexy layout!
nice article
( )ashvin April 30th
great job!!
makes me want to use grid frameworks which i always hesitated to use..
( )Miha Železnik April 30th
Nice!
Steb by step, PSD by PSD. Will use grid to try.
Greetz, Mike.
( )Legion Dave April 30th
Best tut in ages, I was loosing hope in nettuts but this is very in depth and actually teaching something useful and fundemental!!! top marks.
( )Marko April 30th
For all of you who think that this one should be on PSDTuts, my opinion is that all web related designs should be here and all other art/design related stuff on PSDTuts. What do you think?
( )lawrence77 April 30th
yeah you are right Mr. Marko,
( )if nettuts is not started means this tut is in PSDTUTS
Davey May 2nd
I agree, this tutorial would be useless for someone that doesn’t do web design.
Nice tutorial btw, I remember this template being on themeforest.
( )praeter design May 3rd
Yes I agree, especially if a part 2 of coding the design is included.
But you could create more cross trafic by having the design in one area and the coding in another, which has been done before.
( )Rydgel April 30th
Awesome !
( )Snorri - Css April 30th
Nice design
( )kiran kumar reddy April 30th
very nice work ………..
( )wayno007 April 30th
A very useful tutorial. My stumbling block is usually the initial site design, but you’ve given some great ideas on where to start. I’ll admit I was a little turned off at first when I read the first step, using 960 grid, but I got over it quickly. Keep ‘em coming, Marko!
( )Morningtime April 30th
A bit too much “template monster” style for my liking. Too generic.
( )Rijalul Fikri April 30th
Excellent Tutorial. I like all the details. But, isn’t it should be on psd tuts. But, nevermind, I do love the tutorial.
( )Martyn Web April 30th
Great Tutorial,
just shows its all the small things that really make the difference to a design.
Great Job
( )rick April 30th
love it! many thanks
( )konsehal_14 April 30th
May I ask why we can’t download this tutorial like what we are doing in PSDTuts+ and VectorTuts+.
( )konsehal_14 April 30th
BTW its a great tutorial!
( )Chesham April 30th
Very nice, I hope there are more like this! Is there going to be another one to write the html/css? I’m sure I wouldn’t have a problem doing it, but it would be helpful for those people who are just learning.
( )Maicon April 30th
Very good man! I learned a lot about design with this. Thank you.
( )Carl - Web Courses Bangkok April 30th
Fantatastic tutorial, have passed it onto my students.
( )Brian Augsburger April 30th
That was one of the best. Great stuff! Thx
( )Luke April 30th
I’m kinda confused. This is placed under HTML/CSS yet it includes no coding at all?
Make a follow-up Tut please.
( )Tom April 30th
Really beautiful.
There are many tuts around for how to make a mediocre design, but very few that show how to create the level of “fit and finish” which is required.
And thank you in advance for Part 2 on converting to CSS — the two parts will be a fantastic pair!
( )Meshach April 30th
It’s tutorials like this that keep me coming back.
Thank you Envato & NETTUTS+.
( )Andreas April 30th
wow. really nice tutorial. will there be a live demo?
( )Anand Babu April 30th
Good Job! This was exactly something i was looking for a long long time. Please post more of this kind so that we budding designers will get some good start.
( )Yann April 30th
Very beautiful design. But I think a PSD to HTML/CSS Tutorial would be way more interesting. At least for me.
( )Thank you
Dieter April 30th
Love this article!
Thx
( )The Pixel Developer April 30th
I’m a little disappointed. You should be using vector techniques instead of using brushes and selections. It makes things harder to change in the future.
Apart from that, good article.
( )Marko May 1st
These are all vector shapes from Photoshop except the lights and shadows. Do you suggest to make shadows as vectors? I don’t see how this could easily be changed in the future.
( )VertigoSFX April 30th
What a great tutorial. Well written too, like it a lot.
( )Ryan Cook @ that graphic guy April 30th
Great read! It should be here we all have to use PS to build the website unless you like using Illustrator…. what a about an Illustrator tut here building a website?
( )Timothy Post May 2nd
Actually Ryan, Fireworks is the program that people should be using to mock-up a website. This tutorial is great but since it’s not done with Fireworks, it’s a bit useless to those of us who want to learn with the right tools from the start.
( )Luke May 2nd
What makes you think that Fireworks is better than Photoshop for webdesign?
Don’t get me wrong, I don’t want to start a massive argument, I just want to see your points of view.
For me Photoshop is the way to go.
For beginner to professional webdesign.
Dahnte Shantis April 30th
Yay now more people will know how to make a super trendy website.
( )Jarryd April 30th
Really love the design, but your Twitter link doesn’t work very well
The hell is http://www.winkworth.co.uk/?
Great tut anywho.
( )snowflake April 30th
wow…this is the most powerful tutorial ever read this year…thanx a lot…keep posting great stuff
( )webe April 30th
wonderful tutorail, thanks
( )ab_ April 30th
Why the grid that i download wont show the blue guide link after i open the 16 col?
can help?
( )Marko May 1st
Go to Edit>View>Show Guides
( )Marko May 1st
Sorry….View>Show>Guides
Diego SA April 30th
That’s a great layout! Maybe I’d insert some personal elements to give it a stylish look. Awesome!
( )Joe April 30th
Very nice tut, picked up a few tips myself.
Good job on this
( )Mike Schinkel April 30th
Super nice tutorial. I’m a web developer with 15 year experiences and am just this year trying to learn how to make an attractive website and not having any clue how to get started. This tutorial is exactly the type I have been looking for lately.
That said, and I’m sorry to be critical, but one aspect of the design bothered me so much throughout the entire tutorial I had a hard time focusing on the rest of it all (much as would be a distraction to see a cold sore on the lip of an otherwise incredibly attractive woman!)
Your treatment of the active tab violates one of the generally accepted usability guidelines for tabs, #7 in this article http://www.useit.com/alertbox/tabs.html to be exact, and to a certain extent guideline #12 also. If you were to fix the tab issues and I think I’d give this tutorial 10 stars out of 10 (or even more, if I could!)
-Mike
( )Marko May 1st
Thanks for the hint
( )tonu May 1st
It’s a wonderful job …. Thanks for publish this tutorial………
( )m h May 1st
I g uess my commented never made it here, or at least I can’t find it! Anyway, I’m actually gonna give this tut a shot since it seems so thorough. I’m more of a programmer so I have trouble with the initial step of any site design: DESIGN. ha.
So I don’t use PS and have a question: Step 4: “Now pick the Rectangle Tool and draw in a rectangle the full canvas width and about 80px high.”
How can you tell the height of the rectangle you’re drawing? Am I missing a ruler or measurement device in PS (CS2). Any help? Thanks.
( )Marko May 1st
Ok here’s how you will make it 80px high. You should first enable rulers. To do this go to View>Rulers. Then when you draw a shape just use the ruler on the left to measure the height. If you want to be 100% sure you got the right height hit CTRL+T and in the top bar in PS enter the height manually.
( )Hope this helps.
m h May 5th
ah, thanks! will give it another shot!
kakasab May 1st
great job…. impressed
( )jeraldo May 1st
im a little confused here. are the steps in this tutorial just for making the design of the website? so the texts has to be coded and stuff like that? sorry im such a newb.
( )E11World May 1st
Great tutorial as usual. I gotta say though, I’ve never really used the grid to build a site. I just drag about 6 ruler lines here and there to create a mini grid but usually, that would’ve been thought of in the sketching phase (which was missing here).
( )MIKE May 1st
a great tutorial a the best resource
( )Raymond Selda May 2nd
Very nice! Exactly what I need! Thank you and looking forward to more tutorials like this one.
( )Tracey May 2nd
This is fantastic. But am I the only person who prefers Fireworks to Photoshop for the initial design? I like that I can specify the width, height and xy positioning of elements – which helps with the CSS later.
( )Marko May 2nd
Hi Tracey, you can specify dimensions in PS too
( )Chris May 2nd
Awesome tutorial!
I just started using Fireworks for layouts instead of PS and I am finding it much easier to develop clean sites. There are definitely more features in PS, but the ease of creating a clean looking site in fireworks is fantastic.
It would be nice if we could see a similar tutorial as the one above done in Fireworks for comparison!
( )Nikhil May 2nd
Ultimate walkthrough…
It will be amazing to build my own..
Thanks
( )Matt Simpson May 2nd
It’s been said already but… WOW! Beautiful design and beautifully detailed tutorial – can’t wait for part 2!
( )lunakizz May 2nd
Thanks a lot!!! Awesome tips!!
( )Tom Cameron May 2nd
This is definitively THE best web design tutorial on the internet. Absolutely brilliant!
( )Amin May 2nd
Awesome. Thancks alot
( )Amin May 2nd
Awesome. Thanks alot
( )Mghmg May 3rd
Awesome tutorial
( )dlv May 3rd
great tut!!, awesome as always, all of this kind (website from scratch) are the most useful
thanks for that, and congratulations! !
( )Kien Nguyen May 3rd
I’ve learned many things from this tut. Thanks so much!
( )Jason Barone May 3rd
This is an awesome tutorial. Thanks very much. I can’t wait to see the slicing/conversion tutorial.
( )Radoslav May 4th
I got one of them its realy simular to this one , i made it ages ago lol….
( )Mike May 4th
Great tutorial. I’d like to see next part about how to convert it into html and css.
( )T May 4th
Definately the best tutorial on this site.
Just needs Part Two showing the css/html and it’ll be Puuuurfect.
( )Kris Allen U. May 4th
I like that fact that it is a PSD tutorial in an web development site. This type of tutorial is geared more towards websites and not graphic design. Keep ‘em coming.
( )Carrie May 4th
http://www.PhotoReflect.com gives you free website templates and storefronts/shopping carts for PC users. No hosting fees or design hassles if you just want to get your work online. Love it myself.
( )MooseDesign May 4th
I proclaim this fantastic! Mainly because it is almost exactly like my process! I actually like it more because it another bit of ammo to help explain to clients why grids are good…
One quick note for cleaning up your vector corners and making them nice and clean:
Sometimes its difficult to get those pesky grab handles to play right. Rather than shift drag them into the corner, you can just clear the curve splines altogether by:
( )Going to the Pen Tool in the toolbar
Click and hold down in order to get the subtool menu
Choose the “Convert Point Tool”
Click on the troublesome grab handle and voila! It will clear those splines out and you can make nice clean, hard angled edges with less fuss!
asd May 5th
Bravo majstore
( )Svaka cast… pozz iz Bosne
Ketut Artayasa May 5th
Greats tuts….
( )likelihood May 5th
Awesome………
( )omonisha May 5th
Wonderful tutorial, thank you!
( )Colin McFadden May 5th
I just finished doing this and wow! Really a great job by you, sir. I think I can finally start phasing out Fireworks, as your tutorial has finally allowed me to discover how much more powerful Photoshop is than Fireworks.
( )Dave Poon May 5th
Very impressive! Good tut, I can’t imagine how much time you spent for this excellent tut, thanks.
( )chris May 6th
huge tutorial
( )Katie May 6th
this tutorial is amazing – i feel enlightened. What font did you use for the non-arial bits?
Katie
( )Marko May 12th
Helvetica
( )Jenny May 6th
that’s nifty. i’m definitely gonna try this out.
( )Singh May 6th
GREAT tutorial ! esp since part is coming i will be personally checking that out because htis layout has me wondering about certin parts and how would I get that done the best way in css
you did an excellent job and im sure the second part of the tutorial will be as good or even better
I never use PS tho im using fireworks since MX and beyond, would love to see this in fireworks !
( )Andrea IP May 6th
Thank you I reallly enjoyed this Tut.
( )bluedee May 6th
wow….it is really awesome tutorial…great explanation…
( )Neeraj Narkhede May 7th
wow … great article … thank a lot for this tut … very useful for beginner …
( )skunkie May 7th
Hi,
Good work, even thought it´s a 100% Photoshop, not CSS & HTML.
I would expect it on PSDTuts. Is it posted here on NetTuts, because you don´t want to give away the source file to plus members?
If so, that wouldn´t be very nice, because we pay money for the source files of design tutorials – and this clearly is a 100% design tutorial.
To be brief, where is my source file?
( )xxx May 7th
Great Template
( )Tommy Brunn May 7th
The problem with these kind of tutorials is that they don’t teach you squat about how to “make a website”. It teacher you how to create a photoshop mockup, sure, but until you know how to translate that idea into actual code (that works in an efficient manner, none of that slicing every image and laying them all out in grids crap), this is of no use to you at all.
It’s a great tutorial for people getting started with designing, yes. But it doesn’t teach you how to make a website.
( )Marko May 8th
Ok Tommy, I’ll do one just for that. Ok?
( )dingding May 7th
great!
( )huwaw69 May 9th
This is good but, its a bit hard…
( )tom sitorus May 9th
i always have the same problem with every tutorial i followed… the result is ugly..
( )deaRBoy May 10th
hey nice tutorial buddy…..
( )O X Y G E N ~$~ D E S I G N May 11th
Wonderful! used this as a base, but with my own style. Less gradients more solid colours with highlights, differnet icons and footer.etc
( )Rodrigo Muñoz May 13th
won..der..ful..
Thks!!..
( )thatha May 14th
nice tuts…
( )Lenin May 14th
Hello marko, thanks for the tut, but step 11 and other steps for making that top logo and navigation bars i’m getting different heights, little clumsy out there everything else is superb and easy to follow.
If you accept, you should include clear values of pixels used (100W x 500H) this could be very helpful for beginners.
I’m not a pro css but i know some but whenever i tried to create a mock up into clean xhtml/css i would create the header and navigation very well but next things i mess up the whole layout.
If possible could you plz make a tutorials about different layout methods to be followed for each kind of PSD templates (liquid,elastic, fixed).
I request you to please write a free( no plus) tutorial on creating a mock up of PSD to xhtml/css strick valid.
Thanks in advance, thanks for your hard work.
( )Web design May 14th
really useful tutorial, great tips on the finer details – good stuff.
( )TomH May 14th
Nice work – but shouldn’t this be on PSDTuts as this is literally just PSD based. I’d have liked to see some code – maybe a part 2?
( )tom May 15th
fantastic design, great real world example. I’d be interested to see how you chose to slice up the graphics.
( )andi May 15th
nice psdtut, well more a blindly-follow-and-paint-by-numbers than a tut, but nice
( )Steve May 15th
Great tut Marko,
much thanks
( )Michael May 15th
This, along with the plus squeal, are easily my two favorite posts on the entire network. Really amazing stuff. If you made a tut converting the html design into wordpress, then that would make my year.
( )tom b May 22nd
I built a simplified version of this for wordpress, wasn’t too hard. Once you have your html (if you dont start with the 960 grid screencast from this site) divide it into header, page and footer. grab the plaintext sandbox theme and combine them, loose what you dont want from sandbox and replace, wrap the content div wherever you want your page content to be and make sure you wrap the whole page in the container_16(or 12) class. I got rid of the sidebar file and added my own sidebars wherever i wanted extra content (easy, just google the snippet and update the function.php file), I used the query post plugin and ACE a lot for mine, could use this to make the javascript tabs on the home page updatable dynamic content.
( )coolness June 17th
oh yeah
Delmer Steer May 17th
And you said…EASY WEB DESIGN? Too much technical stuff on beauty. What we need is more content focused websites. People is looking for information not beauty, in such a case they would rather go to Miss Mundo website.
( )hybridanime49 May 19th
Great details! Thanks as always!
( )Rory May 19th
Brilliant tutorial. I could replicate it in Fireworks for those of you that are asking. Possible tutorial?
( )daniel May 21st
hi rory,
( )could you post a fireworks tutorial, please, please?
Zeus May 19th
Ufffffff thats Great!!!
Thanks
( )Evan Skuthorpe May 21st
an interesting approach with some of your design techniques. It’s always good to see how others do it.
( )Leonel May 22nd
all I can say is WOW!!!!
Great job!
( )z May 22nd
is there any way to make sure the canvas is 80px high for step 4
( )Washyuuchan May 25th
In photoshop there is an option in the Window menu, just click on info. When you draw in an object or something the palette will show you how big it is and what not.
( )Ric May 23rd
Nice Tutorial, Thanks
Anyone else having trouble with step 23? the selection to without feather 10 erases the top left round corner and it gets filled with the white soft brush and if I use the feather with the selection the brush will paint over and outside the tab. just a detail but it is driving me mad. If anyone knows what I am doing wrong or have a more detailed step by step of step 23 I’ll very much appreciate it.
( )Thanks
Marko June 3rd
I can’t see where I used feather in Step 23. You mean to paint the tab in white? Just make sure you created a new layer above the tab and fill it with white using soft brush
( )Santana May 25th
Wow!!!! Amazing!!!
( )Aaron May 26th
Awesome as always
( )Hassan May 27th
Hey ! I am having problems with step 7! I cant draw the box and then fill it with the gradient? Can you please tell me how you did that? the -90 something? thanks a lot
( )Marko June 3rd
Crate new layer, choose Rectangle Tool, click and drag to create the box. Click the small “f” in the layer palette and effects window will pop up. Click Gradient Overlay and use settings I provided
( )Nate May 31st
I couldn’t do this because you weren’t very clear. I couldn’t understand what you were doing! You said do this, but I didn’t know how. I guess this isn’t for beginners.
( )Brian May 31st
Kind of random of going from top to middle to middle back to top for the navigation. Why not just go in order top to bottom? Besides that…quality slick design!
( )RobShaver June 4th
The problem I have with tutorials like this is the give you a fish, they don’t teach you to fish. Well, perhaps they let you watch someone fishing. If you do that enough then you might be able to fish a bit better.
For example, in step 7, how did you decide to create a gradient starting at #d2d2d0 and ending at #ffffff?
Also, designing everything in Photoshop means that any changes are going to require graphics changes. For example, when the customer decides they want five tabs instead of four. Complete redesign, almost.
I want a design methodology that minimizes changes to the graphical elements or allows these elements to be changed dynamically in production. All my web sites have a dynamic number of tabs and navigators based on the content of a database.
I guess I’m asking a lot.
Peace,
Rob:-]
“Build a man a fire and you keep him warm for a day. Set a man on fire and you warm him for the rest of his life.” — anon.
( )Silver Firefly July 11th
This is just to teach certain basic skills that each web designer should know. No one says you have to do it all in Photoshop and in fact a lot of it can be recreated with just CSS.
( )Sam June 11th
Very nice Tutorial.
( )Brad June 12th
One of the BEST tutorial out there! Thanks!!!
( )mr.student June 12th
aaaaauuuuuggghhhhh
what a headache!
( )David June 13th
Great tut.
I tracked with you on everything, but I did have one question, “How did you get the stripe effect on your buttons?”
Thanks again. I always value watching someone’s technique.
( )Marko June 15th
Ups, sorry about that, forgot tome mention. It’s a simple pattern overlay effect (stripes) layer mode set to Overlay and reduced Opacity to about 35% I think.
( )mustafa karakaya June 14th
wonderfull.. thanks..
( )tallal June 18th
شات
( )Z June 19th
What does “Ctrl+click the big rectangle” do and what do you mean by it? When I try cmd+click the layers (on a Mac) then try using the brush tool, it won’t allow me
( )Marko July 3rd
Hey Z, create a new layer above and try the brush
( )Xar June 19th
wow! very nice!
thanks
( )Mark June 20th
Im looking forward tothe XHTM part, will you be doing it?
( )John June 29th
I have to agree with a previous comment…very useful for the average Newb..Love to see more of this!
( )testboss June 30th
A great tutorial to start working on
( )itsyllabus June 30th
great tutorials to do the website from scratch
( )Jason July 1st
css tutorial please
( )Marko July 3rd
Hi guys, this template is now available full coded at Themeforest.net for sale. Check out http://themeforest.net/item/bvd-beautiful-website-design-html/47316
( )nodisturb July 9th
Nice Job piece of art
( )thanx
Silver Firefly July 11th
Thanks for this tutorial. But in Step 5, I think you meant to use Soft Light rather than Overlay as Overlay does nothing.
In all, a great tutorial.
( )Iamhappytobeme July 21st
Really inspiring, thank you for making the web a creative and sharing place.
( )Nishua July 21st
Thanks for taking the time in posting this but I’m a complete noob when it comes to designing website and working within Photoshop. With that being said I think the tutorials should give a little bit more description or more details on each step. I don’t think I’m terrible but I got stuck on the third or fourth step.
But I’m learning so that’s to be expected. Granted I feel with more elaborate descriptions things could be made more clear. Ok, back to work. I’m going to figure this out.
( )Ryan July 23rd
Awesome tut.
Question though – STEP 12. After I made the rounded rectangle and filled, etc. you say to:
“Now select the rectangle with Ctrl+click. Go to Select > Modify > Contract and enter 1px.”
Then what? I’m assuming we need to trim off the outter button, but how do we do that?
( )Marko July 30th
Hi Ryan, please read the description under the image. You should create the same effect like from Step 5 just with the use of a smaller brush.
( )Thiago Menezes July 25th
I wish I had that eye for detail O.o¨
( )Joel Glovier July 28th
JUST WONDERFUL.
( )Mike August 1st
Hey, awesome tutorial!
Just a quick question about Step 24. When I set the color to black and pick a large soft brush, it just keeps making the rectangle darker, instead of creating the shadow effect.
Any suggestions?
( )Imran August 30th
Thanks for sharing great tutorial.
( )Texas Takeover September 11th
Great tutorial
( )playlist September 13th
great tutorials like to work on it a bit more
( )FunkyMonkey September 23rd
Absolutly beautyfull !
But yes, i have to say that once i have converted it to CSS/HTML, in addition, then i’d love to learn (a tutoriL on) how to add code for (i.e.) a dynamic ‘recent work’, the contact form and all the nifty little pices of dynamic content a site like that has…
Thats what i really need, the info of what to do AFTER the site is converted to html/CSS – a how to add the dynamic content and merge it with the site
But beautyfull none the less and great work, thank you!
( )pawel October 4th
Realy Beautiful website:)
( )Tyrone October 5th
Nice the design is excellent and i can see a lot of work has gone in to design it. but just how do you convert the design into CSS, that’s the tricky part.
This looks more like a wordpress theme rather than a website layout.
( )Joe October 11th
Brilliant Tutorial!
( )Kcmartz October 13th
NICE!
I emailed it to myself to use later (after school)
I am going to build a tutorial website from scratch!
( )Thanks, I will share this with my friends also!
Lucas October 14th
GREAT!!!
( )Milan October 26th
Thanks. My only remark is that you should be more consistent when building a tutorial. You missed many parameters required for certain steps, like exact color, extact position etc… It is very difficult to follow your instructions.
( )clippingimages October 28th
WoW
Awesome tutorials. Thanks for sharing this nice post.
( )Chuku chukulha October 29th
Wow ! very interesting article
( )Shafaat Awan November 3rd
High definition web 2.0 web site design tutorial, rarely found this class of tutorials on the net. Great efforts and hats off for you to share your skills and ideas.
Thanks
Really looking for more from you stuff like this.
( )Lyden November 7th
I’m confused. Step 4: make rect with 80px height. Got it. But then in Step 5 the image shows that you are using a brush with a 600px diameter, and somehow almost the entire brush is fitting inside that 80px high rect. What am I missing here?
( )Lyden November 7th
wow. nvm. lol
( )Music November 10th
a very deligent way of describing web 2.0 website building. Very much informativve
( )