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

Обновлено: 21.11.2024

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

Что вы узнали. Используя различные инструменты рисования и редактирования, в том числе инструмент "Кривизна", инструмент "Перо" и инструмент "Карандаш", вы завершили рисунок для значка монолинии.

Рисовать с помощью инструмента "Кривизна"

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

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

Совет. С помощью инструмента "Кривизна" вы также можете выбрать опорные точки и нажать клавишу Delete или Backspace, чтобы удалить их, или дважды щелкнуть опорные точки, чтобы преобразовать их между углом или кривой.

Рисовать с помощью инструмента "Перо"

Инструмент «Перо» позволяет вам быть максимально точным при рисовании или редактировании контуров. Например, вы можете создавать прямые линии и кривые с точным контролем, чтобы получить желаемое изображение.

  1. Выбрав инструмент «Перо», нажмите, чтобы начать контур.
  2. Чтобы создать прямую линию, за которой следует кривая, переместите указатель в другую область и перетащите в направлении линии. Это создает линию, но так, чтобы следующая часть пути была изогнутой.
  3. Продолжайте создавать серию S-образных кривых, перетаскивая их в направлении кривой.

Совет. Если вы допустили ошибку при рисовании опорной точки, вы можете выбрать «Правка» > «Отменить перо» и перерисовать опорную точку.

Рисуйте внутри с помощью инструмента "Карандаш"

Инструмент "Карандаш" используется для создания контуров произвольной формы, как при рисовании карандашом на бумаге. В этом уроке вы рисуете контур произвольной формы внутри другого контура. Чтобы оставаться в пределах пути, вы рисуете внутри пути, используя режим «Рисовать внутри».

  1. Выберите контур или фигуру. Чтобы нарисовать контур или фигуру, нажмите кнопку "Рисовать по нормали" в нижней части панели инструментов и выберите "Рисовать внутри".
  2. Создавайте, вставляйте или размещайте контент. В этом уроке путь рисуется с помощью инструмента «Карандаш». Любое содержимое за пределами контура или фигуры скрыто (замаскировано).
  3. Чтобы прекратить рисовать внутри, нажмите кнопку "Рисовать внутри" в нижней части панели инструментов и выберите "Рисовать нормально".

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

Удалить пути

С помощью инструмента "Ластик" вы можете стереть часть выбранных контуров или фигур.

  1. Выберите обложку.
  2. Выберите инструмент "Ластик" на панели инструментов.
  3. Перетащите выбранное изображение, чтобы стереть его. Любое невыбранное изображение не удаляется.

Совет. Чтобы изменить размер ластика, нажмите клавишу правой квадратной скобки (]), чтобы увеличить размер, или клавишу левой квадратной скобки ([), чтобы уменьшить размер.

В следующем уроке вы узнаете, как создать простой веб-значок с помощью Photoshop.

Окончательное изображение

Как всегда, это финальное изображение, которое мы будем создавать:

Ресурсы

Шаг 1

Откройте Photoshop и нажмите Control + N, чтобы создать новый документ. Введите все данные, показанные на следующем изображении, и нажмите OK.

Включите сетку (Просмотр > Показать > Сетка) и привязку к сетке (Просмотр > Привязать к > Сетка).

Установив все эти свойства, нажмите кнопку "ОК". Не расстраивайтесь из-за всей этой сетки. Позже это облегчит вашу работу.

Вы также должны открыть панель "Информация" ("Окно" > "Информация") для просмотра в реальном времени размера и положения ваших фигур.

Шаг 2

Выберите инструмент "Многоугольник" и сфокусируйтесь на верхней панели. Введите 25 в поле "Стороны", затем нажмите маленькую черную стрелку, чтобы открыть меню "Параметры многоугольника".

Отметьте все три поля, затем введите радиус 100 пикселей и отступ 20%.

Шаг 3

Далее вам нужно создать простой шаблон. Сначала нажмите Control + N, чтобы создать новый документ. Введите 4 в поля ширины и высоты и нажмите OK.

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

Перейдите на панель «Слои» и удалите слой «Фон». Установите цвет переднего плана на черный и возьмите инструмент «Прямоугольник». Создайте два векторных пути 2 на 2 пикселя и разместите их, как показано на следующем рисунке.

Теперь просто выберите «Правка» > «Определить шаблон». Выберите имя для своего шаблона, нажмите «ОК», и вы получили свой шаблон.

Закройте этот документ и вернитесь к первому.

Шаг 4

Вернуться к «линии сетки каждые 5 пикселей». Итак, перейдите в меню «Правка» > «Установки» > «Направляющие, сетка и фрагменты» и введите 5 в поле «Сетка каждые».

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

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

Шаг 5

Шаг 6

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

Шаг 7

Нажмите кнопку "Добавить" на верхней панели и создайте прямоугольник размером 270 x 40 пикселей, как показано на втором изображении.

Шаг 8

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

Переключитесь на инструмент «Преобразовать точку» и нажмите на обе опорные точки. Затем вам нужно переместить эти новые опорные точки.

Возьмите инструмент «Прямое выделение», выберите левую опорную точку и переместите ее на 25 пикселей вправо, затем выберите правую опорную точку и переместите ее на 25 пикселей влево. В итоге ваша векторная фигура должна выглядеть так, как на третьем изображении.

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

Шаг 9

Переключитесь на инструмент "Преобразовать точку" и нажмите на обе опорные точки.

Возьмите инструмент «Прямое выделение», выберите левую опорную точку и переместите ее на 15 пикселей вправо, затем выберите правую опорную точку и переместите ее на 15 пикселей влево. В итоге ваша векторная фигура должна выглядеть так, как на третьем изображении.

Шаг 10

Убедитесь, что векторная фигура, созданная на предыдущем шаге, по-прежнему выделена. Выберите инструмент «Эллипс», нажмите кнопку «Вычесть» на верхней панели и создайте круг 70 x 70 пикселей, как показано на первом изображении.

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

Шаг 11

Используйте шрифт MoolBoran с размером 15pt. Выделите этот фрагмент текста и перейдите в меню «Правка» > «Трансформировать» > «Деформация».

Выберите Arc в раскрывающемся меню Warp, введите 65 в поле Bend и нажмите Enter.

Шаг 12

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

Перейдите на панель «Слои», щелкните правой кнопкой мыши этот фрагмент текста и выберите «Копировать стиль слоя».

Шаг 13

Выберите инструмент «Текст» и добавьте «КАЧЕСТВО», как показано на следующем рисунке. Снова используйте шрифт MoolBoran с размером 15pt.

Выделите этот фрагмент текста и выберите «Правка» > «Трансформировать» > «Деформация».

Выберите Arc в раскрывающемся меню Warp, введите -50 в поле Bend и нажмите Enter.

Перейдите на панель «Слои», щелкните правой кнопкой мыши этот фрагмент текста и выберите «Вставить стиль слоя».

Шаг 14

Выберите инструмент «Текст» и дважды добавьте «ДЕНЬГИ ВОЗВРАТ», как показано на следующем рисунке.

Используйте шрифт MoolBoran с размером 13pt. Кроме того, установите интерлиньяж на 10 пунктов и отслеживание на 350.

Щелкните правой кнопкой мыши по этим фрагментам текста и выберите "Вставить стиль слоя".

Шаг 15

Выберите инструмент «Текст», добавьте «100» и символ процента и используйте свойства, показанные на первом изображении.

Выделите оба фрагмента текста и преобразуйте их в смарт-объект.

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

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

Подробности урока

Программа: Photoshop CS5

Расчетное время выполнения: 30 минут

Обучающие материалы

В этом руководстве использовались следующие ресурсы:

Шаг 1

Создайте новый документ шириной 1400 пикселей и высотой 1000 пикселей.

Шаг 2

Шаг 3

Мы продолжим рисовать основную форму нашего значка. Для этого выберите инструмент «эллипс» и нарисуйте 3 круга разного размера, я обозначил их как базовый круг, средний круг и передний круг. Заполните их разными оттенками любого цвета, который вы хотите. Вы должны получить что-то вроде этого до сих пор.

Шаг 4:

Теперь мы добавим текстуру нашему значку.Откройте гранжевую текстуру, скопируйте и вставьте ее на новый слой чуть выше слоя «базовый круг». Нажмите на слой с текстурой, а затем нажмите Ctrl + слой с базовым кругом. Затем нажмите «Добавить маску слоя». Таким образом, текстура будет ограничена только этим базовым кругом. Теперь выберите слой с текстурой и установите режим наложения «Перекрытие» и уменьшите заливку этого слоя с текстурой до 80%. Повторите тот же шаг, чтобы придать текстуру среднему и переднему кругам.

Шаг 5

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

Шаг 6

Используйте следующие настройки стиля слоя для среднего круга.

Шаг 7

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

Шаг 8

После этого создайте новый слой, выберите «Инструмент «Перо» и нарисуйте круг с помощью «Инструмента «Перо», затем щелкните правой кнопкой мыши> Путь обводки> Кисть, а затем снова «Щелкните правой кнопкой мыши» и выберите параметр «Удалить контур». �. Теперь нажмите Слой > Стиль слоя > Тень. У нас получится красивый сшитый круг.

Шаг 9

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

Я написал текст "Шаблон качества" по кругу. Для этого выберите «Инструмент эллипса» и нажмите «Путь» на верхней панели инструментов, а затем нарисуйте круг. Теперь выберите инструмент «Текст» и перенесите его на круг, который мы только что нарисовали; теперь все, что вы напечатаете, будет в круге. Чтобы текст был написан в нижней половине круга, как показано, выберите «инструмент выбора пути», переместите его к тексту и просто перетащите его внутрь круга. Мы заметим 2 точки на круге, «x» и «?». Здесь «x» показывает начальную точку текста, а «?» означает, что ваш текст будет заканчиваться здесь. поэтому перетащите «?» сначала в конец нижней половины круга, а затем перетащите «x» в начало нижней половины круга. Вот и все. Кроме того, я сделал звезды и линию для улучшения отображения текста.

Шаг 10

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

Шаг 11. Теперь добавьте к нему текстуру в стиле гранж, используя ту же технику, которая описана в шаге 4, и используйте настройки, показанные ниже, для стиля слоя.

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

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

Никакая часть этих материалов не может быть воспроизведена каким бы то ни было образом без явного письменного согласия Entheos. Любое несанкционированное использование, совместное использование, воспроизведение или распространение этих материалов любыми средствами, электронными, механическими или иными, строго запрещено.

Стили слоев — это эффекты, встроенные в палитру слоев, которые позволяют работать неразрушающим образом. Это означает, что эффекты можно включать и выключать, не затрагивая содержимое слоя. Стили слоя невероятно универсальны, как мы надеемся, продемонстрирует этот урок! Графика, показанная ниже, содержит всего два слоя плоских фигур — все эффекты (включая текст на значке) были применены с использованием стилей слоя.


Так как же он был создан? Вы можете либо прочитать, либо просмотреть видеоруководство по Photoshop ниже.

Учебное пособие по Photoshop Стеклянная кнопка или значок с эмалью
Видеоруководство по Photoshop

Учебное пособие по Photoshop Стеклянная кнопка или значок с эмалью
Используйте слои формы для создания базовой формы

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

Сначала мы создадим слой-фигуру с помощью инструмента «Прямоугольник со скругленными углами». Установите радиус угла на 10 пикселей и создайте прямоугольник на холсте. Дважды щелкните образец цвета на слое с фигурой и залейте его желтым цветом, как показано ниже. Теперь выберите все и (с выбранным инструментом «Перемещение») в палитре параметров нажмите кнопки «Выровнять центры по горизонтали» и «Выровнять центры по вертикали», чтобы центрировать фигуру на холсте. Теперь продублируйте слой, перетащив его на кнопку «Создать новый слой» в нижней части палитры слоев.


Учебник по Photoshop Стеклянная кнопка или значок с эмалью
Создайте обводку для металлического эффекта

Выберите нижний слой с фигурой (который станет металлической задней пластиной для кнопки) и нажмите кнопку "Добавить стиль слоя". Затем выберите Stroke во всплывающем меню. Сделайте Размер 8 и установите Положение на Снаружи. Выберите «Градиент» в меню «Тип заливки», а затем щелкните градиент по умолчанию, который появляется в окне, чтобы открыть редактор градиентов.


Мы собираемся создать новый металлический градиент, поэтому, открыв редактор градиентов, добавьте три точки под черно-белой полосой градиента и сделайте все точки чередующимися оттенками белого и серого. Нажмите OK, когда будете довольны. Вернитесь к окну Layer Style, установите угол около -135 градусов. Нажмите "ОК".


Учебник по Photoshop Стеклянная кнопка или эмалированный значок
Создайте изображение значка и определите его как шаблон

Далее мы создадим текст, который поместим на значок. Стеклянные объекты, созданные в Photoshop, действительно оживают, когда отражения и тени влияют на какое-либо изображение или графику, размещенную на поверхности. Вы можете создать что-то в Illustrator и вставить это или использовать фотографию. Однако, поскольку мы хотим создать этот объект, используя только стили слоя, нам нужно определить шаблон для размещения в стиле слоя Pattern Overlay.


Для этого сначала скройте два слоя с прямоугольными фигурами. Создайте новый слой непосредственно над слоем с черным фоном и залейте его белым цветом. Создайте текст или графику, которые будут отображаться на значке, убедившись, что они хорошо вписываются в границы прямоугольника значка. Теперь выберите все. Перейдите к Редактировать/Определить шаблон. Нажмите OK в появившемся окне предварительного просмотра. Шаблон теперь определен и сохранен, так что вы можете удалить только что созданные графические слои и белый слой. Снова включите два слоя с фигурами.

Учебное пособие по Photoshop Стеклянная кнопка или значок с эмалью
Обведите верхний слой с фигурой

Теперь выберите верхний слой с фигурой — здесь происходит волшебство! Нажмите кнопку «Добавить стиль слоя» и выберите «Обводка». Задайте ему следующие настройки (если какие-либо настройки здесь не упомянуты, это означает, что их следует оставить со значениями по умолчанию):

  • Размер: 2
  • Расположение: снаружи
  • Режим наложения: экран
  • Непрозрачность: 50
  • Цвет: белый

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


Учебное пособие по Photoshop Стеклянная кнопка или значок с эмалью
Используйте слои формы для создания базовой формы

Выберите «Наложение узора» и задайте следующие настройки:

  • Режим наложения: умножение
  • Непрозрачность: 100%
  • Масштаб 100%

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


Учебник по Photoshop Стеклянная кнопка или значок с эмалью
Добавьте легкий градиент

Выберите «Наложение градиента». Используйте эти значения:

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


Учебник по Photoshop Стеклянная кнопка или эмалированный значок
Придайте ему трехмерный вид

Теперь мы начнем придавать графике более трехмерный вид. Выберите Bevel and Emboss со следующими настройками:

  • Стиль: внутренний скос
  • Глубина 60%
  • Направление: вверх
  • Размер: 20 пикселей.
  • Смягчение: 10 пикселей.

Учебник по Photoshop Стеклянная пуговица или значок с эмалью
Добавьте отражение!

Настоящий сок приходит с настройкой «Внутренняя тень» — выберите ее сейчас и введите следующие значения:

  • Режим наложения: экран
  • Цвет: белый
  • Непрозрачность: 50%
  • Угол: 90 градусов (снимите флажок "Использовать глобальное освещение").
  • Расстояние: 90 пикселей.
  • Удушье: 2%
  • Размер: 0 пикселей.

Это придает значку приятное зеркальное отражение, которое даже красиво изгибается по краям, усиливая трехмерный эффект. Когда все настройки вас устроят, нажмите ОК — и готово!

Читайте также: