Fotodryg.ru — уроки фотошоп. работа со слоями в фотошоп

Фотошоп для подготовки Web-графики

Разделение изображения на отдельные части

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

Резать удобнее на отдельные части не состоящее из множества слоев, а
«плоское» изображение, содержащее один слой (в большинстве
случаев этот слой является фоновым).

Для того чтобы «склеить»
слои, следует использовать специальные команды, находящиеся в меню палитры
Слои (Layers), а также в меню Слой (Layer). К этим командам относятся:

Объединить с нижним (Merge Down) — активный слой объединяется со
слоем, расположенным под ним (накладывается на него);

Объединить видимые (Merge Visible) — объединяются все слои, видимые
в данный момент (слои, для которых на палитре Слои (Layers) установлен
символ видимости). Объединение производится в том порядке, в котором
слои расположены на палитре Слои (Layers);

Объединить все (Flatten Image) — объединяются все слои, находящиеся
в редактируемом файле. Если часть слоев невидима (отсутствует на экране),
то на экран выводится запрос о том, следует ли их отбросить или же необходимо
сохранить. Объединение производится в порядке расположения слоев.

ВНИМАНИЕ. Перед тем, как производить объединение
(«склеивание») слоев, сделайте резервную копию файла

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

СОВЕТ. Вызвать меню палитры можно при
помощи кнопки со
стрелкой, расположенной в верхнем правом углу панели.

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

Для выделения элементов в Adobe PhotoShop удобнее всего использовать
инструмент Rectangular
Marquee (Прямоугольное выделение). С его помощью можно легко выделять
прямоугольные фрагменты изображения и переносить их (через буфер обмена)
в новый файл. Этот файл затем можно сохранить в оптимальном для него формате,
подобрав параметры, обеспечивающие максимальное сжатие.

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

Готовить изображение к сохранению и регулировать параметры сжатия вы
можете вручную при помощи различных команд. Также можно воспользоваться
командой Файл > Сохранить для Web (File > Save for Web). Она позволяет
оптимизировать сжатие файла, непосредственно наблюдая за тем, как вносимые
изменения влияют на качество изображения и его размер на диске. Подробнее
эти процедуры рассматриваются в следующем уроке.

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

Рис. 7.12. Пример разметки макета

В дальнейшем вы сможете легко выделить нужную область, например при
помощи инструмента Волшебная палочка (Magic Wand).
отдельных файлов — инструмент Нож (Slice). С его помощью изображение «разрезают» на области,
которые затем можно сохранять по отдельности (при помощи команды Сохранить
для Web (Save for Web)), используя для каждой из них свои настройки
сжатия. При помощи инструмента Выбрать область (Slice Select) можно получить доступ к области после ее
создания. Это позволит вам, например, перемещать область по холсту.

Со слоями фотошоперы работают не реже, чем с эффектами

Они — основа при редактировании фотографии или рисунка. Без них 70% возможностей программы, делающих работу в фотошопе гибче, бесполезны. Нарисовать очередную деталь, улучшить четкость за счет фильтра цветового контраста, обработать задний план относительно изображенных объектов, отсечь лишнее или добавить новое — все это немыслимо. Даже обычное рисование было бы затруднительным и утомительным занятием.

Таких примеров более чем достаточно. Но, к счастью, слои есть и никуда не денутся, а значит работать с фотошопом будет легко. А где легкость, там и большой интерес. И в облегчении работы значительно помогают горячие клавиши. Спустимся ниже и узнаем об основных комбинациях.

Уроки Фотошопа

Глава №7. Слои

Создание слоя заливки в Фотошопе

Слой заливки
(fill layer) работает так же, как и корректирующий слой, за исключением того,
что содержит однотонную окраску, градиент или узор. Как и корректирующий слой,
слой заливки можно редактировать или удалять, не влияя при этом на остальные
слои (о корректирующих слоях читайте в начале главы 9 Уроков Фотошопа).

1. На палитре Layers
   (Слои) выберите слой, поверх которого должен появиться слой заливки (позднее
   его можно будет переместить).

2. Из всплывающего меню
   Create new fill or adjustment layer (Создание нового слоя заливки или
   корректирующего слоя), кнопка вызова которого расположена внизу палитры Layers
   (Слои) -см. рис. 7.40, — выберите вариант Solid Color (Однотонный
   цвет), Gradient (Градиент) или Pattern (Узор).

   Если при создании слоя
   необходимо задать его параметры, выберите команду меню Layer >
   New Fill Layer > Solid Color (Слой > Новый слой заливки
   > Однотонный цвет), Gradient (Градиент) или Pattern (Узор).
   Затем выполните любой из указанных ниже шагов: введите имя слоя; выберите
   цвет для области на палитре Layers (Слои), на которой расположены
   пиктограммы с изображением глаза и кисти/связи; выберите другое значение
   непрозрачности и режим смешивания или установите флажок Group With Previous
   Layer (Сгруппировать с предыдущим слоем), чтобы новый слой вошел в группу
   отсечения (см. главу 14, раздел «Группа отсечений»). Щелкните
   по кнопке ОК. Впоследствии все эти опции могут быть изменены.

Рис.
7.40. Палитра Layers

1. В случае однотонной
   окраски (вариант Solid Color) выберите для слоя цвет на панели Color
   Picker (Выбор цвета) и щелкните по кнопке ОК.

В случае Gradient
(Градиент) также выберите подходящий образец и укажите для него значения
параметров Style (Стиль), Angle (Угол) и Scale (Масштаб). Об опциях
Reverse (Обратить), Dither (Размыть) и Align with Layer (Выровнять
со слоем) рассказано в главе 13, раздел «Применение градиента в качестве
слоя заливки».

В случае Pattern
(Узор) выберите образец рисунка, а также масштаб в процентах (от 1 до 1000)
— см. рис. 7.41.

Рис.
7.41. Выбор опций для слоя заливки узором

По желанию.
Выполните одно из следующих действий:

• снимите флажок Link
  with Layer (Связать со слоем), чтобы узор оставался неподвижным при перемещении
  слоя;

• щелкните по кнопке
  Snap to Origin (Прикрепить к начальной точке), чтобы узор был привязан
  к текущей начальной точке линейки, то есть к точке, в которой пересекаются
  нулевые значения на вертикальной и горизонтальной линейках (см. главу 14,
  раздел «Применение эффекта Pattern Overlay»);

• щелкните по кнопке
  Create new preset (Создать новый образец), чтобы создать образец.

1. Щелкните по кнопке
   ОК.

С
помощью палитры Layers (Слои) подкор-ректируйте режим и непрозрачность
слоя заливки.

Объединение

При объединении двух фотоснимков придется немножко повозиться. Без паники, это не так сложно.

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

Сейчас у нас активна картинка с собакой, изображение природы является неактивной. Значит, мы будем перемещать изображение природы. Самый простой способ объединения осуществляется с помощью инструмента «Перемещение».

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

Объединив их в панели, можно увидеть два изображения. С каждым из них можно будет работать по отдельности. Что с ними можно будет делать, я расскажу в других уроках. А сейчас продолжим работать со слоями.

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

На основной фотке виден только контур сердца. «С чем это связано?» — спросите вы, но так и должно быть. Если скрыть основную картинку, (помните, что они легко скрываются? Стоит только нажать на глаз), то можно увидеть сам рисунок сердца.

Уроки Фотошопа

Глава №14. Дополнительные сведения о слоях

Группы отсечений в Фотошопе

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

Создание
группы отсечения

1. Щелкните по имени какого-либо
   слоя.

2. Нажав клавишу Alt,
   щелкните по линии, разделяющей имя этого слоя и имя слоя, расположенного
   непосредственно над ним (курсор примет вид двух перекрывающих друг друга кружочков)
   — см, рис. 14.65, 14.66. (Слои, отобранные для группы отсечения, должны быть
   последовательно расположены на палитре. Слои могут быть сгруппированы с набором
   слоев, но не со слоями, расположенными за его пределами).

3. По желанию. Повторите
   предыдущий шаг, чтобы добавить большее количество слоев в группу отсечения.

Имя базового
слоя будет подчеркнуто, а миниатюры других слоев в группе отсечения расположатся
с некоторым отступом.

Для
создания группы отсечения из связанных слоев просто выберите команду Layer
> Group Linked (Слой > Сгруппировать связанные) либо нажмите комбинацию
клавиш Ctrl+G.

О
том, как залить текст изображением с помощью группы отсечения, рассказано в
главе 17, раздел «Заполнение текста изображением с помощью группы отсечения».

Рис.
14.65. Создание группы отсечения

Рис.
14.66. Карта Индии, ограничивающая (отсекающая) изображение пустыни

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

Удаление
слоя из группы отсечения

При удалении
(разгруппировании) слоя из группы отсечения все сгруппированные слои, расположенные
сверху этого слоя, также будут разгруппированы.

Нажав клавишу
Alt, щелкните по линии под слоем, который вы хотите удалить из группы отсечения
(рис. 14.67). Теперь слой больше не будет иметь отступа.

Рис.
14.67. Удаление слоя из группы отсечения

Рис.
14.68. Результат выполнения команды Ungroup над группой отсечения

Можно также
щелкнуть по имени слоя, который вы хотите удалить из группы отсечения, затем
выбрать команду Layer > Ungroup (Слой > Разгруппировать) либо нажать
комбинацию клавиш Ctrl+Shift+G.

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

1. Щелкните по базовому
   слою группы.

2. Выберите команду Layer
   > Ungroup (Слой > Разгруппировать) либо нажмте комбинацию
   клавиш Ctrl+Shift+G -см. рис. 14.68.

Как настроить быстрые клавиши в Photoshop

Бывает так, что вместо одной комбинации горячих клавиш вы вслепую всё время нажимаете другую. Или часто выполняете какую-то операцию, которая требует четырёх кнопок — а хотелось бы всё-таки нажимать две. Или вашим пальцам просто не хватает растяжки для нужной комбинации. Здесь пригодится функция настройки горячих клавиш. К счастью, в Photoshop она есть.

Чтобы организовать всё под себя, зайдите во вкладку «Редактирование» и откройте «Комбинации клавиш». Эту панель также можно вызвать нашей бонусной комбинацией: Alt + Shift + Ctrl + K / Alt + Shift + Cmd + K. Затем выбирайте операции и присваивайте им нужные сочетания. Главное — потом их не забыть.

Горячие клавиши помогут вам работать быстро, но скорость — это не всё, что нужно, чтобы выдавать шедевры

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

Всему этому учат на факультете дизайна GeekUniversity.

Сентябрь — отличное время, чтобы построить далеко идущие планы и начать идти к новым целям! Если вы хотите освоить профессию мечты, тос 1 по 11 сентября 2020 г. мы дарим вам скидку 40% почти на все программы обучения GeekBrains. Успехов!

Режим наложения

От режима наложения зависит, как именно слои будут взаимодействовать между собой. Использую данную возможность Фотошоп можно получить интересные и нужные эффекты. Режимами наложения часто пользуются при ретушировании фотографии. Так например, с помощью режима «перекрытие» (Overlay) можно детализировать картинку, а «линейный свет» (Linear light) используется для осветления или затемнения. Режимы наложения с помощью горизонтальных линий делятся на шесть групп:

1. Основные (Basic).
2. Затемняющие (Darken).
3. Освещающие (Lighten).
4. Увеличивающие контраст (Contrast).
5. Сравнительные (Comparative).
6. Компонентные (HSL).

Коррекция изображений

• Повернуть на 15 градусов — Ctrl + T + Shift + колёсико мыши / Cmd + T + Shift + колёсико мыши.
• Обесцветить выделенную область или слой — Shift + Ctrl + U / Shift + Cmd + U.
• Залить — Shift + F5.
• Обрезать — использовать инструмент «Рамка» + Enter.
• Инвертировать изображение (отразить зеркально) — Shift + Ctrl + I / Shift + Cmd + I.
• Переключить режим прозрачности — «/».
• Перейти в режим свободного трансформирования — Ctrl + T / Cmd + T.
• Создать или отменить обтравочную маску — Ctrl + Alt + G / Cmd + Opt + G.
• Повернуть холст — R.
• Открыть окно «Кривые» — Ctrl + M / Cmd + M.
• Открыть окно «Уточнить край» — Ctrl + Alt + R / Cmd + Opt + R.
• Открыть окно «Цветовой тон» — Ctrl + U / Cmd + U.
• Открыть окно «Уровни» — Ctrl + L / Cmd + L.
• Открыть окно «Цветовой баланс» — Ctrl + B / Cmd + B.
• Применить «Автотон» — Shift + Ctrl + L / Shift + Cmd + L.
• Применить «Автоконтраст» — Alt + Shift + Ctrl + L / Opt + Shift + Cmd + L.
• Применить автоматическую цветовую коррекцию — Shift + Ctrl + B / Shift + Cmd + B.
• Переключиться из стандартного режима в режим «Быстрая маска» — Q.
• Переключить цвет холста вперёд — «пробел» + F.
• Переключить цвет холста назад — «пробел» + Shift + F.

Закрепление слоев

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

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

Итак, значение кнопок:

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

Сохранить цвета пикселов. Не позволяет совершать какие-либо операции, только перемещать с помощью инструмента «Перемещение». Кнопка выглядит как инструмент «Кисть».

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

Сохранить все. Используйте этот вариант, чтобы предотвратить редактирование или перемещение. Этот тип — вещь серьезная, поэтому значок выглядит как черный висячий замок.

Подробнее о закреплении слоев

Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!

Связывание слоев

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

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

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

Подробнее о связывании слоев

Как сделать прозрачный слой

Большинство новичков интерисует, как сделать некий элемент дизайна прозрачным? Эти настройки находятся в верхней части панели слоев — Opacity

иFill . Обе настройки делают слой прозрачным. На первый взгляд не понятна разница между ними. Тем не менее она есть.

• Opacity — убирает видимость всего слоя целиком.
• Fill — убирает видимость только заливочного содержания слоя, но оставляет видимым все остальное.

Пока мы имеем дело с обычным слоем, вот это «все остальное», что не убирает Fill

, нас никак не волнует. ИспользоватьFill нужно только тогда, когда мы хотим уменьшить видимость слоя, но не трогать эффекты стиля слоя, если они есть. Во всех остальных случаях нужно пользоватьсяOpacity . Подробнее о различияхOpacity иFill можно прочитать в статье

Интересная деталь: кажется, если Opacity

иFill поставить по 50% слой должен исчезнуть. Ведь каждая настройка забрала у него половину видимости. Но вместе эти настройки работают иначе. Вначале мы выставляем 50% от одной из настроекOpacity илиFill . Это уберет 50% абсолютной видимости. Следующая настройка уберет 50% от уже убранных 50%. То есть 25%. Таким образомOpacity 50% иFill 50% равняются совокупным 75% невидимости.

Объединение в группы

Вот это очень интересный способ. Суть его заключается в том, что вы создаете в панели отельную папку, после чего закидываете туда определенные по вашему мнению слои. Например, если вы рисуете человека, то можете создать группу «лицо», а внутри создать или переместить из вне рисунки типа «глаза», «рот», «нос» и т.д. Суть ясна, я надеюсь?

Давайте разберемся, в чем состоит удобство того чтобы объединить слои в фотошопе в группы:

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

Давайте попробуем. Я выделяю всех имеющихся птиц на панели (орел, альбатрос и аист), затем нажимаю на на них правой кнопкой мыши и выбираю «Группа из слоев». После этого вам предложат назвать как-нибудь группу. назовем ее «Птицы». Также можно объединить их в группу с помощью комбинации горячих клавиш CTRL+G. Суть такая же: сначала выделяете, а потом жмете на клавиши.

После этого вы увидите, что в панели появилась папка (группа) «Птицы», и если нажать на маленькую стрелочку, то группа раскроется и вы увидите все, что в ней есть.

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

Если вы хотите работать со всей группой одновременно (увеличить, уменьшить, наложить фильтры и т.д.), то выделите саму папку левой кнопкой мыши. После этого вся группа будет в вашем распоряжении. А если вы хотите работать с отдельным слоем, то раскройте группу и выделите конкретно то, что вам нужно. Всё очень просто.

Ну а чтобы убрать сори из группы, выделите папку, нажмите правую кнопку мыши и выберете «Разгруппировать слои». Очень удобно, правда?

Как сгруппировать слои?

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

и нажмитеCTRL+G . В любой векторной программе этот шорткат группирует объекты в один блок. В Фотошопе этот шорткат создает специальную папку и складывает все слои в него.

Пустую папку можно создать и из панели слоев. Для этого нужно кликнуть по иконке папки. А слои перетащить в неё вручную. Чтобы разгруппировать слои нажмите CTRL+SHIFT+G

илиLayer > Ungroup Layers. При удалении группы Фотошоп интересуется, что именно нужно удалить? Группу и содержание или только Группу?

Ну и, конечно, ALT + клик

по иконке группы вызывает диалоговое окно группы, которое врядли вам когда-либо понадобится.

Волшебная панель

Начав работать всё поймете, иначе этот процесс не назовешь, как волшебство. Именно с ней мы будем сегодня взаимодействовать. Если вы вдруг забыли, как она выглядит, не переживайте, я вам напомню. Эту панель можно открепить или закрепить, чтобы было удобнее для вас.

Внимательно смотрим на картинку. Не бойтесь большого количества инструментов, я вам всё подробно расскажу и покажу.

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