Настройка рабочего места в Photoshop

Прежде чем приступить к верстке готового дизайна в Photoshop, необходимо настроить ваше рабочее место. Начать следует с удаления всех ненужных палитр в панелях справа. Это делается путем перетаскивания ненужного таба за пределы окна Photoshop. Целесообразно оставить табы Info, Layers, Layer Comps, History, Character и Paragraph.

Далее, выбираем опцию Move Tool в панели слева. Вверху появится бар дополнительных настроек. Необходимо поставить галочки в чекбоксах Auto Select Layer и Show Bounding Box.

Затем выбираем опцию меню Edit -> Preferences -> General и постранично ставим нужные настройки.

Для страницы настроек General ставим галку на Zoom Resizes Windows. Для группы настроек Units & Rulers необходимо поставить значение pixels для Rulers и Type. В настройках Guides, Grid Slices & Counts в качестве цвета для Guides следует указать Light Red. Этот цвет более заметный по сравнению с цветом по умолчанию. В группе Grid поставить значение 10 для Gridline every. А также значение 10 для Subdivisions. В разделе настроек Performance в группе Plug-Ins & Scratch Disks необходимо указать другие диски, если таковые имеются, для хранения файла подкачки Photoshop. Это повысит стабильность работы программы. В группе History & Cache нужно указать значение 8 для Cache Levels, и в History States указываем значение равное 40, это позволит иметь больший запас для отмены действий в случае необходимости. Такие настройки позволят избежать многих неприятностей в дальнейшем, при работе с готовым дизайном.

Таперь настроим систему цветокоррекции: Edit -> Color Settings. В Settings выбираем Monitor Color. Проверяем наличие галки на пункте View -> Proof Colors, ее быть не должно. Создаем пустой документ, идем File -> Save For Web, возле меню Preset нажимаем стрелку и снимаем флажок с Convert to sRGB. Зажать клавишу Alt и нажать появившуюся вместо Done кнопку Remember. Выйти из диалога по клавише Esc.

Одним из способов ускорения работы является использования горячих клавиш, поэтому настроим те из них, которые нам будут нужны с процессе повседневной работы: Edit -> Keyboard Shortcuts. Далее идем по внутреннему меню и назначаем клавиши, не забывая после каждого назначения нажимать Accept:

• Image -> Crop (Alt+Shift+Ctrl+C)
• Image -> Mode -> Index (Alt+Ctrl+I)
• Image -> Mode -> RGB (Shift+Ctrl+I)
• Layers -> Flatten Image (Alt+Shift+Ctrl+F)

Закончив настройку сочетаний горячих клавиш нажимаем Ок.

Настройка рабочего места закончена. Теперь нужно сохранить изменения. Для этого нужно выбрать пункт меню Window -> Workspace -> Save Workspace. Поставьте галки на всех пунктах в Capture и определите какое-нибудь имя для сохраненного файла, чтобы можно было его использовать в дальнейшем.

Одной из основных задач, стоящих перед веб-разработчиком, при работе с дизайном, является выделение нужного изображения и его сохранение в виде файла, пригодного для Интернет формата: GIF, JPEG или PNG. Об этом и пойдет речь дальше.

Слои (Layers)

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

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

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

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

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

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