Complete Web Design Tutorial

​

In this tutorial, we'll be covering the entire process of designing a website.


In each step of the design process I'll explain the fundamentals behind good web design, so you can take the techniques you learn in this tutorial and apply them to your own web design process.


You can also skip the "Fundamentals" sections, and only read the "What I've Done" sections if you want to finish this tutorial quickly.


This tutorial is for Photoshop. Ideally CS5, but this tutorial should produce identical results for all versions of Photoshop 7 and higher.

​

The first thing you want to do when creating a new website design is choose your colors, do you want a light or dark skin? Which accent colors will you be using? I personally like to go to and browse the for inspiration.


Generally, it's best to go for a light skin, light skins simply appeal to more people than dark skins, this is why Google, YouTube, Wikipedia, Facebook, and virtually every popular site uses, and has always used a light skin.


All of that aside, I've decided to go with a light skin, and use an off coral color for the accenting color since this is a color I don't often see used in web design, and feel it will help the simplistic skin not come off as too boring.







After deciding on a color scheme, I've created a new document, 1249 x 824 pixels, at 72 Resolution, with the background set to Transparent. Then I filled the background with the color #eeeeee.


Here's what I have now:

​

Now we have a blank, light gray background. Here you can either keep your background clean and simple, or add a little something extra. If you're designing a corporate site or some sort of business site, it's normally best to keep things simple, and not add any sort of background texturing.


However, for art sites, and any site that you want to have a little more style, a background texture is almost always warranted. I'm a big fan of noise textures, but really any texture could work, even a grunge texture or vector image in the background would be feasible here.







Here, I added a noise texture to the top and bottom of the canvas. To do this, create a new layer named 'noise texture', fill the canvas with the color #eeeeee, and go to Filter > Noise > Add Noise.


Use the below settings:









Click OK. Now your canvas should be completely filled with noise.
Using the Rectangular Marquee Tool, make a selection like the one shown below:

​

Now right click inside your selection and select 'Feather', type 35 into the box, and click OK. Now hit Delete on your keyboard, which will remove the noise inside your selection. Deselect your selection (Ctrl+D), and set this layer (noise texture) to 15% opacity.


Here's what I have now:

​

The next step is deciding how wide you want the content of your website to be, then designing the menu. Web standard width is 960px for content, but this will change as widescreen resolutions become commonplace.


Once a width has been decided (I've personally decided on 1012 pixels), you need to decide how to display your menu and logo area. There are many different layouts for displaying a menu/logo area but my personal favorite is placing the logo on the same row as the menu, with the logo being aligned to the left, and menu aligned to the right. This simply seems to be the most practical layout to me, since you minimize the amount of negative (blank) space displayed on your website.


I won't explain negative space in this tutorial, as quite honestly the proper use of negative space is another tutorial entirely. I will however link to a great article that describes negative space adequately.










I made a new layer named 'top bar', used the Rectangular Marquee Tool and made a selection like shown in the image below, then filled the selection with #ffffff.

​

Then I deselected and set this layer (top bar) to 35% Opacity and added in my logo and menu text. For the logo I used the font "Diavlo" at 25pt (you can ) For the menu I used the commercial font "Myriad Web Pro" at 13pt. But Arial looks nearly identical at 12pt if you don't have access to this font.


The color for the text I added was #939393. The font style for the logo text was 'Light'.


Here's what I have now:

​

In the previous step I chose a gray color for the text. With web design it's important to make sure your colors don't clash, and instead compliment each other.


For instance, if you have a white background, adding black text is usually a bad idea. While some artists may be able to get away with such things by working off the contrast this creates, it's difficult to pull off and I don't recommend trying things like this until you have advanced understanding of the fundamentals behind web design.


So it's usually best to use light grays against white, gray against light gray, dark gray against gray etc. The text should always be easily readable, but not clash with the background.


The next step here is to make things more interesting by using different font styles and colors. It's never a good idea to keep things monotone when it comes to web design, a good website design will have hints of color from the top of the design to the bottom.







Here I've changed the text styling of 'my' in "mylogo" to be bolded. I also changed the color of 'my' and 'HOME' to #cf8779. The reason the home button is colored is because we're designing the home page (so the colored home text indicates you're at the home page), but it can also indicate the mouseover color for the menu.


Here's what I have now:

​

Now we're going to add the final touches to the menu area. It's always a good idea to separate each section of content with a line of some sort. This makes things look polished, and helps the viewer distinguish each section of content sub-consciously. It's all about making your website easy to use.


One big problem I see with a lot of web designs is that people make these lines too dark, or too obvious. A line that separates any sort of content should always be just visible enough so the viewer can see it's there, nothing more. Never make your lines too dark or it'll distract from the content and make users not want to view your site.







So here I've made a new layer named 'gray menu line', selected the Pencil tool, made the pencil size 1 pixel, and set my foreground color to #d4d4d4.


Then I zoomed into the menu background, and held down shift while drawing a line below the menu background. (holding down shift while using the pencil tool makes your line perfectly straight.)

​

Then I created a new layer named 'white menu line' and did the same thing, except I made the pencil color white, and placed it 1 pixel above the gray line.


Here's what I have now:

​

Then I changed my foreground color to #e0e0e0, and with the pencil tool still selected, zoomed into the menu, and drew lines like in the image below:

​

After drawing a line for each menu button, here's what I have:

​

In the previous step, I added a white line above the gray line. You may be wondering why I did this since you can barely tell that it's there.


When you have a light gray template like the one we're making, it's often a good idea to add white shadows to text (we'll be doing that later in this tutorial), and white lines around lines which separate content. This is done to make things look less blurry.


When you have a light gray background, and put slightly darker gray text over it, the edges of the text tend to fade into the background due to how anti-aliasing works, making things look blurry. Adding a white shadow/line around these areas of content fixes this problem and allows you to keep everything sharp and readable, while having color tones that are easy on the eyes.


When it comes to text, this only works when you make sure the viewer can't actually distinguish the white (or light gray) line. If you make the shadow too obvious, it'll usually look tacky and unprofessional. So it's always best to use shadows as a method of sharpening your content, and not for visual effect.


In this next step we'll be creating a dark background at the top of the design to distinguish the area for your welcome text, image slider, or whatever you decide to put there. Whatever you choose, it should be important content that you want everyone to instantly see.







Next I created a new layer named 'middle background', made a selection like in the image below and filled it with black:

​

Note: You need to make sure your selection is directly below the gray line we made under the menu background earlier. So you may need to zoom in to make sure that it's placed exactly like this:

​

After doing this I deselected and set this layer (middle background) to 5% Opacity.


Next I zoomed into the bottom of the background we just created on the 'middle background' layer and made two new layers named 'white line' and 'black line'.


On the white line layer, I selected the pencil tool, set it to 1px diameter, set the foreground color to white, and drew a white line across the entire canvas, 1 pixel below the 'middle background' layer (while holding shift to keep the line straight).


On the 'black line' layer I did the same thing, except with black as the foreground color, and drew a black line 1 pixel above the white line. (this is essentially the same thing we did with the two lines under the menu)


The below image should demonstrate what I did here:

​

Then I zoomed out, set the 'white line' layer to 70% opacity, and the 'black line' layer to 7% opacity.


Here's what I have now:

​

In the previous steps, we added lines below the menu, and below the 'middle background' layer.
You may be wondering why I've chosen to do this.


I've added these lines to help distinguish each section of content, you don't want every section of your website blending together or the viewer will be confused and not know where to look to get the information you want them to see. It's always important to distinguish each section of content, even if the method you use is very subtle, it helps a lot.


Adding these lines can also create a sense of lighting and depth if paired with other effects, but that's another tutorial in itself.


Now that most of the background work is done, we move on to the fun part: content!
Here you should decide what sort of content you want to display at the top of your website. This section of content is what every viewer's eyes will instantly be drawn to. So it's important to place useful information here, or the main selling point of your website.


I've personally decided to make my template represent an art collective site, where artists will submit inspiring artwork for everyone's viewing pleasure. So of course the top section of my content is going to be displaying the art, which is the main focus of this imaginary website.







I made a new group named 'featured art', then a new layer inside this group named 'left bg', then made a selection like in the image below and filled it with the color #f8f8f8.

​

Then I right clicked on this layer (left bg) and selected 'Blending Options' and used these settings:


Outer glow color: #d8d8d8

​

Stroke color: #d5d5d5

​

Here's what I have now:

​

In the previous step we added an outer shadow and stroke to the 'left bg' layer, this was done to give a little more style to the content box and distinguish it so the viewers eyes more quickly focus on the actual content.


This is again, following the previous rules I've mentioned about distinguishing each section of content.


In this next step we'll be adding in some content. When adding content, it's always important to make sure everything is consistent, and lines up properly.


I'll visually demonstrate what I'm talking about in the below image:

​

- The red lines indicate that everything should be aligned vertically. Think of these red lines as invisible barriers that you can't let your content go outside of.


- The blue text indicates the vertical padding (blank space) for each content box, each section of content should use the same padding within that section. You should also always have the same padding on both the top and bottom.


- The black and purple text indicates the vertical padding for each content section. Again, the padding should remain the same both on the top and bottom within each section.


- The green text indicates the horizontal space between each content box, this should also always be the same width for every content box within its section.


Here are a few other important rules:
- Same amount blank space on the top and bottom of the logo/menu area.
- Same amount of blank space to the left and right of each vertical line that separates the menu buttons.
- Same amount of blank background space on each side outside of your 'invisible barrier' (red line).


There are many more rules when it comes to padding and alignment, these are just a few of the more important ones I often use. Feel free to experiment with padding and alignment rules of your own.


Making sure your design is consistent in this way will allow you to appear more professional. It's generally good practice, as with more complicated designs the inconsistencies will show through when it's coded, and turn away professionals from your website. (especially an art site)







Note: Make sure all of layers you create in this step remain in your 'featured art' group, we will be duplicating the entire group shortly!


Here I selected the Horizontal Type Tool and added the text 'FEATURED ART' to the top left of the first content box using the font Arial at 10pt.


Below that I added the name of the art piece I was planning to place in the content box, and who created it ( by ) using the font 'Diavlo', the same font we used for the logo.


Font styles:
"Valis" - Medium, 16pt, color: #6a6a6a
"by" - Light, 14pt, color: #939393
"Wen-M" - Light, 14pt, color: #cf8779


Here's what I have now:

​

Next I added the thumbnail I wanted to use, and gave the thumbnail itself an Inner Glow:
Blending Options: Size: 7px, Color: black, Style: normal Opacity: 15%),


I also added a double border around the thumbnail (1px white border with a 2px gray border behind it) for extra effect.


This isn't totally necessary, you can add your own border, copy what I did, or use no border at all.


Then I added the thumbnail and wrote some dummy-text below it. (color: #939393, font: Arial at 11pt)

​

And finally, using the Rectangular Marquee Tool I made a small box, filled it with the color #bf7f73, and wrote 'VIEW FULL IMAGE' with the font Arial at 10pt, using #ffffff for my text color.


Here's what I have now:

​

The key in this previous step is to use good fonts to present your website. So many websites are let down by bad fonts, they'll either use the same font from top to bottom, or use bad fonts like Verdana or even Comic Sans *cringe*. Use custom/professional fonts wherever it's warranted, as these fonts are viable to use in web design now since they can be rendered with CSS.


It's always recommended to use at least two different fonts in web design, one or more stylish fonts to bring attention to and present each section of your website's content, and one clean font for content and lengthy paragraphs of text.


I personally find Arial to be the best sans-serif font for content, Tahoma and Trebuchet MS are also good alternative fonts to Arial on some occasions.


In the previous step I added a very simple square button, using only a solid color for the background. Sometimes it's best to keep things simple when it comes to web design, but feel free to mess around with your own button styles.


I personally plan to add a nifty highlight to the button when it's coded, so I decided to keep it simple, but here's an example image of how you could add a little more style to the button with minimal effort (original button on the left, stylized button on the right):

​

In this next step I'll be duplicating the 'featured art' group and using the padding/alignment techniques I demonstrated earlier.







Here I selected the 'featured art' group. (it should contain all of the layers that make up the content box we just finished finalizing), right clicked on the group, and clicked 'Duplicate Group'.


Then I moved the entire group with the Move Tool to the far right side, and changed the text and thumbnail to make the design look more believable.

​

The next thing to do is decide how much blank space to use between each content box, I personally decided on 17px then duplicated the group once more and moved it over like so:

​

Then I opened this group, and selected the background layer (left bg) and hit Ctrl+T on my keyboard to resize it:

​

And finally, I added a new thumbnail of appropriate size, and changed all of the text accordingly:

​

In the next few steps we'll be adding the bottom section of content. This area of content is where you can include any extra bits of information, statistics, even a thumbnail slider or randomizer of some sort.


You can also make this section as big or small in height as you wish, It all depends on the content needs of your site. I've personally decided to add a content box containing links to the 5 most recent art submissions, and another content box containing an article about digital art.







Here I selected the Horizontal Type Tool and typed "Our Community" into the bottom content section using the font 'Diavlo' on Medium at 18pt, color: #8d8d8d


Then I added text below 'Our Community' to fill up some negative space. I used Arial at 10pt (11pt if you don't use all-caps), and #939393 for the color of the text.

​

Next I made a new group named 'bottom content box', then a new layer inside this group named 'bottom left bg', on this layer I made a selection like the below and filled it with #f8f8f8.

​

Then I right clicked on this layer (bottom left bg) and selected 'Blending Options' and used these settings:


Outer glow color: #e2e2e2

​

Stroke color: #d5d5d5

​

Here's what I have now:

​

Next I added some text:


"LATEST WORKS" - Arial, 10pt, color: #939393
"by" - Arial, 11pt, color: #939393
Links - Arial, Bold, 11pt, color: #bd6756

​

Next I added dotted lines to separate each link, and the header text.


To do this, select the Horizontal Type Tool, and go to Window>Character; on this panel, use these settings:


Text color: #bfbfbf

​

(note: the only thing I've changed here is the spacing, to make the dotted line look better, you'll need to change the spacing from "-100" to "0" if you want to type normal text again)




Then I typed "........................................" below "LATEST WORKS". This is what I have now:

​

After doing the same thing for each link, here's what I have now:

​

In the previous step we added dotted lines to separate each row of text, you can also add normal lines using the pencil tool at #dfdfdf.

​

It's all preference, experiment and find what looks best for your website.


The important thing here is that when adding any sort of text or link listing on your website, you should add some sort of separating line or definition to each row, this makes your design easier to navigate.







Here I selected the 'bottom content box' group. (it should contain all of the layers that make up the content box we just finished making), right clicked on the group, and clicked 'Duplicate Group'.


Then I moved the entire group with the Move Tool to the right like so:

​

Then I opened this group, and selected the background layer (bottom left bg) and hit Ctrl+T on my keyboard to resize it:

​

Next I deleted the link rows and changed "LATEST WORKS" to "DIGITAL ART".

​

Then I typed some dummy-text using Arial at 11pt, text color is #939393, link color is #bd6756.

​

In the last few steps I've tried to include as many links as possible, this allows me to easily add color to an otherwise monotone template design. Sometimes it's very difficult to add accent colors to templates because it either looks bad, doesn't fit, or simply looks better gray. But the few areas where accenting colors are -always- viable are the logo, menu, and text links.


So even if you're unable to feasibly integrate color into the design, you can always throw color into the text links and logo, this helps tremendously when trying to avoid making a monotone website design.


In this next step we'll be adding the final design element: The copyright bar.







Here I made a new layer named 'bottom bar', then made a selection like the below and filled it with black:

​

Then I set this layer (bottom bar) to 10% opacity.


Next I made a new layer called 'dark gray line', selected the pencil tool at 1px diameter, set the foreground color to black, then zoomed in and drew a black line going all the way across inside the bottom bar we just made, like demonstrated below:

​

Then I zoomed out to normal size and set this layer (dark gray line) to 10% opacity.


Here's what I have now:

​

Next I added some copyright text and links to the bottom section using the font Arial at 10pt (11pt if you don't use all-caps), with the color #818181

​

And for the final step I added some finishing touches. I added a 1px pencil dot between each link at the bottom. Then I right clicked on the bottom text layers, hit blending options, selected 'drop shadow', and used these settings:


Shadow color: #ffffff

​

I also used the same blending options on the menu text to the right of the logo at the top.
(except 100% Opacity instead of 25%)


The reason I added these drop shadows is to sharpen the text, I explained this technique in detail in an earlier step.

​

--


Want more tutorials? Have a look at: ​

 

Thanks, and do you know where to get a good tutorial on how to turn that into an actual website?

 

is there a tutorial for a dark themed site?

 

thanks helped a lot

 

Thanks a lot! :D

 

I'm going to totally implement this idea somehow in GKCraft :D

 

To turn it into a website you'll need a programming language such as HTML etc.

 

obviously, lol he was asking about a tutorial on how to program it or use a program like dreamweaver to transfer a layout into a website.

 

I would really like this too. I know how to use dreamweaver, but now to this extent ^.^