Кнопка play для сайта — уроки фотошоп

Cоздание светящейся кнопки «Play» в фотошопе

Здравствуйте дорогие мои читатели! Сегодня я расскажу Вам о том, как создать красивую светящуюся кнопку “Play”. Этот урок предназначен для начинающих пользователей программы AdobePhotoshop, он легок в исполнении, поэтому Вы должны попробовать выполнить его =).

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

Конечный результат:

Окей, давайте начнем!

Шаг 1

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

Создаем новый слой и рисуем на данном слое желтый круг в центре холста:

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

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

Далее добавляем еще один слой под слоем с кругом. Используя мягкую черную кисть, рисуем тень под кнопкой: (используйте инструмент Свободное трансформирование(Ctrl+T), чтобы «сжать» отпечаток кисти и получить тень):

Конечный результат первого шага:

Шаг 2

Теперь давайте добавим стрелочку на нашу кнопку – создайте новый слой и выберите инструмент Многоугольник из панели инструментов:

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

Далее нарисуйте треугольник, как показано ниже: (может оказаться полезным включение отображения сетки, используйте ее как направляющие с помощью комбинации клавиш Ctrl+’).

Примените следующие Стили слоя к слою со стрелкой:

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

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

Вот, что получилось у нас на данном этапе:

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

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

Дублируйте этот слой еще дважды, поверните и переместите эти слои к остальным сторонам треугольника:

Текущий наш результат выглядит так:

Шаг 3

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

Используем инструмент Перо, чтобы создать контур. Далее создадим обводку для нашего контура с помощью желтой кисти размером в 5px (не забудьте поставить галочку возле опции Имитировать нажим):

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

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

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

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

Тиснение

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

Наложение узора:

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

Шаг 4

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

Снимите выделение (Ctrl+D), сместите этот слой немного вправо и у Вас получится вот такой эффект:

Дублируйте данный слой(Ctrl+J), отразите по горизонтали и поместите в левую часть кнопки:

Сейчас у Вас должен быть примерно такой результат:

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

Динамика формы:

Рассеивание:

Передача:

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

Шаг 5

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

Поиграв немного с цветами, я решил добавить корректирующий слой Цветовой тон/Насыщенность поверх всех слоев, чтобы придать свечению немного красноватого оттенка:

Конечный результат:

Создаем красивую кнопку для сайта в Фотошопе

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

Начнем с того, что создадим новый документ, на котором будем работать. Я сделал серенький фон (почему-то часто попадается такой фон на сайтах, где нужны кнопки). На панели инструментов выбираем Rounded Rectangle Tool (прямоугольник со скругленными краями). Показал на скриншоте ниже.

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

Делаем форму

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

На панели слоев выбираем слой с нашей фигурой и добавляем ей стили Gradient и Stroke (для этого внизу панельки Layers нажимаем на кнопку Functions и выбираем один из перечисленных ранее стилей, второй настроем уже в открывшейся панели).

В настройках Gradient выставляем прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, а также стиль Linear и угол 90 градусов. Чтобы было нагляднее, сфоткал этот экран.

Настраиваем теперь Stroke – это будет рамка или ободок для нашей кнопки. Делаем максимально тонкой – выставляем всего 1px, “Color” ставим такой же, как внизу градиента – #0e6aab.

Получаем вот такую основу, с которой нам предстоит совсем чуть-чуть поработать.

Добавляем текстовую надпись

Добавляем на нашу основу текст. Например, при нажатии должно отправляться письмо, поэтому сделаем надпись “Отправить”. Шрифт я выбрал Arial размера 18 и начертанием Bold, цвет белый.

Также, ниже создаем копию надписи, но Coloe #1b75af и сдвигаем на одну точку вправо и вниз. Результат ниже.

Создадим еще белый слой-подложку и сдвинем его по аналогии с текстом. Это поможет немного отделить объект от фона, добавит объем.

Скачать PSD-шаблоны кнопок для сайта (набор из 8 штук)

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

Скачать (размер архива 380 кб)

Видео-урок на ту же тему

Если вам лень читать текст и смотреть скрины и вы привыкли к видео-урокам, то можете посмотреть несколько хороших мануалов от сторонних авторов.

Похожие публикации на блоге:

Создание кнопки в фотошопе

/ Сергей Нуйкин / Уроки по фотошопу

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

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

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

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

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

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

Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.

Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.

Нажатие — это состояние кнопки, при котором пользователь нажал на нее.

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

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

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

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

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

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

И сдвинем слои вниз при помощи инструмента перемещение (V).

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

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

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

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

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу.

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

Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

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

Далее отредактируем состояние кнопки при нажатие.

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

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

И наконец, сделаем кнопку в активном состояние. Для этого необходимо изменить цвет наложения градиента как у кнопки наведение, а также убрать тень и объем как у кнопки нажатие.

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

Можно конечно поменять еще и цвет у нашей надписи, но я этого делать не буду.

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

Рисуем кнопку-переключатель в 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

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

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

Как нарисовать кнопку в Фотошопе в 2018 году

Инструкция

Создайте новый документ с помощью комбинации клавиш Ctrl+N.

Установите нужный размер, например, 200 на 100 пикселов.

Документ создали. Теперь можно приступить к созданию кнопки.

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

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

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

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

Для этого перейдите в палитру «Стили» и выберите подходящий стиль для нашей кнопки.

В этом примере использован стиль Blue Glass.

Растрируйте верхний слой: меню «Слой» — команда «Растрировать» — пункт «Слой».

Нажмите клавишу Ctrl и, удерживая её, левой кнопкой мыши выберите иконку верхнего слоя. При этом кнопка выделится пунктирной линией.

Чтобы создать по краям кнопки небольшую каёмку, нажмите «Выделение — Модификация — Сжать».

В открывшемся окне поставьте 3 пиксела.

Получилась такая пунктирная обводка.

Инвертируйте выделение с помощью комбинации клавиш Shift+Ctrl+I.

Скопируйте выделение на новый слой, нажав клавиши Ctrl+J. При этом в палитре «Слои» появится третий слой.

Выберите для небольшой каёмки шириной в 3 пиксела понравившийся стиль. Для этого снова зайдите в палитру «Стили» и выберите нужный. В этом примере применён стиль каёмки Chiseled sky, т.к. он сочетается с цветом кнопки.Получилась такая вот кнопка.

По желанию, вы можете применить свои стили, которые вам больше нравятся.Осталось написать текст. Для этого выберите инструмент «Горизонтальный текст» (Т). Выбрать параметры шрифта можно на панели параметров для настроек этого инструмента.

Вот ваша кнопка и готова.

Обратите внимание

В этом интереснейшем уроке мы расскажем, как нарисовать человека в фотошопе, используя графический планшет.  Прежде чем начинать рисовать в фотошопе, сделайте простой набросок на бумаге и отсканируйте его. Шаг 2. Создайте новый слой (Ctrl + Shift + N) и назовите его «sketch».

Полезный совет

В этом уроке по теме как нарисовать аниме в Фотошоп,мы в финале получим вот такой персонаж: 1.Итак , для начала вам нужно Новый документ создать (Ctrl+O) документ .И начеркать (мышкой или планшетом) примерный эскиз Вашего аниме персонажа.Или же нарисовать его карандашом от руки и потом перекинуть на компьютнр через сканер и просто открыть документ в Фотошоп.

В предыдущей статье я рассказала вам об основных правилах стиля WEB 2.0.  А в этой статье применим эти правила на примере создания кнопки для сайта.

Идём в Photoshop и создаём новый документ CTRL+N.

Ширину выставляем 500px, высоту 300px.

На верхней панели нажимаем на пункт меню «окно» и выбираем «слои», или просто нажимаем F7.

У нас появляется вот такое окно:

Слою 1 даём название «фон». Чтобы изменить название, нужно щёлкнуть два раза мышкой по Слою1.

!!! Всегда давайте названия каждому слою! Именно по названию вы всегда сможете найти нужный вам слой.

Кнопку для сайта мы сделаем на голубом фоне.

Берём инструмент «Заливка»

и заливаем фон голубым  цветом.

Для точного подбора цвета скачайте программу ColorMania.

Сама кнопка будет шириной 300px, высотой 100px.

Включаем линейку: CTRL+R или на верхней панели нажимаем пункт «просмотр» и выбираем «линейки».

Выставляем направляющие. Вертикальные на 100px и на 400px, горизонтальные на 100px и на 200px.

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

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

Вверху выставляем параметры: заливку выбираем белую, обводку выключаем.

Радиус (там же на верхней панели) делаем 10px.

А теперь аккуратно строго по направляющим рисуем нашу кнопку.

У вас должно получиться вот так:

Направляющие отключаем CTRL+;

Обратите внимание на то, что в окне «слои» появился новый слой, переименовываем этот слой, щёлкнув два раза левой кнопкой мыши,  и даём ему название «кнопка».

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

Основа для нашей кнопки готова, теперь наша задача cделать из неё кнопку с градиентом в стиле WEB 2.0.

Итак, для этого применяем стили.

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

Выбираем слой «кнопка», щёлкнув по нему один раз мышкой.

Нажимаем на кнопку fx и выбираем пункт «наложение градиента»

У нас появляется вот такое окно:

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

Нижний цвет берём тёмно-синий, верхний голубой, нажимаем везде OK и у нас получается вот такая кнопка для сайта с градиентом:

Но выглядит она как-то плосковато, поэтому добавляем тень и обводку.

Нажимаем fx и выбираем стиль «тень» и выставляем параметры как на картинке.

И добавляем обводку: fx -> обводка.

Наша кнопка для сайта теперь выглядит вот так:

Ну а теперь можно дать нашей кнопке название.

Берём инструмент «текст» или просто нажимаем латинскую клавишу «T», параметры текста выставляем следующие:

Шрифт – Verdana, bold, 30px.

И пишем текст «КНОПКА».

Применяем к тексту стиль «тень» с параметрами как на картинке.

И, наконец, у нас получилась вот такая замечательная кнопка для сайта:

Сохраняем нашу кнопку в формате Photoshop(*.PSD;*.PDD).

Это самый простой вариант кнопки с градиентом.

Как сверстать такую кнопку с помощью HTML и CSS читайте вот здесь

Создать кнопку для сайта

15.11.2013

Наведите на нее курсор.

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

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

Документ для удобства я сделала больше. Кнопка будет меньшего размера.

Итак, документ создан. Далее выбираем цвет #96b55b и инструмент Rounded Rectangle. Выделяем прямоугольную область с закругленными краями. Это основа кнопки.

Далее дублируем слой. Изменяем цвет на #243f01 и немного уменьшаем в размерах. Это будет средняя часть кнопочки.

Далее размоем среднюю часть по Гауссу. Выполняем команды Filter / Blur / Gaussian Blur и выставляем приблизительно 3,5 px.

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

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

Нажимаем Delete (обратите внимание, что активным должен быть верхний белый слой, т.е. выделен синим в панели Layers)

Далее делаем прозрачность слоя 59%

Теперь снова вернемся к самому нижнему, основному слою кнопки. И немного изменим стиль слоя. Команды Layer / Layer Style… И действуем, как показано на фото, пошагово выполняя настройки:
Падающая тень.

Внешнее свечение. Цвет #6a931e

Обводка. Цвета заливки: #b5d48d     и     #dcfead

Все – кнопка создана. Далее добавим текст. При помощи инструмента Tool делаем надпись.

Немного изменим стиль надписи.

Итак, мы создали кнопку для сайта.

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

Для этого поработаю со средней (темной) частью кнопки.
Я делаю ее активной в панели Layers и вызываю окно со стилями слоя. Далее выставляю необходимые параметры.
Внутреннее свечение. Цвет #ecffbe

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

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

Далее сохраняем их в формате png и устанавливаем на сайте.

  Copyright © Внимание! Сайт idei-photoshop.com защищен законом об авторском праве. Копирование материала может быть использовано только с разрешения администратора сайта и указанием активной ссылки на сайт.Все права защищены.  

Поиск по сайту. :=>?:8 play

• Главная»
• Поиск
• «:=>?:8 play»

• В данном уроке я расскажу Вам, как создавать Peel Away объявления (уголки).
• В этом уроке я покажу вам 8 отличных способов, позволяющих сделать обычные скучные html-списки привлекательными.
• Удивлюсь если jQuery не является вашим любимым фрэймворком! В нём просто всё: эффекты, манипуляция с данными и многое другое. В этой статье речь пойдёт о 8 новых jQuery плагинах, о которых должен знать каждый разработчик.
• В этой статье мы рассмотрим 8 jQuery плагинов, которые предназначены для быстрого внедрения сложных элементов в ваш веб дизайн.
• 8 основных иконок для веб сайта. Векторный формат исходника открывает возможности для неограниченного масштабирования без потери качества.
• Metro UI CSS — набор стилей CSS для создания интерфейса сайта в стиле Windows 8 Metro UI. Библиотека дает возможность быстро и без затей построить оригинальный сайт.
• Заготовка в виде набора правил CSS и кода jQuery для формирования элементов интерфейса в стиле Windows 8 с использованием эффектных анимаций.
• Структурировать информацию в одно хорошо сложенное целое – основная задача при создании вебсайта, которую нужно решать до его оформления.
• В интернете существует огромное количество информации о различных техниках дизайна интерфейса, создании шаблонов вэбсайтов, решении типовых проблем и обобщенных рекомендаций по практичности взаимодествия с пользователем. Руководства экспертов ведут Вас тернистой дорогой к созданию хорошего интерфейса. Но что это такое — хороший интерфейс пользователя? Чем характеризуется эффективный интерфейс сайта?
• Не секрет, что стандартный поиск в WordPress не очень точный. Проблема заключается в том, что WordPress ищет термины в весьма широком диапазоне, подразумевая, что если вы написали в строке поиска «урок+CSS+меню», то нужно выдать каждую запись, где встречается хотя бы один из терминов, что приводит к большому объему найденных материалов. Поэтому, не смотря на большую кучу найденного, пользователь в действительности не получает то, что ему нужно. Такое положение необходимо исправить и улучшить.

Видеокурс «HTML с нуля»

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

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

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс «CSS с нуля»

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

При регистрации введите промокод 1popov и получите 28 дней бесплатного использования.

Делаем глянцевую кнопку для сайта

Главная » Уроки фотошоп» Уроки по созданию графики для сайта в Фотошопе

28.12.2010, 21:38

Рисуем глянцевую кнопку для сайта в Фотошоп 

Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом #838383. Выберите инструмент Rounded tool(Прямоугольник со скругленными краями). Установите следующие настройки:

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

Шаг 2. Щелкните дважды на слое с прямоугольником и примените следующие стили слоя:

Drop shadow (Тень):

Inner glow (Внутреннее свечение)

Bevel and Emboss (Тиснение/скос)

Gradient overlay (Наложение градиента)

Stroke (Обводка)

Результат:

Шаг 3. Выберите инструмент Pencil (Карандаш) с размером 2 пикселя. Измените основной цвет на #eee1cd. Сделайте горизонтальную линию поперек вашего прямоугольника.

Примените следующие стили слоя:

Inner shadow (Внутренняя тень)

Outer glow (Внешнее свечение)

Результат:

Шаг 4. Убедитесь, что слой с линией все еще активен. Выполните команду Layer — Layer Mask- Reveal All (Слои- Слой-маска — Показать все). Выберите инструмент Gradient(Градиент) и установите следующие настройки:

Примените градиент как показано на рисунке:

Ваш результат:

Шаг 5. Выберите инструмент Pen(Перо) и создайте форму, как показано на рисунке.

Выполните команду Filter- Blur -Gauassian blur (Фильтры — Размытие — Размытие по Гауссу) с радиусом 0.6 пикселя.

Шаг 6. Активируйте слой с прямоугольником.

Выделите содержимое этого слоя. Для чего зажмите CTRL и щелкните на символе маски.

Инвертируйте выделение (SHIFT + CTRL + I). Вернитесь на слой с фигурой, которую вы рисовали пером. Удалите выделение. Уберите выделение (CTRL + D).

Ваш результат:

Шаг 7. Дублируйте слой и расположите его симметрично.

Шаг 8. Сделайте активным слой с прямоугольником и выделите его содержимое. Создайте новый слой над слоем с прямоугольником и выполните команду Edit — Stroke (Редактировать — Выполнить обводку). Настройки показаны на рисунке.

Уберите выделение. Выполните команду Layer- Layer Mask- Reveal All (Слои — Слой-маска -Показать все). Выберите инструмент Gradient(Градиент). Создайте градиент как показано на рисунке.

Ваш результат (после уменьшения непрозрачности (Opacity) до 75%):

Шаг 9. Теперь создайте текст. Определитесь, что вы хотите написать. Цвет текста — #e7e7e7. Слово site на рисунке залито белым цветом.

Примените к слою следующие стили:

Gradient overlay (Наложение градиента)

Stroke (Обводка)

Результат:

Перевод: Гревцов Никита.