Как сделать постер в иллюстраторе
Рисуем в Adobe Illustrator винтажный постер с применением эффекта Зерно
Вот такой постер мы будем рисовать.
Может, вы и не слышали имя А. М. Кассандр, но точно видели его работы. Его рекламные плакаты в начале двадцатого века стали символами течения «Арт-Деко» и вдохновили новое поколение дизайнеров по всему миру. Один из характерных аспектов его работ — зернистая текстура, используемая для затенения объектов.
В Adobe Illustrator эту технику можно воссоздать с помощью разных эффектов-текстур. Этот урок предназначен для начинающих, и мы начнем с рисования основных фигур. Опытные пользователи могут сразу перейти к части — Текстуры. Итак, начнем!
Часть 1 — Бутылка вина
Шаг 1
Выберите инструмент Прямоугольник со скругленными углами и нарисуйте прямоугольник (в высоту в два раза больше, чем в ширину). Это можно сделать двумя способами: сделайте щелчок на документе и введите цифры или протащите инструмент и нарисуйте от руки. Рисуя, можете нажимать стрелку вверх или вниз, чтобы настроить радиус округления. Включите обводку, заливку выключите. На данном этапе цвет не имеет значения.
Шаг 2
Дальше выберите инструмент Эллипс (L) и сделайте один щелчок на документе. Задайте такую же высоту и ширину как для прямоугольника. В палитре Выравнивание или с помощью иконок на Панели управления выровняйте две фигуры по центру.
Шаг 3
Включите инструмент (M) и нарисуйте прямоугольник для горлышка бутылки. Выровняйте его по центру вместе с остальными фигурами. Снова включите инструмент Эллипс и нарисуйте тоненькую фигуру для верхнего ободка. Края эллипса должны совпадать с краями маленького прямоугольника. В таких случаях могут помочь Умные Направляющие. Включите их в меню Просмотр. Когда точки пересекутся, появится слово «Пересечение». Умно, правда?
Шаг 4
А теперь нарисуйте маленький прямоугольник с округленными углами чуть ниже ободка. Выровняйте его по центру, как и все остальные фигуры. На этом здесь можно остановиться и перейти к следующему шагу. А можно немного поразмыслить и добавить по бокам изгибы.
Шаг 5
Выберите инструмент Дуга и нарисуйте дуговой сегмент, соединяющий край горлышка бутылки и краем круга. Можно соединить края на глаз, а можно дважды щелкнуть инструмент Дуга и в открывшемся окне задавать значения и смотреть в окне Просмотра.
Точно расположить дугу опять помогут Умные Направляющие. Чтобы сделать все идеально, посмотрите на рисунок в режиме Контур. Ничего страшного, если арка выступает за пределы круга — включите Ножницы (С) и отрежьте лишнее как можно ближе к точке пересечения. Чтобы выделить лишнюю часть (если она еще не выделена), воспользуйтесь инструментом Прямое выделение (A). А чтобы удалить, дважды нажмите клавишу Delete.
Шаг 6
Выделите дуговой сегмент, и дважды щелкните инструмент Зеркальное Отражение (O). Выберите Вертикальное, задайте угол 90°, и нажмите Копировать. Перетащите копию на другую сторону бутылки. Выделите обе дуги и нажмите Command/Ctrl + J, чтобы их объединить.
Шаг 7
Проверьте, что все фигуры вы выровняли по центру, выделите их все, и затем соедините в палитре Обработка контуров. Включите заливку и выключите обводку. Чтобы бутылка была залита цветом, но без обводки.
Часть 2 — Бокал для вина
С помощью инструмента Эллипс нарисуйте круг. Чтобы круг был идеальным, удерживайте клавишу Shift, когда рисуете. Нарисуйте прямоугольник такой же ширины, как и круг. Выровняйте нижнюю сторону прямоугольника с центром круга. При необходимости подгоните высоту прямоугольника, чтобы получился стилизованный бокал.
В палитре Обработка контуров соедините две фигуры. Выделите новую фигуру. Откройте меню Объект > Контур > Создать параллельный контур. Введите отрицательное значение, чтобы создать параллельный контур внутри фигуры.
Выделите точки верхних углов параллельного контура и перетащите вниз. Это будет вино. Нарисуйте два прямоугольника, чтобы получилась ножка. Соедините их с верхней частью бокала. Залейте цветом фигуру «вино».
Часть 3 — Жидкость
Шаг 1
Шаг 2
Выберите инструмент Сетчатый градиент (U) и один раз щелкните, чтобы добавить точку в верхней части объекта. Выделите эту точку инструментом Прямое выделение и измените цвет «заливки» на белый. Обычно мы не используем точки, делая заливку. Но это Сетчатый градиент.
Часть 4 — Текстуры
Мы нарисовали все три основных объекта постера. И теперь можно добавить текстуру. С каждым объектом нужно проделать почти все то же самое. Поэтому я расскажу подробно только раз.
Шаг 1
Скопируйте объект. Залейте копию черно- белым градиентом. С какой стороны будет черный цвет, а с какой — белый, зависит от расположения объекта и источника освещения, который вы выбрали для своей композиции. Но учтите, что в темных участках будет тень и зернистость будет плотнее. Это «интерактивный» эффект, и его всегда можно изменить.
Шаг 2
Выделите залитый градиентом объект, откройте меню Эффект > Текстура > Зерно. На весь экран откроется окно текстуры. В правой части задайте Интенсивность и Контрастность. Тип Зерна можно выбрать, открыв Текстуры. Нам подойдет «Зерно». Все заданные настройки можно увидеть слева в окне Просмотра.
Шаг 3
Перетащите объект с текстурой на объект без текстуры, и в палитре Прозрачность выберите режим наложения Умножение.
Это основной способ применения зернистой текстуры. Можно также использовать радиальные градиенты, например, в бокале для вина; переходы и сетчатый градиентa, например, в фигуре «вино».
Кроме того, этот эффект можно применить для преобразованного текста. И поскольку эта иллюстрация в стиле А. Кассандра, который также создавал шрифты, я выбрал шрифт Арт-Деко.
Собираем все вместе
У Кассандра линии были чистые, а композиции простые. Но не обманывайтесь — создать нечто элегантное из нескольких простых фигур не так просто. Но, опять же, в векторе у нас есть преимущество. Мы можем неограниченное количество раз редактировать объекты, ничего не испортив. Эффект Зерно «интерактивный», поэтому можно экспериментировать и постоянно освежать рисунок.
У вас остались вопросы или есть что добавить по теме статьи? Напишите в комментариях.
Создание постера в Adobe Illustrator с использованием текстур и рукописных шрифтов
Считаете ди Вы себя кофеманом, неравнодушным к красивым шрифтам и рукописным надписям? Следуй этим инструкциям чтобы создать великолепный кофейный ретро-плакат, который будет прекрасным дополнением интерьера вашей кухни! Для создания сбалансированной композиции с чашечкой кофе, забавной надписью и затейливым рукописным шрифтом, мы будем использовать простые формы, бесплатные шрифты и некоторые инструменты Adobe Illustrator. И закончим наш постер с помощью добавления легкой текстуры.
После создания этого плаката, вы освоите несколько полезных приемов и хитростей, которые помогут Вам создавать цифровые рукописные надписи с чистого листа, редактировать готовые шрифты, а также создавать свои собственные нарисованные шрифты. Вы сможете создать свои оригинальные плакаты, открытки и композиции!
В интернете не так много бесплатных качественных шрифтов, поэтому я очень рекомендую начать с клевых шрифтов на Envato Market. Вы можете использовать их как основу для своих шрифтов или же как полноценный элемент вашей композиции, который вы легко сможете изменить или перекрасить. Также не забывайте, что эти оригинальные шрифты и иллюстрации отлично подходят для вдохновения. Давайте приступим!
Продумываем композицию и делаем набросок
Шаг 1
Чтобы создать постер мы должны четко понимать его цель и идею. Однажды утром я думала о прекрасном начале дня и пила кофе с корицей. В один момент в моей голове возникла картинка с кофейным постером, я начеркала очень приблизительный скетч на клочке бумаги. Вот он:
Обычно нам требуется больше времени для того чтобы вдохновиться, придумать концепт, продумать детали и попробовать несколько вариантов. Вы даже можете отложить ваш эскиз на несколько дней, чтобы вернуться к нему со свежим взглядом.
На этом этапе ваш рисунок не должен быть идеальным, это просто грубый набросок, который нужен для сохранения правильных пропорций. К тому же, нарисовать прямые линии и геометрические формы будет значительно проще использую определенные инструменты программы.
Шаг 2
Начните с создания Нового документа 600 х 800 пикселей и фигуры такого же размера при помощи Инструмента «Прямоугольник» (М) и заполните её шоколадно-коричневым цветом. Вы можете Заблокировать её на панели Слоёв, чтобы не двигать во время рисования.
2. Рисуем чашку с кофе
Шаг 1
Создайте Новый слой и начните формировать чашку с её верхушки. Инструментом «Эллипс» (L) создайте тёмно-бежевый овал 160 х 20 пикселей. Перейдите к Инструменту «Прямоугольник» (М) и создайте светло-бежевую фигуру 160 х 100 пикселей.
Фигуры одинаковой ширины, поэтому мы можем объединить их вместе, как показано на картинке ниже.
Перейдите к Инструменту «Прямое выделение» (А) и выделите нижние опорные точки прямоугольника. Примените функцию Динамических углов, чтобы сделать низ чашки плавным и скруглённым, сдвинув круглые маркеры углов вверх.
Шаг 2
Мы можем использовать панель Выравнивания, чтобы сделать фигуры идеально выровненными. Выделите обе фигуры и ещё раз кликните на эллипсе, чтобы сделать его Ключевым объектом. Примените функцию Горизонтального выравнивания по центру, чтобы выровнять фигуры.
Шаг 3
Выделите верхнюю фигуру овала, Скопируйте её и Вставьте на Передний план (Control-C > Control-F). Удерживая Alt-Shift, сожмите верхнюю копию Инструментом «Выделение» (М), чтобы уменьшить её. Заполните фигуру тёмно-коричневым цветом для изображения кофе.
Давайте добавим нижнюю часть чашки. Создайте тёмно-бежевый прямоугольник 60 х 12 пикселей и при помощи Инструмента «Прямое выделение» (А) сделайте его углы полностью скруглёнными. Вы также можете изменить Угловой радиус на верхней панели управления, сохраняя фигуру выделенной при помощи Инструмента «Прямое выделение» (А).
Отправьте фигуру на Задний план (Shift-Control-[), за чашку.
Шаг 4
Теперь добавим ручку чашке. Создайте прямоугольник 35 х 50 пикселей на правой стороне чашки. Создайте маленький прямоугольник поверх него и Отправьте обе фигуры на Задний план (Shift-Control-[). Примените функцию «Вычитание переднего» на панели Обработки контуров, чтобы вырезать маленький прямоугольник. Сделайте правую сторону ручки скруглённой при помощи функции Динамических углов.
Шаг 5
Теперь мы создадим блюдце. Создайте эллипс 200 х 40 пикселей и Отправьте его на Задний план (Shift-Control-[), за чашку. Создайте маленький овал на блюдце, удалив его Заливку и применив тёмно-бежевый цвет Обводки. Перейдите на панель Обводки, установите Толщину на 2 и измените Профиль на Профиль ширины 2 в нижней части панели Обводки.
Шаг 6
Давайте добавим яркий блик на чашке. Скопируйте основу чашки дважды (Control-C > Control-F > Control-F). Сдвиньте верхнюю копию слегка вправо, удерживая Shift, и несколько раз нажмите на Стрелку вправо на клавиатуре.
Выделите две копии и примените функцию «Вычитание переднего» на панели Обработки контуров, чтобы вырезать фигуры, оставив только узкую полоску. Отсоедините полоску от края чашки, слегка её уменьшив и сдвинув вправо. Инструментом «Ластик» (Shift-E) удалите часть блика.
Шаг 7
Добавьте маленький овал на тёмно-коричневой фигуре кофе. Установите цвет Обводки на светло-коричневый и Толщину на 3 на панели Обводки или на верхней панели управления.
3. Создаём причудливую надпись
Шаг 1
Начнём создание первого слова, преобразовав шрифт. Я использую бесплатный шрифт Bevan для слова «Хорошее», установив Размер шрифта на 75 на панели Символов (Control-T).
Перейдите в Объект > Разобрать, превратив наш текст в кривые линии. Выделите слово и перейдите в Объект > Контур > Параллельный контур, установив значение Параллельности на -3, чтобы создать маленький объект внутри каждой буквы.
Шаг 2
Давайте применим текстуру к внутренним фигурам. Выделите фигуры и перейдите на панель Образцов. Откройте Меню библиотеки образцов и перейдите в Узоры > Базовая графика > Базовая графика_линии. Выделите и примените образец 6 lpi 50.
Дважды кликните на Инструменте «Масштаб» (S), чтобы открыть панель настроек Масштаба. Установите Постоянный масштаб на 30% и уберите галочку с пункта «Трансформировать объект», чтобы изменить размер только узора, сделав полоски намного тоньше.
Шаг 3
Примените к фигурам чёрную Обводку толщиной 1, установив значение Углов в среднее положение на панели Обводки.
Шаг 4
Теперь поработаем над цветами, чтобы сделать буквы более трёхмерными. Выделите нижние фигуры букв и заполните их вертикальным линейным градиентом от тёмно-коричневого до светло-коричневого, сформировав жирный контур.
Затем выделите средние фигуры и примените вертикальный линейный градиент от бежевого внизу до белого наверху.
Теперь изменим цвет линейного узора. Для этого сначала нам нужно разобрать оформление текстурных фигур (Объект > Разобрать оформление). Вы увидите набор линий, спрятанных внутри Обтравочных масок. Теперь мы можем выделить эти фигуры и применить тёмно-коричневый вертикальный градиент, сделав линии сияющими.
Шаг 5
Давайте преобразуем слово, чтобы оно было немного изогнуто. Перейдите в Эффект > Деформация > Дуга и установите значение Горизонтального сгиба на 15%. Нажмите ОК и Разберите оформление для применения эффекта.
Шаг 6
Теперь, когда наше первое слово готово, перейдём ко второму. В этот раз мы создадим надпись от руки при помощи Инструмента «Карандаш» (N). Можете настроить параметры, дважды кликнув на Инструменте «Карандаш» (N) и установив ползунок Точности ближе к Сглаживанию, чтобы сделать линии плавными.
Шаг 7
Я использую Инструмент «Карандаш» (N) с Толщиной обводки 3, чтобы обвести буквы моего эскиза. Как вы видели в самом начале, эскиз очень замысловатый, поэтому он послужит только в качестве приблизительного образца. Как видите, получившиеся буквы больше тех, которые в эскизе. Они выглядят аккуратными и ровными.
Если вы пока не чувствуете себя уверенно в письме от руки, постарайтесь найти любой витиеватый шрифт по своему усмотрению и попрактикуйтесь в обведении букв, взяв шрифт за образец, пока не достигните желаемого результата. Практика приводит к совершенству.
Шаг 8
По достижению нужного результата перейдите в Объект > Разобрать, чтобы превратить наши контуры в объекты. Теперь можем применить мягкий линейный градиент от бежевого до белого, придав нашему тексту сияющий металлический эффект.
Шаг 9
Давайте перейдём к следующему слову. Для него я буду использовать бесплатный шрифт Amatic. Он уже выглядит как написанный от руки – как раз то, что нам нужно! Единственная деталь, которую мы добавим сюда, будет причудливая завитушка слева. При помощи Инструмента «Карандаш» (N) присоедините завитушку к букве “S”.
Шаг 10
Теперь можем разобрать наш текст (Объект > Разобрать) и заполнить его вертикальным линейным градиентом. В этот раз я хочу создать разграничительную линию в центре градиента, добавив больше контраста между цветами. Как видите на картинке ниже, я добавила два контрастных цвета в центре градиентной шкалы, поместив ползунки очень близко друг к другу.
Шаг 11
Далее добавим слово «с..» при помощи шрифта по типу пишущей машины, например, Inconsolata или Courier New. Он выглядит слишком прямым и геометричным, поэтому используем Инструмент «Кисть-клякса» (В) для придания ему рукописного вида. Вы можете дважды нажать на Инструмент «Кисть-клякса» (В) и настроить параметры, чтобы сделать линии аккуратными и плавными. Я установила ползунок Точности на среднюю позицию и выбрала самый маленький Размер кисти.
Обведите буквы, сделав их более витиеватыми.
Шаг 12
Перед тем, как добавить последнее слово, давайте создадим дополнительный элемент – простую, элегантную ленту. Создайте прямоугольник 310 х 70 пикселей, установив его Заливку на светло-бежевый цвет и цвет Обводки на тёмно-коричневый с Толщиной обводки 3.
Перейдите в Эффект > Деформация > Дуга и установите значение Горизонтального сгиба на -20%.
Разберите оформление (Объект > Разобрать оформление), чтобы применить эффект.
Шаг 13
Добавим сложенные концы ленты. Создайте квадрат 55 х 55 пикселей Инструментом «Прямоугольник» (М). Возьмите Инструмент «Добавить опорную точку» (+) и поместите опорную точку в середине правого края. Инструментом «Прямое выделение» (А) перетащите точку влево.
Поверните фигуру и присоедините её к правой стороне ленты, Отправив её на Задний план (Shift-Control-[).
Дважды нажмите на Инструмент «Зеркальное отражение» (О) и отразите фигуру по Вертикальной оси. Нажмите «Копировать», чтобы создать зеркальную копию для противоположной стороны ленты.
Шаг 14
Давайте создадим слово «Кофе» при помощи бесплатного шрифта Limelight и поместим его на ленту. Перейдите в Эффект > Деформация > Дуга и установите значение Горизонтального сгиба на -20%.
Настройте Размер текста и Трекинг букв (расстояние между буквами) на панели Символов (Control-T), чтобы текст подошёл под размер ленты.
Шаг 15
Теперь можем Разобрать оформление, чтобы применить эффект, превратив текст в кривые линии. Примените вертикальный градиент от тёмно-коричневого до светло-коричневого, сделав буквы более сложными.
Шаг 16
Вот как это всё выглядит вместе.
4. Добавляем рукописные элементы на постер
Шаг 1
Давайте создадим стилизованное облако вокруг текста. Инструментом «Прямоугольник» (М) создайте серию прямоугольников разных размеров, чтобы они подходили к каждому слову.
Объедините все прямоугольники на панели Обработки контуров и выделите фигуру Инструментом «Прямое выделение» (А). Перейдите на панель управления сверху и установите Угловой радиус на 7 пикселей, сделав фигуру более сглаженной. Установите цвет заливки на светлый кофейно-коричневый.
Шаг 2
Перейдите к добавлению плавных завитков в нижней части композиции.
Шаг 3
Создадим простую ветку. Инструментом «Дуга» (его вы можете найти в том же меню, где и Инструмент «Отрезок линии» (\)), чтобы создать выгнутую линию для стебля. Инструментом «Карандаш» (N) создайте каплевидную форму для листка и присоедините его к верху стебля. Удерживая Alt-Shift, перетащите копию листка. Создайте несколько пар листков на обеих сторонах стебля и расположите их, как показано на картинке ниже.
Шаг 4
Скопируйте созданную ветку и создайте копию поменьше, применив светло-коричневый цвет и переключив листья с Заливки на Обводку.
Расположите созданные ветки по обеим сторонам чашки.
Шаг 5
Теперь создадим ещё один элемент, объединив две дугообразные линии и поместив маленькие круги на каждый кончик. Заполните пустые области возле чашки и ленты, расположив созданные элементы там.
Шаг 6
Продолжайте заполнять все пустые пространства постера, двигаясь от низа картинки до верха. Используйте простые линии, завитки и ветки, которые мы создали, и добавьте некоторые другие мелкие объекты для разнообразия – кружки, листья, капли и маленькие цветочные бутоны.
Вот некоторые фрагменты вблизи, чтобы вы смогли рассмотреть их мелкие характерные элементы. Ничего сложного, и в то же время эти элементы помогли нам создать подходящий вид с тёплой кофейной атмосферой.
5. Добавляем текстуру своему постеру
Этот раздел не обязателен. Наш постер уже готов, но мы можем его немного улучшить.
Теперь, когда постер готов и вы им довольны, можете перейти к экспорту и оставить всё как есть. Однако, я бы рекомендовала добавить немного текстуры, которая сделает нашу надпись более уникальной, придав ей определённый ретро-вид. Давайте посмотрим, как это можно сделать!
Шаг 1
Для начала нам нужно создать большой прямоугольник и заполнить его вертикальным линейным градиентом от чёрного к белому.
Перейдите в Эффект > Текстура > Зерно. В окне настроек эффекта выберите «Пунктирный тип зерна» и настройте Интенсивность и Контраст, двигая ползунки и пользуясь предпросмотром. Я установила Интенсивность на 50 и Контраст на 30.
Нажмите ОК, когда закончите.
Шаг 2
Теперь нам нужно превратить этот эффект в векторный объект! Разберите оформление фигуры, превратив её в растровое изображение, и перейдите на панель управления сверху, к панели Трассировки изображения. Выберите установку «Фотография высокого качества» в выпадающем меню, чтобы трассировать изображение.
После этого вы увидите, как на верхней панели управления появилась кнопка «Панель трассировки изображения», которая позволит настроить параметры трассируемого изображения. Вы можете увидеть мои настройки на скриншоте ниже.
Шаг 3
Нажмите на кнопку «Разобрать» на верхней панели управления, чтобы применить результат трассировки и превратить нашу картинку в векторное изображение. Если после трассировки останутся белые фигуры, примените Инструмент «Волшебная палочка» (Y), чтобы выделить и удалить их.
Выделите все оставшиеся чёрные фигуры, Объедините их на панели Обработки контуров и перейдите в Объект > Составной контур > Создать (Control-8), превратив все отдельные части в единый объект.
Шаг 4
Теперь, когда у нас есть эта текстурная гранджевая фигура, давайте применим её к чашке. Расположите фигуру поперёк чашки. Скопируйте (Control-C > Control-F) основу чашки и Отправьте копию на Передний план (Shift-Control-]), поверх текстуры.
Выделите текстуру и копию чашки, нажмите правой кнопкой мыши и Создайте обтравочную маску. Таким образом, мы спрятали текстуру внутри чашки. Теперь настроим цвет!
Шаг 5
Теперь мы можем выделить нашу текстуру внутри Обтравочной маски на панели Слоёв и применить мягкий линейный градиент от белого к бежевому. Перейдите в Режим наложения «Умножение» на панели Прозрачности, сделав фигуру полупрозрачной.
Примените эту же технику для добавления гранджевой текстуры к другим элементам, таким как лента и текстовое облако.
Готово, народ! Пора прерваться на кофе!
Отличная работа, друзья! Наш кофейный постер с надписью готов. Надеюсь, вам понравилось следовать этому руководству, и вы нашли для себя новые советы и рекомендации, которые вдохновят вас на создание других постеров с надписями на разные темы, к примеру, морской постер или открытка с мотивационной цитатой.
Если хотите узнать о других техниках по созданию цифровых надписей, взгляните на эти руководства: