Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Делаем psd-макет сайта. Часть 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На сегодня всё, но продолжение следует.


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