Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

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

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


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

 


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

 

Источник.

AddThis Social Bookmark Button