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

Сегодня поговорим о такой важной мелочи как кнопка, а точнее как создается кнопка в фотошопе.

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

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

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

Давайте рассмотрим эти четыре состояния:

1. Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
2. Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
3. Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
4. Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).

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

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

При помощи стиля слоя зальем форму кнопки линейным градиентом для этого идем слои > стиль слоя > наложение градиента либо дважды кликнем по слою с формой кнопки.

Создадим объем и тень для нашей кнопки при помощи копирования нашего слоя. Для этого, перетащите наш слой с кнопкой на пиктограмму (иконку) создать новый слой , либо сделайте наш слой с кнопкой активным после чего идем в слой > создать дубликат слоя . Проделаем это действие дважды. После чего назовем слои кнопка, объем, тень. После чего кликнем на слое тень правой кнопкой мыши и отчистим стиль слоя, проделаем тоже самое со слоем объем. Затем поменяем цвет у слоя объем. И сдвинем слои вниз при помощи инструмента перемещение (V).

Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.

Теперь доработаем слой с тенью. Идем слой > растрировать . Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.

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

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

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+ G и переименуем группу. Продублируем группы для остальных состояний кнопки, для этого идем слои > дубликат группы и даем название состояния кнопки. Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

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

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

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

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

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

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

Шаг 1

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

Теперь следуем инструкции. Свернем документ, чтобы он был не на весь экран.

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

Теперь делаем так, как показано на скриншоте ниже, тем самым у нас появится второй экран с нашим документом. Главная изюминка этого метода в том, что один из документов можно сделать большого масштаба, к примеру 200-500% и тем самым намного удобнее будет работать с деталями, а на втором в 100% масштабе видеть все изменения.

Этап подготовки пройдет, пора начинать рисовать саму кнопку.

Шаг 2

Создаем новый слой, выбираем цвет, который будет основным для кнопки, я предпочел этот: #8cb314 , выбираем инструмент Rounded Rectangle Tool (настройки инструмента можно поглядеть на скриншоте ниже) и рисуем форму будущей кнопки.

Шаг 3

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

Выбираем цвет, немного темнее, чем у нас на кнопке, я использовал: 6a8a09, после используем Gradient Tool и выставляем настройки как на скриншоте ниже.

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

Но появилась проблема - градиентная заливка не соответствует форме кнопки. Благо решается она очень просто, щелкаем правой кнопкой мыши на слое и выбираем Create Clipping Mask.

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

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

Подбираем светлый цвет (светлее, чем верхняя часть кнопки), выбираем Gradient Tool и настраиваем, как на скриншоте ниже.

Теперь создаем новый слой (примечание: все слои, которые мы накладываем поверх кнопки, сразу переводим в Clipping Mask, свидетельством тому, что слой переведен служит маленькая, черная стрелка слева от изображения слоя).

На новом слое применяем градиент, вытягиваем его сверху вниз.

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

Шаг 4

Общий объем задан. Приятным дополнением будет более тщательная проработка границ кнопки. С помощью Rectangular Marquee Tool создайте прямоугольное выделение высотой в один пиксель.

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

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

Еще раз копируем слой с линией, опускаем его еще ниже на 1 пиксель и красим в светлый тон, близкий к белому или белый.

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

Полученное выделение закрашиваем белым и уменьшаем непрозрачность слоя. Я снизил до 12%.

Шаг 5

Добавляем текст на кнопку.

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

Остался последний штрих - я считаю, что саму кнопку можно сделать слегка четче. Для этого надо слить то большое количество слоев, что мы сделали на протяжении всего урока, кроме двух текстовых слоев. Делается это так: выделяем через Shift все слои и жмем Ctrl+E.

После того, как слои будут слиты в единый, сделаем его копию и применяем к ней фильтр Filter ? Sharpen ? Unsharp Mask… Рекомендую поиграть с настройками, для получения наиболее подходящего вам результата.

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

Кнопка готова, удачи.

Поделитесь уроком

Правовая информация

Заходя на любую интернет страничку, мы видим в дизайне всевозможные кнопки,которые призывают что-то покупать,читать и смотреть. Хотите узнать в Adobe Illustrator? Тогда следуйте сегодняшнему уроку

Вот такую кнопку мы будем учиться рисовать

1.Для начала откроем Adobe Illustrator и создадим новый документ размером 380pt*400pt.

2. Создадим три круга различного диаметра,один чуть меньше другого. Берём инструмент Ellipse tool (L) и рисуем окружность с зажатой клавишей Shift. Так у нас получится именно круг,а не овал. У меня получились три круга следующих размеров: 228pt*228pt, 223pt*223pt и 217pt*217pt.

3. Следующий шаг-закрашиваем круги линейным градиентом. Так мы создадим металлическую текстуру. Примеры градиентов можно посмотреть на скриншотах ниже. Тут можно эксперементировать и дать волю фантазии.

4.Выделяем все три круга и выравниваем по центру.

5. Продолжаем создавать основу нашей кнопки. Рисуем ещё две окружности,это будет центр кнопки. Они должны быть значительно меньше предудыщих кругов и иметь небольшую разницу в диаметре. Для свой кнопки я выбрала размеры 190pt*190pt и180pt*180pt.

6. Зальём их градиентом. Для окружности побольше-линейный,для меньшей-радиальный. Скриншоты градиентов показаны ниже

7. Выделяем всё и выравниваем по центру. Наша кнопка почти готова!

8. Рисуем тень. Для этого создадим новый слой,назовём его “тень” и положим под уже существующий. В новом слое рисуем эллипс (L) и заливаем его каким угодно цветом. Сейчас это не имеет значения.

9. Берём инструмент перо Pen tool(P) с заливкой серого цвета и ставим в центре еллипса точку.

10.Меняем цвет заливки эллипса на белый.

11.Выделяем эллипс и точку,сделанную пером. Идём в меню Object-Blend-Blend options. Выбираем Smooth color.

13. Получаем тень без всяких прозрачностей. Такую с радостью примут все . Выделяем всё и выравниваем по горизонтали.

06.07.2015 27.01.2018

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

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

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

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

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

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

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

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

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

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

А также сам градиент, цвета — #ff8c00 и #ffcc3f .

Кнопка преобразилась.

Осталось добавить надпись. Я использовал шрифт Myriad Pro и белый цвет. Размер и цвет шрифта — также нужно выбирать исходя из дизайна где будет находиться ваша кнопка.

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

Для этого сделайте копию слоя с надписью и ту которая ниже передвиньте на 1 пиксель вниз и поменяйте цвет — #be6d00 . Точно также мы делали с прямоугольниками.

Уровень сложности: Средний.

Время выполнения: 1 час.

В этом уроке я научу вас рисовать кнопки для плеера. В этот раз — фиолетовые и розовые, потому что серые и черные иногда кажутся немного скучными. Кнопки рисовать нетяжело. В работе мы будем использовать такие эффекты как Внешнее Свечение и Размытие по Гауссу, а также инструменты Трансформации и Превращения.

Шаг 1

Откройте новый веб-документ. Внешний круг кнопок — полупрозрачный, поэтому фон в этот раз для нас важен. Включите инструмент Прямоугольник (M), нарисуйте фигуру 720 x 170 пикселей и залейте фиолетовым цветом. Перейдите в палитру Внешний Облик и во вспомогательном меню выберите команду Добавить Новую Заливку. Для этой новой заливки выберите темно-серый цвет (85% черного). А затем откройте меню Эффект > Имитация и примените эффект Зернистость фотопленки. Установите Непрозрачность 70% и фон готов.

Шаг 2

Включите инструмент Эллипс (L) и нарисуйте круг 83 x 83 пикселя. Залейте его линейным градиентом, а угол установите 90 градусов. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1.5 пикселей. Чтобы сделать круг полупрозрачным, установите Непрозрачность 50%.

Шаг 3

Скопируйте круг, вклейте копию вперед и удалите все оформление. Скопируйте и вклейте назад новый круг (зеленый), чтобы получить еще один (красный). Прежде чем продолжить, откройте меню Редактирование > Установки > Основные и установите Перемещение курсора (Keyboard Increment) 0.5 пикселей. А теперь выделите красный круг и переместите его, дважды нажав клавишу со стрелкой вниз. Выделите оба круга и в палитре Обработка контуров нажмите кнопку Удаление из составного объекта (Subtract from shape area) > Преобразовать (Expand).

Получившуюся фигуру отодвиньте назад и залейте ее радиальным градиентом от белого к черному. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1 пиксель. Установите режим наложения Осветление (черный цвет станет прозрачным) и Непрозрачность 60%.

Шаг 4

Выделив первый круг, откройте меню Объект > Контур > Создать параллельный контур, установите и примените смещение -8 пикселей, чтобы получить круг меньших размеров. Удалите все оформление и залейте его фиолетовым цветом. Откройте меню Эффект > Стилизация и примените эффект Внешнее Свечение (параметры указаны на рисунке). Вокруг второго круга появится тень.

Шаг 5

Скопируйте и вклейте вперед второй круг, цвет заливки оставьте, а эффект Внешнее свечение удалите (в палитре Внешний облик). Выделив новый круг, откройте меню Объект > Контур > Создать параллельный контур. Установите и примените смещение -7 пикселей, чтобы получить круг меньших размеров. Измените цвет заливки на фиолетовый. Выделите оба круга, созданных в этом шаге, откройте меню Объект > Переход > Параметры перехода, выберите Заданное число шагов 20. А затем снова откройте меню Объект > Переход и выберите команду Создать.

Шаг 6

Дальше откройте палитру Слои, выделите из группы Перехода фиолетовый круг меньших размеров. Скопируйте и вклейте его вперед, но вытащите из группы, потому что там он не нужен. Залейте новый круг (красный) линейным градиентом от белого к черному и установите угол 90 градусов. Режим наложения выберите Осветление (черный станет прозрачным), а Непрозрачность установите 40%.

Шаг 7

Скопируйте и вклейте вперед последний круг и сделайте голубую обводку. Затем скопируйте и вклейте вперед голубой круг, чтобы получить красный круг, и сдвиньте его, пять раз нажав клавишу со стрелкой вниз. Выделив оба круга, в палитре Обработка контуров нажмите кнопку Удаление из составного объекта (Subtract from shape area) > Преобразовать (Expand). Получившуюся фигуру залейте радиальным градиентом от черного к серому. Затем откройте меню Эффект > Размытие > Размытие по Гауссу и примените Радиус 1.7 пикселей. Режим наложения установите Умножение. И два или три раза нажмите клавишу со стрелкой вниз, чтобы немного сдвинуть фигуру.

Шаг 8

Дальше займемся значками на кнопках. Чтобы создать значок для кнопки Play, включите инструмент Многоугольник, сделайте щелчок на документе и введите значения как на рисунке, чтобы получить треугольник. Поверните его на -90 градусов, откройте меню Эффект > Стилизация > Скругленные углы и примените Радиус 5 пикселей. Чтобы создать значок для кнопки Stop, с помощью инструмента Прямоугольник (M) нарисуйте квадрат 20?20 пикселей и снова примените эффект Скругленные углы. Значок для кнопки Pause создается из двух тонких прямоугольников (4?22 пикселя). Только в этот раз, применяя эффект Скругленные углы, выберите Радиус 2 пикселя.

Затем выделите все три значка, в меню Объект выберите команду Преобразовать внешний облик и затем Разгруппировать. Измените размер значка для кнопки Play, сделайте несколько копий и в комбинации со значком для кнопки Pause создайте значки для кнопок Play Faster и Play Next (см. рисунок ниже). Когда закончите, сгруппируйте фигуры, из которых они состоят. Затем откройте меню Объект > Трансформировать > Зеркальное отражение, выберите Вертикальное и нажмите Копировать. И у вас будут готовые значки для кнопок Play Slower и Play Previous.

Шаг 9

Залейте значок для кнопки Play фиолетовым цветом. Перейдите в палитру Внешний облик и во вспомогательном меню выберите команду Добавить новую заливку. Для второй заливки выберите цвет как на рисунке, а затем откройте меню Эффект > Исказить и трансформировать > Трансформировать и в блоке Переместить установите по вертикали 1.5 пикселей. С остальными значками сделайте то же самое.

Шаг 10

Вернемся к кнопке из шага 7. Сгруппируйте все фигуры, из которых она состоит. Затем откройте меню Объект > Трансформировать > Перемещение. В поле «По горизонтали» установите 100 пикселей и нажмите Копировать. Повторите это действие пять раз (Ctrl + D). Остается только расположить значки на кнопках — и готово.

Шаг 11

Фон у розовых кнопок такой же как и у фиолетовых. Его можно просто скопировать и поменять цвет заливки (см. рисунок ниже).

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

Также измените цвет заливки значков (см. рисунок ниже). Повторите шаг 10 и розовые значки готовы.

Шаг 12

Если вам не нравятся женские цвета, можете создать черные кнопки. Начните с фона и измените цвет заливок…

Затем замените фиолетовые оттенки кнопок — серыми (см. рисунок ниже).

Затем измените цвет значков, расположите их на кнопках — и готово.

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

У вас остались вопросы или есть что добавить по теме статьи?