Подробный гайд по слоям в Photoshop: что это, зачем нужны, как пользоваться | Урок | Фото, видео, оптика
Слой в Photoshop — это как стопка прозрачных плёнок, которые накладываются одна на другую. Одна плёнка тонирует в определённый цвет, другая — поднимает контраст, третья меняет резкость, четвёртая — добавляет на фотографию новый объект. В результате получается изображение, состоящее из наложенных друг на друга фрагментов. Похоже на детскую 3D книжку, в которой из объёмных кустов выскакивает картонный заяц.
Рассказываем, что такое такое слой в фотошопе, объясняем, как пользоваться слоями, отвечаем на самые важные вопросы в формате блица, а в конце даём шпаргалку с горячими клавишами.
Как открыть слои в Photoshop?
Как сделать новый слой в Photoshop?
Из чего состоит слой?
Что такое слой-маска в Photoshop?
Как добавить к слою маску?
Что такое корректирующий слой в Photoshop?
Что такое Фоновый слой / Background?
Как переименовать слой?
Как выделить слои в Photoshop?
Как выделить несколько слоёв в Photoshop?
Как объединить слои в Photoshop?
Как скопировать слой?
Как удалить слой?
Как изменить цвет слоя в Photoshop?
Как сохранить слои в Photoshop?
Как вставить слой в Photoshop?
Как изменить размер слоя в Photoshop?
Как объединить слои в группы?
Слои в Photoshop — список горячих клавиш
Без них невероятно тяжело качественно и быстро обработать фотографию / Иллюстрация: Елизавета Чечевица, Фотосклад.ЭкспертКак открыть слои в Photoshop?
Работать со слоями без палитры Слои / Layers гораздо дольше. Найдите её в командном меню Окно / Windows — Слои / Layers. Альтернатива — клавиша F7.
Так как палитра нужна постоянно, окошко лучше прикрепить на рабочее пространство справа.
Достаточно подхватить палитру и сдвинуть вбок, пока не появится синяя полоска / Иллюстрация автораКак сделать новый слой в Photoshop?
Новый слой в Photoshop можно сделать тремя способами:
1. Внизу на панели Слои / Layers нажать на квадратик с плюсом.
2. В командной строке сверху: Слой / Layers — Новый/ New — Слой / Layers.
3. Нажать сочетание Shift + Ctrl + N. Откроется окно, где слой можно назвать, выбрать цвет и режим наложения.
Кнопка, позволяющая в один клик создать новый слой / Иллюстрация автораРемарка: в этом меню цвет лишь подсвечивает слой, а не заливается им.
Это помогает систематизировать их для удобства, если вы работаете с большим количеством слоёв.
Из чего состоит слой?
Третий и четвёртый пункты необязательны. Они есть, если вы создали корректирующий слой или добавили к слою маску / Иллюстрация автораЕсли смотреть слева направо, слой состоит из:
- Значка видимости. Кликните на него, чтобы слой стал невидимым. Удобно, если нужно посмотреть до-после.
- Превью слоя или настроек слоя, если вы работаете с корректирующими слоями.
- Скрепки, если у слоя есть слой-маска. Она делает так, что слой и маска передвигаются и трансформируются одновременно, если нужно изменить размер слоя.
- Слоя маски. Это чёрный, белый или чёрно-белый прямоугольник. Если кликнуть на него, вы переключитесь на работу с маской.
- Имени слоя.
Что такое слой-маска в Photoshop?
Маска — трафарет, рисуя по которому можно стереть коррекцию с определённой области. Например, перекрасить только платье/глаза/волосы модели, не трогая всё остальное.
Подробно о том, что такое маски и как ими пользоваться, читайте в тексте.
Как добавить к слою маску?
Чтобы добавить к слою маску, нажмите на чёрный прямоугольник с кругом в центре. Либо зайдите в командное меню Слой / Layers — Слой-маска / Layer Mask — Показать всё / Reveal All.
Корректирующие слои сразу создаются с масками — для них делать её дополнительно не нужно / Иллюстрация автораЧто такое корректирующий слой в Photoshop?
Корректирующие слои — группа слоёв, которые меняют изображение под собой. Они могут поднимать контраст, затемнять, осветлять, тонировать, перекрашивать отдельные части фотографии, делать картинку чёрно-белой.
Они не содержат пиксели, только настройки. Из-за этого они мало весят, не утяжеляя картинку, а также позволяют в любой момент изменить свои настройки. Достаточно дважды кликнуть на иконку слоя, которая находится между значком глаза и скрепкой.
Что такое Фоновый слой / Background?
Фоновый слой — первый слой, который появляется, когда вы открываете фотографию или создаёте новый документ.
Рядом с ним стоит иконка замка. Она запрещает стирать со слоя пиксели, менять непрозрачность, перемещать его, изменять размер, добавлять в группу, ставить под ним слои.
Кликните на замок. Она тут же исчезнет, а фоновый слой станет обычным / Иллюстрация автораКак переименовать слой?
Чтобы переименовать слой в Photoshop, кликните по его названию два раза. Альтернатива: Слой / Layer — Переименовать Слой / Rename Layer.
Как выделить слои в Photoshop?
Чтобы начать работать со слоем, его нужно выбрать. Для этого кликните по нему левой кнопкой мыши.
Следите за тем, куда нажимаете: если нажать на маску, то перейдёте в режим работы с ней, а если на превью/иконку слоя, то перейдёте в работу со слоем, либо в параметры корректирующего слоя.
Как выделить несколько слоёв в Photoshop?
Чтобы выделить слои, есть два способа:
1. Чтобы выделить несколько слоёв подряд: нажмите на первый слой, зажмите Shift и кликните на последний слой.
2. Чтобы выделить несколько слоёв вразнобой: нажмите на первый нужный слой, зажмите Ctrl и, не отпуская его, прокликайте остальные нужные слои.
Выделенные слои окрашены в тёмно-серый / Иллюстрация автораКак объединить слои в Photoshop?
Если нужно слить слои в один:
1. Выделите все слои, нажмите правую кнопку мыши и в появившемся списке найдите Объединить слои / Merge Layer.
2. Зайдите в командное меню Слой / Layer — Объединить видимые / Merge Layer.
3. Нажмите Shift + Ctrl + E.
Как скопировать слой?
Скопировать слой можно тремя способами:
1. Встать на слой, кликнуть правой кнопкой мыши и выбрать пункт Скопировать слой / Duplicate Layer.
2. Нажать на слой и в командной строке сверху найти Слой / Layer — Скопировать слой / Duplicate Layer.
3. Нажать сочетание горячих клавиш Ctrl + J.
Как удалить слой?
Выделите слой щелчком мыши и выберите один из вариантов:
1. Нажмите клавишу Delete на клавиатуре.
2. Подхватите слои и перенесите на значок мусорной корзины слева внизу на палитре Слои.
3. Нажмите правой кнопкой мыши и выберите Удалить слой / Delete Layer.
4. Слой / Layer — Удалить / Delete — Слой / Layer.
Как изменить цвет слоя в Photoshop?
Кликните по слою правой кнопкой мыши и выберите любой из предложенных цветов. Важно: это не заполнит слой цветом, а лишь выделит среди остальных для более простой навигации.
Так выглядят перекрашенные слои в палитре / Иллюстрация автораКак сохранить слои в Photoshop?
Если вы не доделали работу и хотите вернуться к ней позже, необходим файл, в котором сохранятся слои с настройками. Для этого нужно сохранить фотографию в специальном формате — .PSD. Он разработан Adobe, чтобы сохранять промежуточный результат работы.
Чтобы сохранить фотографию в формате .PSD:
1. Выберите команду в меню Файл / File — Сохранить как / Save as… или нажмите горячие клавиши Shift + Ctrl + S.
2. В меню сохранения выберите в выпадающем списке формат .PSD.
Как вставить слой в Photoshop?
- Если на фотографию нужно добавить ещё файл, например, при коллажировании, просто подхватите нужную картинку и переместите её в рабочее пространство нужного файла.
- Если нужно перенести слой с одной фотографии на другую, например, чтобы затонировать серию снимков в один цвет:
- Выделите все нужные слои.
- Перетащите их на название файла, куда хотите перенести слои.
Как изменить размер слоя в Photoshop?
Чтобы изменять размер слоя и двигать его, воспользуйтесь функцией Свободное трансформирование / Free Transform.
Она находится в меню Редактирование / Edit — Свободное трансформирование / Free Transform, либо активируется горячими клавишами Ctrl + T. Появится рамка, сдвигая которую можно менять размеры и местоположение слоя.
Как объединить слои в группы?
Чтобы добавить слои в группу, воспользуйтесь одним из вариантов:
1. Выделите слои и нажмите на иконку папки внизу на палитре слоёв.
2. Выберите слои и нажмите Ctrl + G.
3. Нажмите на иконку папки, чтобы создать группу, а после подхватите выбранные слои и переместите в созданную группу.
4. Выделите нужные слои и выберите команду Слой / Layer — Новый / New — Группа / Group.
Слои в Photoshop — список горячих клавиш
Список горячих клавиш есть в самой программе. Он находится в меню Окно / Window — Рабочее пространство / Workspace — Клавиатурные сокращения и меню / Keyboard Shortcuts and Menus. Мы же приводим самые важные сочетания горячих клавиш для быстрой работы со слоями.
| Команда | Горячие клавиши |
| Создать новый слой | Shift + Ctrl + N |
| Создать копию слоя | Ctrl + J |
| Создать группу | Ctrl + G |
| Расформировать группу | Shift + Ctrl + G |
| Удалить слой | Delete |
| Скрыть слой | Ctrl + < |
| Скрыть все слои, кроме одного | Alt + клик по слою, который нужно оставить |
| Переместить слой наверх | Shift + Ctrl + ] |
| Переместить слой вниз | Shift + Ctrl + [ |
| Поднять слой на 1 позицию выше | Ctrl + ] |
| Опустить слой на 1 позицию ниже | Ctrl + [ |
| Объединить слои | Ctrl + E |
| Объединить видимые слои (с включенным значком глаза) | Shift + Ctrl + E |
| Объединённая копия всех нижележащих слоёв | Shift + Ctrl + Alt + E |
Дизайн иконок в Figma | Дизайн в жизни
Обновлено: 23.
03.2021
Иконки, значки, пиктограммы – неотъемлемая часть дизайна сайтов и мобильных приложений. Они быстро объясняют пользователю смысл каждого блока. Мы часто даже не читаем надписи под иконками, потому что их визуальная часть нам и так понятна. Существуют целые направления дизайна, где занимаются именно иконками. Сегодня мы поговорим о том, откуда брать иконки для своих проектов в Figma и продолжим создавать дизайн приложения Proper Nutrition.
Получить иконки для своего дизайна можно несколькими способами. Обо всех мы поговорим в статье.
Содержание
1. Использование готовых библиотек компонентов с иконкамиСамый простой и быстрый способ – использовать то, что создали другие дизайнеры.
Если вы загляните в раздел Community, то найдете огромную библиотеку готовых решений от профессионального сообщества дизайнеров Figma. Вы так же можете стать его частью и внести свой вклад.
Здесь вы найдете не только документы с наборами иконок в едином стиле и для разных устройств, но и готовые проекты с дизайном сайтов и мобильных приложений, которые вы можете взять за основу собственного дизайна.
А также UI Kit – библиотеки готовых наборов компонентов для интерфейса, выполненных в едином стиле. Они могут включать уже разработанный дизайн кнопок, выпадающих списков, иконок, стилей заголовков и так далее. Это существенно экономит время дизайнеров.
Вы можете разработать свою библиотеку готовых компонентов, ну а пока ее нет, пользуйтесь результатами труда других авторов, которые, к слову сказать, есть как платные, так и бесплатные.
Щелкните на название понравившегося набора и напротив его названия вы найдете кнопку Duplicate. После ее нажатия, файл скопируется в ваш раздел Drafts.
Теперь откройте скопированный документ (у меня это бесплатный coolicon), и посмотрите, как организовано его содержимое.
На вкладке Layer вы увидите список фреймов, с входящими в него иконками. Каждая иконка – это компонент.
Если вы еще не узнали, что такое компонент из видео урока, который я рекомендовала посмотреть в статье «Первое знакомство с Figma», то напомню.
Компонент в Figma – это элемент дизайна, который можно использовать многократно. Например, меню приложения. Достаточно нарисовать его один раз, объединить все слои в компонент и использовать его копии для всех экранов. В случае если нужно будет внести какие-то изменения, это нужно будет сделать только с самым первым экземпляром, который будет считаться родительским. Остальные же (дочерние) изменятся автоматически.
Для того, чтобы компоненты (в данном случае иконки) можно было использовать в разных файлах, их нужно сделать публичными или, как говорят, сквозными.
Для этого в левом меню на вкладке Assets со списком всех компонентов нажмите на кнопку TeamLibrary (библиотека команды).
После этого откроется окно с названием нашего файла с иконками-компонентами, которые мы можем опубликовать, нажав на кнопку Publish и списком всех уже опубликованных (сквозных) элементов.
Но, радоваться рано.
Если вы нажмете на кнопку Publish, появится сообщение о том, что нужно создать команду, чтобы опубликовать компоненты. Когда вы создадите команду и снова вернетесь к библиотеке документа, то увидите, что ничего не изменилось. А все, потому что функция публикации компонентов доступна только в платных тарифах Figma.
Совет! Есть только один способ использовать иконки и другие компоненты сторонних дизайнеров в бесплатной версии Figma. Найдите проект, который максимально подходит по набору компонентов для вас. Дублируйте его в свои черновики и работайте прямо в нем. Создайте страницу (Page) со своим проектом, тогда все объекты из других страниц будут так же доступны для вас.
2. Использование плагинов с иконками в Figma
Второй способ — плагины, так же экономит время дизайнеров.
Плагины в Figma — это специальные расширения программы, разрабатываемые участниками профессионального сообщества дизайнеров и программистов.
Они призваны увеличить возможности Figma, чтобы сделать ее еще более удобной и популярной. Их функционал разнообразен – от визуализации графиков и создания анимации до библиотеки готовых иконок.
Для того, чтобы установить плагин выполните следующие действия:
- Вернитесь на главный экран Figma (Menu – Back to files)
- Перейдите в раздел Community, где хранится список всех плагинов и UI Kits от пользователей.
- Перейдите в раздел Plugin и найдите подходящий вариант, например, Icons8 Free Icons. Напротив его названия в найденном списке или на странице плагина нажмите клавишу Install.
Сразу произойдет установка плагина. Напротив названия появится кнопка Uninstall с помощью которой можно будет его удалить.
Теперь вернитесь к вашему документу и в пункте меню Menu — Plugins вы найдете только что установленный Icon8. Щелкните по названию и откроется диалоговое окно плагина с библиотекой иконок.
Ищите необходимые варианты и вставляйте их в свой дизайн. Лучше использовать SVG формат, но в данном плагине он доступен в платной версии. Подробнее о преимуществах SVG читайте в статье «Экспорт из Photoshop в SVG».
В других вариантах плагинов иконки в SVG формате могут быть бесплатны, так что ищите подходящий вариант.
3. Использование иконочных шрифтов в FigmaВ Figma нет готового набора иконок, но можно использовать иконочные шрифты, например, FontAwesome.
С помощью инструмента Text создайте текстовый блок во фрейме и на панели свойств в разделе Text выберите шрифт Font Awesome
Перейдите на официальный сайт шрифта Font Awesome. Выберите подходящую иконку, щелкните по ней левой клавишей мыши и скопируйте в буфер.
Затем вернитесь к вашему текстовому блоку и вставьте туда иконку. Размер иконки, ее цвет, регулируются так же на панели свойств Text.
4. Рисуем собственные иконки в Figma, пример – иконка wifi из фигурСамый трудоемкий способ – это рисовать иконки самостоятельно с помощью фигур, шейпов.
На нескольких примерах разберем, как создаются простые иконки в Figma.
Если вы хотите создавать оригинальный дизайн иконок, советую вам ознакомиться со статьей, описывающей 7 принципов дизайна иконок.
Давайте нарисуем иконку сети wifi в Figma и заодно познакомимся с особенностями работы с фигурой Ellipse
Нарисуйте эллипс размером 40х40 px, зажав клавишу shift, чтобы сохранить пропорции. Наведите на него указатель мыши, и вы увидите круглую точку arc, потянув за которую вы измените свойство sweep (развертка) и получится пайчарт.
На нем вы увидите уже две точки sweep (развертка) и start (начало угла разворота). Подберите их значения так, чтобы получился вот такой значок. Причем это сделать можно как вручную, так и на панели свойств. Потяните центральную точку вверх и получится дуга. При этом на панели свойств изменится свойство Ratio.
Теперь ниже нарисуйте еще один эллипс, так, чтобы его окружность точно входила в пространство под нашей первой дугой.
У меня получился размер 32х32 px. Используя те же самые свойства получите вторую дугу.
Повторите все тоже самое с 3-м эллипсом (у меня получился 20х20 px), но не создавайте дугу, а оставьте треугольный сегмент (Piechart).
Затем выделите все эллипсы и установите закругление краев на 1 в панели свойств.
Для того, чтобы размер иконки ограничивался его видимой частью, а не размером первоначального эллипса (40х40 px), примените к трем выделенным элементам булеву операцию Union (объединение). Более подробно о ней я писала в статье «Рисуем дизайн первой страницы приложения в Figma». В результате данной операции на панели Layer появится новый слой Union. Переименуйте его в wifi.
Для того, чтобы можно было использовать нарисованную иконку wifi во всех фреймах нашего проекта в Figma, преобразуйте его в компонент. Кратко о том, что такое компонент я писала выше и еще более подробно мы будем рассматривать это в следующих статьях.
Для этого нажмите на кнопку с ромбом на верхней панели инструментов или в контекстном меню нашей иконки выберите пункт Create Component.
Панель слоев будет выглядеть следующим образом.
Иконка готова и это будет родительский компонент, изменение которого приведет к таким же изменениям его копий.
5. Дизайн иконок для Status Bar приложения Proper NutritionТеперь вернемся к приложению Proper Nutrition и создадим иконки для Status Bar. Это будет примерный дизайн, так как у каждого девайса он свой. Нам главное, показать какое место в дизайне экранов он будет занимать.
В документе Proper Nutrition создадим новый фрейм для Iphone 8 и назовем его MainScreen. Это будет главный экран нашего простого приложения. Описание всех экранов смотри в статье «Рисуем дизайн первой страницы приложения в Figma»
Для данного фрейма зададим сетку Grid с ячейкой 8px
С помощью инструмента Shape Tool – Rectangle (R) нарисуйте белый прямоугольник по всей ширине экрана, высотой 44 px (обычная высота для status bar).
Размеры фигуры можно задать вручную на панели Design или растягивать ее, ориентируясь на цифры внизу прямоугольника.
Назовите слой status bar
Для нарисованного прямоугольника задайте ограничители Left and Right — Top.
Теперь займемся иконками. Будем использовать иконочный шрифт. В нашем случае это самый простой способ. Надпись со временем сделайте с помощью обычного текстового блока. У меня это шрифт Roboto в 13px. Для данных иконок выставите ограничители:
- Иконка батареи – Right – Top and Bottom
- Иконка wifi — Right – Top and Bottom
- Время — Left – Top and Bottom
Выровняйте иконки по центру прямоугольника status bar с помощью соответствующих кнопок на панели Design.
Выделите прямоугольник Status Bar со всеми иконками и преобразуйте их в компонент, который назовите так же Status bar.
6. Дизайн иконок для меню tab bar в приложении Proper NutritionТеперь, используя те же самые шаги создадим дизайн иконок для нижнего меню приложения.
Там будут следующие кнопки с иконками (слева направо):
- Возврат к главной странице.
- Открытие списка избранного.
- Добавление в избранное
- Поиск по рецептам
- Оставить заметку (комментарий)
Нарисуйте прямоугольник высотой 60 px, шириной во весь экран.
Над ним нарисуйте линию (Line) с цветом (stroke) — # 949494
С помощью иконочного шрифта создайте иконки «Возврат к главной странице», «Открытие списка избранного», «Поиск по рецептам», «Оставить заметку». Размер – 24px.
Для созданий кнопки «Добавление в избранное» выполите следующий порядок действий:
Нарисуйте прямоугольник ширина (W) – 48, высота (H) – 30, закругление краев — 3
Залейте его градиентом (Fill – Linear) из красного (#DA0100) в оранжевый (#DA6900), прозрачность 100% в обоих случаях.
С помощью инструмента Text напечатайте «+» по середине прямоугольника, шрифт Comfortaa, размер 24. Установите у него следующие параметры – Fixed Size и Align Centr, чтобы символ всегда оставался в центре кнопки и фиксированного размера при любом изменении ее ширины.
Выделите прямоугольник и знак «+», преобразуйте их в компонент и назовите его Button/add favoriets.
Теперь выделите все иконки и кнопку и выберите для них стиль выравнивания Tidy up, чтобы расстояние между ними стало равным.
Выделите все нарисованные иконки и элементы для status bar и преобразуйте их в компонент с названием status bar.
В этой статье мы рассмотрели 3 способа создания иконок в проектах Figma. Выбирайте тот, что является самым удобным для вас.
Следующая статья из цикла по разработке приложения Proper Nutrition — это «Дизайн приложения в Figma — стили и маски«. В ней вы узнаете еще один способ поместить растровое изображение в Figma, а так же как работать с масками и стилями.
Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна |
Фотошоп значки телефонов psd скачать бесплатно 882 редактируемых файла .
psdСортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные Запросить дизайн
иконки набор иконок мультипликационный персонаж телефон ios векторные иконки человек человек iphone psd люди оружие парень охранник мужчина пистолет стрелок стоя стенд стрелять огонь мобильные настройки почта глифы плоские иконки фотошоп
[ Psd ] человек с коротким пистолетом значок стрельба жест эскиз нарисованный от руки персонаж мультфильма ( .psd 3.29МБ) All-free-download.com [Psd] Набор иконок Metricons для Windows 8 (1,45 МБ) Оливиу Стоян [Psd] Значок настроек iOS PSD (174,98 КБ) М Халид [ Psd ] 126 набор иконок ( 953.09KB ) Эрик Бенджамин [ Psd ] Значок часов iOS ( 777,54 КБ ) Кристоф Тозиет [ Psd ] Мини-иконки глифов ( 278,24 КБ ) Роман Булах
94 КБ ) визуальный идиот глиф потрясающие значки нарисованные от руки эмоции 26 сентября тексты слова надпись письмо женщина леди сказать нет карта мира континентальная идентичность наборы логотип канцелярские принадлежности фирменный стиль мобильный телефон смартфон ноутбук карта корреспонденция ручка конверт визитная карточка клип йога камни андроид ежевика значки ios значок телефона значки телефона im сообщения календарь чат электронная почта для бесплатных ресурсов windows windows 8
[ Psd ] Человек с коротким пистолетом значок динамический мультяшный эскиз ( .psd 3.27MB )
30MB ) Бенджамин Натан [ Psd ] 40 значков пользовательского интерфейса ( 181,52 КБ ) DesignerzBase
15KB ) Тольколи [ Psd ] Потрясающие значки ( 27,41 КБ ) Флориан Карли значки телефон значки телефона фотошоп значки фотошопа фотошоп телефон текстовый эффект фотошоп фейсбук значок твиттера спа значки значок значок погоды скачать бесплатно бесплатные спортивные значки значки твиттера фотошоп фоны гранж социальные значки значки трафика значок номер телефона
Загрузка дополнительных элементов, пожалуйста, подождите…
Идет загрузка дополнительных элементов, пожалуйста, подождите…
Критерий поиска: Тип поиска:Совпадение с любымСовпадение со всеми
Искать в:ВекторыИконкиФотографииШрифтыШаблоны сайтовPSD
Лицензия:Все лицензииРазрешить коммерческое использование
Результат сортировки:Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок
- Дом
- Лицензии
- Срок
- Конфиденциальность
- О
- Связаться с
Бесплатный значок телефона PSD Шаблоны
Связанные изображения из iStock | Сохранить сейчасустройство дом офис
Значок современного телефона
приложение яблоко коробка
Компоненты комплекта пользовательского интерфейса iOS 7
икона подарок телефон
Шаблон концепции подарка смартфона
приложение яблоко коробка
Компоненты комплекта пользовательского интерфейса iOS 7
икона линия жест
Бесплатная иконка жеста
устройство дом офис
Значок современного телефона
фотошоп икона телефон
Мой профиль #Бесплатные
