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

Сегодня мы будем создавать с помощью программы Фотошоп макет вебсайта мобильного приложения для iPhone. Мы будем использовать достаточно простые методы для создания нашего макета, а также мы вновь применим несколько техник, использованных в наших предыдущих уроках.

• Скачать архив с материалами к уроку
• ​Урок в формате PSD

Примечание: В источнике урока отсутствуют некоторые изображения. В архиве вы найдёте альтернативный вариант материалов для выполнения урока.

Для начала взглянем на то, что мы должны будем создать. Так выглядит конечный результат нашей работы:

Шаг 1

Создайте новый документ. Установите размеры Ширина (Width) 980, Высота (Height) 1200 пикселей.

Шаг 2

Возьмите изображение воды с пузырьками из дополнительных материалов и поместите его в ваш документ. Возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)), выделите прямоугольник, как на скриншоте ниже, и нажмите клавишу DELETE, это позволит избавиться от фирменного водяного знака внизу изображения.

Шаг 3

Далее, создайте новый слой, нажав сочетание клавиш CTRL + SHIFT + N. Затем, вновь возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)), и с помощью него выделите область высотой 50 пикселей от верхней границы вашего документа. Залейте выделенную область черным цветом (#000000) и установите значение Непрозрачность (Opacity) 58%. Это будет "шапка" нашего сайта (хедер).

Шаг 4

В самом верху нашей шапки, мы должны повторить процедуру из предыдущего шага, т.е. выделить область таким же образом, но только меньшей высоты, также залить ее черным цветом, а значение Непрозрачности (Opacity) поставить 42%. Должно получиться, как на скриншоте ниже. Да, и не забываем все это делать на отдельных слоях!

Шаг 5

На этом шаге нам нужно отчертить нижнюю границу нашего хедера. Для этого возьмите инструмент «Область (горизонтальная строка)» (Single Row Marquee Tool (M)) и выделите область на нижней границе нашей "шапки" сайта. Залейте ее белым цветом (#FFFFFF) и установите значение Непрозрачность (Opacity) 24%.

Шаг 6

После этого, мы добавим логотип и навигационное меню в наш хедер. В качестве логотипа используем просто текст. Для него возьмите шрифт League Gothic, размер 40 пунктов, а для навигации возьмите шрифт Arial Bold, размер 13 пунктов. Цвет и для логотипа, и для меню используйте белый (#FFFFFF).

Шаг 7

Далее, поместите заранее подготовленное изображение айфона в наш документ. Затем, с помощью инструмента «Прямоугольная область» (rectangular marquee tool(М)) нарисуйте экран айфона, и залейте его белым цветом (#FFFFFF).

Шаг 8

Теперь, перенесите изображение обоев в стиле Win7 в ваш документ. Убедитесь, что данный слой находится над слоем с экраном, нарисованным в прошлом шаге. Кликните правой клавишей мышки по слою с обоями, и выберите во всплывающем меню пункт Создать обтравочную маску (Create Clipping Mask). Отрегулируйте расположение данного изображения, чтобы оно корректно отображалось на экране нашего смартфона.

Шаг 9

Вот так выглядит экран нашего айфона с логотипом. Для текста мы использовали шрифт League Gothic, размер 21 пункт, а изображение капель мы взяли из набора заказных фигур из дополнительных материалов.

Шаг 10

Теперь, добавим текстовый блок рядом с изображением девайса. Для создания текста возьмите шрифт Arial Regular, размер 13 пунктов. Заголовок оформите шрифтом League Gothic, размер 39 пунктов. Также добавьте изображение кнопки AppStore из дополнительных материалов. Перед, тем как установить кнопку, ее необходимо вырезать из общего файла.

Шаг 11

Возьмите инструмент «Прямоугольная область» (rectangular marquee tool (М)) и выделите нижнюю часть вашего холста. Для этого предварительно создайте новый слой.

Шаг 12

Далее, мы зальем эту выделенную область не просто сплошным цветом, а применим к ней градиент с помощью стиля слоя (layer style). Параметры для Наложения градиента (Gradient Overlay) должны быть следующие:

• Цвета градиента от #ffffff k #eeecec

• Режим наложения (Blend mode): Нормальный (Normal)
• Непрозрачность (Opacity): 100%
• Стиль (Style): Линейный (Linear)
• Угол (Angle): 90
• Масштаб (Scale): 100%

Шаг 13

После этого добавляем иконки и текст. Иконки берем из дополнительных материалов.

Заголовки для текстовых блоков выполняем с помощью шрифта Arial Bold, размер 19 пунктов. Контентная часть выполняется с помощью шрифта Arial Regular, размер 13 пунктов, цвет для обеих частей - #3f3f3f.

Шаг 14

Что касается оформления блока с твитами, то здесь было решено применить шрифт Georgia Italic, размером 16 пунктов, цвет #7f7f7f, логотип твиттера в виде птички берем из дополнительных материалов. Цвет ссылки #1161a9.

Далее, с помощью инструмента «Прямоугольная область» (rectangular marquee tool (М)) выделяем область для футера и заливаем ее цветом #ebeaea.

Шаг 15

Теперь, при помощи инструмента «Область (горизонтальная строка)» (Single Row Marquee Tool (M)) отрисуем верхнюю границу нашего футера и зальем ее цветом #bcbbbb, непрозрачность (Opacity) понижаем до 40%.

Шаг 16

В левую часть футера добавляем текстовый логотип, в правую часть добавляем навигационное меню. Для этого применяем шрифт Arial Regular, цвет #555555. И логотип, и навигацию прописываем в верхнем регистре.

И вот, наш макет готов!

Используя простые техники, вы можете создать великолепный макет, вам только нужны идея и цель, к которой вы по-настоящему будете стремиться. Надеюсь, после данного урока вы усвоили, чтобы отточить свои навыки, вы должны бросить вызов самому себе и создавать больше различных макетов.

Автор: sanjay

Источник: sanjaykhemlani.com