It’s kind of frustrating trying to reason with yourself what program to use for web design graphics: Illustrator?  Fireworks?  Photoshop? GIMP?  (Just kidding – no one uses GIMP, don’t kid yourself.)

I personally use Photoshop and Illustrator together, but with the title Photoshop, it feels like you’re using it for something that it’s not intended.  That’s total crap though, so take it easy.

Filesize and Web Colors

After you’ve designed your site, what you end up doing is cutting it up into little slices that a browser can use/repeat. The purpose of this is so that when John Doe goes to your site, the browser doesn’t have to load 10MB of images, instead only about 100KB.

Furthermore, when saving from Photoshop, you’re working in a program that is designed for printing.  So, once you put that image in Chrome/Firefox/Safari, you’re going to see a major shift in color for each.  Let’s fix that.

Color Setup

(This article by Viget Labs is what helped me understand this tremendously, much appreciated)

We’ll begin with getting the color in line before doing anything.  Once you open a blank document, go to Edit >> Color Settings.

What we’re going to change is just a profile selection.  Once open you will see a dropdown next to settings where you can select “Monitor Color.”

(If you have custom calibrated your computer screen, the option “Monitor Color” might be labeled differently.  For example, mine is labeled “Acer Calibrated, but is the same thing as Monitor Color)

Next, we’re going to make sure that what were seeing on the canvas is what will actually show up in the browser.  In your menu, make sure that “Monitor Color” and “Proof Colors” are checked off like below:

Saving the Image

We’re going to take our image now (I’m using a blown up version of the thumbnail for this article) and save it with the proper color settings.

Go to File >> Save For Web & Devices, a window below will pop up:

This window will take up the entire screen and will let us compress a lot of things and get correct colors.  On the right, there’s a few options:

You can select PNG, GIF, or JPEG primarily and edit the options.  The key points:

• Make sure “Convert to sRGB” is unchecked.
• Make sure “Embed Color Profile is unchecked.
• If you need transparency, you must use PNG.  (Unless you discover a way to make a GIF look good…)

Why is this important?

The two biggest reasons:

• Saving JPEG and PNG files can cause color differences, which you need them to be the same colors.
• In CSS, you can use hex colors, like #FF0000 for red.  If you save a solid red JPEG of the identical color #FF0000 the traditional way in Photoshop, when put next to each other – the JPEG and hex color will be different shades.

The Slice Tool

As mentioned earlier, getting small images on to the web is a headache because you literally spend time cropping down to the exact pixel.  Before, I had gotten used to just using the Crop tool and saving the image.  So, Adobe decided to be cool and add the Slice Tool.

Get your image ready and select the Slice Tool.  (It’s part of the Crop Tool, so hold the Crop Tool icon and a flyout will reveal the Slice Tool)  Click and drag anywhere on your page to create a slice.

You’ll notice that it’s created a varied grid on my image.  If you use the Slice Selection Tool (as part of the Crop Tool as well), you can double click on any slice to get the following options:

From here, you can see the width and height of your slice, the position on the screen, and most importantly, the name.  The name is the best part, because you can save multiple slices at once, and have all the names be appropriately named.

 Save for Web & Devices (Again)

We covered color saving with Save For Web & Devices, now lets see how it helps with slices.

When you go to File >> Save For Web & Devices and you have some slices already, you’ll see something like this:

You can see most is faded out except the center slice.  You can go through and select what slices you want to save and Photoshop will save separate image files.  Super awesome!

File Naming

When saving out multiple slices, this is where naming them beforehand will pay off.

Once you have clicked Save in the Save For Web & Devices dialog, at the bottom you will see these options:

Click on Other… and you’ll get a menu like below:

Now with just “slice name” enabled, the saved out images will be “slicename.jpg” or “slicename.png”

Click OK and we need to do one more thing.  On the actual Save dialog, make sure you have no name, just the extension, as seen below:

If you put anything before, you will get it added as a prefix to your slice name.  (Monkey around with this if you don’t get it, makes sense once you do it a few times.)

Conclusion

This is tedious and frustrating, but it becomes smooth after time.  Slices will literally save you a lot of time for website images, and you can toggle them off if not needed.

The comments section is on the left, please leave a note if I did something wrong or there’s a better way.