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