Создаем Psd шаблон для сайта

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

Теперь начнем наш урок, по созданию Psd шаблона.

Создадим для начала новый документ размерами 1020×1020 px, фон выбираем белого цвета.

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

Создание навигации и поисковую форму

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

Создаем Psd шаблон для сайта

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

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Вот мой результат поисковой форму.

Создаем Psd шаблон для сайта

Создание навигации

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта
Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

Создание области под текст.

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

Создаем Psd шаблон для сайта

Создание подвала сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

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

Создаем Psd шаблон для сайта

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>