Дизайн software-сайта

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


Дизайн software-сайта


Настройка холста
Создайте новый документ с такими настройками:


Дизайн software-сайта


Создание фона
Установите цвет заливки — #585858, цвет фона — #282425. Выберите инструмент Градиент (Gradient Tool) и настройте так:


Дизайн software-сайта


Из середины холста сделайте заливку вниз:


Дизайн software-сайта


Заголовок сайта
Используя белый и #d7e400 цвета, напишите заголовок сайта и слоган.


Дизайн software-сайта


Настройки для шрифта показаны ниже:


Дизайн software-сайта


Справа допишите номер телефона:


Дизайн software-сайта


Для верхней строки с номером примените следующие стили в меню Стилей слоя (Layer Style — Blending Options):

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта

Дизайн software-сайта


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


Дизайн software-сайта


Создайте фигуру любого цвета под заголовком:


Дизайн software-сайта


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


Дизайн software-сайта


Залейте его тем же цветом, что и фигура. Потом сделайте то же самое на другой стороне:


Дизайн software-сайта


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

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта

Дизайн software-сайта


Навигационные кнопки
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите названия разделов:


Дизайн software-сайта


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

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


Выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент, и сделайте заливку цветами #d3df00 и #b4c00a.


Дизайн software-сайта


Потом к этому прямоугольнику примените стиль Обводка (Layer Style – Stroke):

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


Дизайн software-сайта


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


Дизайн software-сайта


Потом допишите текст:


Дизайн software-сайта


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

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


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

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


Напишите на кнопке слово “TRY NOW” и примените к тексту эти стили:

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


Дизайн software-сайта


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


Дизайн software-сайта

Дизайн software-сайта


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


Дизайн software-сайта


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

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


Дизайн software-сайта


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


Дизайн software-сайта


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


Дизайн software-сайта


Залейте его любым цветом и примените стиль Наложение градиента (Layer Style — Gradient Overlay):

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


Дизайн software-сайта


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


Дизайн software-сайта

Дизайн software-сайта


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


Дизайн software-сайта


Установите Непрозрачность слоя – 40%. Это было нужно для того, чтобы затемнить область сайдбара немного.

Контент
Используя заголовки, иконки и различный текст, заполните область контента.


Дизайн software-сайта


Футер
Внизу создайте простой футер:


Дизайн software-сайта


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


Дизайн software-сайта





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

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

17 января 2019

17 января 2019

17 января 2019