Темый дизайн сайта

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

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

Детали урока «Создание темного дизайна сайта с глянцем»

В итоге, вы получите следующий дизайн макет сайта в тёмных тонах и с глянцем

Что касается кода

Если вы являетесь пользователем Tuts+ premium, можете сразу перейти к полному коду этого учебника. Эрик подробно расскажет вам, как данный дизайн кодировать в HTML/CSS шаблон!

Для новичков поясню, что Tuts+ Premium – это сервис, предоставляющий топ-возможность обучения и отработки навыков во множестве творческих областей. Предпочитаете ли вы книги, визуальные тренинги или углубленные курсы, мы предоставим вам любую информацию. Хотя, к сожалению, у нас нет возможности предоставлять сервис бесплатно, стоит он всего $19 в месяц – меньше, чем вы потратили бы на ужин.

Так, хорошо, теперь перейдем к бесплатной части дизайна на tut!

О дизайне

Основа этого учебника – чистый дизайн сайта в темных тонах для Leaflet, приложения iPhone, созданного для издателей Envato marketplace. Эрик Элли (Eric Alli) из Trilab Media помогал создавать и кодировать сайт, поэтому сможет пошагово объяснить нам весь учебник. Планируете ли вы применить подобный дизайн в своих проектах, или просто хотите знать, как он сделан – вы сможете почерпнуть из нашего учебника множество отличных приемов и методик. Наслаждайтесь!

Шаг 1

Создание темного дизайна сайта начнем с нового документа Photoshop, выбрав Файл/File > Новый/New. Установите Ширину/Width и Высоту/Height холста на 1100px, Разрешение/Resolution на 72 и цвет фона/Background Contents на Белый/White.

Далее нужно создать две направляющие, которые послужат контейнером нашей страницы. Выберите Вид/View > Новая направляющая/New Guide…

Для первой направляющей установите Ориентацию/Orientation на Вертикальную/Vertical, а Расположение/Position на 70 px.
Для второй направляющей снова выберите Вид/View > Новая направляющая/New Guide… и создайте другую вертикальную направляющую с Расположением/Position, установленным на 1030 px.

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

Шаг 2

Следующий этап, в создании темного дизана сайта – это фон. Выберите инструмент Заливка/Paint Bucket (G) и установите группу цветов переднего плана/Foreground Color Swatch на “1e1e1e”. Затем щелкните мышью по холсту, чтобы применить цвет к слою фона.

Также давайте назначим фону текстуру, выбрав Фильтр/Filter > Шум/Noise > Добавить шум/Add Noise… Установите Величину/Amount на 2.5 и щелкните OK.

Шаг 3

Далее нам нужно сделать световое пятно, с помощью которого внимание будет фокусироваться на верхней области страницы. Возьмите инструмент Кисть/Brush (B), выберите Базовый диаметр/Master Diameter на 400px и установите Жесткость/Hardness на 0%.

Создайте новый слой, выбрав Слой/Layer > Новый/New > Слой/Layer… и назовите его «Spotlight».

Измените группу цветов переднего плана/Foreground Color Swatch на “FFFFFF” (белый) и создайте у верха холста окружность с помощью инструмента Кисть/Brush.

Чтобы смешать световое пятно с фоном, давайте добавим на слой пятна шум, выбрав Фильтр/Filter > Добавить шум/Add Noise… Установите Величину/Amount на 20, отметьте галочкой Монохроматический/Monochromatic и щелкните OK.

Для сглаживания светового пятна выберите Фильтр/Filter > Размытие/Blur > Гауссово размытие/Gaussian Blur… Установите Радиус/Radius на 50.0 и нажмите OK.

Наконец установите Непрозрачность/Opacity слоя Spotlight примерно на 25%.

Шаг 4

Далее добавим графику телефона. Для этого учебника я возьму iPhone из великолепного Векторного PSD iPhone 4 (Vector iPhone 4 PSD) с сайта Psdtuts+, который можно бесплатно скачать здесь. Кроме того, помните, что использовать можно графику любого подходящего для вас телефона (Android, Blackberry и т.д.).

По окончании загрузки откройте PSD в Photoshop’е. Разверните папку «Phones» в панели слоев, щелкните правой кнопкой мыши по папке “FRONT” и выберите Создать дубликат группы/Duplicate Group… Дайте группе запоминающееся название (я назвал «iPhone»), установите пункт назначения «Leaflet» (или как там вы назвали PSD для этого учебника) и нажмите OK. Закончив, закройте этот PSD.

Расположите свой первый iPhone так, чтобы тот касался левой направляющей и находился примерно в 100px от верха холста.

Сейчас как раз удачное время модифицировать скриншот внутри iPhone’а. Это легко сделать, развернув папку «iPhone» в панели слоев, а затем щелкнув по папке «SCREEN CONTENTS». Теперь выберите Файл/File > Поместить/Place, выберите из браузера свой скриншот и нажмите Поместить/Place.

Перетащите помещенный слой на iPhone и измените размер так, чтобы тот совпадал с экраном. Закончив с этим, нажмите Enter и сохраните изменения.

Продублируйте группу «iPhone», выбрав Слой/Layer > Создать дубликат группы/Duplicate Group… назовите ее «iPhone 2» и щелкните OK в диалоговом окне.

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

Повторите вышеприведенные действия для замены скриншота внутри папки «iPhone 2».

Шаг 5

Финальный штрих наших iPhone’ов – создание их отражения. Давайте начнем с выбора обеих групп iPhone («iPhone» и «iPhone 2»), затем выберем Слой/Layer > Создать дубликаты слоев/Duplicate Layers… и нажмем OK. Затем выберите Слой/Layer > Объединить слои/Merge Layers.

Далее нам нужно отразить наши iPhone’ы. Выберите Редактировать/Edit > Трансформирование/Transform > Отразить по вертикали/Flip Vertical, затем расположите отраженный слой прямо под исходными iPhone’ами.

Добавьте Маску слоя/Layer Mask, щелкнув на иконку маски слоя в панели слоев.

Возьмите инструмент Градиент/Gradient (G) и выберите группу цветов от черного до белого. Начертите на отраженных iPhone’ах линию сверху донизу примерно 50px в высоту.

Наконец, снизьте непрозрачность слоя до 30%.

Шаг 6

Следующее действие – добавление основных свойств приложения справа от наших телефонов. Перед началом давайте добавим еще одну направляющую, чтобы все было выровнено. Выберите Вид/View > Новая направляющая/New Guide… выберите вертикальную ориентацию и расположение 550 px.

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

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

Шаг 7

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

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

Чтобы добавить иконку Apple’а, начертите внутри кнопки маленькое текстовое поле с помощью инструмента Горизонтальный текст/Horizontal Type (T), затем скопируйте и вставьте этот символ:  в текстовое поле и установите следующие характеристики:

Наконец, измените непрозрачность этого слоя до 30%. Справа создайте другое текстовое поле и добавьте две строки (напр.: «Скачать с App Store»). Примените следующие установки:

Добавьте в текст стиль слоя, как на изображении ниже:

Далее мы собираемся внести в правую часть только что добавленного текста разделитель. Выберите инструмент Линия/Line (U) и, придерживая клавишу SHIFT, начертите линию в 1px от верха кнопки до ее низа, затем измените цвет линии на “FFFFFF” (белый).

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

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

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

Наконец, возьмите инструмент Произвольная фигура/Custom Shape (U) и выберите стрелку-указатель (я использую фигуру по умолчанию с названием «Arrow 9»). Сделайте внутри окружности маленькую стрелку шириной 10px и выберите цвет “FFFFFF” (белый).

Шаг 8

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

Измените цвет этого поля на “2B2B2B” и сдвиньте в панели слоев под кнопку загрузки.

Далее назначьте ему стиль слоя Обводка/Stroke со следующими установками:

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

Во второе текстовое поле введите стоимость (я написал “$1.99″) и примените следующие установки:

Шаг 9

По мере продвижения к низу страницы требуется создать какой-нибудь разделитель. Для него мы применим метод двух линий, использованный нами ранее на кнопке загрузки, для придания разделителю вида «вкладки».
Возьмите инструмент Линия/Line (U) и, придерживая клавишу SHIFT, начертите линию в 1px от левой направляющей к правой, затем определите цвет линии “000000″ (черный).

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

Шаг 10

Под только что созданной линией-разделителем мы собираемся добавить две колонки: для скриншотов и списка свойств. Начните со скриншотов – импортируйте первый, выбрав Файл/File > Поместить/Place. Возьмите скриншот из отображаемых файлов и нажмите Поместить/Place. Измените его размер до 80% ширины и высоты, затем переместите скриншот к левой направляющей и щелкните Enter.

В панели выберите слой и дважды нажмите кнопку Добавить маску/Add Mask, чтобы добавить Векторную маску/Vector Mask. Теперь выберите инструмент Прямоугольник со скругленными углами/Rounded Rectangle (U), назначьте радиус 6px и создайте поверх скриншота прямоугольник размером 175x120px.

Напоследок мы добавим стиль слоя Обводка/Stroke со следующими характеристиками:

Повторите вышеприведенные шаги для всех своих скриншотов и сделайте между ними промежутки в 35px.

Шаг 11

Чтобы отделить скриншоты от свойств приложения, начертите линию в 1px от верха первого скриншота до низа последнего, что составляет примерно 55px от скриншотов. Установите цвет линии на “FFFFFF” (белый) и ее непрозрачность на 5%.

Шаг 12

Давайте добавим заголовок, описывающий свойства (я написал «Leaflet Features»). Поместите текст в 55px от левой линии-разделителя и примените следующие установки:

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

Повторите вышеприведенные шаги, чтобы добавить системные требования приложения.

Шаг 13

Чтобы список свойств выделялся, давайте создадим собственные простые маркеры. Начните с перемещения текстового поля со списком свойств на 25px вправо.

Теперь выберите инструмент Эллипс/Ellipse (U) и создайте окружность диаметром 9px слева от первого свойства. Установите цвет окружности на “bce086″.

Присвойте окружности следующий стиль слоя:

Шаг 14

Теперь нам требуется продублировать свои марекеры и выровнять их относительно каждого свойства. Начните с дублирования слоя с окружностью: выбрав его, щелкните на Слой/Layer > Создать дубликат слоя/Duplicate Layer…

Далее передвиньте продублированный слой на 28px книзу (на значение межстрочного интервала, примененного к списку свойств). Трижды повторите вышеперечисленные шаги.

Шаг 15

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

Шаг 16

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

К свойствам примените следующие настройки:

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

Шаг 17

Чтобы решить проблему выравнивания, поместите созданные нами четыре текстовых поля в папку и назовите ее «Footer». Сначала расположите первое поле в 55px от левой направляющей, а последнее должно касаться правой направляющей.

Теперь выберите четыре слоя с текстами в папке Footer и возьмите инструмент Перемещение/Move (V). Щелкните кнопку Выровнять центры по вертикали/Align vertical centers, затем нажмите кнопку Выровнять центры по горизонтали/Distribute horizontal centers из панели инструментов Перемещение/Move.

Шаг 18

Теперь можно выделить ссылки, добавив несколько пользовательских иконок. Выберите инструмент Эллипс/Ellipse (U) и создайте окружность диаметром 36px рядом с первым текстовым полем. Измените цвет этой окружности на “FFFFFF” (белый). Теперь выберите Слой/Layer > Растрировать/Rasterize > Слой/Layer.

Следующее действие – добавить в эту окружность свою иконку. Для первой иконки я применяю “t”, обозначающее Twitter, бесплатно скачанное отсюда. По окончании загрузки выберите в Photoshop’е Файл/File > Поместить/Place, чтобы импортировать иконку в документ. После импортирования выставите размер иконки на 28% ее ширины и высоты, разместите поверх окружности и нажмите enter.

Далее щелкните правой кнопкой мыши на пиктограмму иконки Twitter’а в панели слоев и нажмите Выбрать пиксели/Select Pixels. Теперь возьмите в панели слой окружности, затем Редактировать/Edit > Очистить/Clear. Удалите импортированную иконку Twitter’а, выбрав ее в панели слоев, и щелкните или перетащите ее в иконку Trash. Наконец, уменьшите непрозрачность слоя с окружностью до 15%.

Шаг 19

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

Шаг 20

Как финальный штрих к ссылкам нижнего колонтитула, для пущей заметности давайте назначим им яркий цвет. С помощью инструмента Горизонтальный текст/Horizontal Text (T) выделите в каждом поле часть текста и измените его цвет на “83b546″.

Заключение!

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

Автор: Eric Alli

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: