 |
 |
 |
 |
 |
 |
Lesson 1: Creating a webpage in Photoshop and ImageReady
We will be creating the following image in Photoshop and slicing it into separate files to be used in a Dreamweaver document. We will need to create the reflections of the images from stock photography and create a gradient background. We will also need to create rollover images for the navigation links. This tutorial uses Photoshop CS and instructions for a PC.
Download Lesson 1.psd to your desktop and save in a folder "webpage"
Step 1 Setting up the Workspace
To set up your workspace for creating a webpage, under Window and View,
make sure the following are checked:
Window > Layers, History, Options, Tools, Status Bar
View >
Snap To > Guides, Slices, Document Bounds;
View >
Rulers; Extras;
View > Show > Slices
You should have the Layers and History Palettes open in your workspace. Save your workspace by going to Window > Workplace > Save Workplace.
Step 2 Open a new document and set guides
Open a new document, size 900 pixels wide and 700 pixels wide. General
viewing area on small monitors is 800 x 600. We will create guides for
this size, but having a little overflow on the sides will help with design
(and maybe think out of the "box").
File > New
Name: home
Width: 900 pixels
Height: 700 pixels
Resolution: 72 pixels/inch
RGB
Background: White
Now we will set several guides:
View > New Guide
Set two horizontal guides at 50px and 650px. Set two vertical guides at 50px and 850px. This will show us the guides for the minimal viewing area on small monitors. *Note, you may also create guides by placing your mouse on the ruler and dragging it onto the document. This works well when you have a visual placemaker, such as lining up images or text, rather than an exact pixel mark. Save the document and leave open.
Step 3 Creating a reflection from stock art
*Technique courtesy of ugaldew from stock.xchng
*Skip 1-3 if you are using the Photoshop file
1 Create a folder on your desktop titled "webpage". Create a subfolder titled "originals."
2 Save the following image to the folder "originals." (Right click, Save image As...) Open the image in Photoshop.
original
stock photo courtesy of paulgeor
the shadow has been slightly modified to match our book and links.
3 Drag the apple onto the document named "home" at
approximately 216 pixels from the top and 99 pixels from the left.
4 Select the apple image only, not the shadow or background, using the magic wand tool and making sure to add to your selection.
5 Copy and Paste the selection. When you paste, you will notice a new layer was created in the Layer Palette. Rename the Layer "apple_reflection." As we will be using this name to save a slice of the image later, use a name that can be a valid web file name (no spaces, lowercase, or &#!* symbols).
6 Flip the new layer vertical by going to Edit >
transform > flip vertical
7 Then move the object to the bottom of your reflected object. If you press Shift it will help to make a straight vertical movement , so it matches better. To make the apple reflection more realistic, move the reflection slightly under the original apple. Make sure the apple layer is above "apple_reflection" layer in the layer palette.
8 Next you will apply a perspective transform to the reflection to make the reflection shorter and larger at the bottom.
Edit > Transform > Perspective. Click and drag on one of the lower corners of the bounding box until the reflection is slightly wider. Accept changes and click on the middle of the bounding box. Reduce the height of the reflection.
9 Now, you will add a mask and a b/w Gradient to the apple_reflection layer. First add a mask layer in the layer of our reflection . To add it , just click the (add mask layer) button in the bottom of the layers palette.
10 Now we will trace a gradient that will cover our reflected object. Select the gradient tool and make sure the gradient goes from black to white. Now apply the gradient . The start point will be a bit lower then bottom of our object, about at the stem, and the end point a little bit further than the top of it. To get a realistic reflection, try to use the gradient to cover up the indent of the apple stem. The reflection is coming from below, so it would not be possible to reflect the top of the apple.
Your
image will look like this: 
11 The final step is to reduce the opacity of the layer
and apply a gaussian blur.
In the layers palette select the layer of our reflection (layer 1) and
click the opacity button and and drag the opacity’s slider to the
left until you get the desired effect. Under Filter, select Gaussian
blur and set to about +1.2. The end result should look simi liar to this:
The book and links reflections have already been created for you. If you would like to try your own reflections, try looking at real life examples. Set an object on a reflective surface and see how the image changes. Remember that a reflection below an object cannot reflect the top (such as the top cover of the book). Imagine what you would see from below the object. Also, the shadow of an object would not be reflected.
Next step >
©2006 designsbyebs