Размеры экранов телефонов: iPhone и Android
Для мобильного приложения начните с iPhone 16 (393×852): на нём построен шаблон «Мобильное приложение». Затем проверьте макет на краях диапазона — на узком iPhone SE (375 px) и широком iPhone 16 Pro Max (440 px). Для Android есть Android Compact (412×917).
Как собрать приложение из этих экранов, разобрано на странице дизайн мобильного приложения.
| Фрейм | Ширина × высота, px |
|---|---|
| iPhone 16 | 393×852 |
| iPhone 16 Pro | 402×874 |
| iPhone 16 Pro Max | 440×956 |
| iPhone SE | 375×667 |
| Android Compact | 412×917 |
| Android Medium | 700×840 |
Размеры планшетов: iPad и Surface Pro 8
Размеры iPad даны в вертикальной ориентации, Surface Pro 8 — в горизонтальной. Кнопки поворота у готовых размеров нет: для горизонтального iPad поменяйте ширину и высоту фрейма местами, например 1194×834 для iPad Pro 11.
| Фрейм | Ширина × высота, px |
|---|---|
| iPad mini 8.3 | 744×1133 |
| iPad Pro 11 | 834×1194 |
| iPad Pro 12.9 | 1024×1366 |
| Surface Pro 8 | 1440×960 |
Размер макета сайта и экрана компьютера
Макет сайта обычно рисуют шириной 1440 px: это размер Desktop (1440×1024) и ширина шаблона «Сайт». Высота 1024 — только стартовая: страница сайта длиннее, и фрейм удлиняют под содержимое. В плеере прототипа фрейм выше экрана прокручивается сам.
Desktop Full HD (1920×1080) нужен, чтобы проверить страницу на широком мониторе. Для экранов ноутбуков есть три размера MacBook. Как собрать саму страницу, описано в гайде как сделать макет сайта.
| Фрейм | Ширина × высота, px |
|---|---|
| Desktop | 1440×1024 |
| Desktop Full HD | 1920×1080 |
| MacBook Air 13 | 1280×832 |
| MacBook Pro 14 | 1512×982 |
| MacBook Pro 16 | 1728×1117 |
Размеры для соцсетей, презентаций и часов
Размеры для соцсетей названы по площадкам. Пост в Telegram и обложка YouTube совпадают — 1280×720, а «Слайд 16:9» по размеру равен Desktop Full HD. Шаблон «Соцсети» уже содержит пост ВКонтакте, сторис и картинку для Telegram. Как с ними работать, рассказано на странице дизайн для маркетологов.
| Группа | Фрейм | Ширина × высота, px |
|---|---|---|
| Соцсети | ВКонтакте пост | 1080×1080 |
| Соцсети | ВКонтакте пост 4:5 | 1080×1350 |
| Соцсети | Telegram пост | 1280×720 |
| Соцсети | Сторис | 1080×1920 |
| Соцсети | Обложка YouTube | 1280×720 |
| Презентация | Слайд 16:9 | 1920×1080 |
| Презентация | Слайд 4:3 | 1024×768 |
| Часы | Apple Watch 41 мм | 176×215 |
| Часы | Apple Watch 45 мм | 198×242 |
Размер A4 в пикселях
A4 в редакторе — фрейм 595×842 из группы «Бумага». Размеры бумаги заданы в типографских пунктах (1 pt = 1/72 дюйма), а векторный PDF сохраняет фрейм в масштабе 1 px = 1 pt. Поэтому фрейм 595×842 становится страницей A4 — 210×297 мм.
Если нужен не PDF, а картинка для печати, задайте масштаб по ширине. PNG шириной 2480 px — это примерно A4 при 300 dpi; в поле масштаба так и пишут: «2480w».
| Фрейм | Размер, px (в PDF — pt) | Лист |
|---|---|---|
| A4 | 595×842 | 210×297 мм |
| A5 | 420×595 | 148×210 мм |
| Letter | 612×792 | 8,5×11 дюйма |
Поставьте фрейм A4
Нажмите F, разверните группу «Бумага» в правой панели и щёлкните A4. Фрейм 595×842 появится на холсте уже выделенным.
Добавьте настройку экспорта
В разделе «Экспорт» вкладки «Дизайн» нажмите «+» и выберите формат PDF. Масштаба у векторного PDF нет: страница всегда в натуральную величину.
Сохраните файл
Нажмите «Экспортировать A4» в том же разделе. Если страниц несколько, дайте настройку PDF каждому фрейму и откройте «Экспорт…» (⇧⌘E): фреймы соберутся в один многостраничный PDF, до 50 страниц.
Как поставить фрейм нужного размера
Готовые размеры видны, пока выбран инструмент «Фрейм»: вместо свойств слоя правая панель показывает семь групп — «Телефон», «Планшет», «Компьютер», «Презентация», «Часы», «Соцсети» и «Бумага». Рисовать рамку не нужно, достаточно щелчка.
Выберите «Фрейм»
Нажмите F (или A) либо выберите «Фрейм» на панели инструментов внизу экрана.
Щёлкните по размеру
Фрейм встанет справа от последнего фрейма страницы, в 100 px от него, а если фреймов ещё нет — в центре экрана. Он получит имя размера, например «iPhone 16».
Работайте дальше
Новый фрейм сразу выделен, а инструмент сменится на «Перемещение». Свой размер рисуют тем же инструментом «Фрейм»: протяните рамку на холсте.
Можно начать и с шаблона, где фреймы уже стоят: в «Мобильном приложении» экраны iPhone 16, в «Сайте» — страница 1440 px, в «Презентации» — три слайда 1920×1080, в «Соцсетях» — пост ВКонтакте, сторис и картинка для Telegram.
Экспорт в 1×, 2× и 3×: что значит @2x
Размер фрейма и размер файла — разные вещи. Фрейм iPhone 16 остаётся 393×852, а картинка для экрана с плотностью 3× должна быть втрое больше по каждой стороне. Это задаёт масштаб экспорта.
В разделе «Экспорт» вкладки «Дизайн» первая настройка по кнопке «+» — PNG 1×. Каждое следующее нажатие добавляет следующий целый масштаб с суффиксом: 2× с «@2x», 3× с «@3x», и так до 4×. Суффикс дописывается к имени слоя, а несколько файлов скачиваются одним ZIP.
| Настройка | Файл | Размер, px |
|---|---|---|
| PNG 1× | iPhone 16.png | 393×852 |
| PNG 2×, суффикс «@2x» | iPhone 16@2x.png | 786×1704 |
| PNG 3×, суффикс «@3x» | iPhone 16@3x.png | 1179×2556 |
Готовые масштабы для PNG, JPG и WEBP: 0,5×, 0,75×, 1×, 1,5×, 2×, 3×, 4×, 512w и 512h. Вручную — от 0,01× до 32× или по ширине и высоте до 16 384 px. SVG и векторный PDF сохраняются без масштаба. Все форматы разобраны на странице экспорт в PNG, SVG и PDF.
Частые ошибки с размерами
Эти три ошибки чаще всего заставляют переделывать макет или картинки.