Дорогие любители программирования, дизайна и рисования!

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

Внесите вклад в развитие сайта. Перечислите любую (пусть даже незначительную) сумму на один из кошельков: webmoney R295964384890 yandex-деньги 41001797494168

Деньги пойдут в первую очередь на оплату хостинга, а также на написание уроков и развитие сайта. В примечании к платежу укажите Ваш email.

Как использовать векторные изображения в Photoshop | автор RFclipart

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

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

Как мы уже говорили, Adobe Photoshop создан для работы с растровыми объектами; векторы — это не то, что он может создавать или редактировать (по крайней мере, если мы говорим о стандартных инструментах редактирования векторов в конкретных программах, предназначенных для работы с ними). Как оказалось, функциональность Photoshop здесь несколько ограничена, но не полностью. Векторные изображения можно использовать в Photoshop, сохраняя их свойства и возможность изменять размер без потери качества.Как это сделать? Легко!

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

Откройте меню «Файл» и выберите «Открыть как смарт-объект» .

Выберите нужный файл EPS или AI и откройте его.

Установите разрешение.

При использовании этого метода файл EPS открывается как «Смарт-объект» ; но как им пользоваться, если он у вас есть в программе?

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

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

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

Есть другой способ открыть векторный файл в Photoshop, для этого выберите «Файл» — «Поместить» — выберите нужный файл и нажмите « Место » . Файл становится доступным как смарт-объект , как если бы вы выбрали «Открыть как смарт-объект» .

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

Cheers, RFclipart Блог Команда

Фигуры Photoshop — векторы, контуры и пиксели

Инструменты фигур

Как мы узнали из учебника Photoshop «Основы фигур и слоев фигур», различные инструменты Photoshop «Фигура» вложены вместе в одном месте на панели «Инструменты».По умолчанию инструмент «Прямоугольник» является видимым инструментом, но если вы щелкните значок инструмента и удерживайте кнопку мыши нажатой, появится всплывающее меню со списком других доступных инструментов «Форма». Я выберу Ellipse Tool из списка, но все, что мы собираемся изучить, применимо ко всем инструментам Shape, а не только к Ellipse Tool:

Выбор инструмента «Эллипс» во всплывающем меню «Инструменты формы».

Режимы рисования

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

В крайнем левом углу панели параметров находится набор из трех значков. Каждый значок представляет собой один из трех типов фигур, которые мы можем рисовать. Первый значок (тот, что слева) — это параметр Shape Layers , и это вариант, который мы выбираем, когда хотим рисовать векторные фигуры. Второй (средний) значок — это опция Paths , которую мы выбираем, когда хотим рисовать пути. Третий значок (тот, что справа) известен как параметр Fill Pixels . Мы выбираем его, когда хотим рисовать фигуры на основе пикселей:

Слева направо — параметры слоев формы, контуров и пикселей заливки.

Рисование слоев фигур (векторные фигуры)

Из трех типов режимов рисования тот, с которым мы почти всегда хотим работать, — это слои формы (векторные фигуры). Когда большинство людей думают о рисовании фигур, они не думают о путях или пикселях. Они думают о векторных фигурах, тех же типах, которые мы рисуем в Adobe Illustrator или большинстве других программ для рисования.

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

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

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

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

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

Щелкнув значок «Слои формы» на панели параметров.

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

Панель «Слои», показывающая единственный фоновый слой.

Я выберу цвет для своей векторной формы, щелкнув образец цвета на панели параметров:

Щелкните образец цвета, чтобы выбрать цвет для векторной формы.

Откроется палитра цветов Photoshop . Я выберу красный цвет в палитре цветов, затем нажму ОК, чтобы закрыть его:

Выбор цвета векторной фигуры из палитры цветов.

С инструментом «Эллипс» в руке, параметром «Слои формы», выбранным на панели параметров и красным цветом, выбранным в палитре цветов, я щелкаю внутри документа и вытягиваю эллиптическую форму, удерживая нажатой клавишу Shift при перетаскивании в превратить форму в идеальный круг:

Круглая форма, нарисованная с помощью инструмента «Эллипс».

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

Каждой новой векторной фигуре на панели «Слои» присваивается собственный слой «Форма».

Когда нарисована одна фигура, я нарисую вторую похожую фигуру немного правее первой:

Вторая векторная фигура теперь перекрывает оригинал.

Photoshop помещает эту вторую векторную фигуру на отдельный слой Shape (с именем Shape 2) над первым, вместе с собственным образцом цвета и миниатюрой векторной маски:

Две векторные фигуры, два слоя Shape.

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

Дважды щелкните образец цвета векторной фигуры, чтобы изменить его цвет.

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

Выбор синего цвета в качестве нового цвета второй формы.

Я нажму ОК, чтобы закрыть палитру цветов, и моя вторая форма мгновенно изменится с красной на синюю:

Вторая векторная фигура теперь синего цвета.

Образец цвета фигуры на ее слое Shape также обновляется до нового цвета:

Образец цвета векторной фигуры теперь отображает новый цвет.

Что касается векторных фигур, я могу очень легко выделить их в документе с помощью инструмента Path Selection Tool (также известного как черная стрелка). Я выберу Path Selection Tool на панели инструментов. Он находится в том же разделе панели инструментов, что и инструменты фигуры:

Выбор инструмента выбора пути.

Имея в руке инструмент «Выбор контура», если я нажимаю на красную фигуру в документе, Photoshop автоматически выбирает ее (вокруг текущей выбранной фигуры появляется тонкий контур):

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

Photoshop также выбирает для меня слой формы на панели «Слои» (выбранные слои выделены синим):

Когда в документе выделена векторная фигура, ее слой «Форма» выделяется на панели «Слои».

Я нажимаю на синюю фигуру в документе инструментом выбора контура, и теперь выделена синяя фигура:

Выделите синюю фигуру, щелкнув по ней инструментом Path Selection Tool.

И мы видим, что Photoshop также выбрал свой слой Shape:

Слой синей фигуры теперь выбран.

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

До этого момента Photoshop помещал каждую новую векторную фигуру, которую я рисую, на отдельный слой Shape, но тут все становится интереснее, когда мы объединяем две или более фигур на том же слое Shape.Я расскажу о комбинировании форм более подробно в другом уроке, но в качестве быстрого примера, выбрав мою вторую (синюю) форму, я нажму Ctrl + C (Win) / Command + C (Mac) на мою клавиатуру на скопируйте форму в буфер обмена. Затем, скопировав фигуру, я удалю слой фигуры, перетащив его в корзину Trash Bin в нижней части панели слоев:

Перетащите слой Shape 2 в корзину, чтобы удалить его.

В документе останется только исходная форма.Я нажимаю Ctrl + V (Win) / Command + V (Mac) на клавиатуре, чтобы вставить скопированную фигуру в исходную фигуру, и теперь обе фигуры объединяются в одну:

Две ранее отдельные фигуры теперь объединены в одну фигуру.

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

Две формы теперь используют один и тот же слой Shape.

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

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

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

Выбор «Вычесть из области формы».

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

Две фигуры с выбранной опцией «Вычесть из области фигуры».

Если я выберу опцию Intersect Shape Areas на панели параметров:

Выбор «Пересечение областей формы».

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

Фигуры с выбранным параметром «Пересечение областей фигур».

И если я выберу Исключить перекрывающиеся области формы :

Выбор «Исключить перекрывающиеся области формы».

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

Фигуры в режиме «Исключить перекрывающиеся области фигур».

Когда вторая фигура (фигура справа) все еще выбрана, если я решу, что она мне больше не нужна, я могу удалить ее, нажав Backspace (Win) / Delete (Mac) на клавиатуре, что удаляет его из слоя Shape и оставляет меня там, где я начал, только с моей исходной круглой формой:

Вторая форма была удалена, осталась только исходная форма.

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

Выбор инструмента прямого выбора.

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

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

Щелкните и перетащите любую из узловых точек, чтобы изменить форму.

Я отпущу кнопку мыши, чтобы завершить редактирование:

Photoshop заполняет добавленную область цветом, когда я отпускаю кнопку мыши.

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

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

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

Форма теперь сильно отличается от первоначальной.

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

Плагин шорткодов, действий и фильтров: ошибка в шорткоде [ ads-basics-middle ]

Пути рисования

Прежде чем мы переключимся на опцию Paths на панели параметров, давайте сделаем шаг назад и нарисуем еще одну векторную фигуру, чтобы мы могли точно следить за тем, что происходит, когда мы ее рисуем.Я буду использовать тот же инструмент Ellipse Tool, который я выбрал ранее, и у меня все еще выбран параметр Shape Layers на панели параметров. Я удалю свою круглую форму из документа, поэтому мы снова начнем с белого фонового слоя:

Начнем с фонового слоя.

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

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

Только когда я отпускаю кнопку мыши, Photoshop завершает фигуру, преобразуя контур (путь) в векторную фигуру и заполняя ее цветом:

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

Если мы посмотрим на мою панель «Слои», то увидим знакомый слой «Форма» с его образцом цвета и миниатюрой векторной маски, сообщающий нам, что путь теперь является векторной формой:

Слой «Форма» появляется на панели «Слои», когда Photoshop преобразует исходный контур в векторную фигуру.

Я удалю слой формы с панели слоев, так что мы снова начнем с белого фона в моем документе, и на этот раз я выберу опцию Paths на панели параметров:

Выбор опции «Пути».

Выбрав параметр «Контуры», я снова щелкну инструментом «Эллипс» внутри документа, чтобы установить начальную точку для моей формы, затем, удерживая кнопку мыши нажатой, перетащу по диагонали, чтобы нарисовать остальную часть. Как и раньше, когда у меня был выбран параметр Shape Layers, Photoshop отображает только начальный контур контура того, как будет выглядеть форма:

Photoshop снова отображает только начальный контур контура фигуры, когда я ее рисую.

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

Если выбран параметр «Контуры», Photoshop рисует только контур контура фигуры, не более того.

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

В отличие от слоев фигур, Photoshop не добавляет новые слои, когда мы рисуем фигуры как контуры.

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

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

Откройте панель «Пути», щелкнув вкладку с ее названием в верхней части группы панелей.

Имя «Рабочий путь» означает, что путь является временным, но мы можем сохранить его как часть документа, если нам нужно, просто переименовав его. Чтобы переименовать путь, дважды щелкните его имя на панели «Контуры».Photoshop откроет диалоговое окно Save Path с просьбой ввести новое имя. Вы можете просто принять новое имя по умолчанию, если хотите, или ввести другое имя. Назову свой «Мой эллиптический путь»:

Переименование временного рабочего пути.

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

Теперь путь сохранен как часть документа.

Пути редактируются так же, как и слои-фигуры (поскольку слои-фигуры на самом деле представляют собой просто контуры, заполненные цветом).Мы можем выбрать сразу весь путь с помощью Path Selection Tool (черная стрелка), или мы можем отредактировать его форму, щелкнув по нему с помощью Direct Selection Tool (белая стрелка), затем щелкнув и перетащив любой из точки привязки или указатели направления, как мы видели ранее:

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

Наиболее распространенное использование контуров — преобразование их в контуры выделения, что мы можем сделать, удерживая клавишу Ctrl (Win) / Command (Mac) на клавиатуре и щелкнув миниатюру контура в Пути панель:

Удерживая Ctrl (Win) / Command (Mac), щелкните миниатюру пути.

Photoshop мгновенно преобразует контур в выделение:

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

Преобразование контуров в слои формы

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

Здесь я нарисовал круговой путь, тогда как то, что я хотел нарисовать, было слоем формы:

Круговой контур, нарисованный с помощью инструмента «Эллипс», установленного в режиме рисования контура.

Конечно, я мог бы просто отменить шаг, выбрать параметр «Слои формы» на панели параметров и затем перерисовать фигуру, но зачем это делать, если я могу легко преобразовать путь в слой формы. Все, что мне нужно сделать, это щелкнуть значок New Fill или Adjustment Layer в нижней части панели Layers:

Щелкните значок «Новая заливка или корректирующий слой».

Затем я выберу слой заливки Solid Color из появившегося списка:

Выберите «Сплошной цвет» вверху списка.

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

Выберите цвет формы в палитре цветов.

Я нажимаю ОК, чтобы закрыть палитру цветов, и мой путь мгновенно заполняется выбранным цветом, как если бы я нарисовал его как слой формы:

Теперь путь залит цветом.

На самом деле, если мы посмотрим на панель «Слои», мы увидим, что теперь у меня есть нечто похожее на слой «Форма», в комплекте с образцом цвета и эскизом векторной маски. Технически это слой заливки сплошным цветом (поэтому Photoshop назвал слой «Цветовая заливка 1», а не «Форма 1»), но поскольку у меня был активный контур, когда я его добавил, Photoshop преобразовал контур в векторную маску и создал то, что во всех отношениях является слоем формы:

Путь успешно преобразован в слой формы.

Далее мы рассмотрим последний из трех режимов рисования в Photoshop — пикселей заливки — и их сравнение со слоями формы при изменении их размера!

Рисование фигур пикселей (пиксели заливки)

Третий тип режима рисования в Photoshop — Fill Pixels , который позволяет рисовать фигуры на основе пикселей. Я выберу опцию Fill Pixels на панели параметров:

Выбор режима рисования Fill Pixels.

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

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

Щелкнув значок «Новый слой».

Photoshop добавляет новый пустой слой с именем Layer 1 над моим фоновым слоем:

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

Также, в отличие от слоев Shape, которые позволяют легко изменить цвет векторной формы, когда мы захотим, изменить цвет пиксельной формы не так просто. Photoshop будет использовать ваш текущий цвет переднего плана в качестве цвета формы пикселя, поэтому вам нужно выбрать правильный цвет, прежде чем рисовать его. Чтобы изменить цвет переднего плана, щелкните его образец цвета в нижней части панели инструментов. Это образец в верхнем левом углу (нижний правый образец — это цвет фона):

Щелкните образец цвета переднего плана.

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

Выберите новый цвет переднего плана в палитре цветов.

Выбрав параметр «Заливка пикселей» на панели параметров, фиолетовый установлен в качестве цвета переднего плана, а на панели «Слои» выбран слой 1, я щелкну внутри документа с помощью инструмента «Эллипс», как делал раньше, и перетащил моя форма. Опять же, как и при рисовании слоев и контуров фигур, все, что мы видим вначале, когда рисуем пиксельную форму, — это начальный контур контура того, как эта форма будет выглядеть:

Рисование фигуры «Пиксельная заливка» с помощью инструмента «Эллипс».

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

Форма пикселя очень похожа на форму вектора.

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

Миниатюра предварительного просмотра для слоя 1 показывает форму пикселя, которую нелегко редактировать, в отличие от слоя Shape.

Однако самая большая проблема с фигурами на основе пикселей и самое большое преимущество слоев формы над ними заключается в том, что формы пикселей не очень масштабируемы, особенно когда нам нужно сделать их больше, чем их исходный размер, тогда как слои фигур могут быть масштабируется сколь угодно большим без потери качества изображения. Чтобы проиллюстрировать проблему с фигурами пикселей, вот две, казалось бы, идентичные фигуры, которые я нарисовал с помощью инструмента Ellipse Tool. Хотя в настоящий момент они выглядят одинаково, фигура слева представляет собой векторную фигуру, а фигура справа — фигуру в пикселях:

Векторная фигура слева и пиксельная фигура справа.

Быстрый взгляд на мою панель «Слои» показывает векторную форму на слое «Форма» («Форма 1») и форму пикселя на слое 1:

Панель «Слои», показывающая векторную форму и форму пикселя.

Выбрав векторную фигуру, я нажимаю Ctrl + T (Win) / Command + T (Mac) на клавиатуре, чтобы вызвать ограничивающую рамку Free Transform и ручки вокруг формы:

Окно «Свободное преобразование» и маркеры появляются вокруг векторной формы слева.

Затем я уменьшу размер векторной фигуры, установив для параметров Ширина и Высота на панели параметров значение 10% :

Масштабирование векторной формы до 10% от исходного размера.

Я нажимаю Enter (Win) / Return (Mac) на моей клавиатуре, чтобы принять изменение и выйти из Free Transform, и теперь векторная фигура слева выглядит намного меньше:

Фигуры после уменьшения векторной формы.

Я сделаю то же самое с формой пикселя справа, сначала выбрав Layer 1 на панели Layers, затем нажав Ctrl + T (Win) / Command + T (Mac), чтобы получить доступ к команде Free Transform и изменив ширину и высоту фигуры пикселя на 10% на панели параметров. Я нажму Enter (Win) / Return (Mac), чтобы принять изменение и выйти из Free Transform, и теперь обе формы были уменьшены в размере. Однако на данный момент они все еще выглядят примерно так же:

Форма вектора и пикселя по-прежнему выглядят очень похожими после уменьшения их размера.

Но посмотрите, что происходит, когда я увеличиваю их. Я начну с векторной формы слева, нажав Ctrl + T (Win) / Command + T (Mac), чтобы получить доступ к Free Transform, затем масштабирую его до исходного размера, установив ширину и высоту в параметрах. Бар на 1000%:

Масштабирование векторной формы вверх до 1000% от ее размера.

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

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

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

И победитель…. Формируйте слои!

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

векторных инструментов в Photoshop и Ilustrator

Быстрое редактирование цветов с помощью векторных изображений Photoshop

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

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

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

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

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

Убедитесь, что в параметрах инструмента «Перо» в верхней части экрана выбран параметр «Слои формы».

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

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

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

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

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

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

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

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

Затем в верхней части экрана в параметрах инструмента «Перо» убедитесь, что выделено «Добавить в область фигуры».

Теперь создайте новую форму с помощью Pen Tool; обратите внимание, что он появляется на том же слое, даже если они разделены расстоянием.

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

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

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

Посмотрите на один из ваших слоев векторных фигур справа.Рядом с цветным квадратом эскиза вы должны увидеть белый силуэт в сером поле. Это представляет собой контур вашей векторной формы. Наведите указатель мыши на это серое поле и удерживайте кнопку Ctrl. Курсор должен немного измениться — над белым значком руки появится пунктирный квадрат.

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

Создайте новый слой, нажав Shift + Ctrl + N или нажав кнопку «Новый слой» в правом нижнем углу экрана.Убедитесь, что этот новый слой находится ниже слоя контура, но выше векторных фигур, которые вы хотите закрасить.

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

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

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

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

Вам все еще интересно, как применить цвет к символам? Просто случайно существует курс, который исследует именно эту тему. Попробуйте!

Что нужно для рисования векторных иконок в Photoshop, Illustrator или Sketch? — Medialoot

Какой инструмент лучше подходит для создания иконок svg

Photoshop, Illustrator и Sketch — это инструменты, способные рисовать векторные иконки и экспортировать их в SVG. Но какой инструмент использовать для рисования векторных иконок?

Введение

Photoshop и SVG

Рисование фигур

Pathfinder Operations

Экспорт в SVG

Размер экспортированного файла SVG

Photoshop

• Параметры по умолчанию
• Результат: 39KB

Illustrator (Победитель)

• Профиль SVG SVG 1.1
• Параметр CSS: элементы стиля
• Результат: 21KB

Эскиз

• Параметры по умолчанию
• Результат: 56KB

Прочие факторы

Заключение

Как векторизовать логотип PNG с помощью Photoshop

В этом уроке я продемонстрирую, как векторизовать логотип PNG с помощью Photoshop, что на самом деле довольно просто и очень удобно для начинающих. Я должен предварять это, предупреждая, что Photoshop — не идеальный инструмент для создания векторов . В идеале вы должны использовать Illustrator, но если Photoshop — ваш единственный вариант, вам не повезло. Есть несовершенное (но приемлемое) решение.

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

Векторизация логотипа PNG с помощью Photoshop

Чтобы векторизовать логотип PNG с помощью Photoshop, вы должны создать контуры вокруг формы вашего логотипа, а затем экспортировать его как файл AI (Adobe Illustrator). Откройте файл PNG в Photoshop, и мы начнем.

Шаг 1. Создайте выделение вокруг вашего логотипа

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

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

Если этот метод не работает, потому что ваш PNG имеет сплошной цвет фона или потому что в границах вашего логотипа есть цвет заливки, я бы выполнил шаги в этом видео, чтобы создать ваш выбор по цвету, а затем перейду к шагам 2, 3 и 4.

Шаг 2: Преобразуйте выделенную область в рабочие пути

Теперь мы должны преобразовать наше выделение в пути.Для этого просто возьмите инструмент Rectangle , щелкните правой кнопкой мыши свой логотип на холсте и выберите Make Work Path .

Пути будут обозначены черными опорными точками, соединенными сплошной тонкой линией.

Шаг 3. Экспорт путей в файл Illustrator

Теперь все, что нам нужно сделать, это просто экспортировать наш документ в редактируемый векторный формат, используя функцию экспорта контуров в Illustrator в Photoshop. Просто перейдите в «Файл »> «Экспорт»> «Пути к Illustrator » и выберите, где вы хотите сохранить файл.

Это сгенерирует файл .ai (Adobe Illustrator), который можно открыть и отредактировать с помощью Illustrator (или бесплатной альтернативы, такой как Inkscape) или любой другой программы для работы с векторной графикой.

Шаг 4. Настройте файл в Illustrator по мере необходимости

Все, что вам нужно сделать, это открыть файл .ai в Illustrator и внести необходимые изменения. Нажмите Control + Y на клавиатуре, чтобы перейти в режим контура и увидеть, где именно находятся ваши векторные контуры.

Теперь вы можете заполнить свой логотип любыми цветами, сохранить / экспортировать его в желаемом векторном формате, и все готово! Вот как вы можете векторизовать логотип PNG с помощью Photoshop.

_{Logos By Nick LLC является участником программы Amazon Services LLC Associates, партнерской рекламной программы, предназначенной для предоставления сайтам средств для получения рекламных сборов за счет рекламы и ссылок на Amazon.com. Как партнер Amazon я зарабатываю на соответствующих покупках.Прочтите раскрытие информации об аффилированных лицах здесь.}

Простые способы добавления текстуры в векторную графику в Photoshop

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

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

01. Применение общей зернистости

Один из самых простых способов добавить общую тонкую текстуру к вашей работе — это применить к ней фильтр зернистости пленки, который уберет резкую чистоту векторов. Начните с открытия векторного файла в Photoshop, просто перетащив Ai-файл на значок PS или скопировав и вставив элементы поперек.

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

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

02. Применение пользовательской общей грубой текстуры (i)

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

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

03. Применение пользовательской общей грубой текстуры (ii)

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

04. Применение текстур к отдельным элементам с использованием масок слоя (i)

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

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

05. Применение текстур к отдельным элементам с использованием масок слоя (ii)

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