Рубрика: Photoshop Уроки | Урок прочитали: 1683
 (голосов: 1)

Дизайн мобильного приложения в Фотошоп

В этом уроке я покажу Вам, как создать дизайн для приложения записной книжки.

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

  1. Деревянный пол
  2. Мобильный телефон

Шаг 1

Создайте новый документ размером 640х960 пикселей, с разрешением 326.

Шаг 2

Создайте группу и назовите ее «Background». Откройте изображение деревянного пола и перенесите его в основной документ. Уменьшите слой с полом, отразите его (Ctrl + T) и примените стили слоя Наложение цвета и Наложение градиента:

Шаг 3

Создайте новую группу и назовите ее «Header». Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте фигуру, как на скриншоте. Активируйте инструмент Горизонтальный текст (Horizontal Type Tool) (T), выберите шрифт Font to Myriad Pro, жирный, размер 5.32 pt  и напишите слово «iPhone» в верхнем левом углу.

Измените размер шрифта на 6.21 pt и по центру документа напишите «13:15 PM». Инструментом Прямоугольник (Rectangle Tool) (U)  в верхнем правом углу документа нарисуйте фигуру батареи.

Шаг 4

Создайте новую группу с названием «Left Button». Инструментом Перо (Pen Tool) (P) нарисуйте фигуру, как на скриншоте. Для фигуры используйте цвет #131313. Уменьшите параметр Заливка (Fill) для этой фигуры до 10% и примените некоторые стили слоя Тиснение/Скос и Наложение градиента.

Инструментом Перо (Pen Tool) (P) нарисуйте еще одну над предыдущей. Для второй фигуры используйте цвет #776855 и также примените стили слоя: Тень, Внутреннее свечение, Наложение градиента, Обводка.

Шаг 5

Инструментом Горизонтальный текст (Horizontal Type Tool) (T) напишите слово «Back». Для написания текста используйте шрифт Font Arial, начертание Regular, К этому слою также примените стили Тиснение/Скос:

Шаг 6

Повторите шаги 4 и 5, чтобы нарисовать дополнительные кнопки:

Шаг 7

Создайте новую группу с названием «Dots». Инструментом Эллипс (Ellipse Tool) (U) и нарисуйте четыре черных круга (#000000). Уменьшите параметр Заливка (Fill) до 50% и примените стили слоя Тень.

Также, нарисуйте другой круг, поменьше, белого цвета (#ffffff) и также примените стили слоя Тень:

Шаг 8

Создайте новую группу с названием «Body». Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) с радиусом в 2 пикселя, нарисуйте фигуру, используя цвет #e8e5e5 . К фигуре примените стили слоя: Тень, Внутреннее свечение, Обводка.

Шаг 9

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) нарисуйте фигуру немного больше, чем в предыдущем шаге. Для рисования используйте цвет #e9e5e6, а затем примените стили слоя: Внутреннее свечение, Обводка.

Шаг 10

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) нарисуйте фигуру большего размера, чем в предыдущем шаге. Для рисования используйте цвет #f1f1f1 и примените стили слоя: Внутреннее свечение, Обводка.

Шаг 11

Создайте новую группу и назовите ее «Lines», выберите инструмент Прямоугольник (Rectangle Tool) (U) и цветом #d1d1d1 нарисуйте маленькие горизонтальные линии. Теперь, этим же инструментом, нарисуйте большие горизонтальные линии цветом #7e7e7e.

Шаг 12

При помощи инструмента Прямоугольник (Rectangle Tool) (U) нарисуйте вертикальные линии, используя цвет #b2b2b2. Также, нарисуйте две линии цветом #e73232 на левой и правой стороне:

Шаг 13

Выберите слой с последним листом бумаги и удерживая клавишу Ctrl , выделите группу «Lines Group». Дублируйте группу и преобразуйте ее в смарт-объект. Инструментом Лассо (Lasso Tool) (L) нарисуйте выделение, как показано на скриншоте и добавьте слой-маску:

Шаг 14

К смарт-объекту, созданному в предыдущем шаге примените команду Деформация (Редактирование – Трансформирование – Деформация) (Edit > Transform > Warp). Исказите фигуру, как на скриншоте. Маленькую жесткую кисть и закрасьте область под смарт-объектом.

Инструментом Прямоугольная область выделения с зажатой клавишей Shift, загрузите выделение, как показано на скриншоте и удалите выделенную область. Уменьшите непрозрачность до 25%.

Шаг 15

Поработаем с верхней частью смарт-объекта. Выберите кисть маленького размера и черный цвет (#000000), создайте новый слой, добавьте к нему обтравочную маску и нарисуйте две линии, как на первом скриншоте. Уменьшите непрозрачность слоя до 10%.

Снова создайте новый слой с обтравочной маской и кистью с белым цветом (#ffffff) закрасьте правую сторону смарт-объекта.

Шаг 16

Создайте новую группу с названием «Margin». Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) с радиусом 4 пикселя, нарисуйте фигуру, как на скриншоте. Для рисования используйте цвет #e0dcdc , а затем примените стили слоя: Тиснение/Скос, Обводка.

Шаг 17

Выберите инструмент Произвольная фигура (Custom Shape Tool) (U) и из списка фигур выберите фигуру Circle Frame. Нарисуйте фигуру цветом #c4c4c4 и примените к ней стили слоя. Уменьшите параметр Заливка (Fill) до 65% и примените стили слоя. Инструментом Эллипс (Ellipse Tool) (U) нарисуйте маленький круг (#ffffff) в центре фигуры  Circle Frame и уменьшите параметр Заливка до 65%:

Шаг 18

Создайте группу с названием «Slider» и инструментом Прямоугольник со скругленными краями (Rounded Rectangle Tool) (U) с радиусом 2 пикселя, нарисуйте фигуру, как на скриншоте. Для рисования используйте цвет #272727, а затем измените режим наложения на Перекрытие (Overlay).
Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) нарисуйте другую фигуру, похожую на первую (для рисования используйте цвет #323232).

Шаг 19

Создайте новую группу и назовите ее «Text». Инструментом Горизонтальный текст (Horizontal Type Tool) (T) шрифтом Font to Myriad Pro с размером  7. 97 pt напишите текст.

Шаг 20

Инструментом Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U) с радиусом 2 пикселя, нарисуйте фигуру, как на скриншоте. Поместите эту фигуру над словом «eat breakfast and take the trash out».

Шаг 21

Создайте группу с названием «Nail». Инструментом Перо (Pen Tool) нарисуйте фигуру, как показано на скриншоте и залейте ее цветом #646466 . Затем, маленькой кистью с черным цветом ( #000000) нарисуйте обводку с правой стороны слоя «nail». К этому слою добавьте обтравочную маску и снизьте непрозрачность до 43%.

Нарисуйте еще одну обводку маленькой кистью с цветом #8e8e90. Инструментом Эллипс (Ellipse Tool) (U) нарисуйте маленький эллипс, используя цвет #838390 и примените фильтр Размытие по Гауссу (Фильтр – Размытие – Размытие по Гауссу) (Filter > Blur > Gaussian Blur). Используйте для размытия радиус в 2 пикселя. Дублируйте этот слой (Ctrl + J), уменьшите и помесите с краю.

Шаг 22

Дублируйте группу «Nails Group» четыре раза и разместите дубликаты так, как на скриншоте:

Финальное изображение:

Автор: Paul Flavius

           

Похожие файлы и публикации:

Дизайн мобильного приложения в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Дизайн мобильного приложения в Фотошоп
В этом уроке я покажу, как нарисовать реалистичную фотопленку.
Дизайн мобильного приложения в Фотошоп
В этом уроке я покажу, как создать стильную кнопку контактов. Это достаточно простой урок, который смогут выполнить даже те, кто совсем недавно изучают программу Фотошоп.
Дизайн мобильного приложения в Фотошоп
Приближается самый волшебный праздник – Новый год! Пора начинать подготовку, в этом уроке мы создадим простую новогоднюю открытку.
Дизайн мобильного приложения в Фотошоп
Откройте Фотошоп и создайте новый документ  (Ctrl + N). Установите те параметры документа, которые Вы видите на скриншоте и нажмите ОК. Теперь добавьте к документу сетку через меню Просмотр – Показать – Сетка (View > Show > Grid) и включите привязку к ней: Просмотр – Привязать – Сетка (View > Snap To > Grid). Для начала работы нужно проставить сетку через каждые 5 пикселей.
Дизайн мобильного приложения в Фотошоп
В этом уроке я покажу, как создать макет для бизнес-сайта.
Дизайн мобильного приложения в Фотошоп
В этом уроке мы создадим кофейный стакан, используя векторные фигуры и стили слоя в Adobe Photoshop CS6.
Дизайн мобильного приложения в Фотошоп
В этом уроке мы создадим фотореалистичную картонную бирку, используя базовые средства Adobe Photoshop CS6.
Дизайн мобильного приложения в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Дизайн мобильного приложения в Фотошоп
Вот такой домик получится после данного урока
Дизайн мобильного приложения в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Дизайн мобильного приложения в Фотошоп
Финальный результат
Дизайн мобильного приложения в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Дизайн мобильного приложения в Фотошоп
В этом уроке мы с помощью программы Фотошоп создадим танец красок!
Дизайн мобильного приложения в Фотошоп
31 октября состоится страшный праздник "Halloween"! Какой же праздник без тыквы?
Дизайн мобильного приложения в Фотошоп
Сегодня мы будем создавать фото-реалистичную беспроводную клавиатуру от Apple.
Дизайн мобильного приложения в Фотошоп
В этом уроке Вы узнаете, как создать стильный музыкальный мини плеер, используя векторные инструменты фотошоп и стили слоя.
Дизайн мобильного приложения в Фотошоп
В этом уроке я покажу, как создать макет сайта на футбольную тематику.
Дизайн мобильного приложения в Фотошоп
В этом уроке я покажу, как нарисовать красную сумку для покупок. В этом уроке будут приведены основные приёмы рисования, такие как создание фигур, затемнение, и добавление теней.