Основы работы в панели слоёв
В предыдущем материале мы вкратце рассмотрели, что такое слои и как они облегчают работу в Photoshop. Но прежде чем мы сможем приступить к их полноценному использованию, мы должны получить некоторые необходимые навыки по работе в «управляющем центре» слоёв — Панели слоёв (Layers panel).
В Панели слоёв (в более ранних версиях Фотошоп называемая палитрой, Layers palette) мы храним и выполняем все задачи, связанные со слоями, добавляем и удаляем слои, добавляем к простым слоям слой-маски и корректирующие слои, изменяем режимы наложения, включаем и отключаем видимость в документе, переименовываем, группируем, и делаем множество других операций, связанных со слоями.
Так как это одна из наиболее часто используемых панелей во всех Photoshop, Adobe настроила систему так, что эта панель автоматически открывается каждый раз при запуске программы.
По умолчанию, эта панель находится в правой нижней части экрана. Здесь я использую Photoshop CS6, но, независимо от того, какую версию программы вы используете, вы сможете найти панель слоёв на том же месте:
Если, по какой-то причине, после запуска программы панель слоёв не появилась на экране, вы можете включить её, пройдя по вкладке главного меню Окно —> Слои ( Window —> Layers) или воспользоваться горячей клавишей F7.
Итак, открываем изображение в Фотошопе. Даже если я не сделал никаких действий с изображением, а только открыл его, панель слоёв уже дает нам некоторую информацию. Давайте внимательнее посмотрим на неё (справа я привожу вид панели в версиях CS5 и ниже):
Содержание
Имя панели
Прежде всего, информацию о том, что у нас открыта именно панель слоёв, а не какая-либо другая, нам даёт название вкладки в верхней части панели:
Вы, возможно, заметили, что рядом с Панелью слоёв имеются две другие вкладки — Каналы (Channels) и Контуры (Paths) — они сейчас не активные и отображены чёрным (в ранних версиях — серым) цветом.
Это две другие панели, которые сгруппированы с Панелью слоёв. В Photoshop так много панелей, что невозможно одновременно разместить их все в окне программы так, чтобы ещё оставалось место для работы с изображением, так что Adobe решила сгруппировать некоторые панели вместе для экономии места. Чтобы переключиться на другую панель в группе, просто нажмите на название вкладки в панели.
Не позволяйте тому обстоятельству, что Панель слоёв сгруппирована с этими двумя другими, сбить вас с толку. Каналы (Channels) и Контуры (Paths) не имеют ничего общего с Панелью слоёв!
Отображение слоёв в Панели
Каждый раз, когда мы открываем новое изображение в Photoshop, изображение открывается в собственном документе и помещается на один слой.
Photoshop отображает слои документа в Панели слоёв в виде строк, причем каждый слой имеет свою строку. В строке содержится информация о слое. Сейчас у меня только один слой в документе, поэтому в панели отображается только одна строка, но с добавлением дополнительных слоёв появятся и другие строки:
Имя слоя
Photoshop помещает новое изображение на слой с именем «Фон» (Background). Он так называется, потому что служит фоном для всего документа. Имя каждого слоя отображается в своей строке. Фоновый слой является специальным типом слоя в Photoshop, подробнее его мы рассмотрим в следующем материале.
Миниатюра слоя (миниатюра предпосмотра)
Слева от названия слоя находится миниатюрное изображение слоя, называемое «миниатюрой слоя» (Layer Thumbnail), т.
к. она показывает небольшое превью того, что в данный момент находится на этом конкретном слое. В моем случае, миниатюра показывает мне, что фоновый слой содержит полное изображение.
Размер миниатюр можно менять, либо попросту отключить, но для этого требуется создать ещё один слой, кроме фонового, либо изменить фоновый слой на обычный.
Для изменения или отключения миниатюр кликните в поле миниатюры правой клавишей мыши и выберите соответствующую строку, на рис. обведены красным (в англ. интерфейсе это строки No Thumbnails, Small Thumbnails, Medium Thumbnails, Large Thumbnails соответственно):
Добавление нового слоя
Чтобы добавить новый слой в документ, нажмите на значок «Создать новый слой» (Create a New Layer), расположенный внизу палитры слоёв:
Новый слой появляется в панели прямо над фоновым слоем. Photoshop автоматически именует новые слои. В этом случае, он назвал слой «Слой 1» (Layer 1). Обратите внимание, что у теперь нас в панели слоёв находятся две строки, каждая из которых представляет свой отдельный слой:
Если я снова нажму на значок «Создать новый слой», Photoshop добавит ещё один новый слой в документе, на этот раз назвав его «Слой 2» (Layer 2), и теперь мы имеем три строки, каждая из которых содержит один из трех слоёв в документе:
Также, слои можно создавать с помощью комбинаций горячих клавиш.
Перемещение слоёв
Мы можем переместить слои выше и ниже относительно друг друга, просто перетаскивая их помощью зажатой левой клавиши мыши. Сейчас «Слой 2» находится выше «Слой 1», но я могу переместить его ниже «Слоя 1», нажав и удерживая левую клавишу мыши на строке со «Слой 2», потяну слой вниз до тех пор, пока горизонтальная черта между слоями не подсветится. Обратите внимание, подсвеченную черту я обвёл жёлтым, а неподсвеченная (в обычном состоянии) обведена зелёным:
Когда разделительная полоса подсветится, отпустите клавишу мыши, и слой займёт новую позицию:
Единственное, что не можем перемещать панели слоёв, это фоновый слой. Мы также не можем помещать другие слои ниже фонового слоя. Все остальные слои могут быть перемещены выше или ниже по мере необходимости.
Активный слой
Вы, возможно, заметили, что, когда в моем документе был только один фоновый слой, он был выделен фиолетовым (в версях ниже CS6 — синим) цветом в панелие слоёв.
Потом, когда я добавил «Слой 1, выделенным стал именно он. А с данный момент «Слой 2» является выделенным. Когда слой выделен, это означает, что в настоящее время он является активным. Все действия, которые мы производим в документе, осуществляются на активном слое. Каждый раз, когда мы добавляем новый слой, Photoshop автоматически делает его активным, но мы можем изменить вручную то, какой слой является активным, просто кликнув по нужному. Здесь я сделаю «Слой 1» активный, нажав на него, и мы видим, что он выделился цветом. На всякий случай, на рисунке справа я привожу вид панели в версиях Photoshop CS5 и ниже:
Удаление слоя
Чтобы удалить слой, просто нажмите на него левой клавишей мыши и, удерживая клавишу нажатой, перетащите его вниз на значок Корзины в нижней правой части панели. Отпустите кнопку мыши, когда вы наведёте курсор на значок. На рисунке я удаляю «Слой 1»:
Есть и другой способ удаления отдельных слоёв. Выделите нужный слой и нажмите клавишу Delete на клавиатуре.
Таким образом я удалю «Слой 2».
Теперь в документе остался только один слой, фоновый:
Копирование слоя
Чтобы скопировать слой, щелкните на нем и, удерживая клавишу мыши нажатой, перетащите его вниз на значок «Создать новый слой». На рисунке я делаю копию фоновый слоя:
Когда вы наведёте курсор на значок и затем отпустите кнопку мыши, копия слоя появится над оригиналом. В моем случае, Photoshop сделал копию моего фонового слоя и назвал его «Фон копия» (Background copy). Обратите внимание на то, что после данных действий этот новый слой стал активным:
Сейчас я применю пару фильтров размытия в при активном «Фон копия», просто для того, чтобы изменить вид изображения. Вот как стало выглядеть изображение в моём рабочем документе после применения фильтров:
Можно подумать, что я размыл все изображение, но если мы посмотрим на Панель слоёв, то увидим, что это не так. Так как, когда я применял фильтры размытия, был активным слой «Фон копия», то изменения коснулись только этого слоя.
Мы видим, что размытое изображение размыто только на слое «Фон копия», а «Фон» затронут не был:
Иконка видимости слоя
Если я хочу снова в документе увидеть оригинальную фотографию, я могу просто отключить слой с размытием, нажав на значок видимости слоя. Когда в окне отображается иконка глаза, это означает, что слой в документе является видимым. Если нажать на иконку, то она скроется, а вместе с ней скроется и слой, вместо иконки будет пустой квадрат. Для включения слоя достаточно кликнуть по этому пустому квадрату:
Переименование слоя
Как мы уже видели, Photoshop при создании или копировании автоматически именует слои, но имена он дает им довольно общие и ничего не значащие, такие, как «Слой 1» и «Фон копия», такие имена не могут быть полезны для пользователя. Когда у нас есть всего несколько слоёв в документе, названия не очень важны, но, когда мы работаем с 10-ю, 20-ю, сотней и более слоёв, гораздо проще, чтобы слои имели осмысленные имена.
К счастью, Photoshop, позволяет легко переименовать слой.
Просто дважды щелкните непосредственно на имени слоя в палитре, затем введите новое имя. Я изменю имя «Фон копия» на «Blur». Когда вы закончите вводить имя, щёлкните мышкой в любом месте палитры или нажмите клавишу клавиатуры Enter, чтобы принять изменённое имя:
О добавлении масок, корректирующих слоёв и т.п. мы поговорим во второй части этого материала.
Как сделать иконки для социальных сетей в фотошопе | Pixelbox.ru — Дополнения и уроки по Фотошопу
Содержание
- Шаг 15
- Шаг 16
- Шаг 17
- Шаг 18
- Финальные результаты:
В этом уроке вы узнаете, как создать плоские флэт иконки социальных сетей.
То, что вы будете создавать:
Создавать плоские иконки мы начнем с фона, потом добавим иконкам эффекты, чтобы придать им оригинальность, далее нарисуем длинные тени. Для повторения урока вам понадобится Photoshop CS3 или более поздняя версия.
Ресурсы:
- Шрифт 1 – http://fontawesome.
io/cheatsheet/ - Шрифт 2 – http://fontawesome.io/
io/cheatsheet/
Шаг 1
Создайте новый файл (Ctrl + N) размером 500 × 400 пикселей.
Создайте новую группу (CTRL+G) и назовите её «Фон».
Шаг 2
Заполните фон цветом # e7e9ea с помощью инструмента Заливка (Bucket Tool).
Шаг 3
Чтобы добавить больше эффектов на задний план, мы добавим градиент. Нажмите на иконку Корректирующий слой (Adjustment Layer) и выберите Градиент (Gradient), используйте следующие настройки:
Режим наложения слоя Мягкий свет (Soft Light) | Непрозрачность: 25%
Шаг 4
Создайте новую группу и назовите её «symbols».
Шаг 5
Прежде чем начать работу, нам нужно настроить меню Линейки и Сетки (Rulers and Grids). Перейдите в меню Вид-Линейки (View–Rulers) и Вид-Показать-Сетки (View–Show–Grids). Вот мои настройки дляЛинеек и Сеток (их можно открыть, перейдя в Редактирование-Настройки (Edit-Preference)
Чтобы создать Направляющую линию, нужно просто щелкнуть и перетащить её из линейки. Для создания вертикальной направляющей перетаскивайте из вертикальной линейки и наоборот. Вот как я разделил холст (каждый значок равен 50 × 50 пикселей и расстояние между каждым значком 25 пикселей):
Шаг 6
В этом уроке мы работаем с помощью шрифта Awesome, вы можете добавить настраиваемые иконки для вашего сайта.
Как правило, это делается путем размещения CSS шрифта на ваш сайт, но так как мы работаем с Photoshop, нам нужно скопировать каждый значок, который вы хотите использовать из шпаргалки. Зайдите на страницу, выберите значок, который вы хотели бы нарисовать. Я использовал иконки для следующих (социальные сети) сайтов: Twitter; facebook; Tumblr; Google+;Instagram; YouTube; Twitch; Dropbox; Deviantart; Pinterest; Skype; Feed.
Шаг 7
После того как вы нашли значок, который хотели бы использовать, скопируйте его (Выделите ее затем щелкните правой кнопкой мыши-Копировать)
Затем вернитесь в Photoshop и выберите инструмент Текст (
Теперь вставьте значок, который вы только что скопировали. (Щелкните правой кнопкой мыши-Вставить)
Шаг 8
Повторите предыдущий шаг, пока не вставите все значки, которые вы хотели бы использовать.
Шаг 9
Создайте новую группу и переименуйте её в «icon bg», поместите группу ниже группы «symbols».
Шаг 10
Создайте новый слой и поместите его в группу, созданную в предыдущем шаге. Я переименовал слой в «icon bg».
Шаг 11
Используя инструмент Прямоугольник с округленными углами (Rectangular Circle Shape Tool) (расположенный на панели инструментов ниже инструмента Текст (Text Tool)) я создал фон иконок,
Вот все цвета, которые я использовал:
Twitter: # 6bd1f4;
Facebook: # 5a93cb;
Tumblr: # 3c6a9c;
Google +:#e44940;
Instagram:#9bd29d;
Youtube:#f4504c;
Twitch:#a96db6;
Dropbox:#81d5ed
Deviantart:#6e8e61;
Pinterest:#f25f5f;
Skype:#67d5f4;
Feed:#e9951d;
Вы можете использовать эти цвета, а можете использовать цвета на свое усмотрение – так работа приобретет оригинальность.
Если вам не нравится, как выглядят прямоугольники с округленными краями, вы можете выбрать другую форму, например, квадрат или круг. Чтобы сделать идеальный круг или квадрат, не забудьте удерживатьклавишу SHIFT в момент их создания.
Шаг 12
Если вы довольны результатом на данном этапе, вы можете идти дальше, но если хотите придать живости иконкам, давайте продолжим улучшения. Начнем со
Шаг 13
Повторите предыдущий шаг с остальными значками. Для того, чтобы сделать вашу работу намного проще, щелкните правой кнопкой мыши на слое-Копировать стиль стоя (-Copy Layer Style). Затем выберите остальные слои с иконками, щелкните правой кнопкой мыши-Вставить стиль слоя (-Paste Layer Style)
Шаг 14
Теперь добавим внутреннюю тень на задний план каждого значка. Открываем группу «icons bg», выбираем слой с иконкой, нажимаем на значок Fx-Внутренняя тень (Fx-Inner Shadow). Используйте следующие параметры:
Шаг 15
Создайте новый слой и назовите его «Gloss Effect». Измените цвет переднего плана на #ffffff; и при помощи инструмента Прямоугольная область (Rectangular Marquee Tool)
Затем измените режим наложения на Мягкий свет (Soft Ligh), снизьте непрозрачность (Opacity) слоя до 20%, а заливку (Fill) до 80%.
Шаг 16
Отключите видимость слоя «Gloss Effect».
Создайте новый слой и назовите его «Long Shadow». Этот шаг является немного сложнее по сравнению с остальными эффектами. Поместите новый слой ниже слоя «Gloss Effect».
Шаг 17
Возьмите инструмент Полигональное лассо (Polygonal Lasso Tool) и начните создавать прямоугольную тень, касаясь ребра иконки только с правой нижней стороны, затем сделайте диагональную линию, пока она не достигнет нижнего правого края фона значка, сделайте прямую линию, пока она не достигнет центра фона, затем соедините линии. На изображении вы можете рассмотреть более наглядно, как рисовать длинную тень.
Шаг 18
Последний шаг! Уменьшите непрозрачность (Opacity) слоя с тенью до 10%, и заливку (Fill) до 0%.
Теперь Нажмите на иконку Fx и выберите 
Используйте следующие параметры:
Теперь выберите Наложение градиента (Gradient Overlay) и используйте эти настройки:
1549 иконок Photoshop — бесплатно в SVG, PNG, ICO
Получите неограниченный доступ к более чем 6,2 миллионам активов
Получите неограниченное количество загрузокAdobe Значок
Adobe Photoshop Значок
Adobe Photoshop Значок
AdobeXD Значок
Фотошоп Значок
Adobe Illustrator Значок
Файл Значок
Файл Значок
Фотошоп Значок
Фотошоп Значок
Фотошоп Значок
PSD Значок
Фотошоп Значок
Файл Значок
Фильтр Значок
Файл Значок
Adobe Фотошоп Копия Значок
Исправление Adobe Photoshop Значок
Файл Adobe Photoshop Значок
Тип Значок
Тип Значок
Тип Значок
Фотошоп Значок
Фотошоп Значок
Фотошоп Значок
Adobe Фотошоп Экспресс Значок
Фотошоп Значок
Adobe Значок
Adobe Значок
PSD Значок
PSD Значок
Фотошоп Значок
PSD Значок
Кш Значок
Фотошоп Значок
Файл фотошопа Значок
Изучайте графику Значок
Пс Значок
Adobe Photoshop Значок
Файл Значок
Psd-файл Значок
Csh-файл Значок
Эскиз Adobe Фотошоп Значок
Adobe Photoshop Значок
Адоб Фотошоп Микс Значок
Папка фотошопа Значок
Adobe Photoshop Элементы Про Значок
Фотошоп Значок
Adobe Photoshop Значок
Файл Значок
Безье Значок
Файл Значок
Файл Значок
Adobe Photoshop Значок
Adobe Photoshop Значок
Файл Значок
Файл Значок
Фотошоп Значок
Инструмент «Перо» Значок
Проектирование Значок
Тип Значок
Пс Значок
Слои Значок
Файл Значок
Тип Значок
Тип Значок
Иллюстрация Значок
Инструмент «Перо» Значок
Дизайн веб-сайта Значок
Иллюстрация Значок
Иллюстрация Значок
Инструмент Безье Значок
Иллюстрация Значок
Расширять Значок
Точечная восстанавливающая кисть Значок
Дизайн Значок
Пс Значок
Цветовой баланс Значок
Авторские права Значок
Шрифт Значок
Psd-файл Значок
Папка Adobe Photoshop Значок
Adobe Лайтрум Значок
Adobe Значок
Adobe Значок
Инкскейп Значок
Фотошоп Значок
Пс Значок
Дизайн Значок
Фокус Значок
Графика Значок
Ручка Значок
PSD Значок
Ps-формат Значок
Пс Значок
Безье Значок
Искусство Значок
Пс Значок
Безье Значок
Пс Значок
Дизайн Значок
Редактирование изображений Значок
Безье Значок
Пс Значок
Проектирование Значок
Пс Значок
Фотошоп Значок
Проектирование Значок
Графический дизайн Значок
Инструмент выделения Значок
Визуальный эффект Значок
Цифровое произведение искусства Значок
Изучайте графику Значок
Пс Значок
Иллюстрация Значок
Adobe Photoshop Значок
Фотошоп Значок
Инструмент Безье Значок
Волшебная палочка Значок
Графическое программное обеспечение Значок
Индивидуальные иконки Stream Deck Photoshop для сочетаний клавиш — sideshowfx
34,99 $
Добавить в корзину
Узнать больше
Этот набор содержит более 1000 пользовательских значков для Photoshop.
Включает обширные предварительно созданные профили Stream Deck, включающие более 350 запрограммированных клавиш быстрого доступа (XL) и более 750 предварительно запрограммированных образцов, разделенных на 9цветовые темы.
Английский (QWERTY) или немецкий (QWERTZ) Требуется раскладка клавиатуры.
34,99 $
Добавить в корзину
Узнать больше
Дайте волю творчеству! Ускорьтесь и оставьте больше времени для творчества, работая в Photoshop с помощью устройства Stream Deck Plus и этого пакета из 9 профилей, запрограммированных для различных художественных рабочих процессов. Благодаря 286 запрограммированным сочетаниям клавиш для Photoshop и 56 запрограммированным поворотным дискам вы получите еще более рациональный творческий опыт, чем когда-либо прежде.
Требуется английская раскладка клавиатуры.
34,99 $
Добавить в корзину
Узнать больше
Более 1200 значков, обозначающих почти все команды, инструменты и функции приложения, которые помогут вам создать собственные пользовательские профили.
Включает расширенные профили для устройств Loupedeck CT и Loupedeck Live (как для Mac, так и для Win), включающие 593 полностью запрограммированных и сопоставленных действия со значками и ярлыками, а также еще 613 действий, помеченных значками (но без ярлыков).
34,99 $
Добавить в корзину
Узнать больше
Поднимитесь на линию Pro. Используйте Touch Portal на своем планшете во время работы в Photoshop, чтобы увеличить скорость и оставить больше времени для творчества. С более чем 900 пользовательских значков для Photoshop 2021 и более ранних версий, этот набор включает обширные предварительно созданные профили Touch Portal, включающие более 300 запрограммированных сочетаний клавиш, а также более 750 предварительно запрограммированных образцов, разделенных на 9 цветовых тем.
Требуется английская раскладка клавиатуры.
19,99 $
Добавить в корзину
Узнать больше
Более 900 пользовательских значков для Photoshop 2021, а также Stream Deck и Touch Portal.
готовых начальных профилей, содержащих от 158 до 215 запрограммированных клавиш, которые можно легко изменить в соответствии с вашим рабочим процессом.
26,99 $
Добавить в корзину
Узнать больше
Являясь частью нашей серии значков «Дизайнер», этот набор содержит все 900+ значков, доступных в нашем обычном наборе, но с 4 различными стилями в металлической теме. В пакет включены предварительно созданные профили Stream Deck, которые можно легко модифицируется в соответствии с вашим рабочим процессом.
0005
Требуется английская раскладка клавиатуры.
26,99 $
Добавить в корзину
Узнать больше
Являясь частью нашей серии значков «Дизайнер», этот пакет содержит все более 900 значков, доступных в нашем обычном наборе, но с 4 различными стилями в теме Arcade. В пакет включены предварительно созданные профили Stream Deck, которые можно легко модифицируется в соответствии с вашим рабочим процессом.0005
Требуется английская раскладка клавиатуры.
26,99 $
Добавить в корзину
Узнать больше
Являясь частью нашей серии значков «Дизайнер», этот пакет содержит все 900+ значков, доступных в нашем обычном пакете, но с 4 различными стилями в нашей теме «Элегантность».
