Web Design 101: Photoshop

Got something to say?

Share your comments on this topic with other web professionals

Published on April 15, 2008

Photoshop promises great power, but can be more than a little challenging when it comes to clarity and patience. New users can easily get frustrated at how daunting some of the challenges can be when it comes to getting the job done, and even those who are a bit more familiar with it still ﬁnd points of frustration that impede both production and creativity.

So for those who barely know Photoshop, but would like to become more familiar with it—ﬁnd out what sort of things to look for when it comes to the palette system, layers, styles, effects, various tools, and saving or exporting their work—let’s look at the basics.

What are all these palettes used for?

As soon as Photoshop launches, you’re greeted with a whole slew of small windows called “palettes”. Understanding how each one of these work is the key to knowing where to ﬁnd the critical information you need. Sorting them out will make your workﬂow smoother and more enjoyable.

Although some palettes seem to have a very obscure purpose (Histogram, I’m looking at you!), there are a few palettes that I suggest you keep a close eye on at all times:

Info – I watch this one constantly, as it monitors everything from the size of your current selection marquee, the x and y coordinates and color mix directly under your cursor, and even the efﬁciency of performance (found by looking into the many other options for this palette).
Character and Paragraph – this left/right combo is a must-have palette for anyone that edits text in their designs.
Layers – certainly an obvious one to keep open, but I’ve seen the perils of beginners trying to master Photoshop before they master layers. Get to know it better than you do now, and you might just ﬁnd some hidden secrets buried within.

Finally, if you want to explore a little deeper into the inner-workings of Photoshop, check out the options under the Window > Workspace menu. A workspace is an arrangement of palettes that suit your needs. There are a few pre-arranged options in this menu, and selecting one will alter the layout of Photoshop’s palettes—and it even colorizes some of the primary menu options needed for this arrangement. If you feel up to the challenge, you can even create your own arrangements and save them under this menu.

What’s the best way to sort my layers?

I’ve seen a lot of Photoshop ﬁles throughout my years as a designer, and one of the biggest problems I see is how amazingly unsorted the Layers palette can get. Let’s look at a bad example ﬁrst:

In this example, there are two primary issues to avoid: poor hierarchy sorting, and an obscure naming system.

Essentially, you should “future-proof” your document. In other words, when you go back to it at a later date you’ll understand the purpose of a particular layer, and the process of editing the work will be far easier. It’s the same reason programmers add comments to their code.

Naming your layers properly is just a matter of coming up with a one or two-word description that guides you into seeing the purpose of that layer, within the context of your document.

As for hierarchy sorting, think of your document from the bottom-up. Stack items in a logical order, and use folders (and even sub-folders) to help group similar items by type.

The following example is greatly improved by using these methods:

To really open up the possible ways you can sort your work: right click on a layer, open it’s properties dialog, and see that you can add color-coding to your sorting system. How cool is that? Also, in the palette options (found by opening up the tiny-buttoned drop-down menu in the top-right of the Layers palette), you can change the size of the icons, depending on your preference.

What do these Layer Blending Modes really do?

At the top of the Layers palette there is a drop-down menu with a value of “Normal” by default. This is the blending mode for the currently selected layer, which alters how it and the layers beneath it appear.

The Adobe help documentation reads:

A layer’s blending mode determines how its pixels blend with underlying pixels in the image. You can create a variety of special effects using blending modes.

You’ll probably ﬁnd that many of these options are useless unless you’re interested in pursuing a career in professional photo-retouching—I recommend sticking with just three Modes until you get a better feel for how these will beneﬁt your work:

Multiply – like a pair of sunglasses, this will darken everything below it (any white pixels will disappear, since white cannot add to a dark value).
Screen – exactly the opposite of Multiply, the layer will lighten everything below it.
Overlay – is a strange hybrid of both Multiply and Screen, where the neutral non-effective color is grey. White brightens, and black adds darkness, but with a different calculation that adds more color than the other two values.

What are Layer Styles?

Layer Styles are live, “non-destructive” effects that you can add and remove without altering the original layer’s art (unlike many ﬁlters). Bevels, drop-shadows, gradients, color effects, and textures can all be mixed-and-matched for a variety of visual effects.

There are three ways to inspect and add styles to your layer:

By double-clicking the layer to the right of its name, to open a Layer Styles dialog window
By choosing the options in “Layer Style” in the Layer menu
By selecting a new style from the Styles palette (though this will only add a preset, rather than opening the Styles dialog for you)

What other tools are available?

As you experiment in Photoshop, you’ll eventually want to move beyond Marquee selections and the Paintbrush. There are a wide variety of other tools available that can provide you with a well-rounded set of abilities. These include the Magic Wand (for selections), Healing Brush, Pencil, Blur & Sharpen, Dodge & Burn, the Pen for creating paths, and a tool that allows you to drop in custom shapes.

The Hidden Tools

Speaking of the tool palette, have a close look at each button. Down in the bottom-right corner, you’ll see a small black triangle. This indicates that for each tool available in the palette, there are other similar tools hidden just below the surface. These additional tools can be accessed by holding down the mouse button for more than a few seconds, or right-clicking to view the list of choices.

How should I export my image for the web?

When it is time to export your images in a format suitable for online use, you might be tempted to simply save a copy of your ﬁle as a jpeg. Although technically there’s nothing wrong with this approach, Photoshop does have some built-in features that can make this step a little easier.

Save for Web & Devices…

If you look under the File menu, you’ll see an option to “Save for Web & Devices…”. Choosing this option will activate a rather large dialog that may seem a bit daunting for those unfamiliar with the feature.

Along the top are tabs to view the original image, the optimized (compressed) image, both the original and the optimized (2-Up), or a set of four choices all at once. Generally, 2-Up should do ﬁne for most uses.

Along the right, you can choose what type of compression does the best job of generating a small ﬁle size, while retaining the integrity of the image. Take some time to really explore the different compression options and see how they affect your work. The ‘before’ and ‘after’ filesizes are displayed below each image.

Here are a few guidelines that I follow:

I never use Photoshop’s slicing tools. Adobe still hasn’t (in my opinion) got this down quite as well as Fireworks, and it tends to make things a bigger mess than necessary. Also, avoid having the export generate HTML.
There’s no need to use the “Progressive” option for jpeg ﬁles anymore—it’s a throwback from the days of a far-too-slow internet, and photos had to slowly crawl their way through the tubes to your browser.
ICC Proﬁles should also be turned off. Color matching is one of those things that sounds like a great idea, but until browsers can all get on the same page regarding the issue, it doesn’t really help us like it was meant to.
It’s a well-known fact that Adobe’s PNG gamma support is faulty. If you have to export a PNG ﬁle, do it in Fireworks, or track down a freeware application that can “slam” the gamma from the image (and sometimes even compress it a little tighter).