Class 20

516 views
433 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
516
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class 20

  1. 1. Class 20
  2. 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. 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. 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. 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. 6. Resizing your Images with Photoshop Step 4: Unlock the Image Layer Double Click on the Image Layer that says “background” to unlock.
  7. 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. 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. 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. 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. 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. 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.

×