Делаем 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:
Ну и в центре нашей страницы разместим статью с картинкой. Рисунок помещаем отдельно от текста, но так, чтобы он смотрелся как внутри статьи. Шрифт заголовку задаём Arial, Regular, 30 пт, тексту такой же, только размером 18 пт. Получилось следующее:
Вот наш шаблон в формате JPEG (*.JPG;*.JPEG;*.JPE):
Если кому интересно, данный psd-макет можно скачать здесь.
2013 год.
| В раздел