Image Slicing
Preparation for HTML and CSS.
Below is a view of every image it takes to make our concept design a full web page in html and css. These are the images that we will reference in CSS. Other graphical elements of the design can be accomplished with CSS. The objective of image slicing is to use as few images as possible, and use CSS where possible to achieve other design elements.
There are several different methods to slice an image, and I will outline them below.
- The first 6 images at the top are all text layers. When you want to save a text layer in Photoshop, you select the text layer in the layers window, and then use the Magic Wand tool to select it. After it's selected, you hit CTRL-C to copy the layer. Then you go to File -> New, CTRL-V to paste, and then File -> Save For Web. Save it as a GIF or a PNG file, and that's it!
- The facebook.gif, twitter.gif, rss.gif, introducing.gif, bottle.gif, submit.gif and textfield.gif were all selected with the rectangular marquee tool. A simple square selection is all it takes. Then repeat the process in the above step to save the actual image once you've made the selection.
- The dirt.gif and mixer.gif were selected by using the Magic Wand tool. You first select the layer, then use the magic wand tool to select anywhere outside of the actual image. Then choose Select -> Inverse, and your selection is made.
When you save your images, be sure to save them in the following folders: /html/images. This means you will need to first create a folder called "html", and inside of that folder, create another folder called "images". This is where you will stick these images.
