Вектор как нарисовать: обзор инструмента и примеры — Gamedev на DTF

обзор инструмента и примеры — Gamedev на DTF

Рассказываем, как работать с вектором, почему его лучше использовать при отрисовке пропсов и на что обращать внимание при рисовании.

3788 просмотров

Растр слева и вектор справа. Работа художницы студии Canoe Ксении Сеньковской

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

Вектор и его место в геймдев-индустрии

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

При увеличении векторного изображения глаз и мордочка кота остаются в изначальном качестве

Если рисовать скетч с помощью обычной кисти в Фотошопе, получится растровое изображение.

Растровыми считают и обычные фотографии. В отличие от векторных, при увеличении на растровых картинках видны пиксели.

Глаз кота при увеличении словно покрывается кубиками — это и есть пиксели

Чтобы сделать векторное изображение в Фотошопе, нужно использовать инструменты Перо и Фигуры, подробнее о них поговорим ниже. Когда картинка готова, ее или отдельные части можно заливать цветом.

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

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

Никогда не останавливайтесь на достигнутом, изучайте новые инструменты и программы — так вы станете супер-крутым специалистом. Художник должен знать хотя бы примерно принцип работы программ анимации, программ сбора игр и т.д. Ведь именно мы создаем графику для всего этого. Наше незнание усложняет жизнь нашим коллегам. Поэтому для достижения качественной работы все приемы хороши. Пользуйтесь!

Ксения Сеньковская

Преимущества векторных рисунков для художников

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

Экономят время. Если освоить вектор, простую иконку для игры можно сделать за пару минут. Например, основу баночки с зельем можно отрисовать с помощью эллипса и пера, после чего залить цветом. Конечно, для реалистичности картинку надо будет рендерить, зато основу получится сделать быстро.

Источник

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

Изображение заскринили, добавили эффекты и немного увеличили — его качество не изменилось. Diego Monardes

Мало весят. Векторные изображения легкие, поэтому они не будут утяжелять игру или долго прогружаться. Например, в игре Cooking Craze персонажи, объекты и иконки — полностью векторные.

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

Вектор слева vs растр справа

Векторные инструменты и как с ними работать

Как уже сказали выше, для создания векторного изображения нужно использовать Перо и Фигуры

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

Если тапнуть на каждый векторный инструмент в Фотошопе, то рядом с ним появится меню с набором дополнительных инструментов. У Пера это обычное Перо, «Свободное перо», «Перо кривизны», «Перо+», «Перо-» и «Угол».

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

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

Инструмент «Свободное перо» помогает рисовать изображения разной формы. Это выглядит так, будто рисунок делают с помощью обычной кисти. Но края по-прежнему будут ровными.

Инструмент «Перо кривизны» появился в версии Фотошопа от 2018 года. Он упрощает работу с Пером. Для отрисовки любого предмета достаточно отметить точки, которые автоматически соединяются линиями. Инструмент интуитивно пытается понять, какая фигура нужна, поэтому подстраивает форму под расположение точек. Так, они могут быть ровными, а могут быть изогнутыми — зависит от того, какую часть нужно отрисовать.

«Перо+» добавляет дополнительные точки на уже готовое векторное изображение — так его можно сильнее искривить. Например, нарисовали профиль персонажа — теперь нужно сделать небольшой выступ, чтобы отметить нос. Для этого на линии лица отмечаются дополнительные точки, положение и усики которых можно изменять.

«Перо-», наоборот, убирает лишние точки. Например, если одна точка искривляет линию, а она должна быть ровной.

«Угол»

настраивает положение усиков уже после окончания отрисовки. Например, нужно сделать более явный угол, чтобы отрисовать ухо кота. Нужно нажать на «Угол», выбрать точку и подвигать ее усики.

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

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

У прямоугольника можно делать обводку, менять ее ширину и вид. Кроме того, фигуру можно превратить в квадрат — на панели редактирования нужно указать одинаковую ширину и высоту.

Прямоугольник со скругленными краями можно скруглить еще сильнее, чтобы сделать овал.

У шестиугольника можно изменять количество его углов. Например, сделать семь углов вместо шести.

Линия тоже изменяется — ее можно сделать прерывистой или цельной, сделать шире или тоньше.

Пятно можно видоизменять — на панели редактирования вверху есть раздел с фигурами. Например, там получится превратить пятно в стрелки, галочки или письмо.

В вектор можно превратить и текст — для этого нужно выбрать инструмент Текст и написать нужное слово или букву. На панели со слоями текст будет выделяться иконкой с буквой Т. Чтобы превратить его в вектор, нужно нажать правой кнопкой мыши на слой и выбрать «Преобразовать в кривые».

Операции и редактирование векторных фигур

Чтобы редактировать фигуры и изменять их положение или вид, можно использовать панель редактирования, стрелки и операции.

Панель редактирования. Панель редактирования появляется после нажатия на Фигуры или Перо. Там можно менять цвет заливки, добавлять или убирать обводку любого цвета. Кроме того, можно изменять вид обводки — это может быть пунктир или единая линия. Важно перед работой с вектором на панели указывать, что это фигура. Если указать вместо фигуры пиксели, тогда изображение получится растровым.

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

Белая стрелка двигает точки — например, когда нужно из тупого треугольника сделать равнобедренный. Если нажать на белую стрелку, откроется меню — в нем будет инструмент с черной стрелкой. Когда нужно двигать фигуру по полю и изменять ее положение, нужно зажать ее черной стрелкой и подвигать.

С помощью белой стрелки можно изменить расположение точек и сделать другую фигуру, а с помощью черной — сдвинуть целую фигуру на другое место

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

С помощью операций фигуры можно объединить, вычесть друг из друга, извлечь пересекающуюся часть или выделить пересекающуюся часть. Принцип такой: сначала отрисовывается первая фигура, потом на панели нужно выбрать одну из операций. Например, объединение. Если нарисовать другую фигуру поверх первой, то они автоматически объединятся и окажутся на одном слое. Но при этом они не становятся одной фигурой — их по-прежнему можно изменять отдельно друг от друга.

Объединение. При объединении две фигуры соединяются в одну. Например, можно объединить два квадрата и сделать прямоугольник, но они по-прежнему могут изменяться независимо друг от друга.

Вычитание друг из друга. Чтобы вычесть верхнюю фигуру из нижней, достаточно нарисовать основную фигуру и нажать на «Вычесть переднюю фигуру» в операциях. Потом поверх отрисовывают вторую — тогда контур второй фигуры вырезается из первой.

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

Выделение пересекающейся части. В этом случае делается все то же самое, что и при извлечении, только команда будет другая — «Область пересечения фигур». Тогда на поле останется только часть, которая была пересечением двух форм.

В операциях есть функция «Объединить компоненты фигуры» — если выбрать одну фигуру после любой операции и нажать эту команду, тогда компоненты сольются. Это значит, что изменять объект по частям не получится.

Простой план векторной отрисовки от художницы Ксении Сеньковской

Разберем работу с вектором на примере отрисовки основы тарелки с супом.

Чтобы сделать иллюстрацию, сначала нужно использовать эллипс и с его помощью сделать дно тарелки, тарелку и суп внутри.

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

Заливка рисунка происходит с помощью градиента, чтобы изображение получилось более живым.

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

Финальный вид работы

Кроме того, некоторые объекты можно полностью рендерить в векторе — это значит, что можно там же расставить тени или блики света с помощью фигур.

Например, вот это изображение делали и рендерили полностью в векторе. Автор: Ксения Сеньковская

Обязательно ли использовать вектор?

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

В остальном зависит от вас — если вам кажется, что лучше и легче отрисовать некоторые детали растровой картинки вектором, то сделайте это.

Важно помнить особенности работы с вектором — их три:

1. На слое с фигурой нельзя изменить кривые цвета или настроить яркость с контрастностью — для этого придется создавать корректирующий слой и работать на нем.

2. Картинку не получится обработать с помощью фильтров.

3. Вектор может влиять на стилистику из-за четкого деления слоев на основные фигуры.

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

Статью написала Анастасия Терентьева. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

Интенсив по векторному фотореализму

Здравствуйте, уважаемый/ая коллега!

Меня зовут Борис Поташник.
Я графический дизайнер, автор обучающих курсов для дизайнеров-самоучек и руководитель Виртуальной школы графического дизайна creativshik.com.

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

Однако при упоминании векторной графики, как правило, мы думаем о логотипах, иконках или о «плоских» картинках, похожих на аппликации из цветной бумаги. Ну, в крайнем случае, — на иллюстрацию, нарисованную гуашью.

Но векторная графика — это не только логотипы, иконки и картинки! Возможности вектора ничуть не уступают растру, а во многом даже его превосходят. Вспомните хотя бы трехмерные персонажи из известных анимационных фильмов — ведь это тоже примеры векторной графики! Да-да, все 3D программы в конечном итоге создают векторные объекты. Признайтесь, что вы об этом не задумывались.

Действительно, в нашем сознании векторная графика как-то не очень уж ассоциируется с объемом и трехмерностью, а тем более — с реалистичностью.

Готов с вами поспорить, что увидев следующую иллюстрацию, Вы в последнюю очередь подумаете о векторе.
Вопрос на засыпку: что перед вами — фотография или векторная иллюстрация?

Если вы выбрали первый ответ, то вы ошиблись! Это не фото, а рисунок. Причем рисунок, сделанный даже не в программе 3D, а в популярном редакторе векторной графики — Adobe Illustrator.

Хотите научиться рисовать такие картинки? Читайте внимательно!

В моей Виртуальной школе уже не первый год проводятся курсы и тренинги по работе в Adobe Illustrator.

Еще в 2012 году я записал небольшой видеокурс «Adobe Illustrator на раз-два-три», который до сих пор бесплатно раздаю своим подписчикам. Затем, в 2014 году, вместе со своей командой я запустил онлайн-тренинг по созданию векторных иллюстраций для микростоков.

И наконец, совсем недавно, в начале 2016 года у нас вышел новый тренинг — по созданию персонажных иллюстраций в Adobe Illustrator. Тренинг провел мой коллега, художник иллюстратор Андрей Панченко.

За время прохождения курса многие наши студенты смогли не только создать качественные портфолио — они действительно начали зарабатывать на микростоках!

Для просмотра изображения целиком кликните по его миниатюре

Выпускники наших курсов по Adobe Illustrator часто спрашивали меня, не планирую ли я подготовить новый тренинг для продвинутых иллюстраторов.

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

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

Звучит заманчиво, не так ли? Но у вас может возникнут вопрос: зачем рисовать реалистичные иллюстрации людей или предметов, если их можно сфотографировать?

Для этого существует несколько доводов.

Довод первый. В отличие от качественных фотографий, векторные иллюстрации весят совсем немного, при этом их можно бесконечно увеличивать без потери качества. Для полиграфии это неоспоримое преимущество — одну и ту же картинку можно напечатать в высоком качестве любого размера — хоть со стадион!

Довод второй. Сфотографировать можно только то, что существует в природе, а нарисовать — все что угодно! При создании векторных иллюстраций вы ограничены только собственным воображением!

Если, например, вашему заказчику требуется качественная картинка для рекламы модели электрочайника, которая пока существует только на бумаге, то он вряд ли станет обращаться к фотографу. Он обратится к иллюстратору. Конечно, любую проектную модель можно создать в программе 3D… И именно отсюда следует третий довод, в пользу векторной иллюстрации.

Довод третий. Освоение 3D программ — долгий и трудный процесс. Для того чтобы достичь существенного мастерства в 3D графике могут потребоваться годы. А вот чтобы рисовать реалистичные иллюстрации в Adobe Illustrator, вполне достаточно всего двух инструментов программы — перо и градиентная сетка!

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

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

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

•   Создание иллюстраций из мира живой природы для учебных пособий — насекомые, птицы, животные.

Вы обратили внимание, что в качественных книгах о природе, в иллюстрированных энциклопедиях и в учебных пособиях для студентов, как правило, используются не фотографии, а рисованные иллюстрации?

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

•   Создание иллюстраций растений, овощей, фруктов, ягод и продуктов питания.

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

•   Создание иллюстраций бытовой техники и электроники.

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

•   Создание иллюстраций автомобилей.

На сайтах производителей автомобилей, в рекламных проспектах и в руководствах по эксплуатации мы видим качественные изображения новых моделей автомобилей (мотоциклов). Техника фотореалистической иллюстрации позволяет художнику изобразить автомобиль, либо его фрагменты в любом ракурсе, максимально подробно и аттрактивно. Зачастую такие иллюстрации выглядят даже более притягательно, чем аналогичные фото и, соответственно, лучше продают товар!

Для рекламы это неоспоримое преимущество — ведь не секрет, что клиент покупает не столько сам товар, сколько собственную фантазию, если хотите — мечту о нем. Чем привлекательнее будет выглядеть эта «мечта», тем охотнее покупатель за нее заплатит.

Дорогой/ая коллега! Представляю вам наш видеотренинг

• Ниша реалистичных векторных иллюстраций довольно востребована при относительно небольшой конкуренции. Научившись создавать такие иллюстрации, иллюстратор-микростокер или фрилансер может существенно увеличить свой постоянный доход.
• Рисование реалистичных векторных иллюстраций требует высокого уровня владения инструментами Adobe Illustrator. Поэтому, такой курс будет особенно полезен всем тем, кто хочет как следует «отточить» свои профессиональные навыки.
• На просторах русскоязычного Интернета других аналогичных полноценных видеокурсов по теме работы с градиентной сеткой просто не существует! Возможно, вы найдете пару случайных уроков где-нибудь на YouTube, но они мало чему вас научат и не добавят в ваше портфолио ни одной работы. Авторы отдельных уроков не станут заниматься с вами 3 месяца, проверять домашние задание и давать профессиональные советы.
• Я уверен, что начинающим иллюстраторам будет необыкновенно полезно получить уроки мастерства у Андрея Панченко. Почитайте отзывы участников тренинга и вы убедитесь, что это не пустые слова.

Андрей Панченко
Художник-иллюстратор,
микростокер.

«Я занимаюсь иллюстрацией около 10 лет. Вначале это было хобби, теперь же это моя основная профессиональная деятельность.

Участвовал во многих фриланс-проектах, в частности, выполнял работы для канала Дисней. Работал с несколькими крупными мебельными фирмами, такими как ОАО «Вектор» и «Лидер», над оформлением дошкольной продукции.

В настоящее время продаю свои иллюстрации на микростоках – активно работаю почти со всеми крупными микростоками и рисую иллюстрации на заказ».

Портфолио Андрея:

Екатерина Матюшенкова

«Когда видишь, что делают другие, это помогает быстрее выполнить задание, чтобы перейти к следующему этапу. »

Ссылка на оригинальный отзыв

Я очень люблю рисовать! И давно хотела научиться рисовать в программе. Курс по фотореализму привлек тем, что можно создавать из нескольких фотографий одну. Если сравнивать с Photoshop, то при использовании Mesh-сетки получается менять цвета как самого объекта в целом, так и его отдельных частей или даже фрагментов.

Андрей очень хорошо объясняет, мы с ним разбирали мою работу и отдельно, и на нашем групповом занятии. Конечно, мне есть еще над чем работать. Но главное – это набраться терпения и если не получается сразу, разбивать на небольшие шаги и делать постепенно.

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

Ольга Федорченко

«Очень близкое и приятное знакомство с таким малоизученным инструментом, как мэш-сетка! После мэша, я перестала бояться Иллюстратор!»

Ссылка на оригинальный отзыв

Мне нравится учиться у Андрея. Очень внимательный, (чуть не написала заботливый ), вовремя подскажет, на что обратить внимание, что исправить, главное — терпеливый! Спасибо, Андрей! На следующий курс к Вам обязательно запишусь.

Хочу сказать отдельное спасибо Александру!

Борис! Мне нравится ваше стремление к новому. Вы находите замечательных преподавателей.

Анна Глущенко

«Я занимаюсь векторной графикой почти три года и инструмент градиент меш мне хорошо знаком, тем не менее из данного курса я вынесла много новой информации, хороших решений и полезных знаний.»

Ссылка на оригинальный отзыв

Я занимаюсь векторной графикой почти три года и инструмент градиент меш мне хорошо знаком, тем не менее из данного курса я вынесла много новой информации, хороших решений и полезных знаний. Самое главное — получила уверенность в своих силах. Я бы никогда не взялась выполнять сложные объекты, вроде человеческого тела, в меше. Я бы просто не верила, что у меня что-то получится. Но благодаря Андрею и его урокам любой объект становится по силам. Спасибо преподавателю и организаторам за потраченное с пользой время! Было очень увлекательно.

• Тренинг состоит из 30 видеоуроков. К каждому уроку прилагается домашнее задание. По мере
  прохождения уроков сложность выполнения заданий возрастает.
• В процессе обучения участники курса под руководством ведущего пройдут все этапы создания
  сложной реалистической иллюстрации. Студенты изучат операции и приемы работы в Adobe
  Illustrator, необходимые для полноценного создания реалистической иллюстрации,
  а также научатся подготавливать итоговые файлы для отправки на микростоки.
• На тренинге наши студенты выполнят 3 полноценных проекта, которые мы
  подготовили по принципу «от простого к сложному»: иллюстрацию ягод
  или фруктов, иллюстрацию бытовой техники и наконец — иллюстрацию
  обнаженного тела.
• Курс проводится по эффективной системе, которая отлично себя
  зарекомендовала в других наших тренингах.

• Особенность нашего тренинга в том, что просмотр каждого следуюыыщего видеоурока возможен только после выполнения и сдачи домашнего задания.
• Каждый ученик сможет проходить курс в своем темпе, но при обязательном условии выполнения домашних заданий.
• В процессе прохождения курса участники тренинга смогут общаться между собой и задавать интересующие вопросы ведущему в закрытой группе на сайте школы и в рамках онлайн-конференций.
• Одним словом, фактически с самых первых уроков вы уверенно начнете работать на результат.

• Наш тренинг отличают грамотное построение уроков и подача информации.
• Тренинг проводится онлайн, но его структура максимально приближена к индивидуальным офлайн-занятиям.
• Автор уроков работает индивидуально с каждым учеником – разбирает выполненные домашние задания, дает (обратную связь в группе и проводит онлайн-конференции (вебинары).
• В курс включены все исходные файлы, используемые в курсе, которые вы можете использовать для выполнения упражнений.
• Все уроки удобно оформлены и распределены по возрастанию уровня сложности. Шаг за шагом вы освоите новую профессию, которая в перспективе способна обеспечить вам хороший доход!
• Каждому выпускнику курса, выполнившему все домашние задания, выдается сертификат об окончании.

Вводный раздел. Общие понятия, знакомство с темой курса

Урок 1. Вводный урок

• Знакомство с автором и его работами
• Описание курса

Урок 2. Введение в тему градиентной сетки

• Что такое инструмент «Сетчатый градиент» (Gradient mesh), его применение для создания фотореалистичных изображений.

Урок 3. Инструменты Adobe Photoshop

• Программа adobe photoshop и инструменты подготовки референсного изображения к дальнейшей работе с градиентной сеткой.

Урок 4. Инструменты Adobe Illustrator

• Основные инструменты программы Adobe Illustrator, необходимые для рисования фотореалистичного изображения.

Урок 5. Знакомство с инструментом «Сетчатый градиент». Часть 1

• Детальное описание инструмента «Сетчатый градиент»

Урок 5.1 Знакомство с инструментом «Сетчатый градиент». Часть 2

• Инструменты редактирования градиентной сетки, горячие клавиши.

Первый практический проект. Рисуем фрукты и ягоды

Урок 6. Подбор референсного изображения

• Поиск готового референсного изображения, либо подготовка своего собственного.

Урок 7. Детальная подготовка референсного изображения

• Обработка выбранного изображения в растровом редакторе.

Урок 8. Подготовка рабочей области в программе Adobe Illustrator

• Подготовка соответствующих окон, расстановка слоев

Урок 9. Создание набросока сетки на основании референсов и предпочтений. Часть 1

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям.

Урок 10. Создание наброска сетки на основании референсов и предпочтений. Часть 2

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям

Урок 11. Детализация градиентной сетки. Часть 1

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 12. Детализация градиентной сетки. Часть 2

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 13. Финализация иллюстрации

• Дорисовка элементов иллюстрации, добавление эффектов. Добавление света или теней, там где это необходимо.

Второй практический проект. Рисуем объекты бытовой техники

Урок 14. Подбор референсного изображения

• Поиск готового референсного изображения, либо создание своего.

Урок 15. Подготовка референсного изображения

• Обработка выбранного изображения в растровом редакторе.

Урок 16. Подготовка рабочей области в программе Adobe Illustrator. Часть 1

• Подготовка соответствующих окон, расстановка слоев

Урок 17. Создание набросока сетки на основании референсов и предпочтений. Часть 1

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям.

Урок 18. Создание наброска сетки на основании референсов и предпочтений. Часть 2

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям.

Урок 19. Детализация градиентной сетки. Часть 1

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 20. Детализация градиентной сетки. Часть 2

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 21. Финализация иллюстрации

• Дорисовка элементов иллюстрации, добавление эффектов. Добавление света или теней, там где это необходимо.

Третий практический проект. Рисуем полуобнаженное тело

Урок 22. Подбор референсного изображения

• Поиск готового референсного изображения, либо создание своего.

Урок 23. Подготовка референсного изображения

• Обработка выбранного изображения в растровом редакторе.

Урок 24. Подготовка рабочей области в программе Adobe Illustrator

• Подготовка соответствующих окон, расстановка слоев

Урок 25. Создание набросока сетки на основании референсов и предпочтений. Часть 1

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям.

Урок 26. Создание наброска сетки на основании референсов и предпочтений. Часть 2

• Создание наброска градиентной сетки поверх референсного изображения. Расстановка по подслоям.

Урок 27. Детализация градиентной сетки. Часть 1

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 28. Детализация градиентной сетки. Часть 2

• Детализация градиентной сетки. Увеличение плотности сетки, оптимизация и уменьшения объема работы.

Урок 29. Финализация иллюстрации

• Дорисовка элементов иллюстрации, добавление эффектов. Добавление света или теней, там где это необходимо.

Не забудьте включить звук на вашем компьютере

Сергей Еремеев

«Преподаватель в очень доступной форме разбирает все тонкости работы с одним из сложнейших и интереснейших инструментов Adobe Illustrator»

Ссылка на оригинальный отзыв

Отличный тренинг. Преподаватель в очень доступной форме разбирает все тонкости работы с одним из сложнейших и интереснейших инструментов Adobe Illustrator. Грамотно построен процесс выполнения упражнений — от простейшего к совершенному. Один из лучших курсов школы Боба Поташника!

Юлия Алибекова

«Учит без сожаления отправлять в топку ненужную информацию, он щедр на похвалу, но, в то же время, в меру строг и принципиален.»

Ссылка на оригинальный отзыв

Прохожу тренинги Андрея во второй раз, и во второй раз остаюсь очень довольна. Простым языком, наглядно на примерах и ошибках, Андрей объясняет суть дела. Учит без сожаления отправлять в топку ненужную информацию, он щедр на похвалу, но, в то же время, в меру строг и принципиален. Всегда ответит на вопросы, даже если они не конкретно по данному курсу, поделится личным опытом. Посмотрите его работы, и вы непременно захотите стать его учеником!

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

Юлия Галитская

«Очень много полезной информации, как новичкам, так и людям работающим в программе Adobe Illustratorr»

Ссылка на оригинальный отзыв

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

Большое спасибо администратору Александру за оперативные ответы на вопросы. Тренинги, подача материала, организационные моменты все на высшем уровне. Успехов Борису и его команде профессионалов.

Для просмотра изображения целиком кликните по его миниатюре

• Вы разберетесь во всех профессиональных тонкостях работы с градиентной сеткой и другими инструментами Adobe Illustrator.
• Вы научитесь создавать привлекательные фотореалистичные векторные иллюстрации.
• Вы овладеете многочисленными продвинутыми техниками создания векторных реалистичных иллюстраций и приемами профессиональной работы в Adobe Illustrator.
• В процессе тренинга Вы придумаете и создадите три сложные фотореалистичные
  векторные иллюстрации различных тематик, которые выгодно дополнят ваше портфолио.

Как и когда я получу доступ к материалам тренинга?

Сразу после оплаты вы получите письмо со ссылкой на страницу регистрации в виртуальной школе и секретный пин-код.

Смогу ли я сразу посмотреть все уроки?

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

Как я могу общаться с преподавателем?

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

Смогу ли я смотреть уроки на Mac?

Да, конечно. Просмотр уроков осуществляется не на вашем компьютере, а на сайте нашей онлайн-школы.

Если меня что-то не устроит, смогу ли я вернуть деньги?

Да. Если в течение 2-х недель после начала учебы, вы захотите вернуть свои деньги, напишите в нашу службу поддержки.

Смогу ли я пройти курс, если не буду выполнять домашние задания?

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

Должен ли участник курса уметь рисовать?
Если должен, то на каком уровне?

Для прохождения курса будет достаточно, если вы умеете хотя бы перерисовывать контуры объектов с картинок для примера.

Кому и как я смогу задавать вопросы
по материалам тренинга?

Непосредственно преподавателю в чате на сайте школы. Доступ в чат Вы получите вместе с доступом в свой кабинет.

Ваш курс рассчитан на 2 месяца.
А если мне понадобится больше времени?

Вы можете проходить курс в своем темпе. Если на выполнение заданий вам требуется больше времени — ничего страшного.

В какой графической программе и в какой версии я могу пройти тренинг?

Для прохождения тренинга вы должны быть знакомы с Adobe Illustrator в любой версии.

Смогу ли я скачать уроки курса, чтобы смотреть их оффлайн?

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

Даете ли вы гарантию, что пройдя тренинг, я буду зарабатывать на фрилансе?

Нет. Ваш заработок зависит только от ваших способностей и упорства, а не от качества курса.

Какой должен быть уровень владения программами для прохождения курса?

Для прохождения тренинга достаточно владеть программами Adobe Photoshop и Adobe Illustrator на начальном уровне.

Нужен ли графический планшет для прохождения тренинга?

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

• Наряду с полной оплатой курса мы предлагаем оплату по частям. То есть при записи на тренинг, вы оплачиваете только его первую часть.
• После завершения каждого проекта вы получаете счет на оплату следующей части тренинга, оплачиваете его и получаете доступ урокам и заданиям.
• Если вы решите не продолжать учебу, то просто не оплачиваете очередной счет.
• За оплату полной стоимости курса предоставляется скидка 10%.

Полная стоимость тренинга

без скидок: $64
(или $35 х 2 месяца при оплате в рассрочку)

ОНЛАЙН-ТРЕНИНГ С ПРЕПОДАВАТЕЛЕМ.
ОПЛАТА В 2 ПЛАТЕЖА

• Моментальный доступ к половине уроков тренинга, включая проверку домашних заданий и обратную связь
  с преподавателем.
• После прохождения 1/2 тренинга
  вы оплачиваете его вторую часть
  и получаете доступ к оставшимся видеоурокам.

$35 х 2 месяца

ВЫБРАТЬ

ОНЛАЙН-ТРЕНИНГ С ПРЕПОДАВАТЕЛЕМ.
ПОЛНАЯ ОПЛАТА

• Моментальный доступ ко всем урокам тренинга, включая проверку домашних заданий и обратную связь с преподавателем.
• Дополнительная скидка 10% за полную оплату тренинга.

 $70 $64

ВЫБРАТЬ

ВИДЕОКУРС ДЛЯ
САМОСТОЯТЕЛЬНОГО ОБУЧЕНИЯ

• Комплект видеоуроков и материалов для самостоятельного обучения, без проверки домашних заданий.
• Моментальный доступ на сайте ко всем материалам тренинга.

$39

ВЫБРАТЬ

Как нарисовать векторное изображение

В этом уроке мы рассмотрим процесс создания векторного рисунка в Фотошопе.

Сложность: Средняя

Дата: 24. 08.2013

Обновлено: 18.06.2015

Как известно, векторные иллюстрации в настоящее время очень популярны в веб-графике. Профессиональные дизайнеры могут создавать такие иллюстрации за считанные часы. Если Вы новичок или любитель, уроки веб-графики, безусловно, будут крайне полезны для Вас. Цель данного урока — пролить свет на процесс создания выбранного изображения. Шаг за шагом я продемонстрирую весь процесс и с помощью моих комментариев поясню все этапы.

Чтобы создать действительно классное изображение, Вы должны выбрать нужную программу и следовать определенным правилам. Если Вы хотите нарисовать векторную иллюстрацию, то должны иметь в виду, что для этого используются такие редакторы как Adobe Illustrator или CorelDraw. Вместе с тем, Photoshop располагает достаточными средствами для разработки векторных иллюстраций. Я наглядно покажу это в своем уроке, как перевести рисунок в вектор. Я выбрал скетч кота как основу для иллюстрации. Я решил изобразить синего кота с розовыми цветами в лапах.

Скетч кота, который я использовал в уроке.

Шаг 1

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения Pen Tool («Перо» / Клавиша «P») (в режиме Shape Layers (Слой Фигура)). Настройки — Fill (Непрозрачность заливки) = 0%. Теперь используем наложение градиента: (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) (Layer Style — Stroke (Стиль слоя — Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

Итак. используем Pen Tool («Перо» / Клавиша «P»), в режиме Shape Layers (Слой Фигура). Выделяем весь холст, настройки Fill (Непрозрачность заливки) = 0%, и добавляем градиент (Layer Style — Gradient Overlay (Стиль слоя — Наложение градиента)).

Шаг 2

Раскрашиваем основные части кошачьего тела в синий цвет: нос с ушами, тело, передняя лапа и хвост. Добавляем Stroke (Обводку), чтобы сделать изображение более интенсивным. Используем цвета с #4f85c8 до #7ab2ee, угол — 50 deg (Градус) для Наложения градиента, и #2d72c5 — цвет Stroke (Обводка).

Шаг 3

Теперь уделим внимание основным элементам тела. Высветлим часть тела, используя тот же градиент, что и для всего тела, с углом 3 deg (Градус).

Шаг 4

Перейдем к деталям хвоста. Выделим весь хвост и заполним его градиентом (68 deg (Градус)). После этого выделим кончик хвоста (как показано на рисунке) и заполним тем же градиентом (75 deg (Градус)).

Шаг 5

Выделим нос, как показано на рисунке, и заполним градиентом (90 deg (Градус)).

Шаг 6

Осветлим кончик носа (-66 deg (Градус)). Используем более темные цвета, чтобы подчеркнуть границы носа.

Шаг 7

Пришло время поработать с общими контурами ушей. Используем угол градиента 66 deg (Градус) для нижнего и 4 deg (Градус) для верхнего уха.

Шаг 8

Придадим форму краю уха: используем угол градиента 16 deg (Градус) для нижнего уха и 34 deg (Градус) — для верхнего.

Шаг 9

Добавим деталей на лапах. Создадим овальную форму верхнего пальца (градиент с углом (35 deg (Градус)), затем для среднего пальца (68 deg (Градус)), и наконец для нижнего (58 deg (Градус)). Каждая последующая форма накладывается на предыдущую.

Шаг 10

Основной корпус готов. Теперь перейдем ко второй нижней лапе. Создадим новую форму (97 deg (Градус)), далее нажмем «Shift+Ctrl+[» (Send to Back (На задний план)), и добавим Stroke (Обводка) c цветом #1d62b5.

Шаг 11

Добавим три круга сверху донизу (25 deg (Градус), 68 deg (Градус), 83 deg (Градус)) для каждого пальца, как и в шаге 9.

Шаг 12

Проделаем все то же, что и с первой нижней лапой. Готово. Теперь обратимся к верхним лапам. Создадим форму для одной из верхних лап (58 deg (Градус)) и добавим Stroke (Обводку) с цветом #4172a5 (как и для всех внешних форм).

Шаг 13

На верхней лапе 4 пальца. Скроем один из них. Создадим форму (50 deg (Градус)).

Шаг 14

Создаем овальную форму для каждого пальца, как в шаге 9 (63 deg (Градус), 67 deg (Градус), 77 deg (Градус)). Добавляем Stroke (Обводка) с цветом #3367a6 для каждого из 3-х пальцев.

Шаг 15

Создадим новую форму для второй лапы (-61 deg (Градус)). Жмем (Ctrl+Shift+]) и добавляем Stroke (Обводка) #2d72c5.

Шаг 16

Для верхнего пальца создаем форму (135 deg (Градус)), затем то же самое проделываем и для остальных пальцев (сверху вниз) — как и в шаге 9 (99 deg (Градус), 83 deg (Градус), 67 deg (Градус)).

Шаг 17

Закончили с основной частью кошачьего тела. Теперь перейдем к мордочке. Начнем с глаз. Создадим новую форму для нижнего века (-168 deg (Градус)), а затем светло-голубую форму — белок глаза (-22 deg (Градус)).

Шаг 18

Теперь нарисуем овальную форму в середине головы (90 deg (Градус)) для радужки глаза, добавим Stroke (Обводка) #599c01. Нарисуем зрачок над радужкой (90 deg (Градус)). Затем создадим маленькую овальную форму для блика. Для градиента используем цвет #ebfcf9.

Шаг 19

Сделаем овальную форму век (94 deg (Градус)), затем форму для ресниц (-173 deg (Градус)). Расположим их по границе века. Нажимаем «Ctrl+[» (Send Backward (Переложить назад)).

Шаг 20

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

Шаг 21

Поработаем с зубами. Создадим новую форму (71 deg (Градус)) и добавим Stroke (Обводка) с цветом #336aaa.

Шаг 22

Создадим форму для нижнего зуба (-122 deg (Градус)). Далее создаем дубликаты слоя с зубом (Ctrl+J) и изменяем их размер, используя инструмент Path Selection Tool (Инструмент «Выделение контура» / Клавиша «A»).

Шаг 23

Создаем форму верхнего зуба (-135 deg (Градус)), и производим те же действия, что и в шаге 22.

Шаг 24

Кот практически готов. Добавим некоторые детали. Подготовим формы для роскошных кошачьих усов: (сверху вниз:-50 deg (Градус), 63 deg (Градус),-50 deg (Градус)).

Шаг 25

И еще 2 нижних уса:

Шаг 26

Теперь сделаем коту когти. Просто создаем небольшие формы в виде штрихов. в зависимости от направления когтя, указываем и угол наклона градиента, которым его заливаем. Градиент желательно выбрать: от темного к светло-голубому. Не бойтесь варьировать градиенты.

Шаг 27

Последний элемент — цветы в кошачьих лапах. Нарисуем форму стебелька цветка (173 deg (Градус)), как показано на скриншоте, жмем «Shift+Ctrl+[» (Send to Back (На задний план)). Далее создадим форму с лепестками (79 deg (Градус)).

Шаг 28

Создадим еще одну форму для лепестков (94 deg (Градус)), сделаем её чуть больше и разместим чуть выше исходной. Нарисуем сердцевину цветка (76 deg (Градус)), и еще такую же форму (99 deg (Градус)), сдвинув её вверх и вправо на 1 рх.

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

Финальный результат

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

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

Приступая к работе

В этом уроке объясняется, каким образом создавать векторные иллюстрации используя Adobe Illustrator. Приводится объяснение ключевых параметров и инструментов, которое дополняется советами экспертов.

В этом многогранном туториале Вы узнаете основные термины, рассмотрите рабочие процессы и техники, которые помогут начать работать с векторной графикой.

Инструмент «перо» — один из основных в арсенале программы, он особенно важен для начального овладения векторной графикой. Это подробное руководство ставит своей целью познакомить Вас с особенностями и методами работы с незаменимым инструментом компании Adobe. А также с наиболее рациональными способами его использования.

Данный видео-туториал является действительно ценным ресурсом, который объясняет как создавать векторную графику в Illustrator и какую роль в этом процессе играет рисование.

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

Узнайте, как создавать простые органические формы в Illustrator с этим простым для восприятия руководством от Верле Питерс (Veerle Pieters), графического и веб-дизайнера.

7. Добавление текстуры для векторных иллюстраций

Добавление текстуры — это отличный способ сделать Вашу векторную графику более выразительной, подчеркнуть ее перспективу. В этом очень доступном видео эксперт Illustrator Александра Сесилио (Alexandra Cecilio) демонстрирует как это сделать.

Этот туториал от Андрея Мариуса (Andrei Marius) поможет Вам создать векторный линейный график. Пошагово: начиная с простой сетки до направляющих линий, используя только панель Appearance (один из мощнейших инструментов в Adobe Illustrator) с добавлением некоторых простых фрагментов текста и тонкой штриховки.

Создание лиц

9. Создание векторного глаза

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

Это углубленный видео курс, который поможет в овладении искусством создания векторных портретов на основе фотографий.

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

С возрождением геометрической тенденции, справедливо сказать, что WPAP может быть представлен в большем количестве различных аспектов дизайна. Этот туториал покажет Вам как самостоятельно создать WPAP в Illustrator с помощью мастера WPAP.

Прорисовка волос в векторе может быть довольно мудреной. Этот туториал шаг за шагом показывает как волосы с фотографии превращаются в векторные.

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

Дизайн персонажей

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

Джонатан Болл (Jonathan Ball), основатель Poked Studio, обьясняет как с помощью Illustrator основные геометрические фигуры превращаются в уникальных, красочных персонажей.

В этом уроке Вы легко и весело создаете очень простой трафарет, который можно использовать на различных поверхностях (включая футболки, стены, холсты). Сказка Л. Кэррол «Приключения Алисы в Стране чудес» вдохновила автора на создание векторного изображения и написание туториала.

С помощью этого туториала Мэри Винклер (Mary Winkler) собирается показать Вам, как нарисовать чиби персонажа с нуля, используя Shape Builder Tool (Shift-M), Pen Tool (P), прозрачные градиенты, и многое другие инструменты Illustrator.

В руководстве описан процесс создания простого персонажа аниме от начала и до конца.

Узнайте как создаются милые кролики в этом туториале векторной графики. Тренинг использует простые формы и градиенты, которые легко применимы и к иллюстрациям других персонажей.

Этот туториал представляет очень много основных форм для достижения действительно ловкого стиля иллюстраций. А затем «оживляет» йети с помощью палитры холодных цветов.

Здесь Вы сможете увидеть, как создаются персонажи видеоигр. У Вас будет возможность рассмотреть работу с первого эскиза и до самого финала.

Иллюстратор и автор Шейрен Милн (Sharon Milne) показывает, как создать монохромный портрет с фотографии.

Если Вы заядлый любитель футбола, то этот туториал будет особенно кстати. В уроке Сергей Кандаков создает яркую иллюстрацию с эффектом стиля ретро.

Ландшафт и окружающая среда

В этом уроке от векторного художника Андрея Мариуса (Andrei Marius) показано, как можно создать простой дизайн карты в Illustrator.

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

Очень простой и последовательный урок от Дианы Тома (Diana Toma), который показывает как нарисовать прекрасные цветы используя градиентные сетки (меш).

Особые эффекты

В этом пошаговом руководстве Вы изучите, как создать «электрический» текст в векторе.

Том Мак (Tom Mac) показывает, как в Illustrator создать портрет с drip-effect, используя инструмент Pen и кое-какие дополнительные методы.

В этом учебном руководстве мы сделаем простой и красивый восточный паттерн в Adobe Illustrator, который будет состоять из различных объектов азиатской культуры.

За прошедшие годы винтажные иллюстрации и ретро-стиль стали вновь популярными в дизайне. В представленном уроке разработчик Бен Стирс (Ben Steers) делится своими методами, которые помогут Вам преобразовать векторные рисунки в ретро-стиль.

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

Следуя этому туториалу Вы сможете создать эффект блеска в Adobe Illustrator. В основе иллюстрации заложены три эффекта: бумага для заметок, витраж и рваные края. С помощью быстрой трассировки они превращаются в блестящую векторную текстуру.

Полутон — способ воспроизведения монохромного изображения. Он базируется на специфике восприятия картины человеческим глазом для которого область изображения, заполненная крупными точками, ассоциируется с более темными тонами. И наоборот, область, заполненная точками меньшего размера, воспринимается как более светлая. Художник Крис Маквей (Chris McVeigh) покажет, как создать векторный полутон.

В этом учебном руководстве Вы изучите, как создать графический логотип Бэтмена, используя простые формы в Adobe Illustrator. Используются простые инструменты, вроде Ellipse Tool (L) и Shape Builder Tool (Shift + M).

36. Конвертируйте растровое изображение в векторное

Это учебное руководство Inkscape демонстрирует, как преобразовать растровое изображение в векторное при помощи функции Trace Bitmap.

Слайдер — популярный элемент веб-дизайна. В данном туториале показан вариант создания слайдера в векторе.

Сиара Фелен (Ciara Phelan) продемонстрирует Вам как с помощью комбинирования векторных изображений и фотографий можно создать удивительный коллаж.

В этом туториале от одной дизайнерской студии рассказывается как просто нарисовать и трассировать фотографию. Для создания реалистичной иллюстрации в примере используется простая градиентная заливка.

В этом учебном руководстве показано, как создать эффект вышивки крестиком в Adobe Illustrator. Для этого будет использоваться панель Appearance и образцы.

Если вам импонирует векторная графика и вы решили попробовать себя в этом деле, то, конечно же, в первую очередь встает вопрос: «Как научиться рисовать?»

Причем, тут я бы хотела обратить ваше внимание на факт, что обучение просто вектору, например, на курсах дизайна и в различных книгах, отличается от обучения стоковому вектору.
На курсах дизайна вас долго будут мурыжить с текстом, печатью и созданием всяких эффектов, что в стоковом векторе даже не применяется. На курсах дизайна вас будут учить «дизайнить», то есть большей частью размещать уже созданные кем-то ранее элементы, но а вовсе не рисованию с нуля.

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

1. Если вы начинаете изучать векторную графику с нуля, то выберите программу Adobe Illustrator, подойдет любая версия, но, желательно последняя. На данный момент последней является CS5.
2. Если у вас вектор ассоциируется с Corel Draw, и вы даже немного им владеете, все равно рекомендую перейти на Adobe Illustrator (о причинах подобного выбора я буду писать в следующем уроке), а так же все материалы на этом сайте будут ориентироваться только на эту программу.
3. Вам необходимо самостоятельно постичь основы работы с программой, это можно сделать по любой книге (везде написано примерно одно и то же) или воспользоваться бесплатным курсом «Школа начинающего Иллюстратора«, который есть на моем сайте. Из книг не рекомендую брать Официальное руководство, потому что у них, кажется, стояла задача описать программу как можно сложнее и наиболее не понятнее. Но даже и по ней можно учиться.
4. Используйте английскую версию программы, даже если вам доступна русская, а в английском вы не шарите. На многих сайтах команды обозначаются именно на английском, и привыкая к русскому, вы ограничиваете себя во многом.
5. После изучения основ (или до них), необходимо изучить требования к стоковому вектору, что описывается в 3-ем разделе.
6. Разобраться с тем, что продается на стоках, то есть что наиболее востребовано. Найти уроки, например, на этом же сайте, как создаются те или иные эффекты и создать 10 своих! картинок.
7. Пройти экзамен на Shutterstock.com, начать работать с другими стоками и рисовать, рисовать и рисовать, совершенствуя свою технику, пробуя разные стили, находя свою собственную уникальную нишу

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

Нужно:

1. Интерфейс программы, палитры, и панели инструментов.
2. Простейшие операции: выделение, группировка, перемещение, копирование, трансформация, поворот.
3. Создание контуров и фигур.
4. Работа с цветом и раскрашивание (кисти, сплошная заливка, градиент, меш, прозрачность, режимы наложения)

Смело пропускайте:

1. Печать
2. Растрирование и работа с растровыми элементами
3. Работа с текстом.
4. Работа с символами
5. Эффекты 3D

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

Анализируя работы своих рефералов, я пришла к выводу, что одним из важных навыком является работа с формой (композицией) и цветом. Иногда не важна степень детализации картинки, как общая композиция и хорошо подобранные цвета.

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

Тренируйте не только свою руку, но и видение. Смотрите работы других авторов, сравнивайте со своими, анализируйте свои ошибки, но, главное, не отчаивайтесь, что у вас все получается не так как у них, а криво, косо и некрасиво. «Чтобы быть хорошим художником, вам сначала нужно стать плохим художником!» . Главное, что вы должны помнить, что соревноваться вы должны не с другими, а с самим собой. Я сегодняшний однозначно лучше себя вчерашнего, а я завтрашний переплюну себя сегодняшнего.

Эта страница была показана 96094 раза.

Как использовать вектор, чтобы рисовать ровные и четкие пропсы: обзор инструмента и примеры

Рассказываем, как работать с вектором, почему его лучше использовать при отрисовке пропсов и на что обращать внимание при рисовании.

Растр слева и вектор справа. Работа художницы студии Canoe Ксении Сеньковской

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

Вектор и его место в геймдев-индустрии

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

При увеличении векторного изображения глаз и мордочка кота остаются в изначальном качестве

Если рисовать скетч с помощью обычной кисти в Фотошопе, получится растровое изображение. Растровыми считают и обычные фотографии. В отличие от векторных, при увеличении на растровых картинках видны пиксели.

Глаз кота при увеличении словно покрывается кубиками — это и есть пиксели

Чтобы сделать векторное изображение в Фотошопе, нужно использовать инструменты Перо и Фигуры, подробнее о них поговорим ниже. Когда картинка готова, ее или отдельные части можно заливать цветом.

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

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

«Никогда не останавливайтесь на достигнутом, изучайте новые инструменты и программы — так вы станете супер-крутым специалистом. Художник должен знать хотя бы примерно принцип работы программ анимации, программ сбора игр и т.д. Ведь именно мы создаем графику для всего этого. Наше незнание усложняет жизнь нашим коллегам. Поэтому для достижения качественной работы все приемы хороши. Пользуйтесь!»

Ксения Сеньковская

Художница студии Canoe

Преимущества векторных рисунков для художников

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

Экономят время. Если освоить вектор, простую иконку для игры можно сделать за пару минут. Например, основу баночки с зельем можно отрисовать с помощью эллипса и пера, после чего залить цветом. Конечно, для реалистичности картинку надо будет рендерить, зато основу получится сделать быстро.

Источник

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

Изображение заскринили, добавили эффекты и немного увеличили — его качество не изменилось. Diego Monardes

Мало весят. Векторные изображения легкие, поэтому они не будут утяжелять игру или долго прогружаться. Например, в игре Cooking Craze персонажи, объекты и иконки — полностью векторные.

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

Вектор слева vs растр справа

Векторные инструменты и как с ними работать

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

Если тапнуть на каждый векторный инструмент в Фотошопе, то рядом с ним появится меню с набором дополнительных инструментов. У Пера это обычное Перо, «Свободное перо», «Перо кривизны», «Перо+», «Перо-» и «Угол».

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

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

Чтобы сдвинуть усик на 45° в любую сторону, нужно зажимать клавишу Shift. Чтобы двигать усик под любым углом, нужно зажать Alt

Инструмент «Свободное перо» помогает рисовать изображения разной формы. Это выглядит так, будто рисунок делают с помощью обычной кисти. Но края по-прежнему будут ровными.

Инструмент «Перо кривизны» появился в версии Фотошопа от 2018 года. Он упрощает работу с Пером. Для отрисовки любого предмета достаточно отметить точки, которые автоматически соединяются линиями. Инструмент интуитивно пытается понять, какая фигура нужна, поэтому подстраивает форму под расположение точек. Так, они могут быть ровными, а могут быть изогнутыми — зависит от того, какую часть нужно отрисовать.

Источник

«Перо+» добавляет дополнительные точки на уже готовое векторное изображение — так его можно сильнее искривить. Например, нарисовали профиль персонажа — теперь нужно сделать небольшой выступ, чтобы отметить нос. Для этого на линии лица отмечаются дополнительные точки, положение и усики которых можно изменять.

«Перо-», наоборот, убирает лишние точки. Например, если одна точка искривляет линию, а она должна быть ровной.

«Угол» настраивает положение усиков уже после окончания отрисовки. Например, нужно сделать более явный угол, чтобы отрисовать ухо кота. Нужно нажать на «Угол», выбрать точку и подвигать ее усики.

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

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

У прямоугольника можно делать обводку, менять ее ширину и вид. Кроме того, фигуру можно превратить в квадрат — на панели редактирования нужно указать одинаковую ширину и высоту.

Прямоугольник со скругленными краями можно скруглить еще сильнее, чтобы сделать овал.

У шестиугольника можно изменять количество его углов. Например, сделать семь углов вместо шести.

Линия тоже изменяется — ее можно сделать прерывистой или цельной, сделать шире или тоньше.

Пятно можно видоизменять — на панели редактирования вверху есть раздел с фигурами. Например, там получится превратить пятно в стрелки, галочки или письмо.

В вектор можно превратить и текст — для этого нужно выбрать инструмент Текст и написать нужное слово или букву. На панели со слоями текст будет выделяться иконкой с буквой Т. Чтобы превратить его в вектор, нужно нажать правой кнопкой мыши на слой и выбрать «Преобразовать в кривые».

Операции и редактирование векторных фигур

Чтобы редактировать фигуры и изменять их положение или вид, можно использовать панель редактирования, стрелки и операции.

Панель редактирования. Панель редактирования появляется после нажатия на Фигуры или Перо. Там можно менять цвет заливки, добавлять или убирать обводку любого цвета. Кроме того, можно изменять вид обводки — это может быть пунктир или единая линия. Важно перед работой с вектором на панели указывать, что это фигура. Если указать вместо фигуры пиксели, тогда изображение получится растровым.

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

Белая стрелка двигает точки — например, когда нужно из тупого треугольника сделать равнобедренный. Если нажать на белую стрелку, откроется меню — в нем будет инструмент с черной стрелкой. Когда нужно двигать фигуру по полю и изменять ее положение, нужно зажать ее черной стрелкой и подвигать.

С помощью белой стрелки можно изменить расположение точек и сделать другую фигуру, а с помощью черной — сдвинуть целую фигуру на другое место

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

С помощью операций фигуры можно объединить, вычесть друг из друга, извлечь пересекающуюся часть или выделить пересекающуюся часть. Принцип такой: сначала отрисовывается первая фигура, потом на панели нужно выбрать одну из операций. Например, объединение. Если нарисовать другую фигуру поверх первой, то они автоматически объединятся и окажутся на одном слое. Но при этом они не становятся одной фигурой — их по-прежнему можно изменять отдельно друг от друга.

Объединение. При объединении две фигуры соединяются в одну. Например, можно объединить два квадрата и сделать прямоугольник, но они по-прежнему могут изменяться независимо друг от друга.

Вычитание друг из друга. Чтобы вычесть верхнюю фигуру из нижней, достаточно нарисовать основную фигуру и нажать на «Вычесть переднюю фигуру» в операциях. Потом поверх отрисовывают вторую — тогда контур второй фигуры вырезается из первой.

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

Выделение пересекающейся части. В этом случае делается все то же самое, что и при извлечении, только команда будет другая — «Область пересечения фигур». Тогда на поле останется только часть, которая была пересечением двух форм.

В операциях есть функция «Объединить компоненты фигуры» — если выбрать одну фигуру после любой операции и нажать эту команду, тогда компоненты сольются. Это значит, что изменять объект по частям не получится.

Простой план векторной отрисовки от художницы Ксении Сеньковской

Разберем работу с вектором на примере отрисовки основы тарелки с супом.

Чтобы сделать иллюстрацию, сначала нужно использовать эллипс и с его помощью сделать дно тарелки, тарелку и суп внутри.

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

Заливка рисунка происходит с помощью градиента, чтобы изображение получилось более живым.

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

Финальный вид работы

Кроме того, некоторые объекты можно полностью рендерить в векторе — это значит, что можно там же расставить тени или блики света с помощью фигур.

Например, вот это изображение делали и рендерили полностью в векторе. Автор: Ксения Сеньковская

Обязательно ли использовать вектор?

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

В остальном зависит от вас — если вам кажется, что лучше и легче отрисовать некоторые детали растровой картинки вектором, то сделайте это.

Важно помнить особенности работы с вектором — их три:

1. На слое с фигурой нельзя изменить кривые цвета или настроить яркость с контрастностью — для этого придется создавать корректирующий слой и работать на нем.

2. Картинку не получится обработать с помощью фильтров.

3. Вектор может влиять на стилистику из-за четкого деления слоев на основные фигуры.

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

Нарисовать вектор для Intro logo в Adobe Illustrator • фриланс-работа для специалиста • категория Векторная графика ≡ Заказчик Алексей Боярин

3 из 3

закрыт без выполнения

1. публикация

2. прием ставок

3. закрыт без выполнения

Нарисовать 1 иллюстрацию(разрешение 1920Х3240) для Intro logo в Adobe Illustrator. Перса разбить по слоям для анимации в Adobe after effects. Пример прикрепил.

Один розбитий персонаж в профиль и фас — Лев. Грива должна быть как облако, что б ассоциировалось с fluffy lion

Стиль Grain, Noise. Несколько стилей рисунков прикрепляю

Рисунок должен быть уникальным. Все элементы рисунка также должны быть разбиты по слоям и нарисованы Вами.

Если работа будет выполнена на отлично, возможно долгосрочное сотрудничество

Приложения 7

Просмотр приложений доступен только зарегистрированным пользователям.

• Ставки 10
• Отклоненные 1

дата онлайн рейтинг стоимость время выполнения

1. 3 дня300 UAH

   3 дня300 UAH

   Здравствуйте!
   Есть опыт работы с таким типом задания. Готова выполнить всё качественно и в сроки!
   ______________________________________________________________
   Открыта к диалогу!
   Примеры работ по ссылке:
   — Google Drive
   -Freelancehunt
   

2. 2 дня300 UAH

   2 дня300 UAH

   Здравствуйте. Готова выполнить ваш заказ. Могу предоставить несколько вариантов итога. Выполню в самые удобные для вас сроки.
   

3. 4 дня1000 UAH

   4 дня1000 UAH

   Здравствуйте! Могу нарисовать для вас иллюстрацию, все согласно тз. Обращайтесь, сделаю качественно. Специализируюсь в векторной графике. Результат предоставлю в иллюстраторе, нужные элементы разобью по слоям
   

4. 5 дней350 UAH

   5 дней350 UAH

   Привіт. Готова виконати завдання.
   Behance
   моя пошта: [email protected]
   Звертайтесь.
   

5.  фрилансер больше не работает на сервисе

6. 3 дня1200 UAH

   3 дня1200 UAH

   Здравствуйте, заинтересован в исполнении Вашего проекта. На выполнение уйдет до 3 дней со всеми правками. Наброски нескольких вариантов предоставлю в течении пары часов.
   Портфолио: Freelancehunt
   Телеграм: @bojko_freelance
   Ожидаю Вашего положительного ответа.
   

7. 3 дня300 UAH

   3 дня300 UAH

   Здравствуйте. Готов выполнить ваш заказ. Могу предоставить несколько вариантов итога. Выполню в самые удобные для вас сроки.
   Сам 2д дизайнер с опытом,специализация отрисовка илюстраций и дел док,был опыт в макете сайта
   

8. 3 дня1000 UAH

   3 дня1000 UAH

   Добрый день, с удовольствием возьмусь за проект.

   https://yungdem.tumblr.com — мои работы.
   

9. 2 дня500 UAH

   2 дня500 UAH

   Здравствуйте.
   Работаю с графикой для видео.
   Готов отрисовать вашу иллюстрацию.
   

10. 1 день500 UAH

    1 день500 UAH

    Привет, меня зовут Андрей. Работаю Графическим Дизайнером на протяжении полу года. Меня заинтересовал ваш проект, готов приступить. моб. 0993135248
    skype: andria999_2
    Мое портфолио ——- Behance

    Мое портфолио ——- Dribbble
    

1. ставка скрыта фрилансером

3 года назад

374 просмотра

• векторная графика
• Векторная отрисовка
• дизайн и иллюстрация
• векторная иллюстрация

как рисовать в векторе

40 туториалов для создания векторных иллюстраций

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

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

Приступая к работе

В этом уроке объясняется, каким образом создавать векторные иллюстрации используя Adobe Illustrator. Приводится объяснение ключевых параметров и инструментов, которое дополняется советами экспертов.

В этом многогранном туториале Вы узнаете основные термины, рассмотрите рабочие процессы и техники, которые помогут начать работать с векторной графикой.

Инструмент «перо» — один из основных в арсенале программы, он особенно важен для начального овладения векторной графикой. Это подробное руководство ставит своей целью познакомить Вас с особенностями и методами работы с незаменимым инструментом компании Adobe. А также с наиболее рациональными способами его использования.

Данный видео-туториал является действительно ценным ресурсом, который объясняет как создавать векторную графику в Illustrator и какую роль в этом процессе играет рисование.

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

Узнайте, как создавать простые органические формы в Illustrator с этим простым для восприятия руководством от Верле Питерс (Veerle Pieters), графического и веб-дизайнера.

7. Добавление текстуры для векторных иллюстраций

Добавление текстуры — это отличный способ сделать Вашу векторную графику более выразительной, подчеркнуть ее перспективу. В этом очень доступном видео эксперт Illustrator Александра Сесилио (Alexandra Cecilio) демонстрирует как это сделать.

Этот туториал от Андрея Мариуса (Andrei Marius) поможет Вам создать векторный линейный график. Пошагово: начиная с простой сетки до направляющих линий, используя только панель Appearance (один из мощнейших инструментов в Adobe Illustrator) с добавлением некоторых простых фрагментов текста и тонкой штриховки.

Создание лиц

9. Создание векторного глаза

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

Это углубленный видео курс, который поможет в овладении искусством создания векторных портретов на основе фотографий.

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

С возрождением геометрической тенденции, справедливо сказать, что WPAP может быть представлен в большем количестве различных аспектов дизайна. Этот туториал покажет Вам как самостоятельно создать WPAP в Illustrator с помощью мастера WPAP.

Прорисовка волос в векторе может быть довольно мудреной. Этот туториал шаг за шагом показывает как волосы с фотографии превращаются в векторные.

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

Дизайн персонажей

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

Джонатан Болл (Jonathan Ball), основатель Poked Studio, обьясняет как с помощью Illustrator основные геометрические фигуры превращаются в уникальных, красочных персонажей.

В этом уроке Вы легко и весело создаете очень простой трафарет, который можно использовать на различных поверхностях (включая футболки, стены, холсты). Сказка Л. Кэррол «Приключения Алисы в Стране чудес» вдохновила автора на создание векторного изображения и написание туториала.

С помощью этого туториала Мэри Винклер (Mary Winkler) собирается показать Вам, как нарисовать чиби персонажа с нуля, используя Shape Builder Tool (Shift-M), Pen Tool (P), прозрачные градиенты, и многое другие инструменты Illustrator.

В руководстве описан процесс создания простого персонажа аниме от начала и до конца.

Узнайте как создаются милые кролики в этом туториале векторной графики. Тренинг использует простые формы и градиенты, которые легко применимы и к иллюстрациям других персонажей.

Этот туториал представляет очень много основных форм для достижения действительно ловкого стиля иллюстраций. А затем «оживляет» йети с помощью палитры холодных цветов.

Здесь Вы сможете увидеть, как создаются персонажи видеоигр. У Вас будет возможность рассмотреть работу с первого эскиза и до самого финала.

Иллюстратор и автор Шейрен Милн (Sharon Milne) показывает, как создать монохромный портрет с фотографии.

Если Вы заядлый любитель футбола, то этот туториал будет особенно кстати. В уроке Сергей Кандаков создает яркую иллюстрацию с эффектом стиля ретро.

Ландшафт и окружающая среда

В этом уроке от векторного художника Андрея Мариуса (Andrei Marius) показано, как можно создать простой дизайн карты в Illustrator.

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

Очень простой и последовательный урок от Дианы Тома (Diana Toma), который показывает как нарисовать прекрасные цветы используя градиентные сетки (меш).

Особые эффекты

В этом пошаговом руководстве Вы изучите, как создать «электрический» текст в векторе.

Том Мак (Tom Mac) показывает, как в Illustrator создать портрет с drip-effect, используя инструмент Pen и кое-какие дополнительные методы.

В этом учебном руководстве мы сделаем простой и красивый восточный паттерн в Adobe Illustrator, который будет состоять из различных объектов азиатской культуры.

За прошедшие годы винтажные иллюстрации и ретро-стиль стали вновь популярными в дизайне. В представленном уроке разработчик Бен Стирс (Ben Steers) делится своими методами, которые помогут Вам преобразовать векторные рисунки в ретро-стиль.

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

Следуя этому туториалу Вы сможете создать эффект блеска в Adobe Illustrator. В основе иллюстрации заложены три эффекта: бумага для заметок, витраж и рваные края. С помощью быстрой трассировки они превращаются в блестящую векторную текстуру.

Полутон — способ воспроизведения монохромного изображения. Он базируется на специфике восприятия картины человеческим глазом для которого область изображения, заполненная крупными точками, ассоциируется с более темными тонами. И наоборот, область, заполненная точками меньшего размера, воспринимается как более светлая. Художник Крис Маквей (Chris McVeigh) покажет, как создать векторный полутон.

В этом учебном руководстве Вы изучите, как создать графический логотип Бэтмена, используя простые формы в Adobe Illustrator. Используются простые инструменты, вроде Ellipse Tool (L) и Shape Builder Tool (Shift + M).

36. Конвертируйте растровое изображение в векторное

Это учебное руководство Inkscape демонстрирует, как преобразовать растровое изображение в векторное при помощи функции Trace Bitmap.

Слайдер — популярный элемент веб-дизайна. В данном туториале показан вариант создания слайдера в векторе.

Сиара Фелен (Ciara Phelan) продемонстрирует Вам как с помощью комбинирования векторных изображений и фотографий можно создать удивительный коллаж.

В этом туториале от одной дизайнерской студии рассказывается как просто нарисовать и трассировать фотографию. Для создания реалистичной иллюстрации в примере используется простая градиентная заливка.

В этом учебном руководстве показано, как создать эффект вышивки крестиком в Adobe Illustrator. Для этого будет использоваться панель Appearance и образцы.

9 Советов и секретов, как передать что угодно в векторе

Sharon Archer-Thomas Mar 23, 2015

Russian (Pусский) translation by Lexie Bykova (you can also view the original English article)

Бывало ли так, что вы смотрели на что-то и думали: «Это бы здорово выглядело в векторе,» — но не знали, с чего начать?

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

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

1. Разбейте композицию на основные фигуры

Когда вы смотрите на объект, подумайте, из каких основных фигур он состоит.

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

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

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

Векторизация коротких волос в иллюстрации с негативным пространством с помощью Adobe Illustrator

2. Не пренебрегайте основными геометрическими фигурами

Я работаю с помощью стоковых фото, хотя это не единственный подход к иллюстрации. Многим иллюстраторам нет нужды обращаться к стоковой фотографии. Они могут полностью полагаться на собственные наброски и воображение. Когда вы работаете этим способом, и у вас нет четких фигур, не пренебрегайте геометрическими фигурами. Я говорю об окружностях, прямоугольниках и треугольниках. Однако в реальности не все будет вписываться в четкие рамки такой фигуры.

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

Уроки Наталии Долотко — основные примеры такой техники. Большинство ее уроков полагаются на базовые геометрические фигуры и эффекты искажения для создания сложных фигур. Мой любимый — ее сцена гостиной, где по большей части в иллюстрации использована одна базовая фигура. Можете догадаться, какая?

Подсказка: Инструмент Прямоугольник (М)

3. Ищите повторяющиеся элементы

Многие объекты и сцены имеют повторяющиеся элементы. Умение их различать сэкономит вам время работы. Если вы стремитесь к реалистичному эффекту, научитесь делать копии элементов, а затем модифицируйте их (цвет, текстуру, размер, ротацию), чтобы каждый выглядел уникальным. Нет ничего хуже, когда при реалистичной передаче все элементы выглядят идентичными копиями. Однако если вы работаете с более простыми элементами, нет ничего постыдного в копировании (или использовании более умного инструмента Трансформирования).

В статье «Как создать эффект «Лего» 3D в Adobe Illustrator» легко увидеть, что эти блоки созданы из повторяющихся элементов. Однако точности в результатах можно добиться, когда все углы и размеры блоков переданы сначала по отдельности, а затем уже собраны вместе с помощью копий.

Как создать эффект «Лего» 3D в Adobe Illustrator

Другим хорошим примером повторяющихся элементов станет эта замечательная статья о создании рисованной сцены с медведями с помощью повторяющихся фигур в Illustrator. Заметьте, как группы фигур скопированы, а затем модифицирован цвет и масштаб, чтобы создать разнообразие.

Создайте рисованную сцену с медведями с помощью повторяющихся фигур в Illustrator

4. Экономьте время с помощью кистей

Подобно повторяющимся элементам работают и кисти. Если вы можете увидеть, как простой объект используется снова и снова, подумайте о том, чтобы создать из него кисть. Я люблю кисти и люблю наблюдать за тем, как креативно они используются в создании иллюстраций, а иногда даже становятся ключевым элементом иллюстрации.

Хорошим примером послужит мой урок о ночной сцене с котом. Если вы посмотрите на небо, там есть звезды. На создание каждой звезды уйдет слишком много времени, но с помощью Дискретной Кисти вы можете создать звезды разного размера и распределить их за считанные секунды. Забор также создан с помощью основных фигур и повторяющихся элементов с использованием эффекта Наложения!

Экспериментируйте с эффектами наложения и трассировки, чтобы создать простую сцену с котом в Adobe Illustrator

Кисти также помогут вам и с другими мелкими деталями в композиции. Хотя в этом уроке от Андрея Мариуса (кстати, в своих уроках он показывает много способов креативного использования кистей) все внимание уделено созданию эффекта веревки в тексте, он идеально показывает, как такой простой элемент, как веревка, — достаточно мелкий элемент дизайна, — может быстро и эффективно использоваться с помощью кисти.

Используйте узорную кисть, чтобы создать эффект веревки в Illustrator

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

Создайте детальную кисть в виде змеи в Adobe Illustrator

Я могу говорить о кистях без устали, но давайте посмотрим, что еще есть для создания повторяющихся узоров.

5. Как насчет текстур?

В идеальном мире все бы было плоским. Там бы не было текстур. Там все было бы проще. Но мы не живем в таком мире. У поверхностей есть текстуры. К счастью есть несколько способв передать текстуры в векторе. Давайте рассмотрим некоторые из них.

Создание текстуры из узоров

Текстуры можно создать с помощью векторных узоров. Дерево — одна из тех текстур, где можно сэкономить время, применив узор. Прочтите этот урок о создании плетеного узора, что станет прекрасным примером текстуры, превращенной в узор.

Короткий совет: как создать бесшовный узор с соломенной плетенкой в Adobe Illustrator

Создание текстуры из эффектов

В Adobe Illustrator есть целый ряд эффектов Photoshop, которые можно применить для добавления чего угодно в ваш дизайн — от грязной поверхности до зернистого эффекта. В этой статье мы посмотрим, как добавить зернистость и эффект губки, чтобы создать текстуру камня.

Как создать иллюстрацию с темным могильным камнем в Adobe Illustrator

Создание текстуры из кистей

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

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

Короткий совет: Как создать графический стиль с текстурой бумаги в стиле гранж в Illustrator

6. Симметрические эффекты

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

У меня есть несколько примеров того, как используются графические стили в панели Оформления для того, чтобы передавать разные объекты. Попытаемся создать простой фрукт киви на основе одной фигуры.

Как видите, внутри закрытой равномерной фигуры фрукт киви забирает внутрь те же слои, что были снаружи. Вы узнаете, как создать стиль графики для объекта, когда можете отрезать часть фигуры, и она сможет стать частью общей фигуры.

Создать ломтик киви с помощью одной фигуры в Adobe Illustrator

Тем не менее, фигура не должна быть идеальным эллипсом. Как насчет создания авокадо на основе простой фигуры? Форма авокадо не является равносторонней фигурой. Это можно сделать, когда вы знаете, каким богатым ресурсом является ваша векторная программа. Ядро фрукта создано с помощью эффектов преобразования в фигуру и искажения.

Создайте авокадо с помощью только одной фигуры в Adobe Illustrator

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

Использование панели Оформление для создании иллюстрации кухни

7. Креативные решения — не обман

Когда мы думаем об «обмане» в рамках векторов, мы, возможно, думаем о таких инструментах как Трассировка Изображения. «Обманом» будет создание изображения на основе стокового фото с помощью Трассировки, а затем продажа его клиенту, правильно? Да, именно так — неэтично заниматься такими вещами.

Однако есть некоторые случаи «прямо из стоков», которые позволяют создать утонченные детали для ваших дизайнов, которые не будут считаться «обманом».

Создание фона с помощью трассировки изображения

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

Создайте пушистого кота на Хэллоуин с помощью инструмента Кисть и Градиентов

Создайте фон с помощью градиента

Если фон — незначительная деталь, то почему бы не создать расфокусированный фон с помощью градиента? Этот урок покажет вам, как создать его с помощью фото с низким разрешением.

Короткий совет: Создание расфокусированного фона с помощью градиента.

8. Не усложняйте задачу

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

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

Создайте очаровательного щенка с помощью негативного пространства и инструмента Кисть

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

Действительно ли вам нужно добавлять все эти волоски? Действительно ли надо создавать текстуру маленьких участков? Действительно ли нужно передавать трещину в стакане на полке, когда вы иллюстрируете большую композицию? Да, мы должны уделять внимание деталям, но не тем, которые только перегрузят дизайн и приведут к слишком «тяжелым» файлам.

9. Будьте последовательны

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

Хотя вы можете работать с каждым объектом по-разному, помните, что они все принадлежат одному дизайну, и им надо будет смотреться органично вместе, чтобы дизайн не был похож на смесь несвязанных предметов.

Здесь важно помнить несколько вещей:

• Когда используете линии, то рисуйте их во всем рисунке, или нигде. Следите за ключевыми элементами стиля, вроде линий в самых важных местах рисунка. Если вы собираетесь ими воспользоваться, делайте это во всем изображении.
• Пользуйтесь одной и той же палитрой. Применение новых цветов в одной области, и отсутствие в других местах изображения заставит это бросаться в глаза.
• Помните, как свет взаимодействует с иллюстрацией. Один из знаков, что у вас беспорядочная композиция — это включение объектов с разными источниками света.

Проверьте свои знания, просматривая изображения в стоках и окружающий мир

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

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

• Базовые цвета, не усложняем: Я бы разбила это изображение на базовые фигуры для зеленой травы и голубого неба. Я бы показала небольшой холм на линии горизонта, но нет необходимости передавать каждый бугорок, достаточно показать органическую поверхность.
• Повторяющиеся элементы: Деревья можно расценивать, как повторяющиеся элементы — они небольшие в контексте иллюстрации, и нет необходимости воссоздавать каждое индивидуально. Я, скорее всего, передала бы 2-3 вида листвы, добавила небольшие мазки кисти каждой копии, чтобы придать ей уникальный вид.
• Текстуры: Трава — очевидная текстура, и всегда напоминает мне об этом замечательном уроке о том, как передавать траву. Однако я бы использовала узорную заливку, применила к ней перспективу, и затем нарисовала бы отдельные травинки на переднем плане, чтобы иллюстрация меньше походила на готовый узор.
• Стили графики: Мяч можно создать с помощью стилей графики, используя градиенты для создания глубины, а затем можно применить узор, чтобы создать эффект выемок.
• А как насчет облаков? Что же, я бы использовала комбинацию размытого фона (не в фокусе) и мягких мазков кисти из палитры Щетинных Кистей, чтобы создать мягкую текстуру.

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

Пора поделить его на части:

• Базовые фигуры и убираем лишнее: Базовые фигуры можно создать почти для всех объектов за исключением одной чашки кофе. Нужно ли нам 8 человек за столом, или для иллюстрации достаточно и 6? Не до конца уверены, что из себя представляет белый треугольник? Может быть, это салфетка или что-то другое? Я не знаю, что это, поэтому исключаю его из базовых фигур. По большей части эти фигуры — геометрические фигуры: ноутбук, стол, стаканы, чашки, и даже цветочный горшок.
• Текстуры и узоры: Очевидной текстурой здесь будет поверхность стола. Мне не нужно передавать всю текстуру, достаточно показать, что деревянные панели использованы на крышке стола. Возможно, некоторые эффекты зернистости можно использовать в одежде, чтобы создать впечатление текстуры. Я бы однозначно не стала детально передавать клетчатую рубашку внизу (в центре) или детали джинсовой рубашки в центре вверху, потому что это может перегрузить иллюстрацию.
• Повторяющиеся элементы: самый повторяющийся элемент здесь — это чашка кофе. Их можно передать с помощью Стилей Графики, а затем, возможно, с помощью пары фигур (друг на друге), чтобы каждая выглядела уникально. То же самое относится и к стаканам с водой.
• Кисти: Там есть нечто, похожее на базилик, по центру стола. Возможно, у меня получится создать художественную кисть в виде листка базилика и с ее помощью прорисовать листья, то есть, для начала мне понадобится только передать один лист, и потом создать кисть.
• Креативные решения: Такие элементы, как клавиатуру и газету, можно передать с помощью Трассировки, и тем самым избежать индивидуальной прорисовки этих фигур, но вы все равно сможете создать впечатление присутствия этих объектов.

Я надеюсь, что эта статья дала вам более глубокое понимание того, как можно передать в векторе что угодно. Если вы хотите проверить меня, или кого-то еще, почему бы вам не загрузить изображение в комментарии и посмотреть, какие предложения будут по поводу того, как его можно передать? А если вам сложно передать что-то, вы можете спросить в комментариях у наших членов общества. Может быть, кто-то сможет помочь. Счастливо поработать!

5 способов создать векторную картинку в Adobe Illustrator

Микростокер и иллюстратор Ольга Захарова рассказала несколько способов, которыми она пользуется при создании очередной иллюстрации на продажу или для коммерческого заказа. Способы просты и, наверняка, большинство практикующих иллюстраторов о них знает, однако, все они сопряжены с нюансами, на которые стоит обратить внимание.

Когда я только начинала вести этот блог, я совсем ничего не понимала в стоках и очень мало знала о создании векторной иллюстрации. Поэтому мне хотелось делиться с миром каждым важным открытием — я понимала, что также, как недавно страдала я, не зная, как сделать бесшовную текстуру, сейчас страдает еще кто-то 🙂

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

Три картинки — три разных способа создания. Угадаете, где какой? 🙂

Это я все к тому, что меня тут как-то недавно спросили — а как удобнее обрисовывать картинку в Иллюстраторе?

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

Трейс / Image Trace

Самый автоматизированный способ сделать из скетча векторную картинку и, как мне казалось раньше, самый быстрый (дисклеймер — сейчас я уже так не думаю).

Трейс картинки осуществляется с помощью панели image trace (верхняя панель Window — Image Tace) — просто помещаете свой скетч на рабочую область, открываете панельку, в выпадающем меню выбираете один из пресетов (у всех разные настройки, выбрать лучший можно методом тыка) — например, sketch — и через минуту-другую ваш файл превращен в вектор. Потом нужно только не забыть удалить “мусор” — разные пустые пути, которые образуются в процессе. Для этого не снимая выделение с оттрейсенного объекта надо пойти в верхнее меню Object — Path — Clean Up.

Трейс готов! Как говорили на одной моей прошлой работе “нажал кнопку — и в кассу”. Но, увы, все не так просто.

Результат трейса выглядит круто только тогда, когда исходная картинка-скетч была высокого качества (четкие линии с минимумом рукодрожания, не ворсистыми линиями и тп), потом она была сканирована с приличным DPI и хотя бы немного обработана в фотошопе (выбеливание фона, добавление контраста). Во всех остальных случаях трейс требует доработки.

Я делаю так: включаю видимость путей (cmd+H), выбираю контрастный цвет для них по отношению к обводке (двойной клик по названию слоя) — и, увеличив картинку до 200-300% проверяю аккуратность линий. В этом мне сильно помогают обычный карандаш — он мне нравится больше, чем сглаживающий — и плагин от Astute Graphics Smart Remove Brush Tool, которым можно удалять лишние точки, минимально изменяя линию.

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

Я на данный момент использую трейс только для цитат вроде такой:

Плюсы и минусы трейса:

+ Можно относительно быстро превратить хороший скетч в векторную картинку с сохранением hand drawn эффекта

– Нужно потратить время, чтобы обработать
– Весь объект уже векторный, то есть труднее поменять толщину линий
– Линии не будут идеально ровными (это же и плюс)

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

Блоб браш / Blob Brush

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

У этого инструмента так много поклонников, что мне даже как-то неловко признаваться, что я его не люблю и практически совсем не использую. Это вызывает у людей примерно такие же эмоции, как когда я говорю, что мне не нравится “Мастер и Маргарита”. Но что есть — то есть 🙂 Примеры употребления блоб браша в моем портфолио можно найти только на очень-очень старых картинках, которые, скорее всего, будут удалены во время следующей чистки.

Одна из моих первых картинок, нарисованная блоб брашем

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

Плюсы и минусы блоб браша:

+ Облегчает художникам переход с растра на вектор
+ Имитирует “живое” рисование

– Нужен планшет, чтобы оценить всю прелесть (и умение рисовать тоже не помешает)
– Толщину линий можно задавать только перед рисованием, как только линия проведена — она по сути является векторным объектом с заливкой, — как и в случае с трейсом регулировать толщину постфактум сложно

Пентул / Pentool

Самый, наверное, непонятный инструмент для новичков, который оказывается крайне удобной и функциональной штукой, когда узнаешь его поближе. Совсем скоро я добавлю урок в магазин про то, как сделать кривые Безье своими лучшими друзьями, потому что сама в свое время потратила на них немало нервов.
Перо — инструмент наиболее далекий от художников и близкий графическим дизайнерам, потому что чтобы нарисовать линию — нужно не провести ее кисточкой/карандашом и тп, а поставить точку, потом еще одну — и так далее, регулируя изгиб и длину ручками кривой.

Почему-то мне видится, что блоб брашем больше рисуют девочки, а пентулом — мальчики, потому что он такой строгий и серьезный. И да, это мой любимый инструмент. Правда, не стандартный пентул, а апгрейд от Астуте Графикс под названием Вектор Скрайб.

Плюсы и минусы пентула:

+ Чистые и аккуратные линии
+ Можно регулировать толщину нарисованных линий/картинки в любой момент за пару секунд, пока не сделан экспанд (который нужно делать перед отправкой на стоки, но лучше сохранять в рабочем файле неэкспанднутую копию)
+ Пентул — отличный способ создавать картинки на стоки для тех, кто не умеет рисовать в классическом понимании этого слова

– Все рисование сводится к расстановке точек и повороту ручек — многих креативных людей это напрягает
– Полезно также освоить инструмент Shape Builder Tool и панель Pathfinder, потому что обычный ластик удалить лишнее не поможет
– Чтобы научиться уверенно обращаться с пентулом, нужно освоить какое-то количество теории и много, много практиковаться, при этом первое время линии будут получаться кривоватыми и на отрисовку будет уходить много времени

Кисточка (обычная) / Brush

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

Что на линию, проведенную кистью, что на “пентульную” можно “насадить” огромное количество самых разных кистей — из стандартной библиотеки (правда, официально на стоки их использовать нельзя), либо !! своих собственных, каждый раз получая новый результат. Потом нужно не забыть все это дело отэкспандить (то есть превратить в вектор с помощью команды Object — Expand).

Плюсы и минусы кисточки:

+ Сохраняется возможность редактирования линий и можно рисовать руками (не точками)

– Нужен планшет
– Линии почти всегда получаются не такими, как хочется, — может у меня руки кривые, но по моим ощущениям тот же блоб браш позволяет точнее контролировать линию

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

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

Простые геометрические формы

Речь о квадрате, круге, линиях, многоугольниках — чаще всего, конечно, они используются не сами по себе, а в сочетании с пентулом. Рисование с помощью геометрических фигур подходит тем, кто любит геометричность в картинках, кайфует от четких форм и минимума точек на путях 🙂 Раньше я использовала формы только для каких-то очевидных действий — например, делала глаза персонажу с помощью круга, или каркас дома с помощью квадрата.

Посмотрев курс Illustration for Designers: Create Your Own Geometric Animal (Иллюстрация для дизайнеров: Создайте свое собственное геометричное животное) на Skillshare я переосмыслила роль форм в картинках и мне стало интересно научиться видеть формы в объектах. Так родилась серия животных, которую я скоро планирую продолжить:

Плюсы и минусы рисования формами:

+ Линии получаются идеальными, не нужно думать о том, куда поставить точку и как потянуть за ручку

– Перестроиться на «мышление формами» большинству людей очень сложно
– Все равно придется использовать дополнительные инструменты — пентул, панель пасфайндер или шейп билдер тул

Примерно 80% моих текущих картинок нарисованы плагином InkScribe — тот самый аналог пентула от Astute Graphics, о котором я уже говорила (я, кстати, планирую написать отдельный пост про астутовские плагины, как только меня перестанет пугать потенциальный размер этого поста).

Остальные 20% — это трейс, простые формы и иногда — Dynamic Sketch Tool. Это что-то вроде карандаша, только более аккуратный и с большим количеством настроек (опять же, астутовский).

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

Лучшие уроки векторной графики

(Изображение предоставлено Майком Мангиаларди)

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

Мы искали все подряд и собрали лучшие уроки векторной графики, чтобы дать вам возможность создавать бесконечно гибкие цифровые творения. Они подойдут новичкам, желающим начать работу, и опытным профессионалам, которые хотят отточить свои техники. Каким бы ни был ваш уровень, мы обеспечим вас.

Все эти учебные пособия используют такие программы, как Illustrator CC, Affinity Designer или Sketch, чтобы продемонстрировать, как создать свой собственный векторный дизайн (наш список учебных пособий по рисованию может помочь вам с дизайном). Нужно получить программное обеспечение? Вот лучшие скидки Creative Cloud. Если вы предпочитаете использовать стоковый вектор или нуждаетесь в вдохновении, ознакомьтесь с нашим списком веб-сайтов с лучшими бесплатными векторными изображениями.

Лучшие на сегодняшний день предложения Adobe Creative Cloud

Рекомендованная розничная…

Пониженная цена

(Openes in New Tab)

Creative Cloud All Apps

(Opens in New Tab)

£ 49,94

(Opens in New Tab)

£ 49,94

/Mth

(opens. в новой вкладке)

Просмотр (открывается в новой вкладке)

в Adobe (открывается в новой вкладке)

(открывается в новой вкладке)

Creative Cloud Photography

(открывается в новой вкладке)

9,98 фунтов стерлингов

/мес

(откроется в новой вкладке)

Просмотр (открывается в новой вкладке)

в Adobe (открывается в новой вкладке)

(открывается в новой вкладке)

Creative Cloud Single App

(открывается в новой вкладке)

19,97 фунтов стерлингов

0 3 мес.

(открывается в новой вкладке)

Просмотр (открывается в новой вкладке)

в Adobe (открывается в новой вкладке)

Быстрые ссылки попробовать наши уроки Photoshop и уроки Illustrator?

Что такое векторная графика?

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

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

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

(открывается в новой вкладке)

Получите Adobe Illustrator сейчас (открывается в новой вкладке)
Adobe Illustrator — один из лучших и самых простых способов создания удивительных векторных изображений. Вы можете купить программное обеспечение через опцию Adobe CC All Apps, которая дает вам доступ ко всему набору приложений CC для настольных ПК и мобильных приложений для творчества. План также включает 100 ГБ облачного хранилища, Adobe Portfolio, Adobe Fonts и Adobe Spark с премиальными функциями. (В качестве альтернативы, если вы студент или преподаватель, вы можете сэкономить до 60% на CC (откроется в новой вкладке).)

01. Начните создавать иллюстрацию

• Перейти к руководству (откроется в новой вкладке)

Если вы совсем новичок в создании векторной графики в Adobe Illustrator, это отличное место для начала. Создатели программного обеспечения объясняют, как легко создавать иллюстрации из простых векторных фигур, которые можно настраивать, комбинировать и раскрашивать для создания привлекательных иллюстраций.

02. Создание и редактирование фигур

• Перейти к руководству (откроется в новой вкладке)

Продолжая предыдущее введение, в этом учебном пособии Adobe изложены основы создания и редактирования фигур в Adobe Illustrator CC, в том числе способы рисования, объединения и трассировки фигур.

• Перейти к учебнику (откроется в новой вкладке)

Adobe Illustrator — не единственный доступный инструмент для создания векторной графики: все более популярной альтернативой является Affinity Designer. В этом учебном пособии по Affinity Designer объясняется, как векторы сравниваются с растровыми и растровыми изображениями, как создаются векторы, какие приложения используют векторы, почему вам нужно экспортировать свою работу, а также лучшие советы по тому, как сохранить четкий и четкий окончательный дизайн.

• Перейти к учебнику (открывается в новой вкладке)

Здесь Майк Мангиаларди предоставляет подробное руководство по созданию базового векторного графического изображения с помощью этого программного обеспечения, которому может следовать любой человек на любом уровне. Даже если вы не используете Affinity Designer, вы узнаете здесь много нового о векторах, которые сможете применить в своей работе в других инструментах.

05.

Создайте векторную иллюстрацию от начала до конца

• Перейти к руководству (открывается в новой вкладке)

Профессиональный иллюстратор и блогер Крис Спунер считает, что набор инструментов Illustrator для работы с фигурами можно использовать для создания классных векторных иллюстраций абсолютно чего угодно. Он демонстрирует это здесь, демонстрируя свой процесс создания простой иллюстрации водяного пистолета. Все это выполняется с помощью основных инструментов Illustrator, затем для добавления цвета используется инструмент Live Paint.

• Перейти к учебнику (откроется в новой вкладке)

Может быть, вы уже пробовали создавать векторные изображения в Illustrator, но вы новичок в Affinity Designer? Чтобы помочь вам, Андрей Стефан проведет вас через процесс перехода с Adobe Illustrator на Affinity Designer, перечислив основные препятствия, которые вам, возможно, придется преодолеть на этом пути.

07. Как делать надписи от руки в векторе

• Перейти к руководству (открывается в новой вкладке)

Хотите преобразовать надписи от руки в формат векторной графики? В этом видео Скотт Бирсак показывает, как именно это сделать в Adobe Illustrator.

08. Создайте красочный векторный рисунок персонажа

• Перейти к руководству (открывается в новой вкладке)

В этом учебном пособии Illustrator от Digital Arts вы узнаете, как превратить нарисованный от руки эскиз в цветной цифровой векторный файл, корректировка цвета, глубины и композиции. Основные навыки, которые вы здесь изучите, помогут вам снова и снова создавать масштабируемые векторы символов.

09. Как сделать значок галочки 

• Перейти к руководству (откроется в новой вкладке)

В этом уроке Андрей Стефан проведет вас через процесс создания простого векторного значка галочки или галочки icon, используя Adobe Illustrator, от начала до конца.

Следующая страница: Начальные уроки векторной графики

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть учетная запись? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

• 1

Текущая страница: Уроки векторной графики для начинающих

Следующая страница Учебники по работе с векторной графикой среднего уровня

Джорджия Когган в настоящее время является исполняющим обязанности заместителя редактора Creative Bloq. Джорджия начала свою карьеру фрилансера, работая в CB в 2018 году, и с тех пор работала на сайте над новостями, экономикой, SEO-контентом… в общем, всем и вся. Теперь, исполняя роль заместителя Эда в течение трех месяцев, Джорджия является рабом гида по стилю, фанатом логотипов и любит все, что связано с лондонским метро (его история брендинга, а не час пик).

Как превратить рисунок в вектор в Photoshop (9 шагов)

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

Мне всегда было трудно рисовать в цифровом формате, но, к счастью, я научился этому трюку достаточно быстро, чтобы сэкономить массу времени и энергии. Так в чем же хитрость?

В этой статье вы узнаете, как преобразовать ваш удивительный рисунок от руки в вектор в Photoshop и как сохранить его для будущего использования.

Хорошие новости для поклонников Adobe Illustrator! Любые векторные фигуры, созданные в Photoshop, можно копировать и вставлять в Illustrator, так что вы тоже можете использовать этот процесс!

Дополнительный бонус! Если вам нравятся значки из этого урока, вы можете скачать эти бесплатные нарисованные от руки значки , которые я создал и использовать их в своем дизайне!

Содержание

• Как превратить рисунок в вектор: пошаговое руководство
• Часто задаваемые вопросы
  • Где найти пользовательские формы в Photoshop?
  • Как изменить цвет пользовательских фигур в Photoshop?
  • Могу ли я заполнить формы линий в Photoshop?
• Заключение

Как превратить рисунок в вектор: пошаговое руководство шаги ниже.

Примечание. Скриншоты взяты из версии Adobe Photoshop CC 2021 для Mac. Windows или другие версии могут выглядеть немного иначе.

Шаг 1: Нарисуйте фигуры на бумаге. Чем больше, тем лучше. Если вы рисуете несколько фигур, хорошей идеей будет оставить между ними пустое пространство, потому что у вас еще есть работа в Photoshop.

Советы: лучше всего подойдут темные линии на светлой бумаге – черный на белом идеален!

Шаг 2: Отсканируйте свой прекрасный рисунок от руки на компьютер. Если у вас нет сканера, сделайте хороший снимок. Откройте изображение в фотошопе.

Шаг 3: Выберите инструмент Perspective Crop Tool на панели инструментов, обычно он находится в подменю инструмента Crop Tool.

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

Ваше изображение выпрямится автоматически.

Как видите, освещение изображения не очень хорошее. Следующим шагом является настройка яркости и контрастности.

Шаг 4: Перейдите в верхнее меню Изображение > Настройки > Яркость/Контрастность . Вы можете увеличить как яркость, так и контрастность, что помогает уменьшить желтое или неравномерное освещение фона и сделать значки более яркими.

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

В окне настройки уровней вы можете выбрать инструмент «Пипетка» справа и щелкнуть белую область на холсте, чтобы установить белую точку, и переместить ползунок, чтобы настроить освещение рисунка.

Если ваш фон по-прежнему недостаточно белый, вы можете выбрать инструмент «Пипетка» слева и щелкнуть по темной точке, чтобы выбрать образец цвета, переместить ползунок, чтобы отрегулировать уровни.

Цель — сделать фон как можно более белым, а штрихи ваших иконок — видимыми.

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

Вы можете использовать кисть и ластик, чтобы исправить это. Просто выберите инструменты и рисуйте прямо на существующих значках.

Шаг 5: Выберите значки по отдельности и используйте инструмент Rectangular Marquee Tool , чтобы нарисовать вокруг значка. Например, я собираюсь выбрать эту стрелку.

Шаг 6: Скопируйте значок с помощью сочетаний клавиш Command + C и откройте новый документ, нажав Command + N . Поскольку вы только что скопировали что-то в Photoshop, новое окно будет создано с размером скопированного объекта.

Когда будет создан новый новый документ, нажмите Command + V , чтобы вставить только что скопированный значок.

Шаг 7: Выберите инструмент Magic Wand Tool , чтобы щелкнуть часть значка.

Установить допуск 9от 0083 до 100 . Настройки допусков можно найти на панели параметров в верхней части экрана (вы можете включать и выключать их в меню Windows).

Шаг 8: Откройте панель «Контуры». Перейдите к Window > Paths , щелкните значок раскрывающегося списка и выберите Make Work Path .

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

Советы: чем больше число, тем меньше точек контура будет использоваться, и поэтому вы получите более гладкую иконку с более мягкими линиями и, следовательно, потеряете ощущение нарисованности от руки.

Шаг 9: Теперь вы можете превратить контур в пользовательскую форму с помощью главного меню: Редактировать > Определить пользовательскую форму . Дайте вашей новой форме имя, и все!

Часто задаваемые вопросы

Где найти пользовательские фигуры в Photoshop?

Вы можете найти созданный вами вектор или существующую пользовательскую форму, выбрав Custom Shape Tool на панели инструментов, обычно в подменю Rectangular Tool.

Если у вас выбран инструмент Custom Shape Tool, вы можете найти фигуры на верхней панели инструментов и применить их к своему дизайну.

Как изменить цвет пользовательских фигур в Photoshop?

Работает так же, как изменение цвета любых других фигур. Просто выделите фигуру и выберите цвет на панели «Образцы», или вы можете добавить наложение цвета к своему слою.

Могу ли я заполнять формы линий в Photoshop?

Вы можете заполнить фигуры линиями, но сначала вам придется использовать инструмент «Перо», чтобы обвести линию. Когда вы закрываете контур инструмента «Перо», вы можете заполнить фигуру цветом.

Когда вы обводите изображение с помощью инструмента «Перо», оно, скорее всего, потеряет ощущение нарисованного от руки.

Заключение 

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

О Джун

Джун — опытный графический дизайнер, специализирующийся на дизайне брендов. Photoshop — это основной инструмент, который она использует каждый день вместе с другими программами Adobe для своей творческой работы.

Как создать плоскую векторную иллюстрацию в Affinity Designer — Smashing Magazine

• 34 мин чтения
• Иллюстрации, Графика, Учебники
• Поделиться в Twitter, LinkedIn

Об авторе

Изабель Аракама — дизайнер и иллюстратор из Испании с более чем 20-летним опытом работы в различных отраслях и средствах массовой информации. Ее специальность — цифровая графика. Как … Больше о Изабель ↬

Хотя этот учебник был любезно спонсирован Serif, создателем Affinity, мы хотели бы отметить, что он написан независимым профессионалом в области дизайна, который лично получает удовольствие от использования программного обеспечения и делится полученными уроками. Автор никоим образом не связан с продуктом, и статья была независимо проверена Serif, а также редакторами SmashingMag.

( Это спонсируемый пост .) Если вы занимаетесь дизайном, скорее всего, вы уже слышали об Affinity Designer, редакторе векторной графики для Apple macOS и Microsoft Windows.

В июле 2015 года Serif Europe запустила удивительное программное обеспечение, которое многие дизайнеры и иллюстраторы, такие как я, используют сейчас в качестве основного инструмента для профессиональной работы. В отличие от некоторых других пакетов, его цена действительно доступна, нет модели подписки и, как уже упоминалось, он доступен как для Mac, так и для ПК.

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

Примечание : С сегодняшнего дня, 11 июля, Affinity Designer также доступен для iPad. Хотя возможности и функциональность приложения для iPad почти полностью соответствуют настольной версии Affinity Designer, оно в большей степени зависит от использования сенсорного экрана (и Apple Pencil), поэтому вы можете ожидать некоторых отличий в рабочих процессах.

Окончательное изображение, которое мы будем создавать в этом уроке. (Посмотреть большую версию)

Я также объясню некоторые из решения я принимаю и методы я следую, как я работаю. Знаете старую поговорку: «Все дороги ведут в Рим»? В этом случае многие дороги приведут нас туда, куда мы хотели бы попасть, но некоторые из них лучше других.

Мы увидим, как работать с инструментом «Перо», чтобы обвести основной контур автомобиля, как разбивать кривые и сегменты, как преобразовывать объекты в кривые и как использовать замечательный инструмент «Угол». Мы также, среди прочего, узнаем, как использовать инструмент «Градиент», что такое «умная копия», как импортировать цветовую палитру из изображения, которое мы можем использовать в качестве эталона для нашего произведения, как использовать маски и как создать полутоновый рисунок. Конечно, по пути вы также изучите несколько полезных сочетаний клавиш и команд.

Примечание: Affinity Designer имеет три рабочие среды, называемые «персонажами». По умолчанию Affinity Designer настроен на рисование персонажа. Чтобы переключиться с режима рисования на режим пикселя или режим экспорта, вам нужно щелкнуть один из трех значков, расположенных в верхнем левом углу главного окна. Вы можете начать работать в рисованном образе и переключиться на пиксельный образ в любой момент, когда вам нужно объединить векторы и растровые изображения.

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

В последние годы мы наблюдаем рост «плоского дизайна», в отличие от того, что известно как скевоморфное представление в дизайне.

Проще говоря, плоский дизайн избавляется от метафор, которые скевоморфный дизайн использует для общения с пользователями, и мы уже много лет наблюдаем эти метафоры в дизайне, особенно в дизайне пользовательского интерфейса. У Apple были одни из лучших примеров скевоморфизма в ранних разработках iOS и приложений, и сегодня он широко используется во многих отраслях, таких как музыкальное программное обеспечение и видеоигры. Благодаря материальному дизайну Microsoft (с Metro), а затем Google и Apple iOS 7, мобильные приложения, пользовательские интерфейсы и большинство систем и ОС отошли от скевоморфизма, используя его или его элементы как простые усовершенствования нового языка дизайна (включая градиенты). и тени). Как вы можете себе представить, иллюстрации на этих системах также подверглись влиянию новых течений дизайна, и иллюстраторы и дизайнеры начали создавать произведения искусства, которые соответствовали бы новым временам и потребностям. Целый новый мир плоских иконок, плоской инфографики и плоских иллюстраций открылся перед нашими глазами.

Домашний экран iPhone (iOS 6 по сравнению с iOS 7). (Посмотреть большую версию)(Источник изображения) (Посмотреть большую версию)(Источник изображения) (Посмотреть большую версию)(Источник изображения) (Посмотреть большую версию)(Источник изображения) (Посмотреть большую версию)

Давайте нарисуем плоскую иллюстрацию!

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

1. Настройки холста

Откройте Affinity Designer и создайте новый документ, нажав Cmd + N (Mac) или Ctrl + N (Windows). Кроме того, вы можете перейти в «Меню» → «Файл» → «Новый». Не ставьте галочку напротив «Создать артборд».

Установите тип «Веб», что автоматически установит для поля DPI значение 72. Теперь это следует понимать как PPI, но мы не будем здесь углубляться в подробности. Если вы хотите узнать больше по этой теме, проверьте следующие два ресурса:

• » Это PPI, а не DPI», Форумы, Affinity
• «PPI и DPI: в чем разница?», Alex Bigman, 99designs

Кроме того, помните, что вы можете изменить этот параметр в любое время. Масштабирование не повлияет на качество векторов.

Установите размер 2000 × 1300 пикселей и нажмите «ОК».

Теперь наш белый холст готов, но прежде чем мы начнем, я предлагаю вам сначала сохранить этот файл и дать ему имя. Итак, перейдите в «Файл» → «Сохранить» и назовите его «Жук».

2. Импорт цветовой палитры из изображения

Одной из функций, которые я часто использую в Affinity Designer, является его способность импортировать цвета, содержащиеся в изображении, и создавать из них палитру.

Посмотрим, как это делается.

Для иллюстрации, которую я хочу нарисовать, я подумал о теплых тонах, как на закате, поэтому я искал в Google этот запрос: «теплые цвета, желтые, оранжевые, красные палитры». Из всех найденных изображений я выбрал одно, которое мне понравилось, и скопировал его в Affinity Designer на моем недавно созданном холсте. (Вы можете скопировать и вставить изображение на холст прямо из браузера.)

Если панель «Образцы» еще не открыта, используйте меню «Вид» → «Студия» → «Образцы». Щелкните меню в правом верхнем углу панели и выберите параметр «Создать палитру из документа», а затем нажмите «Как палитра документа». Нажмите «ОК», и вы увидите, что цвета, содержащиеся в изображении, образуют новую палитру на панели «Образцы». Имя по умолчанию для него будет «Палитра», если вы еще не сохранили свой файл с именем. В случае, если у вас есть, имя этой палитры будет таким же, как у вашего документа, но если вы хотите переименовать его, просто снова перейдите в меню справа на панели «Образцы» и выберите параметр «Переименовать палитру».

Я назову ее «Палитра жуков».

Создание палитры из изображения. (Просмотреть большую версию)

Теперь мы можем избавиться от этого эталонного изображения или просто скрыть его на панели «Слои». Мы будем использовать эту палитру в качестве руководства для создания нашего произведения с гармоничными цветами.

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

Основные области пользовательского интерфейса в Affinity Designer при использовании режима рисования. (Просмотреть большую версию) Инструменты для (по умолчанию) рисования персонажа в Affinity Designer. (Просмотреть увеличенную версию)

3. Создание фона с помощью инструмента «Градиент»

Следующим шагом будет создание фона. Для этого перейдите к инструментам, отображаемым слева, и выберите инструмент «Прямоугольник». Перетащите его вдоль холста, задав исходный случайный цвет заливки, чтобы вы могли его видеть. Чип цвета заливки расположен на верхней панели инструментов.

Щелкните инструмент «Прямоугольник» и перетащите его вдоль холста. Залейте его случайным цветом. (Просмотреть увеличенную версию)

Затем выберите инструмент Заливка (значок цветового круга или нажмите G на клавиатуре), а в верхней контекстной панели инструментов выберите тип: «Линейный».

Выберите «Линейный» в контекстном меню инструмента «Заливка». (Посмотреть большую версию)

Здесь у нас есть несколько вариантов: «Нет» удаляет цвет заливки, «Сплошной» применяет один сплошной цвет, а все остальные представляют собой различные типы градиентов.

Чтобы выпрямить градиент и сделать его вертикальным, наведите курсор на один из концов и потяните. Когда вы находитесь рядом с вертикальной линией, нажмите Shift : Это сделает ее идеально вертикальной и перпендикулярной основанию холста.

Чтобы выровнять линейный градиент, потяните за один конец, а затем нажмите клавишу Shift, чтобы сделать его идеально вертикальным. (Просмотр увеличенной версии)

Затем, на панели инструментов Context, нажмите на цветовую полоску, и вы увидите диалоговое окно, которое точно соответствует градиенту, который мы только что применили. Нажмите сейчас на цветную фишку, и откроется дополнительное диалоговое окно.

В комбинированном списке нажмите на вкладку «Цвет», а затем выберите «Шестнадцатеричные ползунки RGB»; в поле помеченное # введите значение: FE8876 . Нажмите «ОК». Теперь вы увидите, как градиент был обновлен до нового цвета. Повторите это действие с другой точкой цвета в диалоговом окне градиента и введите это значение: E1C372 .

Теперь у вас должно получиться что-то вроде этого:

Настройка цветов градиента (Просмотреть увеличенную версию)

Перейдем к панели «Слои» и переименуем слой в «Фон». Дважды щелкните его, чтобы переименовать, а затем заблокируйте (щелкнув значок маленького замка в правом верхнем углу).

4. Рисование контура автомобиля с помощью инструмента «Перо»

Следующее, что нам нужно сделать, это найти изображение, которое будет служить нам ориентиром для рисования контура автомобиля. Я искал в Google «Volkswagen Beetle, вид сбоку». Из найденных изображений я выбрал одно из изображений зеленого жука, скопировал и вставил его в свой документ. (Не забудьте заблокировать слой с эталонным изображением, чтобы оно случайно не сдвинулось.)

Затем на боковой панели инструментов выберите инструмент «Перо» (или нажмите P ), немного увеличьте масштаб, чтобы можно было работайте удобнее и начинайте обводить сегмент, следуя контуру автомобиля на картинке. Задайте ширину обводки 8 пикселей на панели «Обводка».

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

Инструмент «Перо» — один из самых сложных инструментов для начинающих и, безусловно, один из самых важных инструментов для изучения векторной графики. Хотя для достижения совершенства необходима практика, важно также понять некоторые простые действия, которые помогут вам лучше использовать инструмент. Давайте углубимся в детали!

При трассировке с помощью инструмента «Перо» в Affinity Designer вы увидите два типа узлов: в квадрате узла появляются первыми, а по мере того, как вы будете тянуть за ручки, они превратятся в округленных узла.

Острые, гладкие узлы и ручки на сегменте пути (Просмотр увеличенной версии)

Affinity Designer поставляется с несколькими режимами пера, но мы будем использовать только режим по умолчанию, который называется «Режим пера», и по мере трассировки автомобиля мы будем избавиться от одной из ручек, щелкнув Alt таким образом, чтобы следующий участок трассируемого сегмента был независим от предыдущего, даже если он связан с ним.

Вот как действовать. Выберите инструмент «Перо», щелкните один раз, отодвиньте его на некоторое расстояние, щелкните второй раз (между узлами 1 и 2 будет создана прямая линия), перетащите второй узел (это создаст кривую), Alt — щелкните узел до удалить второй дескриптор управления, затем перейти к узлу 3 и так далее.

Альтернативный способ — выбрать инструмент «Перо», щелкнуть один раз, отодвинуться на некоторое расстояние, щелкнуть второй раз (между узлами 1 и 2 будет создана прямая линия), перетащить второй узел (это создаст кривую) , то, не двигая мышью, Alt — щелкните точку второй ручки, чтобы удалить эту ручку, затем перейдите к узлу 3 и так далее.

Обведите контур автомобиля и избавьтесь от ненужных нам ручек, нажав Alt. (Просмотреть увеличенную версию)

Примечание: Не бойтесь отслеживать несовершенные сегменты. Со временем вы лучше освоите инструмент «Перо». На данный момент не очень важно, чтобы каждый узел и линия выглядели так, как мы хотим, чтобы они выглядели в конце. На самом деле, Affinity Designer позволяет очень легко изменять сегменты и узлы, поэтому для начала достаточно проследить приблизительную линию. Чтобы узнать больше о том, как легко использовать инструмент «Перо» (для начинающих), ознакомьтесь с видеоуроком Изабель Аракама.

5. Моделирование сегментов и использование инструмента «Угол»

Теперь нам нужно сделать все эти грубые линии плавными и изогнутыми. Сначала мы потянем прямые отрезки, чтобы сгладить их, а затем улучшим их с помощью инструмента «Угол».

Щелкните инструмент «Узел» на боковой панели инструментов или выберите его, нажав A на клавиатуре. Теперь начните вытягивать сегменты, чтобы следовать линиям исходного изображения. Вы также можете использовать ручки, чтобы помочь линии принять нужную форму, перемещая и вытягивая их соответствующим образом. Просто сделайте это так, чтобы все соответствовало эталонному изображению, но не сильно заморачивайтесь, если оно еще не идеально. С помощью инструмента «Узел» (A) вы можете выберите и переместите узлы , но вы также можете щелкнуть и перетащить сами кривые, чтобы изменить их.

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

Как только все сегменты окажутся там, где они нам нужны, мы собираемся сгладить их углы с помощью инструмента «Угол» (сочетание клавиш: C ). Это один из моих любимых инструментов в Affinity Designer. Инструмент Live Corner позволяет идеально настроить узлы и сегменты. Выберите его, нажав C или выберите его на боковой панели «Инструменты». Метод довольно прост: проведите угловым инструментом над острыми узлами (квадратными узлами), которые вы хотите сгладить. При необходимости вернитесь к инструменту «Узел» ( A ), чтобы отрегулировать часть сегмента, потянув его или его ручки. (Гладкие узлы (закругленные узлы) не допускают большего смягчения, и они будут отображать меньший кружок в тот момент, когда вы выберете инструмент «Угол».)

Посмотреть большую версиюПоказать большую версиюИспользуйте инструмент «Угол» на острых узлах, чтобы сгладить линии. (Просмотреть увеличенную версию)

Как только наши углы и сегменты будут хорошо выглядеть, нам нужно заполнить форму и изменить цвет обводки. Выберите замкнутую кривую, которую мы только что создали для автомобиля, нажмите на фишку цвета заливки и в поле цвета HEX введите FFCF23 . Нажмите на значок цвета обводки рядом с ним и введите 131000 .

Вот что у вас должно получиться после применения цвета заливки и цвета обводки. (Посмотреть большую версию)

Теперь создайте фигуру с помощью инструмента «Перо» и залейте ее черным цветом ( 000000 ). Поместите его за кузовом автомобиля (желтая форма). Точная форма нового объекта, который вы создадите, на самом деле не имеет значения, за исключением того, что его нижняя сторона должна быть прямой, как на изображении ниже. Поместите его за основной корпус (желтая фигура) через панель «Слои» или через меню «Упорядочить» → «Назад».

Черная фигура за кузовом автомобиля (Просмотреть увеличенную версию)

6. Создание колес с помощью Smart Copy

Далее нам нужно поставить колеса на место. В «Инструментах» выберите инструмент «Эллипс» и перетащите его по холсту, создав круг того же размера, что и колесо на эталонном изображении. Нажмите Сдвигайте при перетаскивании, чтобы сделать круг пропорциональным. Кроме того, удерживая Ctrl (Windows) или Cmd (Mac), вы можете создать идеальный круг от центра к краю .

Примечание: При необходимости скройте созданные слои, чтобы лучше видеть, или просто временно уменьшите их непрозрачность. Вы можете изменить непрозрачность, выбрав любую фигуру и нажав цифру на клавиатуре от 1 до 9, где 1 применит непрозрачность 10%, а 9 — 9.Значение непрозрачности 0%. Чтобы сбросить непрозрачность до 100%, нажмите 0 (ноль).

Выберите случайный цвет, контрастирующий с остальными. Мне нравится делать это изначально, чтобы я мог видеть хорошо контрастирующие и дифференцированные формы. Когда я доволен ими, я применяю окончательный цвет. Установите непрозрачность на 50% (нажмите 5 на клавиатуре), чтобы видеть сквозь рисунок.

Увеличьте форму колеса. Нажмите Z , чтобы выбрать инструмент Масштаб, и перетащите фигуру, удерживая Alt или дважды щелкните соответствующую ему миниатюру на панели «Слои». (Его не нужно предварительно выделять, хотя это поможет вам визуально найти его на панели «Слои».)

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

Выберите круг и нажмите Cmd + J (Mac) или Ctrl + J (Windows). Новый круг будет размещен поверх исходного. Выберите его. Эта команда находится в разделе «Правка» → «Дублировать» и также известна как «Умная копия» или «Умная копия».

Нажмите Shift + Cmd (Mac) или Shift + Ctrl (Windows) и перетащите, чтобы преобразовать его в меньший концентрический круг. Повторите три раза, каждый раз немного уменьшая размер, чтобы соответствовать вашему эталону. Умное дублирование фигуры нажатием Shift + Cmd (Mac) или Shift + Ctrl (Windows) приведет к относительному преобразованию формы. Это произойдет, начиная с вашей третьей смарт-дублированной формы.

Смарт-копия через Cmd + J или Ctrl + J . (Просмотреть увеличенную версию)

Итак, у нас есть концентрические окружности для колеса, и теперь нам нужно изменить цвета. Перейдите на панель «Образцы» и в ранее созданной палитре выберите цвета, которые хорошо сочетаются с желтым цветом, который мы применили к кузову автомобиля. Вы можете выбрать цвет и немного изменить его, чтобы адаптировать его к тому, что, по вашему мнению, лучше всего подходит. Нам нужно применить цвета заливки и обводки. Не забудьте задать обводке ту же ширину, что и остальная часть автомобиля (8 пикселей), за исключением самого внутреннего круга, где мы применим обводку шириной 11,5 пикселей. Также не забудьте вернуть 100% непрозрачность каждого концентрического круга.

Я выбрал эти цвета, от внешнего круга к внутреннему: 5D5100 , 918A00 , CFA204 , E5DEAB .

Теперь мы хотим выделить и сгруппировать их все вместе. Выделите их все и нажмите Cmd + G (Mac) или Ctrl + G (Windows). Назовите новую группу «Переднее колесо» на панели «Слои». Дублируйте эту группу и, удерживая Shift , выберите ее и перетащите вдоль холста, пока она не перекроется с задним колесом. Назовите слой соответственно.

Теперь машина должна выглядеть примерно так. (Посмотреть большую версию)

7. Разрыв кривых и обтравочные маски для рисования внутренних линий кузова автомобиля

Чтобы продолжить работу, либо скройте все слои, либо уменьшите непрозрачность, чтобы они не мешали. Нам нужно проследить передние и задние крылья. Мы должны сделать то же самое, что мы сделали для основного кузова. Выберите инструмент «Перо» и обведите его контуром.

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

Крылья добавлены в машину. (Просмотреть увеличенную версию)

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

Нажмите A на клавиатуре и щелкните любой из нижних узлов сегмента. На верхней контекстной панели инструментов нажмите «Действие» → «Разбить кривую». Теперь вы увидите, что выбранный узел превратился в квадратный узел с красным контуром. Нажмите на нее и потяните куда угодно. Как видите, сегмент теперь равен 9.0082 открыть . Нажмите клавишу Удалить или Backspace (Windows) или клавишу Удалить (Mac) и проделайте то же самое со всеми нижними узлами, оставив только крайний левый и крайний правый, а также очень внимательно следите за тем, чтобы слева от верхней части сегмента вообще не деформируется.

(Просмотреть большую версию)

Я использую этот метод по одной основной причине: дублирование существующей линии позволяет получить более последовательный вид и более гармоничные линии.

Теперь выберите только что открытую кривую и уменьшите ее таким образом, чтобы она соответствовала основной желтой форме, когда вы помещаете их друг на друга. На панели «Слои» перетащите эту кривую на слой с желтой фигурой, чтобы создать обтравочная маска . Причина создания обтравочной маски проста: нам нужен объект внутри другого объекта, чтобы они не перекрывались (т. е. оба объекта были видны), а один вкладывался в другой. Невыполнение этого требования приведет к тому, что некоторые части вложенного объекта станут видимыми, а это не то, что нам нужно; нам нужны идеальные, четкие линии.

Примечание: Обтравочные маски не следует путать с масками . Вы поймете, что вырезаете, а не маскируете, по миниатюре (при применении маски отображается значок кадрирования) и потому, что, когда вы собираетесь обрезать, появляется значок 9.0082 синяя полоса отображается горизонтально , чуть больше половины слоя. Маски, с другой стороны, отображают небольшую вертикальную синюю полоску рядом с миниатюрой.

Отсечение по сравнению с маскированием в Affinity Designer (Просмотреть увеличенную версию)Обтравочная маска после ее применения (Просмотреть увеличенную версию)

Теперь, когда мы применили нашу обтравочную маску, чтобы вставить вновь созданный сегмент в основную форму автомобиля, я сломал некоторые узлы и немного переместил некоторые другие, чтобы разместить их именно так, как я хочу. Я немного растянул ширину и отделил переднюю часть от остальной части сегмента, используя те же самые методы, которые мы уже видели. Затем я применил еще немного инструмента «Угол», чтобы смягчить все, что, по моему мнению, нужно было смягчить. Наконец, с помощью инструмента «Перо» я добавил несколько дополнительных узлов и сегментов, чтобы создать остальные внутренние линии, определяющие автомобиль.

Примечание: Чтобы выделить объект в маске, обтравочной маске или группе, когда объект не выбран непосредственно на панели «Слои», необходимо дважды щелкнуть, пока не будет выбран объект, или удерживать Ctrl (Windows) или Cmd (Mac) и нажмите.

Добавление дополнительных линий в сегмент (Просмотреть увеличенную версию)

После некоторых правок и доработок указанными методами наша машина выглядит так:

Как выглядит машина после небольшой подгонки сегментов и узлов (Просмотр увеличенной версии)

8. Рисование окон с использованием некоторых примитивных форм

На боковой панели инструментов выберите инструмент «Прямоугольник со скругленными углами». Перетащите на холст, чтобы создать фигуру. Размер формы должен вписываться в кузов автомобиля и выглядеть пропорционально. Независимо от того, как вы его создадите, вы сможете изменить его размер позже, так что не беспокойтесь.

Примечание: Когда вы создаете фигуру с обводкой и изменяете ее размер, обязательно установите флажок «Масштабировать с объектом» на панели «Обводка», если вы хотите, чтобы обводка масштабировалась пропорционально объекту . Я рекомендую вам визуально сравнить разницу между установленным и снятым флажком этой опции, когда вам нужно изменить размер объекта с помощью обводки.

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

После того, как вы разместили прямоугольник со скругленными углами на холсте, залейте его голубоватым цветом. Я использовал #93BBC1 . Затем выберите его с помощью инструмента Node (нажмите A ). Теперь вы увидите маленький оранжевый кружок в верхнем левом углу. Если вы потянете наружу или внутрь, вы увидите, как изменится угол в этом углу. На верхней контекстной панели инструментов вы можете снять флажок «Один радиус» и применить нужный угол к каждому углу прямоугольника по отдельности. Снимите флажок и потяните внутрь крошечный оранжевый кружок в верхнем левом углу. Если вы потяните, вы сможете округлить его до определенного процента, но вы также можете ввести желаемое значение в поле ввода для него или даже использовать ползунок, который идет в комплекте (он покажет, нажали ли вы на кнопку маленький шеврон). Применим значение 100%.

Посмотреть увеличенную версию Как примитивная форма прямоугольника со скругленными углами выглядит в режиме по умолчанию и как она меняется, когда мы снимаем флажок с одного радиуса. Теперь мы можем манипулировать углами по отдельности. (Просмотреть увеличенную версию)

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

Примечание: После того, как вы преобразовали примитивную форму в кривую, нет возможности вернуться назад, и не будет возможности манипулировать формой с помощью маленьких оранжевых упоров. Если вам нужна дополнительная настройка, вам нужно будет сделать это с помощью инструмента «Угол».

Выберите прямоугольник с помощью инструмента «Узел» ( A ) и на верхней контекстной панели инструментов нажмите кнопку «Преобразовать в кривые». Ограничивающая рамка исчезнет, ​​и будут показаны все узлы, образующие фигуру. Также обратите внимание, как на панели «Слои» имя объекта меняется с «Прямоугольник со скругленными углами» на «Кривая».

Теперь вам нужно манипулировать формой, чтобы создать объект, похожий на окно автомобиля. Посмотрите на эталонное изображение, чтобы лучше понять, как оно должно выглядеть. Кроме того, подправьте остальные нарисованные линии автомобиля, чтобы все хорошо сочеталось друг с другом. Не волнуйтесь, если формы не выглядят идеальными (пока). Правильно их подобрать — дело практики! Используя инструмент «Перо», помогите себе с Alt и Shift клавиш и посмотрите, как по-разному ведут себя узлы сегмента. После того, как вы создали переднее окно, продолжайте и создайте заднее, следуя тому же методу.

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

Поместите курсор на верхний белый круг ограничительной рамки и, когда он превратится в изогнутую стрелку с двумя концами, переместите его, чтобы придать прямоугольникам угол. Создайте обтравочную маску, перетащив ее на форму окна на панели «Слои», как мы видели ранее. Вы также можете сделать это, выполнив следующие альтернативные методы:

• В меню «Слой» → «Вставка» → «Вставить внутрь» выбранный объект окна.
• С помощью сочетания клавиш Ctrl + X (Windows) и Cmd + X (Mac) выберите объект окна → «Редактировать» → «Вставить внутри» ( Ctrl / Cmd + Альт + В ).

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

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

9. Добавление визуального интереса: полутоновый узор, тени и отражения

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

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

Теперь давайте создадим полутоновый узор .

Возьмите инструмент «Перо» ( P ) и проведите линию на холсте. На панели «Обводка» (вы также можете сделать это в разделе «Контекстная панель» инструмента «Перо» для обводки вверху) установите размер примерно 7 пикселей. Мы можем легко изменить это значение позже, если это необходимо. Выберите стиль линии «Штрих», а остальные настройки диалога должны быть следующими:

Настройки для первой части создания полутонового рисунка. (Просмотреть увеличенную версию)

Теперь продублируйте эту линию и поместите новую ниже с небольшим смещением влево.

Просмотреть увеличенную версию

Сгруппировать обе строки, продублировать эту группу с помощью Умной копии и создать что-то вроде этого:

Умная копия первых двух строк и создать весь шаблон. (Показать большую версию)

При перетаскивании выделенного в Affinity Designer будут выбраны только объекты, которые полностью находятся в области выделения. Если вы хотите выбрать все объекты, не перетаскивая их полностью, у вас есть следующие варианты:

• Mac: Удерживая клавишу ⌃ ( Ctrl ), вы сможете выбрать все объекты, соприкасающиеся с областью выделения, когда вы ее рисуете.
• Windows: нажмите и удерживайте левую кнопку мыши, начните перетаскивать выделение, а затем также нажмите и удерживайте правую кнопку мыши. Поскольку вы удерживаете обе кнопки, будут выбраны все объекты, которые касаются рамки выбора.
• Кроме того, вы можете сделать это поведение глобальным параметром. На Mac перейдите в «Affinity Designer» → «Настройки» → «Инструменты» и установите флажок «Выбирать объект, когда он пересекается с выделенной областью». В Windows перейдите в «Правка» → «Настройки» → «Инструменты» и установите флажок «Выбирать объект, когда он пересекается с выделенной областью».

Чтобы сделать иллюстрацию более интересной, мы немного изменим начало и конец некоторых линий. Для этого мы выбираем инструмент Node ( A ) и немного перемещаем узлы внутрь.

Теперь он должен выглядеть так:

Посмотреть увеличенную версию

Чтобы применить шаблон к нашему дизайну, убедитесь, что все сгруппировано, скопируйте и вставьте его в наш рисунок автомобиля, уменьшите его непрозрачность до 30%, а также уменьшите размер ( убедитесь, что на панели «Обводка» установлен флажок «Масштабировать с объектом»). Затем мы создадим обтравочную маску. Важно сохранять постоянство угла, цвета и размера этого узора на протяжении всей иллюстрации.

Нанесение полутоновой маски (Просмотреть увеличенную версию)

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

Для тени под окнами я нарисовал кривую в качестве заполнителя и применил цвет #CFA204 , чтобы он выглядел темнее.

10. Создание остальных элементов автомобиля

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

• Передний и задний свет
  Для переднего света переключитесь на инструмент «Сегмент» и нарисуйте фигуру. Затем нам нужно немного повернуть его и разместить где-то ниже основного кузова автомобиля. То же самое можно сделать для задней подсветки, но с помощью инструмента «Прямоугольник». Цвета #FFDA9D для переднего фонаря и #FF0031 для заднего фонаря.

Создание переднего фонаря (Просмотреть увеличенную версию)

• Доска для серфинга
  Чтобы создать доску для серфинга, мы будем использовать инструмент Эллипс и нарисуем длинный эллипс. Преобразуйте его в кривые и подтяните нижний сегмент, немного подправив ручки, чтобы придать ему идеальную форму.

Создание доски для серфинга (Просмотреть увеличенную версию)

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

Детали стойки для доски (Просмотреть увеличенную версию)

С помощью инструмента «Перо» добавьте руль направления. Его цвет #B2E3EF . А для обводки используйте ширину 6 пикселей и установите цвет #131000 .

• Запасное колесо
  Теперь давайте создадим запасное колесо! Переключитесь на инструмент «Прямоугольник со скругленными углами». Перетащите курсор по холсту, чтобы нарисовать фигуру. Раскрасьте его #34646C и сделайте обводку #131000 и размером 8 пикселей. Размер запасного колеса должен соответствовать пропорциям вашего автомобиля и иметь такой же диаметр, как и другие колеса, или, возможно, чуть меньше. Потяните оранжевые точки полностью внутрь и придайте им угол 45 градусов. Для стойки, которая держит колесо, создайте небольшой фрагмент с помощью инструмента «Прямоугольник» и придайте ему тот же угол в 45 градусов, покрасьте его в цвет 9.0518 #4A8F99 и сделайте обводку #131000 размером 4,5 пикселя. Таким же образом создайте последнюю часть, которая находится над автомобилем, с цветом #34646C и обводкой #131000 размером 4,5 пикселя.

Наконец, давайте создадим тень внутри колеса, чтобы добавить интереса. Для этого мы создадим обтравочную маску и вставим эллипс цвета #194147 без обводки.

Примечание: Мы можем захотеть создать такой же эффект тени для автомобильных колес. Используйте инструмент «Прямоугольник» и цвет #312A00 , создайте обтравочную маску и вставьте ее в форму колеса, поместив ее наполовину.

Три простые формы для рисования запасного колеса и его багажника (Просмотреть увеличенную версию)

• Бамперы
  Для бамперов мы применим логическую операцию «добавить» к двум основным формам, а затем обрежем тень, просто как мы сделали для колес.

Логические операции отображаются в разделе значков с надписью «Геометрия» (Mac) и «Операции» (Windows). (Да, названия меток не совпадают, но команда Affinity, скорее всего, обновит их в ближайшем будущем, и одна из меток станет меткой по умолчанию для обеих операционных систем. ) Если вы не видите их на верхней панели инструментов, перейдите на «Вид» → «Настроить панель инструментов» и перетащите их на панель инструментов.

Важно: Если вы хотите, чтобы операция была неразрушающей, удерживайте клавишу Alt, щелкнув значок «Добавить» (чтобы объединить две основные формы).

Логические операции: сложение, вычитание, пересечение, деление, объединение. (Просмотреть большую версию) Применение (деструктивной) операции добавления для создания одной фигуры из двух фигур. (Просмотреть увеличенную версию)

Примечание: Если вы попытаетесь вставить «теневой» объект внутрь бампера, это будет работать только , если бампер представляет собой один цельный объект (деструктивная операция). Итак, если вы использовали Alt + «Добавить», теперь это не сработает. Однако вы все равно можете обойти это, преобразовав составную форму (результат неразрушающей операции, представляющей собой группу из двух объектов) в одну кривую (один цельный векторный объект). Вам просто нужно нажать на составную фигуру, затем в меню перейти в «Слой» → «Преобразовать в кривые» (или использовать комбинацию клавиш Ctrl + Введите ).

• Заднее окно
  Нам все еще не хватает заднего окна, которое мы создадим с помощью инструмента Перо, и украшения для автомобиля. Для двух цветных полос нам понадобится инструмент «Квадрат», а затем замаскируйте эти два прямоугольника в основной корпус. Размер 30 × 380 пикселей, цвета #0AC8CE и #FF6500 . Обрежьте их, убедившись, что вы поместили их на правильный слой, так что темные линии, которые мы нарисовали ранее, равны 9.0082 над ними .

• Номер 56
  Для украшения числа «56» используйте инструмент Художественный текст («T») и введите «56». Выберите красивый шрифт, соответствующий стилю иллюстрации, или попробуйте тот, который использовал я.

Цвет текстового объекта #FFF3AD .

(Я добавил дополнительный квадрат за задним крылом, который будет выглядеть как конец выхлопной трубы. Цвет #000000 .)

• Цветные полосы
  Теперь, когда мы это сделали, проверьте цветные полосы и окно, с которым они перекрываются. Как вы можете видеть (а также потому, что мы добавили немного прозрачности оконному стеклу), оранжевая полоса видна сквозь него . Давайте снова воспользуемся булевой силой, чтобы исправить это.

Добавлены бамперы и выхлопная труба. Обратите внимание на перекрывающееся окно и оранжевую полосу! (Просмотреть увеличенную версию)

Дублировать объект окна. Выберите объект окна (тот, который вы только что продублировали) и оранжевую полосу на панели «Слои». Примените операцию «вычитания».

Этап 1, перед операцией вычитания. (Посмотреть большую версию)Этап 2, после применения операции вычитания. (Просмотреть увеличенную версию)

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

Полоса и окно с применением операции вычитания. (Просмотреть увеличенную версию)

• Дым
  Чтобы создать дым из выхлопа, нарисуйте круг с белой обводкой, размером 5,5 пикселей и без заливки. Преобразуйте его в кривые и разорвите одну из его точек. От нижнего узла проведите прямую линию с помощью инструмента «Перо».

Продублируйте этот «сломанный» круг, измените его размер на круги меньшего размера, переверните и разместите их так, чтобы они выглядели так:

Создание выхлопного дыма (Просмотреть увеличенную версию)

Примечание: Теперь, когда машина готова , сгруппируйте все его слои вместе. Если вы это сделаете, вам будет намного легче продолжать работать!

11. Создание элементов земли и фона.

• Земля
  Давайте проследим простую линию земли и добавим два бита, прерывающих ее, чтобы создать визуальный интерес и предложить немного движения. Мы также хотим добавить дополнительную часть, чтобы создать землю. Для этого мы будем использовать инструмент «Прямоугольник» и нарисуем прямоугольник с цветом градиента 9.0518 #008799 для левого упора и #81BEC7 для правого упора. Увеличьте непрозрачность до 30%.

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

• Облака
  Для облаков выберите инструмент «Облака» из списка (примитивных) векторных фигур. Нарисуйте облако, удерживая Shift, чтобы сохранить пропорции. Сделайте его белым. Преобразуйте его в кривые и с помощью инструмента Node ( A ) выберите нижние узлы и удалите их. Выделите нижний левый и нижний правый узлы (после удаления всех остальных), а затем на контекстной панели инструментов выберите «Преобразовать в Sharp» в разделе «Преобразование». Это сделает ваш нижний сегмент прямым. Примените прозрачность с помощью инструмента «Прозрачность» ( Y ) и продублируйте это облако. Поместите облака на свой рисунок, раздвиньте их по своему желанию и разного размера.

Мои облака состоят из 12 пузырей и имеют внутренний радиус 82%. Вы можете сделать то же самое или изменить эти значения по своему вкусу.

Создание облаков с помощью инструмента «Облако» и инструмента «Прозрачность» (Просмотреть увеличенную версию)

• Пальмы
  Чтобы создать пальмы, используйте инструмент «Полумесяц» из списка примитивов слева. Дайте ему градиентный цвет с левой точкой #F05942 и правый упор #D15846 .

Перетащите, чтобы нарисовать форму полумесяца. Переместите его центр вращения в нижнюю часть ограничительной рамки и придайте ему угол -60 градусов.

Центр вращения можно сделать видимым в разделе контекстной панели инструментов для инструмента «Переместить (и узел)». Он выглядит как маленький значок перекрестия. При нажатии на нее появится перекрестие для перемещения центра вращения объекта. Продублируйте его либо через Cmd + C и Cmd + V (Mac) или Ctrl + C и Ctrl + V (Windows), или щелкнув и затем Alt + перетащив объект, перетащив его угол нового полумесяца до -96 градусов. Сделайте его немного меньше. Скопируйте две фигуры и отразите их по горизонтали.

Я также создал и дополнительный полумесяц.

Создание пальмовых листьев (Просмотреть увеличенную версию)

Чтобы создать углубления на листьях, преобразуйте объект в кривые, добавьте узел с помощью инструмента «Узел» и потяните внутрь. Чтобы сделать вихрь резким, используйте «Конвертировать» → «Резкий».

Создание углублений для листьев (Просмотреть большую версию)

Создайте ствол пальмы с помощью инструмента «Перо», сгруппируйте все фигуры вместе и примените логическое значение «добавить». Таким образом, все фигуры превратятся в одну. Примените к нему непрозрачность 60%.

Пальма после применения логической операции «Добавить» (Просмотр увеличенной версии)

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

Последнее, что нам нужно сделать, это солнце.

• Солнце
  Для этого просто нарисуйте эллипс и примените к нему цвет #FFFFBA . Примените прозрачность с помощью инструмента «Прозрачность» ( Y ), где нижняя часть прозрачна, а верхняя становится непрозрачной.

Прозрачность, примененная к форме солнца (Просмотреть увеличенную версию)

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

Применение операции вычитания (Просмотреть большую версию)

Поместите свое солнце в сцену, и все готово!

12. Примечание о порядке наложения (и именовании слоев)

Во время работы и по мере роста количества объектов (слоев), что также будет усложнять вашу иллюстрацию, помните о порядке наложения закажите ваших слоев. Чем раньше вы начнете называть слои и , располагая их в правильном порядке, тем лучше. Кроме того, заблокируйте те слои, с которыми вы закончили (особенно для таких вещей, как фон), чтобы они не мешали вам во время работы.

На этой иллюстрации порядок элементов снизу вверх следующий:

• фон,
• земля,
• солнце,
• облака,
• пальмы,
• автомобиль.

Заключение

Надеюсь, вы смогли выполнить все шаги без серьезных проблем и теперь лучше понимаете некоторые основные инструменты и действия Affinity Designer. (Конечно, если у вас есть какие-то вопросы или вам нужна помощь, оставьте комментарий ниже!)

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

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

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

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

Завершенная иллюстрация Volkswagen Beetle. (Посмотреть большую версию)

Векторный рисунок в App Store

Описание

Amadine — интуитивно понятное приложение для векторного рисования и иллюстрации. Благодаря чистому и простому пользовательскому интерфейсу он идеально подходит для начинающих, но достаточно функционален для профессионалов. Используйте его для создания иллюстраций, логотипов, значков, дизайна пользовательского интерфейса, искусства и многого другого. Amadine поддерживает Apple Pencil и работает на iPad и iPhone.
Также доступна версия для Mac.

Примечание. Покупки в приложении относятся к приложению, установленному на вашем iPhone и iPad.
Платные функции доступны пожизненно и по подписке.

Рабочий процесс
• Храните несколько иллюстраций в одном документе.
• Создать несколько слоев и подслоев.
• Различные режимы наложения слоев.
• Параметры просмотра: предварительный просмотр в пикселях, контур, направляющие и сетка.

Advanced Drawing
• Используйте более 30 векторных инструментов для выбора, рисования, редактирования, нарезки и ввода текста.
• Добавьте несколько штрихов и заливок, создайте уникальные профили штрихов с помощью инструмента «Ширина».
• Выполнять операции объединения, вычитания, пересечения и исключения над выбранными объектами.
• Напишите текст вдоль контура или внутри фигуры.
• Создавайте векторные изображения с помощью планшетов, чувствительных к давлению.
• Рисуйте иллюстрации с помощью гибких и естественных кистей.

Редактирование контура
• Создание контуров с помощью инструментов «Контур» и «Рисование».
• Добавляйте, удаляйте и размещайте опорные точки.
• Преобразование точек в угловые точки и точки сглаживания.
• Редактируйте контуры и формы, которые они образуют, с помощью инструментов «Нож», «Ножницы» и «Ластик».

Общие
• Экспорт всего документа, листа или выборки в форматах JPEG, PNG, PDF и SVG.
• Поддержка Apple Pencil и Apple Pencil 2

Условия использования (EULA):
https://amadine.com/privacy-policy/terms-conditions

000Z» aria-label=»August 19, 2022″> 19 августа 2022 г.

Версия 1.4.1

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

Новые функции:
— Добавлена ​​функция «Перетекающий текст», благодаря которой текст теперь может перетекать из одного текстового столбца в другой. Очень полезная функция для разработки текстовых макетов, таких как листовки и брошюры.
— В инструмент Fusion добавлен режим Paint, который помогает пользователям выбирать стиль окраски для новых фигур.
— Улучшен алгоритм создания формы в инструменте Fusion.
— Добавлена ​​возможность менять цвета между Обводкой и Заливкой на панели Оформление.
— Для пользователей, которые рисуют в основном с помощью Apple Pencil, Amadine представила параметр «Отключить сенсорное рисование» в настройках программы. При активации все общее редактирование выполняется с помощью карандаша, только прокрутка, масштабирование, вращение, а некоторые модификации выполняются с помощью жестов пальца.
-Расширены варианты лицензирования приложения. В дополнение к пожизненной лицензии пользователи могут выбрать ежемесячную или годовую подписку.
— Пересмотрены ограничения бесплатной версии. Убрано ограничение на сохранение файла и введено ограничение на экспорт в графические форматы файлов и печать.

Исправления:
— Улучшен инструмент «Рисование» при рисовании контура, который уже имеет профиль «Обводка».
— Исправлена ​​ненужная автопрокрутка на максимальном и минимальном значениях масштабирования.
— Множество других улучшений и исправлений

Мы активно развиваем программу. Пожалуйста, присылайте нам свои комментарии и предложения по адресу [email protected]

Условия использования: https://amadine.com/privacy-policy/terms-conditions

Рейтинги и обзоры

46 оценок

Обнаружены некоторые проблемы с показом

Хотя это приложение очень многообещающее, в нем были обнаружены некоторые критические ошибки и упущения.

1. После выбора стиля пера от руки он не должен возвращаться к настройкам по умолчанию каждый раз при запуске нового эскиза в том же документе (по умолчанию цвета не выбраны). А когда для редактирования формы выбрана область заливки от руки, выбранные цвета заливки не должны исчезать при каждом перемещении линии. Это крайне отягчает.

2. Пожалуйста, добавьте возможность зеркалировать выбранные объекты. Это полезная функция для графического дизайна и создания шаблонов.

3. Рассмотрите возможность добавления способа дублирования действия. Например, в Illustrator, если объект выбран и перетаскивается на холсте с нажатой клавишей Option, он дублирует объект, а затем простое нажатие Command-D повторит это действие. Создает шаг и повторяет его таким образом.

Даже несмотря на эти проблемы, это приложение показывает замечательные перспективы.

Спасибо.

Здравствуйте, Neumuzik,

Спасибо за подробный отзыв.

1. Не могли бы вы отправить электронное письмо по адресу [email protected] и прикрепить скриншот или короткое видео описанного процесса и добавить более подробную информацию о необходимых изменениях. Это действительно помогло бы сделать приложение лучше. Нынешний способ был разработан, чтобы быть простым в использовании. Если вы сочтете это раздражающим, команда обсудит, что можно сделать, чтобы изменить этот плохой пользовательский опыт.

2. Отражение выделенных объектов осуществляется через панель Transform. Вот подробный раздел справки о его возможностях:
https://amadine.com/support/help-ios/change-objects-shape-the-transform-panel

То же действие можно выполнить и в панели геометрии. Вы можете отражать объекты с помощью кнопок вертикального и горизонтального отражения.

3. Дублировать действие можно через панель Transform, выделив объект, переместив его через панель трансформации и поставив галочку «копировать объекты», каждый тап Применить будет создавать копию объекта со сдвигом.

Если вам нужна дополнительная информация о том, как использовать приложение и как найти определенные функции, мы будем рады ответить на все вопросы по электронной почте [email protected]

Служба поддержки программного обеспечения BeLight

Лучше, чем Adobe Illustrator для iPad

В то время, когда Illustrator был доступен для iPad, в нем отсутствовали многие инструменты настольной версии. И это все еще работает на данный момент, что делает Amadine лучшей программой. Amadine, более новое программное обеспечение, содержит все те же инструменты, что и настольная версия, в то время как отраслевой стандарт Adobe отстает. Это шок! Что есть в Amadine, чего нет в Illustrator, так это инструмент ширины, инструмент преобразования, инструмент перспективы, инструмент ножа, инструмент ножниц, возможность добавлять несколько образов для каждого объекта и другие параметры слоя. Какими бы базовыми и важными ни были эти инструменты для векторной программы, Illustrator включает менее важные функции, такие как различные предустановки кистей. Amadine определенно стоит лучшего выбора из-за гораздо более щедрой цены и большего контроля над векторной графикой. Illustrator еще не готов к коммерческому выпуску. Амадин есть.

Редактировать:
Кроме того, фантастическое обновление инструмента рисования, продолжающееся с конечных точек, и мне нравится сюрприз инструмента Fusion Tool. Эквивалент конструктора форм — это то, что понравится многим пользователям!

Большое спасибо за такой положительный и подробный отзыв! Amadine относительно новый продукт, но мы очень стараемся сделать его лучшим в своем роде.

Продуманно созданный

У меня уже установлено два векторных приложения (каждое со своими преимуществами, недостатками и ощущениями), установленных на моем iPad, поэтому я не искал еще одно. Но я случайно увидел в App Store внимание разработчиков к Amadine и загрузил бесплатную пробную версию, которая не имеет ограничений по времени (просто нельзя сохранить в галерее). Познакомившись с инструментами и меню, я заметил, как легко, просто и, самое главное, приятно создавать свои работы. При этом подписки нет. 10 баксов за такое хорошее приложение? Конечно, у меня будут другие приложения, но я влюбился в Amadine.
Если вы любитель векторов, я настоятельно рекомендую взять Amadine на тест-драйв.

Спасибо за отзыв и рекомендацию!

Разработчик, Belight Software, ltd, указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см. политику конфиденциальности разработчика.

Данные не собираются

Разработчик не собирает никаких данных из этого приложения.

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

Информация

Продавец

Белайт Софтвер, ООО

Размер

58,8 МБ

Категория

Графика и дизайн

Возрастной рейтинг

4+

Авторское право

© 2022 Belight Software, Ltd.

Цена

Бесплатно

• Сайт разработчика
• Тех. поддержка
• Политика конфиденциальности

Опоры

Еще от этого разработчика

Вам также может понравиться

26 новых руководств по векторному иллюстратору для улучшения ваших навыков рисования | Учебники

9,6 К Акции

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

Вас также могут заинтересовать следующие новые статьи.

• PSD шаблоны современных визитных карточек: 27 Новый дизайн
• Как овладеть искусством визуального веб-дизайна
• Новые потрясающие экшены Photoshop для фотографов и дизайнеров
• 26 новых руководств по Adobe Photoshop для изучения основ Photoshop

Неограниченное количество загрузок

Более 1 500 000+ шрифтов, мокапов, бесплатных и дизайнерских материалов

Скачать сейчас

 Учебники Illustrator для создания навыков рисования

 Учебники могут оказать большую помощь, пошаговое представление того, что облегчает изучение и понимание. В этой коллекции мы собрали свежие учебные пособия по Illustrator CS6 и Illustrator CC, которые помогут создавать векторную графику в Adobe Illustrator. Я надеюсь! эти учебные пособия для иллюстраторов  могут улучшить ваши навыки иллюстрирования и улучшить качество ваших работ.

Как создать маску крика в Adobe Illustrator

«Крик» — это классическая серия фильмов-слэшеров, и в этом уроке вы научитесь рисовать знаменитую страшную маску таинственного убийцы, известного как Призрачное лицо. Практикуйте свои навыки рисования и научитесь играть с различными формами и штрихами, чтобы придать маске объем и создавать тени только там, где это необходимо. Давайте повеселимся с этим!

Ссылка на учебник

Как создать векторную карту в плоском стиле в Adobe Illustrator

В этом учебном пособии вы узнаете, как создать творческую векторную иллюстрацию ландшафта с деревьями, дорогами, горами и городами, используя ряд инструментов в Adobe Illustrator. Работа в стиле плоского дизайна включает в себя упрощение объекта до его самой простой формы, поэтому различные инструменты построения векторных фигур Illustrator идеально подходят для создания ваших иллюстраций.

Ссылка на учебник

Как создать персонажа фитнес-девушки в Adobe Illustrator

В этом новом уроке вы узнаете, как создать персонажа фитнес-девушки в Adobe Illustrator. Улучшите свои навыки рисования или проверьте их, следуя этому руководству, и узнайте, как нарисовать персонажа фитнес-девушки в Adobe Illustrator. Некоторым людям нравится Pen Tool, некоторые ненавидят его, а некоторые не понимают его, но ключом к успеху является практика.

Ссылка на учебник

Создание векторной иллюстрации дома с привидениями. Урок

В сегодняшнем уроке мы создадим векторный постер Дом с привидениями на Хэллоуин в стиле плоского дизайна. Этот стиль характеризуется минимализмом, отсутствием градиентных заливок, текстур и использованием элементарных форм для построения всех объектов.

Ссылка на учебник

Как создать жуткую куклу вуду в Adobe Illustrator

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

Ссылка на учебник

Как создавать текстурные кисти Illustrator в Illustrator

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

Ссылка на учебник

Как создать векторную цветочную типографику в Adobe Illustrator

В этом учебном пособии вы научитесь создавать элегантную цветочную типографику в Adobe Illustrator! Мы будем работать с текстом, создавать собственные векторные кисти и использовать различные инструменты рисования Adobe Illustrator для создания цветов, листьев и цветочных элементов. Мы будем сравнивать разные инструменты, чтобы вы могли увидеть, как они работают, и проследить за вдохновляющим рабочим процессом, порисовав от руки.

Ссылка на учебник

Создание дизайна линейной диаграммы в Adobe Illustrator

В этом учебном пособии вы узнаете, как создать простой дизайн линейной диаграммы в Adobe Illustrator. Узнайте, как настроить простую сетку и как создать гладкий фон. Двигаясь дальше, вы создадите основную форму и научитесь добавлять легкие тени и блики с помощью панели «Внешний вид» и ряда эффектов. Используя эффект Transform и основные атрибуты обводки, вы создадите тонкую сетку. Вы узнаете, как создавать и редактировать простой фрагмент текста и как легко умножать или поворачивать фигуры. Наконец, вы узнаете, как облегчить себе работу с помощью графических стилей.

Ссылка на учебник

Как создать модный векторный мокап плоского стола

Ссылка на учебник

Как создать уютный плоский дизайн интерьера в Adobe Illustrator

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

Ссылка на учебник

Как создать векторный эффект чернил в Adobe Illustrator

В этом уроке я покажу вам, как использовать переходы для создания векторного эффекта чернил в Adobe Illustrator. Мы настроим переходы, а затем добавим несколько дополнительных элементов, чтобы создать приятный влажный, размытый чернильный фон.

Ссылка на учебник

Как создать эффект высокой печати в Illustrator

Высокая печать становится все более популярной за последние 5 лет, но забавный факт: высокая печать никогда не предназначалась для окончательного эффекта печати. Высокая печать сначала начиналась как «пробная» печать, прежде чем были разработаны металлические пластины, которые создают более сильные, глубокие (и более дорогие) оттиски. В учебном пособии на этой неделе настройте параметры, насколько сильное впечатление вы хотите, поскольку мы создаем эффект высокой печати полностью в Illustrator.

Ссылка на учебник

Как создать афишу для выдуманной группы

Группа, для которой я создаю афишу, называется «The KomiKazi». Это альтернативная рок-группа, которая поет о политике и правительстве. В частности, в текстах их песен обычно говорится как о коррупции, так и о надежде, присутствующей в государственной системе.

Ссылка на учебник

Как создать трио суккулентов в Adobe Illustrator

В этом уроке мы нарисуем несколько этих замечательных созданий природы. В этом уроке, помимо крутых названий суккулентов, вы также узнаете, как использовать основные формы для их создания.

Ссылка на учебник

Нарисованный от руки вектор узора на Хэллоуин

Если вам все еще нужны жуткие дизайны для Хэллоуина, мы выпускаем этот потрясающий учебник по векторному узору на Хэллоуин! С этим вы научитесь рисовать классические элементы Хэллоуина и превращать их в веселый и веселый узор.

Ссылка на учебник

Как создать простой узор осеннего дерева в Adobe Illustrator

В этом уроке я покажу вам, как создать простой узор осеннего дерева в Adobe Illustrator. Он состоит из двух фигур: круга и прямоугольника. Это бесплатный Pen Tool, и я буду объяснять все, от размеров до цветов, поэтому он идеально подходит для начинающих.

Ссылка на учебник

Как нарисовать дикую ворону в темноте

Ссылка на учебник

Создание открытки с надписью на день рождения в Illustrator

Ссылка на учебник

Как нарисовать солнечную пчелу в Adobe Illustrator

создавать причудливую иллюстрацию пчелы с тонкими линиями. Мы научимся использовать простые геометрические фигуры, наносить штрихи и изменять наши объекты с помощью функции «Динамические углы» и инструмента «Прямое выделение». Затем мы закончим, добавив простой солнечный фон с гребнями.

Ссылка на учебник

Как создать иллюстрацию висячей обезьяны в Adobe Illustrator

В этом уроке вы узнаете, как создать обезьяну, висящую на лиане. Как обычно, мы будем использовать основные формы, эффекты деформации и панель Pathfinder. Мы также переместим некоторые опорные точки и научимся использовать инструмент «Отрезок линии» и инструмент «Дуга».

Ссылка на учебник

Узнайте, как создать постер к Хэллоуину в Adobe Illustrator

в этом учебном пособии, чтобы создать постер к Хэллоуину в Adobe Illustrator. Мы будем использовать Pen Tool, Gradient Tool, Blending Modes, Clipping Mask и некоторые базовые эффекты.

Ссылка на учебник

Создайте милую иллюстрацию оленя в Adobe Illustrator

В этом уроке мы проведем симпатичного персонажа от начального эскиза до готового продукта с помощью Adobe Illustrator. Мы сосредоточимся на том, как добиться эффективного рабочего процесса и как творчески использовать инструмент «Ластик», а также на создании уникальных кистей и придании готовому дизайну эффекта ручной работы.

Ссылка на учебник

Модный дизайн сложенного логотипа в Illustrator

В этом уроке по Adobe Illustrator я покажу вам, как создать дизайн на основе буквы М, но этот сложенный стиль дает вам множество вариантов для создания различных инициалов или абстрактного значка в виде ленты. Мы создадим полноцветный основной логотип, а затем добавим плоские и монохромные версии, которые будут использоваться в определенных сценариях дизайна.

Ссылка на учебник

Как создать текстовый эффект барабана в Adobe Illustrator

В следующих шагах вы узнаете, как создать текстовый эффект барабана в Adobe Illustrator. Во-первых, вы узнаете, как создавать основные фигуры, которые будут составлять ваш текст, используя несколько простых прямоугольников и некоторые основные методы построения векторных фигур. Далее вы узнаете, как добавить цвет, тени и блики, используя набор градиентов, палитру «Внешний вид» и несколько эффектов.

Ссылка на учебник

Как создать иллюстрацию персонажа для самоотверженной игры в Illustrator

Ссылка на учебник

Низкоскоростные учебники Векторные портреты — Учебники Illustrator

Создание векторных портретов очень просто для уже опытных пользователей. но для начинающих это так сложно сделать, но если у вас есть серьезные намерения и вы хотите стать лучше, конечно, это будет идеально. здесь я дам вам несколько простых способов создания векторных портретов, легко и медленно. Пожалуйста, посмотрите видео ниже. получите цвет кожи ниже. Если вы хотите подать файл Ai / eps, пожалуйста, перейдите также ниже.

Ссылка на учебник

8 простых шагов для преобразования ручных рисунков в векторы

(обновлено 2 июля 2020 г.)

В последние годы технологии проектирования развивались как на дрожжах. Теперь все на расстоянии одного щелчка кнопки мыши. Однако это никогда не отнимет ценности традиционного искусства.

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

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

Но что же такого особенного в векторах?

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

Чтобы его выучить, требуется довольно много времени. Вот почему мы познакомим вас с 8 суперпростыми штампами для преобразования рукописного рисунка в векторную графику.

Если вы немного сомневаетесь в процессе, не бойтесь — DesignCrowd поддержит вас.

Шаг 1. Нарисуйте свой дизайн

Создайте рисунок или найдите в своем альбоме эскизов работу, которую вы хотите преобразовать в векторную графику. Вы можете потренироваться превращать рисунок в вектор даже на самых простых иллюстрациях. В этом примере мы будем использовать подробный рисунок, сделанный дизайнером Дивья Абэ во время этого пошагового руководства.

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

Совет: Подумайте и о цвете.

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

Шаг 2. Оцифруйте свой дизайн

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

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

Шаг 3. Приведите свой рисунок в порядок

Теперь пришло время поближе познакомиться с вашим рисунком. Третий шаг — убрать ненужные детали в Photoshop или другой программе для графического дизайна, которую вы предпочитаете. Попрощайтесь с пометками карандашного наброска, которые вы забыли стереть.

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

Шаг 4. Настройте и сохраните дизайн

Более четкое изображение означает более четкий след. В изображении из примера больше оттенков серого, чем черного, но существует множество способов изменить изображение на черно-белое. Вы можете попробовать поиграть с инструментами корректирующего слоя, такими как уровни (cmd L на Mac или ctrl L в Windows) и кривые (cmd M или ctrl M).

Вам нужны более светлые или резкие тона? Сейчас самое время решить, как вы хотите исправить цвет дизайна. Когда вы будете уверены, что сделали все правильно, сохраните изображение в формате jpeg.

Шаг 5. Проследите свой дизайн

Откройте Illustrator CS6 и создайте пустой документ. Перейдите в меню «Файл» в верхнем левом углу и выберите «Поместить», чтобы вставить изображение в формате JPEG в файл.

Выберите изображение и перейдите в «Окно»> «Трассировка изображения». Теперь должен появиться инструмент Image Trace.

Шаг 6. Поэкспериментируйте с предустановками

Убедившись, что функция предварительного просмотра выбрана, щелкните меню предустановок в Image Trace. Просто прокручивайте варианты, пока не найдете тот, который вам больше нравится.

Если трассировка не улавливает ваш рисунок мгновенно, вы можете поиграть с предустановкой и порогом, пока не найдете работающее решение. Это нормально — взять под контроль свой шедевр.

Шаг 7. Преобразуйте трассировку в контуры

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

Вам не нужно часами пытаться соединить точки на иллюстрации.

Шаг 8. Поэкспериментируйте со своим новым блестящим вектором

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

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

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

Ищете другой способ?

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

No related posts.