Делаем красивый макет сайта в тёмных тонах

В этом уроке мы сделаем красивый тёмный макет для сайта-магазина софта. Урок лёгкий, я думаю, любой новичок справится с ним не более чем за  2 часа. Если вы разработчик софта и вам нужен сайт, чтобы представить свой продукт, то этот урок для вас.

Финальное изображение:

Материалы для урока:

Градиенты (платно)

Текстуры (платно)

Архив

Создаём документ 1000 на 1100 пикселей. Этот размер наиболее универсален, так сайт будет смотреться хорошо на любых разрешениях. Заливаем фон цветом #202020. Меняем цвет на #191919 и заливаем им два прямоугольника, как показано ниже.

Применяем следующие стили для обоих.

Вот так должно получится.

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

Применяем для них стили.

Вот, что получилось у меня. Позже мы вставим сюда изображения.

Я создал ещё форму потемнее под этими. Далее кликаем по форме правой кнопкой и в выпавшем меню жмём Rasterize Shape (Растрировать фигуру).

Мы растрировали форму для того, чтобы можно было удалить нижнюю ее часть. Таким образом мы создадим симпатичное отражение. Вот, что получилось у меня. Тем же образом создаём отражения и для остальных двух блоков.

Создаём ещё одну форму цветом #1919191.

Применяем для новоиспечённой формы следующие стили:

Получилось так:

Добавим ещё несколько форм.

Для маленьких форм я применил немного другие стили. Для заливки я использовал градиенты, ссылка в архиве.

Я не буду рассказывать подробно, что сделал я. Будьте креативными и делайте то, что вам нравится. Вот так получилось у меня:

Добавляем текст.

Теперь добавим картинки в середину макета. Я использовал текстуры, ссылка в архиве. Вот так получилось у меня.

В правой части мы нарисуем красивую зелёную кнопочку. Яркая кнопка будет выделяться – психологический ход.

Применяем для кнопки следующие стили.

Вот, как она стала выглядеть в итоге.

Я сделал меню в верхней части шаблона. Разделители между ссылками я нарисовал с помощью Line Tool (Линия). Рисуем две вертикальные линии, первую – серую, вторую – чёрную.

Поздравляю вас, теперь все готово!

Автор: grafpedia

Источник: grafpedia.com