Скрипты и шаблоны для uCoz

Ориентировка – макет для сайта на DLE, классический
трех-колоночный веб-дизайн сайта с установленной CMS DLE версий 7-8.
Итак, приступим, я использую Adobe Photoshop CS3 официальную русскую
версию.

Внимание! В этом уроке не будут рассматриваться основные
приемы работы с фотошопом такие как выбор любого инструмента, вставка
текста и т.д. Уровень пользователя программы фотошоп – минимальный.

Что же можно сообразить такое несложное, но чтоб вы поняли как что
делается без особых усилий? Нарисуем шапку, левые и правые блоки,
центральную часть и футер (подвал сайта).

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

Также замечу, что буду рисовать макет с
фиксированной шириной – стандартная 960-пиксельная grid system, чтобы
наш сайт одинаково хорошо отображался на мониторах с разрешением от
1024х768 пикселей и выше (это монитор 19 дюймов).

Запускаем
фотошоп и нажимаем в меню Файл-Новый… или Ctrl+N. Задаем ширину 1040
пикселей и высоту 1400 пикселей как показано на рисунке. Я задаю на 80
пикселей больше, чтобы визуально видеть сам макет на окружающем фоне.


Теперь нам надо обозначить границы макета, нажимаем Ctrl+R, чтобы
увидеть линейки. Кстати нам надо, чтобы единицы измерения были пиксели,
для этого нажимаем правой кнопкой мышки по линейке и ставим там галочку
на пиксели.
Теперь надо вытянуть вспомогательные направляющие, и
тем самым обозначим границы макета. Делается это так – ставим курсор
мышки на линейку, нажимаем и тянем направляющую на 40 пикселей по
горизонтальной линейке. Мы оставим по бокам по 40 пикселей.


Вытаскиваем справа тоже, только на ширину 1000 пикселей, вот и получаем
по 40 пикселей по бокам. Сверху вытащим тоже на 40 пикселей и получим
вот такую картинку.


Шапку делаем высотой 160 пикселей, поэтому вытаскиваем направляющую на
200 пикселей сверху (160+40px). Теперь обозначим левый и правый
сайдбары, по 200 пикселей каждый. Левый – вытаскиваем на 240 (40+200px),
правый на 800 (1040-40-200px).

Дальше сделаем отступ от правого
и левого сайдбаров по 5 пикселей вовнутрь, вытаскиваем направляющие на
245 пикселей по линейке и на 795 для правого.