Бизнес сайт

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


Бизнес сайт


Создание фона
Создайте новый документ с холстом размером 1200х1200 пикселей. Установите цвет заливки — #505050, цвет фона — #2d2d2d и выберите инструмент Градиент (Gradient Tool). Настройте его, как показано ниже:


Бизнес сайт


Сделайте заливку, начиная с центральной верхней части холста:


Бизнес сайт


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


Бизнес сайт


Назовите этот слой “header” и примените к нему такие стили в меню Стилей слоя (Layer Style — Blending Options):

Внутренняя тень (Режим – Затемнение основы):


Бизнес сайт


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


Бизнес сайт

Бизнес сайт


Верхняя панель
Инструментом Перо (Pen Tool) нарисуйте фигуру в верхней части, как показано ниже:


Бизнес сайт


Залейте её чёрным цветом:


Бизнес сайт


Примените к ней такие стили:

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


Бизнес сайт


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


Бизнес сайт


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


Бизнес сайт


В отведённой области напишите “Contact Us” и добавьте небольшую стрелку вниз. Её можно сделать при помощи инструмента Многоугольное лассо (Polygonal Lasso Tool).


Бизнес сайт


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


Бизнес сайт


Залейте её любым цветом и объедините этот слой со слоем с верхней полоской.


Бизнес сайт


Напишите названия разделов навигации:


Бизнес сайт


Под навигацией добавьте заголовок и слоган.


Бизнес сайт


Сервисная зона
Под областью шапки сайта создайте две 1-пиксельные линии чёрного и белого цвета в отдельном слое. Потом установите Непрозрачность этих линий – 40%.


Бизнес сайт


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


Бизнес сайт


К этому слою примените следующие стили:

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


Бизнес сайт


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


Бизнес сайт


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


Бизнес сайт


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


Бизнес сайт

Бизнес сайт


Загрузите этот набор иконок, вставьте некоторые в созданную область и добавьте текст.


Бизнес сайт


Между статьями добавьте две 1-пиксельные линии разного чёрного и белого цвета в новом слое. Потом установите Режим наложения этого слоя с линиями – Мягкий свет (Blending Mode – Soft Light):


Бизнес сайт


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


Бизнес сайт


Сайдбар
В новом слое под сервисной зоной создайте две 1-пиксельые линии чёрного и белого цвета и установите Режим наложения этого слоя — Мягкий свет (Blending Mode – Soft Light). Эти линии должны продолжать предыдущие:


Бизнес сайт


Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение нужной ширины (не выделяйте созданные линии):


Бизнес сайт


Выберите инструмент Градиент (Gradient Tool), цвет – от чёрного к прозрачному, и в новом слое, начиная от линий, сделайте линейную заливку вправо. Установите Непрозрачность этого слоя – 15%.


Бизнес сайт


Добавьте маску слоя (Layer Mask) к этому слою и тем же градиентом сделайте заливку снизу вверх.


Бизнес сайт


Добавьте нужный контент в области сайдбара.


Бизнес сайт


Область контента
Используя иконки и текст, заполните левую сторону:


Бизнес сайт


Под текстом создайте такое выделение:


Бизнес сайт


Залейте выделение цветом #1e1e1e и примените такие стили слоя:

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


Бизнес сайт


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


Бизнес сайт


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


Бизнес сайт


Футер
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение остальной половины холста и залейте его цветом #1e1e1e. Примените такие стили слоя:

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


Бизнес сайт


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


Бизнес сайт


В область футера допишите нужную информацию и возможность подписки:


Бизнес сайт


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


Бизнес сайт




Делаем Web-дизайн

Вас может также заинтересовать:

21 августа 2018

21 августа 2018

21 августа 2018

Дата анонса: 2008/01/24 Эффективное разрешение, МП: 8.2 Диагональ ЖК-дисплея, дюймы: 2.5