В результате урока мы нарисуем вот такой светлый и позитивный дизайн сайта:
Для начала скачаем ZIP архив с необходимыми файлами с Яндекс.Диска.
В архиве вы найдете все необходимые для создания дизайна сайта в GIMP картинки, шрифт Helios, который понадобится нам для заголовков и меню, а также, готовый макет для GIMP в формате XCF (файл source.xcf), который был нарисован мной.
Фон сайта (Background)
1. Откроем файл 960_grid_12_col.xcf, разлинованный в системе сеток 960gs. Создадим новый слой во всю площадь макета и зальем его цветом #F9F7E7. Создадим еще один слой и нарисуем на нем прямоугольное выделение во всю ширину документа и высотой 800 пикселей. Зальем выделение градиентом цветами от #c0e1df (верхняя граница градиента) до #F9F7E7 (нижняя граница):
2. Применим к градиентному фону шум (Фильтры > Шум > Шум RGB) со следующими параметрами:
3. Теперь вставим в документ кляксу (файл klyaksa.jpg), инструментом "Выделение смежных областей" (волшебная палочка) выделим белый фон и удалим его. Поместим кляксу в верхнюю правую часть макета и применим параметры цвета (Цвет > Тон-Насыщенность):
Сделаем кляксу непрозрачной (15% непрозрачности). Фон сайта готов, приступим к шапке.
Шапка сайта
4. Вставим в макет логотип (файл logo.jpg), волшебной палочкой удалим белый фон и поместим его в первые 3 колонки системы сеток в верхней части документа:
Повысим резкость логотипа на 30 (Фильтры > Улучшение > Повысить резкость).
Установите в систему шрифт из архива (Helios.otf). Перезапустите GIMP, предварительно сохранив текущий результат.
5. Нарисуем поиск. Справа, напротив логотипа нарисуйте на новом слое прямоугольное выделение шириной в 3 с половиной колонки со скругленными углами (радиус закругления 20), высотой 32 пиксела. Залейте вы деление цветом #FFFFFF. Затем, не снимая выделение, уменьшите его на 1 пиксел (Выделение > Уменьшить) и залейте снова цветом #F3F3F3.
6. Кнопка поиска "OK". Создайте новый слой и нарисуйте на нем круглое выделение, размером как на картинке. Залейте его цветом #72685d, уменьшите на 1 пиксел, залейте еще раз цветом #FFFFFF, затем еще раз уменьшите на 1 пиксел и снова залейте #72685d. Напишите на кнопке нашим шрифтом "Helios" слово "OK" (Размер текста 20 пикселей, буквы в верхнем регистре). В результате получится такая кнопочка:
7. Напишите пункты меню. Шрифт Helios, размер 20 пикселов, цвет #72685d. Отбейте пункты друг от друга 6-ю пробелами, напечатав между ними вертикальный слеш:
Второе слово в меню сделайте подчеркнутым, для того, чтобы показать выделение пункта при наведении мышкой.
Баннер сайта
8. Сделайте выделение со скругленными углами (радиус закругления 5 пикселов) по ширине сетки, высотой 400 пикселов. Создайте новый слой и залейте его цветом #8BA9AB, уменьшите выделение на 1 пиксел и залейте остальную часть белым цветом (#FFFFFF). Сделайте непрозрачность прямоугольника 35%.
9. Вставьте картинку bbb-splash.jpg и уменьшите ее таким образом, чтобы она оказалась в центра данного прямоугольника. Сверху и снизу можно удалить лишнее прямоугольным выделением:
10. Тень под баннером. Нарисуем на новом слое круглое выделение, высотой 40 пикселов, шириной в 10 колонок сетки, посередине. Зальем его черным цветом:
Снимем выделение и размоем слой фильтром "Гауссово размывание", радиусом 30:
Удалим лишнее (чтобы тень не наезжала на баннер) и сделаем непрозрачность слоя с тенью 30%.
С баннером покончено.
Основные разделы сайта
11. Напишем заголовок разделов под баннером. Шрифт Helios, размер 35 пикселов, цвет шрифта #72685d. Написание в верхнем регистре (с зажатой Shift).
12. Создадим новую группу слоев и создадим в ней новый слой, на котором нарисуем выделение с закругленными углами (радиус закругления 5), шириной в 4 колонки сетки, высотой 140 пикселей. По примеру баннера, что рисовали выше, зальем выделение цветом #8BA9AB, уменьшите выделение на 1 пиксел и зальем остальную часть белым цветом (#FFFFFF). Сделаем непрозрачность слоя 35%. Точно также как для баннера, под новым прямоугольником сделаем тень круглым выделением в той-же группе слоев и размоем ее гауссовым размыванием (радиус размывания 15/15):
Вставим картинку (bunny.jpg) и подгоним под размер прямоугольника, как показано на картинке. Лишнее обрежем.
13. Ниже напишем заголовок пункта:
Подзаголовок "О КРОЛИКЕ" будет выглядеть следующим образом:
14. Под текстом, на новом слое сделаем выделение высотой 3 пиксела, шириной в 4 колонки и зальем цветом #72685d. Закругление можно убрать.
Далее напишем текст раздела:
15. Напишем "ПОДРОБНЕЕ" ниже текста раздела. Размер шрифта 20, цвет #fe7e01, написание в верхнем регистре. Рядом создадим круглое выделение на новом слое, радиусом 28 пикселов. Зальем его цветом #C4C4C2. Не снимая выделения, уменьшим его на 1 пиксель и снова зальем цветом #F9F7E7 (вспоминаем кнопку поиска). После всех потуг с уменьшением, уменьшим выделение еще на 1 пиксель и, наконец, зальем оставшуюся часть выделения градиентом цветами от #FE7E01 (нижний цвет градиента) до #FFA955 (верхний цвет градиента).
16. Вставим в макет стрелку (изображение arrow-right.png), выделим волшебной палочкой контур стрелки и зальем белым цветом. После чего, уменьшим стрелку и поместим в наш кружок:
Сделаем непрозрачность слоя со стрелкой 80%.
17. Помните, мы создавали группу для элементов разделов? Это не просто так. Теперь выберите эту группу на панели слоев и создайте ее копию. Переместите (с зажатой Shift) копию в следующую четверку колонок. Потом еще раз:
Замените у всех элементов текст и картинки, согласно изображению. Дополнительные картинки находятся в архиве.
18. Прежде, чем приступить к подвалу (футеру) сайта, доработаем верхний баннер. Сделайте круглое выделение, радиусом 150 пикселей, залейте его белым цветом, затем уменьшите выделение на 10 пикселов и удалите содержимое. После этого уменьшите выделение еще на 10 пикселов и снова залейте белым цветом. Поместите получившееся изображение в центр баннера.
Снова откройте стрелку (файл arrow-right.png) и выделением отрежте хвостик. Поместите ее в центр кружка.
Установите непрозрачность стрелки и кружка 35%.
Подвал (футер) сайта
19. Нарисуйте прямоугольное выделение во всю ширину макета, высотой от самого низа до разделов, залейте выделение на новом слое цветом #515046 и примените фильт "Шум RGB".
20. Напишите заголовки в подвале, с разбиением по 3 колонки. Можно провести горизонтальную направляющую, чтобы заголовки были на одном уровне.
Ниже напишем пункты с нижним подчеркиванием. Шрифт Arial, размер 14 пикселей, цвет #b7b2ac.
21. Создадим группу слоев и поместим в нее заголовок и пункты. Продублируем также, как группу с элементами выше и напишем уникальный текст для каждого раздела подвала, как на макете в начале урока (ФАЙЛЫ, АРХИВЫ, КАТЕГОРИИ, ПОСЛЕДНИЕ ЗАПИСИ).
22. Снова вставим кляксу, поместим ее в правую часть футера и установим следующие параметры цвета (Цвет > Тон-Насыщенность):
23. В середине 3-й колонки сделаем вертикальное выделение шириной в 1 пиксель, высотой 260 пикселей. Зальем его цветом #423E39. Рядом, на этом же слое создадим таке же выделение и зальем его на этот раз цветом #66675E.
Сотрем края получившейся разделительной линии вверху и внизу мягкой резинкой достаточно большого диаметра.
Последним действием продублируем данную линию 2 раза и расположим между остальными категориями подвала, согласно сетке.
Источник: http://webdesign-master.ru/blog/web-design/527.html
