Размеры артборда Illustrator для мобильного дизайна пользовательского интерфейса?

Моя рекомендация: создайте документ Illustrator, используя профиль «Web», чтобы убедиться, что «Выравнивание новых объектов по пиксельной сетке» включено. Таким образом, когда вы помещаете новые фигуры на любую монтажную область, они идеально подходят для пикселей и будут выглядеть чистыми при экспорте с разрешением 72 dpi. Кроме того, при проектировании убедитесь, что вы находитесь в режиме предварительного просмотра пикселей, чтобы можно было выровнять фигуры по пикселям.

Редактировать: Да, вы можете создать более одной монтажной области с разными размерами. Просто используйте инструмент Artboard и перетащите новые монтажные области в документ Illustrator.

Затем создайте каждую монтажную область любого размера, с которым вы предпочитаете работать: либо @2x, либо нет. Вот мой список переходов в px:

1. iPhone 6: 750 x 1334
2. iPhone 6 плюс: 1242 x 2208
3. iPhone 5s/5c/5: 640 x 1136
4. iPad: 1536 x 2048
5. HTC One: 1080 x 1920 [это устройство, которое у меня есть, но его соотношение пикселей эквивалентно самым популярным телефонам Android, а именно Samsung Galaxys и т. д.]

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

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

1. Выберите монтажную область, с которой вы работаете.
2. Файл > Сохранить для Интернета
3. В открывшемся диалоговом окне выберите настройку PNG-24. Включите/выключите прозрачность по своему усмотрению
4. Посмотрите, где написано Размер изображения. Здесь вы можете экспортировать артборд любого размера без потери качества. Вы можете сделать размер 50% для своих устройств с низким разрешением. Или 100% размер для размеров устройств @2x, о которых я упоминал выше.
5. При изменении размера убедитесь, что все значения обновляются в размере изображения. Возможно, вам придется немного щелкнуть по полям ширины/высоты, прежде чем это произойдет. В противном случае ваш экспорт будет иметь исходный размер.
6. Наконец, у вас будет файл нужного размера, с минимальной головной болью и сжатый по размеру файла для использования в любом месте. Мне больше всего здесь нравится импортировать файлы на настоящий телефон/планшет, а затем просматривать их, чтобы понять, как может выглядеть интерфейс на реальном устройстве.

Вопросы?

Существует множество скриптов для сохранения графики из Illustrator для мобильных устройств. Это намного быстрее, чем использовать «сохранить для Интернета». Вот один, а их десятки. Кроме того, вы можете написать или отредактировать их самостоятельно. https://uncorkedstudios.com/blog/export-to-ios-photoshop-script