
Теперь начнем наш урок, по созданию Psd шаблона.
Создадим для начала новый документ размерами 1020x1020 px, фон выбираем белого цвета.

Выбираем основной цвет - #c5e0dc и цвет фона - #ece5ce

Затем я выбрал инструмент Градиент и в панели настроек выбрал первый тип градиентов.

Теперь залейте градиентом наше белое полотно, протащив линию от верхней грани полотна до нижней.

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

Создание навигации и поисковую форму
Выбираем инструмент “ Горизонтальный текст” (T) я воспользовался шрифтом Tahoma размером 24px и цветом # 895b41. Напишем этим шрифтом Stylish, затем для надписи Template изменю цвет на белый. Описание сайта написал шрифтом Tahoma размером 12 px.

Затем создадим поисковую форму.
Воспользуемся инструментом «Прямоугольник» . Для придания более лучшего вида применим следующие стили слоя.


Инструментом “ Горизонтальный текст” (T) внутри форму напишем надпись.
Выбираем Инструмент «Прямоугольник со скругленными углами» и создадим подобную кнопку

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


Инструментом “ Горизонтальный текст” (T) напишем текст кнопки.
Вот мой результат поисковой форму.

Создание навигации
Выбираем Инструмент «Прямоугольник со скругленными углами» и создаем будущую навигацию.

Применим следующие стили слоя:



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

Выбираем Инструмент «Прямоугольник со скругленными углами» и создаем элементы панели навигации.

Применяем следующие стили:




Добавляем надписи для панели навигации.

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


Создадим область для вывода новых новостей.
Выбираем инструмент «Прямоугольник». Нарисуйте область, равную по ширине навигации. Созданный слой располагаем выше слоя с навигацией.

Примените следующие стили слоя:






Воспользовавшись не которыми изображениями и текстом, я заполнил область под вывод новых новостей.

Единственно чего не хватает это кнопки для прокрутки новостей. Её мы создадим с помощью знакомого инструмента «Прямоугольник со скругленными углами».

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


Это заключительный результат верхней части шаблона.

Создание области под текст.
При помощи инструмента “ Горизонтальный текст” (T) и некоторых картинок, Вы можете создать эту часть менее чем за 5 минут.
Вот что получилось у меня:

Создание подвала сайта
Для начала выберем инструмент «Эллипс» , и воспользовавшись цветом #c5e0dc, создадим 2 формы, так же на скриншоте ниже.

Заключительный этап: добавьте текст авторского правав подвал сайта.

Вот мой окончательный результат:
