{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

Как я векторизую картинки для микростоков (часть 1).

 Часть 2

Часть 3

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

Баннеры с акварельными орхидеями.

Я для микростоков сканирую картинки для нескольких целей:

1. оттрассировать акварель, гуашь, карандаш в вектор (трассировка от слова trace, то есть переведение растровой графики в векторную)
2. отвекторить черно-белую графику, скетчи, дудлы (doodle)
3. сделать разные пятна и потертости для фона
4. сделать сам фон.

Сначала я сканирую или фотографирую изображение. Иллюстрации, дудлы лучше отсканировать. Пятна или мятую бумагу для фона проще, для меня, сфотографировать. Пятна подойдут всякие разные: пролили чай, кофе? Фотографируем. Остались потертости от наждачки или от времени краска облупилась? Фотографируем. На земле набросаны мелкие камушки? Фотографируем!

Скан акварели. Теперь его нужно привести в приличный вид.

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

Пальтра Инфо в Фотошопе

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

Создание корректирующего слоя в фотошопе

Как я делаю фон чисто белым:

1. Создаю корректирующий слой Уровни или Кривые (ищите его в палитре Слои внизу) и сильно затемняю картинку. Тут вся грязи и вылезает.
2. Далее можно просто пройтись белой кистью (мягкой или жесткой), а можно взять инструмент осветлитель (dodge) и пройтись им. Части фона просто убрать лассо или другими выделениями и залить белым цветом.
3. Проверяем пипеткой в палитре инфо где цвет белый, а где нет. Дочищаем.
4. Удаляем корректирующий слой.

Далее открываем иллюстратор. Ниже вы видите орхидеи оттрассированные в Иллюстраторе CS5 и СС. Выводы делайте сами.

Отсканировано в Иллюстраторе СС

Сканирование в Иллюстраторе CS5

В  иллюстрациях выше: трассировка в 5 иллюстраторе с количеством цветов 255. и векторизация из иллюстратора СС, количество цветов 85%, то, что стоит по умолчанию (значение можно менять). Файл в cs5, естественно, больше, количество цветов потому что больше.

Настройки трассировки в Иллюстраторе CC

Настройки трассировки акварели в Иллюстраторе CS5

 Часть 2

Можно ли в фотошопе создать векторное изображение. Перевод из растра в вектор в фотошопе

Пока моя заметка о масках в Фотошопе не остыла, срочно хочу осветить вопрос перевода растра в вектор. Два дня назад, я зашел в свой хронофагский Google Analytic и что же я увидел. Оказывается некоторые попадают на мой сайт по запросу «растр в вектор», а между тем, на моем сайте нет ни одной толковой заметки на данную тему. Люди же мучают Google на перевод растра в вектор в Corel Draw, Illustrator и даже Adobe Photoshop . Начнем с Фотошопа.

Из растра в вектор. Зачем это нужно?

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

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

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

Перевод растра в вектор в Фотошопе

Что именно способен перевести в вектор Фотошоп? Что угодно, если вы заранее выделите этот объект инструментами группы Select . Фотошоп конвертирует в контур любое выделение. Об инструментах выделения можно прочесть в статье . Приведу рабочий пример. Много лет назад ко мне обратился очень непростой заказчик, затребовавший непростой сайт. Для сайта необходимо было выполнить различный арт, и я решил нарисовать его в фотошопе. В ходе рисования я перевел его в вектор, и сейчас я расскажу как. Вот одно из подобных изображений, которое я рисовал кистью с твердыми краями на планшете. Я обвел оригинального Витрувианского человека, видоизменил его и нарисовал свое, отличное от оригинала, лицо. Идея векторизировать арт пришла случайно. Но реализовав её, я получил возможность как угодно масштабировать человека. Более того, ранее рваные края и неровности после векторизации сгладились.

Находим изображение для трассирования

Я подыскал в Google Картинки бабочку. Её мы и переведем в вектор. Учтите, что чем больше изображение, тем ровнее получится наш векторный объект. Это справедливо и для Фотошопа и для Иллюстратора. Под большим изображением я понимаю картинку от 1000 пикселей в ширину и больше. Моя бабочка к примеру от 2000 пикселей.

Выделяем объект

Выберите из меню Tool самую обычную волшебную палочку Magic Wand Tool и кликните по белой области. Так мы создали область выделения, но выделить нужно бабочку.

Зайдите в Select > Inverse или кликните по рабочей области и из появившегося меню выберите Select Inverse . Смысл в том, что созданное выделение надо инвертировать чтобы выделить бабочку. Честно говоря мне совершенно все равно как вы будете создавать ваше выделение. Хоть вручную обводите лассо, это не имеет никакого значения.

Создаем векторный контур

У нас есть выделенная область, теперь конвертируем её в векторный контур path . Выберите любой инструмент выделения вроде Lasso Tool, Rectangular Marquee Tool или Magic Wand Tool . Кликните по области выделения правой кнопкой мыши и в появившемся меню выберите Make Work Path . В появившемся меню установите степень сглаживания Tolerance по вкусу. Зависимость простая. Чем выше цифра, тем выше сглаживание. Чем ниже цифра, тем ниже сглаживание. Высокое сглаживание означает более низкое количество векторных узелков и более неточное следование растровому контуру. В случае с моим Витрувианским человеком именно такого эффекта я и добивался.

Итак, в палитре Path у нас появился рабочий контур. Если у вас нет палитры Path откройте её Windows > Path Рабочая область палитры Path похожа на десктоп или временное пристанище. На ней могут появляться разные контуры, но если вы позаботитесь о последовательном сохранении, со временем они исчезнут. Сделайте двойной клик по контуру Work Path и сохраните контур отдельно. Контуры в области Path работают так же как слои в палитре Layers . Если контур выделен, значит он активен и с ним можно работать.

Инструменты для работы с контурами в фотошопе — Path Selection Tool и Direct Selection Tool . У нас есть контур, но нет объекта. Если вы читали серию моих заметок о векторе в фотошопе вы уже знаете, что вектор в фотошопе представлен в виде векторной маски для какого-то эффекта или графики. Еще вектор может присутствовать в виде умного слоя, ссылающегося на импортированный фаил Иллюстратора, но это оставим для другой заметки. Выделите контур инструментом Path Selection Tool или в палитре контуров Path . Нажмите Layer > New Fill Layer > Solid Color Мы создали слой заливки, которому сразу присваивается векторная маска в виде нашего контура.

Доработка векторного контура

Пользуясь материалами, которые я описал в статьях и усложним рисунок. Я взял инструмент Pen Tool , выделил маску слоя заливки. В настройках Pen Tool выставил Subtract и дорисовал некоторые элементы нашей бабочке. Вырезал узоры на крыльях, а ножки и усики сделал толще.

Создание произвольной фигуры Custom Shapes

Вы всегда можете сохранить полученный объект в произвольные фигуры Custom Shapes . Некоторое время назад я упоминал о том как это можно сделать в статье . Выделите слой с бабочкой и нажмите Edit > Define Custom Shape Наша бабочка появилась в фигурах инструмента Custom Shapes Tool .

А вот то, что у нас получилось в итоге:

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

Перевод из растра в вектор фотографии в фотошопе

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

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

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

Итого, вся фотография преобразована в векторные области. Последнюю белую область мы не будем преобразовывать в вектор. Просто нарисуйте большой белый квадрат инструментом Rectangle Tool и поместите его под все слои. После легкой чистки и доработки контуров фотография выглядит так, как на картинке ниже. И ещё раз, подобная работа не предназначена для Фотошопа и является скорее извращением. Но, это можно сделать, и в различных ситуациях подобные приемы могут пригодиться. Обработка фотографии заняла у меня 10 минут, так что подобная работа не отнимает массу времени. И помните, чем большего размера фотографию вы разложите таким образом на слои, тем лучше и эластичнее контур сможет обогнуть области выделения. Тем менее угловатой и грубой получится наш вектор в Фотошопе. Различные настройки Toleranse при создании контура тоже дадут разный результат. Удачных экспериментов!

Базовые векторные инструменты в Adobe Photoshop идентичны Illustrator-у. Но, отмечу, для рисования в чистом виде они не созданы. Почему? Во первых, для рисования в векторе есть отличные программы Illustrator или Corel Draw. Вот там присутствует весь необходимый для рисования функционал. Во вторых, скупость настроек в фотошопе для вектора. В Фотошопе имеются только инструменты рисования и некоторые примитивы. Что с одной стороны правильно. Вот отличная программа для растровой графики, а вот отличная программа для векторной. Да, в векторной бывает необходимо поработать с растром, а в растровой бывает нужен вектор. Так лучше связать их и продавать пакетом.

Из картинки видно — все контуры, из которых состоит фигура, остаются внутри слоя. Таким образом фигуру можно быстро и легко изменить. Хотя векторный Adobe Photoshop способен на куда большее. Например, данные эскизы для одного старого сайта я исполнял в векторе. Изображение я кистью с твердыми краями. Затем выделял слой и переводил выделение в контуры. Из контуров делал залитые слои с векторной маской. Таким образом я достигал отсутствующего в фотошопе сглаживания контура.

Инструмент Pen Tool

Первым у нас идет инструмент Pen Tool и его разновидности. Тот же самый набор можно найти в Illustrator-е. Это удобно при переходе из одной программы в другую, не надо переучиваться. Тем более что все векторные инструменты перекочевали в Photoshop прямо из Illustrator-а.

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

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

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

Понять в какой зависимости от чего строятся линии в зависимости от направляющих пожалуй самое базовое понимание векторной графики. На панельке настроек векторных инструментов у Pen Too l есть одна интересная настройка — Auto Add/Delete . Это фактически автоматизированные Add и Delete Ancho r Point Tools о которых речь пойдет дальше. Кликните по этой галочке и ваша кисть сможет прямо во время рисования добавлять точки на уже отрисованные контуры и удалять ненужные точки. Вы сможете делать это прямо во время рисования контура, а не после. И для этого не придется переключаться на бесполезные Add и Delete Ancho r Point Tools

Freeform Pen Tool

Если для работы с Pen Tool необходимо понять принципы построения векторных кривых, то Freeform Pen Tool — инструмент, свободный от всяких правил и принципов. Просто кликайте по нему и рисуйте контур, так как вы рисовали бы обычной кистью. Идеальный круг или праздник геометрических форм им конечно не изобразить, а вот кляксу вполне. Этот инструмент подойдет для создания коллекций фигур в индустриальном стиле. Рисовать кляксы им самое то. Ну а если мастерство рисования доведено до совершенства, то… думаю лучше использовать программу Illustrator, если конечно вы не из тех, кто для развлечения ваяет шедевры в MS Paint (:

У инструмента Freeform Pen Tool пожалуй есть ещё одна интересная настройка. В панели настроек Freeform Pen Tool есть галочка Magnetic. Это спрятанный аналог инструмента Magnetic Lasso Tool. Работает точно так же. Просто включите эту галочку. Подведите курсор к какому-то четко выраженному объекту, с высококонтрастной кромкой и начинайте обводить. Конечно, идеальной геометрии ждать от этого инструмента не нужно.

Add Anchor Point Tool и Delete Anchor Point Tool

Add Anchor Point Too l — тот инструмент добавляет на уже отрисованный контур дополнительные точки, для изменения или коррекции формы контура. Просто нарисуйте контур, затем переключитесь на этот инструмент и поставьте не хватающие узелки в нужных вам местах. Для чего это нужно? Ну может вам необходимо поставить побольше точек, что бы контур был больше похож на то что вам нужно.

Delete Anchor Point Tool — соответственно данный инструмент удаляет лишние точки векторной кривой. Область применения этого инструмента та же что и у Add Anchor Point Tool , только в случае уменьшения точек линия контура становится по понятным причинам более ровной и мягкой.

Convert Point Tool

Этот инструмент помогает в редактировании направляющих точки кривой. При нажатии на точку инструмент сбрасывает направляющие. Удерживая кнопку мыши, отводим мышку в сторону. Так мы изменяем формы и направление направляющих, против их первоначального значения. А если зацепить инструментом Convert Point Tool одну из направляющих, можно придать ей независимое направление.

И ещё раз. Вы захватываетесь инструментом Convert Point Tool , за точку. От такой близости у точки сбрасываются направляющие. Не отпуская кнопку мыши, отводите мышь в сторону, выстраивая новые направляющие. А при желании, можете захватить за одну из направляющих и настроить её в индивидуальном порядке. А теперь обсудим детали.

Выпадающее меню векторных инструментов

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

Delete Anchor Point

Все очень просто. Кликаете по непонравившейся точке и удаляете её. Мне так даже проще чем инструментом Delete Anchor Point Tool . Тем более если такая точка всего одна. Эта опция меню сменная. Сейчас там Delete Anchor Point, потому что я подвел мышку ровно к точке. Если кликнуть мышкой по любому месту контура Delete сменится на Add Anchor Point , то есть речь идет о добавлении новой точки на контур.

Create Vector Mask

Является шорткатом на опцию Layer > Vector Mask > Current Path Что делает эта опция? Создает векторную маску конечно. Сейчас я покажу как это делается. Поместите на палитру какое-нибудь фото. Я например выбрал фотографию своего попугая Чучи. Контур должен быть виден. Сбрасывать его нельзя. Поместите фото прямо под контур или контур под фото. Или нарисуйте новый контур именно так, как вам хочется. Теперь нажимаем на Create Vector Mask и получаем результат! Векторный контур превратился в векторную маску. А попугай Чуча в кружок!

Delete Vector Mask

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

Define Custom Shape

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

И найдите его по адресу инструмента Custom Shape Tool в меню настроек инструмента среди других зверюшек и стрелочек.

Make Selection — Эта опция из вектора создает выделение. Разберем поподробнее что предлагает нам меню.

Feather Radius — радиус размытия. Если вы свое выделение далее зальете, края будут рызмытыми. Чем больше значение тем больше размытие. Внимание на экран:

Anti-aliased — смягчает края. Без функции Anti-aliased заливка будет залита попиксельно. Функция Anti-aliased создает на краях заливки полутона.

Fill Path

Дальний родственник опции Edit > Fill . Но в отличии от последней имеет пару апгрейдов. У него есть идентичная графа Content , что в целом значит, чем заливать то будем? Есть графа Blending , отвечающая за режимы наложения. А так же важная галочка Preserve transparency . При выставлении этой галочки заливка учитывает прозрачные места и не заливает их.

Stroke Path

Подчеркивает выделение. Причем подчеркивает чем угодно. В меню Stroke Path можно выбрать любой инструмент, хоть резинку, хоть блендер, хоть кисть. Чаще всего конечно нужна кисть. Stroke Path пользуется настройками инструмента, которые выставленны в данный момент. Например если последний раз вы рисовали твердой кистью 10 px, то подчеркиваться контур будет именно ею. Опция Simulate Pressure симулирует давление.

Clipping Path

Разновидность маскирования в фотошопе и не только. Наиболее часто Clipping Path применяют при отделении заднего фона от объекта. Не поверите, но на западе существуют целые студии занимающиеся этой работой, а работники маскировщики называются — специалисты по маскированию. Вот уж специалисты так специалисты! По сути, Clippping Path крепит контур к растровому изображению. Нарисуйте, например, контур на семейной фотографии, или выделите контуром объект. Сохраните в формате PDF и откройте в Illustratore. Ваше изображение помещено внутрь контура, точно так же как при векторной маске. По правде говоря этот Clipping Path является для меня черным пятном. Загадочность Clipping Path заставила меня подробным образом изучить эту опцию, о чем я и написал в своей статье

Free Transform Path

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

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

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

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

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

• Выбирайте инструмент Magic Wand Tool

• Настройте в опциях Tolerance 20 или 30.

• Там же кликните по иконке Add to Selection. Подробно о их работе я писал в статье Add, Subtract, Intersect и Exlude в Фотошопе где речь шла об инструментах вектора, но в выделении эти опции работают так же.

Мне честно говоря все равно как вы выделите логотип, хоть в ручную лассо, хоть через 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 при наихудшем качестве.

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

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

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

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

1. С помощью инструментов выделения, выбираем лишь той элемент, который мы желаем перевести в векторный рисунок, и копируем его на новый слой, под названием «фигура». После чего создаем ещё один слой и полностью заливаем его белым цветом, этот слой можно назвать «фон». Теперь, слой «фон» перемещаем под слой «фигура» и объединяем их. Полученную картинку, называем «Основа». Копируем слой «Основа» дважды и называем их «Основа_1» и «Основа_2». Отключаем их видимость.

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

Вот мы и получили самый нормальный эффект.

3. Далее мы применяем к полученной картинке фильтр «Диффузия», чтобы убрать зубчатые края. Путь к включению фильтра: «Фильтр — Стилизация — Диффузия» (Filter-Stylize-Difuse). В открывшемся окне выбираем «Anisotropic».

4. Следующим шагом будет сглаживание краев, чтобы они стали более чёткими, для этого нажимаем «Изображение — Коррекция — Уровни» (Image-Adjustment-Levels). В открытом окне перемещаем левый и правый ползунок ближе к центру. Для того чтобы увидеть результат коррекции, лучше всего увеличить рисунок до 300% перед тем как открывать уровни.

5. Повторяем пункты 3 и 4 в той же очередности.

6. Отключаем видимость нашего основного слоя и включаем слой «Основа_1». Выполняем действие «Изображение — Коррекция — Изогелия» (Image-Adjustment-Threshold). Параметр устанавливаем на уровне 138.

7. Проделываем с этим слоем операции указанные в пункте 3,4 и 5.

8. Создаем новый слой и заливаем его черным цветом. Называем его «Фон». Устанавливаем его ниже слоя «Основа». В слое «Основа_1» меняем режим на «Разница» (Difference).

Вот что у нас получается:

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

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

Компьютерная графика — очень широкое понятие. Кому-то при упоминании этого термина на ум придут трехмерные шедевры от студий Pixar и Dreamworks, другие подумают про цифровую фотографию, третьи решат, что речь идет об оформлении компьютерных игр. Но также обязательно найдется немало и тех, кто свяжет это словосочетание с векторной графикой. Несмотря на необычайную популярность векторной графики, многие пользователи совершенно незнакомы с особенностью векторных рисунков. Что же кроется за словами «векторная графика» и почему она так востребована?

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

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

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

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

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

⇡ «Рисунки Google» — самый простой векторный редактор, который всегда под рукой

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

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

⇡ Autotracer — бесплатный конвертер растровых картинок в вектор

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

Соответствующие средства есть практически в любом векторном редакторе, но векторизация может быть еще более простой благодаря онлайновым инструментам. Можно найти не один веб-сервис, который предлагает подобные услуги. Например, очень удобен в работе бесплатный ресурс Autotracer . С его помощью можно преобразовать файлы PNG, BMP, JPEG и GIF в векторный формат и сохранить в формат SVG, EPS, PDF, DXF.

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

⇡ Vector Paint — векторный редактор в Chrome, который может работать и без браузера

Vector Paint — это веб-приложение для Google Chrome, созданное на HTML5, однако работать оно может и без браузера. Оно относится к новому поколению приложений, представленных в начале сентября нынешнего года. Запускать такие приложения можно прямо с рабочего стола — открытый браузер, равно как и доступ к Интернету, для их использования не нужны.

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

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

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

Готовые проекты сохраняются в формате SVG, а также могут быть экспортированы в PNG и JPEG.

⇡ SVG-Edit — онлайновый векторный редактор

SVG-Edit — это векторный редактор, созданный на основе JavaScript, который может работать в любом браузере. Его можно использовать в виде онлайнового сервиса (в этом случае для доступа используется демоадрес), а также как веб-приложение (в этом случае нужно загрузить архив с файлами SVG-Edit, распаковать его и запустить файл приложения в любом браузере).

SVG-Edit полноценно работает с файлами SVG, давая возможность как сохранять проекты в этом формате, так и открывать такие файлы и вносить в них изменения. Кроме этого, файл SVG может быть импортирован в проект как отдельный элемент.

Для создания элементов векторной графики в SVG-Edit могут использоваться ломаные линии, прямоугольники, квадраты, эллипсы, круги, многоугольники, контуры, текст. Есть возможность выполнять заливку элементов цветом, а также использовать градиенты, в том числе и радиальные. Поддерживается работа со слоями, показ сетки и отображение элементов в виде каркаса. Есть средства для изменения расположения элементов (выше, ниже), для быстрого клонирования выделенных векторных форм, для их группировки. Многие команды доступны из контекстного меню (как в обычных редакторах для рабочего стола). Достаточно много внимания уделено инструментам для выравнивания на холсте: можно ровнять элементы по отношению к выделенным объектам, к самому большому или к самому маленькому объекту.

В программе большая библиотека готовых форм (та же самая, которая используется в Vector Paint), но, кроме этого, реализован доступ к огромной бесплатной библиотеке элементов векторной графики IAN Image Library. Для работы с ней потребуется регистрация, но затем можно прямо из редактора просматривать коллекции образцов векторной графики и сразу же добавлять их в текущий или в новый проект.

⇡ Chittram — простой онлайновый редактор

Chittram — это еще один векторный редактор, который может работать как веб-приложение. В отличие от SVG-Edit, он реализован как полноценный онлайновый сервис с возможностью сохранения проектов на сервере. Для просмотра и редактирования созданных ранее проектов используется учетная запись Google.

Возможности Chittram скромнее, чем у SVG-Edit, зато этот редактор наверняка покажется более дружелюбным для начинающих пользователей. В приложении есть возможность использовать растровое изображение как подложку, но выбрать картинку с жесткого диска нельзя — только указать ссылку на файл. Импорта локальных векторных изображений тоже нет, зато можно добавлять в проект файлы из галереи пользователей веб-сервиса и редактировать их. На сайте реализован поиск в галерее по ключевым словам, а также по меткам.

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

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

⇡ Inkscape — полноценная альтернатива коммерческим пакетам

Векторный редактор Inkscape имеет массу достоинств. Во-первых, он кроссплатформенный (может запускаться в среде Windows, Linux, Mac). Во-вторых, он поддерживает большое число популярных векторных форматов, в числе которых SVG, SVGZ, EMF, DXF, EPS, PostScript, WMF и другие.

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

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

⇡ ZebraTRACE — бесплатное создание гильошей

Любые денежные банкноты, а также документы государственной важности (дипломы, грамоты, удостоверения и так далее) легко узнать с первого взгляда. Эту «узнаваемость» дизайну документа придают тонкие повторяющиеся узоры, которые проходят по всему основному рисунку. Такие линии называются гильошем.

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

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

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

⇡ Заключение

Бесплатные инструменты для работы с векторной графикой встречаются не так часто, как того хотелось бы, тем не менее они есть. Радует и то, что с развитием стандарта HTML5 и прочих веб-технологий стало возможным использование браузера в качестве редактора векторной графики — раньше о таком можно было только мечтать. Для несложных проектов подобные инструменты экономят массу времени, а если взять на вооружение Inkscape, вообще можно отказаться от приобретения векторного редактора для нужд дизайна.

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

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

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

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

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

• Выбирайте инструмент Magic Wand Tool

• Настройте в опциях Tolerance 20 или 30.

• Там же кликните по иконке Add to Selection. Подробно о их работе я писал в статье Add, Subtract, Intersect и Exlude в Фотошопе где речь шла об инструментах вектора, но в выделении эти опции работают так же.

Мне честно говоря все равно как вы выделите логотип, хоть в ручную лассо, хоть через 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 при наихудшем качестве.

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

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

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

Для чего используется перевод из растрового объекта в контурный

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

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

Как из растрового изображения сделать векторное?

Для этого в «Фотошопе» необходимо выполнить определенный порядок действий. Для начала необходимо выбрать объект при помощи набора инструментов Select. Программа производит конвертацию любого выбранного и выделенного объекта в контур.

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

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

Картинки для трассирования

Для наглядного примера берется легкое изображение — бабочка. При переводе необходимо учитывать, что чем крупнее картинка, тем лучше выйдет векторное изображение. Данное правило действует в «Фотошопе», аналогично и в «Иллюстраторе». Большие изображение — те, что больше 1000 пикселей.

Выделение объекта

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

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

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

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

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

После того как вы выбрали область, произведите ее конвертацию в векторный контур. Для этого можно воспользоваться инструментами выделения, такими как Lasso Tool, Rectangular Marquee Tool, Magic Wand Tool и др. Дальше правой клавишей мыши нажмите на область выделения, после чего появится меню, в котором следует выбрать Make Work Path. Следом будет меню, в котором устанавливается степень сглаживания Tolerance. Чем больше сглаживание, тем меньше количество векторных узлов и менее точное повторение растрового контура.

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

Затем выделите контур при помощи Path Selection Tool или палитры Path. Необходимо нажать кнопку Layer, после чего в открывшейся вкладке выбрать New Fill Layer, а уже в ней Solid Color. Таким образом вы создадите слой заливки, которому сразу присваивается векторная маска в виде вашего контура.

Окончание работы

Для доработки изображения можно использовать Pen Tool — для выделения маски слоя заливки. Затем — настроить Pen Tool, а именно выставить Subtract. При помощи этого можно нарисовать на изображении дополнительные элементы и узоры.

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

Финальный результат

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

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

Шаг 1

Начнем с создания фона. Нарисуем форму с помощью инструмента выделения () (в режиме Shape Layers (Слой Фигура)). Настройки — (Непрозрачность заливки) = 0% . Теперь используем наложение градиента: ( (Стиль слоя — Наложение градиента)) для заполнения созданной фигуры. Все настройки по умолчанию, вам только нужно менять угол (я буду указывать степень) и градиент. Добавляем Stroke (Обводку) ( (Стиль слоя — Обводка)). Используем все настройки по умолчанию, кроме ширины в 1 рх и цвета.

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

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

1. С помощью инструментов выделения, выбираем лишь той элемент, который мы желаем перевести в векторный рисунок, и копируем его на новый слой, под названием «фигура». После чего создаем ещё один слой и полностью заливаем его белым цветом, этот слой можно назвать «фон». Теперь, слой «фон» перемещаем под слой «фигура» и объединяем их. Полученную картинку, называем «Основа». Копируем слой «Основа» дважды и называем их «Основа_1» и «Основа_2». Отключаем их видимость.

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

Вот мы и получили самый нормальный эффект.

3. Далее мы применяем к полученной картинке фильтр «Диффузия», чтобы убрать зубчатые края. Путь к включению фильтра: «Фильтр — Стилизация — Диффузия» (Filter-Stylize-Difuse). В открывшемся окне выбираем «Anisotropic».

4. Следующим шагом будет сглаживание краев, чтобы они стали более чёткими, для этого нажимаем «Изображение — Коррекция — Уровни» (Image-Adjustment-Levels). В открытом окне перемещаем левый и правый ползунок ближе к центру. Для того чтобы увидеть результат коррекции, лучше всего увеличить рисунок до 300% перед тем как открывать уровни.

5. Повторяем пункты 3 и 4 в той же очередности.

6. Отключаем видимость нашего основного слоя и включаем слой «Основа_1». Выполняем действие «Изображение — Коррекция — Изогелия» (Image-Adjustment-Threshold). Параметр устанавливаем на уровне 138.

7. Проделываем с этим слоем операции указанные в пункте 3,4 и 5.

8. Создаем новый слой и заливаем его черным цветом. Называем его «Фон». Устанавливаем его ниже слоя «Основа». В слое «Основа_1» меняем режим на «Разница» (Difference).

Вот что у нас получается:

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

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

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

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

Итак, поехали:

В этом уроке объясняется, каким образом создавать векторные иллюстрации используя Adobe Illustrator. Приводится объяснение ключевых параметров и инструментов, которое дополняется советами экспертов.

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

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

Данный видео-туториал является действительно ценным ресурсом, который объясняет как создавать векторную графику в Illustrator и какую роль в этом процессе играет рисование.

От использования точек кривой Безье до обводки, заливки и придания векторной графике более естественного вида — это лишь некоторые секреты Illustrator из урока, которые существенно пополнят арсенал новичка.

Узнайте, как создавать простые органические формы в Illustrator с этим простым для восприятия руководством от Верле Питерс (Veerle Pieters), графического и веб-дизайнера.

7. Добавление текстуры для векторных иллюстраций

Добавление текстуры — это отличный способ сделать Вашу векторную графику более выразительной, подчеркнуть ее перспективу. В этом очень доступном видео эксперт Illustrator Александра Сесилио (Alexandra Cecilio) демонстрирует как это сделать.

Этот туториал от Андрея Мариуса (Andrei Marius) поможет Вам создать векторный линейный график. Пошагово: начиная с простой сетки до направляющих линий, используя только панель Appearance (один из мощнейших инструментов в Adobe Illustrator) с добавлением некоторых простых фрагментов текста и тонкой штриховки.

Создание лиц

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

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

Еще один замечательный туториал по векторной графике. Руслан Хасанов показывает как манипулировать работой векторных линий и градиентами, чтобы придать работе динамичность.

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

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

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

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

Джонатан Болл (Jonathan Ball), основатель Poked Studio, обьясняет как с помощью Illustrator основные геометрические фигуры превращаются в уникальных, красочных персонажей.

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

С помощью этого туториала Мэри Винклер (Mary Winkler) собирается показать Вам, как нарисовать чиби персонажа с нуля, используя Shape Builder Tool (Shift-M), Pen Tool (P), прозрачные градиенты, и многое другие инструменты Illustrator.

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

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

Этот туториал представляет очень много основных форм для достижения действительно ловкого стиля иллюстраций. А затем «оживляет» йети с помощью палитры холодных цветов.

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

Если Вы заядлый любитель футбола, то этот туториал будет особенно кстати. В уроке Сергей Кандаков создает яркую иллюстрацию с эффектом стиля ретро.

Ландшафт и окружающая среда

В этом уроке от векторного художника Андрея Мариуса (Andrei Marius) показано, как можно создать простой дизайн карты в Illustrator.

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

Очень простой и последовательный урок от Дианы Тома (Diana Toma), который показывает как нарисовать прекрасные цветы используя градиентные сетки (меш).

В этом пошаговом руководстве Вы изучите, как создать «электрический» текст в векторе.

Том Мак (Tom Mac) показывает, как в Illustrator создать портрет с drip-effect, используя инструмент Pen и кое-какие дополнительные методы.

В этом учебном руководстве мы сделаем простой и красивый восточный паттерн в Adobe Illustrator, который будет состоять из различных объектов азиатской культуры.

За прошедшие годы винтажные иллюстрации и ретро-стиль стали вновь популярными в дизайне. В представленном уроке разработчик Бен Стирс (Ben Steers) делится своими методами, которые помогут Вам преобразовать векторные рисунки в ретро-стиль.

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

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

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

В этом учебном руководстве Вы изучите, как создать графический логотип Бэтмена, используя простые формы в Adobe Illustrator. Используются простые инструменты, вроде Ellipse Tool (L) и Shape Builder Tool (Shift + M).

36. Конвертируйте растровое изображение в векторное

Это учебное руководство Inkscape демонстрирует, как преобразовать растровое изображение в векторное при помощи функции Trace Bitmap.

Слайдер — популярный элемент веб-дизайна. В данном туториале показан вариант создания слайдера в векторе.

Сиара Фелен (Ciara Phelan) продемонстрирует Вам как с помощью комбинирования векторных изображений и фотографий можно создать удивительный коллаж.

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

В этом учебном руководстве показано, как создать эффект вышивки крестиком в Adobe Illustrator. Для этого будет использоваться панель Appearance и образцы.

Преобразование растров в вектор в Illustrator для лазерной резки

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

Начнем!

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

Выберите объект, который нужно сделать векторным. Перейдите в меню Object . Прокрутите вниз до Image Trace и выберите Make and Expand .

Теперь, когда вы выберете свое изображение, вы заметите, что оно состоит из точек.

Image Trace создаст как черные, так и белые части вашего изображения. изображение. Если вы используете инструмент Direct Selection Tool (белая стрелка), вы можете выберите белую область.Затем перейдите в меню Select , прокрутите вниз до Same и выберите Fill Color . Удалите эти формы.

Еще один прием, позволяющий убедиться, что у вас нет лишних белых форм или пустых фигур — это немного сдвинуть черные части вашего дизайна и просмотреть в режиме Outline (CTRL / CMD + Y). В зависимости от качество и сложность вашего изображения, у вас могут возникнуть нежелательные количество баллов. Это может вызвать проблемы с лазером. Лазер следует по карте от точки к точке.Если в вашем дизайне 180 очков на одном линии, это замедлит работу и, возможно, вызовет проблемы. если ты может упростить ваш путь, и вы получите лучшие результаты.

Выберите свой объект и снова перейдите в меню Object . Прокрутите вниз до Path и выберите Simplify . Убедитесь, что установлен флажок live Preview . Просто немного снизив точность кривой, вы заметите, что потеряете много этих точек.

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

Теперь, когда у вас есть чистый и простой векторный объект, вы готовы пройти предполетный контрольный список и экспортировать файл. Создавая дизайн в Illustrator, присылайте нам свои файлы в формате .ai.

Файл — это файл в двухмерном векторном формате.Если вы разрабатываете в Adobe Illustrator, пришлите нам свой исходный файл .ai.

Файл построен в масштабе 1: 1, предпочтительно в дюймах

Весь текст преобразован в контуры или контуры

Вырезанный текст (перевернутый текст) имеет перемычки или нанесен трафарет

Все случайные точки, повторяющиеся линии, пустые объекты и текстовые области удалены

Нет фигур с открытыми контурами

Все формы объединены, объединены или объединены

Все объекты находятся на одном слое

Все отверстия и вырезы составляют не менее 60% толщины материала

Преобразование растровых изображений в векторные

Простое решение распространенной проблемы

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

Ниже приводится довольно простой 6-шаговый процесс преобразования растрового изображения в векторный файл. Эти инструкции относятся к Adobe CS5, но функциональность практически одинакова для всех последних версий Adobe Creative Suite. Мы используем изображения из недавно созданного нами логотипа клиента, чтобы проиллюстрировать этот процесс.

Шаг 1. Очистка в Photoshop

В зависимости от размера или разрешения вам может потребоваться небольшая очистка или улучшение изображения в Photoshop, прежде чем пытаться преобразовать его. Вероятно, будет хорошей идеей увеличить любые действительно маленькие файлы, чтобы они были не менее 2–3 дюймов в ширину или в высоту (в зависимости от ориентации изображения). Также может иметь смысл очистить и сгладить края, если изображение было низкого качества или низкого разрешения. Когда вы закончите с этим, просто сохраните отредактированное изображение в формате jpeg или png с разрешением 300 точек на дюйм, используя опцию «Сохранить как» в меню «Файл».

Шаг 2. Импорт в Illustrator и открытие Live Trace

Чтобы начать работу в Illustrator, просто выберите сохраненное изображение и откройте его в Adobe Illustrator. Как только ваш файл будет открыт, просто нажмите на изображение, используя «Инструмент выделения». Как только изображение выбрано, переместите курсор вверх и нажмите «Объект» в строке меню, чтобы появился раскрывающийся список, затем прокрутите вниз до «Live Trace», и вы увидите «Параметры трассировки» в дополнительном меню. Это должно выглядеть примерно так.

Шаг 3. Установите параметры трассировки и трассировку

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

Шаг 4. Перейти к Live Paint

Если вы хотите внести изменения в какие-либо векторные контуры или цвета изображения, вам также потребуется выполнить «Живую раскраску».Вы можете легко сделать это, убедившись, что изображение выбрано с помощью инструмента «Выделение», а затем снова щелкните «Объект» в строке меню. На этот раз вы прокручиваете вниз и наводите курсор на «Live Paint», чтобы раскрыть меню. Это должно выглядеть примерно так, как на изображении ниже.

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

Шаг 5. Удаление фоновой заливки

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

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

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

Шаг 6: Сохранить файл и выйти

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

Использование Illustrator и Photoshop для графического дизайна

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

Почему мне следует использовать Adobe Photoshop®?

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

С момента своего первого запуска в 1990 году Photoshop получил множество новых функций, как в результате дополнений, внесенных командой Adobe, так и с помощью подключаемых модулей, созданных независимыми пользователями.Многие из этих функций были даже включены в такие программы, как Illustrator и InDesign, поскольку Adobe превращает Creative Cloud в группу перекрывающихся приложений. В то же время инструменты из таких приложений, как Illustrator, перешли на Photoshop, а это значит, что он может делать гораздо больше, чем просто редактировать фотографии.

Итак, что вы можете делать с Adobe Photoshop®?

Редактирование и обработка фотографий

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

• Основы: улучшение цвета, добавление контраста, обрезка и другие изменения размера изображения
• Полноценная ретушь в журнальном стиле: ретушь кожи, удаление морщин, редактирование цветов одежды и т. Д.
• Раскраска: сделайте старые фотографии так, как будто они были напечатаны вчера. На Reddit есть даже целое сообщество, посвященное именно этому: / r / Colorization.
• Сумасшедшие манипуляции с фотографиями, например, создать впечатление, будто на вас нападет сумасшедшая кукла-убийца.

Цифровая живопись

Наблюдается неуклонно растущая тенденция делать все больше и больше картин, обложек книг, мультфильмов и комиксов в Интернете, используя инструмент для рисования и мышь или планшет для рисования вместо традиционного холста и палитры. Цифровая живопись позволяет художникам воспроизводить внешний вид и эффекты всего, от кисти №2 до баллончика с краской, не выходя за рамки Photoshop или пачкая руки. Некоторые смельчаки даже воссоздали эпизод из фильма Боба Росса «Радость рисования» с помощью программы для обработки изображений GIMP.Те же методы можно было бы легко использовать и в Photoshop®: на самом деле, они, вероятно, проще.

Графический дизайн

Несмотря на то, что Adobe Creative Suite предлагает гораздо больше полнофункциональных приложений для графического дизайна в Illustrator и InDesign, многие из инструментов, которые существуют в этих двух приложениях, также существуют в Photoshop, особенно инструмент Pen, который стал основным продуктом приложения Adobe. люкс.

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

Если вам интересно узнать больше о возможностях Photoshop®, ознакомьтесь со статьей Гарри Гиннесса «Что на самом деле можно сделать с Adobe Photoshop?» на MakeUseOf.

Почему мне следует использовать Adobe Illustrator®?

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

Растровые и векторные изображения: в чем разница?

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

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

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

Почему вам следует использовать Illustrator для полиграфического дизайна

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

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

Избегайте споров между растром и вектором: используйте Photoshop и Illustrator вместе

Если вы не можете решить, какую программу использовать, или вам нужно использовать эффекты растровых изображений в своем проекте векторной графики, вполне возможно использовать Photoshop и Illustrator вместе, благодаря совместимости между всеми приложениями Adobe Creative Suite . Пример того, как использовать Adobe Photoshop для улучшения проекта Illustrator, можно найти в этом руководстве от Orchard View Color.

Следите за нами и ставьте лайки:

Легко комбинируйте растровые и векторные изображения

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

Сначала исправьте растровое изображение: Самая большая проблема при цветоделении заключается в том, что художник создал отличную векторную графику — шрифт, границы, резкие края — а затем импортировал (Corel) или разместил (AI) низкое разрешение и низкое качество. Изображение JPG в векторной графике, а затем размер изображения был увеличен.Я не могу сказать вам, сколько сотен раз клиенты говорили: «Но художник работает с разрешением 300 точек на дюйм», а я отвечаю: «Да, но эта часть изображения не начиналась с 300 точек на дюйм».

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

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

Сделайте растровый элемент 300 dpi: В Photoshop увеличьте разрешение растрового изображения до 300 в конечном размере. Чтобы изображения не становились более мягкими, перейдите к изображение / размер изображения и убедитесь, что используется ближайший сосед , что предотвращает появление большего количества сглаживания .

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

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

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

Объединение изображений: В Corel Draw вы можете просто импортировать растровое изображение (файл / импорт). Если исходный размер документа составляет 72 точки на дюйм, Corel может сделать импортированное изображение 72 точками на дюйм.

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

Сохранение изображения для использования в Photoshop: Здесь вы можете ошибиться.Если вы используете Adobe Illustrator, вы можете просто сохранить файл, и он откроется в Photoshop. Но, если вы используете Corel Draw, вы должны сохранить как файл PDF, чтобы открыть его в Photoshop. Ключевым моментом является проверка настроек PDF в Illustrator или Corel. Убедитесь, что они не настроены на сжатие или уменьшение выборки изображения, и, если у вас есть выбор, оставьте разрешение на уровне 300 точек на дюйм.

Преобразование шрифтов в контуры / кривые: Чтобы все были довольны — особенно если вы отправляете за сепс или перемещаете файл внутри компании — преобразуйте шрифты из векторов в Outlines (Illustrator) или Curves (Corel) .Таким образом, тот, кто откроет файл, не увидит ужасных окон с надписью «недостающие шрифты».

Открытие файла в Photoshop: Наконец, не испортите отличный файл, открыв его в Photoshop. Если вы откроете файл AI или PDF, вы увидите окно импорта. Обязательно снимите флажок сглаживания и установите окончательный размер файла на 300 dpi.

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

***

Скотт Фрезенер работает в отрасли с 1970 года и является соавтором книги Как печатать футболки для развлечения и прибыли .Он создал две программы автоматического разделения, T-Seps и FastFilms, и считается пионером в сегменте прямой печати на одежду. Фрезенер — директор T-Biz Network и часто выступает на торговых выставках. Фрезенер также был председателем Академии технологии трафаретной печати и входил в совет директоров SGIA. Он управляет сайтом www.T-BizNetwork.com. Свяжитесь с ним по адресу [email protected].

Часто задаваемые вопросы о преобразовании векторных изображений

Vector Service

Как работает ваша служба?
Гарантия
Авторские права
Срок исполнения
Безопасный платеж
Цена

Векторный файл

Какой файл лучше всего отправлять?
Особые требования
Формат файла
Не удается открыть векторный файл ?!
Почему вектор?

Как работает ваша служба?

ПОЛУЧИТЬ ЦЕНУ

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

ПОЛУЧИТЬ ДОКАЗАТЕЛЬСТВО

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

ПОЛУЧИТЬ ВЕКТОР

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

СОВЕТЫ по снижению затрат на векторизацию:

ВЕКТОРИЗАЦИЯ (точное дублирование)
Копия векторного файла будет отправлена ​​в формате JPEG — перед отправкой векторного файла — для проверки.Если файл корректуры выглядит не так, как вы ожидали, плата за выполненную работу не взимается. Возвращаемый залог в размере 50% требуется от новых клиентов или для заказов на сумму 75 долларов и более.

Гарантия нового дизайна:

НОВЫЙ ДИЗАЙН (например, преобразование фотографии в векторный рисунок)
Векторная графика — это рисунки, а не фотографии, поэтому векторизация фотографий означает создание нового дизайна — см. Фото в образцы векторной штриховой графики — удовлетворение зависит от того, что вы вообразили и это может не обязательно совпадать с конечным результатом.Если векторное доказательство выглядит не так, как вы ожидали, вам не нужно платить оставшуюся задолженность. Новые дизайны и депозиты с фото в вектор возврату не подлежат.

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

2. Изображения, отображаемые где-либо в сети — или опубликованные иным образом — не обязательно являются общественным достоянием, даже если изображение не имеет знака или уведомления об авторском праве, это не означает, что оно бесплатное или разрешено для использования кем-либо. Копирование изображения, защищенного авторским правом, без разрешения его владельца является незаконным. Отправляя нам изображение для воспроизведения, компания Vector Conversions предполагает, что вы являетесь владельцем изображения или имеете явное разрешение от владельца на копирование изображения.

Срок выполнения:

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

Суббота и воскресенье доступны по запросу — без дополнительной оплаты

Безопасный платеж:

Касса — это безопасная транзакция PayPal, но вам не нужна учетная запись PayPal, просто нажмите там, где написано «У меня нет учетной записи PayPal», и введите сумму квоты.Вам не нужно вводить информацию о доставке.

Стоимость векторизации:

Большинство векторных преобразований стоит от 10 до 50 долларов. Чтобы получить наименьшую стоимость и наилучшие результаты, прочтите следующий абзац.

Какой файл лучше всего отправлять?

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

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

Особые требования:

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

Формат векторных файлов

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

AI — Adobe Illustrator (вектор)
BMP — Bitmap (растр)
CDR — CorelDraw (вектор)
DWG — чертеж AutoCad (вектор)
DXF — файл обмена AutoCad (вектор)
EMF — расширенный метафайл (вектор)
EPS — Инкапсулированный PostScript (вектор)
GIF — Compuserve (растровый)
JPEG — Joint Photographic Experts Group (растр)
PCT — Macintosh PICT (растровый)
PDF — файлы PDF могут быть созданы как из векторных, так и из растровых файлов
PNG — растровое изображение (растр) переносимой сетевой графики
PSD — Adobe Photoshop (растр)
SCT — Scitex CT (растр)
SVG — Масштабируемая векторная графика (вектор)
SWF — Macromedia Flash (растр)
TGA — Targa (растр)
TIFF — формат файла изображения тега (растровый)
WMF — метафайл Windows (вектор)

Не удается открыть векторный файл ?!

Новичок в векторной графике? — Вам нужна векторная программа, чтобы открыть векторный файл и сохранить векторные данные.Откройте соответствующую векторную программу и в меню выберите ФАЙЛ >> ОТКРЫТЬ. Если вы просто дважды щелкните векторный файл, ваш компьютер может найти другую программу, чтобы открыть его и изменить собственный формат файла. Открытие файла с помощью не векторной программы, такой как Photoshop, приведет к растрированию изображения, и файл будет бесполезен для тех, кому требуется векторная графика.

Если у вас нет редактора векторной графики, а вам просто нужна векторная графика для третьей стороны: принтер, производитель вывесок и т. Д., просто отправьте векторный файл своему поставщику. Копия векторного файла в формате pdf предоставляется для вашего использования.

Я знаю, что делаю, я все еще не могу открыть векторный файл! — Тогда есть проблема совместимости. Не каждая векторная программа может открыть каждый векторный файл (например, AI-файл Adobe Illustrator нельзя открыть в CorelDraw, а файл CDR CorelDraw нельзя открыть в Illustrator), но большинство векторных программ могут импортировать / открывать и экспортировать / сохранять / сохранять Формат файла s eps.

Если не указано иное, Vector Conversions предоставляет векторные eps.

Не могу открыть и eps? — Простое сохранение файла в более старой версии eps (postscript level 3.0 / adobe illustrator 8) каждый раз помогало моим лояльным покровителям, независимо от того, какое программное обеспечение для редактирования векторных изображений они используют.

Программное обеспечение для преобразования векторных изображений и мышь (ручная) Нарисовано:

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

Почему Вектор?

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

Векторная графика масштабируется. Файлы векторной графики состоят из объектов на основе математических расчетов, поэтому их можно масштабировать до любого размера без потери качества.С другой стороны, растровые изображения — такие как jpg, gif, bmp, tif — состоят из пикселей и не масштабируются без потери качества, растровые изображения обычно при увеличении имеют «пиксельный» вид.

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

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

Подробнее …

Растр против вектора

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

Руководство для начинающих по использованию векторных изображений в Illustrator

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

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

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

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

1. Использование и применение векторных текстур в Illustrator

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

2. Как преобразовать изображение в векторную графику с помощью Adobe Illustrator CS6

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

Присоединяйтесь к нашему творческому сообществу

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

3. «Учебное пособие по Adobe Illustrator для начинающих: создание векторного дерева»

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

4. Учебное пособие по винтажному логотипу для Adobe Illustrator

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

5. Adobe Illustrator CS6 Изменение, группировка, сохранение и экспорт файлов AI

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

6. Как скопировать векторные фигуры из Illustrator в Photoshop

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

7. Как редактировать текст в векторных файлах из GraphicStock

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

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

Поделитесь с нами своим следующим проектом в комментариях или загрузите его в Instagram и отметьте @storyblocksco.

Как легко векторизовать логотип

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

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

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

Почему векторные изображения?

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

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

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

Итак, без лишних слов, вот как сделать векторный логотип.

Шаг 1. Выберите инструмент

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

Одним из самых популярных инструментов является Adobe Illustrator, стандартное графическое программное обеспечение для Mac, ПК и других платформ.

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

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

Шаг 2. Выберите цвета и определитесь с концепцией

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

Шаг 3. Набросок

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

Шаг 4. Начните разработку вашего логотипа

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

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

Как векторизовать логотип

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

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

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

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

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

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

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

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

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

Шаг 5. Сохраните свой логотип

Когда вы закончите редактирование и настройку дизайна, самое время сэкономить. Обычно это делается в меню вашей программы «Файл»> «Сохранить» или «Экспорт». Но будь осторожен. Вы захотите сохранить свой логотип в правильном формате, чтобы обеспечить совместимость и возможность изменять размер в дальнейшем.Если вы сохраните его как png, tiff, gif, jpeg или другой растровый экспорт (совет: убедитесь, что вы знаете о правильных типах файлов для прозрачности изображения), вся ваша работа будет напрасной, если вы также не сохраните векторизованную версию.

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

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

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

Векторный дизайн для победы!

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

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