Create a New Photoshop CS3 Document

8/7/2019 Create a New Photoshop CS3 Document

1/17

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 usuallydesign for a width of 780 pixels width. This works well in monitors with800 x600 resolution as it leaves 20 pixels for the browser scroll bar. Theresolution for the web is 72.

3. You can choose between white, background color (the color will betaken from the background color specified in the toolbox) andtransparent background.

4. Click OK.


2/17

5. A new Photoshop document/ canvas will be created with a lockedBackground layer in the 'Layers Palette'.

6. You can still change the background color by filling the Backgroundlayer with the color of your choice (specified in the Foreground Color ofthe Toolbox) and using the 'Paint Bucket Tool'.

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


3/17

Insert Images and Text in Photoshop CS3


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 textready. If your home page has a different layout from the rest your site you willhave to create 2 different layouts. For the home page design you should beclear about what you want to communicate, things that you want to highlightand other usability principles. You should also be clear on your navigationbased on your site plan.

Insert Images

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

y Browse for the image filey Select the filey Click the 'Place' buttony The image will appear in a sort of grid (see picture below) and the

cursor will change

y Click on the image and drag it where you want to place it within the

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

y Double click when you are happy with the placement, size and rotationof the image. The image will be placed there.


4/17

You will see that a new layer appear in the 'Layers Palette' where the image isplaced. If you are unable to see the Layers Palette you can open it by viaWindows > 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 torasterize the layer first [In the 'Layers Palette', right click on the layer wherethe image has been placed > Rasterize layer]


5/17


6/17

Photoshop Filters

You can undo if you're not happy with it. By default you can undo 1 action inPhotoshop . Use Edit > Step Backbard to revert to previous steps. You can

also do this via the 'History Palette' [Window > History]. THe History stores adefault of 20 states but you can change this from Edit> Preferences >Performance > History States.


7/17

History Palette

You can make changes to the images - remove backgrounds, resize etc. Youcan 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 ofthe tool icons for even more options.


8/17

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 byusing the options in the 'Options Palette'.


9/17

You can specify the color, font, size etc. You can also add filters, alignments,spacing, leading etc. Explore what you can do with text.


10/17

Create the Photoshop Website Design Template


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 yourwebsite design that will be attractive and easy to use. Ensure that the layoutpasses thetrunk test and has the basic layout elements like logo, byline,navigation, copyright, content area, heading and sub heading styles and linkstyles.

Ensure your layout/ template is something you can recreate in HTML and canbe 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. Logofonts , button fonts and some title can use special fonts and effects but youwill need to export all these as images and any change will have to be madewithin Photoshop and the images exported again. This is therefore moredifficult 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 formfields 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 theelements of the layout. Check out Photoshop Tips and Tricks for additionalideas.

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 premadePhotoshop website layout designs and customize them.


11/17

Sample Photoshop Website Design Template

The layers panel is useful when there are many objects and you want to get tosomething 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 imagesthat you will be using in the html page.


12/17

Slice and Save the Images in Photoshop CS3


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 specialfont 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 dothis:

1. Click on the 'Slice Select Tool'

2. Select the slice3. 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.


13/17

Each slice needs to be optimized to look good and yet have a low file size sothat it loads quickly on the web page. This can be done from [File > Save forWeb & 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 imageswith many colors like photos are usually better optimized as JPEG files.

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

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

1. Select the slices (use the shift key to select multiple slices)2. Click the 'Save' button


14/17

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 images5. Select 'Images Only' from the 'Save as type' options6. Select 'Selected Slices' from the 'Slices' options7. Click the 'Save' button8. The sliced images in the specified formats will be saved in the specified

folder.


15/17

Project: Create a Layout in PhotoshopCS3

Before you start:

1. If you are a beginner make sure you go throughsteps 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 likethese fromDreamstime (click on the "Free images" tab).

Begin Project:

Your canvas

1. Open a new document.

Place and edit the picture of the flowers

1. Place Image. File > Place > Browse and select image of the flower.2. Resize Image - Select image. Drag the corner of the image to resize it.3. Rotate Image - Select Image. Place cursor near the edge of the image

> When the rotate cursor shows > click and drag clockwise or anticlockwise.

4. Double click to place the image.5. Rasterize Layer- Right click on the layer in which the image and click

the option 'Rasterize layer'.6. Remove Background - 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.

Menu Bar

1. Click the Rectangle Shape Tool > click and drag to create a rectanglewhere 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.

Preview


16/17


17/17

trash icon in the layers palette. This will make a copy of the layer. Thenyou can move it down.

2. Use the text tool to type the footer text.

Slice Images

1. Use the slice tool to create slices over the logo and the mother/ childpicture.

2. Click the 'Slice Select Tool'. In the slice options specify the names forboth the slices.

3. In the 'Save for Web & Devices' window, select the mother/ child pictureand change to JPEG format. Check to see which results in a smallersize - GIF or JPEG for the logo as well.

4. Shift + select both the images and click "Save".5. In the ' Save Optimized As' window, save the sliced and optimized

images into your project name folder. Photoshop will automaticallycreate and 'images' folder and save the files within it.

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

In order to make you website live you will need to sign up with a hostingserver. I recommendHostgatorwhich I use to host this site.

Documents

Create a New Photoshop CS3 Document