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

Время выполнения: 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

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

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

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

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

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

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #0c1b26.

Шаг 2.
На панели инструментов выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставляем «Радиус» (Radius) 50 пикселей и создаем фигуру как на рисунке ниже, цвет любой.

Шаг 3.

Шаг 4.
Далее стиль слоя «Внутренняя тень» (Inner Shadow).

Шаг 6.
Получили такой результат.

Шаг 7.
На новом слое создаем небольшой кружок, цвет любой.

Шаг 8.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.

Шаг 9.
Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.

Шаг 11.
Получили такой результат.

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

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

Шаг 14.
Применим к тексту стиль слоя «Тень» (Shadow).

Шаг 15.
Получили такой результат.

Шаг 16.
Теперь аналогичным образом создаем еще четыре кнопки, пишем на них текст и получаем готовое меню навигации.

P.S. Постовой. А вы знаете, что автор блога hronofag.ru Drive Alienn пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.

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

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

Шаг 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… Рекомендую поиграть с настройками, для получения наиболее подходящего вам результата.

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

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

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

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

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

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

Теперь создайте группу слоев, кликнув на иконку с папкой в палитре слоев, и назовите ее button (типа, кнопка).

Будем работать в этой группе, т.к. правильное структурирование слоев всегда полезно. Теперь выберите инструмент Rounded Rectangle Tool и установите в настройках радиус округления углов на 5px и фиксированный размер формы 200х45px.

Щелкните по любому месту документа, создав при этом основу для кнопки.

Затем, дважды кликните по слою с формой и перейдите к окну редактирования стилей. Или просто перейдите Layer > Layer Style > Blending Options . Добавьте следующие стили:

Вот, что Вы должны были получить:

Теперь добавьте текст. В этом уроке используется пресловутый Calibri размером 16pt белого цвета. И примените стиль Drop Shadow к этому слою.

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

Работаем с этой группой слоев. Откройте ее и дважды щелкните по слою с основой для кнопки. Откроется окно редактирования стилей слоев. Добавьте стиль Color Overlay .

Щелкните по группе слоев hover , выберите инструмент Move Tool и, не используя мышь, клавишами перемещения (по-простому стрелками) переместите группу вниз, как на рисунке. Главное, чтобы изображения примыкали друг к другу.

Готово. Как и в предыдущем шаге создайте дубликат группы слоев hover и назовите ее active (типа, нажимаем). Щелкните по слою с основой кнопки, удалите стиль Color Overlay и измените стиль Gradient Overlay , как на рисунке:

Также переместите изображение этой группы слоев вниз, но уже ниже изображения группы hover .

Итак, первый этап пройден. Мы создали три варианта кнопки и готовы перейти к правильному сохранению.

Сохранение изображения

Сделайте невидимым фоновый слой, щелкнув на иконку в виде глаза напротив слоя. Находясь на группе слоев active в палитре слоев, нажмите Ctrl+Shift+Alt+E , чтобы создать новый слой, который включит в себя все видимые части изображения (в нашем случае это кнопки). Затем перейдите на этот слой. После этого, используя любой инструмент выделения, создайте область выделения вокруг изображения, как на рисунке:

Нажмите Ctrl+C , чтобы скопировать изображение и создайте новый документ:

Обратите внимание, что документ создается уже с теми размерами, которые включают в себя все видимые части скопированного изображения. После создания изображения, нажмите Ctrl+V , чтобы вставить наши кнопки. Сделайте невидимым фоновый слой и перейдите Save for Web . Сохраните файл под названием buttons.png .

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

Верстка кнопки, используя стили CSS

Откройте Ваш html -файл. Сначала создадим ссылку:

Нажми меня!

Вот что получается:

A { display: block; /*Говорим браузеру, чтобы он отображал ссылку, как блочный элемент*/ width:202px; /*Определяем ширину блока*/ height:47px; /*Определяем высоту блока*/ text-indent: -9999px; /*Отступ первой строки*/ background-position: left top; /*Выравниваем фон по левому (X) верхнему (Y) углу*/ background-repeat: no-repeat; /*Не "размножать" картинку*/ background-image: url(buttons.png); /*Спрайт*/ }

Обратите внимание на значение параметра text-indent . Такой большой отступ сделан для того, чтобы сам текст было не видно, а ссылка была. Текст оставляется для поисковых роботов, так сказать для получения SEO-эффекта)). Вот, что мы получим:

Теперь нам необходимо указать нашей ссылке, как вести себя при наведении и клике по ней. Для этого используются псевдоклассы :hover и :active . В этом шаге понадобится вооружиться калькулятором. Объясню почему: так как изображение у нас одно, то для подстановки определенной его части в качестве фона блока с ссылкой, нам необходимо указать точное число пикселей, на которое будем смещать изображение. Посмотрите на рисунок:

Мы создавали кнопку высотой 45px. После применения стиля Stroke , согласно параметрам у нас с каждой стороны кнопки прибавилось по 1px. Итого, получается, что высота кнопки стала 47px. Если учесть, что первоначальное смещение фона равно 0, то при наведении мыши на кнопку, нам необходимо сместить фон на 47px вверх, т.е. подставить в значение Y , которое отвечает за смещение по вертикали, параметра background-position -47px. Аналогично и с нажатием на кнопку, только уже смещаем не на 47px, а на 47px+47px=94px.

A:hover { background-position: left -47px; } a:active { background-position: left -94px; }

Вот и все! Использование спрайтов выгодно тем, что обычно размер (вес) спрайта намного, в разы, меньше суммарного размера (веса) отдельных изображений. Но тут есть и негативный момент – чтобы подготовить спрайт, требуется большее количество времени. Решать Вам.

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

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

Шаг 1. Создаем новое изображение размером шириной 250px и высотой 100px

Шаг 2. Выделяем изображение «Выделение - Всё (Ctrl+A)»

Шаг 3. Закругляем края у выделения «Выделение - Закруглить прямоугольник» (настройки по умолчанию)

Шаг 4.

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

Шаг 6. Продолжаем работать с активным выделением. Уменьшим его на два пикселя (2 px). Для этого нажимаем по верхнему меню «Выделение - Уменьшить» и вводим нужный параметр - это 2px. И нажимаем «ОК»

Шаг 7. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 8. Заливаем активное выделение градиентной заливкой. Цвет переднего плана немного посветлее нашего базового цвета. У меня это получился светло зеленый с параметром #43c343. Выбираем инструмент «Градиент» с параметром «Основной в прозрачный» и применяем инструмент от верха нашего изображения к низу.

Должно получится как на рисунке:

Шаг 9. Продолжаем работать с активным выделением. Создадим новое прямоугольное выделение в режиме вычитание

Шаг 10. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 11. Продолжаем работать с активным выделением. Заливаем активное выделение градиентной заливкой. Цвет переднего плана-Белый. инструмент «Градиент» с параметром «Основной в прозрачный». Применяем инструмент от верха нашего выделения к низу Должно получится так, если вы все сделаете правильно:

Шаг 12. Выделение - Снять (Shift+Ctrl+A)

Шаг 13. Добавим надпись на нашу кнопку с помощью инструмента «Текст» напищем нужное нам слово. В моем случае - это «Download»

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