c





 c  

[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.
(. 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".





 
 c 
[This is Step 2 of the Photoshop CS3 Tutorial]

If 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 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.

È




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.
  
 

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.
 å
 


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.
  
  








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.

|
c


 
 







[This is Step 3 of the Photoshop CS3 Tutorial]

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.

 
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.

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

åÈ


- 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.



- 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.


 - 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.
 

 
 







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.

È




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.

|





 
 c 
[This is Step 4 of the Photoshop CS3 Tutorial]

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.


 !


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

(.
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].


" 
#


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

|
 !
$c

È  
 
c 

%
"
 
 $

1. If you are a beginner make sure you go through Preview

steps 1- 4 of thePhotoshop CS3 Tutorial before attempting this project.

2. Download Project Files (Photoshop.zip, 1 MB)

3. Use the images provided for the project. You can get free images like
these fromDreamstime (click on the "Free images" tab).

%
 !
$

&  

1. Open a new document.





 "
" 

1. Place Image. File > Place > Browse and select image of the flower.
2. '

(

- Select image. Drag the corner of the image to resize it.
3. ' 

- Select Image. Place cursor near the edge of the image
> When the rotate cursor shows > click and drag clockwise or anti
clockwise.
4. Double click to place the image.
(. '

(
È
- Right click on the layer in which the image and click
the option 'Rasterize layer'.
6. '
 
%)  - Use the 'Quick Slection Tool' and click on the
background of the image > it will get selected > press the delete key.
Select and delete any leftover background.


%

1. Click the Rectangle Shape Tool > click and drag to create a rectangle
where the menu will be.
2. A new layer entitled 'shape 1' will apear in the layers panel.
3. Double click on the small box on the right, within the 'shape 1' layer.
4. The 'Pick a solid color' window will open.
 (. Move the cursor and click somewhere on the flower to pick that
particular color (the cursor automatically turns into an eyedropper).
6. Notice that the color of the rectangle reflects the one you just picked.
Click Ok.
7. Select the Text Tool > click somewhere on the screen > type the menu
names separated with ³ | ´ symbol (over enter key).
8. Select the font and size and color from the options panel.
9. Position the text where desired (over the yellow rectangle).
10. Select the Line Shape Tool > create a line below the menu
rectangle.
11. Click on the small box in the line's layer and use the eyedropper
to select a green from the leaf in the image.

È 

1. Use the text tool to create the logo name ± specify font, size and colors
in the 'Options Palette'.


*+

1. Insert the image of the mother and child > Resize (If too big zoom out
so you can find the corners of the image [Zoom tool > Alt > click on the
screen to zoom out. Double click the zoom tool to revert to actual size]).
2. Select line shape tool to create a rectangle around the image > change
the color to green by clicking the small box on the layer and using the
eyedropper tool


c 


1. å
 - Use the text tool to type the page heading (use a common
font such as Arial so that it can be replicated in html later.
2. c 
 - Click the text tool. Click the screen where the content text will
begin and drag to the bottom and right where it will end. In this text area
begin to type some sample text. Specify the size and font. Include the
size, color and font of a sample link as well.

 

1. Copy and paste the green line below to form a boundary before the
footer information. You can easily do this by dragging the line shape
layer (shape 2) into the 'create new layer' icon found right next to the
 trash icon in the layers palette. This will make a copy of the layer. Then
you can move it down.
2. Use the text tool to type the footer text.




1. Use the slice tool to create slices over the logo and the mother/ child
picture.
2. Click the 'Slice Select Tool'. In the slice options specify the names for
both the slices.
3. In the 'Save for Web & Devices' window, select the mother/ child picture
and change to JPEG format. Check to see which results in a smaller
size - GIF or JPEG for the logo as well.
4. Shift + select both the images and click "Save".
(. In the ' Save Optimized As' window, save the sliced and optimized
images into your ³project name´ folder. Photoshop will automatically
create and 'images' folder and save the files within it.

Your layout is ready, now you are ready to create your website. Recreate the
layout in HTML with this Dreamweaver CS3 Tutorial.

In order to make you website live you will need to sign up with a hosting
server. I recommendå
 which I use to host this site.