Comments 15
… скрипт Size Marks, который при наших разрешениях даст нужные разработке размеры (но только в px, к сожалению)
Size Marks указывает размеры в пикселях, если разрешение документа равно 72 ppi. При любых других разрешениях размеры будут в поинтах.
+2
Zeplin.io не пользуетесь?
0
Вместо радиобаттона для разрешений нужен чекбокс ибо где я работаю используются все 3 разрешения. Как? В исходниках так.
0
Делаем в принципе все тоже самое, вот уже пару лет. (андроид)
Работаем со скетч фалом напрямую, оттуда сохраняем svg. Gradle плагин (https://github.com/avianey/androidsvgdrawable-plugin) нам нарезает все нужные размеры. Если у иконки есть ровные линии, то делается отдельный svg файл для hdpi, если сильно заметно.
Мне интересно что вы делаете с редлайнами для текста, например, то что показано на картинке «Пример работы скрипта Size Marks», не будет работать, так как не учитываются падинги для шрифтов. В примерe падинг сверху уже будет не 60, а 54, в добавок судя по картинке оба текстовых поля пересекаются друг с другом. Не знаю как в ios, в андроиде такого быть не должно :)
Работаем со скетч фалом напрямую, оттуда сохраняем svg. Gradle плагин (https://github.com/avianey/androidsvgdrawable-plugin) нам нарезает все нужные размеры. Если у иконки есть ровные линии, то делается отдельный svg файл для hdpi, если сильно заметно.
Мне интересно что вы делаете с редлайнами для текста, например, то что показано на картинке «Пример работы скрипта Size Marks», не будет работать, так как не учитываются падинги для шрифтов. В примерe падинг сверху уже будет не 60, а 54, в добавок судя по картинке оба текстовых поля пересекаются друг с другом. Не знаю как в ios, в андроиде такого быть не должно :)
+1
Если у иконки есть ровные линии, то делается отдельный svg файл для hdpi, если сильно заметно.
Не совсем понял этот момент, если у вас нарезаются из svg все нужные размеры, то зачем отдельный svg для hdpi? Проще же сразу png.
и вы наверное про не ровные линии?
По поводу текста, в спецификациях мы отдаём расстояние до базовой линии, на не лэйбла. Иногда даём картинку с сеткой вроде вот такой:
А картинка взята из примера самого Size Marks. =)
0
> Не совсем понял этот момент, если у вас нарезаются из svg все нужные размеры, то зачем отдельный svg для hdpi?
Для того что бы избавиться от блюра. У вас даже пример есть с красным кружочком. С «фигурными» иконками, там особо смысла нет, так как мало что можно сделать, и там не так заметно.
> По поводу текста, в спецификациях мы отдаём расстояние до базовой линии, на не лэйбла. Иногда даём картинку с сеткой вроде вот такой:
Сетка это хорошо, но я не совсем понимаю как она помогает. Программисты сами все равно вычисляют коректный падинг?
Для того что бы избавиться от блюра. У вас даже пример есть с красным кружочком. С «фигурными» иконками, там особо смысла нет, так как мало что можно сделать, и там не так заметно.
> По поводу текста, в спецификациях мы отдаём расстояние до базовой линии, на не лэйбла. Иногда даём картинку с сеткой вроде вот такой:
Сетка это хорошо, но я не совсем понимаю как она помогает. Программисты сами все равно вычисляют коректный падинг?
0
Про «блюр» понятно, я скорее о svg, но не суть.
Да, сами. Тут ещё момент есть, что у Ps и Sketch иногда паддинги могу отличаться у одного шрифта. Мы просто иногда даём картинку с линиями, программисты её себе вставляют и расставляют по ней. Не самый удобный вариант, но пока так.
Да, сами. Тут ещё момент есть, что у Ps и Sketch иногда паддинги могу отличаться у одного шрифта. Мы просто иногда даём картинку с линиями, программисты её себе вставляют и расставляют по ней. Не самый удобный вариант, но пока так.
0
> я скорее о svg
Тут есть 3 способа:
1. экспортировать как есть, но получим размытые картинки, обычно на hdpi
2. экспортировать все размеры в png и руками подправить иконки для hdpi, tvdpi и тд.
3. создать отдельную копию svg для hdpi, подвинуть ее по сетке что бы избавится от блюра.
Мне больше нравится третий вариант, так как он легче и к тому же у нас уже все нарезается из svg автоматически. В итоге из mdpi svg мы получим png для mdpi(x1), xhdpi(x2), xxhdpi(x3). А из hdpi.svg -> hdpi.png.
Тут есть 3 способа:
1. экспортировать как есть, но получим размытые картинки, обычно на hdpi
2. экспортировать все размеры в png и руками подправить иконки для hdpi, tvdpi и тд.
3. создать отдельную копию svg для hdpi, подвинуть ее по сетке что бы избавится от блюра.
Мне больше нравится третий вариант, так как он легче и к тому же у нас уже все нарезается из svg автоматически. В итоге из mdpi svg мы получим png для mdpi(x1), xhdpi(x2), xxhdpi(x3). А из hdpi.svg -> hdpi.png.
0
А как вы делаете 1-пиксельные линии? Очень часто не хочется, чтоб они растягивались до 2 пикселей на ретине…
0
Sign up to leave a comment.
Дизайн мобильных приложений: почему мы работаем в @1x