Дизайн бизнес сайта

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


Дизайн бизнес сайта


1. Создайте новый документ размером 900х1000 пикселей, залейте фон цветом #e6e7eb,выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей и создайте фигуру шириной 845 пикселей и высотой 250. Выберите инструмент Градиент (Gradient Tool), тип – зеркальный градиент, используя цвета #3c362c и #23201b, сделайте заливку фигуры:


Дизайн бизнес сайта


2. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите заголовок и слоган. К заголовку примените такие стили в меню Стилей слоя (Layer Style — Blending Options):

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


Дизайн бизнес сайта


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


Дизайн бизнес сайта


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


Дизайн бизнес сайта


К слою со слоганом примените такие стили:

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


Дизайн бизнес сайта


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


Дизайн бизнес сайта


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


Дизайн бизнес сайта

Дизайн бизнес сайта


3. Справа от заголовка создайте разделитель, состоящий из двух 1-пиксельных линий разного цвета:


Дизайн бизнес сайта


4. Загрузите здесь иконки и вставьте одну рядом с разделителем. Далее напишите текст:


Дизайн бизнес сайта


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

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


Дизайн бизнес сайта


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


Дизайн бизнес сайта

Дизайн бизнес сайта


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


Дизайн бизнес сайта


7. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте ещё два прямоугольника рядом, залейте их цветом #dee2e5 и создайте 1-пиксельную обводку цветом #bfc4c7. Вставьте в них иконки:


Дизайн бизнес сайта


8. Допишите текст-описание:


Дизайн бизнес сайта


9. Под этими двумя областями создайте ещё одну белого цвета и создайте 1-пиксельную обводку цветом #b2b2b2.


Дизайн бизнес сайта


9. В этом белом прямоугольнике создайте ещё один маленький прямоугольник (стили слоя для него такие же, как и для предыдущих двух отдельных). Заполните все области текстом и создайте футер:


Дизайн бизнес сайта


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


Дизайн бизнес сайта





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

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

11 декабря 2018

11 декабря 2018

Байонет: KA/KAF/KAF2 Тип объектива: телеобъектив Фокусное расстояние: переменное

11 декабря 2018

Технологии передовых цифровых зеркальных фотокамер Nikon, объединенные в фотокамере D90, в сочетании с широким набором усовершенствованных функций позволяют получать великолепные снимки. КМОП-матрица формата DX с разрешением 12,3 эффективных мегапикселей и...