Разработка дизайна для стильного сайта мобильных приложений в темных тонах

В этом уроке мы покажем, как при помощи Adobe Photoshop создаются глянцевые шаблоны для сайтов с мобильными приложениями. Мы рассмотрим ряд техник, включающий работу с фигурами, использование текстур, масок, пользовательских иконок, шрифтов и множество других, которые можно легко кастомизировать и применить к своим собственным работам.

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

1 Шаг

Начнем с создания нового документа, кликнув File > New. Задайте Width и Height для холста равными 1100px, разрешение 72dpi и фон белого цвета.

Теперь нам нужно создать две направляющих, которые будут служить рамками нашей страницы. Откройте View > New Guide… Для первой направляющей задайте Vertical Orientation и Position — 70px. Вторую направляющую создайте точно также (View > New Guide…) с вертикальной ориентацией и Position на отметке 1030px.

В итоге у вас должна получиться ограниченная область шириной точно в 960px.

2 Шаг

Следующим шагом будет создание фона. Переключитесь на Paint Bucket Tool (G) и задайте основным цветом #1E1E1E. Затем залейте им фоновый слой, кликнув по холсту курсором инструмента.

Давайте придадим фону немного фактуры, выбрав Filter > Noise > Add Noise… В появившемся окне задайте значение Amount равным 2.5 и нажмите Ok.

3 Шаг

Теперь нам нужно создать световое пятно, призванное притягивать взгляд к верхней части страницы. Переключитесь на Brush Tool (B), задайте Master Diameter кисти равным 400px и Hardness 0%.

Создайте новый слой, кликнув Layer > New > Layer и назовите его “Spotlight”.

Смените основной цвет на #FFFFFF (белый) и поставьте пятно в верхней части холста при помощи Brush Tool (B).

Чтобы добиться более реалистичного смешения пятна с фоном, давайте придадим ему немного шума, выполнив Filter > Add Noise… Задайте значение Amount равным 20, отметьте опцию Monochromatic и нажмите Ok.

Теперь чуть смажем текстуру, применив к слою Filter > Blur > Gaussian Blur… Задаем значение Radius равным 50.0 и жмем Ok.

Осталось установить Opacity для слоя “Spotlight” равным 25%.

4 Шаг

Теперь займемся нанесением значимой графики. В этом уроке я использовал превосходный векторный iPhone 4, который можно скачать по этой ссылке. Но не забывайте, что для этих целей может подойти совершенно любая модель телефона, удовлетворяющая вашим нуждам (Android, Blackberry и т.д.).

Загрузите скачанный PSD файл в Photoshop.

Разверните папку “Phones”, которая находится на палитре Layers, правой кнопкой мыши кликните по папке “FRONT” и выберите пункт Duplicate Group… Задайте дублю какое-нибудь удобочитаемое имя (я задал “iPhone”), в качестве Destination выберите “Leaflet” (это название нашего основного файла, либо укажите то, которое задавали ему вы) и нажмите OK. После этого закройте текущий PSD.

4a.jpg

Расположите наш первый iPhone вплотную к левой направляющей и примерно на расстоянии 100px от верхнего края холста.

Сейчас также самое время сменить скриншот на нашем телефоне.

Для этого разверните папку “iPhone” на палитре Layers, кликните по папке “SCREEN CONTENTS” и выполните File > Place. В появившемся меню выберите свой скриншот и нажмите Place.

Перетащите полученный в результате слой на телефон и подгоните его размеры по дисплею (Ctrl + T для вызова инструмента Free Transform). Как закончите с размерами жмите Enter для сохранения изменений.

Продублируйте группу “iPhone”, выбрав Layer > Duplicate Group… Назовите ее “iPhone 2” и кликните Ok.

Выполните Edit > Transform > Scale и увеличьте дубль под 107.0% по ширине и высоте. Расположите второй телефон примерно в 50px от верхнего края холста и в 200px от его левого края.

Смените также скриншот на экране второго телефона, проделав уже описанные выше действия.

5 Шаг

Последним штрихом в работе с нашими iPhone’ами будет создание их отражения. Выделите обе группы с iPhone (“iPhone” и “iPhone2”), далее выполните Layer > Duplicate Layers… и нажмите OK. Затем выполните Layer > Merge Layers, это сольет дубли в один слой.

Далее нам нужно отразить дубли по вертикали. Выполните Edit > Transform > Flip Vertical и расположите отраженные слои строго под их оригиналами.

Добавьте к слою маску, кликнув по соответствующей иконке на палитре Layers.

Переключитесь на Gradient Tool (G) и выберите заливку цвета от черного к белому. Растяните градиент по отраженным iPhone’ам, идущий сверху вниз, на расстояние порядка 50px в длину.

В конце сведите Opacity слоя в район 30%.

6 Шаг

Следующим шагом будет нанесение основных элементов по правую сторону графики. Перед тем как начать вынесите еще одну направляющую, при помощи которой мы будем поддерживать наши элементы в надлежащем порядке. Выберите View > new Guide… обозначьте “Vertical” для Orientation и задайте 550px для Position.

Примерно в 100px от верхнего края холста мы нанесем лого. Я использовал заранее приготовленный логотип, вы же можете просто нанести какую-нибудь надпись, или нарисовать свой.

Ниже лого нанесем небольшой абзац текста с описанием нашего сайта. Переключитесь на Horizontal Type Tool (T) и растяните прямоугольник между центральной и крайней правой направляющей. Сконфигурируйте шрифт таким образом:

  • Font Family: Helvetica Neue
  • Size: 16 px
  • Style: Regular
  • Leading: 26 px
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

7 Шаг

Далее мы создадим кнопку для осуществления заказа. При помощи Rounded Rectagle Tool (U) нарисуйте прямоугольник размерами 240x75px с радиусом закругления углов в 4px. Выровняйте его так, чтобы левый край кнопки касался центральной направляющей, а отступ от текста составлял 45px.

Теперь зададим слою немного стилей. Выполните двойной клик по слою с кнопкой на палитре Layers и задайте следующие параметры:

Для вставки значка Apple растяните небольшой текстовый блок при помощи Text Tool (T) внутри кнопки и вставьте в него символ , задав ему следующие параметры:

  • Font Family: Helvetica Neue
  • Size: 50 px
  • Style: Regular
  • Anti-aliasing: Crisp
  • Color: #000000

Затем сведите Opacity текстового слоя до 30%.

Создайте еще один текстовый блок справа от значка и внесите в него еще две строчки с текстом (к примеру: “Download now on the App Store”). Примените к шрифту следующие параметры:

  • Font Family: Helvetica Neue
  • Size: 11 px (first line) 24 px (second line)
  • Style: Bold
  • Leading: 26 px
  • Tracking: -25
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

Примените к слою стили, используя следующие настройки:

Сейчас добавим разделитель справа от текста, который мы до этого создали. Переключитесь на Line Tool (U) и, удерживая клавишу Shift, растяните линию шириной в 1px сверху донизу кнопки. Затем смените цвет линии на “FFFFFF” (белый).

Смените Opacity этой линии до 15% и продублируйте ее, выделив слой и выполнив Layer > Duplicate Layer… и нажмите OK. Смените цвет дубля на #000000 (черный) и сведите его Opacity к 10%. Затем передвиньте дубль на 1px левее от белой полоски.

Последним элементом, который остается добавить на кнопку, будет иконка, обозначающая возможность скачивания. Начнем с того, что переключимся в режим Ellipse Tool (U) и растянем круг диаметром порядка 25px.

Затем добавьте следующие стили:

В конце концов, переключитесь на Custom Shape Tool (U) и выберите фигуру со стрелочкой (в моем случае это была стрелка с названием “Arrow 9” из стандартного набора фигур). Поместите внутрь круга маленькую стрелочку шириной в 10px и задайте ей белый цвет (#FFFFFF).

8 Шаг

Теперь нам нужно нарисовать небольшой шильдик для отображения цены нашего продукта. Переключитесь на Rounded Rectangle Tool (U), задайте радиус закругления углов порядка 4px и растяните прямоугольник, немного перекрывающий кнопку для скачивания, высотой 52px и не менее 100px шириной.

Смените цвет элемента на “2B2B2B” и поместите его слой за слой с кнопкой на палитре Layers.

Далее добавьте обвод к этому прямоугольнику при помощи стиля Stroke со следующими значениями:

Теперь на шильдик можно нанести непосредственно цену. Для этого нам понадобится использовать два отдельных текстовых блока, поскольку текст внутри потребует различной стилизации. В первый блок у меня вошло слово “ONLY” со следующими настройками шрифта:

  • Font Family: Helvetica Neue
  • Size: 19 px
  • Style: Bold
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

Во второй текстовый блок пишем уже цену (к примеру “$1.99”) и задаем ему такие настройки:

9 Шаг

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

Переключитесь на Line Tool (U) и, удерживая клавишу Shift, растяните полоску шириной в 1px длинной от левой направляющей к правой. Затем смените цвет направляющей на #000000 (черный).

Смените Opacity этой линии на 80% и продублируйте ее, выполнив Layer > Duplicate Layer… и нажмите Ok. Смените цвет дубля на #FFFFFF (белый) и сведите Opacity слоя к 10%. Затем сдвиньте дублированную полоску на 1px, чтобы она оказалась прямо под черной.

10 Шаг

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

Начнем со скриншотов. Поместите первый скриншот на макет при помощи Fie > Place. Выберите картинку из файл браузера и нажмите Place. Я немного уменьшил свой рисунок и сместил его к левой направляющей.

Выберите слой на палитре Layers и нажмите дважды кнопку “Add Mask” для добавления векторной маски. Затем переключитесь на Rounded Rectangle Tool (U) и задайте радиус закругления углов равным 6px. Растяните поверх скриншота прямоугольник размерами порядка 175x120px.

Теперь добавьте к слою обвод при помощи стиля Stroke с такими параметрами:

Теперь проделайте все изложенные выше манипуляции с каждым своим скриншотом, оставляя между ними отступы по 35px.

11 Шаг

Чтобы отделить блок скриншотов от списка характеристик проведите тонкую в 1px линию на расстоянии в 55px от картинок сверху вниз.

Смените цвет линии на белый #FFFFFF и задайте 5% Opacity.

12 Шаг

Нанесем заглавие, описывающее наши достоинства (я написал “Leaflet Features”). Текст расположите на расстоянии 55px от разделителя и примените к нему следующие параметры:

  • Font Family: Helvetica Neue
  • Size: 24 px
  • Style: Regular
  • Tracking: -10
  • Anti-aliasing: Crisp
  • Color: #FFFFFF

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

  • Font Family: Helvetica Neue
  • Size: 15 px
  • Style: Regular
  • Leading: 28 px
  • Tracking: -10
  • Anti-aliasing: Sharp
  • Color: #8d8c90

Повторите изложенный выше шаг также и для системных требований приложения:

13 Шаг

Чтобы выделить список характеристик, давайте ему придумаем уникальное оформление пунктов.

Сдвиньте список вправо на 25px.

Затем выберите Ellipse Tool (U) и создайте кружок диаметром 9px слева от первого пункта. Смените цвет кружка на #BCE086.

Добавьте к кружку стиль со следующими параметрами:

14 Шаг

Здесь нам нужно продублировать нашу фигурку и выровнять ее по каждому пункту. Сначала дублируйте кружок (выделить, а затем выполнить Layer > Duplicate Layer…). Затем сдвигайте его вниз на 28px (значение Leading, которое мы задавали во время создания списка характеристик).

15 Шаг

Переходя к подвалу нашей страницы, снова используйте технику создания разделителя, изложенную мной на 9 шаге.

16 Шаг

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

Начнем с создания блока размерами порядка 160x40px. Напишите туда что-нибудь и повторите этот процесс еще три раза. Вот примеры подобного текста:

  • Блок 1: Follow @mycompany on Twitter for news and updates.
  • Блок 2: For help & support head to our Support area.
  • Блок 3: Download our press and media kit.
  • Блок 4: Copyright 2010 My Company, LLC.

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

  • Font Family: Helvetica Neue
  • Size: 12 px
  • Style: Regular
  • Leading: 20 px
  • Anti-aliasing: Sharp
  • Color: #5555552

Как вы могли заметить — наши блоки пока не выровнены нужным образом, не волнуйтесь, мы поработаем с этим на следующем шаге.

17 Шаг

Для того чтобы поправить наши дела с выравниванием сначала поместите слои с текстом в футере в отдельную папку и назовите ее “Footer”.

Сначала расположите первый текстовый блок на расстоянии 55px от левой направляющей, а последний блок — вплотную к правой направляющей.

Теперь выберите все четыре слоя в папке “Folder” и переключитесь на Move Tool (V). Кликните по кнопке Align Vertical Centers в меню инструмента Move Tool в верхней части экрана, а затем — по кнопке Distribute Horizontal Centers.

18 Шаг

Сейчас добавим немного кастомных иконок для акцентирования внимания на ссылках.

Переключитесь на Ellipse Tool (U) и нарисуйте круг 36px в диаметре напротив первого текстового блока. Смените цвет этого кружка на белый (#FFFFFF). Затем выполните Layer > Rasterize > Layer.

Теперь нанесем на наш кружок иконку. В качестве первой иконки я взял твиттеровскую букву “t”, которую я скачал здесь.

После скачивания выполните File > Place для загрузки этого файла в свой документ. Затем уменьшите пиктограмму пропорционально по ширине и высоте до 28%, поместите ее в свой белый кружок и нажмите Enter.

Далее выполните клик правой кнопкой мыши по иконке на палитре Layers и выберите пункт Select Pixels. Затем перейдите на слой с кружком на палитре Layers и выполните Edit > Clear.

После этого удалите загруженную иконку твиттера (перетащите этот слой в корзину в нижней части палитры Layers).

Затем сведите Opacity слоя с кругом до 15%.

19 Шаг

Для остальных иконок повторите шаг 18, используя другие иконки Photoshop.

20 Шаг

В качестве завершающего штриха для наших ссылок давайте их немного подкрасим, чтобы они стали чуть заметнее. Переключитесь на Horizontal Text Tool (T), выделите часть текста в каждом из текстовых блоков и смените его цвет на #83B546.

Заключение

Ну, вот и все! Надеюсь, вы не потеряли время даром и вынесли для себя из этого урока максимум полезного, что может оказать вам помощь в других проектах и работах. Удачи!

www.newseason.ru - лагерь энергетик вождь краснокожих детский лагерь.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта webdesign.tutsplus.com, автор перевода указан в начале урока.