Дизайн почтового приложения для iOS 7

23 марта 2014 · Глеб Х. · «Мир Фотошопа»

Конечный результат:

Ресурсы урока:

Набросок

Шаг 1

Прежде чем начинать рисовать в Фотошопе, сделайте набросок карандашом на бумаге. Не нужно уделять внимание деталям на данном этапе. Не пренебрегайте шаблонами и готовыми приложениями в поисках идеи.

Шаг 2

Возможно, Ваш клиент внесёт свои поправки, и Вам нужно будет переделывать и добавлять ещё несколько страниц приложения.

1. Создание иконки бирки

Наш эскиз готов, теперь можем переходить в Фотошоп. Для дизайна интерфейса не нужно большого количества иконок. Их можно создать самостоятельно или найти что-нибудь подходящее в интернете. Для практики я покажу Вам, как создать иконку бирки. Все иконки создаются похожим образом.

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N):

Шаг 2

Выберите инструмент Rounded Rectangle Tool (U) с радиусом 4 пикселя. Создайте фигуру размером 19х19 пикселей цветом #1a72a5.

Шаг 3

Создайте фигуру размером 13х13 пикселей поверх предыдущей. Чтобы Вам лучше было видно её, я выключил первый закруглённый квадрат.

Шаг 4

Активируйте режим Free Transform (Ctrl + T) и поверните фигуру на 45 градусов.

Шаг 5

В CS6 у Вас появится уведомление о том, что фигура будет преобразована в контур. Это значит, что Вы больше не сможете изменять параметры фигуры на панели свойств сверху. Просто нажмите ОК.

У нас получится основа для бирки.

Шаг 6

Опорные точки контура должны быть расположены близко друг к другу, чтобы иконка получилась чёткой.

Шаг 7

Инструментом Direct Selection Tool (A) переместите опорные точки.

На скриншоте ниже Вы можете сравнить иконку до и после изменения формы. Видно, что изменения незначительны, но я это делал для того, чтобы показать Вам, как опорные точки могут повлиять на форму фигуры.

Шаг 8

Выберите инструмент Ellipse Tool (U), на верхней панели включите режим Subtract и вырежьте дырку в форме круга.

Шаг 9

Активируйте режим Free Transform (Ctrl + T) и поверните форму бирки на 45 градусов. Удерживайте Shift, чтобы вращение производилось с шагом 15 градусов.

Шаг 10

Инструментом Direct Selection Tool (A) переместите опорные точки. Обратите внимание на то, что они находятся на пересечении линий сетки.

Шаг 11

Ниже можете сравнить форму до и после перемещения опорных точек. На первом скриншоте видно, что некоторые пиксели выходят за границы иконки.

Шаг 12

Создайте копию большого закруглённого прямоугольника. Его сначала нужно выделить инструментом Path Selection Tool (A), а затем нажать Ctrl + J. Копию нужно повернуть на 15 градусов.

Шаг 13

Создайте ещё одну копию закруглённого прямоугольника и расположите её над предыдущей. На верхней панели выберите режим Subtract Front Shape.

Шаг 14

В режиме Free Transform (Ctrl + T) измените размер верхнего слоя. Переместите опорные точки, чтобы сделать фигуру более чёткой.

Результат:

Вы можете нажать Ctrl + 1, чтобы масштабирование на 100%.

Шаг 15

Сейчас нужно экспортировать иконку в отдельный файл. Выключите фоновый слой.

Шаг 16

Сохраните файл через меню File → Save for Web and Devices).

Если у Вашей иконки много цветов или она более прозрачная, Вам стоит выбрать PNG-24.

2. Подготовка холста

Шаг 1

Создайте новый документ в Фотошопе.

Нам нужно несколько направляющих, которые помогут правильно расположить элементы дизайна. Через меню View → New Guide создайте горизонтальные направляющие на отметках 15, 30, 45, 60, 580, 595. 610, 625 пикселей и вертикальные — на отметках 40 и 128 пикселей.

32jpg

Шаг 2

Инструментом Rectangular Marquee Tool (M) выделите верхнюю секцию и залейте её чёрным цветом через меню Edit → Fill или инструментом Paint Bucket Tool (G).

Шаг 3

Откройте PSD файл с iOS 7 и перетащите группу «Status bar» в наш документ.

Шаг 4

Расположите иконки внутри верхней секции, как показано ние.

Белый вариант:

3. Входящие

Шаг 1

Инструментом Line Tool (U) создайте горизонтальную линию толщиной 4 пикселя, проходящую по горизонтальной направляющей. Инструментом Horizontal Type Tool (T) напишите «Inbox» в центре.

Шаг 2

Чтобы слово «Inbox» находилось в центре, мы воспользуемся функцией выравнивания. Создайте небольшой прямоугольник той же ширины, что и холст. Выберите слой прямоугольника и текстовый слой. На верхней панели нажмите на иконку выравнивания горизонтальных центров.

Прямоугольник можете удалить, он был нужен только для активации функций выравнивания.

Шаг 3

Создайте три закруглённых прямоугольника инструментом Rounded Rectangle Tool (U) цветом #1a72a5.

Шаг 4

На правую сторону добавьте почтовую иконку и создайте три квадрата, расположенных друг под другом.

Шаг 5

Разные секции страниц нужно разделять на группы. У каждой группы на панели слоёв должно быть осмысленное имя. Это очень важно, особенно, когда Вы работаете над большими проектами.

Шаг 6

Теперь займёмся поиском. Создайте серый прямоугольник под шапкой страницы «Inbox». Уменьшите его непрозрачность до 12%.

Шаг 7

Добавьте иконку лупы и немного уменьшите её непрозрачность.

Шаг 8

Теперь займёмся строкой с самой почтой. Создайте горизонтальную 1-пиксельную линию цветом #a4a4a4. У правого края создайте жёлтый (#fdb918) квадрат размером 50х50 пикселей.

Шаг 9

Удалите левую нижнюю угловую точку.

Шаг 10

К жёлтому прямоугольнику примените стиль Drop Shadow.

Шаг 11

Инструментом Polygon Tool (U) создайте белую 5-конечную звезду размером 26х26 пикселей.

Шаг 12

Примените к звезде стиль Inner Shadow.

Шаг 13

Инструментом Horizontal Type Tool (T) выделите область между направляющими и напишите важную информацию: имя отправителя, заголовок, содержимое письма, время.

Ниже показано показаны настройки шрифта.

Шаг 14

К текстовому слою с содержимым письма добавьте маску. Залейте её градиентом снизу вверх. Нужно, чтобы текст письма плавно угасал.

Шаг 15

Создайте закруглённый прямоугольник размером 17х3 пикселя.

Шаг 16

В режиме Free Transform (Ctrl + T) наклоните фигуру на 45 градусов.

Подтвердите преобразования фигуры в контур.

Шаг 17

Создайте копию наклонного прямоугольника и поверните её на 90 градусов.

Шаг 18

Расположите прямоугольники так, чтобы получилась стрелки. Нам нужно немного передвинуть опорные точки, чтобы улучшить форму стрелки.

Шаг 19

Инструментом Direct Selection Tool (A) переместите опорные точки.

Так выглядит стрелка при 100% масштабировании.

Шаг 20

В настройках инструмента Rounded Rectangle Tool (U) установите радиус на 3 пикселя и создайте фигуру размером 18х18 пикселей цветом #eaeaea.

Шаг 21

Примените к ней стиль Stroke.

Шаг 22

Примените стиль Inner Shadow.

Шаг 23

И ещё один стиль — Inner Glow.

Шаг 24

Результат:

Шаг 25

Инструментом Pen Tool (P) нарисуйте чёрную галочку.

Шаг 26

К галочке примените стиль Inner Shadow.

Шаг 27

И стиль Inner Glow.

Шаг 28

Если хотите посмотреть, как выглядит то, что Вы уже создали, нажмите Ctrl + H. Это сочетание клавиш скроет активные направляющие. Вернуть их можно так же при помощи этого сочетания клавиш.

Шаг 29

Добавьте красный закруглённый прямоугольник и подпишите его. Это тег или ярлык письма.

Шаг 30

Создайте копию блока письма и опустите его ниже. Измените цвет заголовка и имени автора на более светлый серый. Это будет значить, что письмо уже прочтено. Треугольник в углу тоже сделайте светло-серым.

Шаг 31

Создайте ещё одну копию блока письма. Сдвиньте её вправо на 130 пикселей (удерживая Shift нажмите на клавишу стрелки вправо 13 раз). На пустой области слева мы создадим варианты для данного письма: открытие письма и ответ отправителю. Выключите иконку в углу и чекбокс.

Добавьте иконки и текст. Иконки должны быть выравнены так, как мы это делали на третьем шаге.

Шаг 32

Добавьте синий (#1a72a5) прямоугольник и сделайте их него кнопку удаления.

Шаг 33

Добавьте ещё один обычный блок с письмом.

Шаг 34

В итоге должна получиться такая страница «Inbox»:

3. Страница «Read Mail»

Прежде, чем переходить к следующей странице, нужно почистить панель слоёв. Все слои должны быть распределены по группам. Для новой страницы создайте новую группу «read email».

Шаг 1

Процесс создания этой страницы будет почти таким же, как и для предыдущей страницы. Добавьте иконку и заголовок.

Шаг 2

Напишите заголовок письма. Шрифт «Open Sans Bold» размером 30pt.

Шаг 3

Добавьте две стрелки.

Шаг 4

Добавьте звезду в угол.

Шаг 5

Добавьте тег.

Шаг 6

Вставьте аватар отправителя. Он может быть и круглым.

Шаг 7

Справа от аватара напишите имя отправителя и время. Ниже напишите текст письима.

Шаг 8

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

Шаг 9

Ниже мы добавим ответ на текущее письмо. Скопируйте блок с письмом, которые мы уже создали, и опустите его ниже. Измените текст письма и добавьте кнопку «Reply».

Результат:

4. Правое выпадающее меню

Шаг 1

Создайте новую группу для нового элемента страницы. Создайте белый прямоугольник в углу.

Шаг 2

Примените стиль Stroke: #1872a6.

Шаг 3

Откройте Blending Options и включите Layer Mask Hides Effects.

Шаг 4

При помощи маски скройте часть обводки.

Шаг 5

Добавьте пункты меню.

Результат:

5. Левое выпадающее меню

Шаг 1

Создайте новый слой и залейте его цветом #1972a5. Уменьшите непрозрачность до 80%.

Шаг 2

Создайте белый прямоугольник, который займёт 60% ширины холста. Примените к нему стиль Stroke с такими же параметрами, что и в последний раз.

Шаг 3

При помощи маски скройте часть обводки.

Шаг 4

Добавьте пункты меню.

Шаг 5

Настройки шрифта:

Шаг 6

Добавьте иконки.

Шаг 7

Правое меню создавалось для страницы «Inbox», а левое создаётся для и страницы «Read Mail» тоже. Чтобы ничего менять, просто включите нужную группу.

Вот так выглядит левое меню на странице «Inbox».

6. Страница нового письма

Шаг 1

Создайте новый слой и залейте его цветом #1872a5.

Шаг 2

Уменьшите непрозрачность слоя до 80%.

Шаг 3

В центре создайте белый прямоугольник.

Шаг 4

Создайте иконку закрытия.

Шаг 5

Добавьте текст.

Шаг 6

Добавьте аватар.

Шаг 7

Добавьте синий прямоугольник высотой 38 пикселей и напишите имя.

Шаг 8

Добавьте ещё одного получателя.

Шаг 9

Добавьте маленькую миниатюру фотографии, которую прикрепили к письму. Вместо фотографии также можно добавить иконку текстового документа.

Шаг 10

Добавьте иконку плюса.

Шаг 11

Добавьте кнопку отправки.

Шаг 12

Окно нового письма может быть активно как на странице «Inbox», так и на странице «Read Mail».

Шаг 13

Так будет выглядеть с белой верхней панелью.

8. Организация слоёв

Шаг 1

Мы храним все страницы приложения в одном PSD файле. Это удобно, так как мы можем видеть взаимодействие разных страниц. Сейчас мы воспользуемся композициями слоёв, чтобы можно было быстро включать и выключать слои каждой страницы.

Выберите группу «inbox» и откройте панель Layer Comps (Window → Layer Comps). Нажмите на иконку новой композиции, поставьте галочку в чекбокс Visibility и нажмите ОК.

Шаг 2

Теперь группа «read mail».

Шаг 3

Шаг 4

Группа «right menu».

Шаг 5

Шаг 6

Продолжайте повторять это для каждой группы. Используйте стрелки для переключения между композициями.

9. Презентация дизайна

Шаг 1

Откройте готовый iPhone в Фотошопе и кликните дважды на смарт-объекте «YOUR SCREEN IS HERE». У Вас откроется новый документ.

Шаг 3

Выберите группу «inbox» и выделите весь холст (Ctrl + A). Скопируйте всё содержимое (Ctrl + Shift + C).

Шаг 4

Вставьте страницу «Inbox» в документ смарт-объекта.

Шаг 5

Сохраните и закройте документ смарт-объекта. Файл с iPhone будет автоматически обновлён. Таким образом можно показать каждую страницу приложения.

Конечный результат:

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта design.tutsplus.com, автор перевода указан в начале урока.