Создание макета сайта в минималистичном западном стиле
Вот результат, к которому мы будем стремиться:
Для начала определимся в рамках стиля, что следует использовать:
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), либо возьмите свой логотип
Работа над макетом завершена. В ходе урока мы много времени уделили работе с направляющими и выравниваю элементов; познакомились на учебном примере с одним из способов реализации западного минималистичного стиля.
Свои комментарии и вопросы по уроку вы всегда можете оставить в форме внизу.
Для начала определимся в рамках стиля, что следует использовать:
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), либо возьмите свой логотип
Работа над макетом завершена. В ходе урока мы много времени уделили работе с направляющими и выравниваю элементов; познакомились на учебном примере с одним из способов реализации западного минималистичного стиля.
Свои комментарии и вопросы по уроку вы всегда можете оставить в форме внизу.
Теги:
Похожие новости:
Комментарии:
Нету комментариев для вывода...