Уроки Веб и приложения 15 июля 2014

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

Сложность урока: Легкий

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

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

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

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

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

Архив

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: grafpedia

Комментарии 52

Сделала на свой манер

Ответить Ссылка

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

Ответить Ссылка

Спасибо, было занятно!

Ответить Ссылка

только заполнять долго надо, не могу уже :)

Ответить Ссылка

Бардак со шрифтами, если честно.

Ответить Ссылка 0 0

Спасибо за стильный дизайн!!!!!!

Ответить Ссылка

Я не шарю,як шрифтами користуватись

Ответить Ссылка

Спасибо за урок!

Ответить Ссылка

Спасибо за урок

Ответить Ссылка

хороший урок

Ответить Ссылка

Спасибо за урок!!!

Ответить Ссылка

Спасибо за урок, вот что поучилось у меня

Ответить Ссылка

спасибо за урок)

Ответить Ссылка 0 0

Спасибо за урок:)

Ответить Ссылка

Спасибо. Одинаково времени было потрачено на текст и на саму графику. В 2 часа уложился.

Ответить Ссылка

Ну так для общей тренировки пойдет))

Ответить Ссылка

Спасибо за урок)

Ответить Ссылка

Skyrim detected. Вы понимаете, о чем я.

Ответить Ссылка 0 0

Здравствуйте!
Можно пояснение для тупых:

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

не получается сделать отражение...

Администратор
Вопросы по уроку задавайте на форуме. В конце каждого урока есть ссылка "Задать вопрос на форуме".

Ответить Ссылка 0 0

Спасибо за урок)

Ответить Ссылка

Спасибо за урок.Очень интересный.

Ответить Ссылка
Еще 3
Добавить комментарий / работу

Новые работы пользователей

{{work.views}} {{work.comments}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба
Жалоба

Комментарии {{work.childs.length || 0}}

Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Creativo». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

После добавления работы:


Запланировать публикацию

{{pub_dates[pub_date]}}
Отменить планирование
Запланировать