Векторный робот, урок

Сегодня будет небольшой урок по созданию забавного, весёлого робота Бобби, который совсем недавно появился в твиттере по адресу: http://twitter.com/Design_RT_Robot

 Создадим новый документ в Adobe Illustrator. Я в данном случаю работаю в CS6, к сожалению, в русской версии. Почему к сожалению? Потому что настоящий иллюстратор должен знать англоязычную версию, в ней работать проще, особенно если учесть, что большинство и самые лучшие уроки в сети идут на английском языке. Но не беда - всегда можно найти англо-русский и русско-английский переводчик иллюстратора, коих в сети великое множество. Однако, возможно одну из статей моего блога в будущем, или страницу на сайте я посвящу в будущем именно написанию переводчика для Adobe Illustrator.

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

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

 Нарисуем ещё один круг меньшего размера и покрасим градиентом от прозрачного до чёрного, как на рисунке. 

Далее, с помощью инструмента Многоугольник Polygon создадим небольшой шестиугольник размером примерно 11х11 px. Затем выделим многоугольник и в меню: Object(Объект)/ Transform(Трансформировать) /Move(Перемещение) выберем параметры смещение по горизонтали 17 рх, по вертикали - 0 рх. Затем выберем "копировать" - в этом же окне. А теперь, не снимая выделения с шестиугольника, нажмите Ctrl+D несколько раз. К примеру, 10 раз. Допустим, у вас получилось 13 шестиугольников. Выделим их все и сгруппируем, чтобы не растерять (Ctrl+G).

Снова заходим в меню: Object(Объект)/ Transform(Трансформировать) /Move(Перемещение)

и в появившемся диалоговом окне задаём  смещение по горизонтали 0 рх, по вертикали -17 рх. Угол (-90°)Снова нажимаем (Копировать). И снова нажимаем CTRL+D 10 раз, получаем в итоге одинаковую по ширине и высоте сетку из многоугольников:

 

7 способов преодолеть творческий кризис

Знакома ли вам ситуация?
Вы уделяете время, чтобы сотворить что-то, за что вам возможно, уже даже заплатили...а вдохновения - как не бывало? И идей нету и мыслей нет и вообще в голове пустота. Белый лист. Проходит час, второй, третий...открывается и закрывается почта, соц-сети, включается-выключается музыка, а работа всё не идёт и не идёт и капризная муза отказывается приходить на помощь?
Это знакомо не только новичкам. Это - проблема, общая для каждого, кому когда-либо приходилось пользоваться воображением для работы. Как же преодолеть творческий кризис и создать наконец-то что-то разумное, доброе, красивое и вечное?
Вот несколько действенных способов

Способ 1
Самое простое и часто используемое: перестать тыкать себя в работу и выйти- пройтись на свежем воздухе. Днём ли - вечером ли - не важно. У вас есть велосипед, мотоцикл, машина? Можно и прокатиться. Можно заменить прогулку - походом в ванну, если никто вас там не будет отвлекать. А теперь самое важное: попробуем вернуться из своих мыслей в "здесь и сейчас". Посмотрите, что вас окружает: деревья, дома, дорога, расходящиеся круги на воде в ванне? Ощутите себя в этой точке пространства: касание ног асфальта, ощущение прикосновений ветерка на коже, ощутите запахи: запах цветущих трав, дождя, нотки цветущих растений под солнцем, запах мыла в ванной. Услышьте всю палитру звуков: лай собак, взмахи крыльев полетевшей птицы, шелест листьев, хруст снега под ногами, звук дождя, какие-то далёкие отголоски звуков, голосов, шума или тишины. В этот момент поочерёдного включения органов чувств вы отдыхаете от вопросов по работе и открываетесь миру, проживая каждое мгновение его осознанно, а пока вы разрешаете себе отдохнуть - ваш разум находит решение. И возможно, вернувшись домой, вы будете уже полны новых идей и будете готовы к творчеству.

Способ 2
Уберитесь дома, приготовьте еду и помойте посуду. Во время таких нехитрых действий, творческое воображение просыпается и уделяя сознательно внимание какому-то бытовому делу, вы открываетесь бессознательно к морю ответов на ваш запросы. Очень помогает - после домашних дел приходишь воодушевлённый и легко и быстро создаёшь новое. Главное - не отвлекайтесь на почты-соц-сети-телефоны-аськи-чаты. Это сразу же отбирает нужную энергию для творчества и время для работы уходит.

Способ 3
Поставьте будильник на 5 утра. Проснувшись - почувствовать всю прелесть этого времени суток, или лечь и уснуть и увидеть море разных ярких сновидений. Быстрый сон легче увидеть и запомнить, а потом записать и использовать в своей работе.
Кроме того: перед тем как уляжетесь - положите рядом бумагу с ручкой, или ноут. Часто бывает, что как только закроешь глаза - перед глазами начинают плыть разные, витиеватые, интересные образы, которые можно встать и записать, или  зарисовать на бумаге. Что-то обязательно пригодится. Ваше воображение всегда помогает вам - главное научиться его слушать. И кстати, самые продвинутые и успешные люди во многом становятся успешными благодаря таким вот нехитрым методикам.

Книги, информация для изучения

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

1000 способов шрифтового дизайна. Шрифты, достигшие совершенства 

Примеры использования шрифтов и создания из них графических композиций.

Скачать книгу
бесплатно, без регистрации

Визитные карточки

Образцы лучших визитных карточек, а также - их разработчики

Скачать книгу
бесплатно, без регистрации

Редактируем дизайн

Практическое руководство для дизайнеров, арт-директоров и редакторов

О том, как завоевать внимание читателей

Скачать книгу
бесплатно, без регистрации

Авторская подпись, логотип

А теперь попробуем создать свою собственную авторскую подпись. 

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

Создадим в Иллюстраторе документ 500х500 px.
Напишем там, к примеру: Blue-Cat любым шрифтом, лучше нейтральным. У меня написано шрифтом Myriad Pro.
Далее идём в меню: текст/преобразовать кривые или Shift+Ctrl+O.
Теперь изображение стало у нас объектом:

О цвете в дизайне

Гармония — упорядоченное соединение противоположного. (М. Люшер)
Видно, Бог художник, иначе зачем столько цветов.("A Beautiful Mind")

Цветовой круг

Поговорим сегодня о цвете. Почему он так важен в дизайне?
Я часто встречаю слова в книгах о дизайне: "дизайнер должен быть знатоком цвета", "дизайнер должен знать правила". Никто никому ничего не должен. Вы собираете информацию и дальше с помощью той базы, которая есть в голове строите свой дизайн, или рисуете картину, или же создаёте фирменный стиль. Классификаций цветов море и запомнить всё сразу, заучивать...зачем? Вы сможете всегда обращаться к источникам и постепенно, если это будет вам удобней. запомните основные моменты теории цвета.
Давно известно, что мы воспринимаем информацию не только и не столько словами, сколько картинками и в довольно большой степени - цветом. Цвета пробуждают в людях довольно схожие эмоциональные реакции. Даже крупные фирмы используют цветовые сочетания, чтобы добиться нужного эффекта. Например - глубокие синие оттенки, вызывающие уважение и надёжность или тёплые цвета продуктов и пищевых заведений. располагающие, гостеприимные. 
А теперь немного терминологии:
На цветовом круге вы видите первичные, вторичные, третичные цвета. Первичные - крпасный, жёлтый, синий. Или цвета "золотого сечения". Вторичные получаются при смешивании любых двух первичных.

Вычитаемые основные цвета.

Добавочные основные цвета

Вычитаемые основные цвета - это основные цвета, используемые в полиграфии: пурпурный, жёлтый, голубой - в отличие от добавочных, сочетание их даёт чёрный цвет

Добавочные основные цвета - красный, зелёный, синий. Их используют для создания цветов на компьютерах, телевизорах - во всём, что связано с проецированием света. Сочетание добавочных цветов даёт светлый белый.
Термин "Полноцветная печать" связан с использованием четырёх цветов - это голубой (С), пурпурный (М), жёлтый (Y) и чёрный (K). Сочетание этих цветов позволяет добиться практически полного спектра и известна, как модель (CMYK). Дополнительный цвет, который используется как элемент дизайна называется пантоном или спотом (спотовым цветом). Выбирая цвета для этих целей, пользуйтесь универсальной системой цветовой калибровки Pantone

Дополнительные цвета - такие как красный, зелёный, лежат на цветовом круге напротив друг друга, а аналогичные цвета - такие как синий, зелёный, расположены рядом друг с другом.
Оттенок - это относительная светлота или темнота цвета. При добавлении белого цвет приобретает ненасыщенный тон. При добавлении чёрного - тёмный тон.

Векторный рисунок. Урок.

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

И с помощью него нарисуем изогнутую линию. Ставим точку (это будет начало линии), а следующую точку ставим и не отпуская левой клавиши мыши, протягиваем вправо. Таким образом линия изгибается влево. Чтобы вернуться назад и заново нарисовать линию - нажмите CTRL+Z.
Обратите внимание, что когда вы подводите мышку к конечной точке на линии - рядом с пером появляется уголок - это значит, что вы можете исправить наклон линии, например - повернуть в другую сторону. 

С помощью инструмента "Прямое выделение" (A) - можно потянуть за кончики редактируемых линий и таким образом добиться нужной кривизны основной лини.

Далее инструментом выделение (V), который находится над инструментом "прямое выделение" и выглядит, как тёмная стрелочка,щёлкаем по готовой линии и с нажатой клавишей Alt копируем готовую линию, переносим влево.
Далее с помощью инструмента "прямое выделение (A)" щёлкнем на окончание одной линии, с нажатым шифтом на окончание другой линии (таким образом мы выделим 2 конечные точки каждой из линий) и далее нажмём CTRL+J или в меню Объект (Object) выберем контур(Path)/соединить(Join). И то же самое проделаем с верхними двумя конечными точками.

У нас получилась прямоугольная изогнутая фигура, которую мы теберь можем залить каким-то цветом или градиентом. Выделим фигуру и пойдём в меню, которое у вас располагается справа - в "Градиент". Автоматически скорее всего у вас выбран чёрно-белый градиент. Нажимая на ползунки, находящиеся слева и справа на шкале градиента - вы можете выбирать цвета. Обратите внимание, что если рисунок делается для интернета, не суть важно, в какой цветовой модели вы рисуете. Чаще всего рисуют в RGB. Для печати же используется модель CMYK. На панели "Цвет"/"Color" вы можете видеть выбранную модель.
Щёлкая на ползунки слева и справа на градиентной шкале вы можете выбрать понравившийся вам градиентный переход.
Также, мы можем поменять цвет или удалить параметр "обводка" нашей фигуры.
Далее мы копируем фигуру и вставляем поверх предыдущей, меняем градиентный переход на более тёмный, например, затем снова копируем фигуру и вставляем поверх.
Для изменения фигуры - используйте инструмент прямого выделения (А), чтобы поставить новую точку - используйте в панели инструментов инструмент "перо" с плюсом (+), чтобы удалить точку - инструмент перо с (-), чтобы исправить линию - инструмент "перо" в виде уголка.
Поработайте с этими инструментами и со временем ваша рука сама запомнит, как их применять и вы будете делать это уже автоматически.

Итак, у вас получилась изогнутая фигура, собранная из нескольких скопированных и вставленных поверх друг друга фигур.
Теперь желательно выбрать их все и выбрать в меню: Объект (Object)/сгруппировать(Group). Или нажать Ctrl+G.
Небольшое отступление: старайтесь чаще сохранять свой рисунок в программе.

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

Форма и пространство

Здравствуйте всем!

Поговорим сегодня о пространстве и форме и почему это важно для дизайна. А также - как это можно использовать в дальнейшем.

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

Куб Некера

Посмотрите на рисунок: куб Некера показывает, как ваш глаз может прийти к разным выводам: как на самом деле повёрнут куб и на какую именно грань вы смотрите?
Наверняка, также каждый помнит нашумевший в своё время ролик о вращающейся на одной ноге девушке, которая у кого-то вращалась вправо, у кого-то влево.
Оптические иллюзии довольно широко используются для придания дизайну уникальности, запоминаемости, желания разгадывать и задерживать взгляд на работе, интриговать и волновать зрителя. 

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

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

Посмотрите, как по-разному воспринимаются 2 одинаковых текста и обратите внимание, что чёрные буквы на белом фоне зрительно кажутся меньше, чем белые на чёрном. 

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