Как перевести растровое изображение в векторное в фотошопе. Заливка маски в фотошопе градиентом

Добрый день, читатели блога! Сегодня мы поговорим с вами о программе "Easy Paint Tool SAI", а точнее - о векторном слое.

Начнём с азов. Заходим в САИ и создаём новый холст. Я беру размер 3000х3000 или 100х100, для меня они самые удобные. Ищем у себя кнопочку "New Linework Layer" и попадаем на векторный слой.

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

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

Начнём с первого инструмента. Ручка (pen) способна создавать плавную мягкую линию, схожую с кистью PS. Цвета ее перекрываются. На векторном слое ручка способна создавать так называемые "узлы". Можно менять размер, форму, прозрачность. Не самый удобный инструмент, линии получаются кривыми.

Ластик (eraser) вытирает, автоматически скругляя при этом конец линии. Я быстро нарисовала некое "подобие" глаза. Один конец ластик уже стёр, а второй ещё нет. Как видите, конец автоматически скруглился.

Weight позволяет нам поменять ширину линии. Я начертила три линии одинакового размера, а одну из них уменьшил этим инструментом. Удобно, не правда ли?

Инструмент 4 (Color - цвет) позволяет изменить цвет линии одним нажатием. Сначала выбираем цвет, а потом кликаем на нужную линию.

Кривая (curve) – инструмент №9 - позволяет рисовать кривые линии. Инструмент очень удобен. Рисовать им просто - ведёшь линию, а там где нужно повернуть - щёлкаешь. На этом месте появляется узелок (на рисунке они отмечены красным), который позволяет изменять линию.

Инструмент "Line" (линия) позволяет нарисовать прямую линию.

С помощью инструмента "Edit" мы можем отредактировать линию, потянув за уголки. Так из прямой линии я смогла сделать довольно завитый локон.

Инструмент "pressure" (нажатие, давление) позволяет изменять силу нажатия. Так можно утолщить или утончить линию от одного узла до другого. Это тот же локон, что и на картинке выше.

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

Что такое растровое и векторное изображение и чем они отличаются

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

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

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

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

Простой пример, как растр перевести в вектор

Итак, вектор состоит из геометрических фигур. Photoshop обладает инструментами для создания контуров. Контур и есть геометрическая фигура. Чтобы сделать векторное изображение в Фотошопе, нужно создать контур изображения. Помогут нам в этом инструменты группы «Выделение»/Select : «Прямоугольное выделение»/Rectangular Marquee Tool , «Эллиптическое выделение»/Elliptical Select Tool ,** «Волшебная палочка»/Magic Wand Tool, **«Быстрое выделение»/Quick Selection Tool и «Перо»/Pen tool .

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

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

Чтобы работать с контурами, вам нужно вызвать закладку «Контуры»/Path на палитру слоёв. Для этого зайдите в меню «Окно»/Window и отметьте пункт «Контуры»/Path . Закладка появится на палитре слоёв.

Изображение имеет 4 цвета (фон не считаем). Берём инструмент «Волшебная палочка»/Magic Wand Tool и выделяем первый цвет. Чтобы выделить все участки, рассредоточенные островками по изображению, удерживайте Shift .

Когда первый цвет выделен, выбираем инструмент «Лассо»/Lasso либо «Прямоугольная область»/Rectangular Marquee Tool и, не снимая выделения, щёлкаем правой клавишей мыши. В контекстном меню выбираем «Образовать рабочий контур»/Make Work Path .

В диалоговом окне указываем максимальное сглаживание «Допуск»/Tolerance (от 1 до 10; чем ниже цифра, тем лучше повторятся контуры). Жмём Ok .

На закладке «Контур» появится первый контур. На изображении он будет заметен в виде кривых с точками. Их можно выровнять и подогнать с помощью инструмента «Выделение узла»/Direct Selection Tool . Этим инструментом выделяем точку и либо корректируем кривую, перемещая усик точки, либо подвигаем саму дугу.

На закладке «Контур» меняем название контура. Для этого щёлкаем по нему двойным щелчком и в диалоговом окне изменяем имя.

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

Получив контуры, остаётся создать вектор. Переходим на закладку «Слои»/Layer на палитре слоёв, создаём новый слой Shift+Ctrl+N . Основной цвет задаём тот, в который окрасим первый контур.

Возвращаемся на закладку «Контур» , становимся на первый контур. В главном меню в пункте «Слои»/Layers выбираем «Новый цвет заливка»/New Fill Layer - «Цвет»/Solid Color . В открывшемся окне жмём Ok .

Теперь, перейдя на закладку «Слои»/Layers , вы увидите на новом слое первый векторный слой.

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

На этом всё. Способ достаточно простой.

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

Еще больше о Photoshop - на курсах .

Векторный слой может содержать: точечные (пиктограммы или «символы » ), текстовые, линейные (линии, полилинии), площадные (контуры, поликонтуры) объекты.

Рисунок 3. Карта с загруженными векторными слоями

Кроме того, в векторном слое графические объекты независимо от их графического типа делятся на две разновидности: простые графические объекты (примитивы) и типовые (классифицированные) графические объекты.

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

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

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

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

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

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

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

Типовой символьный объект определяется на местности координатой точки привязки (X,Y) и углом поворота символа вокруг точки привязки. Каждый режим связан с одним из символов библиотеки символов. Для решения различных задач, связанных с инженерными сетями, символьный объект может иметь дополнительный признак, конкретизирующий назначение типа: источник, потребитель, отсекающее устройство или просто узел.

Типовой линейный объект представляет собой ломаную. Каждый режим линейного объекта имеет свой цвет (RGB), толщину и стиль. Типовой линейный объект может обладать признаком того, что данный тип является участком. Отличие участка от простой ломаной состоит в том, что начало и конец такой ломаной обязательно должны быть связаны с типовыми символьными объектами, т.е. начинаться символьным объектом и заканчиваться символьным объектом.

Типовой площадной объект представляет собой замкнутый контур. Каждый режим объекта имеет свой цвет (RGB), толщину и стиль линии контура, а также цвет и стиль заливки внутренней области контура.

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

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

Имя слоя - это имя семейства файлов слоя. Данному семейству файлов слоя для удобства работы пользователя при создании слоя ставится в соответствие текстовая строка (максимум 40 символов), именуемая пользовательским названием слоя. Работая в системе, пользователь, в основном, оперирует пользовательским названием слоя.

Для каждого слоя также должен существовать индексный файл с расширением pl . В этом файле хранится информация о расположении объектов слоя в пространстве друг относительно друга. Эта информация используется для ускорения запросов, пространственного анализа и вывода слоя на экран. В процессе редактирования графической информации индексный файл обновляется автоматически. Система также имеет возможность полной переиндексации слоя (см. «Индексация слоя»).

Основные операции со слоями, содержащими векторные объекты, описаны в разделе Операции с векторными слоями.

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

Векторное

Когда вы создадите новый документ в Photoshop, напишите на белом листе любое слово , подобрав удобный размер (использование функций «Текст» - значок с буквой «Т» на панели инструментов).

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

Возвращаем нормальный размер, кликнув дважды на значок с рукой. Уменьшаем размеры следующим образом: «Редактирование» - «Трансформирование» - «Масштабирование». При уменьшении размеров качество букв сохраняется. Таким же способом увеличиваем текст максимально, качество так же остаётся хорошим, так как формулы работают при любом масштабе хорошо.

Растровое

Чтобы перевести векторное изображение в Фотошопе в растровое, уменьшим готовую картинку. Затем проходим на вкладку «Слои», там выбираем «Растрировать» - «Текст». У нас получились буквы, действительно состоящие из пикселей.

При увеличении растровой картинки /текста с помощью функций «Редактирование» - «Трансформирование» - «Масштабирование», качество сильно ухудшается. При повторениях процедуры качество каждый раз становится всё хуже - буквы становятся расплывчатыми.

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

Создание векторной графики

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

1. Откройте фотографию/иллюстрацию. Создайте новый слой.
2. Инструментом «Перо» обведите контуры одного из элементов (например, лица). Чтобы не мешал фон, поставьте меньшую прозрачность, до 20–30%. Выберите цвет заливки и контура.
3. Далее таким же образом прорисуйте контуры других деталей, залейте их нужным цветом.
4. Для сложного наложения цвета на лице модели можно использовать «Фильтры». Зайдите в «Галерею фильтров», сделайте там «Постеризацию» на несколько уровней, удобно на 3 уровня. Photoshop вам подскажет, как накладываются тени, вам остаётся обрисовать их контуры. Можно дополнительно обесцветить, сделать фото чёрно-белым, настроить резкость, чтобы чётче видеть уровни. При заливке выбирайте всё более светлый/тёмный цвет для слоёв. У вас образуются переходы цветов.

На прошлом уроке мы работали с растровыми слоями: , но есть и векторные слои в Photoshop .

Типичный пример векторного слоя в Photoshop — это тексты и фигуры.

Например, мы создадим какую нибудь круглую фигуру с помощью инструмента ЭЛЛИПС в Photoshop .

Что же у нас произошло? В палитре СЛОИ у нас автоматически появился слой — это типичный пример векторного слоя в Photoshop .

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

Щелкаем правой кнопкой мыши по вновь созданному слою и выбираем команду РАСТРИРОВАТЬ СЛОЙ . Всё, теперь это у нас обычный растровый круг.

Копирование слоя в новый документ Photoshop

Например, нам очень важен один слой и мы хотим его скопировать на новый документ . Как это сделать?!
Мы нажимаем сочетание клавиш Ctrl+A или заходим в МЕНЮ — ВЫДЕЛЕНИЕ — ВСЕ . Далее нажимаем сочетание клавиш Ctrl+С или заходим в МЕНЮ — РЕДАКТИРОВАНИЕ — СКОПИРОВАТЬ .

Теперь мы можем создать новый документ в Photoshop (Ctrl+N ). Новый документ у нас создастся именно таких размеров, каких у нас был скопированный слой. Далее нажимаем сочетание клавиш Ctrl+V или заходим в МЕНЮ — РЕДАКТИРОВАНИЕ — ВКЛЕИТЬ .

Важно помнить, что в сочетании клавиш, к примеру, Ctrl+A — используется английская раскладка на клавиатуре, т.е. буква A — английская! Иначе у вас ничего не получится.

Три способа дублирования слоя в Photoshop

Например, мы хотим продублировать зеленый прямоугольник. Заходим в палитру СЛОИ Photoshop , щелкаем правой кнопкой мыши по слою с зеленым прямоугольником и выбираем команду СОЗДАТЬ ДУБЛИКАТ СЛОЯ .

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

Также создать дубликат слоя в Photoshop можно, зайдя в МЕНЮ — СЛОЙ — СОЗДАТЬ ДУБЛИКАТ СЛОЯ .

А еще продублировать слой в Photoshop можно с помощью перетаскивания. Берем слой в палитре СЛОИ , который мы хотим продублировать и мышкой перетаскиваем его вниз на иконку СОЗДАТЬ НОВЫЙ СЛОЙ в Photoshop .