Логотип отрисовать в векторе: Логотип в векторе: особенности, как создать и где скачать бесплатно

Содержание

Отрисовка логотипа в Иллюстратор. Создание векторного значка по фото. Видео урок

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

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

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

Анализ логотипа.

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

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

Прорисовка элементов логотипа.

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

Для прорисовки одного дома потребуется пять прямоугольников:

  1. Сам дом.
  2. Труба.
  3. Крыша, чтобы получилась ровной, нарисуйте один прямоугольник под углом и отразите его зеркально.
  4. Дверь.
  5. Окно.

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

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

Теперь, когда логотип готов, нужно преобразовать все обводки в объекты, нажмите — Объект/Разобрать оформление… Логотип готов!

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

В видео показана пошаговая прорисовка логотипа с домиками.

Напишите в комментариях, как эта статья помогла вам в отрисовке вашего логотипа.

(Visited 8 010 times, 1 visits today)

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

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

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

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

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

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

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

Magic Wand Tool.

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

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

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

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

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

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

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

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

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

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

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

Автор:

ᐈ Отрисовать Логотип в Векторе Киев — Цены 2021, Стоимость

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

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

Логотипы обычно разрабатывают в 4 этапа:

  • сбор необходимой информации;
  • разработка концепции;
  • подготовка черновиков и вариантов;
  • утверждение и внедрение итогового варианта.

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

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

Прайс: Отрисовать логотип в векторе в городе Киев

Цены на дизайн сайтаЦена, грн
Дизайн сайта-представительстваот 1500 грн
Дизайн промо-сайтаот 2500 грн
Дизайн сайта-каталогаот 3500 грн
Дизайн интернет-магазинаот 4000 грн
Дизайн нестандартного проектаот 8000 грн
Стоимость дизайна интерьераЦена, грн
Обмерный чертежот 100 грн
Варианты перепланировки (2-3 варианта)от 300 грн
План демонтажных работот 120 грн
План монтажных работот 150 грн
План расстановки мебелиот 170 грн
Схема разводки сантехнической системы, узлы, сечениеот 300 грн
Схемы размещения приборов отопительной системыот 200 грн
Схемы дверных проемовот 150 грн
Схемы вентиляции и кондиционированияот 130 грн
Сечение полов, потолковот 150 грн
План напольных покрытий с ведомостью материаловот 150 грн
План теплого полаот 155 грн
План потолков с привязкамиот 160 грн
План осветительного оборудования с привязкой выключателейот 170 грн
План размещения розеток и выключателейот 180 грн
Раскладка плиткиот 190 грн
Детальные схемы мебели под заказ (кухня, гардеробная, шкаф и т.п.)от 300 грн
Развертка стен всех помещенийот 300 грн
Ведомость отделки помещения от 700 грн
Фотореалистичная 3D – визуализация интерьера каждого помещенияот 500 грн
Цена разработки логотипаЦена, грн.
Разработка 3 вариантов логотипаот 1000 грн
Разработка 5 вариантов логотипаот 1500 грн
Разработка 10 вариантов логотипаот 2000 грн
Разработка больше 20 вариантов логотипаот 5000 грн
Редизайн логотипаот 3000 грн
Разработка фирменного стиляот 10000 грн
Цены на дизайн баннераЦена, грн
Дизайна макета биг-борда (3х6м)от 1000 грн
Дизайна макета сити-лайтаот 800 грн
Дизайна макета вывескиот 500 грн
Дизайн баннерной сеткаот 500 грн

*Цена актуальная на Август 2021

Профессиональная разработка логотипов в Киеве может стоить недорого. Это реально, если заказать ее у специалиста напрямую, минуя рекламные агентства и других посредников. Найти хорошего дизайнера или художника можно через сервис Kabanchik.ua, при этом стоимость разработки логотипа будет на 30-50% ниже, чем у рекламных агентств. Самые важные преимущества – заказчик сам выбирает специалиста, сам определяет дату сдачи работы и сумму гонорара.

Привет, сообщество!. Где найти векторный логотип? | by Viktor [VAN] Teplov

И где же его взять?

Где же раздобыть вектор если заказчик на вопрос про брендбук делает круглые глаза? Пойдём по пунктам. Первым делом оценим сложность графики, наличие нужного шрифта и свои скиллы. Зачастую проще отрисовать непутёвый лого чем его найти. Сложновато? Тогда go искать!

Проверяем базовый лагерь

Частенько на корпоративном сайте можно найти логотип в векторном SVG-формате. И иногда получается сразу утащить его драг-н-дропом. Например нам нужен логотип браузера Brave. Идём на официальный сайт (https://brave.com/) и пробуем перетащить логотип на десктоп. Шикарно!

Однако этот фокус не прокатит если SVG встроен в код страницы. Как например на сайте Figma (https://www.figma.com/). Но это не беда. Правый клик по лого и смотрим в веб-инспекторе. Выделяем строку начинающуюся с SVG и копируем весь элемент.

После этого можно пойти в Figma и вставить код из буфера обмена (Ctrl/Cmd+V).

Внезапный бонус

Чтобы основательно покопаться в картинках можно сделать так. Запускаем веб-инспектор, идём в раздел Network, фильтруем по картинкам, нажимаем Ctrl/Cmd+R чтобы перезагрузить страницу, сортируем по типу, и вуаля, вот они все SVG, PNG, JPG и прочие GIF.

Копаемся в хранилищах

Не получилось найти векторный лого на сайте компании, только PNG? Не беда. Нас ожидают сайты-хранилища векторов. Мой любимый Brands of the World (https://www.brandsoftheworld.com/). Здесь главное не утянуть какую нибудь неактуальную древность или кривую поделку. Найдя необходимое, сверяемся с сайтом компании или с другими доступными источниками. Кроме SVG, файл может оказаться в формате EPS, AI или даже CDR. Тогда либо конвертим, либо ищем в другом месте.

Испытаем судьбу

Переходим к поиску на удачу. Будем искать в Google по картинкам (https://www.google.ru/imghp). Набираем название конторы чей лого ищем и дописывем filetype:svg. Не все найденные картинки будут честными SVG-шками и не все хороши и актуальны. Смотрим внимательно, сверяемся с первоисточником. Стараемся не ошибиться.

Погружение

Тоже нет? На очереди глубинный поиск. Будем искать PDF-файлы этой конторы, в надежде что там есть лого в векторе. Для начала поищем PDF-файлы на официальном сайте. Набираем в поиске site:адрес сайта компании (например xerox.com) filetype:pdf. Чтобы оценить стоит ли свеч дальнейшая возня, приблизьтесь к логотипу (zoom). Если он не распадается на пиксели, перед нами вектор и нужно его выковыривать. Но опять будьте внимательны! Рекламные отделы компаний тоже не безгрешны. И там может попасться криворукий дизайнер и невнимательный менеджер.

Препарируем

Итак мы нашли нормальный PDF. Открываем его в Adobe Illustrator или в бесплатном Inkscape (https://inkscape.org/ru/). Упс… Пароль. Часто корпораты смешно пытаются защитить свои PDF. Но нас же не остановить! На помощь приходит сайт SmallPDF (https://smallpdf.com). Это вообще очень полезный инструмент. Конвертация PDF в кучу форматов, сжатие, снятие защиты и т.д. Правда с недавнего времени он стал платным. Но для разовых операций вполне хватит. У меня для снятия пароля с PDF есть утилитка на Маке. Да и других решений хвататет. Наберите в поиске unlock pdf. Теперь, когда непробиваемая корпоративная защита рухнула, откроем в Adobe Illustrator или в Inkscape. Ну и копируем вектор из Adobe Illustrator или конвертим в SVG в Inkscape, вставляем в Figma.

Ищем на стороне

Если на сайте компании PDF-файлы отсутствуют или в них нет векторных лого, можно пошуровать более глобально. В поиске пишем название компании, можно добавить слово logo и filetype:pdf. Придётся отсмотреть кучу левого мусора, но шанс найти есть.

Векторный арт на заказ онлайн от 100 рублей

{{/if}}
{{if !hideSerRate}} {{/if}}

${serviceDescription}

0

Перевожу растровые изображения в вектор. Для работы использую исключительно Coreldraw.

Переведу ваше растровое изображение в векторное или просто улучшу качество векторного за скромную плату. На выходе вы получаете исходник в SVG или CDR ( на выбор. )

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

Отрисую логотипы, иконки и рисунки (любой сложности) с растра в вектор. Создания абриса для плоттерной резки или лазерной гравировки. Перевод с JPG, PNG, TIFF, PSD >>> AI, CDR, EPS, PDF, SVG.

Логотип, товарный знак, картинки из фотобанка, фотографии, ваши наброски на салфетке (конечно в пределах разумного, в смысле средней сложности) отрисую профессионально в программе Corel Dro. Так же могу добавить спецэффекты (тени, объем,…

Хотите оживить страницу в соцсетях? Креативно оформить сайт или страницу блога? Наконец, визуализировать диалог или историю? Предлагаю сделаю комикс по Вашему сценарию или по Вашей идее. В стоимость услуги входит: -…

Делаю в векторной графике иконки в разных стилях (flat, контурный, минимализм, объемные) на любой вкус. На картинках мои работы как пример. Стоимость указана за 1 иконку. Предоставляю все исходники в формате ai и eps.

Создам для Вас дизайн визитки в любом стиле, предоставлю векторные исходники.

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

Переведу любое растровое изображение в векторное или просто перерисую в векторе

Переведу ваше изображение в вектор Работаю в 3х программах — CorelDraw, INkscape, Adobe Illustrator Если вам нужен исходник в специфической программе — проблем нет

Отрисую в векторе ваш скетч, картинку, набросок, идею по описанию. Работа может занять от 1 деня до 2 недель, все зависит от деталей и корректировок.

Отрисую портрет в векторном формате.

Создаю простые векторные изображения под ваши пожелания

Могу отрисовать в векторе логотип или изображение, быстро и качественно. Использую CorelDRAW

Сделаю простое векторное изображение

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

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

Отрисую изображение с фотостоков (например: shutterstock) Результат в векторном формате. А также в хорошем разрешении в растровом формате на прозрачном фоне. Векторный файл позволит напечатать изображение на любом…

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

Пусто

К сожалению, по вашему запросу ворков нет.

Показать ещё

Найдено ворков, только зарегистрированные пользователи могут просматривать такие ворки.

Как нарисовать в inkscape логотип для сайта

В этом уроке мы нарисуем логотип для сайта enascor. Рисовать будем в векторе и логотип будет выполнен в виде валика с надписью.

Запускайте редактор и давайте начнем работать.

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

Шаг 1. Рисуем контур логотипа

Выбираем инструмент Рисовать кривые Безье и прямые линии (Shift+F6) и создаем вот такой контур.

Толщину контура подбираем в зависимости от размеров валика. Сам валик рисуем с помощью инструмента Рисовать прямоугольники и квадраты (F4). Используя маркер, скругляем углы прямоугольника.

Шаг 2. Необычная заливка валика

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

Выбираем линейный градиент и ориентируем его вертикально. Далее, с помощью инструмента Создавать и править градиенты (Ctrl+F1), добавляем 8 опорных точек двойными кликами.

Цвет каждой полосы указан ниже. Цвет можете задать любой.

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

Мышкой лучше не пользоваться- очень не удобно.

Так мы получим резкую границу. Аналогичным образом рисуем ручку.

Справа и слева добавляем пару темных прямоугольников.

Шаг 3. Размещаем надпись.

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

Печатаем текст INKER. Шрифт на ваше усмотрение. Ниже рисуем линию с помощью кривых. Выделяем линию и текст и применяем Текст- разместить по контуру.

После этого задаем непрозрачность равную 0.

Нарисуйте пару капель под текстом. Самый быстрый и простой способ нарисовать каплю такой. Сначала нарисуйте круг инструментом Рисовать круги и эллипсы (F4). Примените Контур- оконтурить объект. Переключитесь в режим Редактировать узлы и рычаги и поднимите верхний узел вверх.

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

Разместите нарисованные элементы нужным образом и сгруппируйте Ctrl+G.

Осталось экспортировать в png. Выделяем наш логотип и открываем панель экспорта Файл- экспортировать в png.

Здесь необходимо задать разрешение (в моем случае 96 dpi), имя файла логотипа (Экспортировать как) и нажать Экспорт.

Другие похожие и не очень похожие, но интересные записи

Как перевести растровое изображение в векторное быстрым способом в Adobe Illustrator.

Скачать материалы урока

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

векторных логотипов: обзор и способы его создания

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

  1. Что такое векторная графика?
  2. Растр и вектор
  3. Почему векторные логотипы?
  4. Векторные форматы
  5. Дизайн векторных логотипов
  6. Простой и быстрый способ создания векторных логотипов

Что такое векторная графика?

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

Изображение предоставлено Deverdesigns.com

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

Растр по сравнению с вектором

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

Изображение предоставлено Jouwgrafischemaatje.nl

Это легко сделать с помощью редакторов изображений Adobe Illustrator и Corel Draw.

Почему векторные логотипы?

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

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

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

Векторные форматы

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

PDF — популярный формат, разработанный Adobe Systems Incorporated для отображения печатных материалов (векторных логотипов), презентаций и документов. Это особенно удобно для сохранения файлов, содержащих как графику, так и текст.Логотип PDF имеет встроенный набор шрифтов. Кроме того, инструменты PostScript позволяют добавлять в файл логотипа ссылки, анимацию и звуки. Графические элементы в PDF занимают мало места и правильно отображаются на разных устройствах и в разных системах. Кроме того, формат PDF предоставляет широкий спектр возможностей печати.

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


Разработанный компанией Adobe, EPS совместим со всеми популярными редакторами (Illustrator, Photoshop, CorelDraw, GIMP и т. Д.). Он поддерживает широкий набор инструментов для редактирования и обработки векторных логотипов и других изображений без потери качества.Файлы EPS широко используются в профессиональной полиграфии.

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

Формат CDR был разработан исключительно для файлов Corel Draw и несовместим с другим программным обеспечением для редактирования изображений.Имейте в виду, что файлы CDR, созданные в последних версиях Corel Draw, нельзя открыть в более старых версиях программы. Лучшее в формате CDR — это то, что он сохраняет специальные эффекты и параметры объектов.

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

Векторный логотип

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

Простой и быстрый способ создания векторных логотипов

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

Зарегистрируйтесь в Logaster, чтобы получить доступ к широкому спектру эффективных инструментов, которые помогут вам создавать умный корпоративный дизайн. После оплаты вы можете скачать созданный вами логотип в одном из популярных форматов (PDF или SVG) прямо на свой компьютер. Как вариант, вы можете бесплатно сохранить маленькую эмблему.
Готовы начать? Нажмите кнопку «Создать» и создайте потрясающий векторный логотип всего за несколько минут!

Как насчет создания векторного логотипа за считанные минуты?

Используйте средство создания логотипов Logaster для создания векторных логотипов в форматах PDF и SVG.Легко масштабировать и печатать!

Руководитель отдела маркетинга и вдохновитель Логастер. Автор книги «Как создать фирменный стиль, не разорившись». Ценит профессиональный подход и способность объяснять сложные идеи просто.

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

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

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

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

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

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

Секрет в том, что векторы состоят из масштабируемых линий и форм, содержащих истинные цвета, а не из нечеткой матрицы цвета на пиксель, которую вы найдете в растровых изображениях. Однако, как ни странно, большинство изображений, с которыми вы сталкиваетесь в Интернете, предназначены для неверного представления их источников, в основном по причинам пропускной способности — и для определенных приложений, таких как определенная веб-страница определенного размера. В самом деле, размер файла растеризованного изображения может составлять лишь часть его полного размера без сжатия. Умножьте это на десятки или сотни изображений, найденных на типичной веб-странице, и это может означать разницу между страницей, которая загружается за секунду или две, и тем, что ползет в течение 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 для всех ваших задач.

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

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

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

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

Создание векторного логотипа в Sketch. Обзор того, как создать вектор… | Джереми Осборн | Gymnasium

Отсканированный логотип, который вы будете обводить с помощью векторных инструментов в Sketch

, сильной стороной Sketch является векторная графика, но вы также можете импортировать и редактировать растровые изображения.Например, вот нарисованный от руки набросок, который был отсканирован и преобразован в файл PNG, который вы будете импортировать для обучения. Трассировка нарисованных от руки эскизов для получения чистых векторных изображений в Sketch довольно распространена и проста в выполнении. Опять же, если вы хотите выполнить это упражнение, вы можете скачать изображение здесь. Этот рисунок называется «vectorflo-handrawn.png».

  • Запустите Sketch и на экране приветствия щелкните Новый документ , а затем Выберите , и появится пустой документ.Выберите File> Save и назовите этот файл vectorflo-logo и нажмите ОК.
  • Выберите «Вставка»> «Изображение », найдите файл vectorflo-handrawn.png и нажмите «ОК». Графика появится на вашем холсте. Давайте кратко рассмотрим рабочее пространство. В Sketch ваша панель инструментов находится вверху, список слоев — слева, холст — в центре, а инспектор — справа.
Рабочее пространство «Эскиз»
  • В Инспекторе щелкните поле «Ширина» и затем нажмите стрелку вниз на клавиатуре.Это уменьшает размер логотипа на один пиксель за раз. Если вы хотите ускорить процесс, нажмите и удерживайте клавишу Shift , и теперь он будет масштабироваться вниз на 10 пикселей за раз. (Вы также можете масштабировать изображение вручную, щелкнув любой угол и перетащив его в центр.) Попрактикуйтесь с этим и уменьшите ширину изображения до 600 пикселей.

Этот трюк с использованием стрелок вверх и вниз работает в * любом * поле в Sketch. Давайте попробуем с непрозрачностью.

  • Щелкните внутри поля «Непрозрачность» и нажмите Shift, + стрелку вниз, пока не достигнете 50% .Затухание этого изображения создает виртуальную «кальку», которая позволит вам легко накладывать векторные фигуры поверх.
  • Найдите меню «Упорядочить» в верхней части экрана и выберите «Заблокировать слой». Это предотвращает случайное перемещение или выбор изображения. Если вам когда-нибудь понадобится разблокировать его, щелкните значок замка в списке слоев (или вы можете щелкнуть фигуру правой кнопкой мыши и выбрать Разблокировать слой из контекстного меню).

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

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

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

Первый шаг — нарисовать круг, который соответствует кругу в верхнем левом углу нарисованного вручную логотипа. Нажмите кнопку «Вставить» в верхнем левом углу приложения, и появится всплывающее меню. Выберите категорию Shape, а затем выберите Oval.Теперь Sketch знает, что вы хотите создать какой-нибудь векторный овал!

  • Поместите курсор в середину верхнего левого круга, а затем нажмите и удерживайте клавишу Option (при этом круг будет нарисован из центра), затем медленно перетащите вверх и влево. Обратите внимание, что это * не * создает идеальный круг по умолчанию, поэтому вытяните пальцы и одновременно нажмите и удерживайте клавишу Shift . Это ограничивает пропорции круга идеальным кругом.Продолжайте перетаскивать, пока внешняя граница не выйдет немного за пределы оригинала, у вас будет возможность изменить ее размер позже, поэтому не беспокойтесь о том, чтобы получилось идеально.
Нажмите Option + Shift, чтобы нарисовать идеальный круг из центра.
  • В Инспекторе найдите параметры для заливок и границ, и если установлен флажок для границы, нажмите его, чтобы отменить выбор. Вы будете работать с рамкой позже.
  • Нажмите на образец цвета в разделе «Заливки» и выберите оттенок красного, чтобы не выжигать глаза.Этот цвет * не * будет последним цветом вашего произведения искусства, поэтому не тратьте слишком много времени на его выбор.
  • Найдите ползунок «Непрозрачность» (над разделом «Заливки») и перетащите ползунок на 50%. Прозрачность вашего круга уменьшается вдвое, и теперь вы можете легко видеть нарисованные от руки изображения.
  • Теперь измените размер и положение круга, если необходимо. Цель состоит в том, чтобы убедиться, что векторный круг полностью покрывает нарисованный от руки.
  • Теперь вы скопируете этот круг несколько раз (3 в верхнем ряду и 3 в нижнем ряду).Для этого убедитесь, что круг выделен, а затем выберите Arrange> Make Grid . Введите 2 для строк и 3 для столбцов и измените поля для обоих на 0px . Это гарантирует, что каждый круг будет на одном уровне с другим. Нажмите Make Grid, и теперь у вас есть 6 идеально выровненных кругов в двух рядах и трех столбцах!

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

Функция «Создать сетку», которую я вам только что показал, удивительно полезна, так много раз, когда вам нужно быстро дублировать и повторять объекты в структуре сетки. В главе 2 моего курса я покажу вам, как использовать Make Grid для целых артбордов, что значительно упрощает создание нескольких экранов для прототипов.

Перед тем, как вы начнете создавать логотип, вы должны сначала немного поработать, сгруппировав и переименовав слои. Если вы посмотрите на свой список слоев, вы увидите, что 6 кругов имеют имена и номера по умолчанию, но они немного неудобны: «Овал 1, копия 2» и так далее.Давайте переименуем первый созданный вами круг в «Овал 1», второй кружок в верхнем ряду «Овал 2» и так далее.

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

  • Выделите все круги, щелкнув и перетащив их.Вы увидите, что все шесть овалов в списке слоев загорятся. Заметили, что нарисованный от руки эскиз не был выбран? Это потому, что вы заблокировали его раньше! (Вы правильно заблокировали его?)
  • Теперь перейдите в меню «Упорядочить» и выберите Группировать слои (вы также можете использовать сочетание клавиш Command + G ). Дважды щелкните имя папки и переименуйте группу Круги . Пока вы находитесь здесь, нажмите на стрелку слева от папки, чтобы открыть ее. Вам понадобится доступ к содержимому через мгновение.
  • Чтобы облегчить визуализацию следующего шага, поместите курсор в дальнюю правую часть группы «Круги». Вы увидите маленький значок глаза, щелкните по нему, чтобы отключить видимость группы. Щелкните еще раз, чтобы он появился снова. Сделайте это несколько раз, чтобы понять отношение векторных кругов к эскизу.

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

Составные контуры не уникальны для Sketch (в Adobe Illustrator эти команды находятся на панели «Обработка контуров»), а в математической области составные контуры называются логическими операциями. Основная идея состоит в том, что вы объединяете две или более формы, чтобы создать новую форму. Две наиболее распространенные операции — это Union и Subtract, , но есть также Intersect и Difference, ни одна из которых вы не будете использовать в этом упражнении.

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

  1. Составным путям необходимо перекрывающихся пути для работы.
  2. Сначала необходимо выбрать все пути, которые вы пытаетесь объединить.

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

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

Если круг является верхним слоем и перекрывает прямоугольник Если щелкнуть «Вычесть», получится совсем другая форма:

Теперь, когда вы поняли основную идею, вы примените ее к своему произведению искусства.Здесь вы будете использовать комбинацию методов Union и Subtract.

  • Чтобы сделать следующие шаги как можно более понятными, я хочу, чтобы вы отключили видимость овалов 2, 4 и 6. Вы снова включите их позже. Обратите внимание на промежутки между 3 кругами. Чтобы «заполнить» эти пробелы, вам нужно проявить немного творчества.
  • Дважды щелкните нижний круг (овал 5), чтобы выбрать его. Нажмите и удерживайте клавишу Option , а затем перетащите дублированный круг вверх и влево, пока не увидите «привязку», которая происходит с помощью интеллектуальных направляющих.
Нажмите клавишу параметров, чтобы продублировать круг, а затем перетащите его в нужное место.
  • Повторите последний шаг, но перетащите этот дубликат вверх и вправо, пока не увидите эффект привязки. Вы видите, к чему вы клоните? Вы собираетесь выбрать эти 5 кругов, а затем объединить их с помощью Union, чтобы создать новую форму.
    () Если вам интересно, почему на перекрывающихся контурах появляется более темный красный цвет, это потому, что непрозрачность исходного круга была изменена на 50% ранее в руководстве, и вы видите смешение прозрачных цветов.)
  • Чтобы выбрать все 5 кругов, нажмите и удерживайте клавишу Shift , а затем щелкните каждый из них (порядок не имеет значения). (Если у вас возникли проблемы с выбором, вероятно, выбрана группа Круги, вам нужно будет выбрать любой из кругов в этой группе, а затем продолжить.) Вы можете дважды проверить, что все 5 выбраны, просмотрев список слоев . Теперь нажмите кнопку Union на панели инструментов, и все 5 кругов будут объединены в новый слой, который Sketch переименовывает Combined Shape в списке слоев.

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

  • Начните с нажатия на глаз на верхнем слое (Овал 2), чтобы открыть его. Затем щелкните Овал 2 на холсте, чтобы выделить его. Теперь Shift + щелкните слой Combined Shape на холсте и нажмите Subtract .. Это вычитает перекрывающиеся пути ниже, и у нас остается форма, которую мы хотим.
Command + Click выберет любой слой из текущего выделения.
  • Теперь просто промойте и повторите. Включите слой для овала 4, сначала выберите его, а затем выберите свою комбинированную форму и нажмите «Вычитание», чтобы удалить путь ниже.
    Остался только один, но будьте осторожны, вас ждет ловушка!
    Если вы выбрали слой Combined Shape и Oval 6 преждевременно и вычли, результат, вероятно, вас удивил. (Если вам интересно, попробуйте прямо сейчас, просто не забудьте нажать Отменить.)

Ловушка в том, что легко забыть, что верхний слой всегда вычитается из нижнего . В настоящее время Combined Shape является верхним слоем, поэтому вычитание удаляет все, кроме небольшого фрагмента Oval 6. Чтобы сделать это правильно, вам нужно переместить Oval 6 на верхний слой и , а затем вычесть .

  • Выберите Овал 6, а затем выберите Упорядочить> Переместить на передний план . Вы также можете просто перетащить слой в списке слоев наверх, но иногда при этом возможны ошибки, поэтому придерживайтесь команды.
  • Теперь снова выберите оба слоя и нажмите Вычесть . Теперь у вас есть готовый векторный логотип. Ура! Обязательно сохраните документ, вы не хотите потерять всю эту тяжелую работу!

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

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

Эта функция означает, что векторные изображения в Sketch невероятно гибкие. Вы всегда можете вернуться к своим путям и переместить их, или изменить их формы или операции, которые вы использовали. Это побуждает к экспериментам и упрощает рекомбинацию элементов вашего произведения искусства. При этом метод сглаживания составных контуров Illustrator может быть реализован в Sketch (и иногда это имеет смысл). Если вы хотите увидеть это в действии, попробуйте выбрать Combined Shape, а затем выбрать Layer> Paths> Flatten .(Просто не забудьте потом отменить).

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

  • Исходный набросок, нарисованный от руки, на данный момент немного отвлекает, поэтому отключите его, щелкнув замок в слое «нарисованный от руки», а затем щелкните значок глаза, чтобы скрыть его. (Или, в качестве альтернативы, вы можете Ctrl + щелчок или правой кнопкой мыши слой и выбрать Hide Layer .)
  • Еще вам нужно восстановить непрозрачность логотипа до 100%. Щелкните свой слой Combine Shape, чтобы выбрать его, затем измените непрозрачность на 100%. Это гарантирует, что цвет, который вы собираетесь выбрать, будет в полной мере.

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

  • Теперь вы измените цвет заливки с красного на определенный оттенок зеленого. Если вы хотите в точности последовать моему примеру, смело выбирайте другой цвет по своему вкусу! Я сделал зеленый цвет со значением красного 99 , значением зеленого 197 и значением синего 115 . Вы можете найти и обновить эти значения RGB в нижней половине панели «Цвет». Также обратите внимание на четвертое значение A или alpha .Давайте уделим немного времени изучению альфа-цвета, поскольку он станет важной частью вашего цветового арсенала.
  • Введите 10 в качестве значения A и нажмите return. Ваш логотип станет очень тусклым, потому что вы только что установили непрозрачность цвета на 10%. Важно не путать непрозрачность альфа-цвета со значением непрозрачности объекта. Чтобы уточнить: ваш логотип по-прежнему имеет непрозрачность 100%, это просто цвет заливки, который установлен на 10% с использованием альфа.
  • Введите 100 в качестве значения для A, и это вернет его к чистому цвету.Теперь вы добавите еще одну заливку поверх этой, но это будет градиент с немного большей сложностью.
  • Щелкните значок «+», расположенный в дальнем правом углу панели «Заливки», чтобы добавить еще одну заливку. По умолчанию эта новая заливка скрывает первую, пока вы не измените ее непрозрачность!

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

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

Стоит изучить свойства градиента в Sketch, поскольку это может быть не сразу очевидно. Мой логотип, например, сначала светится вверху, а затем становится темным, а зеленый цвет заливки все еще виден, почему это так? (Вот подсказка, это связано со значением альфа-цвета, которое мы только что рассмотрели.)

Значения RGB установлены на черный, но значение 50 для A (альфа) создает 50% прозрачность, что приводит к появлению серого цвета.

Щелкните нижний кружок редактора градиента (этот кружок называется «остановка градиента»), а затем посмотрите на значения RGBA .Все значения для R, G и B равны 0, что обычно отображается как чистый черный, но если значение A установлено на 50 (как у меня), оно отображается как 50% черный или средний серый цвет.

  • Теперь выберите любой цвет в палитре цветов или, если вы хотите продолжить, следуя моему примеру, введите 86 для R, 104 для G и 180 для B . Это дает оттенок синего с непрозрачностью 50%.
  • Теперь щелкните белый ограничитель градиента (вверху редактора градиента) и перетащите его в верхний левый угол вашего логотипа.Если значение Alpha в настоящее время составляет 50 , оставьте его в покое, в противном случае введите 50 сейчас.

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

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

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

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

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

  • Щелкните образец цвета «Границы» и поэкспериментируйте с разными цветами. Однако не стоит слишком увлекаться; скоро вы добавите градиентную границу.
  • На панели «Цвет» выберите параметр линейного градиента. Теперь вы измените цвет и направление этого градиента, чтобы создать интересный эффект, похожий на фаску (но, возможно, с немного большей изощренностью!).
  • Щелкните верхнюю границу цвета в редакторе градиента и перетащите ее к верхнему краю левого верхнего круга. Измените цвет на сине-зеленый оттенок; Я использовал шестнадцатеричный цвет 38968F.

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

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

  • Щелкните значок «плюс» в разделе «Внутренние тени», чтобы добавить тень по умолчанию. Если вы когда-либо работали с теневыми эффектами в других программах, варианты здесь будут вам знакомы. Значения X и Y позволяют расположить тень по горизонтали и вертикали. Свойство Blur позволяет управлять степенью размытия, а свойство Spread определяет «спад» тени с большими числами, создающими большую тень. Я использовал следующие значения: X = 3 , Y = 12 , Blur = 3 и Spread = 2.

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

Текстовые функции в Sketch не такие сложные, как в Photoshop и Illustrator, но их достаточно для наших нужд.

  • Щелкните значок глаза для слоя «vectorflo-handdrawn», чтобы вернуть его в поле зрения.
  • Выберите Вставка> Текст , а затем щелкните один раз в области буквы «v», и появится курсор вставки текста.
  • Щелкните меню «Гарнитура» и, если у вас Helvetica Neue , выберите его. Если у вас нет Helvetica или Helvetica Neue, выберите Arial в крайнем случае, но никогда не используйте Arial для настоящих логотипов!
  • Кроме того, если у вас есть Helvetica Neue, щелкните меню «Вес» и выберите Ultra Light , если он доступен.
  • Теперь введите слово vectorflo и установите размер шрифта на 96.
Интеллектуальные направляющие Sketch «загораются» при центрировании текстового слоя.

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

  • Теперь, когда текст готов, нарисованный от руки слой официально отвлекает. Щелкните значок глаза, чтобы выключить его. Нет необходимости удалять слой, если вы не хотите немного уменьшить размер файла.
  • У большинства профессиональных логотипов есть текст, который каким-то образом изменен, он редко бывает достаточно хорошим «из коробки».В нашем примере (увеличьте масштаб, если вам нужно) посмотрите на пространство между буквой «r» и «f». Буквы соприкасаются, и это пространство можно немного приоткрыть. Посмотрим, как это делает Sketch.
  • При необходимости дважды щелкните текстовый слой, затем выберите буквы r и f , а затем поместите курсор на слово «Символ» в разделе «Интервал». Когда вы видите, что ваш курсор изменился на двойную стрелку, это означает, что теперь вы можете щелкнуть и перетащить влево или вправо, чтобы изменить интервал.Поскольку вы хотите расширить пространство, вы должны перетащить вправо, пока значение не достигнет примерно 8 или любого другого значения, которое вы предпочитаете.
Изменение интервала между символами (кернинга) двух букв

Обратите внимание в моем примере, что интервал изменяется не только между символами r и f , но и r , f и l. Если вы хотите отрегулировать расстояние только между r и f и ничем другим, вам нужно будет выбрать только букву r и выполнить ту же операцию.Попробуйте увидеть разницу, а затем найдите баланс, который работает для вас.

Отличная работа! Осталось только экспортировать.

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

  • Убедитесь, что на вашей странице ничего не выделено, затем выберите Файл> Экспорт , и Sketch автоматически определит рамку вокруг вашего логотипа. Это поле технически называется срезом, и вы можете видеть, что значок среза появился в вашем списке слоев. Sketch использует имя вашего документа в качестве имени фрагмента по умолчанию.

Sketch автоматически определит границы среза, но вы можете настроить вручную, щелкнув и перетащив края среза или введя значения в поле «Размер».Например, я хотел, чтобы мои высота и ширина были равны, поэтому я ввел 400 для высоты и 400 для ширины. Затем я изменил положение среза, чтобы обеспечить равномерное распределение пространства со всех четырех сторон.

  • Обратите внимание, что на панели «Экспорт» есть настройки для размера, суффикса и формата. Значение по умолчанию для размера — 1x, суффикс в настоящее время пуст, а формат — PNG.

Размер 1x просто означает, что ваша графика будет экспортирована в размере 100% (который в настоящее время составляет 400 пикселей на 400 пикселей).Поле Суффикс позволяет добавить автоматическое имя файла и обычно используется только при создании нескольких экспортов. Формат — это просто тип файла. Sketch может экспортировать следующие форматы растровых изображений: PNG, JPG, TIFF и для векторных: SVG, EPS и PDF.

  • Щелкните значок (+) в правой части раздела «Экспорт», и появится еще одна строка настроек. Теперь размер 2x , суффикс @ 2x , а формат по-прежнему PNG. Если вы выберете этот параметр, ваша графика будет экспортирована с удвоенным текущим размером (т.е. 800 x 800), а к имени файла будет добавлен суффикс «@ 2x», чтобы отличить его от базового изображения.
  • Щелкните (+) еще раз. Sketch автоматически добавляет 3-кратное значение, но это можно изменить. Щелкните меню Размер и выберите из списка 0,5x и обратите внимание, что суффикс отражает это изменение. При выборе этого параметра изображение будет экспортировано на 50% меньше оригинала, то есть 200 x 200 пикселей.
  • Щелкните (+) еще раз, а затем щелкните меню «Формат» и измените его на SVG. Поскольку это собственный векторный формат, меню «Размер» теперь неактивно.Выберите значение @ 3X в поле Суффикс и удалите его.
  • Нажмите кнопку «Экспорт векторфло-логотипа» в самом низу Инспектора, и откроется окно «Экспорт». Нажмите кнопку «Новая папка» в левом нижнем углу и назовите ее vectorflo-exports , а затем нажмите «Экспорт». Если вы перейдете в эту папку, вы увидите три файла, три из которых являются файлами PNG, а один — файлом SVG.

Поздравляем! Вы дошли до конца урока. Надеюсь, вы знаете больше о создании иллюстраций в Sketch, чем когда начинали.Если вам понравился этот урок, ознакомьтесь с бесплатными курсами по таким темам, как UX, адаптивный веб-дизайн и многое другое в Aquent Gymnasium. Надеюсь увидеть тебя там.

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

Я собирался придумать некоторые ресурсы по Sketch самостоятельно, но я просто собираюсь указать вам на превосходный список, который здесь собрал Джеймс Янг (@jydesign). Спасибо, Джеймс!

Благодарности: Спасибо Джастину Ганью, Мэтту Гранту и Эндрю Миллеру за их неоценимую помощь в написании этой статьи.

8 приложений для векторной графики и создания логотипов для iPhone — Лучшая коллекция 2020 года

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

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

Приложения для векторной графики и разработки логотипов

1. Приложение для векторного рисования iDesign (для iPhone и iPad) –

Одно из лучших приложений для # векторного рисования и разработки логотипов в Appstore, позволяющее создавать красивые логотипы на iPhone и iPad.

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

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

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

2. Sketch Club — Лучшее приложение для векторного рисования и дизайна (для iPhone и iPad)

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

В

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

3. Простой векторный графический дизайн ProtoSketch (iPhone и iPad) —

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

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

Очень полезный и профессиональный дизайн логотипа для творческих пользователей iOS.

4. Графика — Векторная иллюстрация и дизайн (Только для iPad) —

Graphic — очень полезное приложение для рисования, которое помогает пользователям создавать векторы и логотипы.

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

С помощью этого приложения вы можете легко создавать дизайны и логотипы, такие как настольная версия Photoshop.

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

5. Adobe Illustrator Draw, приложение для векторного дизайна (iPhone и iPad) —

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

С помощью этого приложения вы можете легко рисовать потрясающие векторы и логотипы на своем устройстве iOS.

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

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

6. Tayasui Sketches — профессиональное приложение для рисования (для iPhone и iPad)

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

Tayasui Sketches — это полнофункциональное приложение для проектирования, которое поможет вам создавать красивые и высококачественные логотипы, как профессионалы.

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

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

7.Logo Foundry — приложение для создания логотипов (iPhone и iPad)

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

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

Полезное приложение для создания векторных изображений и логотипов для вашего устройства iOS.Одно из лучших приложений для создания логотипов для пользователей iPhone и iPad.

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

8. Design & Flyer Creator (для iPhone и iPad) —

Design & Flyer Creator — отличное приложение для рисования, которое поможет вам создавать красивые и профессиональные векторы, логотипы, приглашения, листовки, поздравления, значки и иллюстрации.

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

Создание векторной графики и работа с ней в Adobe Photoshop

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

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

Что такое векторное изображение?

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

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

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

К каждому объекту можно применить два типа цвета:

  • Обводка — это линия, которая следует за траекторией.
  • Заливка добавляет сплошной цвет или узор в пространство, окруженное траекторией.

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

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

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

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

  • Инструмент Прямоугольник
  • Инструмент «Прямоугольник со скругленными углами»
  • Инструмент «Эллипс»
  • Инструмент «Многоугольник»
  • Инструмент линии
  • Инструмент Custom Shape

Вы всегда можете выбрать выделенный инструмент, нажав U на клавиатуре.Или нажмите Shift + U , чтобы переключаться между инструментами, пока не найдете тот, который вам нужен.

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

Рисование основных векторных фигур

Выберите инструмент для фигуры, которую хотите нарисовать, затем добавьте цвета Fill и Stroke .

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

Чтобы нарисовать треугольник, выберите инструмент Polygon Tool . Щелкните один раз на холсте, чтобы открыть окно настроек Create Polygon . Установите Количество сторон с на 3 .

Изменение и редактирование векторных фигур

При создании векторной графики в Photoshop вы не ограничены базовыми формами.Их можно очень быстро изменить.

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

Выберите Direct Selection Tool на панели инструментов (щелкните и удерживайте значок Path Selection Tool , чтобы найти его, или нажмите Shift + A ). Теперь щелкните одну из опорных точек и перетащите ее в любом направлении, чтобы деформировать форму.

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

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

Слияние и объединение векторных фигур

Для еще более сложных форм вы можете использовать Path Operations .Это позволяет объединить несколько фигур в одну новую.

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

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

Если вам нужно переместить объекты по отдельности, используйте инструмент Path Selection Tool .

Перетащите вторую фигуру так, чтобы она перекрывала первую. Два сливаются в единую фигуру, хотя остаются отдельными объектами. Щелкните Объединить компоненты формы в Операции с контурами , чтобы объединить их в один объект.

Используйте инструмент Path Selection Tool , чтобы выбрать вторую фигуру, которую вы нарисовали. Теперь в Path Operations выберите Subtract Front Shape .Фигура будет удалена вместе с областью, где она перекрывается с первой фигурой.

Выделите обе формы. В Path Operations выберите Intersect Shape Areas . Это удалит обе формы, за исключением областей, где они перекрываются. Мы используем эту опцию для создания полукруга.

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

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

Нарисовать векторные линии

Есть два других инструмента, связанных с фигурой, о которых следует знать. Во-первых, это инструмент Line Tool .

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

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

Рисование пользовательских векторных фигур

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

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

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

Если у вас есть опыт работы с Illustrator, вы знаете, что используете Paintbrush Tool для рисования от руки. В Photoshop есть инструмент «Кисть», который выполняет аналогичную работу. Но в Photoshop этот инструмент не является векторным, поэтому его не стоит использовать для рисования. Вместо этого вам следует использовать Pen Tool .

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

Начало работы с инструментом «Перо»

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

Вот краткое руководство для начала:

  1. Выберите инструмент Pen Tool (P) . Щелкните холст изображения, чтобы поставить точку привязки.
  2. Переместите курсор на несколько дюймов и щелкните еще раз, чтобы опустить еще одну точку привязки. Будет создан путь для их соединения. Установите обводку на 5 пикселей, черный цвет, чтобы вам было лучше видно.
  3. Щелкните еще несколько раз, чтобы развернуть путь. Щелкните и перетащите, чтобы создать изогнутый путь. Это также добавит рули к точке привязки. Перетащите их, чтобы контролировать угол и глубину кривой.
  4. Щелкните Введите , чтобы создать открытый контур (линию), или щелкните первую точку привязки, чтобы создать замкнутый контур (форму).

Инструмент Pen Tool настолько полезен тем, что вы можете вернуться и отредактировать форму в любое время:

  • Возьмите инструмент Direct Selection Tool (A) .Выберите опорную точку на пути и перетащите ее в новое положение. Используйте этот инструмент с ручками опорной точки, чтобы редактировать кривую.
  • Выберите инструмент Добавить опорную точку , нажав и удерживая инструмент «Перо». Щелкните где-нибудь на пути, чтобы вручную добавить новую точку привязки, затем перетащите ее на место. Это позволяет вам точно настроить свою форму.

Инструменты с тремя ручками

Photoshop предлагает три разных ручки для рисования:

  • Pen Tool — это наиболее гибкий вариант по умолчанию.Новичкам мы рекомендуем использовать это в первую очередь для рисования прямых линий. По мере того, как вы станете более продвинутыми, вы, возможно, обнаружите, что используете его для всего.
  • Инструмент Freeform Pen Tool позволяет рисовать от руки, аналогично Brush Tool. Он по-прежнему создает путь, который вы можете настроить и отредактировать позже. Точки привязки генерируются автоматически по мере рисования. Это отличный инструмент, если вы используете графический планшет.
  • Инструмент «Перо кривизны» позволяет легко рисовать кривые без необходимости играть с рулем, как вы это делаете с основным инструментом «Перо».

Трассировка изображения как вектора в Photoshop

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

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

Если объект, который вы отслеживаете, находится на простом фоне, попробуйте инструмент Freeform Pen Tool с опцией Magnetic , активированной на панели параметров. Это привяжет ваш путь к краю объекта.

Работа с векторным текстом в Photoshop

Использование текста в Photoshop не требует пояснений.Выберите инструмент Horizontal Text Tool (T) , щелкните холст изображения, чтобы создать текстовое поле, затем введите. Вы можете настроить шрифт, размер, вес и все остальное, как и в любом другом приложении.

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

Когда вы закончите, вы можете преобразовать текст в векторный объект. Выделите текст и перейдите к Type> Convert to Shape .Это позволяет вам получить доступ к точкам привязки на каждом персонаже, поэтому вы можете настраивать их индивидуально. Это хорошо для изменения цвета отдельной буквы или настройки внешнего вида шрифта.

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

Управление векторными объектами

Чтобы создать произведение искусства, вам нужно, чтобы все эти объекты были в правильном положении и в нужном размере.Вот как это сделать:

  • Переместите объекты , выделив их инструментом Path Selection Tool (A) и перетащив на место.
  • Измените размер объектов , выбрав их с помощью инструмента выбора пути , затем нажав Ctrl + T в Windows или Cmd + T на Mac. Это показывает рамку вокруг объекта. Возьмите руль за край и потяните внутрь или наружу, чтобы изменить размер.Удерживайте клавишу Shift , чтобы сохранить исходное соотношение сторон.
  • Поверните объект , удерживая указатель мыши за пределами одного из рулей, пока курсор не превратится в значок поворота. Теперь щелкните и перетащите.
  • Измените порядок объектов , щелкнув слой и перетащив его выше или ниже другого слоя.
  • Выровняйте объекты , выбрав их все с помощью инструмента перемещения (V) (или удерживая Shift и щелкнув несколько слоев), а затем используя элементы управления выравниванием на панели параметров.

Векторная графика в Photoshop: соединяем все вместе

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

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

Adobe Illustrator vs.Photoshop: в чем разница?

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

Читать далее

Об авторе Энди Беттс (Опубликована 221 статья)

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

Более От Энди Беттса
Подпишитесь на нашу рассылку новостей

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

Нажмите здесь, чтобы подписаться

Как создать логотип

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

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

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

Используйте базовые формы для создания сложных произведений искусства

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

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

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

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

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

Узнайте, как повернуть фигуру и повторно использовать цвет из библиотеки.

Завершите свой логотип, добавив название компании с помощью мощных функций набора в Illustrator. Члены Creative Cloud могут выбирать из обширной библиотеки высококачественных шрифтов от Adobe Typekit.

Узнайте, как добавлять текст, изменять шрифт, добавлять шрифты из Typekit и добавлять интервалы между буквами.

Предварительный просмотр и сохранение вашего логотипа

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

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

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

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

Вот что вам понадобится для выполнения работы:

  • Карандаш (Хорошо подойдет простой механический карандаш)
  • Ручка (я использую перо Faber-Castell PITT Artist Pen)
  • Обычная бумага
  • Калька
  • Программа Adobe Illustrator
Хорошо, хватит вводных махинаций, приступим к делу …

1. Discovery

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

Вопросы для рассмотрения

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

2. Мозговой штурм

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

Вот несколько указателей на эскизы для мозгового штурма

  • Поэкспериментируйте с прописными буквами, полужирным шрифтом, курсивом, курсивом и т. Д.
  • Попробуйте наклонить текст или нарисовать текст на изогнутой базовой линии.
  • Поэкспериментируйте с разными основными формами.
  • Поэкспериментируйте с размещением различных элементов и их выравниванием.
  • Если у вас есть какие-то культовые фигуры, какие формы вы можете рисовать?
  • Рассмотрите возможность вычитания и перекрытия фигур.

3. Окончательный эскиз

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

4. След

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

5. Сканировать

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

Настройки сканирования:

      • Большинство сканеров предлагают множество опций. Каждый сканер будет отличаться, но в основном вы хотите использовать предустановку сканирования, которая позволяет сканировать в черно-белом растровом изображении для наиболее простого выбора на следующем шаге.Для логотипов я обычно предпочитаю сканировать, используя настройку «Текст» на моем сканере. Этот параметр может показаться нелогичным, но он делает преобразование в векторный формат еще проще, поскольку сканирование выполняется только в черно-белом режиме, без оттенков серого.
      • Общее практическое правило — чем выше разрешение, тем лучше. Если у вас есть отсканированный логотип где-то в районе 3000–5000 пикселей в ширину или около того, вы должны быть в отличной форме для следующего шага. Также следует избегать сканирования со слишком низким разрешением.
      • Формат файла: я рекомендую несжатый формат TIFF. Это позволяет получить файл высокого качества и избежать нежелательных артефактов, возникающих, например, из-за высокого сжатия и низкого качества JPG.
Отсканируйте начертание логотипа. Если вы обнаружите, что в отсканированном логотипе есть некоторые проблемы, которые вы хотите исправить, я рекомендую сделать это на исходной кальке и повторить процесс сканирования.

6 Преобразовать в вектор

На этом этапе процесса мы преобразуем эскиз из растрового изображения в стандартный отраслевой векторный формат файла (с указанием путей).Запустите Adobe Illustrator и откройте файл изображения, который вы только что отсканировали. Когда документ откроется, вы увидите его сканированное изображение (см. Изображение выше). Однако на этом этапе вы видите только растровое изображение, находящееся в документе Illustrator, и не годится в качестве окончательного формата логотипа. Нам нужно преобразовать это изображение в реальные векторные пути в Illustrator. Щелкните непосредственно на логотипе, чтобы выбрать растровое изображение, а затем выберите «Объект> Трассировка изображения> Создать и развернуть». Это, скорее всего, вызовет всплывающее окно с предупреждением о том, что процесс может продолжаться медленно.Нажмите кнопку «ОК», чтобы продолжить. После завершения процесса у вас будет настоящий векторный логотип! Примечание: все маленькие красные точки на изображении выше являются точками вдоль векторного пути и отображаются только при редактировании файла в Illustrator. Наконец, я рекомендую удалить все ненужные контуры с помощью палитры слоев. Для этого разверните слой в палитре «Слои», найдите неиспользуемые слои и удалите их (см. Изображение ниже). Это сохранит ваш файл логотипа в чистоте и устранит любые беспорядочные и неиспользуемые артефакты.

… И готово!

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

Товаров в этом сообщении:

Приступая к работе с надписью от руки?

Рабочие листы для бесплатных надписей

Загрузите эти рабочие листы и начните практиковаться с простых инструкций и упражнений по трассировке.

Скачать сейчас!

Я люблю создавать вручную иллюстрированные товары и текстуры для моих коллег-дизайнеров. Подпишитесь на рассылку и получите 5 бесплатных текстур! http://GhostlyPixels.

Опубликовано в категории: Разное

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

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