You might also like
Добрый вечер, мы рады видеть вас на сайте fotodizart.ru. Сегодня мы поговорим о таких важных мелочах, как кнопки, а точнее о том, как создаются кнопки в Photoshop.
Кнопки могут иметь различное назначение и применение: веб-страницы, программные интерфейсы и т.д. Если все правила соблюдены, кнопка на сайте или интерфейсе должна иметь три или четыре состояния. Зачем просить три или четыре, зависит от того, совпадают ли некоторые состояния кнопок и требуется ли четвертое состояние.
Сегодня не все состояния кнопок используются повсеместно. Все состояния используются для того, чтобы пользователю было легче ориентироваться в интерфейсе. Проще говоря, кнопка указывает на происходящее и соответствующее действие. Разработать кнопки в Photoshop несложно, но важно определить, что такое кнопка.
Кнопка — это элемент управления, который реагирует на действия пользователя.
Рассмотрим эти четыре ситуации.
- Статический — это состояние кнопки, при котором пользователь не выполняет никаких действий с кнопкой.
- Hover — это состояние кнопки, когда пользователь наводит курсор мыши на кнопку.
- Click — это состояние кнопки, когда пользователь нажимает на нее.
- Активный — это состояние кнопки, когда кнопка подсвечивается, указывая пользователю, где находится кнопка (обычно используется для информирования пользователя о его текущем местоположении. Например, на какой странице сайта они находятся).
Что такое кнопка и каково ее состояние в нашем понимании? Давайте перейдем к созданию кнопок в Photoshop, или кнопок и всех четырех их состояний.
Откройте Photoshop и создайте новый документ нужного размера. Рекомендуется заполнить фон цветом интерфейса. Это нужно для того, чтобы наглядно увидеть, как он будет выглядеть на самом деле. Затем начните создавать кнопку в Photoshop. С помощью инструмента Прямоугольник с закругленными углами создайте форму будущей кнопки.
Используйте стиль слоя, чтобы заполнить форму кнопки линейным градиентом, или перейдите в меню Слой > Стиль слоя > Наложение градиента, или дважды щелкните слой с формой кнопки.
Продублируйте слой для создания объемов и теней кнопок. Для этого перетащите слой с кнопкой на иконку, чтобы создать новый слой, или сделайте активным слой с кнопкой, а затем перейдите в меню Слой>Создать дубликат слоя. Выполните это действие дважды. Далее назовите свой слой кнопкой, объемом и тенью. Затем щелкните на слое с тенью правой кнопкой мыши и очистите стиль слоя. То же самое сделайте со слоем объема. Затем измените цвет слоя объема. Затем переместите слой вниз с помощью инструмента Перемещение (V).
Чтобы сделать кнопку более объемной и создать свечение и границу, сделайте это с помощью стиля слоя Glow inside. Установите цвет свечения.
Затем дополните слой тенью. Перейдите в меню Слой > Растр. Уменьшите непрозрачность до 13%. Затем примените фильтр Гаусса, используя параметры, показанные на скриншоте ниже.
Теперь, когда кнопка в Photoshop почти готова, нужно добавить к ней надпись. Для этого используйте инструмент "Горизонтальный текст", выберите подходящий шрифт и напишите необходимую надпись.
Затем надавите на текст, чтобы создать свечение и границу по краю надписи. Все это делается с помощью стиля слоя.
Кнопка разработана в Photoshop. Конечный результат кажется выше, но теперь давайте создадим другие ситуации для кнопки.
Сначала назовите команду статического состояния, включая кнопки, созданные в группе матрасов. Для этого, удерживая Shift, выделите все уровни, кроме фона, и нажмите Ctrl+G, чтобы переименовать команду. Перейдите в Layer>Duplicate Group и назовите группу, затем скопируйте группу других ситуаций с кнопками. Выберите с помощью инструмента перемещения (v) и перемещайтесь вниз по группе по порядку, выберите группу и нажмите стрелку на клавиатуре.
Теперь давайте изменим все команды на нужную нам ситуацию. Сначала измените команду ярлыка. Для этого на уровне выберите кнопку уровня и укажите, что вы хотите обработать стиль уровня. Там редактируется только покрытие склона, что делает его более открытым.
Затем отредактируйте кнопку при нажатии. Эта кнопка редактирует покрытие склона, как в предыдущем состоянии. Также необходимо выбрать кадр инверсии, а также уменьшить громкость, чтобы при нажатии на кнопку создавалось впечатление сжатия. Чтобы уменьшить объем, необходимо выбрать уровень объема и оттенка. Тень также уменьшается и перемещается вверх с помощью инструмента перемещения (V) со стрелкой на клавиатуре.
Наконец, активируйте кнопку. Для этого нужно изменить цвет, которым покрыт склон, и убрать тень и объем, точно так же, как это делается с кнопкой-качелькой или кнопкой-щелчком. Я бы только сказал, что вам нужно изменить цвет рейтинга, чтобы активная кнопка выделялась на фоне других кнопок. Конечно, можно изменить цвет логотипа, но я бы не стал этого делать.
Это позволило создать всю кнопку в Photoshop. Думаю, урок предельно ясен: нужно изменить цвет кнопки, чтобы она выделялась на фоне остальных. Если у вас есть вопросы, пожалуйста, задавайте их в комментариях. По возможности я постараюсь ответить на них. Не забудьте подписаться на список рассылки, чтобы первыми узнавать о новых статьях. Вы также можете прочитать урок о том, как создать план кнопки социальной сети.
