9 Photoshop Editing Tips Web Developers Should Know

Apr 27 2010 by Omer Greenwald | 40 Comments

9 Photoshop Editing Tips Web Developers Should Know

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.

RSS icon

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 (W) 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.

Changing the background color of an icon

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.

Changing the background color of an icon

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.

Changing the background color of an icon

2. Selecting a layer with Auto-Select

Selecting a layer may seem obvious: you click on the layer’s name in the Layers Panel (press F7 if you don’t see it).

However, finding the relevant layer can be tedious when there are many layers in your work or if the layers aren’t named intuitively.

One option is to enable the Auto-Select option:

1. Click on the Move Tool (V) in the Tools Panel.

2. Choose Layer from the Auto-Select drop down.

3. Make sure to check the Auto-Select box.

Selecting a layer with Auto-Select

After enabling Auto-Select, clicking anywhere in the canvas itself will activate the relevant layer.

3. Selecting a layer with Ctrl/Cmd + click

A second option for selecting a layer is to use the Move Tool (V)—leaving the Auto-Select option unchecked this time—and then Ctrl/Cmd + clicking on an object in the canvas to select a specific layer.

4. Isolating a layer

After selecting a layer, you may want to copy it to a new document where you can save it as a separate image.

One way to do it would be using the Crop Tool (C).

Isolating a layer

However, there is a quicker way that preserves the accurate size of that layer:

1. Hold down Ctrl/Cmd and click on the layer’s thumbnail. This should make an automatic selection around the objects in that layer.

2. Press Ctrl/Cmd + C (shortcut for Edit > Copy)

3. Press Ctrl/Cmd + N to create a new document. Photoshop detects the size of the layer you want to copy and creates a new document with the same size.

4. Click Ctrl/Cmd + V to paste into the new layer.

5. Copying a layer from one document to another by drag and drop

There are many ways to copy a layer or a group of layers from one PSD file to another. However, the easiest method is simply to drag and drop them.

1. Select a layer from the Photoshop document you wish to copy from. If you need to copy multiple layers, hold down Ctrl/Cmd and click on the layers in the Layers Panel.

2. Select the Move Tool (V).

Copying a layer from one document to another by drag and drop

3. Click anywhere in the canvas and drag the layers up to the tab of the document you want to copy the layers to.

The window will switch to the second document. Release the mouse button in the canvas where you wish to place the copied layers in the second document.

6. Refining a selection by contracting or expanding it

In the first tip, I demonstrated how to select the background of an icon. In some cases, the selection is inaccurate and you may want to expand or contract that selection from all directions.

First, to get a closer look at your selection, press Ctrl/Cmd + + which will zoom into your work.

Go to Select > Modify > Expand or Select > Modify > Contract.

Copying a layer from one document to another by drag and drop

Type the number of pixels you wish to expand or contract your selection by, and then click OK.

Copying a layer from one document to another by drag and drop

7. Using Layer Comps

When working with many layers, it is more efficient to capture different layer visibility states. In other words, it’s best to set a layer’s visibility to display only the layers you want to.

1. Display the Layer Comps Panel by go to Window > Layer Comps.

2. Click on the Layer Comps menu and select New Layer Comp or click on the Create a new layer comp button at the bottom of the Layer Comps Panel.

Using Layer Comps

3. Type the name of your Layer Comp, check the Visibility option and click OK.

Toggle Layer Comps

To hide and show your layer comps, just click on the icon on the right side of the layer comp.

Using Layer Comps

8. Basic image manipulation: changing colors

Another common task in Photoshop is duplicating a part of a layer for color changes or transformation.

Here’s an example. The following icon is used as a menu button:

Basic image manipulation: changing colors

How can you create a duplicate version of the house (only), and make it black and white? This is a situation that often occurs when you need to create mouseover effects on a web page.

1. Click on the Rectangular Marquee Tool (M).

2. Select the house on the canvas. Then press Ctrl/Cmd + J to duplicate it into a new layer.

3. Click Ctrl/Cmd + U to adjust Hue/Saturation for the new layer. Scroll the saturation left to turn the house to black and white.

Basic image manipulation: changing colors

The result:

Basic image manipulation: changing colors

Remember that you still have the colored version of the house. To view it, just toggle the duplicated layer’s visibility.

9. Using measurement tools

As a web developer, you often need to measure objects for pixel-perfect accuracy when rendered on a web page. A common example is calculating menu item sizes for creating CSS sprites.

Here are two methods to measure elements:

Rulers (Ctrl/Cmd + R)

1. Click, hold, and drag from the top left corner of your rulers towards the canvas.

2. Release the mouse button where you want to start the axes.

3. Zoom in (Ctrl/Cmd + +) to view finer increments of the rulers.

Tip: To change the measurement units of the rulers (from inches to pixels for example), double- click on the ruler itself to open the Units & Rulers Preference dialog window (or go to Edit > Preferences > Units & Rulers) and select the desired measurement unit.

Using measurement tools

The Ruler Tool (I)

1. Click on the Ruler Tool’s button on the Tools Panel (if you don’t see it, right-click on the Eyedropper Tool and switch it to the Ruler Tool).

2. Click and drag from the start to end-point that you wish to measure.

3. Check the width and height indications.

Using measurement tools

Got Photoshop tips for web developers of your own? Please share it with us in the comments.

Related Content

About the Author

Omer Greenwald is a web developer, blogger and WordPress enthusiast. He specializes in HTML, CSS, JavaScript and PHP. You can check out his blog called WebTechWise, which shares tips and tutorials for bloggers and site administrators. To connect with the author follow him via Twitter as @WebTechWise.

40 Comments

Rob

April 27th, 2010

Thx for the useful tips. I agree that any web developer needs to have basic PS skills. As that web designers need basic HTML/CSS skills :-)

On tip 1: If you change the background color. The background color of the shadows will still be white, right?

What I would do: capture all the area around the rss icon, inc shadows. Then change the bgcolor and trough layer style I’ll add a new shadow.

Jeff Edsell

April 27th, 2010

Here’s one I run into a lot — I need to create a transparent PNG of a layer, but when I turn off all the other layers I find that it actually has a white background. I need to remove the white but preserve the translucency.

The best explanation I’ve found is here: http://is.gd/bJS1l , but essentially you copy the image into a new channel, invert it, command-click to create a selection, then make a mask from that selection.

zoe4ever

April 27th, 2010

great tips, thank you very much.

JJ Nold

April 27th, 2010

These are not the best methods IMO.

Chris McCorkle

April 27th, 2010

@Rob – it’d be smarter to just select the original shape, invert the selection, then continue.

Jacob Gube

April 27th, 2010

My favorite tip to web developers is something simple. Turn on the Info Panel (F8). It gives you measurements of your selections and coordinates, things that are important for working with web layouts and interfaces. When I accidentally toggle it off, I quickly realize it within 5 minutes of firing up Photoshop.

Omer Greenwald

April 27th, 2010

@Jeff – good tip and a straight forward explanation.
@JJ Nold – please be more specific. I’d love to know better methods to do these tasks.
@jacob – very useful indeed for measuring size and margins when using the selection or crop tools.

Jonathan Chacko

April 27th, 2010

@ JJ – what are some better methods?
These are great tips for developers and designers alike.

Angela Easterling

April 27th, 2010

Great tips Omer. I think this will be very useful to non-webdesign savy people.

For Tip 1: I usually use the pen to to get a more accurate selection. But I hadn’t considered Chris’ suggestion. Also a very good tip.

Rick

April 27th, 2010

Another tip is to select a layer and option click the eye icon to hide all other layers. Handy if you need a transparent png slice

Jesse Kaufman

April 27th, 2010

wouldn’t a better way be to make the button using Photoshop’s vector tools instead? That way, you can change the color (as well as any layer effects) at-will without having to do a bunch of “hacky” stuff that could easily degrade the quality of the image.

Also, there’s no reason to open the GIF and save it as a PNG. Just open the GIF, change the mode from “Indexed” to “RGB” and edit as needed. Then when you save, make sure you select PNG.

Sarah

April 27th, 2010

Great tips Omer. I think this will be very useful to non-webdesign savy people.

For Tip 1: I usually use the pen to to get a more accurate selection. But I hadn’t considered Chris’ suggestion. Also a very good tip.

Ed

April 27th, 2010

I think tip number one would get you a pretty ghetto looking icon. The feathering around the shadow would be a killer. I think you could consider that a “quick and dirty editing tip” that every web developer “might” want to know. To be fair, I guess you did point out that it’s for those who may not even have basic photoshop skills.

Edward Sanchez

April 27th, 2010

Custom shortcuts changed my life more than any of these tips ever could.
Go Edit > Keyboard Shortcuts and assign shortcuts to the things you do the most.
I have shortcuts for opening blending options, for copying/pasting layer styles and for hiding/showing layers.

Don

April 27th, 2010

@Jeff – good tip and a straight forward explanation.
@JJ Nold – please be more specific. I’d love to know better methods to do these tasks.
@jacob – very useful indeed for measuring size and margins when using the selection or crop tools.

James Mehorter

April 27th, 2010

Nice compilation Omer! I like the Layer Comps one! It will be helpful with multi-page layouts.

Some of my personal favorites for Photoshop that I find extremely helpful with web development include the Slice Tool / Save for Web, Layer Masks, Clipping Masks, and Adjustment Layers.

You can also avoid some common web design issues like jagged edges and scaling images becoming blurred; by copying a layer selection and pasting it into illustrator to apply your transformations. Then copy / paste the layer back into Photoshop as a vector layer.

Omer Greenwald

April 28th, 2010

@Angela, @Rick, @Jesse – thank you for the tips.
@Ed – what is your suggestion then?

Johan de Jong

April 28th, 2010

As an addition to Jacob’s tip:
Make sure the measurement units are set at ‘pixels’.

Especially for developers it’s usefull to see all sizes in pixels instead of points, millimeters or inches. This because we (read: developers) work in pixels…

Stefan

April 28th, 2010

These are great tips, i was looking for something a long time ago, thank you!

Jordan Walker

April 28th, 2010

I have really grown to like Photoshop and the diversity the software brings to elements.

Franco

April 28th, 2010

Great Tips, I didn´t know a couple of them, I´m sure they´ll help me boost my performance time. Thanks!

John Braine

April 28th, 2010

Have to agree with some other commenters on tip number one. The approach and results aren’t ideal. I find ‘Multiply’ can help a lot with this issue depending on the colours, here’s one method for simply re-saving as a gif with a new background colour:

1. Add the background colour layer under the icon and fill it.
2. Set the blending mode of the icon layer to ‘Multiply’
3. Create a new layer between those two layers.
4. Zoom right in for accuracy and use the rounded rectangle tool (16px radius) to draw a white box the exact same as the orange box.

All done. Will be perfect depending on accuracy of step4. You’ll find you can often get away with just the first two steps. Of course other times step 4 may be harder.

And here’s a small but useful workflow tip to speed up saving images for the web: http://www.johnbraine.com/2009/04/photoshop-workflow-tip-for-web.html

Young

April 28th, 2010

@Jeff if you delete the background it’ll give you transparency. just make sure you save as a format that supports transparency like GIF or PNG, and check that transparency box.

Great list of tips Omer.
I also like to use the magic wand and the ever-so-sweet quick selection tools whenever I can. When there’s a shadow it’s a little more interesting, but for that example #1 up there I probably would’ve just done rectangular marquee then select > smooth.

For #4 and #5 I actually like to use duplicate layer option from the layer panel, which allows you to copy layers onto any document currently open or to a new document. I find having to drag something over to a new tab very cumbersome, and this way I don’t have to gingerly move my mouse making sure never to take my finger off.

Basic Selection Tools

April 28th, 2010

great tips
some shortcuts like “tab” key to change interface
“ctrl+shift+Z” for multiple undo
are very necessery

nick

April 28th, 2010

wouldnt the method use in #1 leave a horrible looking white edge around the shadow?

JJ Nold

April 28th, 2010

@Omer, @Don:

1) When removing a drop shadow from an image I would not select the shape and the drop shadow, but instead I would just select the shape, as it is always easier to re-add a drop shadow then to try and perfect the selection. In addition, if the background the shadow was incorporated on is white and the background it’s going on is a different color, then the drop shadow will not look natural as there will be white color bleeding through the original shadow.

2) I personally use the quick selection tool more than the magic wand because you can grow and shrink selections a little easier. Once a general selection has been made I will use refine edge (ctrl + alt + R, cmd + opt + R) to perfect the selection until I am satisfied.

3) Instead of just deleting the background completely, I like to use a layer mask to mask out the background, this way you have a non-destructive edit that is easy to make future changes to. We can then use a solid color fill to have any background we want and we can add a drop shadow with layer styles.

4) The same goes for the hue/saturation adjustment. I would use an adjustment layer (if one has CS4 or higher) to make non-destructive changes to the icon.

These are my preferred methods as they are less destructive and are easier to update for future use. Hope this was helpful!

Omer Greenwald

April 28th, 2010

@JJ Nold, @John Braine – I appreciate the walk-through tips and agree with you that they are very efficient in certain situations. However, as the comments here show, Photoshop allows many different ways to perform the same task.

@Young, @Basic Selection Tools – thanks for the tips. I find both the magic wand and the rectangular marquee tool extremely useful in many cases.

Jay

April 28th, 2010

Great, thanks for the tips.

rasmusfl0e

April 28th, 2010

@Omer: I’m with JJ Nold on this – I’m not convinced by the color replacement tip either. Why didn’t you include an image of the end result I wonder?

I can’t see how the technique you provided would provide an adequate result :(

Omer Greenwald

April 29th, 2010

@rasmusfl0e, you are welcome to use any of the alternative methods suggested for color replacement.

Sachin

April 29th, 2010

very very useful ..these ones will help me to be self reliable in my day to day small tasks in photoshop

element321

April 29th, 2010

Great write up Omer.

I am still pretty new with Photoshop, been using it for about a year. Deleting backgrounds can get annoying and I sometimes forget how to do it. Your quick write up makes it easy to remember.

The rest of your tips are good ones to remember as well.

Nirro

April 30th, 2010

Great, Very use full information’s. Thank you for sharing

Daniel

April 30th, 2010

Good practical post.. keep ‘em coming!

Omer Greenwald

April 30th, 2010

@James, @Sachin, @Nirro and @Daniel – Thanks for the comments, I’m glad you find it useful.

TomPier

May 4th, 2010

great post as usual!

WebDesignerDelhi

May 8th, 2010

I bestowed this post to my development team so that they do not unnecessarily hassle me for small things :):)

FlashJuggler

July 31st, 2010

Great tips. Found that the autoselect might be ok when one has not many layers. In files with hundred of layers is not fun anymore. I use grouping and proper naming. Anyway, thanks for this great tips.

Nargile

April 12th, 2011

Thank you very much.Nİce share

Greeny

December 12th, 2011

Very Useful tips .. I salute you for your efforts !!!

Leave a Comment

Subscribe to the comments on this article.