Graphics Programs Reference
Integrating Photoshop and Dreamweaver
You can set the Dreamweaver preferences to select Adobe Photoshop or Adobe
Fireworks as an external image editor for each image fi le type (.jpg, .gif, .png). After you
select an external editor for a fi le type, you can open a selected image in the external
image editor, edit and save the image, and then view the changes in Dreamweaver in the
Document window. This tutorial uses Adobe Photoshop to edit images in Web pages.
Adobe Photoshop CS5 is the industry-standard software for creating, editing, and work-
ing with bitmap graphic images. Its integration with Dreamweaver enables you to move
seamlessly between the two programs, streamlining your workfl ow and increasing your
productivity. You can insert Photoshop fi les into Web pages in Dreamweaver or you can
copy parts of Photoshop images and paste them into pages. When you do this, you create
the optimized GIF, JPEG, or PNG images that will be displayed in the pages of your site.
This is extremely helpful because Web site content can change frequently and in today's
busy world, every saved second counts.
Keeping Up with the Latest Techniques
Technology is developing rapidly, and changes often require programmers and design-
ers to alter the way they approach various aspects of Web design. For example, design-
ers who use the Adobe Creative Suite are now able to move easily between programs
like Illustrator, Photoshop, Fireworks, Flash, Dreamweaver and InDesign and use ele-
ments from a single document in multiple layouts while preserving the links to the origi-
nal artwork. Now one might use the same logo in a brochure, created in InDesign, and
in a Web site, created in Dreamweaver. When creative changes are made to the original
art work, they can seamlessly flow through to the various layouts in which that element is
used. Improvements, like these, enable designers to increase productivity and efficiency,
but they also require designers to keep up with the latest developments and remain flex-
ible in their approach to development and design.
If you do not have Photoshop: You can read the rest of this session, but not perform
the steps. Instead, use the nb_logo.png and the nb_logo_over.png images to create a
rollover that links to the home page from all of the pages of the site. Your site will not dif-
fer from the images shown in the tutorials. The only differences will be that instead of the
Photoshop documents inserted into the pages, you will have GIF, PNG, or JPEG images
inserted in the pages.
The native Photoshop file
format is .psd.
Teamwork: Keeping up with original artwork
When you work in a team, it is important to create systems that will enable work to flow
smoothly for all of the members of the team. Employers expect you to be able to create
efficient systems for managing workflow and productivity. If you are working with a team
or if you work from more than one computer, you should move any Photoshop file that you
are going to insert into a page to the site's local root folder. If you insert a Photoshop file
located outside of the site's root folder into a Web page, Dreamweaver creates an abso-
lute local file path to the Photoshop file. The absolute path might not work from another
computer, which can cause problems if you share the file with a team or if you change
computers. When you store the Photoshop file in the site's local root folder, Dreamweaver
creates a relative path to the file and anyone who has access to the site files can access the