Опубликовано в Введение | 0 комментариев

Отрисовка. Часть 2. Сложные иллюстрации

Все уроки цикла:

тема «Отрисовка. Часть 1. Простые иллюстрации»
Часть 2. Сложные иллюстрации
тема «Отрисовка. Часть 3. Редактируемые стили для текста»

Урок продолжает цикл статей по отрисовке. В нем я рассмотрю некоторые примеры сложных иллюстраций.

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

Давайте сразу обратимся к примеру. Заодно я затрону еще одну тему.

Отрисовка. Часть 2. Сложные иллюстрации

Что особенного в этом изображении? Оно симметрично. Да. А что еще?.. Оно состоит из линий. Это называется лайн-арт. Но… Помните вопрос определения должна ли быть здесь заливка или нет? Так вот, должна ли быть здесь заливка? Ответ: я не знаю. Да, странный. Но по подобным изображениям обязательно нужно уточнять детали у заказчика, узнавая как оно будет использоваться в векторном виде. От этого будет зависеть количество работы. Ведь нарисовать с заливкой проще, чем без нее. И здесь нужен был вариант с заливкой.

Тогда всё просто: рисуем только какую-то одну половину и потом ее отражаем. Можно делать отражение сразу в процессе рисования.

Как же отрисовывать лайн-арт? Нужно рисовать по центру линий. Примерно так:

Отрисовка. Часть 2. Сложные иллюстрации

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

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

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

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

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

Но продолжим разговор и перейдем к следующему примеру, а именно мистеру Гомеру Симпсону.

Отрисовка. Часть 2. Сложные иллюстрации

Вот так выглядит иллюстрация в режиме просмотра сетки:

Отрисовка. Часть 2. Сложные иллюстрации

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

Отрисовка. Часть 2. Сложные иллюстрации

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

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

Отрисовка. Часть 2. Сложные иллюстрации

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

Теперь мне хотелось бы перейти к этому примеру:

Отрисовка. Часть 2. Сложные иллюстрации

Здесь стояла задача сделать похожее на логотип ниже, но с пятью «хвостами». Результат вы можете видеть выше.

Отрисовка. Часть 2. Сложные иллюстрации

Как всегда сначала анализ: здесь определенно должна быть прозрачность, чтобы фон можно было менять на практически любой другой; элементы повторяются, значит достаточно нарисовать один и потом сделать его копии. Но есть и вопросы: если это прозрачность, то как реализовать внешнюю обводку элемента? Ведь просто взять цвет пипеткой нельзя — при смене цвета фона он тогда останется прежним. Как нарисовать, собственно, «хвосты комет»? Особенно интересуют две линии, проходящие но ним. Для этого есть два решения. О них расскажу ниже. Как вообще реализовать всё? Ведь простое срисовывание не годится. Элементы у нас будет явно меньшей длины, да и точность пострадает. Здесь от вас уже требуется более глубокое продумывание действий и знание возможностей программы.

Посмотрите на «хвост» на оригинальном изображении. Он явно отсечен по кругу, который шире «ядра кометы». Значит можно нарисовать это «ядро» и увеличить его на подходящее расстояние, а потом вырезать при помощи панели Pathfinder или инструмента Shape Builder Tool. То есть, еще раз, основные действия вы должны продумать до того, как начнете работать.

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

Отрисовка. Часть 2. Сложные иллюстрации

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

Располагаем указанные в начале предыдущего абзаца фигуры следующим образом:

Отрисовка. Часть 2. Сложные иллюстрации

Почему так? Рисовать элемент от центра намного проще и удобнее. Повернуть всё потом не составит никакого труда. А если сейчас нарисовать это «ядро» где полагается, то это наоборот прибавит работы.

Добавляем меньший круг по нижней границе «ядра»:

Отрисовка. Часть 2. Сложные иллюстрации

Вырежем меньший круг из большего при помощи команды «Minus Front» с панели Pathfinder. Полученную фигуру можно залить каким-нибудь цветом. Также добавим направляющую по горизонтальному центру «ядра» – лишней она явно не будет и возможно пригодится в будущем.

Отрисовка. Часть 2. Сложные иллюстрации

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

Увеличить круг так точно можно при помощи панели Transform, эффекта Offset Path или просто нарисовав новый с заданными размерами.

Отрисовка. Часть 2. Сложные иллюстрации

Этот круг нужно разделить на две части по вертикали. Зачем? Если мы вычтем его целый, то пропадет нужная нам часть слева от «ядра». Смотрите:

Отрисовка. Часть 2. Сложные иллюстрации

Потому и нужно разделить, чтобы потом вычитать только правую часть. Разделить можно, нарисовав любым удобным вам инструментом (например, Line Segment Tool (\)) вертикальную линию по центру большего круга и выполнив команду «Divide» с панели Pathfinder.

Отрисовка. Часть 2. Сложные иллюстрации

А теперь пришло время разделить основной круг на пять частей. 360/5=72. Именно на столько градусов нужно повернуть разрезанный круг. Да-да, вы не ослышались. Но, конечно, не просто так повернуть. Здесь как нельзя кстати приходится та техника поворота, показанная мною в отрисовке колеса. То есть, я рисую вспомогательный прямоугольник по размерам увеличенного круга к центральному пересечению направляющих:

Отрисовка. Часть 2. Сложные иллюстрации

… удаляю левую половинку, группирую оставшуюся правую с этим прямоугольником и поворачиваю их при помощи эффекта Transform со следующими настройками (обратите внимание на выбранную точку трансформации):

Отрисовка. Часть 2. Сложные иллюстрации

Получается так:

Отрисовка. Часть 2. Сложные иллюстрации

Но можно было бы воспользоваться для поворота и инструментом Rotate Tool (R ). Центр всей иллюстрации у нас обозначен пересекающимися направляющими. Ставим там точку трансформации инструмента, применяем команду поворота 1 раз, копия фигуру (нажимаем в диалоговом окне кнопку «Copy» вместо OK) и далее просто нажимаем сочетание Ctrl+D, ответственное за повторение последнего действия из разряда трансформации. Именно таким образом я поступал с уже готовым элементом (там я еще раз повторю описание). Выбирайте вариант, который более нравится вам.

Итак, далее я применяю команду Object> Expand Appearance, чтобы избавиться от эффекта. В зависимости от версии программы вспомогательные прямоугольники как могут пропасть, так и остаться. Если они остались, то выделите один в панели слоев, затем выполните команду Select> Same> Appearance и удалите их. Если пропали, то, как видите, они и не нужны. Но группы образуются в любом случае. Избавьтесь от них (в моем случае нужно два раза нажать комбинацию Shift+Ctrl+G). Не снимая выделения со всех полукругов, добавьте к ним основную фигуру (в моем случае черного цвета) и вычтите при помощи команды «Minus Front» с панели Pathfinder.

Отрисовка. Часть 2. Сложные иллюстрации

Для создания правильной обводки нам нужно объединить «ядро» с «хвостом». Но так как хвост будет с прозрачностью, то понадобится копия «ядра». Это я и делаю: дубликат «ядра» объединяю с «хвостом».

Отрисовка. Часть 2. Сложные иллюстрации

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

Отрисовка. Часть 2. Сложные иллюстрации

Отрисовка. Часть 2. Сложные иллюстрации

Отрисовка. Часть 2. Сложные иллюстрации

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

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

Отрисовка. Часть 2. Сложные иллюстрации

Отрисовка. Часть 2. Сложные иллюстрации

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

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

Но как эти линии вообще нарисовать? Всё довольно просто. Толщина всего элемента у нас определяется по «ядру». В моем случае это 86 пикселей. Нужно разделить это число на три: 86/3=28,6. Конечно, лучше использовать величину делимую без остатка. Но теперь уж какая есть. Хотя визуальный образ в самом начале явно дает нам это понять (хороший пример некоторой недоработки при анализе).

Что дальше? Вновь нарисуем внешний круг и при помощи команды Object> Path> Offset Path создадим уменьшенные круги. Но я сделал чуть иначе. И вот как. Нарисовал внешний круг. Применил к нему команду Offset Path со смещением -27 пикселей (да, немного другое значение, чем получено в результате вычислений). Затем нарисовал меньшей круг и к нему той же командой прибавил 27 пикселей. В итоге получилось так (я увеличил толщину обводки, чтобы было виднее):

Отрисовка. Часть 2. Сложные иллюстрации

Внешний и внутренний круги нам не нужны, потому удаляем их. А толщину двух оставшихся увеличиваем до некого подобранного на глаз значения. У меня это 13 пикселей. И вручную обрезаем их инструментом Scissors Tool (C ) на пересечении с контуром основной фигуры:

Отрисовка. Часть 2. Сложные иллюстрации

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

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

Отрисовка. Часть 2. Сложные иллюстрации

И вот элемент готов:

Отрисовка. Часть 2. Сложные иллюстрации

Осталось его сделать его повернутые копии. Лучше сделать это при помощи инструмента Rotate Tool (R ), поставив его точку трансформации по центру иллюстрации. В этом помогут направляющие. Далее просто зажимаем Alt, кликаем по этой центральной точке, вводим 72° и нажимаем кнопку «Copy». Повторяем это действие несколько раз, нажимая Ctrl+D.

Отрисовка. Часть 2. Сложные иллюстрации

Затем останется только повернуть все элементы на произвольный угол по часовой стрелке.

Отрисовка. Часть 2. Сложные иллюстрации

Логотип готов. Можно проверить насколько действенна непрозрачность, поменяв цвет фона:

Отрисовка. Часть 2. Сложные иллюстрации

По-моему, отлично. Ну а помимо исходного файла сохраним его в PNG-24, предварительно отключив фон.

Конечно, задач может быть великое множество. Здесь приведены лишь некоторые примеры и описаны мои действия для реализации их в векторе. И прежде чем закончить эту часть, я хотел бы рассмотреть еще один вид отрисовки. А именно: приведение к определенному стилю. Помните в первой части я упоминал об упрощении и «плоском» стиле? О подобном и пойдет речь ниже.

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

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

Я рассмотрю всего один пример. И вот он:

Отрисовка. Часть 2. Сложные иллюстрации

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

post-1120952-1427115148

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

Я не буду сейчас касаться темы техники выполнения иконки и ее воспроизведения в рамках Illustrator (а именно pixel perfect) – этой информации хватит на отдельный урок. Который, возможно, будет написан в будущем.

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

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

Что же стоит оставить в случае с электродвигателем? Давайте посмотрим что сразу бросается в глаза: радиатор, вал, станина, кожух, штуковина наверху (извините, не знаю как она называется). Вот их и будем изображать. Но не забывайте и про геометрическую форму элементов. Если в на фотографии вы видите шестиугольник, то в профиль это будет выглядеть как прямоугольник, разделенный на три или две части (в зависимости от ракурса. Пример ниже.

Отрисовка. Часть 2. Сложные иллюстрации

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

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

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

И вот на этом, пожалуй, я закончу вторую часть.