Photoshop crash course

Babz Mook 2012

Before you start ................................................................. 3

1.1

Resources ........................................................... 3

1.2

About bitmap images ............................................. 4

1.3

Bitmap file formats ............................................... 4

Basics .............................................................................. 7
2.1

Open and view an image ......................................... 7

2.2

Create a new image .............................................. 8

2.3

Place a photograph on the canvas.............................. 8

2.4

Adjusting the Image Size (resize)............................... 9

2.5

Adjusting the Canvas Size (crop) ............................. 10

2.6

Rotate and crop .................................................. 10

2.7

Crop to a specific size (web graphics) ........................ 11

Tools overview .................................................................. 12

3.1

Tool box complete overview ................................... 12

3.2

Most important tools explained briefly ....................... 13

Colour corrections.............................................................. 14
4.1

Levels .............................................................. 14

4.2

Brightness/Contrast ............................................. 16

4.3

Hue/Saturation ................................................... 17

4.4

Invert............................................................... 18

Retouching ...................................................................... 19
5.1

Remove speckles and blemishes ............................... 19

5.2

Remove red eyes ................................................. 20

5.3

Make area lighter or darker: dodge tool and burn tool .... 20

Selections ........................................................................ 22
6.1

Marquee tool ...................................................... 22

6.2

Lasso tool .......................................................... 23

6.3

Add to and subtract from the selection ...................... 24

6.4

Feather ............................................................ 25

6.5

Magic wand........................................................ 26

6.6

Invert selection ................................................... 27

Layers ............................................................................ 28
7.1

Layers panel ...................................................... 28

7.2

Toggle layer visibility............................................ 28

7.3

Duplicate layer ................................................... 29

7.4

Free transform (f.e. scale) ..................................... 29

7.5

Layer opacity ..................................................... 29

[2]

7.6

Merge layers ...................................................... 30

7.7

Text layer ......................................................... 31

7.8

Layer style / Blending options ................................. 31

7.9

Layers commands ................................................ 32

Web/screen graphics .......................................................... 33

8.1

Save for web ...................................................... 33

8.2

Mouse over buttons .............................................. 33

8.3

Icons for a phone app ........................................... 37

8.4

Icons................................................................ 39

Photoshop donts ............................................................... 40

9.1

NEVER upscale a bitmap image ................................ 40

9.2

NEVER stretch an image ........................................ 40

1 Before you start

1.1

Resources
Extensive Photoshop manual
This syllabus can only explain part of Photoshops tools. To explore the tools more in depth and
learn about other tools, use the extensive manual that comes with the software. Make sure to
keep a copy of the manual offline. Along the course, you will be asked to read some of its
chapters.

Click Help > Photoshop help (F1)

Photoshop directs you to an online pdf file called Using ADOBE PHOTOSHOP
It may take some time to download.

To use it offline, you can download it via the link in the top right of the webpage.
Right click the link View Help PDF and choose Save target/link as

If you dont have Photoshop on your computer (yet), here are the direct links:
CS4: http://help.adobe.com/en_US/Photoshop/11.0/photoshop_cs4_help.pdf
CS5: http://help.adobe.com/en_US/photoshop/cs/using/photoshop_cs5_help.pdf

Software
Download trial versions at http://www.adobe.com/uk/downloads/

[3]

1.2

About bitmap images

What is a bitmap image?
Bitmap imagestechnically called raster imagesuse a rectangular grid of picture elements
(pixels) to represent images. Each pixel is assigned a specific location and color value. When
working with bitmap images, you edit pixels rather than objects or shapes. Bitmap images are the
most common electronic medium for continuous-tone images, such as photographs or digital
paintings, because they can more efficiently represent subtle gradations of shades and color.
Bitmap images are resolution-dependentthat is, they contain a fixed number of pixels. As a
result, they can lose detail and appear jagged if they are scaled to high magnifications on-screen
or if they are printed at a lower resolution than they were created for.

Example of a bitmap image at different levels of magnification

Bitmap images sometimes require large amounts of storage space, and often need to be
compressed to keep file sizes down when used in certain Creative Suite components. For instance,
you compress an image file in its original application before you import it into a layout.
Source: Using ADOBE PHOTOSHOP, chapter: Opening and importing images.

1.3

Bitmap file formats

layers

compression

BMP

The most familiar format in multimedia under DOS and

Windows is the Bitmap (BMP) format. These are uncompressed
files when in 24 bits format. When your images contains less
colours, under a colour depth of 4 or 8 bits, you can use RLE
(run length encoding) compression. All details will remain
intact.

no

none or
lossless

TIFF

Like BMP, TIF images (Tagged Image File format) are supported
by almost any program and specifically suitable for print. You
can choose to save layer information in a TIFF.

yes

none or
lossless

GIF

CompuServes GIF is a familiar file format for showing images

on the internet. GIFs are strongly compressed and therefore
completely unsuited for use with printed materials. Interesting
possibilities of the GIF format are transparency, interlacing
and animation. GIF can only hold 256 colours, which makes
them unsuitable for photographs, but highly suitable for low
colour images like logos and drawings.

no

lossless

[4]

JPG

Another file format used on the internet a lot is JPEG (JPG),

which stands for Joint Photographic Experts Group. This is also
a typical highly compressed format. Most digital photo cameras
used store their pictures as JPG.
When you open a JPG it is automatically decompressed.
Because of the wide color range it can store (theoretically 16,7
million colours), the JPG-format is specifically appropriate for
photographs.

no

lossy

PNG

PNG is developed as the improved version of GIF. It is mainly

used for web graphics similar to GIFs, but it can hold more
colours. Transparency and interlacing are options.
PNG is the standard file format in Adobe Fireworks.

yes

lossless

PSD

The PhotoShop Document (PSD) is pretty important. Photoshop

has many possibilities, like working in layers and channels,
floating selections, etc. Because of all these functions, a PSDfile gets pretty big quickly and cant be read in another format
like BMP or JPG. You will need to convert your PSD file to the
file type you need. This always means flattening the image;
information about the several layers will not be stored.

yes

None

RAW

A camera raw image file contains minimally processed data

from the image sensor of either a digital camera (). Raw files
are so named because they are not yet processed and
therefore are not ready to be printed or edited with a bitmap
graphics editor. () Raw image files are sometimes called
digital negatives, as they fulfill the same role as negatives in
film photography: that is, the negative is not directly usable as
an image, but has all of the information needed to create an
image. (...)Like a photographic negative, a raw digital image
may have a wider dynamic range or color gamut than the
eventual final image format, and it preserves most of the
information of the captured image. (Wikipedia)

no

None

Sources:
Jan Liefers, Photoshop manual, 2002.
Wikipedia, retrieved august 2011.

Lossy compression
In information technology, "lossy" compression is a data encoding method that compresses data
by discarding (losing) some of it. () Lossy compression is most commonly used to compress
multimedia data (audio,video, and still images), especially in applications such as streaming
media and internet telephony. (Wikipedia) The higher the compression, the lower the quality.

The difference between high quality (low compression) and low quality (high compression)
(source: Wikipedia)

[5]

Units and resolution, screen vs print

Measurement units
o screen (website): pixels (px)
o print: millimeters (mm) or centimeters (cm)

Resolution:
o screen (website): 72 pixel/inch (72 dpi)
o b/w laser print: 150 pixel/inch (150 dpi)
o colour laser print: 200 pixel/inch (200 dpi)
o offset print: 300 pixel/inch (300 dpi) and higher.

Read more on image size and resolution in Using ADOBE PHOTOSHOP, chapter: Opening and
importing images.

[6]

2 Basics
2.1

Open and view an image

File > open
Browse to file and double click

Handy shortcuts in the work space

Zoom in / out
Move canvas around when zoomed in
Fit on screen
Select all
Undo selection
Show rulers
Show grid

Ctrl + / Space + click and drag

Ctrl 0 (zero)
Ctrl A
Ctrl D
Ctrl R
Ctrl

Unlock the background layer

By default, images open in a
background layer, which is locked for
certain tools.
If you notice that you arent able to
perform certain edits (f.e. the
transform tool is unavailable), you
need to unlock the background layer.

In the layer menu, double click

the background layer.

The new layer window pops up.

If you like, you can rename it.

Click OK

Notice that the lock icon has

disappeared.

[7]

2.2

2.3

Create a new image

File > New (or: Ctrl N)

Give it a name

Set width and height in the

appropriate units. For now, lets
work for screen and set the units
to pixels. F.e. 1200 x 800 pixels.

Set resolution appropriate to the

purpose. For screen, that is 72
pixel/inch (72 dpi)

Background: transparent

Place a photograph on the canvas

File > Place

Browse to the picture you want to put on your canvas and double click

Photoshop automatically sizes the picture to the canvas size, unless the picture is smaller than
the canvas. If you are sure the picture you are placing is larger than your canvas,
you can upscale the picture without quality loss.

Hold down Shift + drag on the corners

(Holding down shift means you maintain the ratio of the picture, otherwise youd be
stretching it)
Move the selection if necessary
Satisfied? Double click inside the selection

The picture has been imported as a so called smart

object. This means it is still linked to the original source
and the regular editing options are not applicable. In
order to remove that link (because we want to keep our
original source as it is), you need to rasterize the layer.

[8]

In the layer panel, right click on the layer > rasterize

layer

Place a picture: alternative way

Another way to place an image on the canvas is by having two files open in Photoshop:
1: your current file.
2: the picture you want to use in your current file
Then you will copy the picture (2) into the canvas (1). Here is how:

Click File > open > select the picture.

Then select the photograph with CTRL-A (select all)
Copy with CTRL-C.
Switch to the Photoshop file you had ready and paste with CTRL-V.
After this, zoom out (CTRL-minus) and resize the picture CTRL-T.

Some find this method easier.

Place a vector drawing (eps, ai)

Same procedure as above:
File > Place
Browse to the picture you want to put on your canvas and double click
Resize: Hold down Shift + drag on the corners
Move the selection if necessary
Satisfied? Double click inside the selection
You can safely upscale the image because it is a vector image that keeps its quality until you
render (rasterize) it. So keep it as a Smart Object as long as possible. Any editing you want to do,
you need to do in a vector drawing programme, f.e. Adobe Illustrator. After rasterizing the layer,
better not resize the image in this layer.

2.4

Adjusting the Image Size (resize)

Select Image > Image Size

For screen: Change the pixel dimensions

For print: Change the document size

Change either the height or the width.

The other dimension should automatically change
accordingly.

[9]

2.5

Adjusting the Canvas Size (crop)

Adjusting the canvas size lets you roughly crop the
image.
For more precise cropping, use the crop tool!

Select Image > Canvas Size

Set the Canvas size to f.e. 300 (width) x 500
(height) pixels
Establish the crop anchor. By default, the anchor
is in the middle. Excess canvas is being cut off
evenly on all sides. If you f.e. want the area at
the top to remain, set the anchor in one of the
top boxes
Click OK

A message appears: the new canvas size is smaller

than the current canvas size; some clipping will
occur

2.6

Click proceed

Rotate and crop

When you have an image from your scanner, it often comes out
slanted and with too much white area around it.
You can crop and rotate the image in one go.

Select the croptool

Draw a rectangle around the image

Point the mouse just outside the corner until the arrow changes
into a rounded arrow
Drag the corner anchors to get the crop area similar to the
picture edges.

Resize the area by dragging on the sides.

Move the rectangle around to get a good composition (dont

pick up the point in the middle) You can move the selection
around in small steps using the arrow keys.

Satisfied? Double click inside the rectangle.

[10]

2.7

Crop to a specific size (web graphics)

Select the crop tool

Set the crop size to the size you need (in

this example 900px x 130px)

Select the crop area and move it around

to get the best composition

Double click inside the area to crop the

image.

NB: Only crop to a certain size that fits the original size.
F.e. if you need a 900 pixel banner, your original image should be at least 900 pixels wide. Simply
because you cant cut 900 pixels out of a 400 pixel image. (If you do, Photoshop will resize it 900
pixels and that will look very ugly; see the chapter on Donts)

[11]

3 Tools overview
3.1

Tool box complete overview

Notice that each tool with a small triangle on the bottom left has more options. Just click the icon
and hold the mouse button down to see the alternatives. All the extensions are in this overview,
the tools you see by default are marked with the black square.

Source: Using ADOBE PHOTOSHOP CS4

[12]

3.2

Most important tools explained briefly

The marquee
tools make
rectangular,
elliptical, single
row, and single
column
selections.

The Move tool

moves
selections,
layers, and
guides.

The lasso tools

make
freehand,
polygonal
(straightedged), and
magnetic
(snap-to)
selections.

The Quick
Selection tool
lets you quickly
paint a
selection using
an adjustable
round brush tip

The Magic
Wand tool
selects
similarly
colored
areas.

The Crop tool

trims images.

The Blur tool

blurs hard
edges in an
image.

The Sharpen
tool sharpens
soft edges in
an image.

The Smudge
tool smudges
data in an
image.

The Dodge tool

lightens areas in
an image.

The Burn tool

darkens areas
in an image.

The Sponge
tool changes
the color
saturation of
an area.

The Brush tool

paints brush
strokes.

The Paint
Bucket tool
fills similarly
colored areas
with the
foreground
color.

The gradient
tools create
straight-line,
radial, angle,
reflected, and
diamond
blends
between
colors.

The shape tools

and Line tool
draw shapes
and lines in a
normal layer or
a shape layer.

The type
tools create
type on an
image.

The pen tools

let you draw
smooth-edged
paths.

Source: Using ADOBE PHOTOSHOP CS4

[13]

4 Colour corrections
4.1

Levels
Adjusting the levels of a photograph is the best way to obtain a proper contrast.

Pick Image > Adjustments > Levels

Move the white slider in the right to the right start of the curve, move the black slide on the
left to the left start of the curve.

Click OK

Original

[14]

Moving sliders

Setting black point and white

point.

Read Colour and tonal adjustments > Adjusting Colour and Tone in Using ADOBE PHOTOSHOP
and find out more.

[15]

4.2

Brightness/Contrast
Auto contrast

Pick Image > Auto contrast

Original

Auto contrast

Adjustments > Brightness and Contrast

Click Image > Adjustments > Brightness and Contrast

Move the sliders until you are satisfied with the result.

Click OK

Original

[16]

Brightness: 40
Contrast: 40

Brightness: 80
Contrast: 80

4.3

Hue/Saturation

Open bottle.jpg

Click Image > Adjustments > Hue/Saturation or

hit Ctrl-U

Pick another Hue by moving the slider

If the colour is still weak, increase the saturation

too.

Satisfied? Click OK.

Desaturate
You can also desaturate the picture, which means
you take out all colour and get a grayscale picture, a
black and white photograph. Move the saturation
slider to the left.
The alternative way to desaturate a picture is Image
> Adjustments > Desaturate (Shift+Ctrl+U)

[17]

4.4

Invert
When scanning film negatives, you need to invert the picture to get the original photograph.
Images > Adjusments > Invert (Ctrl-i)

[18]

5 Retouching
5.1

Remove speckles and blemishes

Dont you just hate it when you have spots! Heres the trick to get
rid of them: the clone stamp tool.

Open blemish.jpg

Zoom in closely on the face

Select the clone stamp tool

Pick an appropriate brush size

Hold down the left alt-key and click inside a blemish free area
near the spot and let go off the alt-key.

Paint over the spot.

Notice that Photoshop shows a preview of the result. Alt-click
another area to improve the result.

Notice that you repeatedly need to establish the copy area (altclick) to get the best result. Watch the colour difference carefully.
Zoom out to see the result.
The clone tool also lets you touch up old pictures. Try removing the creases and speckles in these
sample pictures.

[19]

5.2

Remove red eyes

Cick the red eye tool

Click in de red area of the eyes.

There you go!

5.3

Make area lighter or darker: dodge tool and burn tool

Lighten areas with the dodge tool

Click the dodge tool

Pick a soft brush, between 10-30 px

Set the exposure to about 30%

Start painting the areas you want to

lighten up.

In this example we are making the eye

white lighter. The lower the exposure,
the more subtle the result.

The dodge tool is great to create local highlights, enhancing the suggestion of depth or volume in
a photograph. Just by dodging the highlights in this example light parts in the hair - you make
them come forward more.

[20]

Darken areas with the burn tool

Click the dodge tool and hold it down until the alternative
tools appear.
Select the Burn tool.
Pick a soft brush. Size depends on what you will be painting.
Set the exposure very low, about 5-10
Start painting the areas you want to darken.

Example: Facelift

Heres a proper facelift, using a.o. the clone tool and the liquifier tool (Filter > Liquify)
Many corrections are done with the clone tool (spots, neck, mouth, eyelids). Browses are lifted
and cheeks are narrowed with the liquify tool. The eye white has been whitened with the dodge
tool. Extra blue eyes were painted. To be honest, some of the smoothing and colour correction
were done working on the RAW image first.

[21]

6 Selections
Photoshop is all about selections. Selections let you isolate a part of the picture, extract it from
its background, move it around and/or apply all kinds of adjustments to them. A selection can get
a fill as well as an outline.

6.1

Marquee tool
The marquee tool lets you create a rectangular or
elliptical selection, as well as select a single pixel row.

Open a random photograph.

Select the elliptical marquee tool
To create a true circle (or square), hold down shift
and draw a selection
You can move around the selection as long as the
marquee tool is active

You will notice the dashed line moving around the

selection: these are called the marching ants

Cut the selection with Ctrl-X

Paste the selection with Ctrl-V

A new layer is created with the circle you just cut out
Notice that you can move the circle around, because
after pasting the moving tool is automatically activated.

Make the background layer invisible.

[22]

6.2

Lasso tool
In the next examples, after the selection was made, I choose selection > inverse and cut away the
background.
The lasso tool lets you create freeform
selections.

The lasso tool

creates a smooth
freeform selection. Try it out on a
random picture.

The polygonal lasso tool

creates
a freeform selection with angles. Try
it out on a random picture.

The magnetic lasso tool

selects a
subject, based on its contrast to the
background. This is very useful for
extracting subjects from its background.

Open bottle.jpg

Drag the magnetic lasso around the

bottle and notice, how it sticks to the
side of the bottle. If you move it away
from the edge too far, it will find
another path.

In the highlighted area, the lasso tool took

too much from the bottle. It takes some
practice to get it right. Also, you can
expand the selection by holding down
shift and lasso the remaining area.

[23]

6.3

Add to and subtract from the selection

Shift + selection tool = add to the selection

Alt + selection tool = subtract from the

selection

Of course you can also add/subtract while

combining multiple selection tools.

[24]

6.4

Feather
The lasso and marquee tools let you feather a selection.
Feathering makes the edges softer.
A feather only works before you start the selection! You
cant change the feather on an existing selection.

Set the feather to 20-30 pixels

Create true circle using the oval marquee tool
Invert the selection and delete the background.

As you see, a large feather creates a dreamy effect.

A feather of 1 or 2 pixels can make a subtle difference.

Feathering vs anti aliasing

No anti alias:
ragged edge

Anti alias:
soft edge

1 px feather

3 pixel feather

8 pixel feather

Anti aliasing makes the edge softer. A feather makes the edge blurry. Only use a large feather to
achieve a specific effect and be consistent in using the same feather size for similar objects.
Dont feather when extracting objects or persons from the background. To get a proper edge, anti
aliasing is best.

[25]

6.5

Magic wand
The magic wand selects pixels that have a similar colour.
You can set the range of colour (tolerance) high or low, depending on the evenness of
background. Default tolerance value is 32. Use anti alias to prevent ragged edges.

Open bottle.jpg

Double click the background layer + ok to unlock it.

Click the magic wand tool and click in the background of

the picture

A large part of the background is now selected. The default

tolerance works ok. On other photographs you may need to
increase or decrease the magic wands tolerance to get the
best result.

Hold down shift (= add to selection) and click in the

remaining background until you have the whole
background selected

Selection complete? Hit Delete.

You have now extracted the bottle from its background.

[26]

6.6

You may want to use the eraser tool to remove some

excess shadow on the right bottom of the bottle

Save the file as bottle.psd

Invert selection
When you are creating a photo montage, you may need to cut out the subject itself, instead of
the background. Now if you select the background like you did before, you can invert the
selection.

Click the magic wand tool in the background to select the area around the subject.
Click Select > Inverse. Now the subject is selected.
Ctrl-C to copy the selection
Open a random picture and Ctrl-V to paste the subject into the picture.
If the subject is too large for the canvas, hit Ctrl-T (free transform) and resize (rotate, move).
Hold down Shift while scaling to maintain the right ratio.

Notice, that by pasting the bottle, you have created a new layer. The next chapter introduces you
to using multiple layers.

[27]

7 Layers
The following exercise introduces you to using layers in Photoshop, as well as doing some colour
corrections. After finishing this exercise, read the chapter on Layers in Using ADOBE
PHOTOSHOP to learn more about the possibilities of layers.

7.1

Layers panel

Open the sample file layers.psd

If you dont see the layers palette, click

Windows > Layers or hit F7

Make the panel show all layers by

dragging the bottom right corner of the
panel down.

Move layer

7.2

Change the order of the layers by

dragging them to another position.

And move them back in the right

position. Largest bottle in front, smallest
in the back.

Toggle layer visibility

Click on the eye in layer 1 to

make the layer invisible

Click the empty square to make

the eye and the layer visible
again.

[28]

7.3

7.4

Duplicate layer

Right click layer 3 and choose Duplicate layer

Rename the new layer to layer 3a

The new layer is not visible yet because it hides behind layer 3 which is exactly the same.

Click the move tool and move the new bottle to the side.

Free transform (f.e. scale)

Hit CTRL-T (Free transform)

Hold down the shift key and make the bottle smaller by dragging
on one of the corner handles.

Move the bottle around for a good composition

You may need to move the other bottles too. Select the layer first (or
multiple layers while holding down the CTRL-key), select the move
tool and then move.

Adjust Hue/Saturation
Now lets give the new bottle another colour like we did before.

7.5

Make sure layer 3a is selected

Click Image > Adjustments > Hue/Saturation or hit Ctrl-U

Pick another Hue by moving the slider. If the colour is still weak,
increase the saturation too.

Satisfied? Click OK.

Layer opacity
To make it look more real, we need
to make the bottles a bit see
through. A way to do that is by
changing the opacity of the layers.

Select the front bottle, layer 1

Set the opacity to 85%

Set the opacity of the other

layers to 80%

[29]

7.6

Merge layers

Select layers 1 to 3/3a

Click layer 1 first, hold shift
while clicking layer3 (or 3a if
that one is last)

Click Layer > Merge layers or hit

Ctrl-E

Multiple layers selected

Changing the opacity of the layers
has left the image a bit pale. Lets
try to fix this by again using the
Hue/Saturation tool on the merged
layer.

CTRL-U
Increase the saturation and
decrease the lightness
Click OK

You may also want to try adjusting

the brightness and contrast

Click Image > Adjustments >

Brightness/Contrast
Play with the settings to see if
you can improve the image.

[30]

Layers merged

7.7

7.8

Text layer

Click the text tool. On the top of the page the text properties appear.

Set the font type to Times New Roman,

Italic, size 120 pt.
The pull down menu doesnt go further
than 72, so you need to type in 120.

Click in the image. A large cursor will blink

and a text layer appears in the layer panel.

Type a word. If the text goes off the

canvas, dont worry. Just keep typing.

Move the cursor outside the text area and

notice it changes into the move tool.

Move the text to create a proper

composition.

Finalize the layer by clicking one of the

tools in the toolbox. The cursor will stop
blinking.

Layer style / Blending options

We will now add an effect to
the text layer to increase the
legibility.

Right click the text layer

and choose Blending
Options

Click Outer Glow

Set the spread to 5% and

the size to 30 px

Click OK

Notice that the effects also

appear in the layer panel and
that you can toggle its
visibility. This lets you try
out multiple effects and
compare them.

[31]

7.9

Layers commands
Command

Menu

Shortcut

Layers panel

Window > Layers

F7

New layer

Layer > New > New Layer

Shift-Ctrl-N

Delete layer

Layer > Delete > Layer

Delete

Duplicate layer

Layer > Duplicate layer

Merge layer

Layer > Merge Layers

Rasterize layer

Layer > Rasterize > Layer

[32]

Ctrl-E

Icon

8 Web/screen graphics
8.1

Save for web

Photoshops Save for web and devices function lets you save your photos and graphics for the web
properly.

8.2

Click File > Save for web and devices.

Click the 2-up tab. you can now compare the
original image to the output settings.

Mouse over buttons

This section shows you how to create several mouse over buttons within one Photoshop file. The
necessary elements for all buttons are stored in the psd-file.
Two layers are reserved for the button surface (1. button up and 2. button over/down/active).
For each button, there are also two layers for text. (1. button up and 2. button
over/down/active).
By duplicating layers, you can work efficiently and keep the content in exactly the right place, so
that the buttons wont shift upon mouse over.
You will quite possibly end up with a psd-file containing over 10 layers. By toggling the visibility of
the layers you can make each single button visible, and then export it to jpg or gif. For creating
new buttons, you can always return to the psd-file.
Create a new file with the proper dimensions
You can calculate the dimensions with the help of
your site sketch. In this example the dimensions are
125 x 35 pixels.

File > new

Width: 125, height 35
OK

Zoom in on the image (Ctrl+) to 300 or 400%

[33]

percent.
Make the rulers visible (CTRL-R)
Right click in the ruler and make sure the units
are pixels.
Turn off snap (View > Snap)

Select the Rounded Rectangle Tool (U), which is

under the Text tool and the selection tool.

In the properties, select the Rounded

Rectangle.
Set the radius to 20 pixels
Pick a colour
Draw a rounded rectangle, keeping 1 or 2 pixels
away from the edge of the canvas.
Notice that a layer is created, calle shape 1.
Select the move tool and move the rectangle to
the middle.
Double click the Shape 1 layer and rename it to
Button up

Now lets create the Button down state, by

duplicating the current layer and changing the
shapes colour.

Click Layer > Duplicate layer

Rename the layer to Button down
Click OK

Make sure the layer Button down is selected

You should see a black hairline around the shape. If
not, first click the selection tool (black arrow)
before continuing.

Click the Rectangle Tool

Pick a colour for the down state of the button.

Lets move on with the text.

Create a new layer: Layer > New

Rename the layer home up

In order to get the text in the right place, lets use

some guidelines

Click in the top ruler and drag a guideline down

to the center of the button.
Click in the left ruler and drag a guideline down
to the center of the button, or somewhat
below.
Set the guidelines to snap: View > Snap.

Select the Type tool (T)

Set the type to Arial, regular, 18 or 20 pt
Set the aliasing to Crisp

[34]

Set the alignment to Center

Click in the image (notice that your new layer is

now transformed into a Type layer)
Type Home

Because we are still zoomed in, the text looks a bit

fuzzy.

Click the move tool and move the text to the

center of the button.
If necessary, adjust the position of the
guidelines to get it exactly in the center.

When the text is in the right place, lets duplicate

the text layer for the down/over-state of the
button.

Make sure the text layer is selected

Click Layer > Duplicate layer
Rename the layer to Home down
select the Type tool
Double click in the text until it highlights
Change the colour.
(in this example we are toggling between black
and white)

We now have four layers that can create two

buttons.
Home up button
Toggle layer visibility:
Unvisible: Home down and Button down.
Visible: Home up and Button up

Home down button

Toggle layer visibility:
Unvisible: Home up and Button up
Visible: Home down and Button down.

[35]

From here, you can create duplicate text

layers and create all the buttons you need
for your website. Only two of all layers
should be visible before exporting to jpg or
gif.

[36]

8.3

Icons for a phone app

We will be creating an app using Andromo. Our app will look better when we use our own icons.
The icon dimensions must be 128x128 pixels, in PNG format.
First we start with the icon for the app itself.

Create a new Photoshop file (File > New) with these dimensions. Resolution 72 dpi,
background transparent.
Save your file as icons.psd

Select a color for your icon

Zoom in on the image (Ctrl+) up to 300 or 400 percent.
In the toolbox, select the rounded rectangle tool. (Click the
shape tool and hold down the mouse button until the
options appear)
Draw a square as close to the borders as possible, leaving a
small offset.

Let go of the mouse and your shape is filled with the selected colour.
When the shape layer is selected, you can change the colour in the properties bar on the top
of your screen.

Creating depth: bevel

Click Layer > Layer style > Bevel and Emboss

To make the bevel softer, pick a gray instead of black

[37]

View the result Oooh, nice :-)

[38]

8.4

Icons

[39]

9 Photoshop donts
9.1

NEVER upscale a bitmap image

Why shouldnt we upscale a bitmap image?
Lets see what happens when you take a ca. 250px image and make a 900px header from it.

Here is the same image, but now created from a high resolution photograph.

As you can see: its just plain ugly if you upscale an image.

9.2

NEVER stretch an image

What happens when you stretch an image? Well, ehm, this happens:

Dont try to force a portrait oriented picture into a landscape orientation (or vice versa). Its just
uuuuuugly. You can imagine Obama would not be pleased with such an image.
Below is an example that would be a proper cut out, but it might still not be the type of image
that you are looking for. But either way: crop before resize.

[40]