在制作网站时,我们常用到Ps-Dw等应用程序集成技术,可在 Dreamweaver 中将 Photoshop 图像切片粘贴到Web页上。但是,从 Photoshop 中复制和粘贴时,不会维护与原始文件的实时连接。若要更新图像,请在 Photoshop 中进行所需的更改,然后重新复制和粘贴。下面来学习Dw非智能对象的创建方法。
工具/原料
软件:Dreamweaver CC & Photoshop CC
图片 x 2
一、复制粘贴工作流程
1、 打开Dreamweaver,按下Ctrl+N快捷键,创建一空白文档,切换到‘设计’视图,插入点默认在左上角。
2、在Photoshop操作界面中,可看到这里已放置了由三层图层组成的图像。【例】告示牌.PSD
3、(一)选区生成粘贴对象 先选中文字图层,再选用‘选区’工具,在图像上框选复制部分,按下Ctrl+C将选区内容辅助。
4、返回Dw操作界面,在文档插入点处按下Ctrl+V快捷键,弹出‘图像优化’窗口,根据需要调整优化设置,单击‘确定’(在该对话框中更改是以不破坏图像的方式应用的)。
5、弹出可用于Web图像的保存窗口,如果已设置了站点,就保存到站点里。粘贴图像定位在起始插入点处。
6、(二)切片生成粘贴对象 选用‘切片’工具,在图像上创建需要复制的内容,然后将其复制。
7、采用同样的方法,将切图粘贴在插入点处。(注:利用选区工具复制内容时,只能复制一个图层里的内容,而切片工具则可复制所有可视的内容。在选区和切片并存的情况下,系统优先复制选区内的图像)。
二、设置“图像优化”对话框选项
1、 从Photoshop中创建智能对象或粘贴选定内容时,Dreamweaver 将显示“图像优化”对话框,包括在选择任何其他类别图像并单击属性检查器中的“编辑图像设置”按钮时。使用此对话框,可使用颜色组合、压缩和质量来定义和预览用于 Web 图像设置。可用于 Web 图像的特征是:指在所有主流 Web 浏览器中都可显示,且查看者使用任何系统或浏览时显示相同效果。这些设置需要在品质和文件大小间进行权衡(注:无论选择何种设置都只影响图像文件的导入版本,通常不影响原始 Photoshop PSD 或 Fireworks PNG 文件)。
2、(一)预设选用技巧选择一个最符合您的需求的预设。图像的文件大小会根据您选择的预设而变。应用了设置的图像的即时预览显示在背景中。 对于必须用高清晰度显示的图像,请选择“用于照片的 PNG24(锐利细节)”。
3、插入将充当页面背景的图案,请选择“用于背景图像的 GIF(图案)”(注:选择预设时,会显示预设的可配置选项。如需进一步自定义优化设置,请修改这些选项的值)。