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

Photoshop

Редактор для CSS

Редактор для HTML – текстовый редактор

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

Для редактирования CSS, в отличие от HTML (см. 3.1), использование какого-нибудь специализированного редактора даже приветствуется. Впрочем, если вы хорошо владеете CSS, то обычный текстовый редактор тоже сгодится.

Существует несколько редакторов для CSS, наиболее известный из которых – TopStyle. Каждый веб-разработчик вправе сам решать какой редактор ему использовать для CSS, если это не противоречит политике компании.

Большинство готовых дизайнов, с которыми веб-разработчику приходится иметь дело, выполнены в Adobe Photoshop, и соответственно, предоставляются в его родном формате PSD. В связи с этим, мы рассмотрим несколько тем, касательно верстки HTML используя версию Photoshop CS.

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

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

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

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

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

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

Слои (Layers)

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

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

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

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

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

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

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

Дата добавления: 2014-12-16