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

В этом материале мы рассмотрим, как сделать кнопки для макета автосайта из статьи "Создаём макет автомобильного сайта в Photoshop CS6".

Создаём большие кнопки

Для начала, сделаем большие кнопки типа "Подробнее".

Приступим. Создаём новый документ размером 121 на 34 пикселя на прозрачном фоне, потом заливаем его чёрным. Фоновый слой мы потом удалим, но сейчас он потребуется для наглядности.

В инструментальной палитре выбираем инструмент "Прямоугольник с скруглёнными углами" (Rounded Rectangle Tool):

rounded rectangle

В панели параметров указываем тип контура - "Фигура" (Shape) и радиус скругления - 2 пикселя, цвет заливки - любой, в данном примере у меня светло-серый. Затем создаём фигуру размером с наш документ, 121 на 34 пикселя, для наглядности можно увеличить масштаб отображения:

51

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

Итак, придадим фигуре стили слоя "Обводка" (Stroke)" и "Наложение градиента"; (Gradient Overlay) со следующими параметрами:

52

Собственно, кнопка почти готова:

53

Теперь осталось только добавить нужный текст. Для текста я использовал шрифт Arial Regular размером 14 пт белого цвета:

54

Не забываем удалить фоновый слой!

Создаём кнопки для добавления в социальные сети

Создаём новый документ размером 95 на 17 пикселей с белым фоном, затем заливаем его чёрным. Как и в первом случае, фоновый слой нужен для наглядности, потом мы его удалим.

Снова выбираем инструмент "Прямоугольник с скруглёнными углами" (Rounded Rectangle Tool), в панели параметров указываем тип контура - "Фигура" (Shape) и радиус скругления - 8 пикселей, цвет заливки - любой. Затем создаём фигуру размером с документ, 95 на 17 пикселей, для наглядности можно увеличить масштаб отображения:

55

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

56

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

57

Как Вы видите, прямые углы логотипа выступают за скруглённые углы кнопки, а это не есть хорошо. Чтобы исправить это недостаток, для начала растрируйте стили слоя фигуры. Для этого надо кликнуть правой клавишей мыши по слою с фигурой в палитре слоёв и из открывшегося контекстного меню выбрать пункт "Растрировать стили слоя" (Rasterize Layer Style). Теперь применяем к слою с логотипом обтравочную маску:

58

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

59

Осталось только добавить текст размером 12 пт, шрифт Myriad Pro, цвет - белый:

60.png

И удалите фоновый слой.

Теги:

Помощь сайту

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

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

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

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

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