Кнопка для фотошопа: Как нарисовать кнопку в фотошопе

Рисуем кнопки для веб-сайта в Фотошоп / Creativo.one

Содержание

• #Шаг 1
• #Шаг 2
• #Шаг 3
• #Шаг 4
• #Шаг 5
• #Шаг 6
• #Шаг 7
• #Шаг 8
• #Шаг 9
• #Шаг 10
• #Шаг 11
• #  Комментарии

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

Финальное изображение:

Шаг 1

Создайте новый документ (Ctrl + N) размером 1280 x 1024 пикселов.

Шаг 2

Залейте фон цветом #СCCBCC и кистью (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

Шаг 3

Инструментом Прямоугольник со скругленными углами ( Rounded Rectangle Tool) (U) нарисуйте фигуру с радиусом скругления 180 пикселов:

Шаг 4

К фигуре примените стиль слоя Наложение градиента (Gradient Overlay). Используйте параметры, которые показаны на скриншоте:

Шаг 5

Инструментом Овальная область выделения

(Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его черным цветом. Расположите его на предыдущей фигуре:

Шаг 6

Скопируйте стили со слоя с прямоугольной фигуры (кликните правой кнопкой мыши в палитре Слои по стилям слоя и выберите пункт Скопировать стили слоя. Теперь перейдите на слой с черным кругом, кликните по нему в палитре Слои правой кнопкой мыши и выберите пункт Вклеить стили слоя).

Шаг 7

Также, к слою с кругом примените стиль Тень (Drop shadow):

Шаг 8

Инструментом Овальная область выделения (Elliptical Marquee tool) (M) нарисуйте круглое выделение и залейте его белым цветом.

Шаг 9

Выберите инструмент Произвольная фигура (CustomShapeTool) и нарисуйте фигуру конверта в режиме слой-фигуры.

Шаг 10

На слой с конвертом вклейте те стили слоя, которые ранее копировали:

Шаг 11

При помощи инструмента Текст (Text Type Tool) (T) напишите текст на кнопке:

Финальное изображение:

Автор: webdesign

Источник: digitalartsonline.co.uk

Металлическая кнопка в Photoshop, добавление значка ON/OFF

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

Начнём.

Создадим новый документ размером 500 на 500 пикселей. Поставьте направляющие по центру документа. Возьмите инструмент «Эллипс», выберите режим «Фигура» (Snape),

убедитесь, что убедитесь, что операции с контуром в положении»Новый слой» (подробнее здесь) и постройте геометрически правильный круг от центра, как в начале прошлого урока, после слов «давайте приступим». Цвет заливки не важен. Результат:

Фигура «Эллипс» для заготовки значка.

Теперь нам надо построить ещё один круг, но так, чтобы содержимое этого круга вычиталось из содержимого первого круга. Для этого в панели параметров выбираем операцию «Вычесть переднюю фигуру» (Subtract from Shape Area):

Выбор операции Вычесть переднюю фигуру (Subtract from Shape Area).

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

Содержимое второго круга вычтено из первого круга.

Примечание: При работе с векторными фигурами в некоторых версиях Photoshop я сталкиваюсь с некорректной работой программы при переключении режимов операций с контурами, это происходит и в данный момент в версии Photoshop CC 2017. Поэтому после переключения режимов я просто нажимаю отмену предыдущего шага Crtl+Alt+Z, потом строю вторую фигуру. Подробнее в видео.

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

Горизонтальная направляющая для построения вырезки части окружности.

Теперь возьмём инструмент «Перо» (Pen Toll), режим работы с контурами у нас по прежнему «Вычесть переднюю фигуру», поэтому содержимое фигуры, построенной «Пером», также будет вычтено из основного содержимого. Нарисуйте «Пером» треугольник, одна вершина в перекрестье центральных направляющих. две стороны должны проходить через пересечение верхней горизонтальной направляющей и внешнего контура окружности:

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

Теперь надо подрисовать вертикальную палочку, на этот раз понадобится режим «Объединить фигуры» (Add to Shape Area):

Выбор режима «Объединить фигуры».

При переключении на этот режим (а он должен действовать на следующую добавленную фигуру) в моём Photoshop`е снова происходит глюк, треугольник, нарисованный пером, сливается с окружностью, поэтому я нажимаю отмену Crtl+Alt+Z, ошибка удаляется, а режим «Объединить фигуры» остаётся.

Берем инструмент «Прямоугольник» и строим вертикальный прямоугольник, завершающий значок ON/OFF:

Значок ON/OFF построен. Но, как видите, толщина линий не соответствует друг другу. Это легко исправить.

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

Но нам может не понравиться ширина линии полукруга или прямоугольника, диаметр и размер, их соотношение и т.п. Я не зря использовал для построения именно векторные фигуры, т.к в любой момент, даже после сохранения документа. мы можем изменить их масштаб без потери качества и с соблюдением относительной геометрии. Например, после построения прямоугольника мне кажется, что ширина полуокружности слишком мала по сравнению с прямоугольником. Я легко могу это исправить методом уменьшения диаметра внутреннего круга.
Берём инструмент «Выделение узла» (Direct Selection Tool), зажимаем клавишу Ctrl и поочерёдно кликаем по всем опорным точкам контура круга. Затем применяем команду «Свободное трансформирование», зажимаем клавиши Shift+Alt и, потянув внутрь за любой угол рамки трансформирования, уменьшаем диаметр внутреннего круга, чтобы увеличить ширину полосы полуокружности. Таким образом мы можем изменить размер и положение любых элементов значка:

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

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

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

Вид документа с добавленным векторным значком.

На данный момент значок расположен по центру кнопки, но смотрится как-то не так. Дело в том, что окружность значка находится ниже центра, но, если поднять фигуру, то прямоугольник будет слишком высоко. Следовательно, сначала необходимо опустить контур прямоугольника относительно значка, а затем переместить вверх весь значок. Контур легко можно опустить инструментом «Выделение контура»:

Перемещаем прямоугольник немного вниз.

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

Кроме того, выделив нужные опорные точки инструментом «Выделение узла» (Direct Selection Tool) мы можем не только трансформировать размер, но и перемещать точки для изменения формы значка. Здесь я подгоню размер значка (выделены все опорные точки) под размер кнопки:

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

Переименуем слой со значком в on.

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

    

Результат:

Вид кнопки в состоянии «включено».

Теперь сделаем состояние OFF. Дублируем слой on, переименуем в off и добавим стиль слоя «Внутренняя тень» и «Наложение цвета» со следующими параметрами:

    

Результат:

Вид кнопки в состоянии «выключено».

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

Готовый рисунок, для наглядности я добавил чёрный фон.

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

Моё изображение с концентрическими окружностями на прозрачном фоне.

Подобное изображение элементарно создаётся в любом векторном графическом редакторе, например, CorelDRAW, а вот в Photoshop стандартными средствами, даже с использованием экшенов, сделать его не представляется возможным. Только вручную, методом создания контура в виде окружности с последующей обводкой толщиной 1 пиксель, потом создания следующей окружности большего диаметра и т.д., в общем, это долго и скучно. Но т.к. я не ищу лёгких путей, чисто из принципа я накодил JS-скрипт для Photoshop для получения концентрических кругов с равным отступом друг от друга, описывать здесь не буду, эта узкая тема и интересна только людям, работающим в CAD программах. Рисунок кругов я предлагаю скачать вместе с готовым PSD по ссылкам внизу страницы.

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

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

Готовый результат:

Скачать материалы к уроку (PSD, 1 PNG, 1,54 Мб)

Кнопка в фотошопе сделать красиво. Как нарисовать кнопку в фотошопе. Давайте рассмотрим эти четыре состояния.

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

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

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

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

Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.

Создайте новый документ в фотошопе. Кнопку мы нарисуем с помощью инструмента Прямоугольник со скругленными углами .

Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00 . А радиус углов установил 4 пикселя .

Создание блестящей металлической кнопки

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

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

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

Теперь рисуем саму кнопку. Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.

Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J ) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800

Создать профессиональную глянцевую кнопку «Загрузить»

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

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

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

Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента .

Как создать кнопку навигации по промышленному стилю

Узнайте, как сделать привлекательные и глянцевые веб-кнопки стиля 0 в этом учебнике.

Дизайн красивой детальной веб-кнопки

Конечный результат можно увидеть ниже. Этот учебник покажет вам, как сделать простую кнопку в фотошопе с некоторыми базовыми эффектами.

Детали и ресурсы учебника

Большая кнопка отлично подходит для отдельных страниц или продуктов, где вы хотите подчеркнуть что-то важное. Чтобы преобразовать плоскую кнопку, вам нужно только изучить основы света и теней. Следуйте за мной в этом уроке и продолжайте практиковать. Для этого учебника создайте документ шириной 800 пикселей и высотой 480 пикселей с прозрачным фоном. Вы можете скрыть его в любое время и сохранить свою кнопку с прозрачным фоном. Чтобы выровнять фигуру в центре нажмите, чтобы выбрать все ваши холсты, а на верхней панели используйте выравнивание центральных кнопок для центровки фигуры.

Необходимо выполнить настройку — угол наклона 90 градусов.

В данном Уроке рассматриваются простейшие способы создания кнопки. Видео урок Стеклянная кнопка показывает как ссоздать стеклянную кнопку с помощью готовых стилей так и самостоятельно.

При создании сайтов или других интерфейсов, важным элементом являются кнопки. Фотошоп позволяет создавать всевозможные кнопки по индивидуальным критериям. В этой статье Вы узнаете как сделать кнопку в фотошоп. Существует много вариантов создания кнопки в Photoshop. Рассмотрим несколько наиболее простых варианов как сделать кнопку. В Фотошоп нам понадобяться в ПАНЕЛИ ИНСТРУМЕНТОВ следующие инструменты: прямоугольник со скруглеными краями, заливка или выбор цвета (или цвет можно назначить в ПАНЕЛИ СВОЙСТВ), текст. В ПАНЕЛИ СВОЙСТВ — цвет, стили (или в ГЛАВНОМ МЕНЮ выбрать в выпадающем меню ОКНО — стили). В окне СЛОИ: элементы функции ƒх (тиснение). В окне СИМВОЛ: размер, шрифт. Расположение элементов интерфейса Photoshop можно прочитать .

Чтобы создать меньшую фигуру внутри кнопки, следуйте той же методике. Сначала нажмите для изменения цветов переднего плана и фона по умолчанию. Нарисуйте выделение, как в примере. Измените режим смешивания на Мягкий свет и непрозрачность до 85%. Нажмите Удалить на клавиатуре и нажмите, чтобы отменить выбор. Затем, при активном слое «Верхний ярлык» выберите инструмент «Переместить» и дважды нажмите кнопку со стрелкой вниз на клавиатуре, чтобы переместить небольшую подсветку вниз. Установите непрозрачность слоя до 45-50%.

Затем измените режим смешивания на Мягкий свет и непрозрачность до 80%. Нажмите, чтобы отменить выбор. Чтобы добавить еще одну подсветку, создайте новый слой и назовите его «Выделить». Выберите инструмент «Градиент» с белым передним и прозрачным градиентами, заполнив выбор снизу вверх, как мой пример.

Создаем новый документ, задаем нужный размер. Фон прозрачный, режим RGB. Рекомендуется для удобства, точности центрирования и задания размера самой кнопки в Фотошоп использовать направляющие (их для наглядности можно подсветить красным цветом в настройках программы через меню РЕДАКТИРОВАНИЕ), путем перетаскивания вертикальной и горизонтальной линейки в нужное положение. На панели инструментов нажимаем инструмент прямоугольник со скруглеными краями, задаем нужное скругление (радиус) на панели свойств, ставим курсор в виде крестика на пересечении линеек и тянем фигуру до нужного размера и формы. Если сначала не выбрали цвет в панели инструментов, заливаем нужным цветом в функциях слоя.

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

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

Создание кнопки в Фотошоп с помощью готовых стилей.

Самый простой вариант получить объемную кнопку — выбрать стиль в панели свойств фигуры (или в окне СТИЛИ, которое можно вызвать в основном меню ОКНА-в выпадающем менню выбрать СТИЛИ), которые позволят сделать различные кнопки. В Photoshop уже присутствуют наборы стилей (прозрачные, текстурные). Выбрать из наборов подходящий стиль можно нажав на треугольник справа в наборе. В данном случае набор ВЕБ стили — стиль Хром. После выбора стиля в панели СЛОЙ можно увидеть, из каких элементов функций он состоит. Каждый элемент функции можно корректировать.

Это как сказать: Вот ресурс. Если вам это нравится, вот как это получить. Итак, сегодня мы узнаем некоторые полезные методы создания красивых веб-кнопок. Сегодня вы увидите, как создать первые 2 кнопки. Также подумайте, что наши кнопки предназначены для веб-дизайна, поэтому после их завершения они будут извлечены.

Чтобы сделать фоновое изображение приятнее, добавьте наложение градиента. Здесь выберите наложение градиента и добавьте градиент, идущий от светло-серого до более темного. Прежде чем добавлять стили слоя в фоновый слой, вы должны разблокировать его. Пришло время играть со стилями слоя, чтобы добавить символ к кнопке. Начнем с наложения градиента, идущего от синего до более светлого.

После определения формы, цвета и стиля кнопки переходим к написанию текста кнопки. Рекомендуется создать новый слой для текста, чтоб векторная фигура не прикреплялась к тексту. На панели инструментов нажимаем инструмент текст, и набираем текст на изображении кнопки. Кликаем на инструмент перемещение. Открываем окно СИМВОЛ и выбираем шрифт, цвет и размер.

Установите белый цвет и уменьшите непрозрачность до 30%. Мы закончили со стилями слоев. Пришло время добавить эффект мягкого шума. Снимок экрана ниже объяснит лучше весь процесс. Установите режим смешивания слоев на экран и уменьшите непрозрачность до примерно 15%.

Почему мне нужно настроить режим смешивания на экран? Установив режим смешивания на экран, все белые области будут сохранены, а черные исчезнут. Мы собираемся создать приятный световой эффект. Удалите удалять, чтобы удалить выбранную область, а затем уменьшите непрозрачность слоя до 10%.

Текст можно оставить без стиля. Для применения стиля к тексту на слое с текстом кликаем 2 раза или нажимаем функцию. Выбираем например Тиснение. В окне задаем внутренний скос и задаем нужные параметры. В итоге получаем серую хромированнкю объемную кнопку с вдавленным текстом.

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

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

Создание кнопки со своими вариантами стилей.

Стиль кнопки можно задать самому, используя инструмент ФУНКЦИЯ на панели СЛОИ. Кликаем дважды на слое кнопки или нажимаем на понели кнопку ƒх. Самый простой вариант — стиль слоя выбираем ТИСНЕНИЕ и выбираем необходимые параметры. Добавляем ТЕНЬ.

Это полезный трюк, чтобы сделать более яркими наши кнопки. Как и в случае с первой кнопкой, давайте начнем создавать основную фигуру. Заполните выделение тем же серым эффектом удара основной фигуры. Затем уменьшите непрозрачность слоя до 15%. Таким образом, мы создали мягкий эффект тени слева от двух линий. Затем добавьте маску слоя в группу, нажав кнопку «добавить маску слоя» в нижней части окна слоев.

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

Можно также при желании использовать внешнее свечение, обводку, перекрытие цвета или узора и другие стили на выбор. Стеклянная кнопка в фотошопе делается без заливки фигуры цветом (непрозрачность заливки -0), или залитием таким же цветом, что и основание (аналогично применяется к тексту).

Шаг 3: Дайте базовой форме стиль слоя

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

Шаг 4: Приведение кнопки в диагональную линию

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

Затем, как в предыдущем примере, добавляем текст со стилями тиснения. Можно к тексту применять и другие стили по желанию.

Если кнопка готова — нажимаем на ФАЙЛ в главном меню и в вкладке выбираем «сохранить для веб устройств». В окне задаем формат PNG 24 (оп поддерживает прозрачность и передает максимум оттенков изображения). Здесь же можно подкорректировать размер кнопки.

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

Создание состояния наведения

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

Видео как нарисовать стеклянную кнопку в Фотошоп.

Видео Стеклянная кнопка в фотошоп показывает как ссоздать стеклянную кнопку в Фотошоп с помощью готовых стилей так и самостоятельно.

Красивая кнопка для сайта | Уроки Фотошопа (Photoshop)

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

Вот она, та самая глянцевая кнопка, которую мы получим в итоге:

А теперь открывайте фотошоп и готовьтесь к работе!

Красивая кнопка для сайта

Создайте новый документ размером 800x500px.

Для начала нужно задать форму будущей кнопки. Этим и займёмся. Сразу скажу – в этом уроке я расскажу о достаточно сложном пути создания форм. Если вы не хотите работать с Pen Tool (инструмент перо), или для вас это пока что сложно сразу переходите к главе 2, там будет показан более простой путь.

Ну а глава 1 для тех, кто хочет научиться чему-то новому.

Глава 1. Создаём форму кнопки с помощью Pen Tool

Забегая вперед оговорим, какие есть плюсы у способа с использованием Pen Tool. Прежде всего, гибкость в создании формы. Вы можете “вылепить” всё что угодно. Естественно, инструменты вроде Rectangle Tool (прямоугольник) сделать этого не позволяют, так что вы будете получать весьма стандартные кнопки.

1. Итак, довольно болтовни. Приступим. Возьмите инструмент Pen Tool (Перо) и создайте примерно такую фигуру:

2. Форма нашей кнопки получилась очень кривой и приблизительной. Сейчас мы затронем очень важную тему – работа с направляющими. Направляющие сильно помогают в работе дизайнера. По ним удобно отмерять расстояние. Сейчас вы сами всё поймёте. Для начала лучше залить фон каким-нибудь цветом, отличающимся от белого. Пусть это будет серый (#d9d9d9). Берем инструмент Paint Bucket Tool (Заливка) и отправляемся на слой Background, затем заливаем его выбранным цветом:

3. Хорошо, теперь установим направляющие, а затем выровняем по ним форму кнопки. Для установки направляющей пройдите в меню View (Вид) -> New Guide (Новая направляющая). Отметьте галочку Vertical (Вертикальная) и введите значение 200px:

Как видите, направляющая появилась в положении 200px от левого края холста. Если сейчас вы нажмёте сочетание клавиш Ctrl+H то направляющая исчезнет. Повторное нажатие этого сочетания вернет направляющую назад.

5. Установите ещё одну направляющую в положение Vertical 600px:

6. Понадобятся ещё 4 направляющие в положениях Vertical 160 и 640px, а также Horizontal 150 и 350px. Должно получиться примерно так:

7. Пришло время выровнять форму. Для этого возьмите Direct Selection Tool (Направленное выделение):

А затем опираясь на сетку работайте с формой. Если не хватает направляющих, смело добавляйте. Направляющие можно также добавлять из линейки (вызывается с помощью Ctrl+R). Для этого нажмите на риску линейки и как-бы “вытаскивайте” из неё направляющие. Во время работы для удобства пользуйтесь масштабированием и приближайте холст (Ctrl + колёсико мышки).

Итак, должна получиться такая заготовка для будущей красивой кнопки:

Как видите, мне пришлось добавить ещё несколько направляющих. Форма готова, можно двигаться дальше.

Глава 2. Форма кнопки простыми средствами.

8. Как и обещал, сейчас расскажу как сделать форму кнопки буквально за 20 секунд. Выбираем инструмент Rounded Rectangle Tool (Прямоугольник с фаской):

Устанавливаем радиус фаски 90px:

Всё, форма готова 🙂

Глава 3. Глянцевая кнопка

9. Вот мы и добрались до создания самих эффектов для кнопки. Не важно, каким способом вы сделали основу кнопки (форму) – принцип здесь один и тот же. Давайте для начала нанесем на кнопку текст. Создайте новый слой (Shift+Ctrl+N) и напишите любой текст:

Текст сделайте цветом темнее самой кнопки. К слову, для формы я использовал цвет # 3e7bab, для кнопки #183e5b.

10. Сделайте копию слоя с формой (Ctrl+J). Поменяйте цвет на белый, нажмите Ctrl+T (Свободная деформация), и уменьшите форму таким образом:

11. Понизьте непрозрачность слоя до 35%:

Как вы вероятно догадались, мы только что сделали блик для нашей красивой кнопочки.

12. Создайте для блика маску слоя:

Примечание: Подробнее о масках слоя читайте в этом уроке

13. Теперь возьмите мягкую чёрную кисть  размером 400px:

Пройдитесь этой кистью по нижней части блика. Должно получиться так:

14. Создайте копию блика, и на маске слоя “протрите” чёрной кистью всё пространство внутри блика, оставляя только верхнюю часть. Режим смешивания Soft Light (Мягкий свет), а непрозрачность установите 100%:

15. Создаём новый слой, берем мягкую белую кисть диаметром 8px и рисуем сверху от блика полоску (чтобы полоска получилась идеально прямой удерживайте клавишу Shift):

16. Создаём для этого слоя маску и стираем края полоски:

17. Дублируем слой с полоской и применяем Filter (Фильтр) -> Blur (Размытие) -> Gaussian Blur (По Гауссу), радиус 4,6px:

18. Нажимаем Ctrl+щелчок по миниатюре слоя с первым бликом, появится выделение. Находясь на слое с полоской нажимаем Delete, затем переходим на слой с только что примененным блюром и также жмём Delete:

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

19. Похожее делаем для контура формы. Ctrl+клик по основному контуру кнопки, затем Ctrl+Shift+I для инверсии выделения, и нажимаем Delete на обоих слоях с полоской. Сейчас кнопка должна выглядеть так:

20. Теперь слои с линиями можно объединить (Ctrl+E) и установить непрозрачность 80%, для придания естественности блику.

21. Продолжаем работу с бликами и светом. Создайте новый слой и мягкой белой кистью нарисуйте такое пятно:

22. Теперь уже знакомую операцию по выделению контура кнопки (Ctrl + клик по форме кнопки в панели слоёв), затем инвертирование Shift+Ctrl+I и Delete. Режим смешивания Soft Light, непрозрачность 70%:

23. Скопируйте слой с текстом, расположите его под основным, задайте цвет чуть светлее кнопки (у меня #79afdb) и переместите этот слой на 1px вниз. Получаем эффект тиснения:

24. С помощью Pen Tool создайте несколько бликов по обоим сторонам кнопки и снизьте их непрозрачность до 10-20%:

25. Эта кнопка показалась мне слишком высокой, поэтому я выделил все слои, кроме текста, нажал Ctrl+T и уменьшил кнопку в высоту:

26. Можно добавить ещё один небольшой блик внизу. Вы уже знаете как это сделать. Сейчас кнопка выглядит так:

27. Мы почти закончили. Осталось добавить немного эффектов. Сделаем отражение. Скопируйте все слои (выделите их и нажмите Ctrl+J). Нажмите на любой из скопированных слоёв правой кнопкой мыши и выберите пункт Convert to Smart Object (Преобразовать в смарт-объект). После этого пройдите в Edit (Редактирование) -> Transform (Трансформация) -> Flip Vertical (Отразить по вертикали). Понизьте непрозрачность до 52%:

А теперь с помощью маски слоя сотрите нижнюю часть отражения:

28. Хорошо, кнопка теперь действительно красивая 🙂 Осталось только сделать тень. Создайте слой над фоном и под всеми остальными, и твёрдой кистью нарисуйте чёрную линию:

29. Примените размытие по Гауссу с радиусом 8 px, непрозрачность слоя 46px. Дорабатывайте тень, пока она вас не устроит:

30. Собственно на этом всё, профессиональная глянцевая кнопка готова. Теперь можно удалять фон, изменять размер до того, который понадобится на сайте (Image -> Image Size) и использовать на радость себе и пользователям.

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

А вот и финальный результат, я ещё добавил немного стильного шума:

Рисуем кнопку-переключатель в Adobe Photoshop

Если вы решили самостоятельно нарисовать элементы пользовательского интерфейса для вашего сайта, этот урок поможет вам начать. Сегодня мы будем рисовать несложную кнопку-переключатель. Однако несмотря на всю простоту урока, полезен он тем, что дает представление о том, как передать углубления и объем кнопок для UI. Также урок будет интересен тем, кто еще не пробовал рисовать векторные изображения в Adobe Photoshop.

 

---

Шаг 1

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

Включите сетку (View > Show > Grid) и привязку с сетке (View > Snap To > Grid). Для начала нам понадобится расстояние между линиями сетки в 5px. Зайдите в Edit > Preferences > Guides, Grid & Slices и обратите внимание на раздел Grid. Укажите 5 в поле Gridline Every и 1 в поле Subdivision. Также смените цвет сетки на #a7a7a7. После того как вы закончили с настройками нажмите OK. Не пугайтесь вида этой сетки. Она упростит вашу работу.

Откройте палитру Info (Window > Info), чтобы следить за размером и расположением вашей работы.

Шаг 2

Выберите в качестве первого цвета #e8d8a7, возьмите инструмент Rounded Rectangle Tool и обратите внимание на меню настроек вверху экрана. Укажите радиус в 30px, создайте векторную фигуру размером 190 на 60px и убедитесь что она осталась выделенной.

Продолжаем работать с Rounded Rectangle Tool. Снова обращаемся к верхнему меню настроек и выбираем кнопку Add. Добавьте еще одну векторную фигуру размером 20 на 10px и разместите ее как показано на второй картинке. Привязка к сетке вам поможет.

Убедитесь что ваша фигура все еще выделена, и все тем же инструментом Rounded Rectangle Tool нарисуйте вторую векторную фигуру (как на третьей картинке).

Шаг 3

Посмотрите на палитру Layers (Window > Layers). Двойным кликом на слое с фигурой, которую мы только что нарисовали откройте окно Layer Style. Поставьте галочку напротив Drop Shadow, Inner Shadow, Outer Glow, Bevel and Emboss и Gradient Overlay, затем введите параметры, указанные на картинках ниже.

Шаг 4

Выберите в качестве первого цвета #a29261 и возьмите инструмент Rounded Rectangle Tool. Нарисуйте фигуру размером 180 на 50px, расположите ее как на картинке ниже и убедитесь что она все еще выделена. Убедитесь, что выбранный инструмент — Rounded Rectangle Tool, и в верхнем меню настроек нажмите на кнопку Subtract.

Нарисуйте фигуру размером 170 на 40px и расположите ее так, как показано на картинке ниже. Откройте окно Layers Style нового векторного слоя и введите параметры, которые вы видите на картинке ниже.

Шаг 5

Укажите в качестве первого цвета #d4c493 и выберите инструмент Rounded Rectangle Tool. Создайте фигуру размером 170 на 40px и разместите как показано на картинке ниже. Откройте окно Layers Style для этого слоя и введите указанные ниже параметры.

Вернитесь в палитру Layers и переименуйте этот слой в «interior».

Шаг 6

Для выполнения следующего шага нам понадобится расстояние между линиями сетки в 1px. Зайдите в меню в Edit > Preferences > Guides, Grid & Slices и введите 1 в поле Gridline Every. Выберите в качестве первого цвета #ac9c6b, возьмите инструмент Ellipse Tool, создайте круг размером в 4px и поместите так, как показано на картинке ниже.

Откройте окно Layers Style для этого слоя и введите параметры, что указаны ниже.

Шаг 7

Дублируйте фигуру, которую нарисовали в предыдущем шаге (CTRL + J). Выделите эту копию и перетащите ее вправо, как показано ниже.

Шаг 8

Укажите в качестве первого цвета #a29261 и возьмите Rounded Rectangle Tool. Нарисуйте фигуру размером 100 на 44px и разместите как показано ниже.

В окне Layers Style для этого слоя введите указанные параметры.

Шаг 9

Дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой на только что сделанную копию слоя и выберите Clear Layer Style.

Также для этого слоя снизьте параметр Fill до 0%, затем откройте Layer Style и введите указанные ниже параметры.

Шаг 10

Снова дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой по этой копии и выберите Сlear Layer Style.

Далее работаем с палитрой Layers. Удерживая CTRL нажмите на слой «interior». Должно появиться выделение по форме этой фигуры. Убедитесь что это случилось, затем выберите слой, который создали в начале этого шага и нажмите кнопку «Add layer mask».

После применения маски ваша работа должна выглядеть как на третьей картинке ниже. Нажмите Control + D чтобы снять выделение.

Шаг 11

Снова задайте выделение фигуре, к которой применили маску, снизьте параметр Fill до 0%, затем откройте окно Layer Style. Поставьте галочку напротив «Layer Mask Hides Effects», после чего активируйте Drop Shadow и введите параметры как на картинке ниже.

Шаг 12

Выберите в качестве первого цвета #85bc46, возьмите Rounded Rectangle Tool, создайте фигуру размером 5 на 14px и убедитесь что она осталась выделена. В верхнем меню настроек нажмите кнопку Add, и нарисуйте еще две фигуры размером 5 на 14px, как показано на картинке ниже.

Шаг 13

Выделите фигуры, которые нарисовали в предыдущем шаге и разместите как показано ниже. Откройте Layer Style для этого слоя и введите параметры, показанные на картинке ниже.

Шаг 14

Возьмите инструмент Type Tool (T) и просто напишите «ON», как показано на первой картинке ниже. Можете использовать жирный шрифт Latha, размером в 15pt и цвета #b6a675. Откройте Layers Style для слоя с текстом и введите значения из рисунков ниже.

Шаг 15

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

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

Шаг 16

Выделите текст, перепишите «ON» на «OFF» и разместите как на картинке ниже. Выберите слой с фигурой, к которой применяли маску и в меню выберите Edit > Transform > Flip Horizontal. После чего откройте Layer Style и просто инвертируйте угол указанный в закладке Drop Shadow.

Шаг 17

Теперь работаем с зелеными фигурами. Выделите их в палитре Layer, откройте Layer Style и измените параметры на те, что указаны ниже.

Работа сделана!

Вот как выглядит финальный вариант:

Автор урока Andrei Marius

Перевод — Дежурка

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

Как создавать 3D кнопки с помощью Adobe Photoshop

Есть много удивительных вещей, которые вы можете создать в Adobe Photoshop , которые полезны онлайн, начиная от простых рамок для фотографий и заканчивая сложными пользовательскими интерфейсами. Одной из самых полезных вещей, которые вы можете создать в Photoshop, являются кнопки 3D, которые пригодятся, если вы ведете блог или веб-сайт с пользовательским интерфейсом.

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

Шаг 1. Подготовьте документ

Хотя 3D-кнопки чаще всего появляются на веб-сайтах, важно отметить, что для них есть и другие приложения, такие как анимированные GIF-файлы, макеты продуктов и мобильные игры. В зависимости от того, для чего вы создаете эту кнопку, ваш окончательный формат файла и размеры могут отличаться.

Чтобы создать 3D-кнопку в Photoshop, вам нужно создать для нее собственный документ. Для этого откройте Photoshop и нажмите « Создать новый»> «Пользовательский» . Начните вводить свои значения.

Чтобы создать кнопку 3D, вам понадобится горизонтальный документ. Для наших мы использовали:

• Высота 900 x 300 пикселей
• 300 пикселей / дюйм
• Цветовой режим RGB

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

Шаг 2. Установите прямоугольник для 3D-кнопки

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

Чтобы создать 3D-кнопку, нажмите на инструмент Rounded Rectangle Tool в левой части экрана, показанный здесь красным. Вы также можете использовать ярлык U для доступа к нему.

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

Для нашей кнопки мы пошли с:

• 300 пикселей в ширину
• 75 пикселей в высоту

Мы также убедились, что углы были скруглены на 10 пикселей. Не слишком высоко и не слишком низко. Затем мы нажали ОК .

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

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

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

Шаг 3: Сделай свою кнопку 3D

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

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

Как только ваша коробка стиля слоя будет открыта, перейдите к опции Bevel & Emboss . Включи это.

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

Структура

• Стиль: Внутренний скос
• Техника: Зубило Софт
• Глубина: 605
• Направление: вверх
• Размер: 5
• Смягчить: 1

затенение

• Угол: 90
• Высота над уровнем моря: 37
• Режим Highlight: Color Dodge, 55% непрозрачность
• Shadow Mode: несколько, непрозрачность 25%

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

После того, как мы закончили с Bevel & Emboss, мы пошли в Contour и включили это тоже. Contour делает определение Bevel & Emboss немного сильнее, и для этого урока мы выбрали настройку Cone — Inverted .

Затем включите наложение градиента . Это то, что придает кнопке округлый, слегка «глянцевый» вид. Настройки следующие:

• Режим смешивания : наложение
• Непрозрачность: 90
• Стиль: линейный
• Угол: 90
• Масштаб: 100

Наконец, мы включили Drop Shadow , чтобы кнопка выглядела немного «приподнятой» на белом фоне веб-сайта или блога. Опять же, вот настройки:

Структура

• Режим смешивания: несколько
• Непрозрачность: 35
• Угол: 90
• Расстояние: 2
• Распространение: 6
• Размер: 8

Качество

• Контур: линейный
• Шум: 0
• Слой выбивает Drop Shadow: On

Теперь пришло время сохранить эти спецификации как стиль слоя.

Шаг 4: Сохранить как стиль слоя

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

Вот как.

Прежде чем нажать кнопку « ОК» в диалоговом окне « Стиль слоя» , нажмите « Новый стиль» . Когда вы это сделаете, Photoshop сохранит этот стиль слоя, который вы создали для своей кнопки.

Если вы используете Photoshop CC, этот новый стиль будет сохранен в разделе « Библиотеки », как вы можете видеть выше. Это очень быстро и легко получить доступ.

Шаг 5: Как использовать стиль сохраненного слоя

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

Сначала давайте создадим еще одну кнопку прямо над слоем с красной кнопкой, вот так. Давайте сделаем это зеленым, для акцента.

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

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

Шаг 6: добавь текст на кнопку

Далее мы собираемся добавить текст к кнопке.

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

В этом уроке мы напишем слово «подписаться», потому что это то, что вы часто видите на веб-сайтах и ​​в социальных сетях.

Мы также собираемся использовать веб-безопасный шрифт san serif. Окончательный выбор того, что вы используете для своей кнопки, зависит от вас. Montserrat, Proxima Nova, Arial и Verdana — широко используемые альтернативы, безопасные для Интернета.

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

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

Затем, нажмите на Inner Shadow , чтобы добавить немного депрессии (или затонувшей области) к вашему тексту. Это выглядит так, как будто буквы были выгравированы на кнопке. Точные настройки, которые мы использовали для этого урока, приведены ниже.

Структура

• Режим смешивания : умножение
• Непрозрачность: 35
• Угол: 90
• Расстояние: 2
• Дроссель: 4
• Размер: 1

Качество

• Контур: линейный
• Шум: 0

Затем примените Gradient Overlay к этим буквам, чтобы они легче смешивались с кнопкой, не выглядя плоскими. Опять же, наши настройки:

• Режим смешивания: Color Burn
• Непрозрачность: 90
• Стиль: линейный
• Угол: 90
• Масштаб: 100

Шаг 7: Завершение

После создания этого стиля текста, особенно если вы хотите использовать его снова, перейдите в « Новый стиль» и сохраните его, прежде чем нажать « ОК» .

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

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

Настройте свой блог с 3D-кнопками и виджетами

Теперь, когда вы знаете, как создавать 3D-кнопки в Photoshop, вы можете проявить креативность, создав собственные 3D-кнопки в соответствии с вашими потребностями. И с этими навыками в своем арсенале вы можете сделать продукт, который будет не только профессиональным, но и личным.

Хотите узнать о других вещах, которые вы можете сделать с этой программой? Вот как удалить фон в Photoshop

Как сделать круглую кнопку для сайта в фотошопе

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

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

Приступим. Создаем новый документ. 200 на 200 пикселей нам вполне хватит.

Увеличим масштаб документа до необходимых размеров. Так, чтобы было удобно.

Создаем новый слой с помощью вкладки «Слои» на верхней панели.

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

На верхней панели выбираем вкладку «Редактирование» — «выполнить обводку».

Цвет #2be8c3. Устанавливает параметры: ширина 10 пикселей, расположение – снаружи.

Снимем выделение.

Создаем новый слой. И возвращаемся на панель инструментов. Теперь нам нужен инструмент «многоугольник». Устанавливаем следующие настройки:

Вот такой треугольник у нас получился. Теперь мы можем уменьшить его размеры и перетащить его в центр кнопки. В этом нам поможет инструмент перемещение. Кликаем по фигуре и, удерживая «shift», изменяем размеры треугольника. Затем перемещаем его в центр.

Потянув за уголок, вращаем изображение и ставим треугольник в центр окружности.

Теперь нам остается только растрировать слой. Инструмент «растрирование» ищем в окне «Слои».

Вот такая замечательная кнопка переключения у нас получилась.

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

Попробуем немного усложнить элемент. В окне «Слои» выбираем «Параметры наложения».

Нас интересует вкладка «Тиснение». Устанавливаем следующие параметры:

Проделываем те же манипуляции со слоем с окружностью.

Наша кнопка стала более объемной.

Учебник

: Как создавать кнопки в Photoshop

Вы можете создать кнопку в Adobe Photoshop следующим образом:

• Создайте новый документ в Photoshop. Сопоставьте свойства с изображением на экране и настройте сетку в соответствии с указанными спецификациями.
• Выберите цвет переднего плана, выберите инструмент «Прямоугольник с закругленными углами» и нарисуйте форму. Линии сетки должны соответствовать форме кнопки. Теперь сетку можно отключить.
• Теперь для кнопки «Совершенный пиксель» можно применить стили с использованием слоев стилей.Необходимо добавить три слоя — градиентный оверлей, внутреннюю тень и внутреннее свечение.
• Теперь необходимо добавить текст к кнопке с помощью инструмента горизонтального набора. Форма кнопки и текст кнопки должны быть выровнены по центру.
• Кнопку можно быстро редактировать, используя эффекты стиля слоя, векторную маску и инструмент прямого выбора.

Добро пожаловать в мой первый учебник Think Tank. Здесь вы узнаете, как создать простую кнопку идеального пикселя в Photoshop. Ниже вы можете увидеть разницу между кнопкой с идеальным пикселем и кнопкой без идеального пикселя.

Шаг 1

Сначала откройте Photoshop и создайте новый документ (File> New). Затем сделайте так, чтобы свойства соответствовали показанным на моем снимке экрана.

Далее мы включим и настроим сетку. Лично я использую сетки только тогда, когда хочу быстро рисовать фигуры с точными размерами, поэтому я регулярно включаю / выключаю их по мере необходимости. Сначала включите сетку в верхнем меню (View> Show> Grid), затем включите привязку к сетке (View> Snap To> Grid), это поможет ограничить вашу фигуру точными размерами пикселей, когда вы вытягиваете кнопку.

Вы можете увидеть мои настройки сетки ниже, мне обычно нравится иметь линию сетки каждые 10 пикселей. Убедитесь, что линия сетки установлена ​​в пикселях, а не в сантиметрах или миллиметрах и т. Д. Не беспокойтесь о сетке, закрывающей ваш обзор, как только форма будет нарисована, мы можем отключить ее.

Шаг 2

Теперь, когда у нас есть документ и сетка, мы можем нарисовать форму кнопки. Сначала выберите цвет переднего плана (я использую # 00ABED).

Затем выберите инструмент «Прямоугольник со скругленными углами» (с радиусом угла 3 пикселя, выбранным в меню вверху) и нарисуйте форму в середине документа.Я нарисовал свой размер 180 на 40 пикселей.

Если вы увеличите масштаб, чтобы рассмотреть поближе (я увеличил масштаб до 1200%), вы увидите, что форма кнопки совпадает вплоть до линий сетки и идеальна по пикселям. Теперь мы можем отключить вид сетки (View> Show> Grid).

Шаг 3

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

Мы добавим 3 стиля слоя: наложение градиента, внутреннюю тень и внутреннее свечение. Мы не будем добавлять какой-либо цвет к этим стилям, что позволит очень быстро менять цвет кнопки в будущем, но об этом позже. Во-первых, давайте добавим наложение градиента. Выберите «Наложение градиента» на панели стилей слоя. Как только он откроется, нажмите на поле градиента, чтобы открыть редактор градиента. Убедитесь, что оба конца градиента белого цвета, затем уменьшите прозрачность левой стороны до «0» и нажмите «ОК», чтобы закрыть редактор градиента.Теперь в разделе Gradient Overlay панели стилей слоя уменьшите непрозрачность до 40%. Теперь ваша кнопка должна иметь легкий эффект светового градиента поверх синего цвета.

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

Шаг 4

Теперь ваша кнопка должна выглядеть примерно так.

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

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

Теперь у нас есть готовая кнопка Pixel perfect. Единственное, что осталось сделать, это поместить оба слоя в группу слоев, чтобы ваш psd-файл был аккуратным.

Шаг 5

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

Чтобы отредактировать размер, я всегда рекомендовал бы редактировать векторную маску, а не использовать инструмент свободного преобразования. Это поможет сохранить ваш угловой радиус нужного размера и пропорций. Для этого сначала выберите эскиз векторной маски на панели слоев. Затем вам понадобится инструмент «Прямое выделение» на панели инструментов, который позволит вам выбрать точки формы, которые вы хотите переместить.Выбрав их, вы можете сделать кнопку шире или уже. Лично я предпочитаю делать это с помощью клавиш со стрелками. Однако, когда вы делаете это, очень важно работать со 100% увеличением масштаба, иначе вы можете потенциально потерять этот идеальный край пикселя.

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

Создайте элегантную кнопку Photoshop за 15 минут

Пуговицы, пуговицы, пуговицы! Вы видите этих маленьких парней почти везде, куда вы смотрите в Интернете — в меню, контактных формах и на страницах продуктов (и это лишь некоторые из них).Поскольку кнопки являются неотъемлемой частью пользовательского опыта, я собираюсь показать вам, как создать свою собственную элегантную кнопку в Photoshop. Это довольно простой процесс, занимающий не более 15-20 минут.

Давайте начнем и добавим немного удивительности вашему пользовательскому интерфейсу.

Откройте Photoshop — Ctrl + N, чтобы открыть новое окно холста. Ширина и высота полностью зависят от вас, но убедитесь, что разрешение составляет не менее 72 точек на дюйм , а цветовой режим — RGB 8 бит .

Мы собираемся быстро подготовить фон — залейте текущий фон серым цветом.

Затем добавьте эффект Noise (Фильтр> Шум> Добавить шум…).

У большинства кнопок закругленные углы, но в данном случае я хочу, чтобы они были квадратной формы. Создайте новый слой (Ctrl + Shift + N), установите цвет переднего плана на оранжевый и используйте инструмент «Прямоугольник» (U), чтобы создать новую форму. Обязательно выберите Слои формы в верхнем меню.

Когда основная форма нарисована, мы собираемся добавить стили слоя. Всякий раз, когда вы хотите добавить стиль к слою, просто дважды щелкните слой (или щелкните правой кнопкой мыши слой> Параметры наложения), и появится окно стиля слоя .

Первый стиль, который мы добавляем, — это Drop Shadow .

Не закрывайте палитру стилей слоя! Следующий стиль, который нужно добавить — это Inner Shadow , это добавит блеска верхней части кнопки, придав ей трехмерный вид.

Двигаясь дальше, выберите Inner Glow , чтобы добавить объема. Это может показаться тонким дополнением, но поверьте мне, важны только мелкие детали.

Примените эффект Gradient Overlay и установите режим наложения на Overlay .Возможно, вам потребуется установить флажок Reverse рядом с градиентом, чтобы убедиться, что верхняя часть кнопки светлая, а нижняя — темнее.

Окончательный эффект — Обводка .

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

Теперь создайте обтравочную маску на белой фигуре (щелкните правой кнопкой мыши слой> Создать обтравочную маску).

Затем выделите слой с белой формой и добавьте маску слоя — щелкните значок маски слоя в нижней части палитры слоев.

Используйте инструмент «Градиент » (G) , чтобы покрыть белую форму градиентом от переднего плана к прозрачному .

Измените режим наложения для белой формы на Overlay. Теперь у нас есть гладкий эффект для кнопки.

Наша кнопка должна что-то говорить, верно? Я выбрал классический шрифт, например Helvetica Neue.

Легко разместить по центру текста на кнопке:

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

Придайте тексту эффект Drop Shadow , как показано ниже:

Ура, мы создали кнопку! Надеюсь, этот урок помог добавить еще одну красивую кнопку в ваш веб-дизайн.

Есть вопросы по созданию кнопки веб-сайта?

Как сделать простую 3d кнопку в Photoshop — Medialoot

Кнопки со стилями слоев

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

Сегодня я покажу вам, как легко вы можете создать простую 3D-кнопку в Photoshop, которую вы можете использовать с любым типом формы, масштабируемой и с любым цветом, который вы можете себе представить, и легко изменить ее, если вы передумаете после того, как закончили. .

Шаг 1

Откройте Photoshop и создайте новый документ больше, чем размер кнопки, которую вы хотите сделать. В этом случае я установлю ширину 850 пикселей и высоту 250 пикселей, чтобы работать было удобнее.

Шаг 2

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

Шаг 3

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

Шаг 4

Щелкните один раз по холсту и установите ширину на 420 пикселей, высоту на 50 пикселей, радиус на 10 пикселей и нажмите «ОК».

Шаг 5

Дважды щелкните миниатюру слоя, чтобы изменить цвет формы, и в окне выбора цвета установите цвет на # 5797d6 и нажмите OK.

Шаг 6

Перейдите в Layer> Layer Style> Inner Shadow и примените следующие настройки:

Шаг 7

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

Шаг 8

Выберите градиент от переднего плана к прозрачному.

Шаг 9

Щелкните правой кнопкой мыши Color Stop, установите для параметра Location значение 50% и щелкните OK.

Шаг 10

По-прежнему в окне редактирования Gradient Overlay примените следующие настройки:

Шаг 11

Теперь отметьте опцию Drop Shadow и примените следующие настройки:

Шаг 12

Перед тем, как нажать «ОК» в окне «Стиль слоя», нажмите кнопку «Новый стиль», установите для этого стиля имя «Форма кнопки» и нажмите «ОК».

Шаг 13

Нажмите кнопку «ОК» в окне «Стиль слоя».

Шаг 14

Перейдите в Window> Styles, чтобы открыть панель стилей. Как видите, созданный нами стиль «Button Shape» присутствует.

Шаг 15

Выберите инструмент «Текст» (T) и введите текст кнопки. В этом случае я использую Montserrat Bold с разрешением 16 пикселей и белым цветом.

Шаг 16

Выделив текстовый слой, перейдите в Layer> Layer Style> Drop Shadow и примените следующие настройки:

Шаг 17

Перед тем, как нажать «ОК» в окне «Стиль слоя», нажмите кнопку «Новый стиль», установите имя этого стиля на «Текст кнопки» и нажмите «ОК».

Шаг 18

Нажмите кнопку «ОК» в окне «Стиль слоя».

Шаг 19

Перейдите в Window> Styles, чтобы открыть панель стилей. Как видите, стиль «Текст кнопки», который мы только что создали, находится рядом с нашим стилем «Форма кнопки».

Шаг 20

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

Шаг 21

Выберите инструмент «Прямоугольник» (U) и щелкните один раз по холсту, чтобы отобразить окно «Создать прямоугольник». Установите ширину на 160 пикселей, высоту на 50 пикселей и нажмите ОК.

Шаг 22

Дважды щелкните миниатюру слоя, чтобы изменить цвет формы, и в окне выбора цвета установите любой цвет, который вы хотите использовать (в этом случае я буду использовать # 58bf4d), и нажмите OK.

Шаг 23

Выделив слой-фигуру, перейдите в Window> Styles.На миниатюрах стилей нажмите на стиль «Button Shape», чтобы применить его к нашей форме.

Шаг 24

Выберите инструмент «Текст» (T) и введите текст кнопки. Теперь я использую Lato Black с разрешением 18 пикселей и цветом # cefac9.

Шаг 25

Выделив текстовый слой, перейдите на панель стилей и щелкните стиль «Текст кнопки», чтобы применить этот стиль к нашему тексту.

Шаг 26

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

Выберите инструмент Custom Shape Tool (U). Убедитесь, что режим инструмента установлен на «Форма» на верхней панели инструментов, а из списка эскизов фигур выберите форму «Бычий глаз».

Шаг 27

Щелкните один раз по холсту. Установите ширину и высоту 30 пикселей и нажмите ОК.

Шаг 28

Дважды щелкните миниатюру слоя, чтобы изменить цвет произвольной формы, и в окне выбора цвета установите любой цвет, который вы хотите использовать (в этом случае я буду использовать # 3da132), и нажмите OK.

Шаг 29

Выделив слой с произвольной формой, щелкните один раз над стилем «Текст кнопки» на панели стилей, чтобы применить этот стиль к нашей произвольной форме.

Некоторые заключительные примечания

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

Как создать 3D-кнопки с помощью Adobe Photoshop

В Adobe Photoshop можно создавать множество удивительных вещей, которые могут быть полезны в Интернете, от простых рамок для изображений до сложных пользовательских интерфейсов.Одна из самых полезных вещей, которые вы можете создать в Photoshop, — это 3D-кнопки, которые пригодятся, если вы запустите блог или веб-сайт с настраиваемым интерфейсом.

В этой статье мы покажем вам, как создавать 3D-кнопки с помощью Photoshop, а также визуальные состояния «вверх» и «вниз», чтобы вы могли их анимировать. (В этой статье мы не будем рассматривать саму анимацию.)

Шаг 1. Подготовьте документ

Хотя 3D-кнопки чаще всего появляются на веб-сайтах, важно отметить, что для них есть и другие приложения, такие как анимированные GIF-файлы, демонстрации макетов продуктов и мобильные игры.В зависимости от того, для чего вы создаете эту кнопку, ваш окончательный формат файла и его размеры могут отличаться.

Чтобы создать 3D-кнопку в Photoshop, вам необходимо создать для нее собственный документ. Для этого откройте Photoshop и нажмите Create New> Custom . Начните вводить свои значения.

Чтобы создать 3D-кнопку, вам понадобится горизонтальный документ. Для наших мы использовали:

• 900 x 300 пикселей в высоту
• 300 пикселей / дюйм
• Цветовой режим RGB

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

Шаг 2. Настройте прямоугольник для кнопки 3D

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

Чтобы создать свою 3D-кнопку, нажмите на инструмент Rounded Rectangle Tool в левой части экрана, который здесь показан красным.Вы также можете использовать ярлык U для доступа к нему.

Щелкните один раз на белом слое: автоматически откроется окно Create Rounded Rectangle . Вы будете использовать это поле, чтобы указать размеры вашего прямоугольника.

Для нашей кнопки мы использовали:

• 300 пикселей в ширину
• 75 пикселей в высоту

Также мы позаботились о том, чтобы углы были скруглены на 10 пикселей.Не слишком высоко и не слишком низко. Затем нажали ОК .

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

Когда вы нажмете OK , Photoshop создаст прямоугольник с закругленными углами с этими размерами внутри вашего слоя.Вы можете изменить его цвета Fill и Stroke , используя раскрывающиеся меню в верхнем левом углу экрана.

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

Шаг 3. Сделайте кнопку 3D

После того, как вы создадите свою базовую кнопку и выберете ее цвет, вам нужно будет настроить ее в диалоговом окне Layer Style .Это сделано для того, чтобы он выглядел более трехмерным.

Чтобы получить доступ к диалоговому окну Layer Style , вы можете выбрать Layer> Layer Style из верхнего меню. Вы также можете дважды щелкнуть слой, содержащий вашу кнопку, чтобы вызвать его автоматически. Этот способ намного быстрее, и мы лично его предпочитаем.

Когда ваше окно стиля слоя открыто, перейдите к опции Bevel & Emboss . Включи это.

Это быстрый и простой способ придать краям кнопки более рельефный, трехмерный вид.В этом уроке мы использовали следующие настройки:

Структура

• Стиль: Внутренний скос
• Техника: Chisel Soft
• Глубина: 605
• Направление: Вверх
• Размер: 5
• Размягчение: 1

Оттенок

• Угол: 90
• Высота: 37
• Highlight Mode: Color Dodge, 55% непрозрачность
• Shadow Mode: Multiple, 25% непрозрачность

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

Закончив с Bevel & Emboss, мы перешли к Contour и тоже включили его. Контур немного усиливает определение Bevel & Emboss, и для этого урока мы выбрали настройку Cone — Inverted .

Затем включите Gradient Overlay . Это то, что придает кнопке округлый, слегка «глянцевый» вид.Настройки следующие:

• Режим наложения: Наложение
• Непрозрачность: 90
• Стиль: Линейный
• Угол: 90
• Масштаб: 100

Наконец, мы включили Drop Shadow , чтобы кнопка выглядела немного «приподнятой» на белом фоне веб-сайта или блога.Опять же, вот настройки:

Структура

• Режим наложения: Несколько
• Непрозрачность: 35
• Угол: 90
• Расстояние: 2
• Распространение: 6
• Размер: 8

Качество

• Контур: Линейный
• Шум: 0
• Слой выбивает падающую тень: вкл.

Пришло время сохранить эти характеристики как стиль слоя.

Шаг 4: Сохраните как стиль слоя

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

Вот как.

Прежде чем щелкнуть OK в диалоговом окне Layer Style , щелкните New Style .Когда вы это сделаете, Photoshop сохранит этот стиль слоя, который вы создали для своей кнопки.

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

Шаг 5: Как использовать сохраненный стиль слоя

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

Во-первых, давайте создадим еще одну кнопку прямо над слоем с красной кнопкой, вот так. Сделаем это зеленым, для акцента.

Далее — вместо двойного щелчка по самому слою, чтобы открыть диалоговое окно Layer Styles — дважды щелкните по стилю слоя на панели Libraries .

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

Шаг 6. Добавьте текст на кнопку

Затем мы собираемся добавить текст к кнопке.

Чтобы добавить текст, создайте новый слой над двумя слоями с кнопками. Щелкните инструмент «Текст» , чтобы начать печатать.

В этом руководстве мы собираемся написать слово «подписаться», потому что это то, что вы довольно часто видите на веб-сайтах и ​​в социальных сетях.

Мы также собираемся использовать веб-шрифт с засечками. Окончательный выбор, какую из них использовать для своей кнопки, зависит от вас. Montserrat, Proxima Nova, Arial и Verdana — широко используемые альтернативы, безопасные для Интернета.

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

Сначала дважды щелкните слой, содержащий ваш текст, чтобы вы могли вывести его в диалоговом окне Layer Style .

Затем нажмите Inner Shadow , чтобы добавить к тексту немного углубления (или углубления). Это выглядит так, будто буквы выгравированы на кнопке. Ниже приведены точные настройки, которые мы использовали для этого урока.

Структура

• Режим наложения: Умножение
• Непрозрачность: 35
• Угол: 90
• Расстояние: 2
• Дроссель: 4
• Размер: 1

Качество

Затем примените Gradient Overlay к этим буквам, чтобы они легче сливались с кнопкой, не выглядя плоскими.Опять же, настройки для наших:

• Режим наложения: Затемнение цвета
• Непрозрачность: 90
• Стиль: Линейный
• Угол: 90
• Масштаб: 100

Шаг 7: Завершение

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

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

Довольно круто, да? Чтобы сохранить файл, выберите « File»> «Save As » и сохраните его как соответствующий формат файла для любого проекта, над которым вы, возможно, работаете.

Настройте свой блог с помощью 3D-кнопок и виджетов

Теперь, когда вы знаете, как создавать 3D-кнопки в Photoshop, вы можете проявить творческий подход, создавая свои собственные 3D-кнопки в соответствии с вашими потребностями.Обладая этими навыками в вашем арсенале, вы можете создать продукт, который будет не только профессиональным, но и индивидуальным.

Хотите узнать о других вещах, которые вы можете делать с помощью этой программы? Вот как удалить фон в Photoshop.

5 лучших поставщиков бесплатного облачного хранилища

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

Читать дальше

Об авторе Шианн Эдельмайер (136 опубликованных статей)

Шианн имеет степень бакалавра дизайна и опыт работы в подкастинге.Сейчас она работает старшим писателем и 2D-иллюстратором. Она занимается творческими технологиями, развлечениями и производительностью для MakeUseOf.

Более От Шианн Эдельмайер

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться

Создание красивых кнопок в Photoshop — — The Theme Foundry

Дрю Стройны, 15 октября 2010 г.

Несколько месяцев назад я изменил дизайн всех кнопок на сайте The Theme Foundry.В этом уроке я собираюсь шаг за шагом пройти процесс создания кнопки.

Краткий обзор

• Приложение: Photoshop CS4 (CS5 также должен работать нормально)
• Сложность: Начальный — Средний
• Расчетное время выполнения: 15-20 минут

Шаг 1. Введите текст кнопки и настройте размер холста

Создайте новый документ Photoshop (установите для содержимого фона значение Transparent ) и введите текст для новой кнопки.В этом примере используется шрифт Archer Bold. Если вам нужна бесплатная альтернатива, попробуйте Museo Sans 700. Поместите текст в центр холста, перетащив его с помощью инструмента выбора, и отрегулируйте размер холста пропорционально ( Image → Canvas Size ) размеру вашего текста.

Шаг 2. Создайте кнопку

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

Шаг 3. Добавьте наложение градиента

Теперь у вас должен получиться очень простой прямоугольник с закругленными углами поверх текста. Измените расположение слоев так, чтобы текст находился поверх прямоугольника (см. Изображение).Выберите новую форму на панели слоев и выберите Gradient Overlay из меню эффектов в нижней части панели слоев. Теперь добавьте наложение зеленого градиента, дважды щелкнув левую и правую цветные остановки по очереди (два значка в форме дома под полосой градиента). Установите левый ограничитель цвета на 2f9514 , а правый ограничитель цвета на 5bbf40 . Теперь кнопка должна иметь красивый градиентный зеленый слой и начинает принимать форму!

Шаг 4: Добавьте внутреннее свечение

Не выходя из панели стилей слоя, установите флажок Inner Glow в левом столбце.В разделе Structure установите Blend Mode to Overlay , уменьшите непрозрачность до 21% и измените цвет на черный (000000). В разделе Elements увеличьте Choke до 100% и уменьшите Size до 1px. Щелкните ОК!

Шаг 5. Дублируйте, измените стиль, измените размер

Дублируйте слой-фигуру, над которым мы только что работали, щелкнув его правой кнопкой мыши на панели слоев и выбрав Дублировать слой .Выберите новую фигуру на панели слоев (она должна называться копией фигуры 1) и дважды щелкните стиль Inner Glow на панели слоев под новым слоем копии фигуры 1. Установите белый цвет (ffffff) и увеличьте непрозрачность Opacity до 38%.

Щелкните стрелку выбора и установите флажок Показать элементы управления преобразованием на панели инструментов в верхней части окна. Теперь удерживайте Command (Control в Windows) + пробел , чтобы отобразить инструмент масштабирования.Используйте инструмент масштабирования, чтобы перетащить небольшую рамку вокруг верхней центральной ручки преобразования. Это даст нам крупный план кнопки. Щелкните и перетащите верхний центральный маркер преобразования вниз, как тень окна, открывая исходное внутреннее свечение (см. Изображение ниже). При увеличении прокрутите холст и повторите это для маркера преобразования в левом центре, маркера преобразования вправо в центре и маркера преобразования в центре внизу. Маркер трансформации может быть трудно найти, потому что он находится на самом краю холста, поэтому внимательно присмотритесь.Когда закончите, нажмите галочку на верхней панели инструментов, чтобы сохранить изменения.

Шаг 6. Очистите текст

Уменьшите масштаб, удерживая нажатой Command (Control в Windows) + 1 . Дважды щелкните значок текстового поля (большая буква T) внутри слоя «Просмотр моего портфолио» на панели слоев. Используйте панель инструментов в верхней части окна, чтобы установить белый цвет текста (ffffff), и щелкните галочку, чтобы сохранить изменения.

Добавьте тень, нажав кнопку эффектов в нижней части панели слоев (та же самая кнопка, которую вы нажимали ранее при добавлении наложения градиента) и выбрав Drop Shadow из списка.Уменьшите непрозрачность до 15% и уменьшите Distance и Size до 1px.

Шаг 7. Добавьте тень к кнопке

Выберите исходную форму на панели слоев и тень, нажав кнопку эффектов в нижней части панели слоев. Установите непрозрачность на 15% и Distance и Size на 2 пикселя. Увеличьте размер холста на 5 пикселей с каждой стороны, чтобы освободить место для новой тени.

Шаг 8: Сохраните и наслаждайтесь!

Сохраните новую кнопку для Интернета, выбрав «Сохранить для Интернета и устройств» в меню «Файл» (я рекомендую сохранить ее как 24-битный прозрачный PNG), и начните использовать ее на своем сайте. Если вам понравился этот урок или вы хотите поделиться своим мнением, напишите в комментариях.

Скачать исходные файлы

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

Понравился этот пост? Подробнее об этом читайте в обучающих материалах.

Glossy Photoshop Button Tutorial

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

Кнопки в Photoshop

Вы можете использовать кнопки на своем веб-сайте или в блоге.

Хотя в этом руководстве показано, как создать статическую кнопку, вы можете с помощью CSS и GIF создавать анимированные веб-кнопки.Но это хорошее начало.

Давайте кратко рассмотрим, что вы узнаете в этом уроке Photoshop с глянцевой кнопкой. Сначала вы создаете Eclipse и заливаете его цветом.

Затем добавьте эффекты стиля слоя, например:

Наложение цвета

Внутреннее свечение

Наружное свечение

Внутренняя тень

Ход

Наложение градиента

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

Посмотреть видео:

Далее к учебнику:

Как сделать глянцевые кнопки в Adobe Photoshop

Создайте новый документ размером 800 пикселей на 600 пикселей. Создайте новое затмение с цветом # 22297e и измените размер затмения на 500px X 500px.

Перейти к стилю слоя . Добавьте наложение цвета с белым цветом и наложите режим наложения, затем измените непрозрачность на 20%.

Добавьте внутреннее свечение белого цвета, непрозрачность 80% и размер 75 пикселей. Остальные параметры оставьте без изменений.

Добавьте внешнего свечения с черным цветом; Режим наложения: Нормальный; Непрозрачность: 40% и размер: 50 пикселей.

Добавить внутреннюю тень черным цветом; Режим наложения: Overlay; Непрозрачность: 40%; Расстояние: 0 пикселей; Дроссель: 100% и размер: 4 пикселя.

Теперь продублируйте слой и очистите стиль слоя на дублированном слое, щелкнув правой кнопкой мыши и выбрав Очистить стиль слоя . Затем измените непрозрачность заливки на 0%. Добавьте обводку , и 50 пикселей белого цвета и режим наложения наложения. Измените непрозрачность обводки на 15%.

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

Теперь сделайте еще одну копию слоя с затмением и переместите ее в верхнюю часть стопки.Отредактируйте форму с помощью инструмента прямого выбора , как показано на рисунке ниже. Добавьте наложение цвета с белым цветом, режим наложения для наложения и непрозрачность до 20%.

Теперь вернитесь к стилю слоя первого затмения и добавьте наложение градиента с настройками ниже:

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

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

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

Поделиться, Твитнуть или поставить палец вверх!

Кнопка Create в Photoshop

(Гостевой пост) Теперь создадим красивую кнопку в Photoshop.У вас должен быть Adobe Photoshop CS3, CS4 или CS5. В этом уроке я использую Adobe Photoshop CS3.

Шаги по созданию кнопки в Photoshop

1. Шаг Щелкните Пуск >> Все программы >> Adobe Master Collection CS3 >> Adobe Photoshop CS3.

2. Шаг Теперь в Photoshop нажмите File >> New и в открывшемся окне укажите ширину = 200 пикселей, высоту = 50 пикселей и нажмите OK.

3.Шаг . Теперь выберите инструмент «Прямоугольник со скругленными углами» (ярлык — U) и на панели параметров убедитесь, что выбран «слои формы», и установите Радиус = 5 пикселей.

4. Шаг Нарисуйте прямоугольник в области документа. Убедитесь, что вы установили черный цвет переднего плана.

5. Шаг В окне слоев (ярлык — f7) вы могли заметить слой формы. Щелкните его правой кнопкой мыши и выберите «Растрировать слой».

6. Шаг Щелкните правой кнопкой мыши слой (фигура 1) в поле слоев и выберите параметры наложения.

7. В окне Layer Style выберите Bevel and Emboss и заполните детали, как показано на снимке экрана.

8. Шаг Снова выберите «Gradient Overlay» и заполните детали, как показано на скриншоте.

9. Шаг Добавьте «Drop Shadow» и заполните детали, как показано на скриншоте.

10. Шаг Инструмент выбора текста (Ярлык — T), вы можете выбрать шрифт, который вам нравится, на панели параметров вверху.Затем введите свой текст.

11. Чтобы автоматически выровнять текст по точному центру и с равномерным интервалом по бокам, выберите инструмент «Прямоугольная область» (ярлык — M) и выделите все содержимое или просто нажмите Ctrl + A, а затем выберите инструмент «Перемещение» ( Ярлык — V). Затем нажмите «Выровнять центры по вертикали» и «Выровнять центры по горизонтали» соответственно.

12. Добавьте стиль слоя к тексту, щелкнув правой кнопкой мыши текстовый слой в палитре слоев и выбрав «Параметры наложения».Выберите «Outer Glow» и настройте заливку, как показано на скриншоте.

13. Наконец, давайте добавим эффект стекла на кнопку. Выберите «Elliptical Marquee Tool» (ярлык — M). Вы найдете его в «Rectangular Marquee Tool». Когда вы продолжите удерживать его, вы увидите «Elliptical Marquee Tool». Нарисуйте половину, как на скриншоте. Теперь создайте новый слой в палитре слоев, нажав «Создать новый слой» внизу или на палитре слоев, или в строке меню нажмите Слой >> Новый >> Слой (сочетание клавиш — Ctrl + Shift + N)

14. Щелкните «Цвет переднего плана», расположенный под инструментами, и выберите цвет как: # 33cccc. Затем нажмите «ОК».

15. Убедитесь, что выбран самый верхний слой, который вы только что добавили.