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

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

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

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

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

Запускаем фотошоп и нажимаем в меню Файл-Новый… или Ctrl+N. Задаем ширину 1040 пикселей и высоту 1400 пикселей как показано на рисунке. Я задаю на 80 пикселей больше, чтобы визуально видеть сам макет на окружающем фоне.
http://arniwebdesign.com/wp-content/uploads/2010/01/newdoc.jpg
Теперь нам надо обозначить границы макета, нажимаем Ctrl+R, чтобы увидеть линейки. Кстати нам надо, чтобы единицы измерения были пиксели, для этого нажимаем правой кнопкой мышки по линейке и ставим там галочку на пиксели.
Теперь надо вытянуть вспомогательные направляющие, и тем самым обозначим границы макета. Делается это так – ставим курсор мышки на линейку, нажимаем и тянем направляющую на 40 пикселей по горизонтальной линейке. Мы оставим по бокам по 40 пикселей.
http://arniwebdesign.com/wp-content/uploads/2010/01/lines.jpg
Вытаскиваем справа тоже, только на ширину 1000 пикселей, вот и получаем по 40 пикселей по бокам. Сверху вытащим тоже на 40 пикселей и получим вот такую картинку.
http://arniwebdesign.com/wp-content/uploads/2010/01/addedlines.jpg
Шапку делаем высотой 160 пикселей, поэтому вытаскиваем направляющую на 200 пикселей сверху (160+40px). Теперь обозначим левый и правый сайдбары, по 200 пикселей каждый. Левый – вытаскиваем на 240 (40+200px), правый на 800 (1040-40-200px).

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

Делаем горизонтальное меню, для этого от шапки сверху внизу отмеряем 20 пикселей, вытаскиваем направляющую на 230 пикселей сверху. В конце концов получаем такую картинку.
http://arniwebdesign.com/wp-content/uploads/2010/01/goodlines.jpg
Пожалуй начнем с отрисовки меню высотой 30 пикселей. Буду рисовать что-то серо-белое, чтоб макет подходил под практически любую тематику. Например, под строительство или ремонт, кино или книги.
http://arniwebdesign.com/wp-content/uploads/2010/01/selection.jpg
Выбираем инструмент прямоугольная область клавишей М. Выделяем область для меню и инструментом заливка G заливаем выделенную область цветом #BBBBBB. Далее нажимаем в меню Выделение-Модификация-Сжать, там вводим 1 пиксель и нажимаем ОК. Теперь заливаем выделенную область цветом #efefef. Нажимаем Ctrl+H чтобы скрыть направляющие и видим вот такую картинку – блок меню с рамкой. Не влазит в экран, но вот что приблизительно.
http://arniwebdesign.com/wp-content/uploads/2010/01/menu.jpg
Можно провести еще одну направляющую под меню на расстоянии 5 пикселей, чтобы отделить менюшку от контентой области. Теперь давайте заполним шапку. Создаем новый слой (Слой-Новый-Слой… или Crtl+Shift+N). Далее я использую вот такую иконку, добавляю ее в шапку. Для этого вам надо сохранить эту иконку, затем открыть ее в фотошопе, выделить ее (Ctrl+A) и скопировать Ctrl+C. Переходим в наш макет и нажимаем Ctrl+V чтобы вставить иконку.
http://arniwebdesign.com/wp-content/uploads/2010/01/xine.png
Кстати я придумал тематику макета, давайте сделаем про фильм Iron Man 2 – Железный человек 2. Думаю это будет потрясающий фильм – фантастика и активный боевик в одном сюжете. Значит выбираем инструмент горизонтальный текст T и пишем в шапке название фильма. Взял шрифт Trajan Pro размером 60 пикселей.
http://arniwebdesign.com/wp-content/uploads/2010/01/logo.jpg
А теперь пришел черед оформления блоков. Давайте добавим еще одну направляющую, чтобы получить высоту заголовка блока 30 пикселей. Давайте блоки оформим в такой же цветовой гамме, как и меню. Создаем новый слой. Выделяем прямоугольную область заголовка блока и заливаем ее цветом #bbbbbb, затем уменьшаем выделение на один пиксель и заливаем цветом #efefef, как я писал выше. Теперь очередь контентной области блока сайдбара. Выделяем область ниже заголовка по высоте на глаз и подобной операцией заливаем блок. Получаем вот что.
http://arniwebdesign.com/wp-content/uploads/2010/01/block.jpg
Делаем то же самое для контентной центральной части макета, не забудьте создать новый слой. Дальше можно скопировать слой, в котором мы нарисовали левый блок и продублировать его вниз, а также на правый сайдбар. Делается это так. Находим свой слой в панели слои (чтобы показать в меню Окно-Слои) и нажимаем правой кнопкой мыши по надписи слоя и выбираем Создать дубликат слоя. Затем выбираем инструмент перемещение V и тянем этот слой вниз, чтобы расположить второй блок под первым.
http://arniwebdesign.com/wp-content/uploads/2010/01/layout.jpg
Добавлю что-нибудь в макет, например текст и картинки, пропишу меню. Я добавил в меню несколько ссылок на разделы сайта. Потом добавил картинку в блок новости, добавил текста. Затем продублировал во второй блок. Размножил блоки в сайдбарах для большего визуального восприятия. Вот что получилось.
http://arniwebdesign.com/wp-content/uploads/2010/01/layout2.jpg
Делаем футер точно также как и блок с менюшкой, пропишем там чуток текста. Например, вот так как на скриншоте.
http://arniwebdesign.com/wp-content/uploads/2010/01/copy.jpg
А теперь еще один прием как без рисования кистью преобразить любой элемент в более красивый. Выбираем слой , в котором собственно находится наша надпись в шапке Iron Man 2 крупными буквами.
http://arniwebdesign.com/wp-content/uploads/2010/01/parameter.jpg
В появившемся окошке включаем галочку тень, теперь поиграемся с параметрами тени. Я сделал вот так, как это видно на рисунке.
http://arniwebdesign.com/wp-content/uploads/2010/01/teni.jpg
Далее ставим галочку на наложение градиента и заливаем желто-оранжевым градиентом, как показано на рисунке.
http://arniwebdesign.com/wp-content/uploads/2010/01/gradient.jpg
Выбираем обводку, ставим толщину обводки 2 пикселя и черный цвет и нажимаем ДА, чтобы применить стили слоя и закрыть окошко.
http://arniwebdesign.com/wp-content/uploads/2010/01/obvodka.jpg
Все макет готов. Естественно, что я не стал писать урок об рисовании макета супер-креативного образца, так как бы на это ушло несколько дней. Как вы видите, не надо ничего рисовать, просто поработать стандартными операциями вставки-копирования-заливки и т.д.
http://arniwebdesign.com/wp-content/uploads/2010/01/maketLesson.png
Вот окончательный вид макета, а тут вы можете скачать PSD файл макета, который я нарисовал. Скачать PSD файл. Следующий урок будет уроком верстки этого макета в HTML код. Ждите, скоро он будет.
помог ?? ставь +
а вот псд http://depositfiles.com/files/f4z04xoju