A fully comprehensive step by step tutorial, from design to HTML & CSS.
The Design Process
Im going to use Adobe Photoshop to design the site. I havent ever used any other application so I cant really say whether or not itsthe hands down best application to use, but it definitely is what most people use and I have no complaints about it. Im using CS2 specifically for this but you can use pretty much any version, because I wont be using any type of elaborate tools. In fact, I never do.So if youre using a different application, its not a big deal, because chances are you will be able to follow along just fine. Just dontuse MS Paint ;).
I will be covering this design process as specific as possible, while attempting to explain everything in detail from the actualinstructions, to the reasoning behind my different design decisions. So feel free to skip over areas where Im rambling on and on.
Prepare your document
The site were going to be designing is going to fit within 1024 width resolutions. Most people use 1024x768 for screen resolutionsbut not everyone. Its okay to go beyond 800x600 only if your target audience will be using (for the very large majority) at least a 1024x768 screen resolution. And since SiteVerdict.com is for webmasters, this is most definitely the case. Otherwise if you were to start a site for senior citizens, you definitely would want to design for a 800x600 resolution.
Now you probably asked yourself, Why not just set the width to 1024?. Because you have to consider that the scrollbar on thebrowser is taking up width, which it is. You can actually go higher than 935, but its just my personal preference to set it at around935 px.
Step 2 : Fill the background, Set your guides, Expand
 | 6. Go to Image / Canvas Size... |
| Step 1 Explanation: | I knew coming into this design that that was the color I wanted to use. I like the very light beige / off white color. Generally however, I always just start off with white and then experiment from there. The background color you choose is very important. You generally want to stay away from darker background sites for *most* sites. If youre after a really serious corporate site, or an ecommerce site where youre selling something, its better to stick with lighter colors / white. |
| Step 2 Explanation: | Maximizing your document is really a matter of personal preference. But I really recommend you do it. It gives you a nice big open canvas without much outside interference. |
| Step 3 Explanation: | The reason were aligning 2 guides to the very left and very right of the document is to let us know what the maximum left & right extremes are. This lets us know *NOT* to design the actual content outside of these lines. |
| Step 6 Explanation: | This is the step which made step 3 come into play. Were expanding the document further because it really lets you envision the design as it would appear on a fully maximized browser beyond a 1024x resolution. I personally design on a 1920x1200 resolution and I like to be able to see how the design looks with the full background to the left and right. |
Step 3 : Place your logo & let the games begin
Im not going to be covering logo design here because I already wrote a very elaborate logo design tutorial which youcan find here.
As you can see the logo I decided to place in the upper left corner just against the left guide. I chose to make it black just tosee it with the most contrast against the background.
Now this is the point at which the *real* design process begins. This is where most of the thought and planning comes. Youneed to know what exactly the site is about, and the purpose / objective of the site. I really want this site to be both professionaland retroish / designerish. It only makes sense because SiteVerdict is both a serious service (hence making it professional)but also geared towards creativity and design. My color scheme is going to be black and the shades of beige/brown.
Step 4 : Design the header
The header usually always consists of the logo, and the navigation. Its what people are most familiar with and makes the mostsense for this particular site because I want it to be easy to use and understand. If you were doing a personal portfolio designsite or something, sure you can do something completely off the wall. But for this example, and most others, you will want tostick with the same formula of having your primary navigation and logo at the top.
I kind of want to give the same feel to SiteVerdict as I did this site (garysimon.net). Since theyre both my sites, and both in thesame industry, it makes sense to kind of network them in a design sense. So Im going to create a black bar that goes allthe way across the entire width of the document at the top.
1. Select the square marquee tool. (The square dashed icon on the upper left corner of the tools menu on the left).
2. Left click and hold above the upper left corner of the document, and drag all the way across the top and slightly down thenlet go.
3. Select the paint bucket tool, and make sure black is selected in your foreground color and left click inside the square marching ants
Now I have just a random / unique idea that I want to incorporate. It will combine the logo into the black area, into a patch likerectangle that is half inside and half outside of the black strip.
 | 1. Select the square marquee and drag a square similar to the one on the left. 2. Use the paint bucket tool with black as the foreground and left click inside of the square selection. 3. Select the layer that the logo is on (assuming its a logo completely flattened to 1 layer), and go to image / adjustments / invert. 4. Place the logo layer to the top in the layers window and move (with the move tool) the logo inside of the square black area. |
 | In order to incorporate that side of designer / retroish, Im going to scrape the black block we just added. 1. Select the eraser tool. Then in the brush options at the top, choose a brush and diameter similar to the one shown to the left. Now that pretty much takes care of that side. Now we need to integrate the actual navigation and determine if we want it inside the black bar to the right, or beneath the black bar to the right. So actually I think what well do is create a secondary strip thats slightly darker than the background beige color that will go along the same height as the extended rectangle we added. |
The way you create that strip is the same way you created the black strip above it. Just first select the background color of the page with the eyedropper, click on the foreground, then change the color with the circular icon to slightly darker. Then usethe marquee to make the strip, fill it in with the paint bucket tool. Make sure you place it on its own layer, and then position it*beneath* all of the other layers we created.
1. Select the paint brush tool and then select a brush similar to the one that you used to create the scrape effect. You should end up with something similar to the last image. | I figured this would give us some more of that designerish flavor by adding the rough bottom edges to the beige strip we just created. |
1. Select the Type Tool. | The next step is to add in the navigation. I just want it to be a simple HTML text navigation. And it is always important to choose none for anti alias in order to simulate real html text as it would appear in the browser. |
We could put a secondary navigation in the black strip above it if we wanted to but its not entirely necessary at this point. So that is the header. Its very straight forward, but it also looks good and is easy to understand - which is what its all about.
Step 5 : Primary Content
After the header, you want to emphasize the most important aspect of your site, and generally to the *left* just beneath the header - because thats where people look at first. They read from left to right. So with this idea in mind, Im going to simply state exactly what this site is, or what the visitor should do, etc...
This is just standard text from the type tool, except Smooth is selected for anti-alias option. These are two different text layers. The top one So you have a website? Post it is one layer with the Post it bolded, and then of course the Get your .. is on its own layer as well. | As you can see I added a weird wet effect behind it. 1. Create a new layer in the layers window and place it underneath the two text layers. |
The text I added to the right is simply 2 different text layers and theyre arial 14pt alias none. While the big text beneath it serves as the eye-catcher, this text will fill them in on exactly what this service is and how it works. That way, we completely take care of the whole What is this site about? aspect, which is one of the most important aspects to concern yourself with. People will leave if they dont immediately understand. |
As seen to the right, I added a dashed rectangle. This will encase a secondary piece of content that I feel is most important. So now that I think about it, I think it would be a great place to feature the highest rated sites. Possibly a weekly awarded thing where 5 sites are recognized for having the best ratings. To the left well position a SiteVerdict.com Award trophy emblem, and to the right well list out the sites. It makes sense to feature this because visitors seeing the site for the first time will become motivated to reach that status. Motivating your visitors is huge if possible! | 1. Select the square marquee tool and a foreground color slightly darker than the background. |
1. Duplicate the logo layer(s). 5. Find a picture of a trophy somewhere and vector trace it with the pen tool to create an image similar to the one in the image above. | Vector tracing is what is being shown to the very right. You find an image, and trace over it with the pen tool. I cover vector tracing in depth in my logo design tutorial. |
As seen to the right, I added several things. First, to encompass and show off the trophy more, I added a white glow appearance behind it. This is just an extra step to draw some attention and notoriety to it. The middle dividing line to the right of it helps separate the left from the right, which is the site listings. And the site listings themselves are straight forward, the stars represent the rating of each site. Easy to understand and easy to read. | 1. Select the paintbrush with a large feathered (the soft circular brush near the top of the brush list). 4. Select the line tool (left click and hold the square icon in the tools palette and drag to get the line tool.). 9. Either manually create a star with the pen tool, or vector trace one from an image you find on the internet. |
As seen here, I added two more text layers. Featured sites seeking reviews, which made most sense to me. It allows me tolist either the latest sites added that need reviews, or featured sites that could perhaps pay for an upgraded listing to geton the front page, or list sites that are pending but have few reviews. Sticking it right in the middle of the page gives it goodimportance which is what I want.
Then, I have Browse Sites aligned direction underneath the beige box above it. Notice how I align the beginning of the text,perfectly to the beginning of the box. This gives the layout structure and flow. It makes it very easy to understand and read.It also makes good sense to put it there to the right, because although its important, its not as important as any of the other3 pieces of primary content to the left and above it.
1. Select the square marquee tool | 1. Screenshot an image of a site in your browser. 2. Select the square marquee and draw it out inside of the box we created. 3. Go to edit / paste into then edit / free transform. 4. Hold shift and scale it down as shown above. 5. Right click on the layer and hit apply layer mask. 6. Select the eras or and choose a hard smaller sized brush (at the top) and round off the corners as shown above. | I added 3 different text layers here. The top one is font-size 12pt bold. The Review me (8) is 11px. Select The 8.5 is bolded and its something like |
You have two options to duplicate the box we just created. You could either select all the layers, and New group from layerson the layers pull out menu and simply duplicate them. Or use the square marquee tool, select around the whole box, andgo to edit / copy merged. Then edit / paste paste 5 more times and you can situate them as such.
I added the section to the right pretty quickly. Im not going to cover this part step by step because its pretty selfexplanatory. The little triangular icons are created with the pen tool. Very easy to do, just three point and clicks and its doneand you can duplicate them.
Step 6 : Add a footer
The footer is pretty simple. As you can see its a lot like the header - in fact, I duplicated one of the layers from the headeralong with the rough part of it at the bottom. Then I duplicated the text that served as the navigation and then addedan extra navigation and right aligned it for a quick advertising / contact link.
Complete
And there you have it! A fully completed home page design from start to finish. Its not all that difficult is it? Of course itsa little daunting having to read over this entire tutorial, but really it doesnt take all that long once you get the hang of it.
But were not finished just yet. We still have several steps until its a ready to go, htmld site. So lets venture on to thenext section.
Image Cutting ->
Website Design Tutorial | Design an awesome website in ...
The most comprehensive website design tutorial. Learn how to design a website in photoshop, and cut it up into xhtml and css.
Website Design Tutorial | How to Design a Website
If you go to google.com and search for website tutorial, website design tutorial, how to design a website,
Web Design Tutorial: 30 Awesome Layouts In Photoshop ...
If your next design project involves creating a website layout from scratch, you do not want to miss this article. I have been scouring the web in search o
Website Design Tutorial Design An Awesome Website In
Above you can read our explanation about Website Design Tutorial Design An Awesome Website In . I hope Entheos offers professional custom services ranging from logo
20 Awesome Web Design Photoshop Tutorials
20 Awesome Web Design Photoshop Tutorials on WebDesignDev.com, your #1 web design blog.
FWebDe » Creating an Awesome Website Design With Gimp
Creating an Awesome Website Design With Gimp. Awesome tutorial but I could use more information on creating "fresh" unique graphics with GIMP, :).
75+ Awesome Web Layout Design Photoshop Tutorials
In this tutorial, were going to learn how to create a sleek & clean portfolio/blog Website interface design inside Adobe Photoshop. Make an Elegant and Simple Blog
Webblog360 » Collection of 100+ Awesome Web Design Tutorials
Myblues WordPress Style Layout. In this web design tutorial you will learn how to make a very sleek and stylish blue WordPress style bloging layout.
10 Awesome Web Design Tutorials " Website Design Blog ...
Click to visit: 10 Awesome Web Design Tutorials " Website Design Blog Description: Web Design tutorials are awesome for learning great effects and little
Design a Beautiful Website From Scratch - Tuts+ Code Tutorial
I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let's get going! Through this tutorial,
Travelling is my life
ConversionConversion EmoticonEmoticon