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

Создаем качественные векторные логотипы

Впервые опубликовано в журнале «Мир ПК», №9/02 Занимаясь коммерческим дизайном, нередко сталкиваешься с проблемой создания качественного векторного логотипа. Зачастую заказчик предоставляет логотипы в печатном виде или в виде растрового файла недостаточного качества, например gif-файла с сайта. Получить векторную версию такого логотипа можно либо путем обрисовки растрового файла в векторном редакторе вручную, либо с помощью векторизации. Но первый способ отнимает много времени, а векторизация файла низкого разрешения или отсканированного с печатной копии изображения без предварительной обработки дает совершенно неудовлетворительный результат. Делаем растр лучше Редактор Adobe Photoshop 6.0, пожалуй, наиболее мощное средство для работы с растровой графикой. Именно этой программой мы и воспользуемся для обработки исходного растрового файла. В качестве примера возьмем gif-файл с логотипом компании «Кодекс». Это файл с официального сайта компании (рис. 1).

Рис.1

Разрешение файла слишком низкое, чтобы его можно было сразу векторизовать. Но прежде чем увеличивать разрешение, придется проделать несколько подготовительных операций. Этот файл имеет прозрачный фон. При векторизации эффект прозрачности роли не играет, а в дальнейшей работе он будет только мешать. Поэтому слейте слои изображения, выбрав команду меню Layer>Flatten Image (рис. 2).

Рис.2

Это логотип имеет довольно простой формы (впрочем, как большинство логотипов), и в нем применен только один цвет. Вы ничего не потеряете, если преобразуете логотип в черно-белое изображение (bitmap). В таком виде удобнее производить его векторизацию. А готовый векторный логотип всегда можно покрасить. Для начала переведем логотип в градации серого (grayscale). Для этого выберите команду меню Image>Mode>Grayscale (рис. 3).

Рис.3

Теперь у вас есть изображение с белым фоном и серым логотипом вместо синего. Осталось сделать серые буквы черными. Выберите Image>Adjust>Curves или просто нажмите комбинацию клавиш Ctrl+M.

Рис.4

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

Рис.5

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

Рис.6

В открывшейся панели (рис. 6) установите флажки Constrain Proportions («Одинаковые изменения по ширине и высоте») и Resample Image («Проводить изменения дискретных размеров»). В поле Resample Image выберите Bicubic («Бикубическая интерполяция»). А в поле Height («Высота») задайте размер 600 пикселов — этого вполне хватит для качественной векторизации.

Рис.7

В итоге получится изображение достаточного разрешения, но с размытыми контурами и ступенчатыми краями букв (рис. 7). Чтобы убрать ступенчатые края, используем размытие по Гауссу. Укажите в меню Filter>Blur>Gaussian Blur.

Рис.8

На панели фильтра (рис. 8) надо подобрать такое минимально возможное значение параметра Radius («Радиус размытия»), при котором ступеньки края размываются и становятся незаметными.

Рис.9

Итак, мы получили изображение с краем без ступенек, но с размытыми контурами (рис. 9), которым необходимо придать четкость. Выберите команду меню Image>Adjust>Levels или просто нажмите комбинацию клавиш Ctrl+L.

Рис.10

Панель Levels (рис. 10) разделена на две части: Input Levels («Входные уровни») сверху и Output Levels («Выходные уровни») снизу. В нашем случае нужно будет работать только с входными уровнями. В верхней части панели расположена гистограмма, отражающая распределение пикселов с различной интенсивностью в изображении, и три движка, управляющих точками черного, белого и 50%-ного серого цвета. Подвинем черный и белый движки к центру гистограммы и подрегулируем движок 50%-ного серого для достижения наилучшего результата.

Рис.11

Края логотипа стали более четкими (рис. 11). Следующий шаг — конвертирование логотипа в черно-белое (bitmap) изображение, но прежде применим к файлу пороговое преобразование. Это даст больше возможностей для контроля над процессом конвертирования. Итак, укажите в меню Image>Adjust>Threshold.

Рис.12

На открывшейся панели Threshold (рис. 12) расположена уже знакомая гистограмма и движок (а также поле с числовым значением Threshold Level), указывающие порог преобразования. Нам нужно подобрать порог так, чтобы обеспечить устранение шумов на краях букв и максимальную передачу деталей (рис. 13).

Рис.13
Теперь выберите команду меню Image>Mode>Bitmap, и логотип преобразуется в черно-белое изображение.

Рис.14

Открывшаяся панель Bitmap (рис. 14) разделена на две части — Resolution («Разрешение») и Method («Метод преобразования»).

10 0 850 1

Спасибо, очень пригодилось.Использую во основном в работе. А рассказать как это делается, в кореле-трасе?

Создание логотипа

Узнайте, как создать простой, но яркий логотип, используя уникальные возможности Adobe Fresco и Adobe Photoshop.

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

Подготовьте эскиз логотипа и фигуры.

Используйте инструмент Пиксельная кисть > Эскиз > Карандаш для рисования эскиза логотипа. С помощью Fresco вы можете легко набросать эскиз своей задумки, без труда изменяя настройки карандаша, стирая и повторяя/отменяя операцию.

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

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

Отрисовка логотипа в Фотошопе

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

Начнем с логотипов попроще, отрисуем для начала старый логотип конторы ТЕЛЕ2, затем схватимся за Била Гейтса. Итак приступим.

Отрисовка логотипа TELE2 в вектор

Начнем с отрисовки простых векторных примитивов. Благо логотип практически весь из них и состоит. Подробнее об векторных примитивах можете прочитать в моей статье Векторные примитивы в Фотошопе.

Выберите инструмент Rectangle Tool;
Убедитесь, что в настройках Options выбраны опции Shape Layers и Snap to Pixels;
Подробнее об опции Snap to Pixels и всей панели настроек для вектора вы можете прочитать в моей статье Панель options для вектора в фотошопе;
Об опции Shape layers подробно изложено в статье Shape Layer, Path и Fill Pixels в Фотошопе.

Нарисуйте первый примитив
Выберите в панели опций иконку Add to Shape area (+)
Эта опция переведет векторный инструмент в режим добавления. Иначе говоря, при следующем попытке нарисовать фигуру, вы будете добавлять эту фигуру к имеющимся, а не создавать новую. Весь логотип будет находится на одной векторной маске, а не разбит на 100 слоев. Подробнее об этом читайте в моей статье Add, Subtract, Intersect и Exlude в Фотошопе
Продолжайте наносить фигуры.

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

Выберите инструмент Path Selection Tool и выделите кусочек буквы E;
Нажмите ALT и CTRL. Кликните мышкой по фигуре и перетяните её вниз;
Клавиша ALT скопирует фигуру, а клавиша SHIFT позволит перетянуть фигуру вниз по строгой вертикали.

Теперь инструментом Path Selection Tool выберите всю букву Е;
Скопируйте её на место второй буквы Е.

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

Нарисуйте каркас двойки;
Выберите инструмент окружности Ellipce Tool и нарисуйте круг поверх шапки;
В палитре слоев Layers понизьте прозрачность, что бы видеть логотип через ваш слой;
Выберите окружность инструментом Path Selection Tool, при необходимости измените размеры и формы окружности Edit > Free Thansform Path.

В панели настроек переключитесь с Add to Shape area (+) на Subtract from Shape area (-) Нам необходимо удалить лишнее;
Нарисуйте окружность в центре круга. При необходимости масштабируйте её Edit > Free Thansform Path;
Инструментом Rectangle отрежьте половину круга.

Выберите инструмент Direct Selection Tool;
Кликните по узловой точке на шапке двойке и поправьте её вручную. При необходимости исправьте направляющие.

Выберите инструмент Pen Tool;
В настройках вектора опять включите Add to Shape area (+);
Теперь аккуратно нарисуйте недостающую часть. Сделайте это как можно плавнее;
Подробнее об инструментах рисования и Pen Tool читайте в статье Инструменты рисования вектора в Фотошопе.

Отрисовка логотипа Microsoft в вектор

Для начала нарисуем ровный прямоугольник во всю высоту шрифта;

Нажмите Edit > Transform Path > Skew и наклоните прямоугольник так, чтобы он точно сошелся с ножкой буквы М;
Пользуясь описанными выше способами нарисуйте все простые прямоугольники в логотипе.

Пришло время буквы О. Нарисуйте окружность.

Изогните её через Edit > Transform Path > Skew

Переключитесь на Subtract from Shape area (-) и вырежьте внутри дырку. Проделайте с ней те же манипуляции.

Если у вас не получается нацепить окружность точь в точь, поправьте узлы инструментом Direct Selection Tool

Выберите инструмент Pen Tool;
Дорисуйте в ручную недостающие детали логотипа;

Теперь возьмемся за букву S. Эта буква состоит из двух овалов;
Нарисуйте первый овал;
Подправьте его направляющие и узелки инструментом Direct Selection Tool;
При необходимости трансформируйте овал Edit > Free Thansform Path.

Нарисуйте второй овал. Подправьте его при помощи Direct Selection Tool и Free Thansform Path

Выберите инструмент Pen Tool.
На панели настроек переключитесь на Subtract from Shape area (-)
Аккуратно нарисуйте следующую фигуру. С непривычки может не получаться сделать и гибкие контуры но с каждым разом будет выходить лучше.

Наконец, заключительный этап отрисовки логотипа.

И вот что у нас получилось.

Как логотип перевести в вектор в Фотошопе

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

Нет, нельзя. Увы, пока тенденции вектора в Фотошопе таковы, все что в этом направлении было сделано, осталось неизменно ещё 5 версий назад. С тех пор оно не трогалось, не изменялось и ничего нового в векторе не добавлялось. Вам нужны были векторные инструменты в фотошопе? Вот они, хотите больше? Что вообще вы забыли в Фотошопе, осваивайте Иллюстратор. Примерно такой ход мысли двигал разработчиками, внедрявшими самые простые векторные операции в Фотошоп. А теперь перейдем к делу. Перевод растра в вектор осуществляется через области выделения. Вначале мы создаем выделение, затем линии выделения переводим в векторные контуры, затем векторные контуры заливаем слоями заливки, создавая таким образом векторную маску. Для того что бы разобраться во всем этом не на уровне армейских команд — кликни сюда, кликни туда, стоит научиться работать с инструментами рисования вектора, понять как векторные контуры могут взаимодействовать друг с другом, и узнать как же создать векторную маску. Но не переживайте, вам не обязательно усаживаться за чтение до выходных, вы и так поймете как перевести растр в вектор в Фотошопе, если дочитаете статью до конца.

Выделение логотипа

Особо отмечу, чтобы перевод в вектор получился качественный, сама картинка должна быть большого размера. Это справедливо в случае трассировки в Иллюстраторе, а для Фотошопа это ещё важнее. Мое изображение имеет 1500 пикселей в ширину, когда мы закончим перевод в вектор, я покажу, как Фотошоп переводит маленький изображения и мы сравним результаты.

Выбирайте инструмент Magic Wand Tool
Настройте в опциях Tolerance 20 или 30.
Там же кликните по иконке Add to Selection. Подробно о их работе я писал в статье Add, Subtract, Intersect и Exlude в Фотошопе где речь шла об инструментах вектора, но в выделении эти опции работают так же.
При желании можете использовать быстрые клавиши. Зажатая клавиша SHIFT наделит Magic Wand Tool свойством Add to Selection, а на курсоре появится плюсик.

Мне честно говоря все равно как вы выделите логотип, хоть в ручную лассо, хоть через Color Range. Просто в данной ситуации, конкретно на этом изображении проще всего это сделать инструментом Magic Wand Tool.

Переводим выделение в векторный контур

Не переключайтесь с инструмента Magic Wand Tool.

Правой кнопкой мыши кликните по области выделения.
Из появившегося меню выберите Make Work Path.

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

На нижеприведенной иллюстрации я выбрал инструмент Path Selection Tool и выделил контур, что бы он был вам виден.

Сохранение контура в палитре Path

Эта операция не обязательна, но желательна.

Переключитесь на палитру Path. Если вы не можете её найти нажмите Window > Path
Кликните дважды по контуру в палитре.
В появившемся окне введите имя и нажмите ОК.

Создание векторной маски

Процесс создания векторной маски отлично описан в моей статье Векторная маска в фотошопе. Осуществим этот процесс быстро и без деталей. Убедитесь, что ваш конур выделен в палитре Path Выберите из меню Layer > New Fill Layer > Solid Color В появившемся окне выберите цвет и кликните ОК Вот и все. Точнее было бы все если бы это не был hronofag.ru Помните я говорил вам, что чем меньше изображение, тем хуже оно переведется. Готов поспорить на руках у вас какой-то грязный скан засунутый в Ворд, который заказчик требует перевести в вектор? Я угадал? При этом изображение пережато JPG сжатием, уменьшено, потом увеличено, затем опять уменьшено до размеров аватарки, и ещё на него пролили кетчуп. Можно ли качественно перевести в Фотошопе в вектор такую картинку? Для начала посмотрите на наш логотип. Не смотря на отличное разрешение, четкие края Фотошоп не сумел создать хорошие и ровные контуры. Иллюстратор делает это в 100 раз лучше, но статья не про иллюстратор. Как видите контуры не везде ровные, даже в прямоугольных частях логотипа. А окружности совсем косые.

Теперь я уменьшу изображение в 2 раза, затем еще в 2 раза и покажу вам результат перевода в вектор. Вот вам и наглядный пример, того как размер растрового изображения влияет на качество трассировки. И это при том что изображение весьма качественное не смотря на размер. Ну ка, уменьшу ка я качество. Сохраним картинку в JPG при наихудшем качестве. Переведем в вектор. Отличный результат, не хватает только кетчупа. В самый раз довольному заказчику, обработка под гранж или винтаж! И все же я слегка манипулирую правдой. Дело в том, что все это резонно для Иллюстратора, который создает вектор на основе картинки. Фотошоп не создает вектор на основе картинки, он создает контуры на основе выделения. Логично, чем качественнее и ровнее выделение, тем ровнее получатся кривые. И инструмент Волшебная палочка, которым мы выделяли эти области, уже не подойдет для выделения таких жутких изображений. Да, вы сумеете сделать качественные выделения, задействовать все инструменты выделения, сумеете даже увеличить их и создать на основе них более менее ровный контур, который все равно будет не идеальным. Идти таким путем просто потеря времени. Единственный рабочий вариант — отрисовать логотип с нуля в Фотошопе, о чем я и расскажу в следующей статье.