Взаимодействие Photoshop и Dreamweaver

Одним из ключевых элементов взаимодействия hotoshop и Dreamweaver является возможность вносить изменения в отдельные фрагменты в приложении Photoshop, причем эти фрагменты будут обновлены в Dreamweaver автоматически.


Откройте исходную страницу в Photoshop.



Обратите внимание, что слово «intelligent» в области баннера написано с грамматической ошибкой. Давайте исправим эту проблему.


Пользуясь инструментом Text, внесите необходимое изменение в слово.


А теперь, для того, чтобы экспортировать новое изображение и обновить его в Dreamweaver, выберите в меню File > Save for Web (Сохранить для web).


Перед вами откроется окно Save for Web. Это окно является очень мощным инструментом экспортирования, позволяющим оптимизировать фрагменты в Photoshop, а также многое другое. Не переходите напрямую в папку с изображениями. Окно Save for Web создаст свою собственную папку или, как в данном случае, направит изображение в папку изображений и перезапишет старое изображение баннера.


Выберите инструмент Slice Select (Выбор фрагмента) в левом меню и щелкните на фрагменте баннера. В качестве параметров оптимизации выберите JPEG и 55. Нажмите Save.


Перейдите в папку web.



В поле Save as type предоставляются опции экспортирования изображений и автоматического генерирования HTML-кода или только экспорта изображений. Выберите Images Only (Только изображения). Это предотвратит создание новой HTML-траницы и перезапись ею старой. Пусть вас не смущает тот факт, что в выбранной опции предлагается расширение файла gif. Это сбивающее с толку наименование Photoshop. В действительности изображение будет сохранено в файле с расширением, соответствующим указанным настройкам (в данном случае Jpg).


В раскрывающемся списке Slices (Фрагменты) выберите Selected Slices (Выделенные фрагменты). Таким образом вы обеспечите сохранение только выбранного фрагмента. Photoshop проигнорирует все остальные фрагменты.


После установки всех правильных опций нажмите Save. Не переименовывайте файл. Он будет пользоваться документом home.


psd. Photoshop создаст уникальное имя файла для фрагмента на основе его имени.


После этого предоставляется возможность заменить старый баннер новым, который мы модифицировали. Если это диалоговое окно появилось, это верный признак того, что все сделано правильно. Нажмите Replace (Заменить).


А теперь откройте документ в Dreamweaver и обратите внимание, что изображение заменилось на новое.