Добро пожаловать на первый урок из серии «Design and code» приложение на iPhone.
Конечный вид приложения:
Содержание этого урока
В сегодняшнем уроке мы изучим основную структуру интерфейса. Мы также сделаем окно «favorites» и начнем делать окно «settings». На втором уроке мы изучим дизайн клавиатуры и закончим секцию «settings».
Шаг 1
Откройте Photoshop и идите в File > New. Примените настройки как на картинке ниже.
Шаг 2
Идите сюда и скачайте iPhone GUI PSD. Мы будем использовать некоторые из основных элементов этого пакета. Откройте скаченный файл, скопируйте и вставьте объекты как на скриншоте ниже (the top, title и tab bars).
Шаг 3
Выберите Text tool 
и нажмите на текст «Label». Измените его на «Contacts».
Шрифт скачиваем с thepiratebay.com
Шаг 4
Правый клик мыши на bar top background и кликните blending options. Нажмите на Gradient overlay. Оставьте расположение цветов как есть. Только измените цвета на бежевого оттенка. От светлого к темному, как на картинке ниже.
Двойной клик на квадратик рядом с цветом. Измените цвет.
Шаг 5
Двойной клик на слой с текстом Contacts измените стиль слоя. Выберите Color Overlay и измените цвет на #333333.
Измените Drop Shadow, как показано на картинке ниже.
Шаг 6
Удерживая Ctrl, нажмите на иконку слоя background. Идите в Layer > New Layer и заполните новый слой белым цветом. Идите в Filter > Noise > Add Noise и добавьте Noise 40%
Измените режим смешивания слоя с Noise на Multiply и прозрачность на 10%
Шаг 7
Двойной клик на иконку с цветом возле слоя top highlight и измените цвет на красный.
Шаг 8
Откройте стиль слоя для background и выберите Drop Shadow. Примените настройки как на картинке ниже.
Шаг 9
Выберите слой background (самый первый, который создается автоматически в новом документе). Откройте стиль слоя и выберите Color Overlay. Примените цвет #232323.
Шаг 10
Откройте стиль слоя для tab bar background. Примените таки же цвета как на картинке.
Измените Drop Shadow с настройками как на картинке ниже.
Шаг 11
Измените цвет на квадратике рядом со слоем top highlight на красный.
Измените так же цвет слоя top dark и top highlight.
Должно получиться вот так:
Шаг 12
Удалите одну из иконок и переместите оставшиеся три иконки так, чтобы между ними было одинаковое расстояние. Создайте три маленьких прямоугольника с помощью Rectangular Mark Tool 
. Скопируйте стиль слоя с иконки щита и вставьте его в иконку с прямоугольниками. Переименуйте названия иконок как на картинке ниже.
Теперь мы должны сделать иконку с прямоугольниками активной. Для этого переместите слой selected highlights к нашей иконке. Скопируйте стиль слоя Shape 15 на на нашу иконку.
Шаг 13
Правый клик на нашу иконку и примените стили слоя как на картинке ниже.
Вот, что у вас должно получиться.
Шаг 14
Откройте файл iPhone GUI PSD и выберите группу со списком контактов.
Шаг 15
Впишите свои имена и измените цвет текста.
Используя тот же шрифт, но меньшего размера, напишите, какой телефон использует абонент. Используйте пипетку, чтобы понять, какой цвет я использовал.
Шаг 16
Откройте iPhone GUI PSD еще раз и выберите иконку со стрелкой. Переместите группу в наш файл.
Примените следующие стили слоя к одному слою
И к другому
Должно получиться вот так:
Скопируйте стиль слоя на другие стрелочки.
Шаг 17
Переместите с GUI PSD две стандартные кнопки iOS в наш файл.
Примените следующие стили слоя
Удерживая Ctrl, нажмите на иконку первого, а затем все еще удерживая Ctrl и Shift, нажмите на иконку второго слоя. Идите в Filter > Noise > Add Noise и примените noise 10%.
Измените прозрачность до 5%. Должно получиться вот так:
Шаг 18
Используя Custom Shape tool 
, сделайте такие же иконки как на картинке ниже.
Шаг 19
Поместите все слои в папу и назовите ее Contacts. Скопируйте папку и спрячьте оригинальную. Назовите ее Settings.
Удалите большинство имен и keylines. Из GUI PSD выберите одну из полос и измените ее градиент и обводку, как на картинке ниже.
Шаг 20
Выберите Text Tool и вместо имени напечатайте “Below you can change your 80′s cell telephone theme, using either a preset option or by mix and matching different colors.” Примените шрифт Helvetica Neue Light 5 пикселей. Выравнивание по центру.
Шаг 21
Переместите полосы, как показано ниже и поменяйте надпись на них.
Заключение
В первой части туториала мы покрыли основы дизайна интерфейса. Во второй части мы закончим страницу Settings и много другой.
