OVERVIEW

For this tutorial we will be using Photoshop to cut up .psd's (photoshop document) of web pages. We will use a simple technique involving the marquee (m) to cut and paste. Another effective method involves using the slice tool. For me it's more difficult to get exactly what I want cut out that way so I won't cover it. Feel free to do so on your own.

PRINCIPLES

Before you start slicing there are a few principles you need to understand. First of all you only slice things that you can't code, or things that would require heavy coding. For example, you wouldn't slice text from your content if it were written in a web standard font (such as Arial, Verdana, Times New Roman, etc.-if you want a list, click here). That's because you can tell the browser to use that font in your code. The browser can't show non-standard fonts a lot of the time so you need to save them as images.

Also you wouldn't slice a solid color, since that is easy to recreate with code. You can tell the browser to display solid colors. But you can't tell your browser to make gradients so that would be something you should cut out. Rounded borders need to be cut out and images need to be cut out. If you have questions about what to cut out you can wait until you run into that part of the coding to know for sure. As long as you have most of the cutting done before coding it won't take too much time to go back and cut parts you didn't get around to before.

SLICING INVOLVES THREE MAIN STEPS:

• 1. Targeting images (selecting and copying the desired image).
• 2. Pasting the image in a new document.
• 3. Saving the selection for the web.

ONLY WHAT YOU NEED

You only want to target what you need. For example, if you have a menu in Arial font (which is one of our standard fonts) on top of a gradient background, then you'll need to cut out the gradient background. But you don't want to cut out the font on top for three reasons.

First, you can tell your browser to write it on top which would save a lot of work updating the site in the future. For example, if you wanted to change the HOME option to MY HOME, then if you cut it out as an image you would have to go back into photoshop to change it. But if you only cut out the background you would just have to change HOME to MY HOME in your code and you'd be done.

The second reason is a little more complicated. You don't want to cut it out with the font showing on top because then you'd have to cut out a separate graphic for each menu item. Instead if you cut out one background you can use it for every option, since, if it were a gradient, it would be the same behind every one. That would make it so your page would load faster because there would be less images. As a web developer you always have to think about page load time.

The third reason is because if you have things like menu options as images instead of code, Google doesn't rank you as high in it's searches. If you get more into web development you'll want to use every technique you can to get ranked high for search engines and this is an easy technique to start with.

So, in order to only cut out what you need, click on the eye next to the layer of whatever is on top of what you want to cut out. So in the example of text over a background gradient, select the text layer, click on the eye, and now you can select just the gradient.

SELECTING

This is simple.

• 1. Choose the Marquee tool (by clicking on it in the toolbar or just typing M).
• 2. Using your mouse, click to get a selection around the image you're cutting out.
• 3. Merge Copy (this allows you to copy down through all the layers so it copies exactly what you see. Otherwise it might only copy part or give you an area saying it can't copy at all). You do this by either going to the Edit menu and selecting Copy Merged, or by pushing Apple + Shift + C.

• 4. Create a new document. Either go to File and choose new, or push Apple + N.
• 5. Paste the image. Choose Paste in the Edit menu or push Apple + V.
• Crop the image to get rid of everything extra. TIP: There is a trick you can use if the extra you're trimming off the image is all the same color. If you go to the Images menu and click Trim, it will automatically trim it down.

This is crucial because we need to have the smallest file size we can so the pages will load fast. At the same time we want the quality to be good enough so the design is still showing in all its glory.

We do this by using the SAVE FOR WEB option in photoshop. You find it in the File menu as SAVE FOR WEB and devices. You can also push Apple + Option + Shift + S.

Then you'll get a box that comes up and gives you options for what to save it as. If you want the easy no brainer solution, choose .gif as the format for gradients and text, and choose .jpg for images. Set the .jpg as Quality:80%. Those options are on the right, just under save, cancel, and done.

Sometimes in more advanced layouts you'll need images that can be transparent. In that case you have two options: PNGs or GIFS. PNGs would be your choice if you have more than one background color your image will be over (this is called alpha transparency). GIFs only work with one color background. In that case you choose the transparency background by leaving Transparency checked, and choosing the background color as the Matte.

PNGs=Headaches. PNGs are great, but they Internet Explorer (curse that browser) doesn't display them right. So you would have to use hacks to get the to show right. Also there is an extra bit of information called Gamma correction stored in the PNG that makes its color slightly off what it should be. I'll consider posting how to strip images of that so the color is all right later. For now just know that if you've used a PNG and your color doesn't match up perfectly, you need to search for Gamma correction to get the color fixed.

Also, if you're going to use PNGs, save them as PNG-24 instead of PNG-8. 8's almost never look good.