Tags: уроки web дизайна | уроки веб дизайна | уроки создания сайта

В этом уроке вы узнаете как создать макет фотореалистичного сайта всего за несколько шагов.

Для этого макета нам понадобится текстура которую вы можете сохранить на свой компьютер.

Откройте это изображение в фотошопе и перейдите по меню Редактирование-Определить узор. Выбурите название для данной текстуры и нажмите ОК.

Создайте новый документ размером 960*900 пикселей по высоте и залейте его узором, который вы только что создали.
Вы получите что то вроде этого:

Установите цвет переднего плана # 49290 и инструментом Прямоугольник со скругленными углами создайте в центре макета форму.

Задайте форме следующие стили:

Необходимо будет создать еще формы над первой, для них используйте белый цвет.

Для этих слоев используйте те же стили слоя что и в предыдущем шаге.

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

В нижней правой части макета добавим изображение дивана и цветочного горшка.

Под слоем с диваном создадим круглую форму инструментом Овал.

Для этого слоя используем фильтр Размытие по Гауссу со следующими параметрами:

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

В левой стороне макета создадим несколько блоков инструментом Прямоугольник.

Для фигур задайте следующие стили слоя:

Добавим текст и изображение:

С правой стороны добавим несколько банеров:

Добавим пунктирную линию между постами.

Чтобы создать пунктирную линию воспольщуемся инструментом Горизонтальный текст  и применим к нему следующие настройки:

Последний шаг это создание логотипа и кнопок:

Вот окончательный результат. Как видите это было сделано очень просто и потребовало лишь несколько хороших образов и картинок.

Источник.