9 Photoshop Editing Tips Web Developers Should Know
These
days I’m quite busy with designing my business website and watch heaps of tutorials
to learn more about coding and photoshop skills.Sometimes I found interface designing more complicated than coding and programming!There are quite a few
reasons why having basic Photoshop skills beyond slicing PSD’s to XHTML/CSS is
essential to any web developer!!
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.
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.
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.
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.
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.
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).
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).
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.
Type
the number of pixels you wish to expand or contract your selection by, and then
click OK.
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.
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.
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:
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.
The
result:
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.
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.
Good Luck!!
This involves the filming of three-dimensional models. The materials used
could include plasticine, clay or wire - in fact anything that can be bent or
formed into another shape. The puppets are positioned and filmed before being
moved ever so slightly and filmed again. These shots are put together as a piece
of film and will give the impression of the models moving.
This refers to the drawing of three-dimensional models and sets on the
computer. Images can be scanned into the computer using digital photography or
made within the computer itself. Human characters can be built from clay whilst
sets and furnishings are modelled using design systems similar to architects
drawings. These models are scanned into the computer as wire-frame models, which
are gradually built up into a coloured and textured form. The wire-frame model
(far left) was made on a computer before being built up into the character
(left).
