Светлый дизайн сайта

Ресурсы урока:

Представление о разметке “960 Grid System”

В этом уроке мы воспользуемся специальной разметкой “960 Grid System”. Загрузите её к себе на компьютер с этого сайта. Распакуйте загруженный архив и перейдите в папку “templates”, затем в папку “photoshop”. Там Вы найдёте три PSD файла. Каждый из них содержит подготовленную сетку с 12, 16 и 24 колонками. В этом уроке мы будем использоваться сетку с 12 колонками. В этих PSD файлах направляющие уже определены. Если они у Вас не видны, перейдите в меню View > Show Guides.

При создании элементов дизайна нам нужно будет знать точный размер. Чтобы видеть все изменения, перейдите в меню Window > Info. На панели справа будет показана высоты, ширина объекта и положение относительно оси X и Y.

Шаг 1: Создание фона

Откройте файл "960_grid_12_col.psd" в Фотошопе. Перейдите в меню Edit → Canvas Size и введите значения, показанные ниже. Если Вам понадобится ещё больше места для дизайна, то позже Вы также сможете изменить размер холста.

Сейчас мы изменим цвет фона на светло-серый. Выберите фоновый слой и кликните на иконке замка в верхней части палитры слоёв, чтобы разблокировать его. Залейте фон цветом #ededed при помощи инструмента Paint Bucket Tool (G). Кликните правой кнопкой на фоновом слое и выберите пункт Convert to Smart Object. После этого пройдите в меню Filter → Noise → Add Noise и настройте, как показано ниже.

Шаг 2: Создание шапки сайта

Создадим простую шапку с названием сайта и добавим несколько социальных иконок. Создайте новую группу (Layer → New → Group) и назовите её “Header”. Инструментом Horizontal Type Tool (T) напишите название сайта. Я использовал шрифт “Gotham Bold” размером 42pt цветом #707679. Расположите текст, как показано ниже, используя направляющие.

Кликните дважды на текстовом слое, чтобы открыть окно стилей и примените стили, показанные ниже.

Из набора социальным иконок, предоставленных в начале урока, откройте в Фотошопе три иконки: RSS, Facebook и Twitter (или любые другие иконки в зависимости от Вашего дизайна). Инструментом Move Tool (V) перетащите их в основной документ и расположите справа сверху. Расстояние между иконками — 10 пикселей. Выберите все три слоя иконок в палитре слоёв и нажмите Ctrl + G, чтобы объединить их в группу. Назовите группу “social icons”.

Шаг 3: Создание узора

Сейчас мы создадим узор для навигационной панели и других участков сайта. Создайте новый документ (Ctrl + N) размером 5х5 пикселей. Выберите инструмент Rectangular Marquee Tool (M) и, удерживая клавишу Shift, создайте пять квадратных выделений, как показано ниже на скриншоте. Создайте новый слой (Ctrl + Shift + N) и залейте выделение чёрным цветом. Скройте фоновый слой, кликнув на иконке глаза рядом со слоем в палитре слоёв. Перейдите в меню Edit > Define Pattern, чтобы сохранить узор. После этого закройте документ.

Шаг4: Создание навигационной панели

Создайте новую группу “Navigation”. Выберите инструмент Rectangle Tool (U) и создайте прямоугольник высотой 50 пикселей на всю ширину холста. Цвет прямоугольника — #b8c0c3. Кликните правой кнопкой на слое и выберите пункт Convert to Smart Object.

Кликните дважды на слое, чтобы открыть окно стилей и примените стили, показанные ниже. После этого перейдите в меню Filter → Noise → Add Noise. Настройки фильтра показаны ниже.

Выберите инструмент Line Tool (U) и создайте линию толщиной 1 пиксель над навигационной панелью. Цвет линии — #cdd3d7. Назовите этот слой “1px line”.

Сделайте копию слоя с линией (Ctrl + J) и инструментом Move Tool (V) опустите её на 1 пиксель, используя клавишу стрелки вниз на клавиатуре. Измените цвет второй линии на #818b91 .

Используя те же цвета, создайте две такие же линии под навигационной панелью.

Шаг 5: Добавление разделов меню

Выберите инструмент Horizontal Type Tool (T) и напишите названия ссылок на панели. Используйте шрифт “Helvetica Bold” размером 14pt белого цвета.

Ко всем текстовым слоям навигационного меню примените стиль Drop Shadow.

Выберите инструмент Rounded Rectangle Tool (U) с радиусом 4 пикселя. Создайте чёрный прямоугольник размером 70х26 пикселей цветом #1d2d34. Расположите его под слоем раздела меню и назовите “active menu item”. На холсте его нужно расположить под словом “Home”. Установите Opacity слоя на 35%.

Шаг 6: Создание узора для слайдера

Теперь я покажу технику создания слабозаметного узора мозаики. Создайте новый документ (Ctrl + N) размером 200х200 пикселей. Установите цвета по умолчанию (клавиша D), Создайте новый слой (Ctrl + Shift + N) и перейдите в меню Filter → Render → Clouds.

Кликните правой кнопкой мыши на слое с облаками и выберите пункт Convert to Smart Object. После этого перейдите в меню Filter → Pixelate → Mosaic.

Сделайте копию слоя “Layer 1” (Ctrl + J) и примените к ней фильтр High Pass (Filter → Other → High Pass): настройки показаны ниже. Установите Blending Mode этого слоя на Hard Light, чтобы сделать мозаику более резкой и создать тень вокруг квадратиков.

Сейчас мы сделаем мозаику ещё более резкой. Создайте новый слой (Ctrl + Shift + N) поверх остальных и перейдите в меню Image → Apply Image, нажмите ОК. У Вас появится отдельный слой, содержащий в себе все остальные.

Кликните правой кнопкой на созданном слое и выберите пункт Convert to Smart Object. Смарт-объекты позволят нам изменить настройки фильтров в любой момент. Далее перейдите в меню Filter → Sharpen → Sharpen Нажмите Ctrl +F, чтобы повторить этот фильтр ещё раз. Два раза будет достаточно, чтобы получить чёткие свечения между квадратами.

Создайте корректирующий слой Brightness/Contrast (Layer → New Adjustment Layer → Brightness/Contrast), настройте, как показано ниже. Затем Создайте новый слой (Ctrl + Shift + N) поверх остальных и перейдите в меню Image → Apply Image.

Чтобы создать первый узор, перейдите в меню Edit → Define Pattern и нажмите ОК. В следующем шаге я покажу, как использовать этот узор для создания диагональной мозаики. Не закрывайте пока данный документ с узором, он нам ещё понадобится.

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

Создайте новый документ (Ctrl + N) размером 800х800 пикселей. Создайте новый слой (Ctrl + Shift + N) и залейте его белым цветом. Кликните дважды на слое, чтобы открыть окно стилей и примените Pattern Overlay: выберите узор, созданный в предыдущем шаге.

Кликните правой кнопкой на слое “Layer 1” и выберите пункт Convert to Smart Object. После этого активируйте инструмент Free Transform (Ctrl + T) и, удерживая клавишу Shift, поверните слой на 45 градусов.

Вернитесь в документ, в котором мы создавали узор и перетащите растрированный слой (“Layer 4”) в него. Кликните правой кнопкой на слое и выберите пункт Convert to Smart Object. Инструментом Free Transform (Ctrl + T) поверните его на 45 градусов.

Выберите инструмент Move Tool (V) и переместите этот слой, чтобы интегрировать его в фоновый узор. Я использовался тёмные квадраты в качестве направляющих, чтобы определить наиболее правильное положение слоя. Используйте клавиши стрелок на клавиатуре в сочетании с инструментом Move Tool (V), чтобы перемещать слой попиксельно. На скриншоте ниже я подсветил маленький узор красным цветом, чтобы Вы могли его увидеть.

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

Удерживая клавишу Ctrl, кликните на иконке слоя “Layer 2”, чтобы сделать его выделение. Активируйте Линейки (Ctrl + R) и отведите направляющие по углам выделения, как показано ниже.

Квадрат, который получился благодаря направляющим и будет нашим узором. Уберите выделение (Ctrl + D) и удалите слой с маленьким узором. Он нам больше не нужен.

Инструментом Rectangular Marquee Tool (M) создайте выделение, как показано ниже.

Перейдите на слой “Layer 1” и затем в меню Edit → Copy (Ctrl + C). Создайте новый документ (Ctrl + N). Фотошоп воспользуется размерами выделенной области. Вставьте скопированное выделение (Ctrl + V). Далее перейдите в меню Edit → Define Pattern, чтобы сохранить узор.

Шаг 7: Создание фона для слайдера

Теперь мы применим созданный узор к слайдеру. Создайте новую группу (Layer → New → Group) и назовите её “Image Slider”. Выберите инструмент Rectangle Tool (U) и создайте прямоугольник высотой 410 пикселей на всю ширину холста цветом #81aaba. Назовите этот слой “slider_bg”. Кликните правой кнопкой на слое в палитре слоёв и выберите пункт Convert to Smart Object.

Кликните дважды на слое, чтобы открыть окно стилей слоя и примените стили Gradient Overlay и Pattern Overlay (их настройки показаны ниже). После этого перейдите в меню Filter → Noise → Add Noise и настройте, как показано ниже.

Совет: Для инструментов векторных фигур можно задавать фиксированный размер при помощи параметра Fixed Size на панели инструмента в верхней части окна программы.

Инструментом Line Tool (U) создайте две горизонтальные линии толщиной 1 пиксель на всю ширину холста. Расположите её под фоном слайдера. Цвет первой линии — #b8c8ce. цвет второй — #849ba4 .

Шаг 8: Создание слайдера изображений

Инструментом Rectangle Tool (U) и создайте прямоугольник размером 620х340 пикселей цветом #d2dade. Кликните дважды на слое, чтобы открыть окно стилей и примените стили, показанные ниже на скриншоте. Цвет стиля Stroke — #819098 .

Создайте ещё один прямоугольник размером 600х320 пикселей. Расположите его в центре предыдущей фигуры при помощи инструмента Move Tool (V). Назовите слой “image_holder”. Откройте окно стилей и примените Inner Glow (настройки показаны ниже на скриншоте).

Откройте любое изображение в Фотошопе, которое Вы хотите вставить в слайдер. Инструментом Move Tool (V) перетащите его в наш документ и расположите на слайдере. Назовите этот слой “image”, кликните правой кнопкой мыши на слое и выберите пункт Create Clipping Mask (Ctrl + Alt + G). Теперь изображение будет находиться в пределах слоя “image_holder”.

Теперь создадим тень в нижней части слайдера. Выберите инструмент Ellipse Tool (U) и, удерживая клавишу Shift, создайте чёрный круг на середине нижней стороны слайдера (скриншот 1).

Назовите этот слой “shadow”, кликните правой кнопкой мыши на слое и выберите пункт Convert to Smart Object. Примените фильтр Gaussian Blur (Filter → Blur → Gaussian Blur) со значением радиуса 3 пикселя. Потом активируйте инструмент Free Transform (Ctrl + T) и, удерживая клавиши Alt + Shift, перетащите правый край рамки трансформации вправо до конца слайдера (скриншот 2).

Расположите этот слой под слоем “border” и установите его Opacity на 15% (скриншот 3).

Теперь создадим кнопки-переключатели, которые будут показывать, сколько изображений содержит слайдер и какое из них активно. Создайте новую группу и назовите её “radio buttons”. Инструментом Ellipse Tool (U) создайте круг цветом #f6f6f6 диаметром 10 пикселей. Назовите слой “radio button”. Сделайте несколько копий слоя (Ctrl + J) и расположите круги под слайдером в ряд, как показано ниже.

Создайте ещё один круг диаметром 6 пикселей в центре первого цветом #8bb2bf. Назовите слой “active”.

Шаг 9: Создание стрелок на слайдере

Создайте новую группу “right arrow”. Инструментом Ellipse Tool (U) создайте круг, удерживая клавишу Shift. Цвет круга — #e7edef. диаметр — 45 пикселей. Назовите слой “circle”. Расположите его на правой стороне слайдера. Кликните дважды на слое, чтобы открыть окно стилей и примените стили, показанные на скриншоте ниже.

Скопируйте символ “»” какого-нибудь текстового редактора. Вернитесь в Фотошоп, выберите инструмент Horizontal Type Tool (T), кликните на холсте и вставьте символ (Ctrl + V). Я использовал шрифт “Gotham Bold” размером 32pt цветом #727e84. Расположите стрелку в центре круга.

Сделайте копию группы “right arrow” (через контекстное меню группы в палитре слоёв). Потом перейдите в меню Edit → Transform → Flip Horizontal. Перместите копию кнопки на другую сторону слайдера и переименуйте группу в “left arrow”.

Шаг 10: Добавление текста на слайдер

Теперь мы создадим область с описанием текущего изображения, представленного в слайдере. Выберите инструмент Rounded Rectangle Tool (U) и создайте прямоугольник шириной 300 пикселей цветом #2c5a6b. Высота прямоугольника будет зависеть от количества строк текста в этой области. Назовите слой “text bg” и установите его Opacity на 30%.

Выберите текстовый инструмент и заполните созданный прямоугольник текстом. Для заголовка я использовал шрифт “Futura Bold” размером 26pt цветом #ebebeb. Для описания — шрифт “Helvetica Regular” размером 15pt белого цвета. Ко всему тексту примените стиль Drop Shadow: настройки на скриншоте ниже.

Шаг 11: Создание веб-кнопок

Создайте новую группу “Description”. Здесь мы напишем краткую биографию фрилансера. Текстовым инструментом напишите несколько предложения под слайдером, используя шрифт “Helvetica Bold” размером 16pt цветом #555555 .

Под текстом нужно создать кнопку переход к портфолио. Создайте новую группу “buttons” и инструментом Rounded Rectangle Tool (U) с радиусом 4 пикселя создайте фигуру цветом #bbbbbb. Назовите слой “button” и примените к нему стили, показанные ниже. Цвет стиля Stroke — #a7a7a7 .

Текстовым инструментом напишите “View Portfolio” на кнопке. Я использовал шрифт “Helvetica Bold” размером 15pt цветом #fafafa .

Создайте ещё одну кнопку справа от первой. Цвет кнопки — #7fb6cd. цвет обводки — #6799ad .

Шаг 12: Создание разделителя

Создайте новую группу “separator”. Инструментом Line Tool (U) создайте горизонтальную линию толщиной 1 пиксель и шириной 940 пикселей. Цвет линии — #c8c8c8. Назовите слой “1px line”. Сделайте копию слоя с линией (Ctrl + J), поднимите её на 1 пиксель вверх, используя стрелки на клавиатуре в сочетании с инструментом Move Tool (V), и измените её цвет на #f2f2f2 .

Выберите инструмент Rectangular Marquee Tool (M) и создайте выделение размером 940х18 пикселей над двумя линиями. Создайте новый слой (Ctrl + Shift + N) и залейте выделение чёрным цветом. Назовите слой “gradient” и уберите выделение (Ctrl + D) (скриншот 1).

Кликните дважды на слое “gradient” и настройте, как показано на скриншоте ниже (скриншот 2).

Добавьте маску к слою “separator” (Layer → Layer Mask → Reveal All). Потом выберите инструмент Gradient Tool (G): Style — Linear. Сделайте заливку цветом от чёрного к прозрачному, удерживая клавишу Shift, как показывают стрелки на скриншоте. Сначала на одной стороне, потом на другой.

Кликните правой кнопкой на слое “separator” и выберите пункт Convert to Smart Object.

Шаг 13: Создание области “Services”

Создайте новую группу “Main Content”. В этой области мы поместим услуги, которые могут быть представлены клиентам.

Инструментом Rectangle Tool (U) создайте белый прямоугольник размером 940х300 пикселей. Назовите слой “main content bg” и примените стиль Stroke: #bfc5c8 .

Создайте новую группу “tabs” и создайте ещё один прямоугольник высотой 44 пикселя над предыдущим белым. Цвет прямоугольника — #b5bdc1. Назовите слой “title bar”, кликните дважды, чтобы открыть окно стилей и примените стили, показанные на скриншоте ниже.

Инструментом Rectangle Tool (U) создайте ещё один прямоугольник высотой 4 пикселя цветом #9da5a9. Его нужно расположить над прямоугольником “title bar”. Назовите слой “top line”.

Инструментом Rectangle Tool (U) создайте белый прямоугольник, как показано ниже. Это будет активной вкладкой. Этот слой не должен заходить на область слоя “top line” и иметь обводку слева, которая получилась от нижнего слоя.

Выберите текстовый инструмент и напишите название услуги. Я написал “Web Design”. Шрифт — “Futura Bold” размером 17pt цветом #9ba3a8. После этого примените стиль Drop Shadow к текстовому слою.

Загрузите иконки Glyphish и откройте PSD файл в Фотошопе. Перетащите иконку в наш документ и расположите рядом с названием услуги. Я использовал иконку iMac. Кликните дважды на слое и примените стили, показанные ниже. Градиент стиля Gradient Overlay: #b5bdc1 — #a1aab0 .

Совет: Чтобы быстро выбрать иконку без поиска её слоя в палитре слоёв, используйте инструмент Move Tool (V). Выберите этот инструмент и на панели параметров установите значение Layer. После этого, удерживая клавишу Ctrl, кликните на иконке на холсте. Слой с иконкой будет автоматически выбран и Вы сможете перетащить его в основной документ.

Выберите инструмент Horizontal Type Tool (T) и напишите название следующей услуги. Например, “web development” и “iPad/iPhone apps”. Используйте тот же шрифт, что и для названия первой услуги (в моём случае это “Futura Bold”), но измените его цвет на белый. Примените стиль Drop Shadow к текстовым слоям.

Вставьте иконки, показанные ниже, если Вы создали такие же услуги, как и я. Используйте те же стили, что и для иконки первой услуги, но измените цвета стиля Gradient Overlay: #f8f8f8 — #f0f0f0 .

Шаг 14: Добавление контента на область “Services”

Мы разделим контент области “Services” на две колонки: “about” и “case studies”. Создайте новую группу “column 1”. Текстовым инструментом напишите слово “About”. Я использовал шрифт “Futura Book” размером 19pt цветом #9ba3a8 .

Откройте иконку iMac, предоставленную в начале урока, в Abode Illustrator. Выберите иконку инструментом Selection Tool (V), скопируйте её (Ctrl + C) и вставьте в документ в Фотошопе (Ctrl + V), как смарт-объект. Назовите слой “imac” и инструментом Free Transform (Ctrl + T) измените размер иконки, как показано ниже.

Инструментом Rectangle Tool (U) создайте прямоугольник над экраном компьютера и назовите его “image_holder”. Откройте любое изображение в Фотошопе, которое Вы хотите видеть на экране iMac. Инструментом Move Tool (V) перетащите его в наш документ и назовите слой “image”. Измените его размер, расположите на иконке iMac и создайте обтравочную маску для слоя (Ctrl + Alt + G).

Выберите текстовый инструмент и напишите текст справа от иконки. Я использовал шрифт “Helvetica Regular” размером 13pt цветом #333333. Ширина текста — 460 пикселей.

Теперь создадим кнопку для области “Services”. Инструментом Rounded Rectangle Tool (U) с радиусом 5 пикселей создайте прямоугольник размером 600х50 пикселей цветом #f3f3f3. Назовите этот слой “button border”. Кликните дважды на слое, чтобы открыть окно стилей и примените стили, показанные на скриншоте ниже. Цвет стиля Stroke — #d1d1d1 .

Тем же инструментом создайте ещё один прямоугольник с радиусом 4 пикселя размером 586х36 пикселей цветом #7fb6cf в центре первого прямоугольника. Назовите этот слой “button”. Примените стили, показанные ниже. Цвет стиля Stroke — #6698ad .

Выберите текстовый инструмент и напишите что-нибудь на кнопке. Я использовал шрифт “Helvetica” размером 17pt цветом #fafafa. После этого примените стиль Drop Shadow к текстовому слою. Настройки стиля показаны ниже на скриншоте.

Шаг 15: Область “Case Studies”

Создайте новую группу “column 2”. Текстовым инструментом напишите “Case Studies” в правой части области “Services”. Я использовал шрифт “Futura Bold” размером 19pt цветом #9ba3a8 .

Инструментом Rectangle Tool (U) создайте квадрат (удерживайте клавишу Shift) размером 80х80 пикселей цветом #f7f7f7. Назовите этот слой “border”, кликните на нём дважды и примените стили, показанные ниже. Цвет стиля Stroke — #a3b2b9 .

Создайте ещё один квадрат размером 70х70 пикселей в центре предыдущего. Назовите этот слой “image_holder”. Вставьте любое изображение в наш документ, которое хотите поместить в квадрат. Назовите слой “image” и расположите поверх слоя “image_holder”. Создайте обтравочную маску для слоя (Ctrl + Alt + G).

Выберите три слоя квадрата: “border”, “image_holder” и “image” (удерживая клавишу Ctrl и кликая по именам слоёв можно выбирать сразу несколько слоёв). Сделайте 5 копий иконки (перетащите слои на иконку создания нового слоя в нижней части палитры слоёв). Измените изображение каждой иконки и расположите их все, как показано ниже.

Шаг 16: Создание области портфолио

Создайте новую группу “Portfolio”. Создайте фон для этой области так же, как и в случае с областью “services”. Размер фонового прямоугольника — 620х280 пикселей. Скопируйте цвета и стили слоя на фон, заголовок и верхнюю линию с области “services”. Добавьте заголовок и иконку, как показано ниже.

Теперь мы создадим свечение для панели заголовка. Выберите инструмент Line Tool (U) и создайте линию толщиной 1 пиксель в нижней части панели заголовка. Оставьте расстояние между панелью и линией в 1 пиксель (смотрите на скриншот 1).

Добавьте маску слоя (Layer → Layer Mask → Reveal All) и выберите инструмент Gradient Tool (G). Удерживая клавишу Shift, сделайте заливку от чёрного к прозрачному на левом конце линии слева направо. В результате линия будет становиться невидимой по мере приближению к краю. Потом проделайте то же самое на правом конце. Назовите этот слой “highlight” и установите Opacity на 70% (скриншот 2).

Теперь добавим несколько изображений последних работ фрилансера и краткое описание к ним. Проделайте то же самое, как в и случае с областью “Case Studies”, чтобы добавить иконки.

Выберите текстовый инструмент и напишите текст справа от картинки. Я использовал шрифт “Futura Book” размером 17pt цветом #9ba3a8 для заголовка. Для самого описания — шрифт “Helvetica Regular” размером 18pt.

Ширина одного проекта должна быть 280 пикселей. Выберите все слои проекта и объедините их в группу (Ctrl + G). Назовите её “project #1”. Сделайте три копии этой группы и расположите их, как показано на скриншоте ниже. Измените картинку и описание каждой группы.

Шаг 17: Создание области блога

Создайте новую группу “Blog”. Потом создайте фоновую область, как и в случае с портфолио. Добавьте заголовок и иконку тем же способом.

Выберите инструмент Horizontal Type Tool (T) и сделайте пару постов, используя те же шрифты и цвет, как в случае с портфолио. Для ссылки “Continue reading »” я использовал цвет #7fb6cd .

Теперь нужно создать пунктирную линию, которая отделит посты друг от друга. Сначала создайте новый документ размером 10х1 пиксель. Создайте новый слой (Ctrl + Shift + N) и инструментом Rectangular Marquee Tool (M) создайте выделение размером 6х1 пиксель. Залейте выделение чёрным цветом. Скройте фоновый слой и перейдите в меню Edit → Define Pattern, дайте имя узору и нажмите ОК. Закройте документ.

Вернитесь в основной документ, выберите инструмент Line Tool (U) и создайте горизонтальную линию размером 260х1 пиксель. Установите Fill слоя на 0% и Opacity на 20%.

Примените стиль Pattern Overlay и выберите сохранённый узор.

Шаг 18: Создание футера

Создайте новую группу “Footer”. Сделайте копию слоя “separator” из группы “Description” и перетащите его в группу “Footer”. Инструментом Move Tool (V) расположите слой под областью портфолио и блога.

Сейчас мы создадим область Twitter. Создайте новую группу “recent tweets”. Перетащите иконку птицы в наш документ, кликните правой кнопкой на слое в палитре слоёв и выберите пункт Clear Layer Styles. Потом кликните дважды на слое, чтобы открыть окно стилей. Примените стили, показанные ниже. Цвета стиля Gradient Overlay: #8b8b8b и #c7c7c7 .

Текстовым инструментом напишите "Recent Tweets" рядом с иконкой. Я использовал шрифт “Futura Bold” размером 15pt цветом #585858 .

Текстовым инструментом сделайте пару постов под заголовком. Ширина текстовой области — 300 пикселей. Я использовал шрифт “Helvetica Regular” размером 12pt цветом #333333. Цвет ссылок — #7fb6cd .

Между постами нужно создать разделители при помощи инструментом Line Tool (U). Цвета: #c8c8c8 и #fefefe .

Добавьте кнопку “Follow us »” и примените к ней те же стили, что и для кнопки “Work With Me” из группы “Description”.

Шаг 19: Создание области “About”

Создайте новую группу “about”. Добавьте иконку силуэта и скопируйте на неё стили с иконки птицы. Текстовым инструментом напишите “About”. Настройки шрифта те же, что и для надписи “Recent Tweets”.

Под заголовком добавьте описание шириной 300 пикселей.

Шаг 20: Создание контактной формы

Создайте новую группу “contact”. Добавьте иконку конверта в наш документ. Скопируйте на неё стили с иконки птицы. Текстовым инструментом напишите “Contact” рядом с иконкой. Используйте тот же шрифт, что и для заголовков “Recent Tweets” и “About”.

Выберите инструмент Rectangle Tool (U) и создайте несколько прямоугольников цветом #f7f7f7. Это поля контактной формы. Примените стиль Stroke с настройками, показанными ниже. Цвет стиля Stroke — #8c9295. Текстовым инструментом напишите описание каждого поля. Я использовал шрифт “Helvetica Regular” размером 13pt цветом #676f73 .

Создайте букву “Send” таким же образом, как и кнопку “Follow us” из “Recent Tweets”.

Шаг 21: Информация о правах

Создайте новую группу “Copyright”. Сделайте копию слоя “separator” из группы “Footer” и поместите её в группу “Copyright”. Выберите копию и перейдите в меню Edit → Transform → Flip Vertical. Инструментом Move Tool (V) расположите эту линию под областью футера.

Текстовым инструментом напишите информацию о правах, используя шрифт “Helvetica Regular” размером 12pt цветом #5a5a5a .

Конечный результат:

Поделитесь уроком

Правовая информация

Избранное

Хохотун: дизайн сайта в ворде

Интересные записи

• Главная - Графика - Фотошоп - Как в Photoshop нарисовать море Как в Photoshop нарисовать море
• Как в фотошопе сделать логотип для сайта компании
• Как нарисовать макет сайта в Photoshop - секреты профессионалов
• Как рисовать в - Фотошопе
• Как нарисовать таблицу в фотошопе
• WoT как танк сделать элитным