Обновлено: 13.02.2022
Всем привет! Сегодня речь пойдет снова о SVG, а точнее об экспорте изображений для мобильных приложений в формат SVG. Почему данный формат так важен и зачем его использовать? Как и с помощью каких программ выполнить экспорт изображения в SVGтак, чтобы мобильное приложение работало быстро и оптимально? Об этом и многом другом, вы можете узнать в моей новой статье.
Я уже поднимала вопрос о том, как выполнить экспорт изображения в формат SVG из Photoshop.
Теперь речь пойдет о том, как это сделать в рамках разработки дизайна мобильного приложения. В статье я поделюсь своим личным опытом. На данный момент я являюсь разработчиком дизайна двух приложений Мой тренер и Калькулятор выгоды. И описанный в статье подход я применяла для них.
Тот, кто интересуется темой разработки мобильных приложений, знает, что разные устройства, под которые пишется приложение (смартфоны, планшеты…) имеют разное разрешение экрана.
Соответственно изображения, задействованные в приложении, нужно сохранять так, чтобы на всех устройствах они выглядели корректно. Это достигается путем сохранения одной и той же картинки под разные разрешения (так называемые плотности). Причем, как для устройств Ios, так и для Android. В том случае, если вы сохраняете изображения в формате PNG.
Процесс очень трудоемкий, если выполнять его вручную. Конечно, в том же самом Photoshop, разработаны плагины для автоматизации экспорта изображений в разные варианты плотности. А уж о Sketch или AdobeXD и говорить нечего. Там это изначально предусмотрено.
Почему нельзя использовать сразу для всех устройств изображение, соответствующее самой высокой плотности?
Да потому что устройство с маленьким разрешением – может не справиться с таким приложением.
И тут на выручку приходит формат SVG! Это масштабируемый векторный формат, в котором изображение создается посредством выполнения кода и может подстраиваться под любой формат экрана и не терять при этом качество.
Работа мобильного приложения с изображениями в формате SVG будет более оптимальной, а приложение меньше весить!
Чуете куда я веду?
Именно! Такое пройдет в том случае, если дизайн приложения выполнен в векторном виде. Но учитывая, что сейчас единовластно господствует Flat дизайн и Material дизайн, наличие растровых иконок и элементов дизайна в мобильном приложении является маловероятным.
Если вы создавали дизайн мобильного приложения в одной из последних версий Photoshop, то там уже предусмотрена функция сохранения в SVG. Файл – Экспортировать – Экспортировать Как
Тогда код SVG файла, вот такого, например, изображения, будет выглядеть следующим образом (приведен фрагмент):
Согласитесь, код выглядит прилично и его смело можно вставлять в приложение, и файл весит примерно 5 кб!
Если вы используете более старую версию Photoshop, например, CS5, то вы обнаружите, что там нет такого удобного экспорта в SVG. Вы можете воспользоваться приемом, который я описываю в статье Экспорт из Photoshopв SVG, но тогда обнаружите, что сам файл будет весить уже 48 кб (против 5 в первом случае) а код файла SVG представляет что-то страшное. Что-то, что программист откажется вставлять в свое приложение (и, кстати говоря, не факт, что этот код будет работать).
В таком же положении оказалась и я, когда рисовала дизайн приложений Мой тренер и Калькулятор выгоды. Тогда еще у меня не было AdobePhotoshopCC и о Sketch я ничего не знала. Да и переносить туда уже готовый макет из Photoshop было бы слишком нудно.
Тогда мне посоветовали воспользоваться программой VectorMagic. Эта программа преобразует любое изображение в векторный формат. Действительно очень крутая программа (не реклама). Правда она стоит денег, но, если задача преобразования растра в вектор переда вами маячит как никогда – это выход и очень хороший выход.
Вы можете попробовать программу в действии, преобразовав 3 изображения бесплатно. Это делается на сайте разработчика.
Чтобы не терять много времени, я сохранила в PNG все изображения, которые мне нужно было экспортировать в SVG.Загрузила их в программу и уже там экспортировала в SVG. Для сравнения, размер файла 11 кб, код выглядит, практически так же, как и в случае экспорта из Sketch или нового Photoshop. С AdobeXD я такой возможности еще не тестировала.
Надеюсь, что помогла тем, кто столкнулся с такой же проблемой экспорта изображений для мобильного приложения в SVG, как и я. Хотя, уверена, что сейчас уже можно экспортировать свой макет из Photoshop в AdobeXD
Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях и мы обязательно опубликуем для вас еще больше полезных уроков! |