在Adobe DreamWeaver中使用图像往返

Image Roundtrip is ideal for the web designer-developer who follows a particular set of behaviors: their workflow is almost exclusively in Adobe applications, with a constant demand for image modifications. If you’re a “one and done” designer – for example, creating content very quickly on a daily basis for a blog – this approach will likely not work for you. But if you’re responsible for a relatively static site using DreamWeaver and Photoshop and wish to continue to adjust your images, including after the site is published, this technique may be ideal.

Image Roundtrip是遵循特定行为的Web设计人员-开发人员的理想选择：他们的工作流几乎完全在Adobe应用程序中，并且对图像修改的需求不断。 如果您是一位“干脆干的”设计师，例如，每天非常快速地为博客创建内容，则此方法可能对您不起作用。 但是，如果您负责使用DreamWeaver和Photoshop创建相对静态的网站，并希望继续调整图像(包括在网站发布后)，则此技术可能是理想的选择。

In order to use Image Roundtrip, you must have your site setup correctly in DreamWeaver first, including specifying where your images folder is located. I’ll assume that you have the site folders I have previously suggested, with an assets folder that contains your site images beside an originals folder. The latter contains the original working documents for your site: the .psd and .ai files, the Word documents in which you wrote the body copy of the site, etc.

为了使用Image Roundtrip，必须首先在DreamWeaver中正确设置站点 ，包括指定images文件夹的位置。 我假设您拥有我之前建议的站点文件夹 ，并在原始文件夹旁边包含资产文件夹，其中包含您的站点图像。 后者包含您网站的原始工作文档： .psd和.ai文件，在其中编写了网站正文的Word文档，等等。

To start our lesson, create any image in PhotoShop (you might want to use the image I have, by “gnuckx”, from flickr and lisenced under Creative Commons). Then – this is important – save the image as a PSD file in the originals folder for your site.

要开始我们的课程，请在PhotoShop中创建任何图像(您可能要使用 flickr的“ gnuckx” 图像 ，并在Creative Commons下获得许可)。 然后- 这很重要 -将图像另存为站点原始文件夹中的PSD文件。

Now start DreamWeaver, make sure you’re working on the correct site, start a new page, switch to Design Mode, and use Insert / Image from the menu (or Opt + CMD + I).

现在启动DreamWeaver，确保您在正确的站点上工作，启动新页面，切换到设计模式 ，然后使用菜单(或Opt + CMD + I )中的Insert / Image 。

“Wait,” you’re about to say. “We can’t insert a PSD image into a web page: HTML only supports four image formats, and PSD is definitely not one of them”.

“等等，”您将要说。 “我们无法将PSD图像插入网页： HTML仅支持四种图像格式 ，而PSD绝对不是其中之一”。

Go ahead anyway: use the file dialog to locate the PSD you saved in the originals folder. DreamWeaver will, surprisingly, allow you to insert the image, but then immediately prompt you to convert the image into a web-ready format.

无论如何，请继续：使用文件对话框找到您保存在originals文件夹中的PSD。 令人惊讶的是，DreamWeaver将允许您插入图像，但是随后会立即提示您将图像转换为可用于Web的格式。

The interface you’re presented with at this point is a cousin to PhotoShop’s

Save For Web window, but slightly different: the “four up” mode is shifted to the bottom right corner, for example. Otherwise, you have the same options to crop, resize, and optimize the image that you do in PhotoShop or Fireworks. I would suggest that whatever format you choose, you use the settings I’ve previously discussed. When you’re finished, click on OK.

另存为Web”窗口的一个表亲，但略有不同：例如，“四合一”模式移至右下角。 否则，您可以使用与Photoshop或Fireworks中相同的选项来裁剪，调整大小和优化图像。 我建议您选择任何格式，都使用我之前讨论过的设置 。 完成后，点击OK 。

If you’ve set up your site correctly in DreamWeaver the application will prompt you to save this new version inside your site’s images folder, with a web-ready filename. After you’ve completed this process the application will prompt you to insert alt text for the image as normal.

如果您已经在DreamWeaver中正确设置了站点，则应用程序将提示您使用可用于Web的文件名将该新版本保存在站点的images文件夹中。 完成此过程后，应用程序将提示您正常插入图像的替代文本。

Presented in Design Mode, your inserted image features a watermark of a circular green arrow in its top left corner. This is not a permanent part of the image, and will not be displayed on the final website: it is only there to remind you that the image is “live linked” to its PhotoShop progenitor. DreamWeaver is essentially keeping an eye on the original version of the image, looking for any alterations to it.

Let’s make some changes to the original now. There are four ways you can switch back to editing the PhotoShop document: you can use whatever techniques your OS provides to swap between applications, or:

• right-click on the image and choose Edit Original With / PhotoShop

  右键单击图像，然后选择“ 使用/ PhotoShop编辑原件”

• use the equivalent command under Modify in the menu bar

  使用菜单栏中“ 修改”下的等效命令

• click on the PhotoShop icon in the Property Bar while the image is active.

  在图像处于活动状态时，单击属性栏中的PhotoShop图标。

Note that you can use these commands at any time within DreamWeaver; if PhotoShop isn’t running and/or the original image isn’t loaded, everything will be made ready for you. The only requirement is that the original image stay in the same location.

注意，您可以随时在DreamWeaver中使用这些命令。 如果PhotoShop没有运行和/或没有加载原始图像，则一切准备就绪。 唯一的要求是原始图像必须位于同一位置。

Back in PhotoShop, alter something about the original image: here, I’ve added some text. Save the PSD with the changes and switch back to DreamWeaver.

回到PhotoShop中，对原始图像进行一些更改：在这里，我添加了一些文本。 保存所做更改的PSD，然后切换回DreamWeaver。

You’ll see that the image’s watermark has changed; half the arrow is now red, indicating that the web version of the image is out of sync with the PhotoShop original. We can fix this:

From the same locations as above (right-click, menu bar, property bar) choose Update From Original.

在与上述相同的位置(右键单击，菜单栏，属性栏)，选择从原始文件更新 。

The image now re-syncs with the PhotoShop version and shows the changes you made. The truly nice part is that it goes through the same optimization process that you completed previously: if you saved the image as a JPEG at a particular quality and size, DreamWeaver does the same thing again, but invisibly and behind the scenes.

This provides a friction-free workflow for a designer who prefers to move back and forth between PhotoShop and DreamWeaver, tweaking images and seeing the result, without having to worry about image versions or quality loss through recursive saving and compression.It’s not my personal method of working, but that doesn’t mean it can’t be yours.

这为谁喜欢来回移动的PhotoShop和Dreamweaver之间，调整图像，看到结果的设计者无摩擦的工作流程，而无需通过关于节约递归映像版本或质量损失和compression.It的不是我个人的方法忧工作，但这并不意味着它不能属于您。

翻译自: https://thenewcode.com/510/Using-Image-Roundtrip-In-Adobe-DreamWeaver