Как сделать векторный логотип в фотошопе

Обновлено: 03.07.2024

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

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

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

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

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

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

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

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

Шаг 2. Преобразование выделения в рабочие пути

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

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

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

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

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

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

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

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

Стань мастером Adobe Illustrator!

Хотите узнать больше о том, как работает Adobe Illustrator? Посмотрите мою серию объяснений для Illustrator – обширную коллекцию из более чем 100 видеороликов, в которых я рассказываю о каждом инструменте, функции и функции и объясняю, что это такое, как оно работает и почему оно полезно.

Одна мысль о « Как векторизовать логотип PNG с помощью Photoshop | Видеоурок»

У меня есть логотип, который я пытаюсь отредактировать, потому что линии на нем слишком маленькие и их слишком много для моей машины. Я попробовал то, что вы сказали, но у меня это не работает.
Это логотип Steven’s Engineering. Это оранжевый круг с множеством линий. Что я могу попробовать?

Оставить ответ Отменить ответ

Последние сообщения

Расслоение — отличный способ упорядочить элементы дизайна при работе со сложными векторными проектами с большим количеством объектов. Что делать, если вы работаете в Inkscape и уже создали.

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

Оставайтесь на связи

Присоединяйтесь к списку рассылки, чтобы получать уведомления о новых сообщениях и получать более 200 БЕСПЛАТНЫХ шаблонов дизайна!

Рекламные ссылки

сообщить об этом объявлении

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

Существует упрощенный процесс, созданный в Photoshop, который полезен для простых векторных иллюстраций и значков. Я использую его для скорости, хотя он полезен, если вы не уверены в инструменте и функциях пера. Создайте свою иллюстрацию в Photoshop с разрешением 240 dpi. Плоские цвета дают наилучшие результаты. Для значка я использую черный. Экспорт в формате jpg с максимальным качеством.Запустите это через приложение под названием Vector Magic, и вектор будет создан для вас (лучше, чем трассировка изображения в иллюстраторе). Вы можете выбить фон в приложении и открыть его в Illustrator для доработки. Пример персонажа чат-бота: bit.ly/2AG8HrV

5 ответов 5

TL;DR: Photoshop не может создавать настоящие векторные файлы, не зависящие от разрешения на 100 %.
*(см. приложение)

Это очень распространенное заблуждение.

Подумайте об этом как о машине. -- Можно ли ездить на Toyota Prius на четырех колесах? Конечно, вы можете! Будет ли он делать все то, что может Jeep Wrangler? Черт возьми нет. Есть причина, по которой вам нужно использовать полноприводный автомобиль для езды на 4 колесах, так же как и причина, которая вам нужна чтобы использовать векторное приложение для создания векторных файлов.

Независимо от того, как вы создаете файл и сохраняете его, Photoshop всегда сохраняет как векторную, так и растровую информацию. Файлы Photoshop всегда являются растровыми файлами, которые могут содержать или не содержать встроенные векторные данные. Они никогда не являются векторными файлами. *(См. приложение)

Настоящий векторный файл содержит нулевые растровые данные и на 100 % не зависит от разрешения. Это означает, что файл не связан каким-либо параметром PPI/DPI.

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

Такие приложения, как Illustrator, Inkscape, CorelDraw, Xara, Sketch и т. д., фактически могут создавать файлы, содержащие векторные данные только со 100-процентным разрешением, не зависящие от разрешения. Дело не в том, что «люди предпочитают» использовать векторное приложение. Это необходимо, если вы хотите получить настоящий векторный файл в конце.

Это не означает, что векторные инструменты в Photoshop в целом хуже, как правило, это не так. Хотя настоящие векторные приложения будут абсолютно более надежными в том, что касается создания векторных данных.

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

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

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

Для производственных целей эта разница может быть в значительной степени несущественной, если вы уже работаете с высоким значением ppi в Photoshop. Но пользователь должен знать, что простое использование векторных инструментов Photoshop и сохранение в формате EPS/PDF не приводит к созданию векторных файлов с использованием любой доступной в настоящее время версии Photoshop (CC2022 на момент написания этой статьи).

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

* Приложение: были некоторые комментарии относительно SVG из Photoshop. Можно экспортировать вектор SVG со 100%-ным разрешением из Photoshop, если конструкция файла правильная. Общая конструкция любого такого SVG, как правило, должна быть довольно рудиментарной и без каких-либо стилей слоя, фильтров, размытия и т. д. SVG работает только в том случае, если файлы настолько «базовы», насколько это возможно, содержат только плоские заливки/штрихи и не содержат сложных взаимодействий с фигурами или маскирования. Кроме того, может быть другим вопросом, является ли SVG подходящим форматом для любого конкретного метода воспроизведения. Однако, если вы хотите создать что-то вроде плоских, одноцветных, векторных значков, Photoshop может подойти, если при экспорте используется формат SVG.

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

Adobe Photoshop не является редактором векторных изображений. Adobe Illustrator умело справляется с этой задачей. Но что, если вы пользуетесь одним из базовых планов членства в Adobe Creative Cloud? Или у вас есть подписка только на Photoshop?

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

Как преобразовать растровое изображение в векторное

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

Чтобы преобразовать растровое изображение на основе пикселей в векторное изображение:

Выберите пиксели.
Преобразуйте их в пути.
Раскрасьте их и сохраните как векторное изображение.

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

Скриншоты взяты из Adobe Photoshop CC (21.2.0). Но вы должны быть в состоянии следовать этому простому руководству с большинством последних версий Photoshop.

1. Откройте растровое изображение в Photoshop

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

2. Сделайте выделение вокруг изображения

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

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

Перейдите в меню «Выделение» > «Выбрать и маскировать» > «Выбрать объект», и программа автоматически выберет наиболее заметный объект на фотографии.

Используйте ползунки Global Refinements для точной настройки краев выделения, если это необходимо, а затем выведите выделение на новый слой.

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

3. Создайте пороговый эффект

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

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

4. Используйте команду «Цветовой диапазон» для выбора тоновых областей

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

В этом уроке Photoshop мы хотим использовать команду «Цветовой диапазон», чтобы выбрать все белые и черные тональные области.

Выберите "Выделение" > "Цветовой диапазон".

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

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

5. Преобразуйте свой выбор в путь

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

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

Кроме того, установите значение допуска в появившемся маленьком поле.

6. Установите значение допуска для пути

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

Значение допуска определяет, насколько близко путь должен «прилипать» к контурам изображения. Чем ниже значение, тем ближе выбор следует за вашим путем. Более высокие значения уменьшат количество опорных точек и сделают путь более плавным. Эмпирическое правило: чем проще объект, тем выше допуск.

Но поэкспериментируйте с этим значением в зависимости от сложности вашего изображения.

7. Создайте новый слой сплошного цвета

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

Затем выберите в меню «Сплошной цвет». Вы можете выбрать любой цвет.

На этом шаге создается слой векторной формы поверх слоя Threshold.

Этот слой заливки сплошным цветом можно настроить на любой цвет по вашему выбору. На следующем шаге экспортируйте этот слой как изображение SVG.

8. Сохраните векторное изображение как файл SVG

Щелкните правой кнопкой мыши слой и выберите «Экспортировать как». Вы также можете сохранить векторное изображение, выбрав «Файл» > «Экспортировать как».

В диалоговом окне «Экспортировать как» выберите SVG в настройках файла и нажмите «Экспорт».

Теперь вы можете открыть векторный файл в Adobe Illustrator или любом другом редакторе векторных изображений.

Кроме того, вы также можете экспортировать векторные контуры из Photoshop в Illustrator. Нажмите «Файл» > «Экспорт» > «Пути к Illustrator». При этом путь заливки сплошным цветом экспортируется в Illustrator, если он у вас установлен.

Есть и другие способы векторизации изображения в Photoshop

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

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

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

Понравился ли вам этот совет? Если это так, загляните на наш канал YouTube на нашем родственном сайте Online Tech Tips. Мы охватываем Windows, Mac, программное обеспечение и приложения, а также предлагаем множество советов по устранению неполадок и обучающих видеороликов. Нажмите кнопку ниже, чтобы подписаться!

Создавайте векторные объекты для украшения открыток, плакатов, рекламы, баннеров, брендинга, наклеек, этикеток, постов в социальных сетях и других элементов дизайна.

Что такое векторный объект?

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

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

Рабочие процессы с векторными объектами

Самый простой способ создать векторный объект в Photoshop — использовать инструменты «Форма». Даже если вы не художник-график, с помощью этих инструментов вы сможете быстро создавать геометрические или нестандартные фигуры.
По мере развития ваших навыков попробуйте создавать собственные векторные объекты с нуля с помощью инструментов Photoshop Curvature и Pen.
Вы также можете импортировать векторные объекты из других источников, таких как Illustrator — специальное приложение Adobe для векторного рисования.

Исследуйте предварительно созданные пользовательские фигуры

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

Создание геометрических фигур

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

Читайте также: