Делаем psd-макет сайта



Помимо обработки различных изображений фотошоп довольно часто используется для создания макетов сайтов. Сохраняются эти макеты с расширением Photoshop (*.PSD;*.PDD), именно поэтому они носят название psd-макеты. Вообще, как работают крупные компании над созданием сайтов? Сначала дизайнер делает psd-макет, затем верстальщик создаёт шаблон при помощи html, css и java-script, потом всё это накладывается на какую-либо CMS или в шаблон вставляются коды, скрипты, при помощи которых сайт функционирует, про техническое задание ничего не говорю, итак понятно, что оно даётся в самом начале. Сегодня создадим простенький psd-макет при помощи программы Photoshop CS5.1. Открываем фотошоп и создаём там новый файл, размер зададим такой, как у одного из современных мониторов, например 1366x768 и сделаем его прозрачным:

Фон макета сайта

Заливаем его тёмно-серым цветом:

Серый фон макета сайта

В предыдущем уроке мы делали баннер с ягодами, помещаем его сверху на наш макет таким образом, чтобы он находился в середине страницы:

Баннер на макете сайта

Далее, кликаем на наш фоновый слой, будем работать с ним, и при помощи инструмента "прямоугольник", рисуем светло-серый прямоугольник, почти белый, такой, как на скриншоте:

Основная часть сайта на макете

Теперь в этом прямоугольнике, рисуем другой прямоугольник, светло-зелёный:

Почти верхнее меню

В этот светло-зелёный прямоугольнике, который будет играть роль верхнего меню, при помощи текста вставляем ссылки:

Ссылки в верхнем меню

Далее создаём новый слой с названием "поиск" и в нём рисуем белый прямоугольник со скруглёнными углами, радиус скругления - 5 пикселей:

Форма для поиска

Для поиска я сделал такой значок:

Значок поиска для сайта

Создаём новый слой и помещаем значок туда таким образом, чтобы он находился справа от окна поиска. В самом окне пишем слово "Найти..." шрифтом Arial, Italic, размером 18 пт:

Верхнее меню с поиском

Теперь создадим подвал сайта, то есть место в самом низу веб-страницы, в котором написана различная контактная информация, то, что все права защищены и, очень часто, размещены различные ссылки на разделы сайта. Подвал сделаем при помощи прямоугольника, цвет которого будет e0eeca. Цвет текста ближе к чёрному, шрифт Arial, Regular, 14 пт. Перед текстом разместим произвольную фигуру в виде значка ©, надпись в подвале видно на скриншоте ниже:

Подвал сайта в фотошопе

При помощи прямоугольников цвета bfd69c создадим боковые колонки:

Боковые колонки сайта в фотошопе

Используя цвет d4f1a9, выделяем места для названий разделов сайта, задаём именуем их шрифтом Arial, Regular, 24 пт, в каждый раздел вставляем ссылки, шрифт Arial, Italic, 18 пт. Цвет текста - 22251e:

Боковые колонки с разделами в Photoshop CS5.1

Ну и в центре нашей страницы разместим статью с картинкой. Рисунок помещаем отдельно от текста, но так, чтобы он смотрелся как внутри статьи. Шрифт заголовку задаём Arial, Regular, 30 пт, тексту такой же, только размером 18 пт. Получилось следующее:

psd-макет сайта в Photoshop CS5.1

Вот наш шаблон в формате JPEG (*.JPG;*.JPEG;*.JPE):

Макет сайта в виде рисунка

Если кому интересно, данный psd-макет можно скачать здесь.

2013 год.


<<Предыдущая | В раздел