Большая синяя кнопка в Adobe Illustrator CS6

Всем привет!
Мы начинаем новую серию по отрисовке элементов дизайна сайта в программе Adobe Illustrator.

Почему Иллюстратор? А не Фотошоп??? Все очень просто. Потому что рисовать мы их будем в векторе. Векторное изображение намного лучше, ведь его можно свободно масштабировать без потери качества картинки.

Уроки постоим следующим образом. Я конечно буду стараться в каждом уроке давать и текстовое (со скриншотами) пояснение... И видео. Но уж не обессудьте, если где-то будет только текст... или только видео ))). Думаю, что это ничего страшного.

Итак, начнем. Сегодня мы нарисуем несложный элемент — большую синюю кнопку для сайта.


Для начала посмотрите видео, а потом переходите к пошаговым инструкциям.

Шаг 1.

Открываем Adobe Illustrator. Создаем новый документ произвольного размера (я создал доккумент 800×800 пикселей). Режим RGB. Разрешение 72 пикс/дюйм.

Уроки Иллюстратор (кнопка для сайта)

Шаг 2.

Рисуем прямоугольнок со скругленными углами. Для этого кликаем мышью на пиктограмме инструмента «Прямоугольник» и удерживаем клавишу мыши, пока не откроется окно с выбором дополнительных инструментов. Щелкаем на пиктограмме инструмента «Прямоугольник со скругленными углами» .

Делаем щелчок мышью в любом месте рабочей области и в появившемся окне вводим ширину 400px, длину 80px и радиус скругления углов 8px. (хотя можно и на глаз нарисовать).

Шаг 3.

Далее будем раскрашивать. Нам нужно добиться вот такого эффекта:

Для этого обводке нашего прямоугольника присваиваем цвет: #004E9C и толщину — 3pt.
А заливку будем делать при помощи градиента. Открываем палитру «Градиент» (Ctrl + F9) и настраиваем вот так:

Цвета градиента слева-направо: #53A5E7, #00548A, #003B6E, #002545.

Шаг 4.

Добавляем текст. Кликаем на пиктограмму инструмента «Текст» . И вводим необходимый текст.

Далее настраиваем шрифт. Открываем палитру «Символ» (Ctrl + T). И настраиваем вот так:

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

Шаг 5.

Добавляем тексту эффект утопленности (а по сути тень). Для этого при выделенном тексте заходим в меню: «Эффект» >> «Стилизация» >> «Тень» и настраиваем как на скрине:

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

Шаг 6.

Добавляем тень кнопке. Выделяем саму кнопку и снова заходим в меню: «Эффект» >> «Стилизация» >> «Тень» и настраиваем:

Получится вот так:

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

Шаг 7.

Выделяем всю нашу кнопку (вместе с надписью) и копируем. Копию помещаем четко под оригиналом.

Затем выделяем только нижнюю кнопку (без надписи). Открываем палитру «Оформление» (Shift + F6).
Внимание! Обязательно выделить строку с заливкой, чтобы эффект применялся только к заливке:

Нажимаем внизу палитры пиктограму «Добавить эффект» и выбираем «Стилизация» >> «Внутреннее свечение». Настраиваем вот так:

Цвет свечения: #75BCF9. Применяем эффект. Должно получиться вот так:

И немного осветляем обводку второй кнопки. Меняем ее цвет на #0066CC
Получаем вот это:

Сохраняем и можем пользоваться. Ура!

На этом мы заканчиваем первый урок по созданию элементов веб-дизайна в программе Adobe Illustrator. А вот и наша кнопка уже в рабочем варианте. Если нажать на нее — получите исходники этой кнопки:

скачать

Подписываемся на обновления и ждем новых интересных уроков. Кстати, наш канал на Youtube Вы можете найти здесь.

Успехов Вам!

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.