Etiqueta: Portable Network Graphics

There are quite a few reasons why having basic Photoshop skills beyond slicing PSD’s to XHTML/CSS is essential to any web developer.

I have discussed some of those reasons in this article on my blog, but to make a long story short, there are times when you just need to do minor image editing tasks but don’t want to hassle your web designer for it.

Here are common tasks and processes that web developers often need to deal with when working on a web design/web interface using Photoshop.

1. Changing the background color of an icon

As a web developer, one of the most common tasks I encounter is changing the background color of an icon or making its background transparent.

Let’s take an RSS icon for example. RSS icons come in different shapes and sizes.

When you finally find the “perfect” icon, you sometimes need to modify it. One common issue is that if your site’s background color is one color and the icon’s background is another color, to make them seamlessly match, there is a little work we need to do to it.

If the image is in GIF format, I recommend converting it to PNG because they’re similar, but PNGs will usually be smaller in file size. Read about the pros and cons of using GIF versus PNG at W3C.

To do that, open the image in Photoshop, then go to File > Save for Web & Devices (Ctrl/Cmd + Alt/Option + Shift + S), then select either PNG-8 or PNG-24 under the Optimized file format drop-down on the right-side. You’ll have to see which one is better in terms of quality and file size.

(See a guide on how to save images for the web.)

Then close the original GIF file because we are done with it, and then open the image with the new format you have just saved.

Now if you look at your Layers Panel (if it’s not visible, hit the F7 key to toggle the panel’s visibility), you might see that there is a layer called Background.

Right-click on that layer, select Layer from Background from the menu that appears, and then click OK.

Second step: use the Magic Wand Tool from the Tools Panel.

1. Click on the Magic Wand Tool.

2. Make sure that the Tolerance value is set to about 20 and that the Anti-alias and Contiguous options are checked as demonstrated below.

Then click on the white (or whatever color) background area surrounding the icon.

Make sure that the selected area doesn’t “eat” too much of the shadow below the icon. If it does, play with the tolerance value a bit (and reselect the background again with the Magic Wand Tool), until you get the desired result.

To delete the background color

To delete the background and make it transparent, simply press the Delete key to clear the area below the selection. Then save it again as a PNG by going File > Save for Web & Devices, making sure that the Transparency option is checked.

To change the background color

1. Click on your Foreground color, select the desired color from the Color Picker dialog window, and then click OK.

2. Click on the Paint Bucket Tool (G). If you don’t see the Paint Bucket Tool, right-click on the Gradient Tool icon and choose the Paint Bucket Tool from the menu that appears.

Then, click inside the selected are around the icon to apply the color you chose.

Leer más “9 Photoshop Editing Tips Web Developers Should Know”