Обучение веб-дизайну

Как не запутаться в слоях фотошопа. О панели Layers простым языком

Понимание принципа работы в фотошопе у большинства новичков начинается с вникания зачем нужна панель слоев (Layers). Давайте разбираться.

Понимание принципа работы в фотошопе у большинства новичков начинается с вникания зачем нужна панель слоев (Layers).  Если вы в этом разобрались — поздравляю, дальше у вас все пойдет куда проще.

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

Работа со слоями в фотошопе

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

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

слои-в-фотошопе

Как создать новый слой в фотошопе

О, это очень легко. Чтобы создать новый слой в фотошопе — нажмите сочетание Ctrl+Shift+N. В появившемся окне можете сразу ввести имя слоя или просто нажать OK (Enter). Сможете переименовать и позже. Кстати, для этого кликните 2 раза по слою.

Но чаще вы будете пользоваться сочетанием Ctrl+J, чтобы скопировать (перенести) выделенный слой. Или вырезать из него что-то на новый слой (какую-то область, например).

Как создать новый слой в фотошопе

Как выделить слои в фотошопе

Чтобы выделить слои в фотошопе, нужно зажав Ctrl, щелкнуть по слою. Можете щелкать так выборочно по разным слоям и они будут выделяться. Попробуйте также позажимать Shift — если нужно выделить сразу много слоев.

как выделить слои в фотошопе

Чтобы выделить всю область слоя в фотошопе — просто, зажав Ctrl, кликните по слою. Например так вы выделите ноутбук.

Как выделить слой в фотошопе

Как объединить слои в фотошопе

Чтобы объединить слои в фотошопе, выделите необходимые и нажмите сочетание Ctrl+Shift+E (англ. раскладка). Они сольются в один слой. Если вы продолжите работу после этого, в последствии вы не сможете подвигать ноутбук, к примеру — он будет слит с фоном. Так что лучшим решением будет не сливать слои без необходимости. Лучше группируйте их.

Как объединить слои в фотошопе

Как создать группу слоев в фотошопе

Чтобы сгруппировать сразу несколько слоев, выделите их и нажмите Ctrl+G.

Как создать группу слоев в фотошопе

Как выставить цвет слоя в фотошопе

Иногда полезно визуально выделять какие-то слои или группы слоев. Это легко сделать, добавив им цвет. Видите пиктограммку глаза слева каждого слоя? Нажмите на нее правой кнопкой мыши и выберите цвет, который нравится.

Как выставить цвет слоя в фотошопе

Как открыть слой Smart Object в фотошопе

Есть такое интересное понятие как Smart Object. Это такая штука, которая сливает любое количество слоев в 1 слой, но так, что его потом можно открыть и снова увидеть все слои по отдельности и вносить изменения.

Как открыть слой Smart Object в фотошопе

Очень полезная вещь, я пользуюсь ей постоянно. Еще такие смарт объекты всегда присутствуют в разных psd мокапах (mockup), которых куча бесплатно есть в интернете — для презентации своих работ.

Например, если открыть смарт объект слоя с ноутбуком на примере, можно будет увидеть все слои, из которых он нарисован, а также открыть еще один смарт объект (экран) — слой с надписью Replace Me — и легко вставить в экран ноута свой макет, например. Я вставила экран со своим адресом блога.

Как открыть слой Smart Object в фотошопе

Использование Layer Comps для легкого переключения между вариантами дизайна

Многие дизайнеры не знают об этой функции, но она может быть невероятно полезной.

Иногда вам нужно будет показать несколько вариантов дизайна заказчику (например, в разной цветовой схеме). Вам нужно будет легко переключиться между ними. Знаете, это как поставить рядом и сравнивать, какой лучше. Так вот, примерно это у вас получится делать одним щелчком с помощью Layer Comps, вместо того, чтобы делать 100500 кликов по разным слоям.

В главном верхнем меню откройте Window — Layer Comps. У вас откроется новая панель. Представим, что у нас 2 варианта страницы — в синем цвете и в розовом. Нам нужно легко переключаться между вариантами.

Использование Layer Comps в фотошопе

Сначала обозначим, что исходный вариант — синий. На панели Layer Comps кликнем иконку нового слоя Layer Comp и назовем его Blue.

Использование Layer Comps

Теперь нам нужно собрать в кучу второй вариант — в розовом цвете. Для этого включаем вместо слоя с синим ipad слой с розовым. Затем я создаю копию слоя с верхней синей полосой и делаю этот слой розовым. Точно так же копирую слои заголовка и т.д. Т.е. на все элементы, которые подвергаются изменениям у нас по 2 слоя, просто предыдущие — скрываем (отключаем глаз).

Когда у меня остались включены все слои для варианта с розовым цветом (а синие — отключены), я создаю новый слой на панели Layer Comps и называю его Pink.

Использование Layer Comps

Все, теперь можно в один клик переключаться между двумя вариантами цветовой схемы на панели Layer Comps. Нужные слои сами будут включаться и отключаться.

Использование Layer Comps пример

Ну вот, пожалуй, и все, что я хотела рассказать вам о слоях в фотошопе. Без воды, с примерами, так, чтобы было просто и понятно. Насколько это у меня получилось — решать вам с помощью лайков ниже :)

 

---

The End

Юлия Вильчинская

Автор и идеолог проекта. Специалист по продающему дизайну и упаковке бизнеса в интернете

видео чек-лист

Быстрый старт в веб-дизайне

внесите имя и e-mail в форму ниже и Вы Узнаете:

С чего начать и как избежать типичных ошибок на старте

Сколько можно заработать занимаясь веб-дизайном и где

Что сейчас в тренде, где искать вдохновение, как развить вкус

Как получить первые работы в портфолио и первые заказы

Я против спама. Ваши данные никогда не будут переданы 3-м лицам.

Вам также может понравиться