| DEXTER | Дата: Четверг, 29.08.2013, 02:14 | Сообщение # 1 |
|
UP-CS.RU
Группа: Модераторы
Сообщений: 51
Статус:  | Приступим к рисованию макета будущего сайта. Буду рисовать конечно
несложный макет, так сказать theme framework – минимальный дизайн, но
при помощи которого можно сделать вполне приличный и насыщенный дизайн
сайта.Ориентировка – макет для сайта на 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 для правого.
Делаем
горизонтальное меню, для этого от шапки сверху внизу отмеряем 20
пикселей, вытаскиваем направляющую на 230 пикселей сверху. В конце
концов получаем такую картинку.
Пожалуй начнем с отрисовки меню высотой 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 пикселя и черный цвет и нажимаем ДА, чтобы применить стили слоя и закрыть окошко.
Все макет готов. Естественно, что я не стал писать урок об рисовании
макета супер-креативного образца, так как бы на это ушло несколько дней.
Как вы видите, не надо ничего рисовать, просто поработать стандартными
операциями вставки-копирования-заливки и т.д.
|
| |
|
|
