Tags: Графика для сайта | дизайн сайта | макет сайта | уроки web дизайна | уроки создания сайта

В этом уроке вы узнаете как создать простой и красочный макет сайта . Данный макет можно использовать в качестве основы под WordPress

 

Для начала откройте новый документ размером 960*900 пикселов.Выберите фоновый слой и нажмите комбинацию клавиш Ctrl + J. Этим действием вы дублируете фоновый слой. Выберите второй слой и добавьте к нему следующие стили:

 

Инструментом Прямоугольник со скругленными углами создадим 4 формы как показано на рисунке ниже:

Всем этим формам мы добавляем стиль слоя:

С помошью инструмента прямоугольные формы мы создадим несколько фигур для нашего макета. Проще всего будет создать одну форму а затем скопировать ее несколько раз. Вот как я буду это делать:

Для этих слоев используем стили:

Продублировав формы несколько раз мы получим заполненую верхнюю часть макета:

Выделите на палитре слоев все слои с маленькими формами и обьедините их в один слой, нажав комбинацию клавиш Ctrl + E.
Далее нам необходимо создать выделение на второй белой форма. Для этого мы кликаем  левой кнопкой мыши по экскизу формы в палитре слоев удерживая нажатой клавишу CTRL .

Вы увидите выделение вокруг своей формы.

Выберите слой с оранжевыми вертикальными формами и нажмите  Ctrl + J. Photoshop скопирует выделенную область на новый слой и она будет помешена над первым слоем. Нажмите Ctrl + D чтобы снять выделение.

И вы получите такой результат:

Создайте новый слой на слоем с оранжевыми формами. Самый простой способ это сделать это скопировать большую белую форму и перетащить его выше желтого слоя.

 

Для этой формы добамив следующие стили:

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

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

Для этих двух слоев добавим следующие стили:

 

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

На верхней части добавим логотип и текст для кнопок:

Для логотипа применим следующие стили:

Далее создадим темные линии для оранжевого слоя между формами, которые будут выглядеть намного лучше чем белые.

Для этого иструментом Линия создадим несколько вертикальных линий шириной в 1 пиксель.

Теперь инструментом Прямоугольник со скругленными углами создадим несколько кнопок и применим к ним стили:

Вот как должна выглядеть кнопка:

Далее заполняем макет текстом и добавляем образ с глобусом:

На средней части макета создадим форму как показано на рисунке:

С помощью правой кнопки мыши щелкаем на пилитру слоя и растрируем его. Потом инструментом Ластик удаляем ненужные углы http://viagraspills.....

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

Вот что должно получится в итоге:

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

Источник