Как правильно нарисовать экран iPhone 11: от геометрии до реалистичных деталей

Рисование экрана iPhone 11 — задача, которая требует внимания к деталям, даже если вы создаёте скетч от руки или векторную графику в Figma/Adobe Illustrator. Этот смартфон стал знаковым для Apple благодаря сочетанию округлых углов дисплея, асимметричной "чёлке" с датчиками TrueDepth и тонким рамкам. Ошибки в пропорциях или расположении элементов сразу бросаются в глаза — особенно если рисунок планируется использовать для макетов приложений, презентаций или мерча.

В этом руководстве мы разберём не только базовую геометрию экрана, но и нюансы, которые выделяют iPhone 11 среди других моделей: от точного соотношения сторон (19.5:9) до особенностей отображения содержимого на Liquid Retina HD-дисплее. Вы узнаете, как правильно прорисовать динамический остров отсутствует в iPhone 11 — вместо него используется классическая "чёлка" шириной 160 пикселей, а также избежать типичных ошибок с радиусом скругления углов и расположением иконок статусной строки.

1. Подготовка: инструменты и базовые параметры экрана

Прежде чем приступить к рисованию, определитесь с инструментом. Для цифрового дизайна подойдут:

• 🎨 Профессиональные программы: Adobe Illustrator (вектор), Procreate или Photoshop (растр), Figma/Sketch (UI-дизайн).
• ✏️ Традиционные материалы: маркеры Copic, карандаши 2H-6B, бумага с сеткой 1 мм для точных пропорций.
• 📱 Справочные материалы: официальные шаблоны Apple для дизайнеров (включают точные размеры в PX и PT).

Ключевые технические параметры экрана iPhone 11, которые необходимо учитывать:

⚠️ Внимание: Если вы рисуете экран для макета приложения, не забывайте про Safe Area — область, где не должны располагаться критичные элементы интерфейса. В iPhone 11 она начинается на 44 px от верхнего края и 34 px от нижнего.

2. Построение базовой геометрии экрана

Начните с создания прямоугольника с соотношением сторон 19.5:9. Для удобства используйте сетку с шагом 10 px. Далее:

1. Скругление углов: Примените радиус 39 px ко всем четырём углам. В ручном рисовании используйте циркуль или трафарет.
2. "Чёлка": От верхнего края отступите 20 px и нарисуйте прямоугольник высотой 160 px и шириной 548 px, центрированный по горизонтали.
3. Динамик и датчики: Внутри "чёлки" разместите:
   • 🔈 Динамик (слева, ширина 140 px).
   • 👁️ Датчики TrueDepth (справа, группа из 5 элементов диаметром 8–12 px).

Для проверки пропорций наложите на свой рисунок официальный шаблон Apple с прозрачностью 50%. Особое внимание уделите симметрии — датчики должны быть строго горизонтально выровнены.

Соблюдено соотношение сторон 19.5:9|

Радиус углов — 39 px|

Высота "чёлки" — 160 px|

Датчики TrueDepth расположены справа|

Отступ Safe Area учтён (44 px сверху)-->

3. Прорисовка деталей: рамки, отверстия и текстуры

Рамки iPhone 11 визуально тоньше, чем у предыдущих моделей, но имеют нюансы:

• 🖼️ Боковые рамки: Толщина 2.5 мм, цвет — матовый чёрный (в iPhone 11 Pro — глянцевый).
• 🔊 Нижняя рамка: Шире (3.5 мм) из-за расположения микрофона и разъёма Lightning.
• 🕳️ Отверстия:
  • Слева: переключатель Ring/Silent (овальной формы).
  • Справа: кнопка Power (прямоугольник с закруглёнными углами).

Для реалистичной текстуры экрана:

• 🌈 Градиент: Добавьте лёгкий радиальный градиент от центра к краям (цвет #000000 с прозрачностью 10%).
• ✨ Блики: Нарисуйте белые овалы в верхней части экрана (имитация отражения света).
• 📱 Текстура стекла: В растровых редакторах используйте фильтр Noise (1–2%) для имитации микроцарапин.

4. Особенности отображения интерфейса iOS

Если вы рисуете экран с включённым интерфейсом, учтите:

• 📱 Статусная строка: Высота 44 px, содержит:
  • ⏰ Время (шрифт SF Pro, размер 17 pt).
  • 📶 Иконки связи (ширина каждой — 16 px).
  • 🔋 Индикатор батареи (ширина 24 px, с процентом — 36 px).
• 🔄 Жесты: Внизу экрана добавьте тонкую белую полосу (1 px) — это Home Indicator для свайпа вверх.
• 🎨 Цветовая палитра: Используйте системные цвета iOS:
  • Синий: #007AFF.
  • Зелёный: #34C759.
  • Красный: #FF3B30.

Для динамичных элементов (например, анимации разблокировки) изучите гайдлайн Apple по анимациям. Например, переход между приложениями занимает 0.3 секунды с плавным ease-in-out.

5. Типичные ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при прорисовке iPhone 11. Вот самые распространённые:

• 🔍 Неправильный радиус углов: Часто рисуют слишком острые или, наоборот, чрезмерно скруглённые углы. Проверяйте радиус 39 px!
• 📏 Несимметричная "чёлка": Датчики TrueDepth должны быть строго горизонтальны. Используйте направляющие.
• 🖥️ Игнорирование Safe Area: Элементы интерфейса не должны пересекать границы 44 px сверху и 34 px снизу.
• 🎨 Неверные цвета: Экран iPhone 11 имеет холодный оттенок. Избегайте тёплых тонов (например, #FFFFFF вместо #F2F2F2).

⚠️ Внимание: Если вы рисуете экран для печати (например, для стикеров или постера), увеличьте разрешение до 300 DPI и проверьте цветовой профиль CMYK. В противном случае цвета на бумаге будут искажёнными.

6. Практические примеры: от скетча до цифрового арта

Рассмотрим два подхода к рисованию экрана iPhone 11:

🖌️ Ручной скетч (карандаш/маркеры)

1. Наметьте прямоугольник с соотношением 19.5:9 лёгкими линиями.
2. Отметьте центр верхней грани — здесь будет середина "чёлки".
3. Прорисуйте скругления углов, используя монету или трафарет (радиус ~1.5 см для масштаба 1:1).
4. Затените боковые рамки маркером N5 (нейтральный серый).

💻 Цифровой рисунок (Figma/Illustrator)

1. Создайте артборд размером 1792 × 828 px.
2. Добавьте прямоугольник с радиусом углов 39 px (инструмент Rectangle Tool).
3. Наложите маску для "чёлки" (прямоугольник 548 × 160 px с закруглёнными нижними углами, радиус 20 px).
4. Экспортируйте в PNG с прозрачным фоном для дальнейшего использования.

Для вдохновения изучите работы дизайнеров на Dribbble или Behance. Обратите внимание, как профессионалы играют с тенью и светом для создания объёма.

7. Использование рисунка: от макетов до мерча

Готовый рисунок экрана iPhone 11 можно применять в разных целях:

• 📱 Макеты приложений: Вставляйте в Figma/Sketch как основной контейнер для UI-элементов.
• 🎨 Мокапы: Комбинируйте с фотографиями рук или столов для презентаций (используйте Smart Objects в Photoshop).
• 🛍️ Мерч: Наносите на футболки, стикеры или чехлы (векторный формат .AI/.SVG предпочтителен).
• 📺 Видео и анимация: Импортируйте в After Effects для создания промо-роликов.

Для коммерческого использования убедитесь, что ваш рисунок не нарушает правила Apple по использованию торговой марки. Например, нельзя копировать фирменный логотип надкусанного яблока или патентованный дизайн "чёлки" для продажи.

Часто задаваемые вопросы

████████████████████
████████████████████
████░░░░░░░░░░░░████
████░░░░░░░░░░░░████
████████████████████