Веб-дизайн: аккуратный макет для веб-сайта в Photoshop

Очередной урок, посвященный веб-дизайну. Здесь мы покажем, как создаются макеты для сайтов с использованием системы направляющих 960 Grid System. Вы увидите, как при помощи таких приемов макетирования процесс правильного позиционирования становится четким и прозрачным. К тому же по окончанию данного урока у вас получится стильный, аккуратный скин для вашего сайта.

1 Шаг

Начните с создания нового документа в фотошоп шириной 1680px и высотой 1100px, затем залейте фон слабым серым цветом #F9F9F9.

2 Шаг

В Сети доступно большое количество макетировочных сеток, а также уроков по их созданию. Задачей этого урока будет введение вас в курс дела, если вы никогда не сталкивались с такими сетками ранее. С их помощью процесс макетирования может существенно ускориться и привести к качественным прототипам шаблонов страниц. Скачайте разметку 960 Grid System. Скачав ее по ссылке, распакуйте файл и откройте эту папку. Загрузите сетку “960 12 column grid” в фотошоп.

Теперь нам нужно перенести сетку в наш документ. Выберите группу “12 col Grid”, слейте ее в один слой, а затем перенесите его в главный документ. Сетка по высоте будет немного меньше документа, поэтому вам предстоит ее растянуть по вертикали, чтобы ее концы касались верхнего и нижнего края документа.

Теперь нам нужно еще создать строчную базу. Эта сетка поможет нам правильно расставлять отступы между элементами по вертикали и контролировать интерлиньяж в тексте, между абзацами и логическими блоками. Сначала создайте еще один файл в Photoshop размерами 24×24px, удалите в нем фон и проведите единственную линию в 1px по самой последней линейке рабочей области. Нам необходимо его сохранить, как шаблон (Edit > Define Pattern) и дать ему какое-нибудь выделяющееся имя.

Далее вернитесь в свой документ и создайте новый слой. Залейте его только что созданным шаблоном (Edit > Fill и выберите его).

Осталось разметить рабочую область тремя направляющими. Создайте новую вертикальную направляющую: View > New Guide, выберите пункт Vertical и задайте ей позиционирование на отметке 360px. Точно так же создайте еще две направляющих на отметках 840px и 1320px. Так мы выделили область размерами 960px между отметками 360px и 1320px и провели одну направляющую ровно посередине документа.

Если же вы работаете прямо из файла с 960 Grid System, в нем уже настроены удобные направляющие. Просто откройте View > Show > Guides.

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

3 Шаг

Теперь, когда у нас готов шаблон разметки, можно браться за проектирование структуры сайта. Дизайн страницы будет разделен на 5 блоков: Шапка (Header), Выноска (Callout), Левый блок (Content — Left), Правый блок (Content — Right), Подвал (Footer).

4 Шаг

Первым делом займемся шапкой, так как будем двигаться сверху вниз. Возьмите Rectangular Marquee Tool и выделите им область по всей ширине документа в самом верху высотой 120px (включив видимость своей горизонтальной разметки, высоту в 120px рассчитать более чем легко — это всего 5 строк по 24px каждая). Залейте шапку темно-серым (#2C2C2C). Шапка будет содержать лого сайта и навигационное меню.

5 Шаг

Теперь в верхний левый угол страницы поместите ваш логотип, выровняв его по второй колонке (что есть отступ в 40px). В качестве логотипа я использовал обыкновенную надпись, состоящую из двух частей шрифтом Century Gothic и кеглем в 50pt. Первая часть надписи имеет светло-голубой оттенок (#ADC7D9), вторая — жирное начертание (bold) и белый цвет (#FFFFFF). Далее я добавил к лого внутреннюю тень (стиль Inner Shadow); понизил непрозрачность (Opacity) стиля до 25% и задал такие параметры: Distance — 2px, Choke — 0%, Size — 5px.

6 Шаг

Здесь оформим навигационное меню. Чтобы сохранить чистоту и порядок на странице, мы будем использовать текстовые ссылки в меню. Выберите шрифт Arial размером 18pt и создайте надписи для ссылок. Закрасьте активную кнопку белым цветом (#FFFFFF), а остальные — светло-серым (#BBBBBB). Выровняйте их по вертикали и поместите в средней полосе шапки.

7 Шаг

Этот блок я назвал выноской потому, что все для чего он нужен — донести до пользователя информацию о странице. Повторите тот же процесс, что и с шапкой (выделение инструментом Rectangle Marquee), но на этот раз имейте в виду высоту блока в 240px, залейте выделение тем же светло-голубым (#ADC7D9), что и часть логотипа. Нам нужно добавить легкий градиент этому слою, поэтому выполните двойной щелчок по нему, чтобы вызвать панель стилей слоя и выберите стиль Gradient Overlay. Выберите градиент, переходящий к прозрачному цвету, смените режим наложения стиля на Overlay и понизьте его непрозрачность (Opacity) до 30%.

8 Шаг

Поскольку мы назвали свою компанию “Blue grid” — покажем в фоне выноски едва заметные ячейки. Для этого используем ту же технику, которую применяли для создания горизонтальных линий. Сначала создайте новый документ размером 25px на 25px. После этого удалите его фон, чтобы сделать его прозрачным и закрасьте одну нижнюю линейку пикселей толщиной в 1px, и такую же — по одной из сторон. Сохраните этот файл, как шаблон (Edit > Define Pattern).

9 Шаг

Создайте новый слой поверх слоя с выноской и залейте его только что созданным шаблоном (Edit > Fill).

Поверните этот слой на 15 градусов, задайте ему стиль Color Overlay белого цвета и поместите над панелью выноски.

Задайте слою режим наложения Soft Light. Далее выделите панель выноски либо инструментом Rectangular Marquee Tool, либо нажатием Ctrl + Click по слою с ней. После этого, находясь в режиме Rectangular Marquee Tool, кликаем по выделенной области правой клавишей мыши, выбираем пункт Inverse, затем жмем Delete. Сейчас мы удалили ненужную часть сетки, которая выходит за пределы панели выноски.

Следующим шагом будет создание видимости сетки лишь по ширине рабочей области в 960px. Включите направляющие, если они у вас спрятаны (View > Show > Guides), затем добавьте маску к слою с сеткой.

Перейдите в режим маски нажатием соответствующей кнопки в нижней части палитры Layers, затем выберите инструмент Gradient Tool (G) и определите градиент от прозрачного к черному. С помощью градиента и маски мы уберем части сетки, выходящие за рамки центральной области 960px.

Убедитесь, что выбран линейный стиль градиента. Начните растягивать градиент, немного отступив от края центральной рабочей области выноски в сторону ограничивающих ее направляющих до тех пор, пока не коснетесь непосредственно границы. То же самое повторите с другой стороны.

10 Шаг

Поместим текст на нашу выноску. Возьмите Arial шрифт, кегль 45pt (#2C2C2C) и напишите какой-нибудь слоган, выделяя значимые слова жирным начертанием. Под ним поместите текстовое введение меньшим по размеру кеглем (17pt) и сдвиньте все это в левую часть панели выноски.

11 Шаг

Сейчас будем готовить область для слайдшоу. Выберите инструмент Rectangular Marquee Tool и нанесите выделение между крайней правой и центральной направляющими. По высоте выделенная область должна составить 8 линеек по горизонтали, оставьте по одной пустой линейке сверху и снизу. Залейте этот прямоугольник темным серым цветом (#2C2C2C).

Добавьте тень к вашему фону для слайдшоу: выполните двойной щелчок, чтобы вызвать панель стилей слоя, выберите Drop Shadow, смените цвет на #2C2C2C, задайте Distance 1px и Size 10px.

Далее, в качестве слайда, на фон нужно поместить скриншот какого-нибудь сайта — не важно. Я сделал снимок экрана первого попавшегося блога, изменил его размеры ровно по размерам нашего темно-серого фона, а затем сделал отступы шириной в 10px (Select > Modify > Contract 10px, затем инвертировал выделение и удалил его содержимое нажатием Delete).

12 Шаг

Чтобы начать работать с основным разделом, нужно на фон еще добавить легкий градиент. При помощи Rectangular Marquee Tool выделите всю область, находящуюся под выноской, затем выберите Gradient Tool (G) от цвета #F0F0F0 к прозрачному и протяните градиент по направлению вниз. Не заходите чересчур далеко — фон должен переходить в #F9F9F9 к низу страницы.

13 Шаг

Добавьте вводный абзац в левую часть основного блока. Шрифт — Arial, кегль — 18 pt, цвет >#9C9C9C а цвет ссылки сделайте #A3BBCC и задайте ему подчеркивание.

14 Шаг

Добавим список услуг. Для начала оформите заголовок: Arial, 25pt, Bold, цвет #262626. Список элементов сделайте размером 18pt , шрифтом Arial #9C9C9C. Пункты списка оформите либо с помощью Elliptical Marquee Tool, либо используя альт коды (Alt + 7) с светло-голубым цветом шрифта (#A4BCCD) и выравниванием по сетке.

Добавьте любую необходимую информацию таким же путем.

15 Шаг

Правый блок основного раздела будет выводить последние новости. Сначала добавьте заголовок в том же стиле, что и предыдущий (Arial, 25pt, Bold, цвет #262626) и выровняйте его по секции предоставляемых услуг. Теперь создайте заголовок для одной из новостей шрифтом Arial, 18pt, #A4BDCD, а само содержимое пишите размером 16pt и цветом #9C9C9C. Напишите таким образом 3 новости, а затем поместите под ними ссылку на ленту новостей шрифтом Arial с подчеркиванием, кеглем 16pt и цветом #A4BDCD.

16 Шаг

Нашим последним блоком будет подвал, в котором будет находиться форма для ввода логина и пароля, контакты и несколько ссылок. Выделите нижнюю часть документа c помощью Rectangular Marquee Tool и залейте ее темно-серым (#262626).

Сейчас нам нужно добавить форму для ввода логина и пароля. Сначала шрифтом Arial Bold, 20pt, белого цвета сделайте соответствующую надпись в левой части подвала. Затем с помощью Rectangular Marquee Tool создайте два прямоугольника, которые будут служить полями для ввода. Назовите поля, сделав в них надписи шрифтом Arial 16pt, цвета #9C9C9C.

Повторите то же самое для кнопки отправки, только на этот раз используйте Rounded Rectangle Tool (U). Далее добавьте к этим элементам Inner Shadow, понизьте Opacity этого эффекта до 30%, выставьте Spread равным 0 и Distance — 10px. Добавьте ссылку для восстановления потерянного пароля (Arial, 13pt, подчеркнутый стиль, цвет #A4BDCD).

17 Шаг

Завершим макет добавлением блока контактов в подвале: озаглавьте его шрифтом Arial 20pt, Bold белого цвета (#FFFFFF) и выровняйте по заголовку формы для авторизации. Затем добавьте информацию для контактов простым Arial 16pt также белого цвета.

18 Шаг

Проверьте баланс и выравнивание. С помощью ваших направляющих и разлинейки проверьте: все ли находится на своих местах, все ли сбалансировано. Если нет — поправьте.

19 Шаг

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта www.tutorial9.net, автор перевода указан в начале урока.