Читать


Главная » 2014 » Декабрь » 1 » Урок 1. Рисуем опрятные кнопки
00:56
Урок 1. Рисуем опрятные кнопки
В этом уроке я подробно опишу процесс создания объёмной кнопки, попытаюсь раскрыть тему объёма в дизайне в целом, подскажу как опрятно создавать графические элементы.

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

Урок 1. Рисуем опрятные кнопки

Теперь о форме. Форма для объёмной кнопки может быть и строго прямоугольной и с округлёнными углами. Второй вариант используется чаще, что продиктовано больше трендами в веб-дизайне, нежели личными предпочтениями.

Итак, рисуем фигуру.

Урок 1. Рисуем опрятные кнопки

Урок 1. Рисуем опрятные кнопки

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

Урок 1. Рисуем опрятные кнопки

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

Урок 1. Рисуем опрятные кнопки

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

Урок 1. Рисуем опрятные кнопки

Теперь создадим дубликат слоя с фигурой нажатием клавиш Ctrl+J. Перейдём на слой под ним и стрелкой вниз подвинем фигуру на несколько пикселей. Сейчас из-за одинаковой цветовой заливки кажется что кнопка просто увеличилась по высоте. Следует выделить другим цветом данную фигуру.
Что касается изменения цвета нижней фигуры, тут всё проще простого - дважды кликните на слое в области цвета и выбирайте нужный цвет в открывшейся палитре.

Урок 1. Рисуем опрятные кнопки

Я указал  3-ий из выбранных мною цветов:

Урок 1. Рисуем опрятные кнопки

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

Урок 1. Рисуем опрятные кнопки
Нажмите для увеличения


Смотрим что у нас получилось! Уже довольно неплохо, правда?!

Урок 1. Рисуем опрятные кнопки

Теперь ещё один штрих. Зажмём Ctrl и кликнем левой кнопкой разок по верхней фигуре:

Урок 1. Рисуем опрятные кнопки

Нажмём по очереди клавишу "M", чтобы перейти к инструменту выделения, и клавишу "D", чтобы сбросить цвета, а затем Ctrl+Shift+N, чтобы создать новый слой над фигурой. Теперь жмём Ctrl+Backspace и выделенная область закрашивается в белый цвет. Подвинем стрелкой "Вниз" выделение на один пиксель вниз и жмём Delete. Ctrl+D снимет выделение. Вверху осталась однопиксельная полосочка. Выставим прозрачность  на 50% и кнопка готова!

Урок 1. Рисуем опрятные кнопки

Осталось добавить текст, который кстати тоже нужно грамотно оформить на кнопке.

Выберем инструмент "Текст" (клавиша "T") и кликнем примерно в центре кнопки. Напишем текст, выберем равнение по центру. Цвет выберем чуть темнее того, что у нас на нижней фигуре кнопки.

Урок 1. Рисуем опрятные кнопки

Теперь проведём знакомую серию действий. Создадим дубликат слоя с текстом (Ctrl+J), перейдём на нижний слой текста, подвинем его на один пиксель вниз и выставим ему белый цвет, после чего прозрачность уберём на 40%

Урок 1. Рисуем опрятные кнопки

Кнопка готова! Надеюсь вы почерпнули в этом уроке некоторые полезные приёмы! Можете также экспериментировать с цветами, учитывая вышеприведённые советы, а также добавлять стили слоя, как примеру тень, но не забывайте, что всё хорошо  в меру!

Урок 1. Рисуем опрятные кнопки

P.S. Данный урок представил также на форуме Demiart.ru (если вы зарегистрированы на том форуме, смотрите урок здесь). Он оказался полезным для новичков-фотошоперов.

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


Категория: Уроки | Просмотров: 400 | Добавил: M-Wizard | Теги: фотошоп, уроки, Веб-дизайн | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА