Слои (Layers)

Как известно, в Photoshop предусмотрена возможность обработки многослойных растровых документов, состоящих из слоев различного типа, среди которых могут быть: фоновый (непрозрачный), любое количество рабочих (прозрачных) слоев четырех разновидностей: обычные, текстовые, заливки и коррекции. Если слой обычный или текстовый, то его основным содержимым является некоторый объект (растровый в первом случае и текстовый во втором), а если слой заливки или коррекции, то соответствующее покрытие (декоративное или корректирующее).

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

Управлять отображением того или иного слоя можно с помощью соответствующей опции на панели управления слоями (Layers) справа. Эта опция работает по принципу чекбокса – наличие изображения глаза говорит о том, что слой будет отображаться.

После того, как веб-разработчик принял решение о том, каким образом будет происходить «порезка» готового дизайна на различные составляющие HTML документа, ему необходимо подготовить ту или иную часть дизайна для выделения нужного изображения, будь то изображение фона или обычное изображение. Используя настройку видимости слоев, он убирает с поля зрения ненужные элементы (слои), например текст и пр., затем решает каким образом ему следует выделить изображение: использовать обычное выделение или слайсы.

Если речь идет о выделении нескольких граничащих между собой графических фрагментов (например графические кнопки навигации), то логичнее, и проще, использовать слайсы. Если же речь идет о выделении одного отдельного изображения, то можно воспользоваться обычным выделением.

Используя обычное выделение, изображение нужно будет поместить в буфер обмена, а затем в новое окно (пункт меню File -> New или Ctrl+N) для дальнейшего его сохранения в нужном формате. Однако, следует иметь ввиду, что в обычной ситуации, в буфер обмена попадет только содержимое активного в данный момент слоя, а не то что мы видим на экране. Таким образом, логично предположить, что перед тем как копировать изображение в буфер обмена, общее изображение должно быть плоским, т.е. состоять из одного слоя. Для того чтобы объединить все слои в один, существует опция меню Layer -> Flatten Image. Она может быть использована для временного объединения слоев при выделении нужного изображения. Вернуть исходную разбивку по слоям можно с помощью опции History в закладке History справа. Есть более быстрое решение этой проблемы – комбинация горячих клавиш Ctrl+Shift+C, которая позволяет скопировать в буфер обмена содержимое всех слоев одновременно для выделенного фрагмента.

После того, как выделенное изображение помещено из буфера обмена в новое окно, достаточно выбрать пункт меню File -> Save For Web и выбрать формат (см. 3.3.4) для сохраняемого изображения.

2.3.3Принятие решения: текст – картинка

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

Иногда к проекту идут специальные требования в отношении того, где должен быть текст, а где графика. Это особенно касается HTML-верстки для систем динамического наполнения контента (CMS). Если вы не уверены в этом вопросе, или сомневаетесь относительно конкретной ситуации, обратитесь к своему менеджеру проекта.

Список стандартных шрифтов в разделе 5.5.1