Photoshop-help.ru » Уроки фотошоп » Веб-дизайн » Создание макета сайта для приложений под iPhone

Создание макета сайта для приложений под iPhone

Этот урок поможет вам создать макет сайта для продвижения iPhone/iPad-приложений.
Я использовал для этого урока векторный пейзаж из запасов grafpedia.com, а также некоторые иконки, которые нашел на этой сайте и некоторые иллюстрации с тематического сайта http://culturedcode.com/things/iphone/.

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

Шаг 1: Создаём холст

Открываем Photoshop, а затем перейдите в меню Файл> Новый и введите следующие значения: Ширина 1 000 пикселей, Высота 1 200 пикселей.

Нажмите кнопку ОК. Ваш новый холст появится на экране. Откройте палитру слоев (чтобы её открыть, перейдите в меню Окно> Слои (Window> Layers)).

Создайте новый слой и назовите его «фон шапки». Установите цвет переднего плана на синий # 3288c3. Используйте инструмент Прямоугольная область (Rectangular Marquee Toll (M)), чтобы создать выделение размером 1000x450 пикселей, затем с помощью инструмента Заливка (Paint Bucket Tool (G з)) залейте выделение выбранным цветом.

Теперь добавьтеградиент на синий блок. Чтобы это сделать, перейдите в меню Слои> Стиль слоя> Наложение градиента (Layer> Layer Style> Gradient Overlay).

Шаг 2: Создаем первое меню

Меню, включая логотип и набор ссылок, будет находиться в верхней части шаблона. Тень будет добавлена под ним. Для создания тени, создайте один новый слой и назовите его «тень».Установите основной цвет на черный, а затем выберите инструмент Градиент (Gradient Overlay (G)), на панели управления выбранным инструментом сделайте градиент от чёрного цвета к прозрачному и выберите Радиальный градиент. Теперь наложите градиент на ваше изображение сверху вниз (см. рисунок ниже).

Чтобы закончить его, добавить Слой-маску на слой «тень» с левой и правой сторон. Зайдите в меню Слои> Слой-маска> Показать всё (Layer> Layer Mask> Reveal All). Создайте Градиент (Gradient Overlay) справа и слева.

Создайте новый слой и назовите его «фон». Выберите инструмент Прямоугольная область (Marquee Tool (M)), чтобы создать выделение фиксированного размера 1000 х 40 пикселей. Заполните это выделение белым цветом и уменьшите Непрозрачность до 40%.

Добавьте Слой-маску к этому слою и сделайте тень в верхней части меню.

Что касается логотипа, введите имя вашего сайта (я использовал шрифт Androgyne). Затем добавьте к этому тексту три стиля слоя: тень, внутренняя тень, наложение градиента.

Чтобы закончить меню добавьте блок ссылок справа (шрифт: Helvetica). Для активной ссылки я использовал прямоугольник с закругленными углами с синим цветом # 3d85c1.

См. ниже конечный результат меню.

Шаг 3: Создаём заголовок

Создайте сначала новую группу и назовите ее «заголовок». С помощью Инструмента Горизонтальный текст (Text Tool (T)) добавьте название сайта. В моем примере я использовал шрифт Androgyne.

Чтобы придать стиль тексту, уменьшите Непрозрачность второго слоя до 60%. Для названия добавьте те же стили слоя, которые добавляли на логотип. Теперь создадим кнопку. Для начала создайте новую группу и назовите ее «кнопки». Для её создания используйте инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)), задайте Радиус в 6 пикселей.

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

Используя инструмент Элипс (Ellipse Tool (U)) создайте окружность на кнопке (не забудьте нажать клавишу Shift, чтобы создать идеальный круг).

Добавьте два стиля слоя на круг: тень и внутренняя тень.

Далее возьмите инструмент Произвольная фигура (Custom Shape Tool (U)) и создайте маленькую треугольную стрелочку в центре круга. Примените к стрелочке стиль слоя тень.

И в завершении возьмите инструмент Горизонтальный текст (Text Tool (T)) и с помощью него добавьте название. В качестве стилей слоя добавьте тень и обводку.

Шаг 4: Облака

Чтобы создать облака скачайте векторный пакет, представленный на этой странице.
Далее импортируйте облака один за другим, чтобы создать полную линию.

Объедините все слои с облаками в одну группу, назовите её «облака». Добавьте Режим наложения на эту группы. Далее возьмите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и инструмент Заливка (Paint Bucket Tool (B)) чтобы вырезать облака (см. рисунок ниже).

Скачайте изображение iPhone с этой страницы: http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/. Откройте PSD-файл и перетащите iPhone на ваш макет. Дублируйте слой с iPhone и уменьшите его размер на 5%. С помощью инструмента Перемещение (Move Tool (V)) поместите дубликат слева от первого iPhone.

С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте описание программного обеспечения, установите цвет текста на голубой # 2a638c и добавьте стрелки.

Шаг 5: Некоторые штрихи

Откройте файл с векторным изображением самолёта. Скопируйте и вставьте самолет в правом верхнем углу вашего названия.

Затем также птиц.

Теперь необходимо создать список ссылок с помощью инструмента Горизонтальный текст (Text Tool (T)). Что касается активной ссылки, просто создайте прямоугольник с закругленными углами (используйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с Радиусом 6 пикселей).

Шаг 6: Контент

Страница будет состоять из двух блоков. Первый блок с более подробной информацией о программном обеспечении (скриншот и текст), а второй со ссылками для загрузки.
Для первого блока создайте новую группу и назовите ее «детали». Создайте новый слой. Сделайте выделение размером в 880x220 пикселей. Залейте выделение белым цветом. Примените тот же метод для второго блока, но с этим цветом # 4f9aca. Переместите выделение на 2 пикселя вниз и нажмите клавишу Del. Останется лишь тоненькая голубая каёмочка.

Создайте новую группу и назовите ее «бокс1». Далее создайте прямоугольник со скругленными углами размером в 150x80 пикселей с тем же синим цветом, используемым ранее.

Добавьте в него фотографию.

Дублируйте эту группу ещё 5 раз и разместите полученные блоки в два ряда с расстоянием в 20 пикселей между каждым из них. Чтобы имитировать эффект при наведении, измените цвет прямоугольника одного из блоков на оранжевый: # ff7f2a. Затем создайте новый слой, сделайте выделение фотографии. Залейте его черным цветом и измените Непрозрачность до 40%.

Чтобы закончить этот шаг откройте файл zoom.psd со значком увеличения и поместите его над активным блоком.

С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте название справа от 6-ти скриншотов.

Добавьте ещё два блока с текстом. Слева от текста поместите иконки с сайта: http://www.iconfinder.com/search/?q=iconset% 3Afatcow

Шаг 7: Второй блок ссылок

Создайте новую группу для второго блока ссылок. Сделайте то же самое, что сделали для первого блока, отличаться он будет лишь размещением голубой каймы внизу (а не на верху, как у первого блока). С помощью инструмента Горизонтальный текст (Text Tool (T)) добавьте гиперссылки (шрифт Helvetica, размер 12 пикселей). Создайте синий прямоугольник под активную ссылку.

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

Еще раз возьмите инструмент Горизонтальный текст (Text Tool (T)) и добавьте название, главы и оранжевую ссылку.

Шаг 8: Импорт пейзажа

Для создания ландшафта не может быть ничего проще, чем использовать векторный пейзаж! Откройте файл с пейзажем программой Adobe Illustrator, а затем скопируйте его и вставьте в ваш холст (из Illustrator в Photoshop). Наслаждайтесь, делая свой собственный пейзаж, импортируя цветы, деревья, облака и т.д.

Создайте новый слой и поместите его под слой с именем «пейзаж». Установите основной цвет на бледно-голубой # d1f3ff, выберите инструмент Градиент (Gradient Tool (G)) и создайте градиент от основания до вершины. Следует выбрать линейный градиент, цвет от бледно-голубого до прозрачного.

Теперь добавьте на макет кнопку «AppStore». Чтобы создать эту кнопку воспользуйтесь бесплатным файлом по адресу: http://corrupteddevelopment.com/customizable-app-store-download-buttons/, только измените немного градиент и контуры цветов.

Создайте новый слой и поместите его над всеми слоями определяющими нижнюю часть макета. Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и создайте активное выделение с размером 1000x45 пикселей в нижней части макета. Заполните выделение зеленым цветом # 137109 и перейдите в меню Слои> Стили слоя> Внутренняя тень (Layer> Layer Style> Inner shadow), добавьте стиль. Далее, используя инструмент Горизонтальный текст (Text Tool (T)), добавьте копирайты.

Теперь перейдите на сайт iconfinder.com и скачайте подходящие иконки социальных сетей и импортируйте их в ваш документ. Поместите эти иконки на правой нижней стороне и наложите цвет на каждый значок (меню Стили> Стиль слоя> Наложение цвета ( Layer> Layer Style> Colour overlay)).