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

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

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

Ресурсы по использованию слоев Illustrator

Как правило, слои работают так же, как в Photoshop. Ниже приведены некоторые ресурсы:

Установка границ артборда

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

В строке меню перейдите к Object > Artboards > Fit to Artwork Bounds .

После этого наш файл с медведем будет выглядеть так:

Советы, которые следует учитывать при создании SVG

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

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

Как преобразовать изображение в вырезанный файл SVG для Silhouette или Cricut - Designs By Winther

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

Давайте начнем, так что вы можете мгновенно преобразовать свои изображения в файлы svg cut.

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

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

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

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

Итак, убедитесь, что ваше изображение:

• Четкое и в фокусе
• ваш объект / человек четко выделяется на фоне
• ваше изображение имеет приличный размер

Преобразование изображений в файлы SVG с помощью вашего iPhone или iPad

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

Загрузка и использование Imaengine из App Store

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

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

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

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

Редактирование изображений для получения хорошего результата

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

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

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

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

Очистите свой svg-файл перед экспортом

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

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

Когда вы закончите редактировать изображение, вы нажимаете «Поделиться» и затем убедитесь, что находитесь на вкладке svg (оранжевая). Отсюда вы нажимаете «Открыть в» и затем выбираете предпочитаемое приложение для совместного использования. Мне нравится использовать Onedrive, так как у меня есть компьютер с Windows, но если вы работаете на Mac, я уверен, что вам будет проще сбросить его с воздуха.

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

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

Если вы хотите узнать больше о трассировке ваших изображений по силуэту, продолжайте читать 🙂

Преобразование изображений с помощью Photoshop

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

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

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

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

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

Шаг первый - откройте изображение в Photoshop и отделите объект от фона

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

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

Чтобы изолировать объект, я использую кнопку выбора объекта, и вы можете перейти к ней, нажав «w» на клавиатуре. Выбрав этот инструмент, вы щелкаете и перетаскиваете объект, который хотите изолировать.

Если инструмент не так точен, как вам хотелось бы, вы можете выбрать области, удерживая нажатой клавишу Shift, и отменить выбор областей, удерживая нажатой клавишу alt.

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

Преобразование вашего изображения в линейный рисунок

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

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

Смотрите с 2,50 до примерно 13 минут.

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

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

Преобразование изображений в линии разреза в Silhouette Studio

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

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

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

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

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

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

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

Преобразование изображений в Cricut

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

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

На изображении, над которым мы здесь работали, все белые части - это те, которые вам нужно удалить.

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

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

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

Преобразование изображений с помощью procreate и рисование самого себя

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

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

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

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

Вот что я сделал и как вы тоже можете это сделать.

1. Откройте Procreate на своем iPad и создайте новый холст (знак плюса в правом верхнем углу).
2. Нажмите на маленький гаечный ключ в верхнем левом углу и выберите добавить -> вставить фото. Затем выберите фотографию, которую вы хотите обвести.
3. Уменьшите непрозрачность вашего изображения, чтобы вы могли видеть линии, которые вы собираетесь нарисовать.Найдите свои слои, нажмите N, а затем используйте ползунок, чтобы уменьшить непрозрачность.
4. Добавьте новый слой поверх изображения
5. Найдите кисть под названием Technical Pen и начните рисовать элементы, которые вы хотите выделить. черный
6. Когда вы закончите рисовать, удалите или скройте исходное изображение, а затем нажмите «Поделиться» -> png

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

Получение помощи в онлайн-группах

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

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

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

Как БЕСПЛАТНО конвертировать любое изображение в SVG - Craft-ILY

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

Вы можете преобразовать ЛЮБОЕ изображение в SVG, это означает, что любое произведение искусства, изображение или даже изображение, которое вы хотите, можно преобразовать в файл, который вы можете перенести на рубашку, толстовку с капюшоном, шляпу, куклу или что-нибудь еще, о чем вы можете подумать.Сегодня я расскажу вам, как это сделать БЕСПЛАТНО.

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

Есть два способа конвертировать изображения: один - в Cricut Design Space, а другой - через бесплатный веб-сайт под названием pngtosvgfree.com. Я объясню вам оба процесса.

Давайте начнем с того, как это сделать в Cricut Design Space

Design Space - потрясающий инструмент, если вы знаете, что делаете, он может стать еще лучшим инструментом. Так много удивительных дизайнов уже доступно вам бесплатно, а если у вас есть Cricut Access, у вас есть доступ к гораздо большему! Однако иногда, в большинстве случаев вы, кто-то из ваших знакомых или клиент, захотите чего-то действительно личного или уникального.

У вас под рукой столько вариантов, что создать уникальный образ тоже очень просто.Вы можете взять изображение из Интернета (ПОЖАЛУЙСТА, НЕ ИСПОЛЬЗУЙТЕ НИЧЕГО ИЗ ИНТЕРНЕТА В КАЧЕСТВЕ ПРОДУКТА, ЧТОБЫ ПРОДАВАТЬ ЭТО НЕЗАКОННО, И ВЫ МОЖЕТЕ ПОЛУЧИТЬ СУД), и вы можете превратить его в нечто даже лучшее, чем оригинал.

Я делал это время от времени для друзей и родственников или для себя, никогда не продавая. Итак, вот как вы это делаете.

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

После сохранения изображения откройте «Пространство дизайна» и выберите «Новый проект».

В новом проекте перейдите на вкладку «Загрузить» слева (см. Ниже).

Затем вы попадете на новый экран, и он предложит вам два варианта «Изображение» и «Шаблон». Также видно на изображении выше.

Выберите «изображение», это перенесет вас на следующий экран, где вы выберете свою фотографию. Выберите свою фотографию и выберите загрузить.

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

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

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

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

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

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

Теперь для PNGTOSVGFREE.com

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

Затем вы перейдете на topngtosvgfree.com (я обещаю, что это не мошеннический сайт)

Когда вы приедете, вы должны увидеть это:

Прокрутите вниз, чтобы увидеть «загрузить», затем загрузите свое изображение:

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

Затем вы выберите «сгенерировать», и это запустит процесс создания SVG для вас.

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

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

Вот и все, как легко? Теперь помните, если вы снимаете изображение с Google, НЕ ПРОДАЖАЙТЕ его или что-либо, что вы делаете с ним! Авторские права - это не то, с чем можно играть.