Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


Сайт о софте


Загрузите эти иконки:

Классические иконки
Коробка софта


Создание документа
Создайте новый документ размером 1200х1200 пикселей. Установите цвет заливки - #d6d6d6, цвет фона – #efefef и выберите инструмент Градиент (Gradient Tool), стиль – линейный.


Сайт о софте


Сделайте заливку холста сверху вниз на 250-300 пикселей.


Сайт о софте


Создание шапки
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение высотой 160-170 пикселей на всю ширину холста.


Сайт о софте


Установите цвет заливки - #483f38, цвет фона - #1e1916. Выберите инструмент Градиент (Gradient Tool), стиль – зеркальный.


Сайт о софте


Из середины прямоугольного выделения сделайте заливку к любой из его сторон. Потом примените фильтр Добавить шум (Add Noise Filter):


Сайт о софте

Сайт о софте


Создание заголовка
Текстовым инструментом создайте заголовок и слоган. Цвета показаны ниже:


Сайт о софте


К заголовку примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение


Сайт о софте


К одному из слов заголовка примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Сайт о софте

Сайт о софте


Малая навигация
Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей.


Сайт о софте


Создайте фигуру справа на области шапки.


Сайт о софте


Примените к прямоугольнику эти стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Нормальный):


Сайт о софте


Внутренняя тень (Режим – Умножение):


Сайт о софте


Наложение цвета (Режим – Нормальный):


Сайт о софте


Напишите названия разделов.


Сайт о софте


Создание основной навигации
Перед созданием основной навигации, мы отделим область шапки. Инструментом Прямоугольная область (Rectangular Marquee Tool) или Горизонтальная строка (Single Row Marquee Tool) создайте две 1-пиксельные линии чёрного и белого цвета друг на друге. Эти две линии должны быть расположены прямо под шапкой.


Сайт о софте


Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте фигуру, как показано ниже.


Сайт о софте


Примените к прямоугольнику эти стили:

Отбрасывание тени (Режим – Умножение):


Сайт о софте


Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Сайт о софте


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Сайт о софте


Создайте ещё один прямоугольник внутри высотой в половину первого внутри него. Цвет – белый.


Сайт о софте


Установите Непрозрачность слоя – 5%.
Создайте новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш (Pencil Tool) нарисуйте такой узор чёрного цвета.


Сайт о софте


Когда закончите, перейдите в меню Редактирование»Определить узор (Edit > Define Pattern) и сохраните узор под именем “Diagonal Lines”.
Вернитесь в основной документ, сделайте выделение основного прямоугольника навигации (Ctrl+Click), создайте новый слой (Create New Layer) и залейте выделение узором при помощи инструмента Заливка (Paint Bucket Tool). Установите Непрозрачность слоя – 10%.


Сайт о софте


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


Сайт о софте


К прямоугольнику примените эти стили:

Отбрасывание тени (Режим – Нормальный):


Сайт о софте


Внутренняя тень (Режим – Умножение):


Сайт о софте


Наложение цвета (Режим – Нормальный):


Сайт о софте


Добавьте иконку лупы и текст “Search Here”.


Сайт о софте


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


Сайт о софте


Справа от текста вставьте иконку коробки.


Сайт о софте


Сделайте копию слоя с коробкой, уменьшите её и расположите сзади. Примените к ней фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 1 пиксель.


Сайт о софте


Сделайте копию размытой коробки и примените тот же фильтр размытия со значением 1 пиксель. Уменьшите её и расположите так:


Сайт о софте


Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей создайте две кнопки. Примените к ним те же стили слоя, что и к навигационной панели.


Сайт о софте


Добавьте диагональный узор, который мы создали ранее и подпишите кнопки.


Сайт о софте


Создание разделителя
Создайте две 1-пиксельные линии:


Сайт о софте


Создайте выделение прямо под этими линиями:


Сайт о софте


Установите цвет заливки - #e6e6e6, цвет фона - #efefef, и сделайте заливку линейным градиентом сверху вниз.


Сайт о софте


Добавьте маску слоя к линиям (Layer Mask), цвет заливки – белый, цвет фона – чёрный. Сделайте заливку зеркальным градиентом от середины линий к краю. Проделайте это для обеих линий и градиентной заливки.


Сайт о софте


Добавление контента
Под разделителем слева создайте прямоугольник с закруглёнными углами. Не нужно делать его слишком большим. Там будет небольшой список.


Сайт о софте


Примените к нему эти стили:

Внутренняя тень (Режим – Нормальный):


Сайт о софте


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Сайт о софте


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Сайт о софте


Заполните этот прямоугольник:


Сайт о софте


Справа от прямоугольника напишите немного текста и вставьте иконки.


Сайт о софте


Футер
Сделайте копию шапки и опустите её вниз. Сожмите его немного и скопируйте разделительную линию. Допишите информацию футера.


Сайт о софте


Финальный результат:


Сайт о софте




Ссылка на источник урока

написал : Yureckiy

Good Job

---------------


написал : Grep

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: