[Table]Приступим к рисованию макета будущего сайта. Буду рисовать конечно несложный макет, так сказать theme framework – минимальный дизайн, но при помощи которого можно сделать вполне приличный и насыщенный дизайн сайта.
Ориентировка – макет для сайта на DLE, классический трех-колоночный веб-дизайн сайта с установленной CMS DLE версий 7-8. Итак, приступим, я использую Adobe Photoshop CS3 официальную русскую версию.
Внимание! В этом уроке не будут рассматриваться основные приемы работы с фотошопом такие как выбор любого инструмента, вставка текста и т.д. Уровень пользователя программы фотошоп – минимальный.
Что же можно сообразить такое несложное, но чтоб вы поняли как что делается без особых усилий? Нарисуем шапку, левые и правые блоки, центральную часть и футер (подвал сайта).
Причем дизайн всех блоков, левых, правых и центральных будет одинаковый, разница только в ширине, для блоков возьмем ширину 200 пикселей, для центральной части все что останется.
Также замечу, что буду рисовать макет с фиксированной шириной – стандартная 960-пиксельная grid system, чтобы наш сайт одинаково хорошо отображался на мониторах с разрешением от 1024х768 пикселей и выше (это монитор 19 дюймов).
Запускаем фотошоп и нажимаем в меню Файл-Новый… или Ctrl+N. Задаем ширину 1040 пикселей и высоту 1400 пикселей как показано на рисунке. Я задаю на 80 пикселей больше, чтобы визуально видеть сам макет на окружающем фоне.[/Table]
[Table]Теперь нам надо обозначить границы макета, нажимаем Ctrl+R, чтобы увидеть линейки. Кстати нам надо, чтобы единицы измерения были пиксели, для этого нажимаем правой кнопкой мышки по линейке и ставим там галочку на пиксели. Теперь надо вытянуть вспомогательные направляющие, и тем самым обозначим границы макета. Делается это так – ставим курсор мышки на линейку, нажимаем и тянем направляющую на 40 пикселей по горизонтальной линейке. Мы оставим по бокам по 40 пикселей.[/Table]
[Table]Вытаскиваем справа тоже, только на ширину 1000 пикселей, вот и получаем по 40 пикселей по бокам. Сверху вытащим тоже на 40 пикселей и получим вот такую картинку.[/Table]
[Table]Шапку делаем высотой 160 пикселей, поэтому вытаскиваем направляющую на 200 пикселей сверху (160+40px). Теперь обозначим левый и правый сайдбары, по 200 пикселей каждый. Левый – вытаскиваем на 240 (40+200px), правый на 800 (1040-40-200px).
Дальше сделаем отступ от правого и левого сайдбаров по 5 пикселей вовнутрь, вытаскиваем направляющие на 245 пикселей по линейке и на 795 для правого.
Делаем горизонтальное меню, для этого от шапки сверху внизу отмеряем 20 пикселей, вытаскиваем направляющую на 230 пикселей сверху. В конце концов получаем такую картинку.[[/Table]
[Table]Пожалуй начнем с отрисовки меню высотой 30 пикселей. Буду рисовать что-то серо-белое, чтоб макет подходил под практически любую тематику. Например, под строительство или ремонт, кино или книги.[/Table]
[Table]Выбираем инструмент прямоугольная область клавишей М. Выделяем область для меню и инструментом заливка G заливаем выделенную область цветом #BBBBBB. Далее нажимаем в меню Выделение-Модификация-Сжать, там вводим 1 пиксель и нажимаем ОК. Теперь заливаем выделенную область цветом #efefef. Нажимаем Ctrl+H чтобы скрыть направляющие и видим вот такую картинку – блок меню с рамкой. Не влазит в экран, но вот что приблизительно.[/Table]
[Table]Можно провести еще одну направляющую под меню на расстоянии 5 пикселей, чтобы отделить менюшку от контентой области. Теперь давайте заполним шапку. Создаем новый слой (Слой-Новый-Слой… или Crtl+Shift+N). Далее я использую вот такую иконку, добавляю ее в шапку. Для этого вам надо сохранить эту иконку, затем открыть ее в фотошопе, выделить ее (Ctrl+A) и скопировать Ctrl+C. Переходим в наш макет и нажимаем Ctrl+V чтобы вставить иконку.[/Table]
[Table]Кстати я придумал тематику макета, давайте сделаем про фильм Iron Man 2 – Железный человек 2. Думаю это будет потрясающий фильм – фантастика и активный боевик в одном сюжете. Значит выбираем инструмент горизонтальный текст T и пишем в шапке название фильма. Взял шрифт Trajan Pro размером 60 пикселей.[/Table]
[Table]А теперь пришел черед оформления блоков. Давайте добавим еще одну направляющую, чтобы получить высоту заголовка блока 30 пикселей. Давайте блоки оформим в такой же цветовой гамме, как и меню. Создаем новый слой. Выделяем прямоугольную область заголовка блока и заливаем ее цветом #bbbbbb, затем уменьшаем выделение на один пиксель и заливаем цветом #efefef, как я писал выше. Теперь очередь контентной области блока сайдбара. Выделяем область ниже заголовка по высоте на глаз и подобной операцией заливаем блок. Получаем вот что.[/Table]
[Table]Делаем то же самое для контентной центральной части макета, не забудьте создать новый слой. Дальше можно скопировать слой, в котором мы нарисовали левый блок и продублировать его вниз, а также на правый сайдбар. Делается это так. Находим свой слой в панели слои (чтобы показать в меню Окно-Слои) и нажимаем правой кнопкой мыши по надписи слоя и выбираем Создать дубликат слоя. Затем выбираем инструмент перемещение V и тянем этот слой вниз, чтобы расположить второй блок под первым.[/Table]
[Table]Добавлю что-нибудь в макет, например текст и картинки, пропишу меню. Я добавил в меню несколько ссылок на разделы сайта. Потом добавил картинку в блок новости, добавил текста. Затем продублировал во второй блок. Размножил блоки в сайдбарах для большего визуального восприятия. Вот что получилось.[/Table]
[Table]Делаем футер точно также как и блок с менюшкой, пропишем там чуток текста. Например, вот так как на скриншоте.[/Table]
[Table]А теперь еще один прием как без рисования кистью преобразить любой элемент в более красивый. Выбираем слой , в котором собственно находится наша надпись в шапке Iron Man 2 крупными буквами.[/Table]
[Table]В появившемся окошке включаем галочку тень, теперь поиграемся с параметрами тени. Я сделал вот так, как это видно на рисунке.[/Table]
[Table]Далее ставим галочку на наложение градиента и заливаем желто-оранжевым градиентом, как показано на рисунке.[/Table]
[Table]Выбираем обводку, ставим толщину обводки 2 пикселя и черный цвет и нажимаем ДА, чтобы применить стили слоя и закрыть окошко.[/Table]
[Table]Все макет готов. Естественно, что я не стал писать урок об рисовании макета супер-креативного образца, так как бы на это ушло несколько дней. Как вы видите, не надо ничего рисовать, просто поработать стандартными операциями вставки-копирования-заливки и т.д.[/Table]
[Table]Вот окончательный вид макета, а тут вы можете скачать PSD файл макета, который я нарисовал. Скачать PSD файл. Следующий урок будет уроком верстки этого макета в HTML код. Ждите, скоро он будет. помог ?? ставь + [/Table] [Table]А вот псд[/Table]
Code
http://depositfiles.com/files/f4z04xoju
Источник: http://www.zasada-portal.ru/ [moder] Моя цель на cs-portale добраться, до администратора и стать примером для окружающих! [/moder]
