Как создать Photoshop, а затем вернуться в Illustrator, чтобы сделать некоторые значки SVG?

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

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

Вы используете Photoshop CC? если тогда, это может сработать для вас
Что ты имеешь в виду? Растр -> SVG?!?! Вы говорите «сделано в Ps», а затем «верните их в Гай», как если бы они были сделаны в Гае. Что именно вы делаете?
@Charles, не могли бы вы сообщить мне, ваши значки сделаны в виде фигур?
@Komental Я создал несколько пользовательских значков в AI, хотя смешал некоторые стандартные шрифты Twitter и Facebook в PS. Все они являются смарт-объектами, поэтому сохраняют свои векторные размеры.

Ответы (2)

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

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

Уникально то, что на iOS/Mac есть Core Graphics, но он на порядок (или более) медленнее, чем спрайты, и имеет те же проблемы с памятью, плюс накладные расходы на отрисовку из-за использования пространства памяти, называемого контекстами, в котором они сначала рисуется, а затем выводится на экран. И если вы хотите масштабировать, вам нужно перерисовать, а затем снова блитить.

Core Animation намного быстрее (избегает фазы контекста, рисование прямо на экране), но у вас нет такого большого контроля над сглаживанием, как и над полным набором инструментов рисования и эффектов, а также постобработкой, доступной в Core Graphics. И, в конце концов, он также предпочитает блит-спрайты.

Эта информация полезна. Дебаты о шрифтах для иконок SVG, похоже, перевешиваются в сторону реализации SVG. В настоящее время лучший способ — продолжать создавать иконки с различными размерами в пикселях (32, 48, 96). С точки зрения четкости дисплея сетчатки, вы рекомендуете какие-либо подходящие ресурсы для обеспечения четкости графики с использованием традиционного прозрачного листа спрайтов PNG?
SVG все еще имеет некоторые особенности, но становится лучше! Вот хорошая демонстрация, которую вы можете использовать для проверки производительности спрайтов SVG и PNG в целевых браузерах: codepen.io/adrianosmond/pen/LCogn .
@johnB хороший ресурс.
Споры (если они вообще есть) о SVG и растровых значках будут немедленно стерты, если вы используете приложение для векторной иллюстрации и экспортируете все необходимые значки в их правильном разрешении и соответственно упаковываете в PNG с альфа-каналом. Это не только радикально повышает производительность практически на всех известных человечеству платформах, но и гарантирует абсолютно точный экспорт ваших работ. Вот кое-что забавное, для исследования... Рендереры SVG не все одинаковы. PNG, в силу того, как он представлен, всегда так.
@Confused абсолютно действителен, когда дело доходит до значков. Я думаю, самое главное, что следует отметить, это то, что вектор не подходит для маленьких изображений. Вектор отлично подходит для масштабирования, но если вы работаете с ~32px² или меньше, вам следует вручную настраивать отдельные пиксели вашего изображения.

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

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