Создание макета сайта в минималистичном западном стиле

От автора: в данном уроке мы создадим с нуля макет сайта, выполненный в тенденциях западного дизайна. Чтобы идеально выровнять элементы относительно друг друга, нам предстоит проделать довольно много работы с направляющими.

План урока

1. Создание документа, основные направляющие.

2. Работа с первой страницей. Шапка, меню, фон, основные цвета, размещение элементов.

3. Работа со второй страницей. Дополнительные направляющие, размещение элементов.

4. Работа с третьей страницей. Направляющие, наполнение страницы.

5. Работа с четвертой страницей и футером. Направляющие, поля ввода, работа с текстом, копирайты.

Детали учебника

Вот макет сайта, который мы хотим сделать:

Для начала определимся в рамках стиля, что следует использовать, чтобы создать макет сайта:

1. Порядок и чистота в шапке сайте. Отдельно логотип, отдельно меню:

//myrainbownursery.co.uk/

//www.getballpark.com/

2. Минимальное использование цветов и градиентов:

//www.hathaciudad.it/

3. Максимализм в заголовках и текстах:

//fixx.sg/

4. Силуэтность в иллюстрациях:

//piccsy.com/investors/

//www.hathaciudad.it/

5. Страницы мы расположим вертикально, одна за другой.

На одном экране, традиционно, будет отображаться одна страница, но пользователь сможет получить доступ к следующим без лишних нажатий — одним лишь скроллом. Меню будет плавающим и постоянно отображаться – независимо от положения пользователя на сайте и скролла.

Примеры использования:

//www.getballpark.com/
//piccsy.com/investors/

Часть 1. Создание документа. Работа с первой страницей

Вот макет-набросок нашей первой страницы(салатовым показана шапка с логотипом и меню, голубым – изображения, а розовым – текстовые блоки)

Шаг 1. Создание документа, разбивка направляющими. Начало работы с первой страницей. Фон

Создаём холст размером 1000х3150(С учетом четырех страниц высотой по 700, и футера высотой в 350)

Сразу же проставляем направляющие, отделяющие страницы друг от друга: 700, 1400, 2100 и 2800 по горизонтали(Просмотр — Новая направляющая..)

Советую установить красный цвет направляющих, чтобы они не сливались с нашим будущим фоном.(Редактирование – Установки — Направляющие, сетка и фрагменты)

Далее, создаём новый слой. Выделяем область первой страницы (до первой направляющей) с помощью инструмента ‘Прямоугольная область’

Нам нужно залить эту область нужным цветом. Для этого, меняем цвет переднего плана

на #00e5c8

И используем инструмент ‘Заливка’

Кроме этого, выставим центральную вертикальную направляющую, она нам тоже пригодится:

Шаг 2. Работа с шапкой

Наша шапка будет высотой в 70 пикселей, сразу создадим направляющую для наших целей:

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

Далее, устанавливаем белый цвет переднего плана и используем инструмент ‘Заливка’(на новом слое!).

Добавим тень под шапку. Копируем слой, на котором мы сделали заливку шапки белым, и располагаем его под слоем-оригиналом

(назвать слой можно через пункт ‘Параметры слоя’ в меню слоя).

Снимаем выделение (Выделение – Отменить выделение (Ctrl+D)). Вызываем диалог работы с тоном и насыщенностью (Изображение – Коррекция – Цветовой тон/Насыщенность (Ctrl+U)). Значение яркости устанавливаем на -100

Это окрасило слой в черный цвет, для естественности тени. Работаем дальше с дубликатом слоя. Применяем размытие по Гауссу (Фильтр – Размытие – Размытие по Гауссу) с радиусом в 24 пикселя.

Тень готова:

К шапке мы еще вернемся для вставки логотипа и меню

Шаг 3. Центральная часть

Расставим направлящие для иконок и текста. Иконки(размером 170х170) горизонтально располагаются в центре левой половины, вертикально – с отступом в 60 пикселей от меню и 100 пикселей друг от друга. Текст – в правой половине, от центра всей страницы.

Располагаем иконки(находятся в материалах для урока, /images/1balloon.png и 2cake.png) в отсеках, образованных направляющими(Файл – Поместить..):

Создаём текст для каждой иконки с помощью инструмента ‘Горизонтальный текст’ (предварительно установив цвет переднего плана – Белый)

Включаем диалог ‘Символ и абзац’ на панели настройки текстового инструмента

Устанавливаем настройки для текста: MS Sans Serif, 34 пт, трекинг AV 120:

Кроме этого, на вкладке ‘Абзац’ убираем галочку ‘Переносы’

То же самое проделываем и с текстовым слоем для второй иконки:

Чтобы выделить текст, применим стили к текстовым слоям. Для этого, в меню слоя выбираем пункт ‘Параметры наложения’, откроется окно ‘Стиль слоя’. В списке стилей выбираем ‘Тень’ и применяем её с такими настройками, как на скриншоте:

Итог:

Шаг 4. Возвращаемся к шапке. Размещение логотипа и меню

Наш логотип имеет размер 30х30(его вы можете найти в материалах для урока /images/ 3logo-balloon.png). Расставим для него направляющие:

И поместим сам логотип:

Добавим текстовый слой с названием компании(Arial 12, цвет #777777, трекинг AV 120):

Далее, создаём еще один текстовый слой, для меню, от центральной направляющей (Arial 12, черный, трекинг AV 120):

Создадим индикатор активного пункта меню. Создаём новый слой. С помощью инструмента ‘Прямоугольная область’ выделяем тонкую полоску, над направляющей под меню:

Устанавливаем цвет переднего плана #c9c9c9 и с помощью инструмента ‘Заливка’ окрашиваем выделение:

Поверх этой полоски созадём новое выделение, шириной чуть более трети слова ‘Главная’:

Устанавливаем цвет переднего плана #02a792 и заливаем выделение. Меню готово:

Шаг 5. Окончание работы с первой страницей. Добавление скролла

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

Подскажем пользователю, что нужно делать, для этого добавим снизу страницы стрелочку(материалы к уроку, /images/4-arrow.png).

Сначала, направляющие для стрелки:

Теперь, помещаем картинку на холст(Файл – Поместить..):

Работа с первой страницей закончена!

Часть 2. Работа со второй страницей

На второй странице будет располагаться краткая информация о проводимых компанией мероприятиях – изображение и описание.

На картинке внизу показано примерное расположение блоков. Сделано грубо, но поможет нам не потеряться среди направляющих. Голубым показаны изображения(280х100 пикселей), розовым – текстовые блоки

Шаг 1. Направляющие

Расставляем направляющие(Просмотр – Новая направляющая..):

Горизонталь:

Вертикаль:

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

Теперь, имея направляющие, нам не стоит особого труда разместить все элементы.

Шаг 2. Размещение элементов

Сначала размещаем изображения(находятся в материалах к уроку, /images/article-birth.png, article-corporate.png, article-kids.png, article-mcfly-special.png, article-prom.png, article-wedding.png) с помощью меню ‘Файл-Поместить..’

Под изображениями, располагаем текстовые блоки(инструмент ‘Горизонтальный текст’) с такими настройками: шрифт MS Sans Serif, размер 13, трекинг AV 120.

Выделяем полужирным нужные нам слова (названия мероприятий):

Смотрится ровно, симпатично. Остаётся завершить работу над второй страницей, снова разместив стрелочку-подсказку (в материалах к уроку, /images/cyan-arrow.png)

Вертикальные направляющие для неё уже имеются, разместим горизонтальные: 1334 и 1374

Теперь, помещаем стрелочку на страницу:

Работа над второй страницей завершена:

Часть 3. Работа с третьей страницей

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

Шаг 1. Направляющие

Расставим направляющие:

Горизонталь:

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

Шаг 2. Фон

Заливаем фон цветом #00e5c8. Для этого, создаём новый слой. С помощью инструмента ‘Прямоугольная область’ создаём выделение для страницы:

Далее, устанавливаем цвет переднего плана #00e5c8

И с помощью инструмента ‘Заливка’ окрашиваем страницу

Шаг 3. Заполнение страницы текстом

Создаём текстовые слои для этих областей:

Настройки текста: шрифт MS Sans Serif, размер 120, цвет белый(также, рекомендую «поиграться» с настройкой ‘Задайте метод сглаживания’ в правом нижнем углу панели настроек текста). На вкладке ‘Абзац’ выставляем параметр ‘Выключка текста вправо’

Далее, создаём текстовые слои для этих областей, регулируя размер слоя так, чтобы текст ‘прижимался’ к нижней части области:

Настройки текста: шрифт MS Sans Serif, размер 40, цвет белый. На вкладке ‘Абзац’ – выключка текста влево

Добавляем всё тот же эффект тени, что добавляли в первой части урока(для текстовых слоёв в правой части страницы). Вызываем окно ‘Стиль слоя’, нажав ‘Параметры наложения’ в меню слоя.

На вкладке ‘Тень’ вводим такие настройки, как на скриншоте:

Проделываем это для всех трёх слоёв в правой части страницы

Шаг 4. Стрелочка скролла

По традиции, добавляем подсказку-стрелку на страницу. Вертикальные направляющие для этого есть, вводим горизонтальные: 2034, 2074

Стрелочку берем в материалах к уроку, /images/4-arrow.png, и помещаем её в область, образованную направляющими:

Часть 4. Работа над четвертой страницей и футером

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

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

Примерный макет будущей страницы (голубым – изображение, розовым – текст и форма заказа, салатовым – кнопка отправки):

Примерный макет футера(розовым – текст для поисковых систем, голубым – логотип создателей сайта):

Шаг 1. Подготовка

С помощью инструмента ‘Заливка’ окрасим футер в цвет #00e5c8(от нижней направляющей до конца холста), предварительно создав новый слой. Это поможет нам визуально различать четвертую страницу:

Далее, создадим новый слой для окрашивания четвертой страницы в белый цвет. «Нелогично», — скажете Вы. Но нужно этого для того, чтобы сделать тень.

После того, как страницы окрашена, созадём дубликат этого слоя (располагаем в списке под оригиналом и над футером), и применяем к нему ‘Изображение – Коррекция – Цветовой тон / Насыщенность’ с параметром Яркости -100:

После этого, применяем к дубликату ‘Фильтр- Размытие – Размытие по Гауссу’ с радиусом в 24 пкс.:

Как видим, тень образовалась и сверху слоя. Обводим простым выделением и удаляем кнопкой Del:

Примечание: как видите, тень можно сделать несколькими способами, не используя встроенные стили

Шаг 2. Направляющие

Горизонталь:

Шаг 3. Размещение элементов и текста

Помещаем(Файл – Поместить..) изображение из материалов к уроку(/images/balloon-big.png) в эту область:

Далее, помещаем заголовок(«Оформление заказа») в данную область:

Настройки текста: шрифт MS Sans Serif, размер 40, трекинг AV 120, цвет #00e5c8, выключка по левому краю:

Теперь, зальём поля ввода. Сначала используем инструмент ‘Прямоугольная область’, чтобы выделить нужные нам участки(для многократного выделения, следует задать клавишу Shift):

Создаём новый слой. С помощью инструмента ‘Заливка’ окрашиваем области, предварительно установив цвет переднего плана #f1f1f1:

На следующем этапе, размещаем текстовый слой в области:

Настройки текста: шрифт MS Sans Serif, размер 17, цвет #777777, интерлиньяж — 40 пт, выключка по правому краю:

Осталось разместить кнопку отправки заявления. Работаем с этой зоной:

Сначала, заливаем её на новом слое цветом #00e5c8(инструменты ‘Прямоугольная область’ и ‘Заливка’):

Далее, создаём текстовый слой со следующими настройками: шрифт MS Sans Serif, размер 40, цвет белый, выключка по центру

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

Шаг 4. Работа с футером

Размещаем горизонтальную направляющую: 2870, это будет верхняя граница текстового блока.

Параметры текста: шрифт MS Sans Serif, размер 12, цвет белый, интерлиньяж – Авто, выключка по левому краю:

Горизонтальная направляющая: 2980. Под ней мы разместим логотип создателей сайта. Изображение есть в материалах к уроку(/images/copyright.png), либо возьмите свой логотип

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

Свои комментарии и вопросы по уроку вы всегда можете оставить в форме внизу или на нашем форуме.

Комментарии (10)