Удобная и быстрая вёрстка с использованием продуктов Adobe

Недавно я видел, что некоторые верстальщики всё ещё сохраняют фрагменты дизайна в виде отдельных файлов, т.е. используют Crop Tool в Photoshop, получается медленно, некачественно и неудобно. Для таких верстальщиков или для начинающих опишу более удобный, и наверно более правильный способ вёрстки, который заключается в использовании инструмента Slice Tool в Photoshop, последующего «сохранения для Web» и использования программы Dreamweaver для HTML-вёрстки.

Введение

После того, как готов дизайн надо разделить его на куски, причём надо сразу представлять, как будет выглядеть HTML-структура странички, чтобы потом не провести несколько мучительных часов в раздумьях о том, как бы теперь эти картинки разместить в таблицах или div`ах.
Также надо стараться, чтобы картинки можно было сохранить в самом подходящем формате. Например, если есть объект с чёткими границами цветов, и один из его краёв переходит в другое изображение в виде градиента, то имеет смысл сохранить этот край отдельным куском в формате JPG, а остальную часть в GIF (только без фанатизма). Но к выбору формата сохранения кусков картинки вернёмся позже. А сейчас о самом процессе.

Фрагментация дизайна в Photoshop

Для начала надо разметить будущие фрагменты изображения с помощью Slice Tool (или кнопка “k” по умолчанию). Если два раза кликнуть на полученную область (возможно с зажатой кнопкой Ctrl), то открывается окно настроек. В этом окне можно отметить, будет ли на выходе создаваться картинка соответствующая этой области или вместо неё в выводимом HTML-файле оставлять пустую область. После того, как вы создаёте свои (пользовательские) фрагменты, автоматически создаются технологические фрагменты, на которые вы можете не обращать внимания.

Чтобы отметить все фрагменты, по которым не надо создавать картинки, придётся настраивать достаточно большое их количество, поэтому я обычно этого не делаю. Если не отмечать области как «No Image», то после вывода в папке с картинками получится много файлов, из которых трудно будет выбрать нужные, но все эти файлы будут иметь префикс, который является именем .PSD файла. Можно назвать PSD файл именем, которое начинается с 2-х подчёркиваний, и все технологические файлы будут сгруппированы.

Также в окне настроек можно указать название фрагмента. Сразу называете созданный фрагмент, чтобы не пропустить ни один из них. Давайте фрагментам смысловые названия, это облегчит манипулирование полученными картинками.

Во время того, как вы размечаете будущие куски изображения, старайтесь представлять будущую вёрстку, это поможет уменьшить количество дальнейших редактирований.

После того, как все куски размечены и названы, переходите в File->Save For Web & Devices.
В открывшемся окне выберите Slice Select Tool (или кнопка “k” по умолчанию) и поочерёдно выбирайте каждый из пользовательских фрагментов, чтобы указать параметры сохранения. Параметры для каждого из фрагментов устанавливаются в правой части окна. В этом меню можно выбрать формат картинки и её качество/количество цветов. Для сравнения оригинального изображения и оптимизированного используйте вкладки над областью просмотра и размер изображения на выходе.

После того, как все фрагменты оптимизированы, можно произвести «сохранение для Web» (кнопка Save).
При сохранении проверите параметры:

• Тип файла: HTML and Images
• Settings: Default Settings (для ознакомления можно посмотреть Others…)

В результате вв получите html файл и папку images с картинками. Среди картинок будет файл spacer.gif – это прозрачный однопиксельный GIF.

Вёрстка HTML странички при помощи Dreamweaver

Откройте сгенерированный Photoshop`ом файл в Dreamweaver в Design View.

Создайте новый HTML-файл.

В новом HTML-файле создавайте таблицы или DIV`ы, т.е. делайте структурный макет станицы. Когда вам надо вставить картинку в ячейку таблицы, вы нажимаете Ctrl+Tab тыкаете мышкой в картинку, нажимаете Ctrl+C, Ctrl+Tab и Ctrl+V в нужное место.
Желательно, чтобы новый HTML-файл был открыт в Code and Design View, тогда при вставке скопированной картинки вы будете контролировать генерируемый код. Перенос картинок в визуальном режиме позволяет значительно ускорить и упростить этот процесс, т.к. не надо выбирать картинки из списка, все картинки у вас перед глазами.

Выводы

В результате, при использовании Slice Tool можно быстро разрезать дизайн на фрагменты и оптимизировать их. При сохранении в режиме «Save For Web and Devices» автоматически сгенерируется HTML-фал, который можно использовать для удобной вставки изображений в новый HTML-файл в процессе вёрстки.