Уроки фотошопа, графика, дизайн
arrow

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

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

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

Красивая кнопка в фотошопе

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

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

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

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

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

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

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

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

Красивая кнопка в фотошопе

Если хотите узнать больше о работе с инструментом 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) и использовать на радость себе и пользователям.

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

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

Красивая кнопка в фотошопе

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Комментарии (3)

  1. Nataly:

    По поводу блика внизу (шаг 26) — есть ведь не один вариант, как его сделать, правильно? Я вот, например, нарисовала на отдельном слое белую линию мягкой кистью, уменьшила ее непрозрачность до 23%, режим Soft Light, потом маска и прошлась по краям мягкой кистью, чтобы сгладить переходы. А как этот блик сделали вы, можно подробнее?

    • M@X M@X:

      Nataly, у меня этот блик сделан точно таким же образом, разве что непрозрачность может отличаться. Зачастую можно даже не менять режим на Soft Light. И желательно для слоя с этим бликом установить Clipping Mask, или обрезать лишнее (чтобы часть блика не выходила за края кнопки).

  2. ASP:

    Отличный урок, спасибо!

Оставить комментарий

Имя: *

Сообщение: