How to design a website
A fully comprehensive step by step tutorial, from design to HTML & CSS.
Image Cutting
This is perhaps one of the most confusing aspects for aspiring designers / developers. You have to know how to correctly “splice” or “cut” up the images from the PSD in order to proceed to the HTML/CSS portion. You have to really use your noggin to envision how the site will be structured in both html and CSS. Knowing how to properly splice a design will help you keep your sites load time to a minimal. It’s all about using the *least* amount of images as possible to create an outcome that is identical to the final version of the design in photoshop. So instead of having to cut piece by piece (which would make this section another monster novel), I’m going to categorize all of the images so you can get an overview of exactly how this layout is cut up. Then in the HTML / CSS section, you will be able to see how it all comes together.
And that’s all! That is all that is required as far as images are concerned, for the html / css process of the design we just created. Only 13 images. I will go over each image and provide a basis of reason of “how and why.” I will go from left to right, starting on the top row.
sitebg.gif
This image will be a repeating background set on the body tag. It will repeat horizontally and defautly positioned at the top. You can
see it’s about 12px or so wide, because of the dash which will give it the effect of the dash alternating across the top of the header.
All I did was select the full height of the header portion that I want to repeat with the square marquee tool.
header_bg1.gif
This image is the “rough” area that is aligned at the bottom of the header portion. It will serve as a background-image that will repeat
horizontally all the way across the browser. You can select the layer it’s on, use the magic wand tool and select anywhere except for
the actual rough, go to select / inverse, and then use either the lasso tool or square marquee tool to deselect a the portion which you
don’t want to repeat. It only has to be so long so that it doesn’t look like it’s a pattern.
logo.gif
If you refer back to the design (or just check out www.siteverdict.com), you see there is a little bit of a margin above the “V” (the
highest point of the logo). All I did was use the square marquee to select that whole “patch” along with the logo, and then I selected
(holding shift will allow you to add to selection) 1px at the very top which gives us the necessary margin in the actual image.
so_you_have.gif
This one is pretty easy. I just used the magic wand on the “dirty” layer. Simple enough!
glow.gif
Ok now this serves as the light glow that is seen behind the “SITEVERDICT AWARDS” image. It will be the background in the div.
Simply just used the square marquee tool to select it and save.
site_verdict.gif
I used the magic wand tool to select the logo, and then the lasso tool to select the trophy. It appears as though there’s a margin to
the right of it, because I also selected the fading dividing line along with it.
temp_stars.gif
These are just the stars that go underneath the site names. Square marquee tool.
thumb_bg.gif
This is the background to the thumbnail display versions of the “sites seeking review” part. Square marquee tool is used again.
featured_sites.gif
Now since I want actual “smooth” image text instead of html text, I have saved the actual image for it. I used the magic wand tool
and selected the the text with the text layer selected.
site_thumb_temp.gif
This is self explanatory. :) Used the square marquee tool.
And the rest are also self explanatory. Pretty easy stuff. It’s not all that bad and is usually a pretty quick process to cut the appropriate images up.
The parts that take time however are coming up. :) So let’s continue (I’m writing these in all one sitting, I’m about to yank out my eyeballs.)