3d новости Создаем в Photoshop теплый интерфейс для сайта*

3d новости

Создаем в Photoshop теплый интерфейс для сайта*

От

12.12.2016

681

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

Шаг 1

Для выравнивания всех элементов дизайна мы воспользуемся системой сеток 960s Grid. Скачав систему, найдите и откройте в Photoshop файл «960_grid_24_col.psd».

Высота текущего документа меньше, чем проектная, поэтому мы зайдем в Image —> Canvas Size (Изображение —> Размер холста), выставим высоту (height) 1820 pх и щелкнем по верхнему якорю «Стрелка вверх».
Рис 2
Нам также понадобятся линейки и направляющие, поэтому переходим в меню View (Просмотр) и выбираем Extras / Rulers / Snap (Вспомогательные элементы / Линейки / Привязка), чтобы наши объекты автоматически выравнивались по направляющим сетки шаблона.
Рис 3
Давайте зальем наш фон (Background) сплошным цветом. Щелкните по фоновому слою правой кнопкой, выберите команду Layer from background (Слой из заднего плана) и присвойте ему подходящее имя (например: «bg»).

А теперь, используя инструмент Rectangular Marquee (Прямоугольная область) (M), создайте выделение на весь холст, установите такой # f8eedf цвет переднего плана, затем нажмите Shift + Backspace, чтобы залить выделенную область.
Рис 4

Шаг 2

Начнем с шапки сайта. Создайте группу (папку) с именем «header» (шапка), затем, используя Rectangular Marquee (Прямоугольная область) (M), Rectangle (Прямоугольник) (U) или любой другой удобный для вас инструмент, создайте выделение/прямоугольник с размерами 1020 х 100 px и окрасьте фигуру любым цветом.
Рис 5
Теперь добавьте шапке градиент, кликнув правой кнопкой на слое фигуры и выбрав Blending Options —> Gradient Overlay (Параметры наложения —> Наложение градиента) с указанными ниже настройками:
Рис 6
В таком виде шапка выглядит плоской и унылой, а чтобы оживить ее, мы добавим фону простую текстуру шума. Для этого создайте новый слой (выше самого фона, естественно), выделите контур шапки и залейте фон (Shift + Backspace) таким #ffc05e цветом.
Рис 7
Перейдите в Filter —> Noise Add Noise (Фильтр —> Шум —> Добавить шум) и выставьте Amount (Эффект): 48%, Distribution (Распределение): Gaussian (по Гауссу). Затем измените режим наложения на Luminosity (Яркость) и убавьте непрозрачность (opacity) до 5%.
Рис 8

Шаг 3

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

Font Family (Гарнитура): Archer (возьмите его на сайте typography.com
Size (Размер): 30 pt
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Weight (Начертание): Bold (Жирный)
Color (Цвет): #ffffff
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Рис 9
Добавьте тексту Drop Shadow (Тень) с указанными ниже параметрами:
Рис 10
Чтобы выровнять надпись в шапке по вертикали, выберите одновременно слой текста и слой фона шапки, затем на панели настроек вверху укажите » Выравнивание центров по вертикали» (Align vertical centers).
Рис 11

Шаг 4

На этом шаге мы добавим иконки социальных сетей, выбрав их из потрясающего набора иконок на сайте KomodoMedia http://www.komodomedia.com/ и поместив в шапке, как на рисунке ниже:
Рис 12
Чтобы расстояния между иконками были одинаковыми, выберите все их четыре слоя и укажите «Distribute horizontal centers» (Распределение центров по горизонтали) на панели настроек вверху.
Сгруппируйте (Ctrl+ G) слои иконок в папку с названием «icons» (иконки) внутри группы «header» (шапка).
Рис 13
Теперь добавим разделитель рядом с иконками слева. Включив инструмент Line (Линия) (U), создайте две вертикальные линии размером 1 х 60 px каждая, указав левой линии такой #ffd593 цвет, а правой такой #c08c3a.
Между разделителем и крайней иконкой оставьте интервал 20 рх.
Рис 14
Выберите Gradient (Градиент) (G), откройте диалоговое окно Gradient Editor (Редактор градиентов) и настройте градиент, как на рисунке ниже.
Затем щелкните по иконке Add layer mask (Добавить слой-маску) в палитре слоев внизу.
Рис 15
Теперь в режиме маски залейте линию градиентом сверху вниз.
Повторите процедуру для второй линии (или можно скопировать маску и вставить на другой слой).
Рис 16

Шаг 5

Сейчас можно приступить к работе с панелью навигации. Включите Rectangular Marquee (Прямоугольная область) (M), создайте ниже шапки выделение размером 1020 х 600 px и залейте его таким #40312a цветом:
Рис 17
Добавьте новый слой и, включив инструмент Single Row Marquee (Область «Горизонтальная строка»), создайте между шапкой и панелью линию размером 1020 х 1px и залейте ее таким #f9ba59 цветом.
Рис 18
Нижнюю границу панели навигации мы подчеркнем линией, создав на новом слое выделение размером 1020 х 1px, залив его таким #735a4f цветом и уменьшив непрозрачность до 70%.
Рис 19

Шаг 6

На этом шаге мы добавим текст навигации. Включите Type (Текст) и напишите слово «Home» (Главная), используя указанные параметры шрифта:

Font Family (Гарнитура): Gotham Rounded (возьмите его на сайте typography.com)
Size (Размер): 16 pt
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Weight (Начертание): Medium (Средний)
Color (Цвет): #2c8897
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 50
Затем добавьте Drop Shadow (Тень) с указанными ниже настройками:
Рис 20
Добавьте на новом слое названия остальных ссылок, используя те же параметры шрифта, за исключением цвета, который здесь будет белым (#ffffff).
Снова примените эффект Drop Shadow (Тень) с указанными ниже настройками:
Рис 21

Шаг 7

Теперь давайте создадим форму поиска и начнем с надписи «Search» (Поиск), используя прежние параметры шрифта, но с начертанием Book (Книжное). Мы также добавим сюда эффект Drop Shadow (Тень) с такими же настройками, как у ссылки «Home».
Рис 22
Теперь можно перейти к созданию поискового поля. Включив Rounded Rectangle (Прямоугольник со скругленными углами) (U), создайте фигуру размером 190 х 25px с радиусом закругления 3 px, залейте ее таким #2c8797 цветом, затем добавьте стиль слоя с указанными ниже параметрами используемых эффектов:
Рис 23
Попробуйте найти или создайте очень простую иконку лупы, поместите ее в поле поиска, как на рисунке, и примените к лупе Drop Shadow (Тень) с настройками эффекта, как у надписи» Search «.
Рис 24

Шаг 8

Теперь давайте начнем работать над областью приветствия/избранного. С помощью Rectangular Marquee (Прямоугольная область) (M) создайте выделение размером 1020 х 400 px и залейте его таким #deccaaa цветом.
Рис 25
Чтобы фон созданной области выглядел более интересным, мы создадим для него простой и тонкий узор (pattern). Создайте новый документ размером 25 х 25px с фоном такого #deccaaa цвета.
Рис 26
Включив инструмент Ellipse (Эллипс) (U), создайте в центре квадрата кружок такого #aa9364 цвета размером около 4 х 4 px.
Рис 27
Сделайте копию кружочка, сдвиньте ее на два пикселя вниз и поменяйте цвет на такой #f2e5cb:
Рис 28
Теперь откройте меню Edit (Редактирование), выберите Define Pattern (Определить узор) и присвойте узору имя.
Рис 29
Добавьте фону области приветствия эффект Pattern Overlay (Наложение узора) с указанными ниже настройками, выбрав свой новый узор (pattern):
Рис 30

Шаг 9

Выставьте несколько горизонтальных направляющих, как показано на рисунке:
Рис 31
Включив Rounded Rectangle (Прямоугольник со скругленными углами) (U), создайте фигуру такого цвета #40312a размером 950 х 260 px и радиусом 5рх (между второй сверху и третьей направляющими верхнего рисунка).
Рис 32
Добавьте прямоугольнику Inner Shadow (Внутренняя тень) с настройками, как на рисунке ниже:
Рис 33
Примените к фигуре фильтр Noise (Шум) с параметрами, использованными для этого эффекта при создании шапки на шаге 2, затем добавьте этому слою маску (layer mask) и на ней залейте прямоугольник линейным градиентом «от черного к белому», протянув курсором линию от верхнего правого угла к нижнему левому.
Рис 34

Шаг 10

Создайте прямоугольник или выделение размером 230 х 250 px, залейте его любым цветом, расположите, как на рисунке внизу и примените стиль слоя, используя указанные ниже настройки применяемых эффектов:
Рис 35
Перейдите в File —> Place (Файл —> Поместить) и вставьте изображение дизайнерского проекта из категории избранных. Кликните правой кнопкой на слое картинки и выберите команду «Создать Обтравочную маску» (Create Clipping Mask).
Рис 36

Шаг 11

Теперь добавим изображению тень. Для этого включите Ellipse (Эллипс) и создайте фигуру в форме тени, как на рисунке, перетащив этот слой под картинку. Затем зайдите в Filter —> Blur (Фильтр —> Размытие) и выберите Gaussian Blur (Размытие по Гауссу) с радиусом 3.0 px.
Рис 37
Откройте редактор градиентов и настройте градиент, как на рисунке ниже. Создайте «clipping mask» (обтравочная маска) для слоя эллипса и залейте его на маске справа налево линейным градиентом. Протягивая линию градиента, нажмите клавишу Shift, чтобы линия была прямой.
Рис 38
Повторив процедуру шага 10, мы добавим еще одну картинку с тенью, поместив ее за предыдущей (ниже в палитре слоев), но размер холдера (по сути — окна) для этого изображения будет 230 х 220 px.
Рис 39

Шаг 12

Теперь можно добавить какой-нибудь приветственный текст. Выберите Horizontal Type (Горизонтальный текст) (T) и напишите заголовок приветствия, используя указанные ниже параметры шрифта:

Font Family (Гарнитура): Archer
Size (Размер): 24pt
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Weight (Начертание): Bold (Жирный)
Color (Цвет): #3da2b4
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Рис 40
Теперь добавьте условный текст с указанными параметрами шрифта и стилем абзаца:

Font Family (Гарнитура): Verdana
Size (Размер): 12 pt
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Weight (Начертание): Regular (Нормальное)
Color (Цвет): #ffffff
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Leading (Интерльяж): 18pt
Paragraph (Параграф): Justify all (Полное выравнивание)
Рис 41

Шаг 13

Давайте сделаем кнопки призыва к действию (их будет две). Возьмите Rounded Rectangle (Прямоугольник со скругленными углами) с радиусом 5px, создайте фигуру кнопки размером 160 х 45px и залейте ее пока любым цветом, поместив, как показано на рисунке ниже:
Рис 42
Добавьте кнопке эффект шума, который мы уже не раз применяли в этом уроке. Создайте layer mask (слой-маску) и залейте на ней кнопку сверху вниз линейным градиентом «от черного к белому».
Рис 43
Примените к этому слою стиль (layer style) с указанными ниже параметрами используемых эффектов:
Рис 44
Активируйте Horizontal Type (Горизонтальный текст) и сделайте на кнопке надпись (например: » Lean More » (Узнать больше), используя указанные ниже параметры шрифта:

Font Family (Гарнитура): Gotham Rounded
Size (Размер): 16 pt
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Weight (Начертание): Bold (Жирное)
Color (Цвет): #ffffff
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Рис 45
Добавьте надписи Drop Shadow (Тень) с указанными ниже настройками:
Рис 46
Сделайте копию кнопки, подпишите (our work/наша работа) и расположите рядом, как на рисунке:
Рис 47

Шаг 14

Переходим к панели Breadcrumb (Навигационная цепочка, Навигационное меню, «Хлебные крошки»). Используя Rounded Rectangle (Прямоугольник со скругленными углами) (U) с радиусом 5 рх создайте между ранее установленными направляющими фигуру любого цвета размером 950 х 40 px, и залейте ее линейным градиентом, применив эффект Gradient Overlay (Наложение градиента) с указанными ниже параметрами:
Рис 48
Выберите Horizontal Type (Горизонтальный текст) и добавьте текст, указывающий пользователю, где он находится, используя указанные параметры шрифта:

Font Family (Гарнитура): Archer
Size (Размер): 13 pt
Weight (Начертание): Bold (Жирное)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #ffffff
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 50

Затем примените к тексту эффект Drop Shadow (Тень) с настройками, как на рисунке ниже:
Рис 49
Выбрав инструмент Polygon (Прямолинейное лассо), сделайте треугольное выделение, как показано ниже, и залейте его таким #e0cfad цветом.
Рис 50

Шаг 15

На этом шаге мы создадим простой разделитель из трех линий, расположенных друг над другом. Для этого выберите Line (Линия) (U) и проведите первую линию размером 1020 х 2 px, выбрав такой #bba67b цвет.
Затем добавьте такую же линию, но другого (#e6d6b8) цвета и толщиной 1 рх.
И наконец, создайте третью линию размером 1020 х 1px и с таким #bba67b цветом.
Рис 51

Шаг 16

Далее добавьте парочку горизонтальных направляющих в области контента, как показано на рисунке ниже:
Рис 52
Первым блоком области контента будет раздел «From The Blog» (Из блога). Выберите Horizontal Type (Горизонтальный текст) и напишите заголовок раздела, используя указанные ниже параметры шрифта:

Font Family (Гарнитура): Archer
Size (Размер): 24 pt
Weight (Начертание): Bold (Жирное)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): Любой
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Добавьте этому тексту стиль слоя с указанными ниже настройками используемых эффектов:
Рис 53
Напишите название первого поста блога, используя указанные ниже параметры шрифта:

Font Family (Гарнитура): Gotham Rounded
Size (Размер): 24 pt
Weight (Начертание): Light (Светлое)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #40312a
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Рис 54
Добавьте дату публикации поста, данные о комментариях или что-нибудь в этом роде, применив шрифт с такими параметрами:

Font Family (Гарнитура): Archer
Size (Размер): 13 pt
Weight (Начертание): Bold Italic (Жирное, Курсив)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #ce953c
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Рис 55
А сейчас мы создадим холдер для «цепляющей» картинки поста блога. Включите Rounded Rectangle (Прямоугольник со скругленными углами) (U) с радиусом 5 рх, создайте фигуру размером 550 х 140 px, окрасьте ее любым цветом и добавьте стиль слоя с указанными ниже параметрами используемых эффектов:
Рис 56
Вставьте свое изображение, притягивающее взгляд, и создайте для него Clipping Mask (Обтравочная маска).
Рис 57
Напишите три строчки текста в качестве введения поста блога, используя указанные ниже параметры шрифта:

Font Family (Гарнитура): Verdana
Size (Размер): 12 pt
Weight (Начертание): Regular (Нормальное)
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Color (Цвет): #247184
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Leading (Трельяж): 18pt
Рис 58
Сделайте копию этого поста и, сменив картинку, расположите ее, как на рисунке ниже:
Рис 59

Шаг 17

Возьмите инструмент Rectangle (Прямоугольник) (U), создайте ниже постов справа фигуру кнопки размером 110 х 30 px, залейте ее любым цветом и добавьте эффект Gradient Overlay (Наложение градиента) с указанными ниже параметрами, где выбран линейный стиль градиента:
Рис 60
Добавьте кнопке уже знакомый вам эффект шума, примените layer mask (слой-маска) и снизу вверх залейте на маске фигуру линейным градиентом «от черного к белому».
Рис 61
Используя Line (Линия) (U), проведите в основании кнопки линию размером 110 х 1px, выбрав для нее такой #b2988d цвет.
Рис 62
Подпишите кнопку («Блог», например), используя указанные параметры шрифта:

Добавьте Drop Shadow (Тень) с такими настройками:
Рис 63

Шаг 18

Этот шаг мы начнем с добавления двух горизонтальных направляющих, как показано на рисунке:
Рис 64
Теперь пора заняться сайдбаром. Выберите Rectangular Marquee (Прямоугольная область) (M), создайте выделение размером 385 х 720 px и залейте его любым цветом.
Рис 65
Добавьте этому слою Gradient Overlay (Наложение градиента) с указанными ниже настройками:
Рис 66
Создайте layer mask (слой-маску), затем возьмите Gradient Tool (Градиент) и справа налево залейте сайдбар градиентом «от черного к белому».
Рис 67
Используя Line (Линия) (U), проведите по границе с блоком контента линию размером 1 х 720 px, выбрав для нее такой #dfcdb2 цвет.
Рис 68
Добавьте этому слою маску (layer mask) и тоже залейте черно-белым градиентом, но снизу вверх.
Рис 69
Скопируйте только что созданную линию, сдвиньте дубликат на 1 рх влево и смените его цвет на такой #fff7ea.
Рис 70

Шаг 19

Теперь можно перейти к созданию панели вкладок сайдбара. Включив Rounded Rectangle (Прямоугольник со скругленными углами) (U) с радиусом 5 рх, создайте фигуру любого цвета размером 310 х 200 px, затем добавьте стиль слоя с указанными ниже параметрами используемых эффектов:
Рис 71
Выставьте горизонтальную направляющую, как на рисунке ниже:
Рис 72
Щелкните с нажатой клавишей Ctrl по миниатюре фигуры на слое прямоугольника, чтобы выделить его контур на холсте. Включите Rectangular Marquee (Прямоугольная область) (M) и, выбрав режим Subtract from selection (Вычитание из выделенной области), создайте поочередно два выделения, как показано на рисунке ниже. Оставшуюся выделенной область залейте на новом слое таким #40312a цветом.
Рис 73
Используя Line (Линия) (U), нарисуйте две разноцветные (см. рисунок) вертикальные линии толщиной по 1 рх каждая, расположив их рядом друг с другом, как на рисунке ниже.
Рис 74
Добавьте такую же пару линий, но теперь уже горизонтальных, расположив и окрасив их, как на рисунке.
Рис 75

Шаг 20

Напишите на первой вкладке «Comments» (Комментарии), используя указанные параметры шрифта:

Font Family (Гарнитура): Archer
Size (Размер): 16 pt
Weight (Начертание): Medium (Среднее)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #ffffff
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 50
Добавьте (скопируйте) эффект Drop Shadow (Тень) с параметрами, использованными для текста панели «хлебных крошек».
Рис 76
Напишите названия следующих вкладок (Categories/Категории и Archives/Архивы) с такими параметрами шрифта:

Шаг 21

Напишите пример комментария, используя шрифт с такими параметрами:

Font Family (Гарнитура): Verdana
Size (Размер): 12 pt
Weight (Начертание): Regular (Нормальное)
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Color (Цвет): #ffffff
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Leading (Трельяж): 18pt
Рис 78
Добавьте автора поста и тему, используя шрифт с такими параметрами:

Font Family (Гарнитура): Gotham Rounded
Size (Размер): 12 pt
Weight (Начертание): Bold Italic — Medium (Жирное, Курсив – Среднее)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #f8eedf
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 0
Рис 79
Сделайте ниже копию комментария и добавьте между ними разделитель, аналогичный созданному на шаге 19.
Рис 80

Шаг 22

Напишите заголовок следующего блока сайдбара с текстом «Who we are» (Кто мы), расположив его, как на рисунке ниже:
Рис 81
Используя Rectangle (Прямоугольник) (U), создайте фигуру размером 310 х 100 px , добавьте ей эффект Stroke (Обводка) с указанными ниже параметрами (положение: внутри) и затем вставьте внутри прямоугольника изображение.
Рис 82
Включив Horizontal Type (Горизонтальный текст) (T), напишите несколько слов о себе, используя шрифт с такими параметрами:

Font Family (Гарнитура): Verdana
Size (Размер): 12 pt
Weight (Начертание): Regular — Bold (Норимально – Жирное)
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Color (Цвет): #000000 — #247184
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Рис 83

Шаг 23

Добавьте заголовок третьего блока с текстом «Sponsors» (Спонсоры). Затем с помощью Rectangle (Прямоугольник) (U) создайте квадратную фигуру размером 138 х 138 px и выберите для нее такой #febf5d цвет.
Рис 84
Вставьте в квадрат рекламную картинку, как показано ниже:
Рис 85
Скопируйте рекламу, сменив картинку и расположив рядом с первой.
Рис 86
Используя Line (Линия) (U), добавьте в качестве разделителя между рекламами две вертикальные линии рядом друг с другом размером 1 х 95 px каждая. Линию слева сделайте белой (#ffffff), а правую окрасьте в такой #cfbea3 цвет.
Рис 87
Откройте Gradient Editor (Редактор градиентов), настройте градиент, как на рисунке ниже, выберите слой одной из двух линий, добавьте ему маску (layer mask) и залейте линию линейным градиентом сверху вниз. Затем повторите все для второй линии.
Рис 88

Шаг 24

Добавьте горизонтальные направляющие, как на рисунке:
Рис 89
Используя Rectangular Marquee (Прямоугольная область) (M), создайте выделение для большого подвала (футера) с размерами 1020 х 420 px, залейте его любым цветом, затем добавьте Gradient Overlay (Наложение градиента) с указанными ниже настройками, где выбран линейный градиент:
Рис 90
Включив Single Row Marquee (Область «Горизонтальная строка»), сделайте выделение, как показано ниже, и залейте его таким #b2988d цветом.
Рис 91

Шаг 25

Выставьте две горизонтальные направляющие, как на рисунке:
Рис 92
Включив Horizontal Type (Горизонтальный текст) (T), напишите заголовок » Get a free quote» (Получите расценку бесплатно) для первого (левого) блока контактной формы, используя шрифт с такими параметрами:

Затем добавьте тексту стиль слоя с эффектами, как на следующем рисунке:
Рис 93
Переходим к созданию контактной формы, ориентируясь на рисунок (комментарии здесь излишни).
Рис 94
Теперь ко всем полям/прямоугольникам примените стиль слоя с указанными ниже настройками используемых эффектов:
Рис 95
Добавьте в каждое поле соответствующий текст с указанными параметрами шрифта:

Font Family (Гарнитура): Archer
Size (Размер): 13 pt
Weight (Начертание): Bold (Жирное)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #247184
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Рис 96

Шаг 26

Осталось добавить кнопку «Submit» (Отправить). Выбрав Rectangle (Прямоугольник) (U), создайте фигуру размером 110 х 30 px и окрасьте ее в такой #febf5d цвет. Затем примените стиль слоя с указанными ниже настройками используемых эффектов:
Рис 97
Снова примените фильтр Noise (Шум), добавьте маску (layer mask) затем залейте кнопку сверху вниз линейным градиентом «от черного к белому».
Рис 98
Выделите контур кнопки, щелкнув на ее слое с нажатой клавишей Ctrl по миниатюре фигуры. Затем перейдите в Select —> Modify —> Contract (Выделение —> Модификация —> Сжать) и укажите Contract By: 1px (Сжать на: 1 рх). Теперь залейте выделение белым (#ffffff) и, снова повторив процедуру сжатия выделения (Select —> Modify —> Contract —> Contract By: 1px), нажмите клавишу Delete.

Снимите выделение и уменьшите непрозрачность (opacity) этого слоя до 15%.
Рис 99
Подпишите кнопку («Submit «/Отправить), используя шрифт с такими параметрами:

Font Family (Гарнитура): Archer
Size (Размер): 16 pt
Weight (Начертание): Bold (Жирное)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #ffffff
Kerning (Кернинг): Optical (Оптический)
Tracking (Трекинг): 50
Затем добавьте тексту эффект Drop Shadow (Тень) с указанными параметрами:
Рис 100

Шаг 27

Во втором (центральном) блоке большого футера с названием «Recent projects» (Последние проекты) будут отображаться иллюстрации наших недавних проектов. Параметры шрифта заголовка аналогичны использованным для названии первого блока «Get free quote». Далее включите Rectangle Tool (Прямоугольник) (U), создайте фигуру размером 125 х 95 px, добавьте ей внутреннюю обводку (stroke) с указанными ниже параметрами, вставьте свое изображение и примените к нему обтравочную маску (clipping mask).
Рис 101
Вставьте остальные изображения и затем добавьте внизу кнопку с надписью «Portfolio» (Портфолио), создав ее по аналогии с кнопкой «Submit».
Рис 102

Шаг 28

В третьем и последнем блоке большого футера с названием «Twitter stream» будет отображаться ваш стрим в Твиттере. Стиль заголовка такой же, как у соседних блоков. Добавьте сюда какой-нибудь текст в качестве примера твита, используя шрифт с указанными параметрами:

Font Family (Гарнитура): Verdana
Size (Размер): 12 pt
Weight (Начертание): Regular (Нормальное)
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Color (Цвет): #f8eedf
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Затем добавьте необходимые детали о твите, используя следующие параметры шрифта:
Font Family (Гарнитура): Archer
Size (Размер): 12 pt
Weight (Начертание): Bold Italic (Жирное Курсив)
Anti-aliasing sett. (Метод сглаживания): Smooth (Плавное)
Color (Цвет): #2e91a0
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 0
Рис 103
Добавьте еще пару примеров твитов, затем добавьте внизу кнопку «follow us» (следите за нами), как показано ниже:
Рис 104
Теперь сгруппируйте (Ctrl+G) слои каждого блока в отдельную папку, выберите все три группы и на панели настроек вверху укажите Distribute horizontal centers (Распределение центров по горизонтали).
Рис 105

Шаг 29

Теперь можно переходить к маленькому футеру. Включите Rectangular Marquee (Прямоугольная область) (M), создайте выделение размером 1020 х 70 px и залейте его линейным градиентом, используя эффект Gradient Overlay (Наложение градиента) с указанными ниже параметрами:
Рис 106
Добавьте этому слою эффект Noise (Шум), аналогичный использованному в шапке.
Рис 107
Включив Single Row Marquee (Область «Горизонтальная строка»), создайте выделение на границе с верхним футером и залейте его таким #38a4bs цветом.
Рис 108
Выбрав Horizontal Type Tool (Горизонтальный текст) (T), добавьте информацию об авторских правах (copyright), используя шрифт с такими параметрами:

Font Family (Гарнитура): Archer
Size (Размер): 13 pt
Weight (Начертание): Medium (Среднее)
Anti-aliasing sett. (Метод сглаживания): Crisp (Четкое)
Color (Цвет): #ffffff
Kerning (Кернинг): Metrics (Метрический)
Tracking (Трекинг): 50

Затем добавьте тексту эффект Drop Shadow (Тень) с настройками, как на следующем рисунке:
Рис 109
Рис 110
И в заключение добавьте ссылки дополнительной навигации с такими же параметрами шрифта и стилем слоя.

Заключение

На этом все, ребята! Мы закончили с дизайном интерфейса нашего сайта. Я очень надеюсь, что урок был полезен для вас.