Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Работаем со слоями в Photosop по полной 

by
Length:ShortLanguages:

Russian (Pусский) translation by Ivan Gryaziev (you can also view the original English article)

Веб-дизайнеры меняют свой подход к использованию Photoshop;  плюсы Pixel-perfect изображений (пиксель-в-пиксель)  стали менее значимыми, чем они были год или два назад.  Тем не менее, Photoshop по-прежнему остается бесценным инструментом в руках дизайнера и правильное использование всех его возможностей столь же важно, как никогда.  Следующие советы помогут вам освоить работу со слоями.


Кратко о наилучшей практике 

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

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


Дублируем слой в другой документ PSD

Для этого чаще всего используется Перетаскивание, но есть и более правильный и надежный способ.  Чтобы создать копию текущего слоя в том же расположении в другом документе Photoshop, щелкните правой кнопкой мыши на слое, который вы хотите скопировать, и выберите "Дублировать слой" (Duplicate Layer).  При появлении диалогового окна, выберите пункт назначения из списка, а затем нажмите кнопку ОК.

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

Выполнение выше описанных действий изображено в диалоговом окне дублирования слоя (Duplicate Layer).

Здесь можно выбрать существующий открытый документ или создать новый.  В данном случае я создам новый документ.

Вот и все!  Этот метод может быть очень полезным при работе с множеством слоев, которые необходимо экспортировать (например, при создание спрайт листов (sprite lists)).


Убрать слово «копия» 

При дублировании слоя в Photoshop по умолчанию его имя будет добавлено с надписью "копия".  Это одна из тех настроек по умолчанию, которые меня раздражают, так что я хотел бы ее изменить.  Чтобы отключить это значение по умолчанию, нажмите на значок Меню в правом верхнем углу панели слоев и перейдите к Параметрам панели (Panel Options).

В всплывающем окне результирующий снимите флажок "Добавить «копия» для копирования слоев и групп" (Add "copy" to Copied Layers and Groups).

На этой панели есть еще несколько полезных функций.

Размер миниатюры

Эта опция позволяет изменить размер эскиза слоя в панели слоев.

Контент Миниатюр

Настройка, связанна с предыдущей опцией и отвечает за отображение содержимого слоя.  Скажем, например, у вас есть большой холст и слой, содержащий небольшую иконку.  Для того, чтобы правильно отобразить содержимое этого слоя в миниатюре, вы можете переключить настройку на "Границы слоев" (Layer Bounds).

Ниже я показываю это на примере холста с размером 1600х1200 и простым изображением круга на нем.  Видите разницу?

Маски по умолчанию для слоев заливки

Хотите, отключить маску слоя при создании слоя заливки?  Если да, то снимите флажок "Использовать маски по умолчанию для слоев заливки" (Use Default Masks on Fill Layers option).

Развернуть новые эффекты

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


Разделение стилей слоя

Иногда именуемая как стили слоя джейлбрейка,  эта техника позволяет полностью управлять каждым стилем слоя по отдельности. Выберите слой (со стилями), а затем перейдите на Слои (Layers)> Стиль слоя (Layer Styles)> Создать слои (Create Layers), и вы увидите, что ваши стили отсоединились и превратились в отдельные слои.

Например, я создал прямоугольную форму с несколькими стилями слоя.

Скажем, я хочу, повернуть каждый стиль слоя по отдельности.  Я применяю "Создать слои" (Create Layers), как описано выше.

В результате от слоя отделились все эффекты, которые остаются связанными с моим слоем.

Теперь я могу вращать каждый эффект по отдельности.

Примечание: Это здорово, когда с помощью Photoshop, вы можете имитировать эффекты подобные эффекту трансформации через CSS в браузере.


Образцы дизайна при помощи композиции слоев (Layer Comps)

Этот методика является прекрасной альтернативой Fireworks' states. Использование "Композиций слоев" (Layer Comps) позволяет хранить различные комбинации стилей слоя, что позволяет очень легко переключаться между композициями.  Это не только поможет ускорить ваш рабочий процесс, но и значительно улучшает презентацию PSD для ваших клиентов.

Например, допустим, что я должен создать три образца дизайна для кнопки.  Мой клиент хотел бы увидеть один образец кнопки с тенью, второй с внутренним свечением, третий с каймой. Изменять различные Параметры Наложения (Blending Options) и исключать некоторые стили слоя каждый раз, будет очень непрактично. Сохранение композиции слоев позволяет мне переключаться между наборами, например, так:

Перейдите к Окно (Window)> Композиции слоев (Layer Comps), чтобы открыть панель композиции слоев.  Создайте слой с простыми стилями...

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

Для того, чтобы отобразить нужную композицию слоев, нажмите на значок слева от нужной композиции.


Выравнивание слоев относительно выделения

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

Например, если я хочу отцентровать слой в определенном местоположении, но у меня нет ничего относительно чего я бы мог его выровнять, то я могу использовать инструмент выделения.

Создайте выделение с помощью инструмента «Прямоугольная область» (Rectanglular Marquee Tool). Сделайте активным слой, который вы хотите выровнять, выберите инструмент «Перемещение» (Move Tool) и используйте один из видов выравнивания в верхней панели инструментов.


Полезные Горячие клавиши

В Photoshop есть множество горячих клавиш для ускорения рабочего процесса.  Запомни эти пять и ты будешь быстро работать со слоями.

  • Новый слой: Cmd / Ctrl + Alt + Shift + N
  • Дублировать слой: Cmd / Ctrl + J
  • Группа из слоев: Cmd / Ctrl + G
  • Создать / отменить обтравочную маску: Cmd / Ctrl + Alt + G
  • Объединить слои: Cmd / Ctrl + E

Совет: Создавайте свои горячие клавиши

Для того, чтобы назначить свои собственные горячие клавиши, просто перейдите к Редактирвать (Edit)> Клавиатурные сокращения (Keyboard Shortcuts), но будьте внимательны, чтобы не сбить горячие клавиши, установленные по умолчанию.

Например, я хочу, назначить сочетание клавиш Cmd / Ctrl + Shift + R для функции "Переименовать слой". Для начала, я иду в Редактировать (Edit)> Клавиатурные сокращения (Keyboard Shortcuts), а затем во вкладке слои (Layer) нахожу и нажимаю на Переименовать слой затем нажимаю комбинацию клавиш на клавиатуре (Cmd / Ctrl + Shift + R) и нажимаю Принять.  Это все!  Вы можете использовать столько горячих клавиш, сколько вы хотите.


Вывод

Правильно и быстро манипулировать слоями это один из основных навыков для пользователей Photoshop. Это ускоряет рабочий процесс и улучшает взаимодействие при совместной работе в команде.  Если у вас есть советы по работе со слоями которыми вы готовы поделиться, я хотел бы услышать их в комментариях!


Дополнительные ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.