After you create or modify images in Adobe Photoshop in the PSD for-mat, you can quickly copy and paste all or part of a multi-layered or multi-sliced image or insert the entire PSD file
Trang 1After you create or modify images in Adobe Photoshop in the PSD for-mat, you can quickly copy and paste all or part of a multi-layered or multi-sliced image or insert the entire PSD file directly into
Dreamweaver Dreamweaver handles the integration and optimizes them as Web-ready images in the selected format (GIF, JPEG, or PNG formats) Before you insert a PSD (or any other image) into a Web page, you should store the file along with the site files, so the link (rela-tive path) to the file is always available and the file gets published when the time comes When you insert the entire PSD file, Dreamweaver creates a Smart Object that maintains a live connection with Photoshop This live connection allows you to update changes from the original image with the click of a button in Dreamweaver
When you copy and paste, a live connection is not maintained Any changes to the original need to be manually updated again However, Dreamweaver does remember your optimization setting when you re-paste it or use the Edit button in the Properties panel
Inserting Images
from Photoshop
Create a Smart Object from a
Photoshop File
Open a Web page you want to
insert an image
Click within the document where
you want the image inserted
Click the Insert menu, and then
click Image.
◆ You can also drag the PSD file
from the Files panel (if
available) to the Web page
Navigate to and select the PSD
image you want, and then click OK
(Win) or Open (Mac).
Click the Options tab, and then
specify the format, quality, and
smoothing options you want
Click the File tab, and then specify
the scale options you want
Click OK.
If prompted, locate the Images
folder on your local root site, save
the image, and then specify Input
Accessibility options
8
7
6
5
4
3
2
1
4
5 6
7
Trang 2Copy and Paste All or Part of an
Image from Photoshop
Open the image you want to copy
in Photoshop (PSD format)
Select the image, layer, or slice
Click the Edit menu, and then click
Copy.
Exit Photoshop
Open a Web page in Dreamweaver
that you want to insert an image
Click within the document where
you want the image inserted
Click the Edit menu, and then click
Paste.
The Image Preview dialog box
opens
Click the Options tab, and then
specify the format, quality, and
smoothing options you want
Click the File tab, and then specify
the scale options you want
Click OK.
If prompted, locate the Images
folder on your local root site, save
the image, and then specify Input
Accessibility options
To edit the pasted image, select it,
and then click the Edit button in
the Properties panel
12
11
10
9
8
7
6
5
4
3
2
1
Did You Know?
You can change Image Preview
opti-mization settings If you want to
change optimization settings after you
insert an image, you can use the Edit
Image Settings button in the Properties
6 5
11
Trang 3After you insert a Photoshop (PSD) file into a Web page, Dreamweaver creates a Smart Object that maintains a live connection with the origi-nal file in Photoshop This live connection allows you to update changes from the original image with the click of a button in Dreamweaver Any changes you make in Dreamweaver to the Smart Object do not affect the original Photoshop file When you create a Smart Object from Photoshop, Dreamweaver displays an icon in the upper-left corner of the image When the object in Dreamweaver and the original file in Photoshop are the same, both of the arrows in the icon are green When the original file in Photoshop is different than the Smart Object in Dreamweaver, one of the arrows in the icon changes to red, which indicates you need to update it
Updating Images
from Photoshop
Update a Smart Object from a
Photoshop File
Open a Web page in Dreamweaver
that contains text
Select the Smart Object image
derived from a Photoshop PSD file
Click Edit Image in the Properties
panel
Dreamweaver opens the source
file in Photoshop
Make the changes you want, save
the file, and then exit Photoshop
NOTE If you’re getting a PSD file
from another person and don’t
have Photoshop installed on your
computer, you can still make the
update from Dreamweaver
Select the Smart Object
A red icon appears in the
upper-left corner of the Smart Object
Click the Update from Original
button in the Document window
The red icon turns to green,
indicating the Photoshop file and
the Smart Object are the same
6
5
4
3
2
1
3
6 5 Update Smart Object
Trang 4Update Multiple Smart Objects
In Photoshop, open the linked
images (PSD) that you want to
update in Dreamweaver, make
changes to the files, save them,
and then exit Photoshop
Open a Web page in Dreamweaver
that you want to insert an image
Open the Files panel, and then
click the Assets tab to view the
site assets
Click the Images button to display
Images view
Select the image assets in the
Assets panel that you want to
update You can use Control-click
to select multiple filenames
The Smart Objects display an icon
in the upper left corner
Right-click (Win) or option-click
(Mac) one of the selected
filenames, and then click Update
from Original.
6
5
4
3
2
1
Did You Know?
You can reset the size of a Smart
Object Drag a resize handle, and then
click the Update From Original button
in the Properties panel
You can reset the size of a Smart
Object to the original PSD If you want
to change the size of the original PSD
file, Dreamweaver doesn’t recognize
the size change with the update icon
To resize the Smart Object to match the
original PSD file, right-click (Win) or
option-click (Mac) the Smart Object,
and then click Reset Size To Original
3
1
4
5 6
Updated Smart Object
Trang 5After you create or modify images in Adobe Fireworks in the PNG for-mat, you can quickly copy and paste or insert them directly into Dreamweaver Dreamweaver handles the integration and optimizes them as Web-ready images in the selected format (GIF, JPEG, or PNG formats) You can also paste images into a Web page After you insert images into a Web page, you can edit the source image in Fireworks and update the image in Dreamweaver
Inserting Images
from Fireworks
Copy and Paste Images from
Fireworks
Open the image you want to copy
in Fireworks (PNG format)
Select the image, layer, or slice
Click the Edit menu, and then click
Copy.
Exit Fireworks
Open a Web page in Dreamweaver
that you want to insert an image
Click within the document where
you want the image inserted
Click the Edit menu, and then click
Paste.
The Image Preview dialog box
opens
Click the Options tab, and then
specify the format, quality, and
smoothing options you want
Click the File tab, and then specify
the scale options you want
Click OK.
If prompted, locate the Images
folder on your local root site, and
save the image, and then specify
Input Accessibility options
The image is inserted into the
document with the specified
format and settings
11
10
9
8
7
6
5
4
3
2
1
8 9
10
2
Trang 6Insert Images from Fireworks
Open a Web page you want to
insert an image
Click within the document where
you want the image inserted
Click the Insert menu, and then
click Image.
Navigate to and select the image
you want (.PNG), and then click OK
(Win) or Open (Mac).
Click the Options tab, and then
specify the format, quality, and
smoothing options you want
Click the File tab, and then specify
the scale options you want
Click OK.
If prompted, locate the Images
folder on your local root site, and
save the image, and then specify
Input Accessibility options
Update Images from Fireworks
Open a Web page in Dreamweaver
that contains text
Select the image derived from a
Fireworks PNG file
Click Edit Image in the Properties
panel
Dreamweaver opens the source
file in Fireworks
Make the changes you want, and
then save the file
Select all or part of the image,
copy it to the Clipboard, and then
exit Fireworks
5
4
3
2
1
8
7
6
5
4
3
2
1
4
3