Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Создаем макет сайта в Фотошопе

174739_9900

Давайте поподробнее рассмотрим задачу, которую нам предстоит решить – создание макета сайта в Photoshop .

Это задача создания макета информационного сайта, причем резинового, ширина которого будет меняться динамически.

Для резинового сайта всегда нужно определять верхнее и нижнее значения ширины, в пределах которых он будет тянуться.

Минимальное значение, чтобы при верстке отдельные элементы не наползали друг на друга, разрушая структуру сайта, и максимальное значение, чтобы сайт не стал чрезмерно широким. В этом случае текст тоже  становится неудобочитаемым из-за слишком длинных строчек.

Можно предусмотреть, чтобы при дальнейшей верстке сайт был резиновым в пределах, например, от 1200 до 1400px (чтобы блоки и колонки текста были тянущимися).

Что потребуется для выполнения этого урока?

Итак, приступим.

Создадим новый документ, прозрачный, размером 1400 х 2000 (Нажмите ctrl+N и заполните поля в открывшемся окошке).

новый

новый рисунок

Открываем панель со слоями, соответствующими созданному документу. Единственный существующий слой переименовываем в Фон (два раза щелкнув по названию слоя).

На панели инструментов выбираем цвет переднего плана фиолетовый , нажимаем клавиши shift+F5  и заливаем этим цветом фон будущего макета.

цвет переднего плана и фона1212

Создаем структуру папок, соответствующую частям макета. Упорядоченность позволит лучше ориентироваться, не путаться  в слоях.  Нужно создать следующие папки – шапка, меню, контент, футер. (Нажимаем сочетание ctrl+f  и указываем название соответствующей папки).

структура слоев

Весь дальнейший процесс создания макета можно разделить на несколько этапов.

Размечаем макет направляющими

Направляющие – очень удобный инструмент, позволяющий  выполнить разметку  размеров отдельных элементов и отступов с точностью до одного пиксела, в результате чего ваш макет будет иметь аккуратный вид.

Направляющие представляют собой цветные линии, вертикальные и горизонтальные, устанавливающиеся на соответствующем делении линейки (например горизонтальная направляющая 100px отмечает расстояние 100px на вертикальной линейке и т.п.).

Есть два быстрых способа создать направляющие. Более известный – перетаскивание от линейки, но более удобный на мой взгляд – вводить точное положение направляющих с клавиатуры, с помощью диалогового окошка.

создание направляющих

Для этой цели я использую сочетание горячих клавиш ctrl+shift+;  (горячие клавиши нужно настроить)

Создайте горизонтальные направляющие 140px, 180px, 200px, 574px, 900px, 1450px, 1510px, 1610px и вертикальные направляющие 100px, 110px, 130px, 1270px, 1290px, 1300px.

Макет примет вид как на картинке. Это линии, расчерчивающие основные блоки.

размеченный макет

Рисуем основные блоки

Переходим в папку, соответствующую шапке сайта. Выбираем основной цвет  #3e0b1b.

Рисуем прямоугольник высотой 140 px, до первой горизонтальной направляющей,убедившись, что в параметрах инструмента выбран тип рисования слой-фигура.  Называем этот слой Подложка.

подложка

шапка подложка

Теперь перейдем к папке меню. Меню у нас будет фиксированной ширины 750 px,  всего 5 пунктов по 150 px. Cоответственно нужно прочертить вертикальные направляющие  350px, 1100px, 500px,  650px, 800px, 950px.

Выбрем цвет переднего плана #7652a5 и изобразим первый пункт. Теперь сделаем полученный прямоугольник слегка наклонным. Нажимаем ctrl+T. В параметрах сверху выбираем наклон -10. Жмем галочку, применяя изменения.

наклон

пункт меню

Осталось применить к полученному пункту стили. Если два раза щелкнуть по слою Пункт, откроется окно с настройкой стилей.Применяем стиль Внутренняя тень с настройками как на картинке.

стиль слоя

Остальные пункты размножим путем копирования первого. Получится что-то подобное.

меню

слои меню

Переключимся на папку Контент в слоях. Изменим основной цвет  на #c3b4d8 . Рисуем прямоугольник соответствующий странице.

страницаслой страница

Затем выше рисуем еще один прямоугольник с цветом, до горизонтальной направляющей 574px. Слой назовем  Верх страницы и применим к нему стиль Тень, как показано ниже.

стиль тень

верх страницы

Переключаемся на инструмент Линия на панели инструментов, чтобы нарисовать разделитель для страницы (вдоль горизонтальной направляющей 900px, между вертикальными направляющими 130px и 1270px ). Цвет #fff.

разделитель

Осталось создать слой Подвал. В папке футер рисуем прямоугольник такого же оттенка как шапка (#3e0b1b).

слой подвал

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

базовые блоки

Уделяем внимание деталям

Начнем с названия и логотипа. Добавляем дополнительные направляющие: горизонтальная 70px и вертикальная 750px.

Выбираем инструмент Текст, в параметрах выставляем шрифт Arsenal, размер 30px.Щелкаем мышкой в центре, в том месте, где будет находится текст и пишем название (в слоях в этот момент выбрана папка Шапка). Теперь делаем шрифт Verdana 24px и ниже пишем слоган (еще один сайт). Копируем рисунок логотипа в фотошоп (просто перетащив его мышью из папки где он находится).

К слоям логотип, название и слоган применяем слой Тень (см. рисунок).

тень лого

логотип

Копируем иконки  в папку меню и размещаем их на пунктах.

иконки меню

слои иконки

Прописываем названия пунктов шрифтом Arsenal italic 24px, оттенка #fff.

готовое меню

Теперь заполним верхнюю часть страницы (папка верх страницы).

Расчертим направляющими, где будут располагаться, отступы,  названия, блоки. Горизонтальные – 220px, 150px, 260px, 320px, 350px, 380px, 390px, 480px, 550px.  Вертикальные -470px, 510px, 880px, 920px. Выглядит это так.

направляющие верх страницы

Копируем иконки, которые будут перед текстом.

Переключаемся на Текст, пишем названия  шрифтом #444  Arsenal 24px. Рисуем четыре серых блока (оттенок #), называем слои блок1, блок2, блок3, блок4.

блоки

Добавим еще 4 направляющих, задающих отступы для строки поиска  в блоке1 – 270px, 310px (по горизонтали)  и  130px, 450px (по вертикали).

Нарисуем ее в виде прямоугольника #fff. Впишем текст Найти…

поиск

Ниже находится еще один Блок. В данном случае, там будет список, написанный шрифтом Verdana 18px.

подписка

В блоке справа инструментом Текст вычерчиваем прямоугольник  (нажать на левую кнопку мыши и потянуть) , с учетом отступов, отмеченных направляющими  940px и 1270px по вертикали и 280px по горизонтали. Получится текстовая область, ограниченная пунктирами,  ее удобно использовать для больших текстов .  Помещаем туда список тегов.

теги

Разметим центральный блок, в котором будет находится список свежих записей ( картинка+заголовок+категория). Создадим для этой цели в слоях папку Свежие записи.

С помощью направляющих отмечаем отступы слева, справа, сверху, снизу 20px. Заголовок выполняется шрифтом Arsenal 24px, цвета  #8f0814  и отстоит от категории статьи на 10px, что отмечено линиями. Расстояние между отдельными записями с картинками также по 20px по вертикали. Текст отстоит от левого края на 120px, плюс отступ 10px.

свежие записи

Копируем заранее подготовленные, произвольные  картинки и подгоняем до нужных размеров.

Размечаем среднюю часть страницы – cверху будет отступ 20px для всего контента.

средняя часть

Справа список статей с картинками. Расстояние между картинками 30px,  ширина картинок -100 px, отступ до текста справа 10px. Шрифты такие же как в блоке Свежие записи.

Слева находится статья с  большой картинкой и кратким содержанием, которая будет занимать пространство между направляющими 130 и 880 пикселей. Картинка от 130px до 430px (ширина 300px). Заголовок Arsenal 24px #444. Текст статьи  – Verdana 14px, такого же цвета. От заголовка сделан отступ 10px. Снизу до разделителя такой же отступ 10px.

статья

Внизу страницы, ниже разделителя вставляем большой кусок текста с помощью текстового поля. Я взяла его из рефератов Яндекса, о которых упоминала выше. Параметры шрифта -Verdana, 14px, #444.

большой текст

Добавляем направляющую посередине футера (1560px по горизонтали), вставляем и центрируем  текст с копирайтом по ней.

футер

Вот так выглядит итоговый вариант макета.

itog

На этом все, спасибо за внимание.

 Скачать макет и шрифт Arsenal

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*