• Создаем дизайн и кодируем приложение на iPhone в стиле 80' Часть 2
  • Создаем дизайн и кодируем приложение на iPhone в стиле 80' Часть 1
  • Скачать .PSD исходник можно здесь

    Добро пожаловать на вторую часть урока «Создаем дизайн и кодируем приложение на iPhone в стиле 80′, в котором мы научим вас всем нужным шагам для того, чтобы сделать дизайн и код приложения. В этом туториале мы закончим интерфейс приложения.

    Шаг 1
    Выберите Rounded Rectangle tool rounded_rectangle.gif и ставим радиус углов на 15px. Удерживая Shift, нарисуйте маленький квадрат. Расположите его под полосой, на которой написано Background. Правый клик на слое и примените Drop Shadow, Inner shadow с настройками как на картинках ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените Color Overlay с тем же цветом что и фон приложения.

    Шаг 2
    Скопируйте слой. Удерживая Shift переместите его направо с помощью Move tool move.gif. Примените к нему те же стили слоя, но поменяйте Color Overlay.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создайте новую папку и переместите все фигуры в нее. Скопируйте папку и переместите ее под полоску, на которой написано Key Color с помощью Move tool move.gif. Повторите этот шаг еще раз и поместите третью папку в самый низ.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 3
    Удалите Color overlay во всех слоях второй папки и примените Gradient Overlay.
    Создайте два новых градиента как на картинке ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Скопируйте стиль слоя и вставьте его в другие.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Откройте Стили слоя для второго слоя и измените цвета градиента, как на картинке ниже. Проделайте то же самое с другими квадратами.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 4
    Вставьте тот же стиль слоя в слои, которые находятся в папке Screen Color. Только примените другие цвета.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 5
    Сделайте иконку Settings активной. Как это сделать написано в первом уроке.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 6
    Скопируйте один из квадратов и поместите его под полосой Preset Themes. Примените Gradient Overlay со следующим расположение цветов: 0, 49, 50, 74, 75, 100.
    Примените цвета как на картинке ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Проделайте тоже самое с другими квадратами, но с другими цветами.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 7
    Скопируйте папку Settings и назовите ее Telephone. Спрячьте оригинальный слой Settings и удалите все color swatches, category bars и названия. Сделайте иконку телефона активной.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 8
    Выберите слой верхней панели и идите в Edit > Transform > Free Transform. Поставьте высоту на 70%.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Выберите Rectangular Marquee Tool rectangular_marquee.gif и измените размеры выделения: ширина — 30px, высота — 960px.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Закрасьте область выделения черным цветом.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Проделайте то же самое, только размеры нижнего выделения будут 640х30px.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 9
    Выберите Rectangular Marquee tool и поставьте настройки по умолчанию. Сделайте выделение серой зоны. Идите в Edit > Modify > Smooth. Поставьте радиус 20px. Правый клик и нажмите Select Inverse.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Выберите Brush Tool brush.gif и заполните выделение черным цветом.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените следующие настройки для Gradient Overlay.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 10
    Выберите Rounded Rectangle Shape tool и сделайте прямоугольник как на картинке ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Удерживая Ctrl нажмите на иконку слоя, чтобы выделить его. Выберите бежевый слой и нажмите Delete.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Проделайте то же самое с правой частью.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Переместите выделение левее и приравняйте его с краями. Правый клик и выберите Select Inverse. Сотрите угол ластиком.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    То же самое с другой стороны.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 11
    Откройте стили слоя и примените Stroke размером 3px вне края.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 12
    Сделайте выделение, удерживая Ctrl и нажимая на иконку слоя. Создайте новый слой и заполните его белым цветом. Идите в Filter > Noise > Add Noise и примените Noise 40%.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Измените режим смешивания на Multiply и прозрачность 10%.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 13
    Выберите Elliptical Shape Tool. Удерживая Shift, нарисуйте маленький кружок.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Скопируйте его много раз и расположите как на картинке ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените ко всем кружкам следующие стили слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 14
    Удерживая Ctrl, нажмите на иконку слоя, чтобы сделать выделение. Создайте новый слой.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Выберите Brush Tool и возьмите мягкую кисть среднего размера. Рисуйте около краев.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Снизьте прозрачность слоя до 60%
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 15
    Выберите Rounded Rectangle Shape Tool и нарисуйте три прямоугольника как на картинке ниже.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените следующие настройки слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 16
    Используя Rounded Rectangle Shape Tool, нарисуйте прямоугольник.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените следующие стили слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените Stroke с цветами #440000 и #333333
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Сделайте выделение слоя. Создайте новый слой и заполните его черным цветом. Примените Noise 20%. Снизьте прозрачность слоя до 15%.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 17
    Выберите Type Tool и напечатайте цифры. Примените следующие настройки стиля слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 18
    Выберите Rounded Rectangle Shape Tool и нарисуйте несколько прямоугольников.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените следующий стиль слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 19
    Напечатайте цифру 1 на первом прямоугольнике и примените следующие стили слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Наберите другие цифры.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 20
    Наберите оставшиеся цифры.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 21
    Сделайте выделение всех прямоугольников, создайте новый слой, заполните его черным цветом.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Примените Noise 14-15%
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Измените прозрачность на 15%.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 22
    Нарисуйте еще один прямоугольник, используя Rounded Rectangle Tool и примените к нему те же стили слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *
    Измените только цвета градиента и обводки.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 23
    Скопируйте один из текстов и поместите его на зеленую кнопку. Поменяйте текст на Call. Измените стили слоя наоборот. С черного на белый и с белого на черный.
    Создайте еще один прямоугольник и примените ему те же стили слоя.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Шаг 24
    Измените цвет на красный и наберите текст Dial No.
    Создаем дизайн приложения на iPhone 80' Часть 2 *

    Заключение
    Вот мы и закончили второй урок. Скоро начнется третий! Ну опаздывайте!