2. Resizing your Images
When working on your Gallery, image sizing for
the large image and the thumbnails can make
or break your Gallery layout.
Let’s Review How We Can Do This in Dreamweaver!
3. Resizing your Images with Photoshop
Step 1: Create a new file
Make sure that your image width and height values match your layout plan
Make sure that you have:
Resolution: 72 pixels/inch
Color Mode: RGB Color
4. Resizing your Images with Photoshop
Step 2: Open all image files
Go to File->Open
Hold the Shift Key and select all
images to open.
5. Resizing your Images with Photoshop
Step 3: Drag the image out of the tab
Select an image that you
want to resize.
Pull the tab off from the
list of tabs by dragging it
so that it has its own
window.
6. Resizing your Images with Photoshop
Step 4: Unlock the Image Layer
Double Click on the Image
Layer that says
“background” to unlock.
7. Resizing your Images with Photoshop
Step 5a: Drag the Layer over to the New Document
Click on the Newly created
document tab so that the
New Document is selected
and you can see the empty
canvas.
8. Resizing your Images with Photoshop
Step 5b: Drag the Layer over to the New Document
Click back to the image so that you
can see its Layers. Grab the layer
that is “Layer 0” and drag it into the
empty canvas.
9. Resizing your Images with Photoshop
Step 6a: Resizing to Fit the Canvas
You should now see the
dragged in image as a new layer
in the Newly created
document.
Move around the image to
center on canvas.
10. Resizing your Images with Photoshop
Step 6b: Resizing to Fit the Canvas
Go to Edit transform
or
Control+T (PC) /Command+T(Mac)
You should now be able to freely resize
by dragging the corner square.
Push down Shift key to keep the ratio.
Press Enter once finished.
11. Resizing your Images with Photoshop
Step 7: Save for Web and Devices
Go to File Save for Web and
Devices
Set your file type, quality and click
Save.
12. Resizing your Images with Photoshop
Step 7: Saving Thumbnails with Same Ratio
Go to File Save for Web and
Devices
Set your file type, quality.
Insert Image size for either width OR
Height. Dreamweaver will auto size
the other side.
Then click Save.
