Вы находитесь на странице: 1из 15

Лабораторная работа №22

Создание макета Web-сайта в Adobe Photoshop

Цель: Создание макета Web-сайта в Adobe Photoshop.

Теоретические сведения

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


макета сайта в Photoshop.
Это задача создания макета информационного сайта, причем резинового, ширина
которого будет меняться динамически.
Минимальное значение, чтобы при верстке отдельные элементы не наползали друг на
друга, разрушая структуру сайта, и максимальное значение, чтобы сайт не стал чрезмерно
широким. В этом случае текст тоже становится неудобочитаемым из-за слишком длинных
строчек.
Можно предусмотреть, чтобы при дальнейшей верстке сайт был резиновым в
пределах, например, от 1200 до 1400px (чтобы блоки и колонки текста были тянущимися).
Для создания макета необходимо:
 Photoshop – редактор растровой графики, который как правило применяется
при создании макетов.
 Комплекты иконок. В сети можно найти большое количество бесплатных
наборов иконок.
 Несколько небольших картинок для заполнения контента.
 Шрифты. В примере используется один нестандартный шрифт – Arsenal. Он
доступен для скачивания на сайте fontsquirrel с множеством других
кириллических шрифтов.
Создадим новый документ, прозрачный, размером 1400 х 2000 (Нажмите ctrl+N и
заполните поля в открывшемся окошке).

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


Единственный существующий слой переименовываем в Фон (два раза щелкнув по названию
слоя). На панели инструментов выбираем цвет переднего плана фиолетовый, нажимаем
клавиши shift+F5 и заливаем этим цветом фон будущего макета.
Создаем структуру папок, соответствующую частям макета. Упорядоченность
позволит лучше ориентироваться, не путаться в слоях. Нужно создать следующие папки –
шапка, меню, контент, футер. (Нажимаем сочетание 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 и ниже
пишем слоган (еще один сайт). Копируем рисунок логотипа в фотошоп (просто перетащив его
мышью из папки где он находится).
К слоям логотип, название и слоган применяем слой Тень (см. рисунок).

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

P
Прописываем названия пунктов шрифтом 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 по горизонтали), вставляем и
центрируем текст с копирайтом по ней.
Задание:

Создать макет сайта, структура которого была разработана в лабораторной работе


21 в Adobe Photoshop.

Вам также может понравиться