Создание логотипа сайта в Adobe Illustrator

Создание логотипа сайта в Adobe Illustrator

Салют всем. Итак сегодня мы немного поговорим о графике на сайте и Web-дизайне, а также создадим простенький логотип для сайта в графическом редакторе Adobe Illustrator.

Для начала, почему Иллюстратор?

В двух словах. Существует 2 распространенных варианта графики: векторная и растровая.

Векторная графика — это рисованная линиями(опорными точками и соединяющими их линиями если быть точным) графика. Изображения получаются маленького размера и легко масштабируются.

Растровая графика — это рисованная точками(пикселями) графика. Изображения могут иметь достаточно сложную структуру, количество цветов и мягких переходов градиента. Плохо масштабируется.

У компании Adobe есть продукт для работы с каждым видом графики. Для Вектора используется Adobe Illustrator, для растра соответственно Adobe Photoshop.

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

Так как логотип для СПБ KiSa-studio, было решено использовать фразу KiSa-studio в логотипе и добавить какую-нибудь отсылку к котикам(в соответствии со словом киса на транслите в названии и… все же любят котиков).

Концепция разработана, можно начинать потихоньку.

Итак сайт у нас адаптивный(под все разрешения), значит ширина логотипа должен соответствовать минимально возможной ширине экрана(для тех кто не знает гугл в помощь, или почитайте про @media в css) это 240px. Т.е. ширина логотипа не должна быть больше 240px, дабы он не обрезался на самом маленьком экране(можно конечно сделать иначе и заморочится с масштабированием, но это в данном случае ни к чему).

Итак ширина логотипа пусть будет 230px, а высоты мне хватит 50px.

Новый проект и размеры

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

Начнем с простого, Напишем фразу, которую будем использовать в заголовке(по сути это же и название сайта):

Текст логотипа

Далее, найдём подходящий нашему логотипу шрифт:

подходящий шрифт

Подправим размер, сменим цвет… скажем на белый, добавим обводочку, скажем по цвету кнопок синюю( я подсмотрел цвет через плагин Firebug для Mozila Firefox).

Продолжаем, я нашел в интернете, замечательный растр кошачей лапы(он незамедлительно встал на fav иконку сайта) но вот из общего стиля логотипа эта лапа выбивалась и плыла при масштабировании. Было принято решение, перерисовать лапу в векторе, благо дело он состоит из одних кругов.

кошачья лапа растр

Берем инструмент «Эллипс» (горячая клавиша «L») и рисуем, поверх на каждом пальце(как видим их 4) по своему кругу или овалу(что у вас лучше получается) и большой 5ый овал либо круг на пятке(назову её так).

Используя инструмент «Выделение» (г.к. «V») подправляем наши пальцы по размеру и наклону, почти готово.

Теперь займемся пяточкой. Используя инструмент «Перо»(г.к. «P») создаем напротив точек изгиба(сверьтесь с растровым изображением на заднем фоне), опорные точки на уже нашей будущей пятке( я добавил 2 точки и одну нижнюю убрал).

Расставляем наши опорные точки пятки соответственно фоновому растровому оригиналу, изгибы линий регулируем «усиками» появляющимися у выделенной с помощью инструмента «Прямое выделение» (г.к.»A») опорной точки.

Лапа готова, черный контур вокруг всей «пятерни» кошачей, мне не нужен.

Кошачья лапа нарисована

Меняем цвет заливки на синий(тот же что и обводка у текста логотипа), а обводку поставим серой(типа тень, визульно добавит немного объема изображению), и измени тип линии обводки.

Вставляем нашу кошачью лапку в логотип вместо буквы «а» в слове KiSa. Сохраняем и заливаем на сайт.

Итоговый логотип

Итак мы создали логотип KiSa -studio в векторе. Преимущество этого логотипа в том, что он легко может масштабироваться под любой размер, а ещё при своем небольшом размере (200px на 50px), он качественно выглядит при любом разрешении устройства. Спасибо за внимание.

Автор...

Администратор administrator

Оставить ответ

Заказать звонок
+
Жду звонка!