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

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

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

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

План урока

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

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

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

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

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

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

Программа: Adobe Photoshop

Версия: CS 4

Примерное время выполнения: 3 часа

Сложность: средняя

автор

Автор: Макс Дивиани

Увлекаюсь пленочной фотографией, живописью. Живу в городе Луганск, Украина. Работаю 4 года веб-дизайнером и рад делиться своим опытом. Всегда Ваш, Макс Дивиани.

скачать исходники

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

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

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

http://myrainbownursery.co.uk/

http://www.getballpark.com/

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

http://www.hathaciudad.it/

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

http://fixx.sg/

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

http://piccsy.com/investors/

http://www.hathaciudad.it/

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

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

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

http://www.getballpark.com/
http://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. Направляющие

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

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

770– верхняя граница блоков

870 – нижняя граница изображений 1 ряда

895 – верхняя граница текстовых слоёв 1 ряда

995– нижняя граница 1 ряда

1045 – верхняя граница 2 ряда

1145 – нижняя граница изображений 2 ряда

1170 – верхняя граница текстовых слоёв 2 ряда

1270 – нижняя граница блоков

Вертикаль:

40 – начало первого столбца (уже проставлена в прошлой части урока)

320 – конец первого столбца

360 – начало второго столбца

640 – конец второго столбца

680 – начало третьего столбца

960 – конец третьего столбца

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

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

Шаг 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. Направляющие

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

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

1470 – верх блоков

1590 – низ первой строки

1660 – верх второй строки

1780 – низ второй строки

1850 – верх третьей строки

1970 – низ блоков

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

Шаг 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. Направляющие

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

2240 – верхушка заголовка

2380 – начало текстовых полей(имя, телефон, и т.д.)

2403 – конец первого поля для ввода текста

2420 – начало второго поля ввода

2443 – конец второго поля ввода

2460 – начало третьего поля ввода

2483 – конец третьего поля ввода

2500 – начало четвертого поля ввода

2523 – конец четвертого поля ввода

2610 – верхняя граница кнопки

2670 – низ кнопки

Шаг 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), либо возьмите свой логотип

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. Владимир

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

  2. vnovojenin@mail.ru

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

  3. Ольга

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

  4. Владислав

    А где можно посмотреть, как делать меню как в шапке? Что бы при прокрутке вниз, полоска менялась в зависимости положения на сайте.
    Как, допустим, на сайте piccsy.com/investors

  5. Вадим

    Урок конечно нравится, но застрял на «Шаг 3. Центральная часть», запутался с направляющими. Вставте скрин как должно выглядеть поле с раставленными направляющими, а то вроде выставил их по скрину как вы и писали, но картина выходит совсем иная, иконки 170х170 ни как не вписываются в то место где находятся направляющие, на пиксилей 5 выступают за них.

    Если возможно — сделайте видео урок, а то интересно но не очень понятно по тексту делать.

    Спасибо!

  6. Ри

    Как сохранить макет, чтобы потом можно было открыть в фотошопе целой картинкой, а не слоями?

    • Андрей Кудлай

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

  7. suegno

    Спасибо за отличный урок! А нет ли урока по верстке данного макета?

    Алена

  8. Игорь

    Все очень доступно, на всю эту работу ушло полтора часа, спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree