Web-дизайн сайта фотографа

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

Прежде чем мы начнём, загрузите несколько иконок:

Фотоаппарат Nikon
Ещё один фотоаппарат
Стопка фотографий


Начинаем
Создайте новый документ размером 1200х1200 пикселей и выберите инструмент Градиент (Gradient Tool), стиль – радиальный градиент.

Установите цвет заливки - #eae9e9 и цвет фона - #d7d7d7.

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

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

Залейте выделение любым цветом в новом слое и примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

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

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

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

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

Создание узора для шапки
Создайте новый документ размером 14х16 пикселей с прозрачным фоном. Приблизьте изображение до 3200% и инструментом Овальная область (Elliptical Marquee Tool) создайте два чёрных круга, как показано ниже.

Теперь перейдите в меню Редактирование»Определить узор (Edit > Define Pattern), сохраните узор под любым именем и закройте документ.
Вернитесь в наш основной документ и сделайте выделение слоя с шапкой сайта (Ctrl+Click). Создайте новый слой и залейте выделение инструментом Заливка (Paint Bucket Tool) (в настройках инструмента сверху выберите сохранённый узор).

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

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

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

Установите Непрозрачность слоя – 20%.

Создание заголовка
Инструментом Горизонтальный текст (Horizontal Type Tool) создайте заголовок.

К текстовому слою примените эти стили:

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

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

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

Слева от названия заголовка вставьте иконку фотоаппарата, загруженную в начале урока.

Создание навигации
В правом верхнем углу создайте навигацию по сайту текстовым инструментом.

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

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

В начале навигации создайте ещё одно слово “Home” или “Homepage”. Слово должно быть белым. Под этим словом создайте прямоугольник с закруглёнными углами. К прямоугольнику примените эти стили:

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

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

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

Поля входа в учётную запись
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 10 пикселей создайте фигуру на правой стороне шапки. Потом установите Непрозрачность этого слоя – 40%.

Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте 3 чёрных прямоугольника: 2 одинаково больших и 1 маленький.

К этим трём треугольникам примените следующие стили:

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

Наложение цвета (Режим – Умножение):

Добавьте текст на эти поля.

Создание галереи
Вставьте фотографию фотоаппарата Nikon слева под шапку сайта. Справа от иконки напишите “From The Gallery” и короткий слоган.

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

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

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

Потом создайте несколько кругов, к ним тоже нужно будет применить те же стили, что и для текста.

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

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

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

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

Также примените Наложение градиента с оттенками серого.

Сделайте выделение слоя с одним из 4-х квадратов (Ctrl+Click). Потом примените Сжатие (Modify – Contract) со значением 10 пикселей. Вставьте в это выделение какое-нибудь изображение. Для этого сначала откройте его в Photoshop, сделайте выделение всего холста (Ctrl+A), скопируйте выделение (Ctrl+C), вернитесь в наш документ и перейдите в меню Редактирование»Вклеить в (Edit > Paste Into). Ваша картинка вставится в выделение. Измените его размер и расположите как вам нужно. Потом примените следующие стили:

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

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

В результате у вас должны быть такие картинки:

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

Установите Режим наложения слоя с линиями – Перекрытие (Blending Mode – Overlay) и добавьте маску слоя (Layer Mask). Выберите инструмент Градиент (Gradient Tool), стиль – зеркальный, и сделайте заливку из середины линий к одной из сторон.

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

Залейте выделение любым цветом и примените эти стили:

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

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

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

Кликните правой кнопкой на слое с этим прямоугольником и выберите Преобразовать в смарт-объект (Convert To Smart Object). Добавьте слой-маску (Layer Mask) и сделайте линейную заливку градиентом снизу вверх.

Текстовым инструментом заполните сайдбар.

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

Создание футера
Сделайте копию шапки и узора и перетащите её в нижнюю часть холста. Измените размер прямоугольника, чтобы он больше был похож на футер.
Измените настройки стиля Наложение цвета (теперь цвет - #8d8d8d) и Наложение градиента:

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

В конце добавьте информацию футера:

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