Как перевести подпись в вектор
Перейти к содержимому

Как перевести подпись в вектор

  • автор:

Перевод из растрового изображения в векторное. Из jpg в cdr или из jpg в eps

Векторизация изображения -это перевод растрового изображения в векторный формат. Часто звучит что векторизация это » из jpg в cdr » непосредственно из-за форматов изображений.

Зачем нужна отрисовка (векторизация) логотипа, печати, штампа, (изображения)??

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

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

Вид отрисовки цена
простая печать по оттиску 1 круг текста от 50
логотип без мелких деталей от 150
сложная печать с защитой от 150
печать с гербом и защитой от 200

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

Теги: Из растра в вектор, сделать в векторе логотип, отрисовка печатей в векторе, отрисовка печатей по оттиску, заказать отрисовку из растра в иллюстратор, корел, перевести логотип а вектор, сделать из растра векторное изображение, заказать отрисовку в иллюстраторе

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

Весь ассортимент расположен на сайте в каталоге товаров. Представлены печати физическим лицам –предпринимателям (т.е ФОП), печати для организаций (ООО, ТОВ). Так же есть штампы и круглая печать для архитекторов, нотариусов, адвокатов, образцы для врачебных и медицинских учреждений и личная печать врача. Дизайнеры разработают любой макет по вашим пожеланиям, будь то печать по оттиску или штамп –подпись (называемое факсимиле). Для изготовления по новому законодательству можно оформлять заказ без документов. С 2011 года разрешение для изготовления печатей было отменено. Что бы сделать дубликат, нужно просто прислать оттиск на электронную почту, так же изготавливается и факсимиле без лишних вопросов и заморочек.

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

Изготавливаем и доставляем во все города и области Украины -Одесса, Харьков, Днепр, Запорожье, Киев, Херсон… в течение 1 дня. Работаем на рынке уже 12 лет, гарантируем что сотрудничество с нами только порадует вам качественным сервисом по изготовлению штемпельной продукции!

Как перевести картинку, логотип в вектор

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

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

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

1. Подготавливаем изображение в фотошопе

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

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

Берем слой с надписью (названием логотипа), выбираем в верхнем меню «Изображение» — «Коррекция» — «Уровни», либо нажимаем комбинацию клавишь «Ctrl + L» и в появившемся окне настроек выставляем ползунок выходных значений в крайнее левое положение.

Данное действие перекрасит изображение в черный цвет. После этого просто сохраняем получившуюся картинку в формате jpg («Файл» — «Экспортировать» — «Сохранить для web»). Таким образом необходимо поступить со всеми слоями логотипа, кроме надписи под логотипом. В итоге получаем набор изображений в формате jpg, как на картинке ниже, только каждый элемент должен быть отдельной картинкой.

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

2. Переводим изображения в вектор и собираем логотип

Открываем Adobe Illustrator и создаем холст размером, соответствующим сохраненным изображениям, в данном случае у меня получился размер 500×229 пикселей.

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

Далее в верхнем меню выбираем «Объект» — «Растрировать», при этом слой изображения должен быть выделен.

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

Теперь в верхнем меню выбираем «Объект» — «Разобрать» и в открывшемся окне ставим обе галочки, после чего нажимаем «Ок».

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

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

Переводим обычную картинку в вектор

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

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

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

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

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

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

Онлайн конвертер векторной графики

Сконвертируйте онлайн файлы векторной графики любого формата

Выберите файлы
Выберите файлы
Перетащите файлы сюда. 100 MB максимальный размер файла или Регистрация

Легко пользоваться

Добавьте нужный векторный файл с устройства, Dropbox, Google Диска или, вставив ссылку, нажмите кнопку «Конвертировать». Подождите немного и сохраните результат. Обычно процесс занимает одну-две минуты.

Преобразование в облаке

Convertio работает в нашем облаке, избавляя ваш компьютер или телефон от всей тяжелой работы.

Онлайн конвертер

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

Конфиденциальность гарантирована

Веб-сайт защищен с помощью шифрования SSL, что обеспечивает полную безопасность и конфиденциальность ваших исходных и результирующих векторных файлов. Узнать больше о безопасности.

Простой интерфейс

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

Поддерживает все платформы

Независимо от того, какое устройство вы используете, инструмент работает на любом из них — будь то Windows, Mac, Linux, Android или iPhone.

Ручная пропись: перевод в вектор

Final product image

Я помню, сколько проблем у меня было год назад с переводом прописи в вектор. У меня было хорошее понимание Pen Tool, но я понятия не имел, что есть мелкие приёмы, которые чудесным образом делают очертания букв плавными.

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

Пока что обратите внимание на три вещи:

Во-первых, в процессе используется работа, созданная мною в предыдущем уроке. Для вашей практики и опыта будет полезней работать на своём примере. Это лучший способ обучения! Я дам вам информацию, а вы примените её к своей надписи, чтобы у вас получилось оригинальное произведение!

Во-вторых, этот урок не о том, как пользоваться инструментом Pen Tool. Если вы не понимаете, как он работает, я предлагаю вам прочитать об этом до начала урока — это упростит задачу.

В-третьих, этот урок может показаться немного запутанным и затянутым, но я обещаю, что это ради учения! Я стараюсь поделиться с вами всем, что может помочь с работой в векторе. Короче говоря, это не будет лёгкой пробежкой. Будет начало и будет конец, но нам потребуется некоторое время, чтобы туда добраться!

Держите глаза и уши открытыми и мы создадим великие вещи, обещаю. Начинаем!

1. Приготовим необходимые инструменты

  • Компьютер—PC или Mac. Любой из них справится!
  • Adobe Illustrator
  • Исходный эскиз/скан надписи, которую вы переведёте в вектор
  • Ручка или карандаш

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

2. Нанесение крайних (extrema) точек

Прежде чем садиться за компьютер, сделаем перенос векторов вручную! На бумаге! Дикость, да? Я обещаю, что это даст вам гораздо большее понимание прекрасного инструмента Pen Tool.

Теперь, что значит «extrema»? Во-первых, это множественное число для extremum. Что в математике обычно означает максимум или минимум. В случае с надписью крайние точки контура буквы, который будет создан кривыми bezier с помощью ручек. Например, крайними точками буквы «О» будут северная и южная опорные точки, которые образуют кривую. Восточная и западная опорные точки позволяют распределять вес и ширину.

Посмотрите на эту окружность. Её форма создана равномерно четырьмя основными точками. Они и есть «extrema» буквы «O».

HandlingBezier_Circle_Construction

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

Шаг 1

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

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

HandlingBezier_Anchor_Point_Placement

Шаг 2

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

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

HandlingBezier_Rectangle_Technique

3. 0°, 45°, 90°: углы наклона ручек

Прежде, чем мы углубимся в этот раздел учебника, я хочу сказать, что 0 °, 45 ° и 90 ° не единственные значения углов отклонения ручек. Вам судить, насколько хорошо всё смотрится, угол может быть и 15 °, например.

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

Приступаем к работе!

HandlingBezier_The_Sketch

Шаг 2

Начнём обводить вектор надписи «The» по частям.

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

В целом, с поправками, здесь хватило четырёх опорных точек.

HandlingBezier_The_Stem_Vector

Шаг 3

Здесь всё немного запутывается. В этом конкретном примере я решил связать сочетание «Th» в единую форму. Каждая опорная точка сбалансирована и равномерно распределяет кривизну. Что касается того, откуда начать расставлять опорные точки, зависит от предпочтений. Форма буквы сама подскажет. Я пишу слева направо, поэтому начал с рисования петлевого соединения «Т» и закончил на стебле «h».

HandlingBezier_The_Th_Vector

Шаг 4

Затем я сформировал плечо «h» (второй отросток, если хотите). Каждый фрагмент этой надписи разбит на фигуры, поэтому вы можете вносить изменения в отдельные части.

HandlingBezier_The_Completed_Th_Vector

Шаг 5

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

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

Вот и получилось! Мы закончили «The». Не забудьте о привязке к крайним точкам, чтобы всё отшлифовать до блеска! Терпение — всему голова!

HandlingBezier_The_Completed_VectorHandlingBezier_The_Colored_Completed_Vector

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

HandlingBezier_Additional_The_Vector_ExampleHandlingBezier_Additional_The_Vector_ExampleHandlingBezier_Additional_The_Vector_Example

4. Дополнительные векторные подсказки и приёмы

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

В этом разделе урока я поделюсь приёмами по ускорению процесса. Для простоты возьму букву «O» или форму круга, чтобы продемонстрировать несколько трюков. Несмотря на то, что это простая форма, подсказки будут работать в любом случае.

Шаг 1

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

В примере с нижним gif показано, что я имею в виду под этим выражением. Конструкция «А» определённо некорректна. Вот отличный способ продемонстрировать технику кроссовера.

HandlingBezier_Crossover_TechniqueHandlingBezier_Crossover_TechniqueHandlingBezier_Crossover_Technique

Шаг 2

Инструменты Ellipse Tool и Rectangle Tool в Illustrator ваши лучшие друзья для определения правильной формы фигуры букв. Например, буква «O» состоит из двух эллипсов: один снаружи, другой внутри. Итак, если вы уложите два эллипса один в другой, они образуют букву «O» в течение нескольких секунд.

Для создания буквы «H» вы можете использовать инструмент Rectangle Tool. Каждый отросток и перекладина «H» были сформированы тремя отдельными прямоугольниками. Позже их можно поправить и объединить в одну форму.

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

HandlingBezier_Shape_Building_Complete

Шаг 3

В следующем примере я использовал инструмент Width Tool в Illustrator. Работа упрощается в разы. С помощью этого инструмента вы, фактически, распределяете ширину. В этом примере я хотел, чтобы левая и правая стороны штриха были .525in ширины, а верх и низ остались .125in. Равномерное распределение веса образовало красивую контрастную букву «O».

Как видно из примера, левый — это просто штрих, который был до того, как я применил инструмент Width Tool, а правый — после его применения.

Этот инструмент ускоряет векторную обработку определённых букв, особенно прописей. Не забывайте рисовать «strokes» и добавлять контраст буквенным формам с помощью инструмента Width Tool.

HandlingBezier_Width_Tool

Недостатком Width Tool является то, что при раздвигании он образует огромное количество лишних опорных точек, которые вам не нужны. Это видно по нижнему изображению. Все эти мелкие красные брызги — опорные точки!

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

HandlingBezier_Expanded_WidthTool

5. Последняя часть вектора

Хорошо, ребята, пришло время добить наш проект, поскольку мы узнали всё о том, как делается вектор! Продолжим урок с того места, где мы остановились, и закончим с New York City.

Шаг 1

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

HandlingBezier_NEW_Vector

Шаг 2

Закончив с «New», переходим к слову: «York». Повторите ту же процедуру обводки фигуры по частям. Вы видите россыпь опорных точек в пределах «K». Это потому, что каждую часть «K» я рисовал, как отдельную фигуру для возможности редактирования. То есть, стебель и две ноги нарисованы индивидуально, чтобы вместе сформировать «K».

Обратите внимание, чтобы всё перекрывалось для будущей заливки.

HandlingBezier_York_vector

Шаг 3

Последним сделаем вектор «City». Что делать, знаете: начинайте строить точки и тщательно поправляйте по своему вкусу. Каждую букву рисуем отдельно, чтобы было проще редактировать.

HandlingBezier_City_Vector

Шаг 4

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

HandlingBezier_Filled_Vector_NYC

Шаг 5

Когда вы уже подумали, что с вектором закончено, оказалось, что нет!

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

HandlingBezier_Filled_Vector_NYC_Edited

Шаг 6

Последний шаг! Здесь я добавил небольшие «вырезы» в формах букв. Похоже на вектор или что-то вроде этого? Надо снова разбить вещи на простые фигуры или штрихи. Я знал, что можно сделать простые линии с помощью инструмента Pen Tool, но взял «Variable Width Profile» и вырезал треугольники. Что я имею в виду, вы видите ниже.

HandlingBezier_Vector_NYC_NotchesHandlingBezier_VariableWidthToolHandlingBezier_Angular_VariableWidthTool

Заключение

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

New York City — законченный вектор после добавления большого количества дополнительных деталей. Если вам интересно, как создавать глубину, текстуру, цвета и т. д., то мой следующий урок точно для вас! Оставайтесь с нами ещё месяц — другой.

HandlingBezier_Finished_NYC_Vector

Я уверен, что к этому моменту работа с вектором стала для вас намного удобней и понятней, чем раньше. Мы прошли большой материал и настало время закрепить эти знания. Постоянно упражняйтесь и со временем станете ещё лучше, я обещаю! Так держать!

Как всегда, если у вас есть какие-либо вопросы или пожелания, пишите в комментариях и я смогу вам помочь. Удачи!

Дополнительные ресурсы

Если вам понадобится помощь с прописями, в Envato Studio есть отличная компания Lettering & Calligraphy Specialists, куда вы можете обратиться.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *