Lecaw

Учимся создавать Web-сайты

Создание дизайна сайта используя Bricks UI

January 31, 2013 132hits

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

 Исходные файлы

 

Перемещение элементов

Мы будем "импортировать" некоторые .psd файлы, которые можете найти в UI наборе к нашему новому документу, благодаря Photoshop и его супер дружественному drag-n-drop способу импортировать, Вам только нужно выбрать нужную папка/слой и скопировать его к своему новому документу. Используйте инструмент как на рисунке ниже:

Копирование стиля слоя

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

Изменение размеров

Теперь я научу Вас как легко изменять размеры элементов в Photoshop, для этого не понадобится никакой инструмент, всего лишь нужно нажать комбинацию клавиш “CTRL/Command + T” откроется инструмент Transform, используйте его чтобы изменить размеры/преобразовать Вашего выбранного элемента. Будьте уверены, что изменяете размеры формы, а не изображения/фотографии, иначе у Вас получится размытое изображение.

Шаг 1

Мы начнем с создания нового документа размером 1200 пикселей по ширине и 2150 по высоте. Blocks UI построен с 960-сеткой в виду этого мы будем использовать его для нашего макета, используя Nathan Smith’s 960 Grid Framework который подходит для многих проектов.

Шаг 2

При помощи Bucket Tool (G) мы зададим светло-серый (#E9E6E9) фоновый цвет. Добавьте небольшой легкий шум и способ, который я предпочитаю для применения того шума это - создание нового документа, давая ему "sharp" шум (Filter->Noise->Add Noise), а затем определите этот документ как узор и примените его как показано на изображении ниже.

Шаг 3

При помощи Proxima Nova или любого другого подходящего шрифта, введите слово “SHOP”. Это будет нашим так называемым логотипом. Зададим для него темно-синий цвет, а затем примените soft-light наложение градиента с непрозрачностью 40%. Я также добавил 1px, белую тень. Следующий эффект Bevel and Emboss, который сделает основу нашего логотипа более темной.

Шаг 4

В верхнем правом углу мы поместим наши социальные иконки. Я включил сетку, чтобы было удобнее поместить их на слое. Я создам несколько кругов при помощи Инструмента Эллипса (U) и буду использовать иконки из набора Blocks UI. Я задам синий цвет иконке по которой наводят мышью, #4979bd, статической иконке – серый цвет (#bdbdbd) и остальным темно-серый – #5f5f5f.

Шаг 5

Пожалуй я скопирую меню из раздела “E-commerce #1” и помещу его сверху. Это уменьшит "рабочее" пространство.

Шаг 6

Из этого же набора “E-commerce #1” я скопирую слайдер и помещу его после навигации. Большим плюсом таких наборов является то, что они уже отлично совпадают по размерам. Слайдер занимает точно ¾ всей рабочей области.

Шаг 7

Чуть ниже меню и справа от слайдера, я помещу форму контроля, которую я также взял из “e-commerce #1”.

Шаг 8

После слайдера я создам раздел, на котором мы заострим основное внимание. Я добавлю заголовок и кнопку призыва к действию, которая мне очень нравится. Форма составляет 960 пикселей по ширине и приблизительно 90 пикселей в высоте. Я дам ей примерно 70% “Fill”, эффект “Outer Glow” размером в 3px и установлю непрозрачность к 55%. Я также добавлю эффект Inner Shadow размером в 1px и белым цветом.

Шаг 9

При помощи того же самого шрифта, Proxima Nova, я напишу небольшой текст в этом разделе, который мы только что создали. Теперь из набора я возьму кнопку CTA и добавлю её в наш текущий документ.

Шаг 10

На следующих шагах мы добавим набор различных виджетов, которые мы также возьмем из набора “e-commerce #1”. На изображении ниже вы увидите нашу первую строку товаров:

Шаг 11

Это - прекрасный предварительный просмотр новых товаров, которые мы добавили из раздела cta-button.

Шаг 12

Давайте продолжим, добавим следующую строку товаров. На сей раз я буду использовать “3 hoodies” и различное моделирование, по сравнению с предыдущей строкой товаров. Это будет нашей средней строкой “товаров для продажи”:

Шаг 13

Мы закончим этот раздел добавив элементы “lounges & seats”. Если мы будем сравнивать стили следующих виджетов и тех которые мы уже использовали, то можно сделать вывод, что они являются наиболее простыми, но это имеет большой смысл и создает приятное разнообразие на странице.

Шаг 14

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

Шаг 15

Прямо перед нашей зоной footer мы добавим раздел с e-mail подпиской, где пользователи смогут оставить свой адрес электронной почты и получать регулярные новостные рассылки. Чтобы создать этот раздел, мы используем уже разработанный виджет "новостной рассылки", который я нашел в FORMS-UI #2 psd. У предварительно разработанного виджета есть тонкая рамка, нам нужно расширить её, просто скопируйте и увеличьте её по ширине.

Шаг 16

Последний шаг это - создание footer. Это очень просто, он состоит из строки размером в 5 пикселей, сделаем её светло-серой (#c9c9c9) и поместим её чуть ниже виджета с подпиской. При помощи того же самого шрифта я запишу в строку авторские права темно-серым цветом.

 Исходные файлы

 

Дополнительная информация

RATTING:
(1 Голосовать)

Медиа