Скачать .PSD исходник можно здесь
Добро пожаловать на вторую часть урока «Создаем дизайн и кодируем приложение на iPhone в стиле 80′, в котором мы научим вас всем нужным шагам для того, чтобы сделать дизайн и код приложения. В этом туториале мы закончим интерфейс приложения.
Шаг 1
Выберите Rounded Rectangle tool 
и ставим радиус углов на 15px. Удерживая Shift, нарисуйте маленький квадрат. Расположите его под полосой, на которой написано Background. Правый клик на слое и примените Drop Shadow, Inner shadow с настройками как на картинках ниже.
Примените Color Overlay с тем же цветом что и фон приложения.
Шаг 2
Скопируйте слой. Удерживая Shift переместите его направо с помощью Move tool 
. Примените к нему те же стили слоя, но поменяйте Color Overlay.
Создайте новую папку и переместите все фигуры в нее. Скопируйте папку и переместите ее под полоску, на которой написано Key Color с помощью Move tool . Повторите этот шаг еще раз и поместите третью папку в самый низ.
Шаг 3
Удалите Color overlay во всех слоях второй папки и примените Gradient Overlay.
Создайте два новых градиента как на картинке ниже.
Скопируйте стиль слоя и вставьте его в другие.
Откройте Стили слоя для второго слоя и измените цвета градиента, как на картинке ниже. Проделайте то же самое с другими квадратами.
Шаг 4
Вставьте тот же стиль слоя в слои, которые находятся в папке Screen Color. Только примените другие цвета.
Шаг 5
Сделайте иконку Settings активной. Как это сделать написано в первом уроке.
Шаг 6
Скопируйте один из квадратов и поместите его под полосой Preset Themes. Примените Gradient Overlay со следующим расположение цветов: 0, 49, 50, 74, 75, 100.
Примените цвета как на картинке ниже.
Проделайте тоже самое с другими квадратами, но с другими цветами.
Шаг 7
Скопируйте папку Settings и назовите ее Telephone. Спрячьте оригинальный слой Settings и удалите все color swatches, category bars и названия. Сделайте иконку телефона активной.
Шаг 8
Выберите слой верхней панели и идите в Edit > Transform > Free Transform. Поставьте высоту на 70%.
Выберите Rectangular Marquee Tool 
и измените размеры выделения: ширина — 30px, высота — 960px.
Закрасьте область выделения черным цветом.
Проделайте то же самое, только размеры нижнего выделения будут 640х30px.
Шаг 9
Выберите Rectangular Marquee tool и поставьте настройки по умолчанию. Сделайте выделение серой зоны. Идите в Edit > Modify > Smooth. Поставьте радиус 20px. Правый клик и нажмите Select Inverse.
Выберите Brush Tool 
и заполните выделение черным цветом.
Примените следующие настройки для Gradient Overlay.
Шаг 10
Выберите Rounded Rectangle Shape tool и сделайте прямоугольник как на картинке ниже.
Удерживая Ctrl нажмите на иконку слоя, чтобы выделить его. Выберите бежевый слой и нажмите Delete.
Проделайте то же самое с правой частью.
Переместите выделение левее и приравняйте его с краями. Правый клик и выберите Select Inverse. Сотрите угол ластиком.
То же самое с другой стороны.
Шаг 11
Откройте стили слоя и примените Stroke размером 3px вне края.
Шаг 12
Сделайте выделение, удерживая Ctrl и нажимая на иконку слоя. Создайте новый слой и заполните его белым цветом. Идите в Filter > Noise > Add Noise и примените Noise 40%.
Измените режим смешивания на Multiply и прозрачность 10%.
Шаг 13
Выберите Elliptical Shape Tool. Удерживая Shift, нарисуйте маленький кружок.
Скопируйте его много раз и расположите как на картинке ниже.
Примените ко всем кружкам следующие стили слоя.
Шаг 14
Удерживая Ctrl, нажмите на иконку слоя, чтобы сделать выделение. Создайте новый слой.
Выберите Brush Tool и возьмите мягкую кисть среднего размера. Рисуйте около краев.
Снизьте прозрачность слоя до 60%
Шаг 15
Выберите Rounded Rectangle Shape Tool и нарисуйте три прямоугольника как на картинке ниже.
Примените следующие настройки слоя.
Шаг 16
Используя Rounded Rectangle Shape Tool, нарисуйте прямоугольник.
Примените следующие стили слоя.
Примените Stroke с цветами #440000 и #333333
Сделайте выделение слоя. Создайте новый слой и заполните его черным цветом. Примените Noise 20%. Снизьте прозрачность слоя до 15%.
Шаг 17
Выберите Type Tool и напечатайте цифры. Примените следующие настройки стиля слоя.
Шаг 18
Выберите Rounded Rectangle Shape Tool и нарисуйте несколько прямоугольников.
Примените следующий стиль слоя.
Шаг 19
Напечатайте цифру 1 на первом прямоугольнике и примените следующие стили слоя.
Наберите другие цифры.
Шаг 20
Наберите оставшиеся цифры.
Шаг 21
Сделайте выделение всех прямоугольников, создайте новый слой, заполните его черным цветом.
Примените Noise 14-15%
Измените прозрачность на 15%.
Шаг 22
Нарисуйте еще один прямоугольник, используя Rounded Rectangle Tool и примените к нему те же стили слоя.
Измените только цвета градиента и обводки.
Шаг 23
Скопируйте один из текстов и поместите его на зеленую кнопку. Поменяйте текст на Call. Измените стили слоя наоборот. С черного на белый и с белого на черный.
Создайте еще один прямоугольник и примените ему те же стили слоя.
Шаг 24
Измените цвет на красный и наберите текст Dial No.
Заключение
Вот мы и закончили второй урок. Скоро начнется третий! Ну опаздывайте!
