ZODIOS.net

Как разрезать графику для верстки

09.9.2008  –  Рубрика: Инструментарий

Процесс подготовки графики для верстки делиться на два этапа: разбивка макета на графические фрагменты и оптимизация графических фрагментов. В этой статье речь пойдет о том, как разбивать макет на графические элементы с использованием Adobe Photoshop и о настройках ее оптимизации.

Этап разбивки графики на отдельные графические элементы сходен с вырезанием ножницами рисунков для коллажа. Поэтому первое, что нужно сделать перед тем, чтоб вырезать графический элемент с макета, это убрать все лишнее с него. Все отдельные элементы: плашки, текст, структурные элементы в Photoshop рисуются в отдельных слоях, по этому, если нам нужно, например, вырезать рисунок который находиться под текстом, нам нужно сначала отключить отображения слоя, в котором находиться текст. Для этого нужно кликнуть на значке «глаз» в блоке слоев (блок слоев открывается нажатием кнопки F4, или через “Window – Layers” главного меню программы). На иллюстрации красным квадратом обведена кнопка «Глаз».

После того как на макете остались только необходимые элементы можно переходить к выделению областей которые будут сохранены в отдельные файлы. Для того чтоб выделить область необходимо воспользоваться инструментом Slice tool. Данный инструмент выделяет область в синюю рамку, которая имеет коричневый цвет и восемь маркеров (которые используются для изменения размеров выбранной области) при ее активности. Инструмент Slice tool находиться в группе с вторым инструментом – Slice Select Tool, который можно выбрать кликнув правок кнопкой мышки по инструменту Slice tool, или кликнув на черный треугольник в нижнем правом углу иконки инструмента. Slice Select Tool используется для выбора вырезанных областей и редактирования их параметров.

При двойном клике инструментом Slice Select Tool по вырезанной области появляется диалоговое окно «Slice Options». Это диалоговое окно используется для изменения параметров выбранной области. Главным для нас параметром является поле Name. В нем задается имя, которое будет присвоено файлу, в который будет сохранен выбранный фрагмент макета. Также в нем можно изменять ширину (W) и высоту (H) выбранной области.

Теперь, когда на макете дизайна размечены с использованием инструмента Slice tool все области, которые необходимо сохранить в отдельный файл, можно приступать их сохранению. Для этого нужно открыть диалоговое окно Save for Web & Devices, выбрав пункт «Save for Web & Devices…», в разделе File главного меню или воспользоваться комбинацией клавиш Alt+Shift+Ctrl+S.

Большую часть этого окна занимает блок предпросмотра макета. В верхней левой части содержит панель которая состоит из таких инструментов: «рука» для перемежения по масштабированном макету, «лупа» для масштабирования рисунка(масштаб рисунка также можно изменять выбрав необходимое знчения масштаба в выпадающем списке в левой нижней части диалогового окна), Slice Select Tool для выбора фрагмента для разрезки, пипетка для выбора цветов и кнопка отключения сетки нарезки.

В левой верхней части диалогового окна Save for Web & Devices… находиться панель с закладками. Она используется для изменения режимов отображения рисунка. Можно отображать оригинал(original), оптимизированный рисунок (optimized), оригинал и оптимизированный рисунок (2-up) и оригинал и три варианта оптимизированного рисунка.

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

Теперь перейдем к рассмотрению главной области, которая используется для оптимизации графики перед сохранением. В правой части диалогового окна Save for Web & Devices находиться блок с настройками оптимизации графики. Данные настройки оптимизации применяются к выделенному фрагменту, который выбирается в окне предпросмотра. Главным параметром является формат, в котором сохраняется рисунок. Формат выбирается в выпадающем списке которые имеет такие варианты: JPEG, GIF, PNG-8, PNG-24, WBMP(подробней о форматах графики и их различиях можно прочитать в заметке «Краткое описание графических форматов«). У каждого выбранного формата есть свои уникальные настройки. При выборе формата JPEG ключевой настройкой является Quality которая указывает на процент сжатия рисунка (чем сильнее сжатие тем меньше размер файла рисунка и ниже его качество). При выборе формата GIF это параметр Colors который указывает на количество цветов рисунка, Dither который указывает на рассевание цветов и Lossy который указывает на потерю качества. При выборе формата PNG-8 настройки аналогичны настройкам формата GIF. Различия между форматом PNG-8 и PNG-24 состоит в том, что первый не поддерживает альфа-канал (полупрозрачность).

После того как для каждого фрагмента установлены параметры оптимизации можно сохранять фрагменты в файл. Для этого необходимо нажать на кнопку Save в этом(Save for Web & Devices) диалоговом окне. После нажатия откроется диалоговое окно в котором необходимо выбрать папку в которую будут сохранены рисунки. Стоит отметить, что рисунки будут сохранены в папку images в выбранной папке, а имена рисунков будут соответствовать именам фрагментов, о которых говорилось ранее.

Подробней о других инструментах ускоряющих работу верстальщика можно прочитать в заметке «Джентльменский набор верстальщика«, а том как оптимизировать файлы формата PNG можно прочитать в заметке «Оптимизация PNG c помощью OptiPNG«

Tags: PhotoShop, Графика