![](https://habrastorage.org/storage2/153/24e/d5a/15324ed5aecc6bf17f990f0e72428bb1.png)
Это вторая часть доклада, который я прочитал на Dribbble Meetup 2013 в Москве. В первой части я подробно описал свой процесс интеграции дизайна под платформу Android. Эта часть — про интеграцию дизайна под iOS и Windows Phone, а также я вскользь упомяну про Samsung Bada 2.0. Дальше — много картинок.
iOS
Переходим к iOS. Тут всё значительно проще, чем в Android. Процесс интеграции будет разбираться на примере iPhone, но всё нижеописанное с успехом применяется и на iPad.
![](https://habrastorage.org/storage2/bb3/190/c75/bb3190c75c0290b611464f3e54deafe7.png)
Как мы все знаем у iPhone есть всего два типа экрана: «Retina», «не Retina».
![](https://habrastorage.org/storage2/6c0/c51/e93/6c0c51e9361f7eb1db9a7abf40bf7b6c.png)
Metrics
Итак, папка Metrics должна содержать все тоже самое, что и для Android: размеры элементов, отступы между ними и от края экрана, цвета однотонных элементов (например, разделители) и т.д. Важно отметить (и запомнить!), что цвета для программистов надо указывать в десятеричном формате. То есть, например, RGB (255, 255, 255), а не в шестнадцатиричном — #FFFFFF.
Размеры для программистов должны быть указаны для не Retina-экранов.
![](https://habrastorage.org/storage2/537/69a/787/53769a787463892c582a67db9dde01e7.png)
А так как psd-макеты у нас делаются для Retina, то сответственно, для корректной работы заходим в Image, жмём Image Size, и выставляем значение 50%.
![](https://habrastorage.org/storage2/224/8c9/1a6/2248c91a6050b78cbdf3b729282bcb80.png)
Можно приступить, так сказать, к «образмериванию» макета. Делать это будем с помощью уже знакомого нам PNG EXPRESS (29 $, для PS CS5/6). Всё аналогично Android.
![](https://habrastorage.org/storage2/037/b23/1e2/037b231e2c167afd406d4c07532a1f31.png)
Пример
Шаг 1. Допустим, нам надо указать размер между картинками аттачей.
Шаг 2. Просто выделяем эти два слоя в Photoshop и в PNG EXPRESS жмем Margins.
Шаг 3. Расширение само нарисует размеры. Если размер получился неверным, наш дизайнерский косяк, редактируем его как обычный текстовый слой Photoshop.
![](https://habrastorage.org/storage2/407/22a/078/40722a07868365c8bc5b442c5d3a4764.png)
Fonts
Папка Fonts должна содержать файлы со всем, что касается шрифтов: размер, цвет, начертание, Photoshop-стили и т.д.
![](https://habrastorage.org/storage2/dc6/12b/401/dc612b40176f82836113529c960a4f64.png)
Пример
Шаг 1. Если нам надо указать шрифт у ссылки «Подробности», то
Шаг 2. Выделяем этот слой в Photoshop и в PNG EXPRESS жмем Spec Font Features.
Шаг 3. Получили полное описание шрифта.
![](https://habrastorage.org/storage2/f4c/afe/20b/f4cafe20bc4ab8c3817523d00f0f691d.png)
Опять сэкономили кучу времени.
Resources
Папка Res должна содержать ресурсы графики для вашего приложения. Для iPhone всё складывается в одну папку:
файлы для Retina обозначаются с @2x, то есть excel @2x.png, не Retina — просто excel.png
![](https://habrastorage.org/storage2/59d/496/bcd/59d496bcd1aca2454c657852f204c7f8.png)
Опять используем расширение Cut & Slice me (бесплатное, для PS CS6).
![](https://habrastorage.org/storage2/c93/2f4/236/c932f4236538091c3ec7875a26570cf1.png)
Исходный psd-макет должен быть для Retina-экранов.
Пример
Шаг 1. Нам надо нарезать иконки для нашего приложения.
Шаг 2. Реорганизуем слои: каждую иконку помещаем в папку, в конец названия которой добавляем @. Таким образом, скрипт определяет, что эту папку надо нарезать.
Шаг 3. Переходим во вкладку iPhone, жмем Cut all assets.
Шаг 4. Расширение автоматом нарезает наши иконки с нужными именами для Retina и не Retina.
![](https://habrastorage.org/storage2/1cf/47e/56e/1cf47e56e6f981b4855eb4b8be09ed93.png)
Чтобы не возникала проблема “мыльных” пикселей, все элементы должны иметь четный размер.
Samsung Bada
Третья в списке платформ — Samsung Bada. Достаточно популярная платформа в России. Но недавно компания Samsung убила эту мобильную операционную систему, официально объявив о ее закрытии. Поэтому о Bada можно либо хорошо, либо никак…
![](https://habrastorage.org/storage2/286/455/544/286455544e748f6d013c5aeb57eff10e.png)
Итак, Windows Phone.
Windows Phone
Тут ситуация повторяет iOS, поэтому просто ещё раз пробежимся по процессу.
![](https://habrastorage.org/storage2/120/b9d/933/120b9d933266cf0bc9c28c0eb3b83e0b.png)
На WP мы имеем два основных типа экрана: WVGA, WXGA.
![](https://habrastorage.org/storage2/70d/f4b/ea6/70df4bea639b746702850c1761b555ed.png)
Metrics
Размеры для программистов должны быть указаны для WVGA-экранов.
![](https://habrastorage.org/storage2/b6d/8a5/5da/b6d8a55dad8cdbffd04c33bfdd50bb9e.png)
С помощью PNG EXPRESS «образмериваем» макет.
Пример
![](https://habrastorage.org/storage2/f4b/8aa/56c/f4b8aa56c589288a97567bf71adca804.png)
Fonts
![](https://habrastorage.org/storage2/fe3/535/73b/fe353573ba7b4bfeb761924de5a3fd43.png)
Пример
![](https://habrastorage.org/storage2/018/9ba/21a/0189ba21a14f1a870acb09103909a8fd.png)
Resources
К сожалению, Cut & Slice me не поддерживает Windows Phone. Поэтому придётся вручную делать ресайз под два разрешения.
![](https://habrastorage.org/storage2/b76/998/bfe/b76998bfedb529a136bf96e35eb77508.png)
Сначала делаем графику для WVGA. Для этого в Cut & Slice переходим в третью вкладку, которая вырезает слои размером 1 к 1. По сути, заменяет массовую команду Save for Web.
![](https://habrastorage.org/storage2/63e/3cf/6dc/63e3cf6dc56c8c27c79b7159c55794cb.png)
Затем WVGA переводим в WXGA, в Image Size выставляем 160%.
![](https://habrastorage.org/storage2/d60/023/380/d60023380200e668f4ad618893320081.png)
Повторяем процесс.
![](https://habrastorage.org/storage2/63e/3cf/6dc/63e3cf6dc56c8c27c79b7159c55794cb.png)
Всё, теперь мы освоили интеграцию дизайна для всех основных мобильных платформ.