Create a New Photoshop CS3 Document

[This is Step 1 of the Photoshop CS3 Tutorial]

1. Open Photoshop and create a new document [File > New].

2. In the dialog box enter the width and height of the layout. I usually
design for a width of 780 pixels width. This works well in monitors
with 800 x600 resolution as it leaves 20 pixels for the browser
scroll bar. The resolution for the web is 72.

3. You can choose between white, background color (the color will
be taken from the background color specified in the toolbox) and
transparent background.

4. Click OK.
 5. A new Photoshop document/ canvas will be created with a locked
Background layer in the 'Layers Palette'.

6. You can still change the background color by filling the

Background layer with the color of your choice (specified in the
Foreground Color of the Toolbox) and using the 'Paint Bucket
Tool'.

7. Name and Save the document [File > Save]. Photoshop files have
the extension .psd. You can name it "layout.psd".

f you plan to use stock photos you should find the appropriate images
and keep them ready. You should also have logos, bylines and some
sample text ready. If your home page has a different layout from the rest
your site you will have to create 2 different layouts. For the home page
design you should be clear about what you want to communicate, things
that you want to highlight and other usability principles. You should also
be clear on your navigation based on your site plan.

Insert Images

Insert any images that you plan to use [File > Place]

• Browse for the image file

• Select the file
• Click the 'Place' button
 • The image will appear in a sort of grid (see picture below) and the
cursor will change

• Click on the image and drag it where you want to place it within
the canvas
• You can also resize and rotate the image by dragging the corner
nodes or hovering near the corner node till the rotate cirsor
appear and then rotating.
• Double click when you are happy with the placement, size and
rotation of the image. The image will be placed there.

You will see that a new layer appear in the 'Layers Palette' where the
image is placed. If you are unable to see the Layers Palette you can
open it by via Windows > Layers.

Layers Palette

You have many tools to clean up and enhance the image within
Photoshop .
You can use auto levels to bring out the best in photos [select photo >
Image > Adjustments > Auto Levels ]. If this option is grayed out - you
might have to rasterize the layer first [In the 'Layers Palette', right click
on the layer where the image has been placed > Rasterize layer]

You can also try out the other filters.

 Photoshop Filters

You can undo if you're not happy with it. By default you can undo 1
action in Photoshop . Use Edit > Step Backbard to revert to previous
steps. You can also do this via the 'History Palette' [Window > History].
THe History stores a default of 20 states but you can change this from
Edit> Preferences > Performance > History States.
 History Palette

You can make changes to the images - remove backgrounds, resize

etc. You can also create shapes.

Take some time to explore the options provided in the 'Tools Palette'
[Window > Tools]. Notice that the options in the 'Options Palette'
[Windows > Options] changes for each tool selected. Also click on the
tiny triangle besides some of the tool icons for even more options.
 Photoshop Tools Pallette

Insert Text

Use the text tool to insert text like a sample heading, sample textual
content, menu items, byline, sample links, footer - copyright info etc.
Style the text by using the options in the 'Options Palette'.
You can specify the color, font, size etc. You can also add filters,
alignments, spacing, leading etc. Explore what you can do with text.

Create the Photoshop website design template - Once you have put in
all the images and text you can rearrange it to create a layout or a
template for your website design that will be attractive and easy to use.
Ensure that the layout passes thetrunk test and has the basic layout
elements like logo, byline, navigation, copyright, content area, heading
and sub heading styles and link styles.

Ensure your layout/ template is something you can recreate in HTML

and can be optimized to load fast.

Fonts for content should be one of the common fonts that are available
on all computers. Arial or Verdana are usually easy to read on the
computer. Logo fonts , button fonts and some title can use special fonts
and effects but you will need to export all these as images and any
change will have to be made within Photoshop and the images exported
again. This is therefore more difficult to maintain, so use image text only
when absolutely necessary.

Icons - Design any icons that you will use in your website.

HTML Elements - You can take a screen shot of other webpages with
form fields etc. ['Prt Scr' key on your computer keyboard] and paste it
into your layout to get an idea of how it will look in your layout.

Images - Resize your images and shape them to work with the rest of
the elements of the layout. Check out Photoshop Tips and Tricks for
additional ideas.

Flash - You can plan in space for any flash animation that you will be
using, within your layout.

Using the shape tools, image editing tool, text tools etc. create a layout
of what you would like your webpages to look like. You can also
get premade Photoshop website layout designs and customize them.
 Sample Photoshop Website Design Template

The layers panel is useful when there are many objects and you want to
get to something behind. You can click on the "eye" icon to to hide a
particular layer. You can move a layer over another to bring it in front.

Layers Panel

Once you are satisfied with the layout it is time to slice and export the
images that you will be using in the html page.

Once you are satisfied with the layout, deside which parts can be
recreated within HTML and which parts will need to be exported as
slices.

Text can usually be recreated in HTML except when it is using some

special font that is not commonly available on all computers.
Use the slice tool to draw out areas that will be exported as slices.

Sliced Object

Give each slice a name which will be the file name of the saved image.
To do this:

1. Click on the 'Slice Select Tool'

2. Select the slice

3. Click on the 'Set options for current slice' icon in the 'Options
Palette' [Window > Options]

4. Enter the name for the slice in the 'Slice Options' window that
opens e.g. logo

5.

Each slice needs to be optimized to look good and yet have a low file
size so that it loads quickly on the web page. This can be done from
[File > Save for Web & Devices].
 Save for Web & Devices

Select each slice and optimize it in the 'Save for Web & Devices'
window. Images with flat colors are usually better optimized as GIF files
while images with many colors like photos are usually better optimized
as JPEG files.

You can compare the quality and file size of different options by clicking
on the Optimized, 2-Up or 4-Up options at the top.

Once you have optimized all the slices you will need to save them into a
folder. To do this:

1. Select the slices (use the shift key to select multiple slices)
2. Click the 'Save' button
3. The 'Saved Optimized As' Window will open
 4. Navigate to the folder where you would like to save these sliced
and optimized images e.g images
5. Select 'Images Only' from the 'Save as type' options
6. Select 'Selected Slices' from the 'Slices' options
7. Click the 'Save' button
8. The sliced images in the specified formats will be saved in the
specified folder.

lend an Image into a Background Color

This is one of the most useful tips in Photoshops as images need to

blend in well to give that professional look.

When one end of the image needs to be made transparent

• Select the image

• Click 'Add Vector Mask' icon in the layers panel. A new rectangle
will appear in the layer.

• Click on this layer

• Click the gradient tool

• Click on the image at the part that you want to remain opaque and
drag till the end of the image that you want to make transparent.
 • The image will blend beautifully into the background

When the Image needs to be shaped differently

• Select the image

• Use the marquee tool to select the area you want to keep
• Select > Modify > Feather
• Specify a radius that you want to feather and click ok
• Select > Inverse
• Hit "Delete"
• Your image will blend neatly into the background in the desired
shape.