Рисуем баннер на конкурс.

В прошлом посте я рассказывал про конкурс на лучший баннер, объявленный авторами блогов ЗАПИСКИ МИКРОСТОКОВОГО ИЛЛЮСТРАТОРА и Marovaki Дизайн Блог .
Так как я решил принять в нём участие – выполняю одно из условий конкурса. А именно, выкладываю урок о том, как делался мой баннер в редакторе Adobe Illustrator 10.



Всё начинается с идеи будущего рисунка.

Идея:
1) Задний план – градиент голубой -> бледно-оранжевый, символизирует небо, переходящее в лист бумаги.
2) Объекты – слева радуга, символизирует свободу, радость, счастье и полёт фантазии; справа мультяшный цветной карандаш (синий), символизирует творческое начало человека.
3) Заголовок – надпись «Клуб Свободных Художников» шрифтом, имитирующим пропись.

Всё просто и понятно, поэтому обойдёмся без эскиза.


Начнем работу:

Создаём новый документ в Illustrator’е размером 468x60 пикселей. Таковы размеры баннера по условиям конкурса.


1) Рисуем задний план.

С помощью инструмента Rectangle Tool(Прямоугольник) рисуем прямоугольник с размерами 468x60, открываем вкладку Gradient(Градиент) на боковой панели (или идем Window->Gradient) и выставляем Type(Тип) Linear(Линейный). Убираем обводку прямоугольника. Меняем цвета градиента на голубой и бледно-оранжевый. Для этого выделяем ползунок на градиентной линейке и открываем инструмент Fill(Заливка), подбираем нужный цвет, жмём OK (если цвет сбрасывается на монохром – делаем тоже самое с зажатой клавишей Alt). С помощью инструмента Gradient Tool(Инструмент Градиент) меняем направление градиента на наклонное.



2) Рисуем объекты.

Радуга.
С помощью инструмента Rectangle Tool(Прямоугольник) рисуем вытянутый прямоугольник. Делаем ещё 6 копий этого прямоугольника и расставляем фигуры друг под другом, ровняем с помощью инструмента Align(Выравнивание). Раскрашиваем полученные 7 копий в цвета радуги (красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый).



Группируем прямоугольники. Полученную конструкцию преобразуем в кисть. Для этого перетаскиваем радугу на панель Brushes(Кисти), выставляем тип кисти New Art Brush(Новая Художественная Кисть), Direction(Направление) по длине радуги. Теперь с помощью инструмента Pen Tool(Перо) рисуем дугу. Не снимая с нее выделение идем в кисти и выбираем ту, которую только что сделали из радуги. Должно получиться что-то похожее.



Радугу необходимо разобрать, иначе с ней неудобно будет работать. На верхней панели идем Object->Expand Appearance (Объект->Разобрать Выделенное). Теперь радуга масштабируется и искажается как обычная фигура, а не кисть. Осталось убрать начальную дугу, которая была основой радуги. Разгруппировываем фигуру, отодвигаем радугу в сторону. Теперь на пустом месте рамкой можно поймать и удалить эту дугу (она невидимая).

Карандаш.
С помощью инструмента Pen Tool(Перо) рисуем контуры карандаша. Закрашиваем его в синий цвет, грани делаем различных оттенков, чтобы передать объём. Преобразуем наш карандаш в кисть как описано выше. И с помощью инструмента Paintbrush Tool(Перо) рисуем изогнутую кривую. После нескольких попыток должен получиться симпатичный изогнутый карандашик. Дорисовать глаза и рот можно инструментом Pen Tool(Перо) или любым другим, привычным для Вас инструментом.



Теперь располагаем объекты справа и слева, как задумывалось ранее. Для большей реалистичности во вкладке Opacity(Прозрачность) выставим прозрачность радуги на 50%, а у карандаша пририсовываем тень. Чтобы оживить картинку нарисуем облака.



3) Делаем заголовок.

Пишем текст «Клуб Свободных Художников» с помощью инструмента Type Tool(Текст). Нажав правой кнопкой мышки на тексте, заходим во вкладку Font(Шрифт) и подбираем подходящий. В данном случае Brush Script MT Italic. Располагаем текст посередине баннера. Подбираем контрастный цвет, чтобы надпись была видна.



Осталось экспортировать картинку в JPEG формате. Не забываем создать Crop Marks(Метки Обреза), чтобы обозначить границы рисунка, по которым Illustrator будет экспортировать изображение.



Готово! Полученный JPEG и исходный EPS отправляем по адресу lillllia{собака}mail.ru
Теперь дело за судьями. Как видите всё довольно просто, поэтому жду достойных соперников. Чем больше участников, тем интереснее борьба!



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

Для этого можно использовать этот код:

<a href="http://АДРЕС РЕСУРСА" target="_blank"

title="НАЗВАНИЕ"><img border="0" alt="НАЗВАНИЕ"

width="ШИРИНА" src="http://АДРЕС КАРТИНКИ"

height="ВЫСОТА"/></a>

ШИРИНА и ВЫСОТА – это понятно. Выставляем там параметры картинки. АДРЕС РЕСУРСА – это адрес сайта, на который будет ссылаться баннер после клика. НАЗВАНИЕ – придумаете сами. АДРЕС КАРТИНКИ – это адрес Вашего рисунка в Интернете. Для того чтобы его получить, необходимо закачать Вашу картинку на подходящий ресурс. Блоггеры обычно пользуются веб альбомом Picasa. Закачиваете туда свой баннер, копируете его адрес и помещаете в исходный код. Вставляем код на свою страничку и всё, баннер готов и даже работает.

DACASCAS