Что такое векторный рисунок в фотошопе
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), который показывает как нарисовать прекрасные цветы используя градиентные сетки (меш).
Особые эффекты
В этом пошаговом руководстве Вы изучите, как создать «электрический» текст в векторе.
В этом учебном руководстве мы сделаем простой и красивый восточный паттерн в 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 и образцы.
Как векторизовать изображение в Photoshop
Adobe Photoshop не является редактором векторных изображений. Adobe Illustrator умело справится с этой задачей. Но что, если у вас один из основных планов членства в Adobe Creative Cloud? Или у вас есть подписка только на Photoshop?
В Photoshop есть несколько инструментов, которые позволяют рисовать векторные фигуры и контуры с нуля. Теперь вы даже можете выбрать несколько путей и изменить внешний вид с помощью таких функций, как Live Shape Properties. Тем не менее, обучение векторизации изображения в Photoshop требует немного больше усилий.
Как преобразовать растровое изображение в векторное изображение
Векторные изображения можно масштабировать до любого размера, в отличие от фотографии, которая будет пикселизироваться при изменении разрешения. Они состоят из путей, которые похожи на «линии», нарисованные с помощью математических уравнений, масштабируемых до любого разрешения.
Чтобы преобразовать растровое изображение на основе пикселей в векторное изображение:
Как всегда, вы будете работать с разными слоями в Photoshop, чтобы извлечь контуры из растрового изображения. Вот краткий обзор исходного растрового портрета и окончательного изображения после его векторизации.
Скриншоты взяты из Adobe Photoshop CC (21.2.0). Но вы сможете следовать этому простому руководству с большинством последних версий Photoshop.
Перетащите растровое изображение в Photoshop или откройте его в меню «Файл»> «Открыть». Образец изображения в этом примере представляет собой простой портрет. Если объект, который вы хотите векторизовать, имеет загруженный фон, сначала удалите фон в Photoshop.
Есть разные методы, которые вы можете использовать для выделения в Photoshop. Выбранный вами метод будет зависеть от характера изображения. Например, если у изображения прямые края, вы можете выбрать инструмент «Прямоугольная область». Если вы хотите выбирать по цвету, можно использовать Magic Wand или инструмент Quick Selection.
Для портретов команда «Выбрать объект» позволяет автоматически выбрать главный объект на фотографии. Это инструмент с учетом содержимого, который использует интеллектуальные алгоритмы для обнаружения людей на изображениях. Кнопка Выбрать тему отображается на панели инструментов, когда вы выбираете инструмент выбора. Вы также можете найти его в меню «Выбрать».
Выберите «Выделение»> «Выделить и маска»> «Выбрать объект», и он аккуратно выберет самый заметный объект на фотографии.
Используйте ползунки Global Refinements для точной настройки краев выделения, если необходимо, а затем выведите выделение на новый слой.
Для более сложных объектов на фотографии Инструмент выбора объекта — мощная функция Photoshop. Он работает так же, как Select Subject, но помогает вам точно настроить выделение с помощью дополнительных элементов управления. Используйте это, если на вашей фотографии есть группа объектов (или людей).
Слой регулировки порога преобразует текущий слой в черно-белое изображение, и вы можете придать цветному изображению аккуратный одноцветный вид позже в процессе.
На панели «Слои» добавьте новый пороговый слой, выбрав значок «Создать новый слой заливки или корректирующего слоя». Отрегулируйте ползунок, пока не получите желаемый вид. В примере изображения мы использовали значение 51.
В Команда «Цветовой диапазон» в меню «Выбор» аналогичен выбору «Волшебная палочка». Но это также лучше, поскольку он может выбирать пиксели, которые имеют одинаковый или похожий цвет, с помощью инструмента пипетки в этой области изображения. Вы можете подобрать диапазон цветов, многократно используя инструмент на разных участках изображения.
В этом уроке Photoshop мы хотим использовать команду Color Range, чтобы выделить все белые и черные области тона.
Перейдите в Select> Color Range.
Используйте инструменты «Пипетка», чтобы выбрать все различные тональные области изображения. Выбор предварительного просмотра в оттенках серого в раскрывающемся списке даст вам представление о выбранных областях.
Нажмите OK, чтобы закрыть диалоговое окно и вернуться к пороговому слою с выбранным портретом.
Путь в Photoshop — это не что иное, как линия с опорными точками на двух концах. Другими словами, это векторные линейные рисунки. Дорожки могут быть прямыми или изогнутыми. Как и все векторы, их можно растягивать и формировать без потери деталей. Photoshop может преобразовывать выделенные области в контуры и наоборот.
Выберите инструмент Marquee или любой другой инструмент выделения. Щелкните изображение правой кнопкой мыши и выберите «Создать рабочий путь» в контекстном меню.
Кроме того, установите значение допуска в появившемся небольшом поле.
Чтобы сделать путь более плавным, установите значение Допуска во всплывающем диалоговом окне. Значение «1.0» должно быть идеальным для неровных контуров вокруг портрета.
Значение Tolerance определяет, насколько близко путь должен «придерживаться» контуров изображения. Чем ниже значение, тем точнее выбор соответствует вашему пути. Более высокие значения уменьшат количество точек привязки и сделают путь более плавным. Правило большого пальца — чем проще объект, тем выше допуск.
Но поэкспериментируйте с этим значением в зависимости от сложности вашего изображения.
Не нажимая где-либо, перейдите на панель «Слои» и выберите «Создать новый слой заливки или корректирующего слоя».
Затем выберите в меню Solid Color. Вы можете выбрать любой цвет.
На этом этапе создается слой векторной формы поверх слоя Threshold.
Этот слой заливки сплошным цветом можно настроить на любой цвет по вашему выбору. На следующем шаге экспортируйте этот слой как изображение SVG.
Щелкните слой правой кнопкой мыши и выберите «Экспортировать как». Вы также можете сохранить векторное изображение, выбрав «Файл»> «Экспортировать как».
В диалоговом окне «Экспорт как» выберите SVG в настройках файла и нажмите «Экспорт».
Теперь вы можете открыть векторный файл в Adobe Illustrator или любом другом редакторе векторных изображений.
Кроме того, вы также можете экспортировать векторные контуры из Photoshop в Illustrator. Щелкните Файл> Экспорт> Пути к Illustrator. Это экспортирует путь заливки сплошным цветом в Illustrator, если он у вас установлен.
Есть и другие способы векторизации изображения в Photoshop
Этот конкретный метод представляет собой простой способ получить монотонное векторное изображение из цветной фотографии. Вы можете использовать его как шаблон для любого другого модификация изображения в фотошопе. Затем увеличьте или уменьшите его до любого размера на бумаге или другом носителе.
Есть и другие способы векторизации изображения в Photoshop. Тот, за которым вы будете следовать, будет зависеть от базовой фотографии и желаемых результатов.
Векторы, контуры и пиксельные формы в Фотошоп #2
Векторы, контуры и пиксельные формы в Фотошоп #2
Сложность урока: Легкий
Первая часть урока
В этой части урока мы продолжим изучать, чем отличаются векторные фигуры, контуры и пиксельные формы и какой тип фигур лучше выбирать для рисования.
Рисование пиксельных форм
Третий из режимов рисования называется «Выполнить заливку пикселов» (Fill Pixels), и он позволяет рисовать нам пиксельные формы. Я выберу данный режим, нажав соответствующий значок на панели настроек:
Выбираем режим рисования «Выполнить заливку пикселов»
В отличие от векторных фигур, которые автоматически размещаются на отдельном слое всякий раз, как мы их рисуем, пиксельные формы не приобретают своих слоев, поэтому если мы хотим поместить пиксельную форму на отдельном слое, нам нужно сначала этот слой создать. У меня опять есть только белый слой заднего фона, и я добавлю новый слой на свой документ, нажав на значок «Новый слой» (New Layer) в нижней части панели слоев:
Нажимаем на значок «Новый слой»
Программа добавляет новый пустой слой под названием «Слой 1» (Layer 1) выше слоя заднего фона:
Новый пустой слой добавлен для рисования пиксельной формы
Также в отличие от слоев-фигур, которые с легкостью позволяют нам в любой момент изменять цвет векторной фигуры, пиксельные формы такой возможности нам не дают. Программа Photoshop будет рассматривать текущий основной цвет (цвет изображения) в качестве цвета пиксельной формы, поэтому вам нужно выбрать необходимый цвет заранее перед тем, как вы будете рисовать фигуру. Для того чтобы изменить основной цвет, нажмите на значок образца цвета в нижней части панели инструментов. Этот значок расположен слева вверху (тогда как значок фонового цвета расположен справа внизу):
Нажимаем на значок образца основного цвета
Это действие приведет к открытию палитры цветов. Для моей фигуры я выберу фиолетовый цвет. Как только вы выберете цвет, нажмите ОК для закрытия палитры:
Выбираем из палитры цветов новый основной цвет
Выбрав параметр «Выполнить заливку пикселов» на панели настроек и «Слой 1» на панели слоев, а также определив фиолетовый цвет в качестве основного цвета, я кликну кнопкой мыши в окне документа и с помощью инструмента «Эллипс» нарисую фигуру, протянув курсор в нужном направлении, как я это делал раньше. И снова, как и в случае с рисованием слоев-фигур и контуров, по мере перемещения курсора вначале мы увидим только первоначальные очертания будущей фигуры:
С помощью инструмента «Эллипс» рисуем пиксельную форму
Я отпущу кнопку мыши, чтобы закончить рисовать фигуру, и в этот момент программа Photoshop заполнит контур цветом. На первый взгляд, моя новая фигура ничем не отличается от векторной фигуры, которую я нарисовал бы, выбрав параметр «Слой-фигура»:
Пиксельная форма очень похожа на векторную фигуру
Однако если мы посмотрим на панель слоев, то сразу увидим разницу. Наша фигура заполнилась цветными пикселями на обычном слое. У этого слоя нет значка образца цвета, который помог бы нам быстро изменить цвет фигуры, и нет векторной маски. Так как фигура состоит из пикселей, я не могу быстро выделить ее с помощью инструмента «Выделение контура», и что еще важнее – у нее нет якорных точек и направляющих линий, которые помогли бы мне изменить размер и форму фигуры с помощью инструмента «Стрелка». Другими словами, после того как мы изучили свойства векторных фигур, их легкость и быстроту масштабирования, пиксельная форма не представляет для нас особого интереса, поскольку необходимо приложить много дополнительных усилий, чтобы изменить ее форму:
Миниатюра слоя 1 отображает пиксельную форму, которую не так легко изменить, как векторную фигуру
Самая большая проблема, касающаяся пиксельных форм, заключается в том, что пиксельные формы плохо масштабируются, особенно когда нам нужно увеличить исходный размер фигуры, в то время как слои-фигуры можно увеличивать во много раз без потери качества изображения. Для того чтобы наглядно представить себе, о чем я говорю, ниже вы можете увидеть две вроде бы одинаковые фигуры, которые я нарисовал с помощью инструмента «Эллипс». Хотя обе фигуры и кажутся одинаковыми, на самом деле, левая фигура – векторная фигура, а правая – пиксельная форма:
Слева расположена векторная фигура, а справа – пиксельная форма
Бросив быстрый взгляд на панель слоев, мы увидим, что векторная фигура размещена на слое фигуры («Фигура 1»), а пиксельная форма – на слое «Слой 1»:
На панели слоев видны векторная и пиксельная фигуры
Выбрав векторную фигуру, я нажму сочетание клавиш Ctrl+T (Win) / Command+T (Mac), чтобы на экране вокруг фигуры появилась рамка свободной трансформации:
Вокруг векторной фигуры появляется рамка свободной трансформации
Затем я уменьшу размер векторной фигуры до 10%, установив соответствующие значения параметров «Масштабирование по вертикали» (Width) и «Масштабирование по горизонтали» (Height) на панели настроек:
Уменьшаем размер векторной фигуры до 10% от исходного размера
После этого я нажму клавишу Enter (Win) / Return (Мас), чтобы подтвердить изменения и убрать рамку свободной трансформации, и теперь векторная фигура слева выглядит намного меньше правой фигуры:
Вид фигур после уменьшения векторной фигуры
То же самое я проделаю и с пиксельной формой, выбрав вначале на панели слоев «Слой 1», далее нажав сочетание клавиш Ctrl+T (Win) / Command+T (Mac) для выбора команды «Свободное трансформирование» и установив значения параметров «Масштабирование по горизонтали» и «Масштабирование по вертикали» равными 10%. Далее я нажму клавишу Enter (Win) / Return (Mac), чтобы подтвердить изменения и убрать рамку трансформации, и теперь обе фигуры уменьшились в размерах. Тем не менее, они все еще выглядят одинаково:
После уменьшения размеров векторная фигура и пиксельная форма все еще выглядят одинаково
Давайте теперь посмотрим, что же случится с фигурами, когда я увеличу их размеры. Я начну с векторной фигуры слева, нажав сочетание клавиш Ctrl+T (Win) / Command+T (Mac) для выбора команды «Свободное трансформирование» (Free Transform) и далее вернув фигуре исходный размер путем установления значений параметров «Масштабирование по горизонтали» и «Масштабирование по вертикали», равными 100%:
Увеличиваем размер векторной фигуры до 100% по отношению к исходному размеру
Векторная фигура опять стала исходного размера и при этом не приобрела размытость линий и границ. Ее края остались такими же четкими, каким они были вначале:
Векторные фигуры можно масштабировать сколько угодно без потери качества изображения
Я проделаю те же действия и с пиксельной формой, установив значения параметров Масштабирование по горизонтали» и «Масштабирование по вертикали», равными 100%:, чтобы вернуть фигуре исходный размер. Совершив эти действия, мы сможем увидеть значительную разницу между векторными и пиксельными фигурами. В то время как векторная фигура слева сохранила четкость линий, увеличенная пиксельная форма совершенно потеряла свою форму. Ее края теперь выглядят бесформенно и расплывчато, что еще раз свидетельствует об ограниченных возможностях пиксельных форм по сравнению с векторными фигурами:
И победитель… «Слой-фигура»!
Подведем краткие итоги. Несмотря на то, что в программе Photoshop имеется возможность рисовать три типа фигур, чаще всего вы будете работать с векторными фигурами, выбирая параметр «Слой-фигура». Построение таких фигур основано на математических расчетах и не зависит от пикселей, что позволяет с легкостью изменять размер и форму фигур. Контуры также имеют векторную природу и представляют собой очертания фигур без заливки цветом. Они легко масштабируемы и редактируемы, как и слои-фигуры, но не являются частью документа до тех пор, пока мы не совершим с ними каких-либо действий.
И вот мы закончили! Мы рассмотрели, чем отличаются векторные фигуры, контуры и пиксельные формы! Посетите наш раздел «Основы Фотошоп» для дальнейшего изучения программы и принципов работы с фигурами, слоями, выделениями и прочими необходимыми инструментами! Или перейдите к другим урокам, которые могут вас заинтересовать!
Автор: Steve Patterson
Перевод: Ксения Руденко
Эти уроки могут вас заинтересовать
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 5
Спасибо! Очень полезный урок =)
Новые работы пользователей
По заданным фильтрам работы не найдены
Попробуйте изменить критерий поиска или сбросить фильтры
Хотите взять максимум?
Активируй Premium и получи 9 преимуществ
Хотите узнавать
обо всех событиях?
Выберите, куда хотите получать уведомления
Получи скидку 15%
на планшет HUION
Более 50 моделей для самого требовательного пользователя
© Creativo, 2021 г.
Все права защищены
Разделы
Информация
Статистика
Переход по внешней ссылке
Creativo не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
1″ > Вы можете выбрать до <
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.