Project: Create a Layout in Photoshop CS3

Before you start:

If you are a beginner make sure you go through steps 1- 4 of the Photoshop CS3 Tutorial before attempting this project.
Download Project Files (Photoshop.zip, 1 MB)
Use the images provided for the project. You can get free images like these from Dreamstime (click on the "Free images" tab).

Your canvas

Place and edit the picture of the flowers

Place Image. File > Place > Browse and select image of the flower.
Resize Image - Select image. Drag the corner of the image to resize it.
Rotate Image - Select Image. Place cursor near the edge of the image > When the rotate cursor shows > click and drag clockwise or anti clockwise.
Double click to place the image.
Rasterize Layer - Right click on the layer in which the image and click the option 'Rasterize layer'.
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

Click the Rectangle Shape Tool > click and drag to create a rectangle where the menu will be.
A new layer entitled 'shape 1' will apear in the layers panel.
Double click on the small box on the right, within the 'shape 1' layer.
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).
Notice that the color of the rectangle reflects the one you just picked. Click Ok.
Select the Text Tool > click somewhere on the screen > type the menu names separated with “ | ” symbol (over enter key).
Select the font and size and color from the options panel.
Position the text where desired (over the yellow rectangle).
Select the Line Shape Tool > create a line below the menu rectangle.
Click on the small box in the line's layer and use the eyedropper to select a green from the leaf in the image.

Logo

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

Image #2

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

Texual Content

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

Footer

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.
Use the text tool to type the footer text.

Slice Images

Use the slice tool to create slices over the logo and the mother/ child picture.
Click the 'Slice Select Tool'. In the slice options specify the names for both the slices.
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.
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 Hostgator which I use to host this site.

Step 1: Create a new Photoshop document

Step 2: Insert images and text

Step 3: Create the website design template

Step 4: Slice and export the images

Project: Create a simple layout

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.