Optimize an image for the web –Adobe Photoshop
Download
Report
Transcript Optimize an image for the web –Adobe Photoshop
IT 245 - Website Development
Welcome!
Welcome to Unit 7!
Optimizing Images and creating photo
albums in Dreamweaver
There are no textbook readings for this Unit. Please be
sure to go through the Vocabulary pdf, the Web
readings and the Atomic Learning tutorials.
Introduction
In this unit, you’ll learn how to include images in
your Web site. You’ll learn how to insert an image,
use Bridge to import Photoshop or Fireworks files,
and copy and paste an image from Photoshop or
Fireworks. The Web is not as much a place as it is
an experience. And, essential to that experience,
are images and graphics – both still and animated –
that populate most Web sites.
To-Do-List
Review Key Terms On the Reading page
Respond to the Discussion Board
20 Points
Complete the unit project and upload to assignment
dropbox for grading
60 Points
On the Assignment page
Attend the Weekly Seminar or complete the FLA quiz
20 Points
Log in from Student's Home page
Seminar Overview
In this Seminar we will review:
Optimizing images in Dreamweaver
Creating a photo album using Adobe Bridge
Creating Web Photo Album
For all CS5 users:
The Create Web Photo Album feature has been
deprecated as of Dreamweaver CS5. You will find
more information, including various options at this
link:
http://help.adobe.com/en_US/dreamweaver/cs/usin
g/WSc78c5058ca073340dcda9110b1f693f217ad1a.html
Creating Web Photo Album
The easiest way to create a web photo album is to use
Adobe Bridge.
These videos show how to do this:
http://www.youtube.com/watch?v=vVJGSu4mUXE
http://tv.adobe.com/watch/learn-adobe-bridgecs5/creating-image-galleries-with-adobe-bridge/
You can also use CS4 version of Dreamweaver to
create a photo album.
Creating Web Photo Album
Incorporating an Adobe Bridge Web Gallery
into a Dreamweaver Page
http://foundationphp.com/tutorials/gallery/embed1.php
Creating Web Photo Album
The easiest way to create a web photo album is to use
Adobe Bridge.
These videos show how to do this:
http://www.youtube.com/watch?v=vVJGSu4mUXE
http://tv.adobe.com/watch/learn-adobe-bridgecs5/creating-image-galleries-with-adobe-bridge/
You can also use CS4 version of Dreamweaver to
create a photo album.
Optimize an image for the
web
Using Adobe Photoshop:
Optimize an image for the web
http://help.adobe.com/en_US/creativesuite/cs/using/W
SB3484C68-ECD2-4fa4-B7CC447A5FE86680.html
Optimize an image for the
web –Adobe Photoshop
Choose File > Save For Web & Devices. Click a tab at the top
of the dialog box to select a display option: Optimized, 2-Up,
or 4-Up. If you select 4-Up, click the preview you want to
optimize. (Optional) If your image contains multiple slices,
select one or more slices you want to optimize. Select a preset
optimization setting from the Preset menu, or set individual
optimization options. The available options change depending
on the file format you select. If you’re working in 4-Up mode,
choose Repopulate Views from the Optimize menu to
automatically generate lower-quality versions of the image
after you change the optimization settings.
Optimize an image for the
web –Adobe Photoshop
Fine-tune the optimization settings until you are satisfied with
the balance of image quality and file size. If your image
contains multiple slices, be sure to optimize all the slices. To
restore an optimized preview to the original version, select it
and then choose Original from the Preset menu.
If optimizing an image with an embedded color profile other
than RGB, you should convert the image’s colors to RGB
before you save the image for use on the web. This insures
that the colors you see in the optimized image will look the
same in different web browsers. The Convert to RGB option is
selected by default.
Optimize an image for the
web –Adobe Photoshop
Click Save. In the Save Optimized As dialog box, do the
following, and then click Save: Enter a file name, and select a
location for the resulting file or files.
Select a Format option to specify what kind of files you want to
save: an HTML file and image files, only image files, or only
an HTML file.
(Optional) Set output settings for HTML and image files.
Optimize an image for the
web –Adobe Photoshop
Preview optimized images in a web browser
You can preview an optimized image in any web browser
installed on your system from the Save For Web & Devices
dialog box (File > Save For Web & Devices). The browser
preview displays the image with a caption listing the image’s
file type, pixel dimensions, file size, compression
specifications, and other HTML information.
To preview an image in your default web browser, click the
browser icon at the bottom of the Save For Web & Devices
dialog box.
Optimize an image for the
web –Adobe Photoshop
Preview optimized images in a web browser
To select a different browser, select Other from the browser
pop-up menu (next to the browser icon).
To add, edit, or remove a browser in the browser pop-up
menu, select Edit List from the browser pop-up menu. In the
Browsers dialog box, you can find all browsers on your
computer and set the default browser to preview your image.
Optimize an image for the
web –Adobe Photoshop
More information on Web Graphics Optimization in
CS5:
http://help.adobe.com/en_US/creativesuite/cs/using/WSC7A1F92
4-DD38-49b4-B84B-EFF50416C860.html
Project
Project Instructions:
Use Dreamweaver to optimize at least three new images.
Use Dreamweaver (and Bridge, Fireworks, or Photoshop if
you’re using Dreamweaver CS5) to add a photo album to one
of the pages on your site.
Upload the images and your updated page to your Web site.
Post your URL to the Comments area of the Project 7
Dropbox.
Project
Project requirements:
The optimized images are sized appropriately for download
and to fit in the content area of the Web pages.
The photo album is laid out using Dreamweaver CS4 and/or
Dreamweaver CS5 and Bridge, Photoshop, or Fireworks.
The images and revised photo album page are uploaded to
the Web site.
The Web site URL is viable and is posted to the Comments
area of the Project 7 Dropbox.
Project - Grading Rubrics
The optimized images are sized appropriately for download
and to fit in the content area of the Web pages. : 0-30;
The photo album is laid out using Dreamweaver CS5 (or
Dreamweaver CS4) and Bridge, Photoshop, or Fireworks.020.
Total: 0-50.
Thank you!
Feel free to contact me with any questions!
[email protected]
Use the Virtual Office to post questions throughout the week,
as well as to upload your zipped folder if you need me to look
at the code!