Реклама


Рисуем дизайн приложения для iphone
Сегодня мы нарисуем дизайн приложения для iphone. Представим что нам требуется создать дизайн для приложения которое будет в виде социальной сети сохраняющее ваши рекорды (бег, отжимания и так далее).

Для выполнения урока вам потребуется:
Изображение iPhone 5s [1009,83 Kb]
Шрифт [176,46 Kb]


Открываем psd исходник iPhone 5s и находим слой изображения экрана. После чего создаём над ним новый слой и называем его "Изображение на экране".

Рисуем дизайн приложения для iphone


Выбираем инструмент "Градиент" и устанавливаем настройки как на изображении ниже:

Рисуем дизайн приложения для iphone


С зажатой клавишей Ctrl кликаем по слою с изображение и на созданном слое проводим градиент как на изображении ниже:

Рисуем дизайн приложения для iphone


После чего переносим стиль слоя на наш слой:

Рисуем дизайн приложения для iphone


Далее нам нужно написать текст, используя скаченный в самом начале урока шрифт устанавливаем настройки:

Рисуем дизайн приложения для iphone


И пишем текст:

Рисуем дизайн приложения для iphone


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

Рисуем дизайн приложения для iphone


Вот так мы нарисовали кружки:

Рисуем дизайн приложения для iphone


Для удобства объединяем созданные круги в один слой, для этого выделите все эти слои и нажмите на них правой кнопкой мыши и выберите пункт "Преобразовать в смарт объект", а замет сочетание горячих клавиш Ctrl+E:

Рисуем дизайн приложения для iphone


С помощью инструмента перо дорисуйте остальные значки (или можно взять эти значки из скаченного в самом начале psd исходника):

Рисуем дизайн приложения для iphone


Для удобства объедините слои с иконками:

Рисуем дизайн приложения для iphone


Теперь вставляем любое изображение и уменьшаем до нужного размера:

Рисуем дизайн приложения для iphone


После чего используя инструмент "Овальная область" зажимаем клавишу Shift и выделяем круг, после чего нажимаем Ctrl+J и удаляем ненужную часть изображения:

Рисуем дизайн приложения для iphone


Используя тот же шрифт заполняем информацию о юзере и рисуем разделительную полоску с помощью инструмента "Перо":

Рисуем дизайн приложения для iphone


После чего выполняем обводку контура и рисуем по краям белые круги используя инструмент "Эллипс". Заполняем второю часть информации:

Рисуем дизайн приложения для iphone


Теперь переходим к рисованию круга, задав настройки инструмента "Эллипс" рисуем круг, и в этом круге пишем число:

Рисуем дизайн приложения для iphone


Заполним информацию:

Рисуем дизайн приложения для iphone


Теперь, рисуем ещё два круга используя всё тот же инструмент, для центрального круга задаём радиус обводки немного больше что бы добиться следующего результата:

Рисуем дизайн приложения для iphone


Теперь, нажимаем на слой с синим кругом правой кнопкой мыши и выбираем пункт "Растрировать слой" и создаём выделение используя любой инструмент для выделения:

Рисуем дизайн приложения для iphone


Далее заливаем выделенную область красным цветом:

Рисуем дизайн приложения для iphone


И рисуем синий круг задав в настройках стиля слоя обводку белым цветом. В самом круге пишем процент пройденной дистанции:

Рисуем дизайн приложения для iphone


Теперь, под созданным кругом, используя инструмент "Перо" создаём извилистую линию:

Рисуем дизайн приложения для iphone


Выполняем обводку контура и рисуем круг задав с стилях слоя обводку:

Рисуем дизайн приложения для iphone


Теперь заполняем текстовую информацию:

Рисуем дизайн приложения для iphone


Дорисуем кнопки включения и выключения таймера. Для этого нам понадобится инструмент "Прямоугольник со скруглёнными краями"

Вот как должны выглядеть кнопки:

Рисуем дизайн приложения для iphone



Наша работа закончена, я уменьшил изображение что бы оно поместилось на страничку:

Рисуем дизайн приложения для iphone


Предлагаю вашему вниманию исходник [1,31 Mb] урока. Он поможет вам разобраться с построением слоёв.


Информация
Комментировать статьи на нашем сайте возможно только в течении 10 дней со дня публикации.