| tops88 | Дата: Суббота, 02.08.2014, 16:11 | Сообщение # 1 |
 Постер
Группа: Пользователи
Сообщений: 25
| Итоговый результат:
Исходники к уроку:
Иконки
960 Grid System
Шаг 1. Создание структуры сайтаДля начала скачайте 960 grid system. Откройте файл "960_download\templates\photoshop\960_grid_12_col.psd". Нажмите Ctrl+Shift+C, чтобы изменить размер холста.
Используя инструмент Заливка  (Paint Bucket Tool) залейте фоновый слой цветом #242b30. Теперь Вам нужно создать папки для каждой части сайта.
Шаг 2. Создание шапки сайтаСоздайте новую папку и назовите её "Header". Перейдите в Вид > Новая направляющая (View > New Guide), в появившемся окне выберите Ориентация (Orientation) - Горизонтальная (Horizontal), и в поле Позиция (Position) введите 100px.
Выберите инструмент Прямоугольная область  (Rectangular Marquee Tool), создайте выделение, как показано на скриншоте ниже, и залейте его белым (#FFFFFF) цветом.
Добавьте стили слоя:
Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол 90;
- #171c20;
- #22292f;
Обводка (Stroke):
- #0d1012;
Шаг 3. Создание логотипаСоздайте папку "Logo", внутри папки "Header". Выберите инструмент Текст  (Type Tool) и напишите своё название сайта, с теми же настройками, что и на скриншоте ниже.
Добавьте стили слоя:
Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;
Теперь создайте новый слой, назовите его "Light " и поместите его под текстовым слоем. Создайте выделение, как показано на скриншоте ниже.
Установите цвет переднего плана на белый (#FFFFFF). Выберите инструмент Кисть  (Brush Tool), в параметрах кисти выберите кисть с теми же параметрами, что и на скриншоте ниже.
Создайте такое же осветление, как и на скриншоте.
Установите Непрозрачность (Оpacity) на 80% и режим наложения измените на Мягкий свет (Soft Light).
Шаг 4. Создание навигацииСоздайте папку "Navigation" внутри папки "Header". Выберите инструмент Текст (Type Tool) и создайте несколько пунктов меню, со следующими настройками:
Я выделил ссылку "Home", потому что это активная ссылка. Для остальных ссылок я использовал цвет #b6aefd. Для активной ссылки добавьте следующие стили:
Наложение цвета (Color Overlay):
- #232a2f;
Создайте новый слой и поместите его под слой с активной ссылкой. Возьмите инструмент Прямоугольник со скруглёнными углами  (Rounded Rectangle Tool) и установите радиус скругления в 5px.
Добавьте следующие стили:
Наложение градиента (Gradient Overlay):
- линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;
Обводка (Stroke):
- #13181b;
Шаг 5. Создание слайд-шоуСоздайте новую направляющую (Вид > Новая направляющая (View > New Guide)). Ориентация (Orientation) - Горизонтальная (Horizontal), Позиция (Position) - 140px. Повторите действия и создайте ещё одну направляющую, позиция - 440px.
Создайте новую папку - "Slideshow". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px, и создайте прямоугольник, как на скриншоте ниже, залейте цветом - #171c20.
Добавьте стили слоя:
Создайте выделение для слоя, перейдите в Выделение > Модификация > Сжать (Selection > Modify > Contract) и сожмите выделение на 5px. Создайте 4 новых направляющих и перетащите к краям выделения.
Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) с радиусом в 5px. Цвет я выбрал - #36414a. На самом деле, цвет для этой формы не имеет значения, т.к. это будет подложка для изображений.
Добавьте стили слоя:
Внутреннее свечение (Inner Glow):
- #424f5a;
Обводка (Stroke):
- #111417;
Внутри папки "Slideshow" создайте папку "divider". Выберите инструмент Прямоугольное выделение ( Rectangular Marquee Tool). Создайте две 1 пиксельные вертикальные линии. Цвет первой - #111417. Цвет второй - #424f5a.
Мы разделим слайд-шоу на 2 части. В левую часть мы поместим описание к картинке, из правой части, и две кнопки. Внутри папки "Slideshow" создайте папку "left". Выберите инструментПрямоугольник со скруглёнными углами (Rounded Rectangle Tool), радиус - 5px. Создайте прямоугольник внутри подложки.
Добавьте стили слоя:
Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #242b31;
- #36414a;
Создайте новый слой "header". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), создайте прямоугольник и поместите его так же, как на скриншоте ниже.
Добавьте следующие стили слоя:
Внутреннее свечение (Inner Glow):
- #424f5a;
Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #21282d;
- #2f3840;
Обводка (Stroke):
- #111417;
Теперь добавьте свой заголовок, используя инструмент Текст (Type Tool). (Цвет - #171c20; Отступ - 20px)
Дублируйте слой с текстом и сместите на 1 пиксель вниз. Добавьте стили слоя:
Наложение градиента (Gradient Overlay):
- Стиль: линейный;
- #d4d4d4;
- #ffffff;
С помощью инструмента Текст (Type Tool) добавьте описание.
Внутри папки "Slideshow" создайте папку "Read more". Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте прямоугольник и поместите так же, как на скриншоте ниже. Выберите инструмент Текст (Type Tool) и напишите "Read more", цвет - #dedede.
Создайте папку "prev_next". Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool). Создайте и поместите прямоугольник так же, как и на скриншоте ниже.
Добавьте стили слоя:
Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #929292;
- #bcbdbd, Позиция (Location): 30%;
- #dfdfdf, Позиция (Location): 50%;
- #dfdfdf, Позиция (Location): 100%;
Обводка (Stroke):
- #161b1f;
Выберите инструмент Произвольная фигура  (Custom Shape Tool) и выберите такую же стрелку, как и на скриншоте ниже.
Поместите её, как на скриншоте ниже:
Добавьте стили слоя:
Наложение градиента (Gradient Overlay)::
- Стиль: линейный градиент;
- угол: 90;
- #21282d;
- #2f3840, Позиция (Location): 50% и 100%;
Теперь возьмите какую-нибудь картинку и поместите её в правую часть слайд-шоу.
Выберите инструмент Перо  (Pen Tool) и создайте такую же форму, как на рисунке ниже, залейте её чёрным (#000000) цветом.
Перейдите в Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur) радиус размытия установите 5px. Непрозрачность (Оpacity) установите на 80%.
Шаг 6. Создание блока "What I Do"Выберите инструмент Текст (Type Tool), напишите свой заголовок и поместите так же, как и на скриншоте ниже.
Добавьте стили слоя:
Наложение градиента (Gradient Overlay):
- Стиль: линейный градиент;
- #d4d4d4;
- #ffffff;
Внутри папки "What I Do" создайте 4 папки: "I Capture Smiles", "I Design Websites", "Awards I Receive" и "I love to Socialize". С помощью инструмента Текст (Type Tool) напишите какой-нибудь текст для каждого блока. Для заголовков я использовал следующие настройки: Цвет - #dfdfdf; Размер - 18pt. Для описания: Цвет - #dfdfdf; Размер - 12pt. Стили для кнопки "Read more" те же, что и у кнопки в Слайд-шоу. Размер блока - 220px.
Если Вы выполнили предыдущий шаг, то у Вас должно уже получится что-то вроде этого:
Шаг 7. Создание разделителяВнутри папки "Divider" создайте новую папку "lines". Чтобы сделать разделитель воспользуйтесь инструментом Линия  (Line Tool). Цвет первой линии - #111417. Цвет второй - #364148.
Выберите инструмент Прямоугольник  (Rectangle Tool), создайте и поместите прямоугольник так же, как на скриншоте ниже. Заливку (Fill) уменьшите до 0%.
Добавьте стили слоя:
Дублируйте слой и измените стиль Наложение градиента (Gradient Overlay).
Цвет градиента - #242b30;
Шаг 8. Создание блока "About Me"Внутри папки "About Me" создайте новый слой, выберите инструмент Текст (Type Tool) и добавьте заголовок и описание. Используйте те же настройки, что и в блоке "What I Do".
Шаг 9. Создание блока "My Portfolio"Внутри папки "My Portfolio" создайте новый слой, и с помощью инструмента Текст (Type Tool) напишите свой заголовок.
Выберите инструмент Прямоугольник ( Rectangle Tool) и поместите прямоугольник, как показано на скриншоте ниже.
Добавьте стили слоя:
Обводка (Stroke):
- #161b1f;
Поместите своё изображение тем же способом, что и в слайд-шоу.
Теперь, добавьте описание, для этого возьмите инструмент Текст (Type Tool) и напишите описание так, как показано на скриншоте ниже.
Шаг 10. Создание футераСоздайте новый слой, внутри папки "Footer". Выберите инструмент Прямоугольник (Rectangle Tool), цвет - #171c20, создайте прямоугольник (Высота - 50px) и поместите так же, как на скриншоте.
Добавьте стили слоя:
Внешнее свечение (Outer Glow):
- #111417;
Обводка (Stroke):
- #364148;
Добавьте свои копирайты в левой части футера и несколько ссылок в правой.
Шаг 11. Добавление фонового свеченияВыберите папку "Background" и внутри неё создайте 2 слоя и назовите их "Slideshow_light" и "whatido_light". Выберите слой "Slideshow_light", возьмите инструмент Прямоугольная область ( Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.
Чтобы создать свечение выберите инструмент Кисть (Brush Tool), размер - 700, жёсткость (hardness ) 0%. Создайте свечение, как показано на скриншоте ниже. В режиме наложения выберите Мягкий свет (Soft Light), Непрозрачность (Оpacity) 70%.
У Вас должен будет получится такой же эффект:
Выберите слой "whatido_light". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как на скриншоте ниже.
Режим наложения измените на Мягкий свет (Soft Light) и Непрозрачность (Оpacity) уменьшите до 70%. Создайте свечение, как на скриншоте ниже.
Вот и всё! Надеюсь, Вы узнали что-то новое в этом уроке, и, надеюсь, Вам понравился этот урок!
Итоговый результат:
р е к л а м а
|
| |
| |
Последние коментарии