Интеграция Adobe Photoshop и Dreamweaver CS3Источник: cc-studio Топорков Сергей
Сейчас наверное уже никто не оспаривает лидерство Photoshop в области растровой графики. Аналогичную лидирующую позицию в сфере веб-дизайна занимает и продукт Dreamweaver, который не так уж и давно купила Adobe у Macromedia. Многие веб-мастера готовят графическую составляющую сайта в Photoshop, а затем уже занимаются версткой в визуальных редакторах, и перед специалистом всегда встает вопрос, как совместить работу двух программ, сделать ее более комфортной и удобной. О том, как этого добиться, на примере Photoshop и Dreamweaver CS3, и пойдет сегодня речь. Откройте Dreamweaver CS3. Для нормальной работы Dreamweaver требуется настройка сайта, указать его месторасположение на вашем компьютере + некоторые дополнительные параметры. Поэтому, если соответствующая настройка у вас не была проведена ранее, выполним ее сейчас. Для этого заходим в меню Site >New Site. Вместо Unnamed Site вводим свое название вашего проекта. Жмем Next. В следующем окне нам предлагают выбрать применяемую технологию (PHP, ASP и т.д.), остановимся на классическом html варианте и выберем пункт No. I don’t want to use a server technology. Жмем Next. Указываем месторасположение папки сайта и снова жмем Next. В следующем окне из списка выбираем None. Жмем на кнопку Next. В последнем окне нам предлагают проверить указанную информацию и либо все отменить нажав Cancel, либо подтвердить, нажав Done. Жмем Done. Будет создан кеш сайта. Нам необходимо создать главную страницу. Для этого идем в меню File >New. Подготовка закончена. Теперь предположим, у вас есть готовый макет документа в PSD формате, и вы хотите интегрировать его или его часть в веб-странику. В Dreamweaver идем в меню Image >Insert и указываем ваш PSD файл макета. Затем перед вам откроется диалоговое окно Image Preview, где вы должны указать формат файла, качество картинки. Если необходимо, то указать область для экспорта (в случае если макет большой, а вам понадобилось добавить только кнопку или отдельную картинку из него).
Все инструменты интуитивно понятны. Они по сути выполняют те же функции, что и в Photoshop с незначительными отличиями. Так в частности, здешний инструмент Export Area очень напоминает обычный Crop, попробуем применить его тут и вы увидите что он отсекает лишние внешние области. После того как определились с выходными данными, жмем кнопку Ок. нам предлагают сохранить изображение в директорию сайта и задать ему имя. Что ж, так и сделаем. Добавим текста на нашу страницу. И теперь посмотрим дополнительные возможности по работе. Строка SRC ссылается на источник изображения, т.е. в данном случае на PSD файл откуда было импортировано изображение. - данная кнопка позволяет выставить вручную размер документа, качество будет выбрано автоматически. Обратите внимание, что изменения производимые данной кнопкой и другими из этого ряда применяются к импортированному изображению а не к макету. слева направо:
И последнее, что хочется добавить по поводу интеграции. Рекомендую вам установить Photoshop в качестве программы для редактирования изображений, расположенных в Dreamweaver, по умолчанию. Согласитесь, гораздо удобнее иметь возможность открыть требуемое изображение в редакторе щелкнув по нему правой кнопкой мыши и выбрав соответствующий пункт, чем пытаться найти его в возможно сложной структуре директорий изображений из большого списка. Итак, исправляем положение. Идем в меню Edit >Preferences >File Types Editor. В поле Extensions (Расширение) выбираем соответствующий тип файла, к примеру .gif, затем в правой части, где поле Editors, щелкаем по плюсику и указываем путь до файла, запускающего Photoshop. Нажимаем Ок и наслаждаемся. |