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