В результате урока мы нарисуем вот такой светлый и позитивный дизайн сайта:
![Создание дизайна сайта в GIMP Создание дизайна сайта в GIMP](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/1e0743.jpg)
Для начала скачаем ZIP архив с необходимыми файлами с Яндекс.Диска.
В архиве вы найдете все необходимые для создания дизайна сайта в GIMP картинки, шрифт Helios, который понадобится нам для заголовков и меню, а также, готовый макет для GIMP в формате XCF (файл source.xcf), который был нарисован мной.
Фон сайта (Background)
1. Откроем файл 960_grid_12_col.xcf, разлинованный в системе сеток 960gs. Создадим новый слой во всю площадь макета и зальем его цветом #F9F7E7. Создадим еще один слой и нарисуем на нем прямоугольное выделение во всю ширину документа и высотой 800 пикселей. Зальем выделение градиентом цветами от #c0e1df (верхняя граница градиента) до #F9F7E7 (нижняя граница):
![Фон сайта (Background) Фон сайта (Background)](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/658583.png)
2. Применим к градиентному фону шум (Фильтры > Шум > Шум RGB) со следующими параметрами:
![Фильтры - Шум Фильтры - Шум](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/972f8a.png)
3. Теперь вставим в документ кляксу (файл klyaksa.jpg), инструментом "Выделение смежных областей" (волшебная палочка) выделим белый фон и удалим его. Поместим кляксу в верхнюю правую часть макета и применим параметры цвета (Цвет > Тон-Насыщенность):
![Выделение смежных областей Выделение смежных областей](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/e1fa75.png)
Сделаем кляксу непрозрачной (15% непрозрачности). Фон сайта готов, приступим к шапке.
Шапка сайта
4. Вставим в макет логотип (файл logo.jpg), волшебной палочкой удалим белый фон и поместим его в первые 3 колонки системы сеток в верхней части документа:
![Вставим в макет логотип Вставим в макет логотип](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/22d92c.png)
Повысим резкость логотипа на 30 (Фильтры > Улучшение > Повысить резкость).
![Повысим резкость логотипа Повысим резкость логотипа](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/043079.png)
Установите в систему шрифт из архива (Helios.otf). Перезапустите GIMP, предварительно сохранив текущий результат.
5. Нарисуем поиск. Справа, напротив логотипа нарисуйте на новом слое прямоугольное выделение шириной в 3 с половиной колонки со скругленными углами (радиус закругления 20), высотой 32 пиксела. Залейте вы деление цветом #FFFFFF. Затем, не снимая выделение, уменьшите его на 1 пиксел (Выделение > Уменьшить) и залейте снова цветом #F3F3F3.
![Нарисуем поиск Нарисуем поиск](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/2acca4.png)
6. Кнопка поиска "OK". Создайте новый слой и нарисуйте на нем круглое выделение, размером как на картинке. Залейте его цветом #72685d, уменьшите на 1 пиксел, залейте еще раз цветом #FFFFFF, затем еще раз уменьшите на 1 пиксел и снова залейте #72685d. Напишите на кнопке нашим шрифтом "Helios" слово "OK" (Размер текста 20 пикселей, буквы в верхнем регистре). В результате получится такая кнопочка:
![Создайте новый слой и нарисуйте на нем круглое выделение Создайте новый слой и нарисуйте на нем круглое выделение](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/2c6275.png)
7. Напишите пункты меню. Шрифт Helios, размер 20 пикселов, цвет #72685d. Отбейте пункты друг от друга 6-ю пробелами, напечатав между ними вертикальный слеш:
![пункты меню пункты меню](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/b08bd9.png)
Второе слово в меню сделайте подчеркнутым, для того, чтобы показать выделение пункта при наведении мышкой.
Баннер сайта
8. Сделайте выделение со скругленными углами (радиус закругления 5 пикселов) по ширине сетки, высотой 400 пикселов. Создайте новый слой и залейте его цветом #8BA9AB, уменьшите выделение на 1 пиксел и залейте остальную часть белым цветом (#FFFFFF). Сделайте непрозрачность прямоугольника 35%.
![Баннер сайта Баннер сайта](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/336aeb.png)
9. Вставьте картинку bbb-splash.jpg и уменьшите ее таким образом, чтобы она оказалась в центра данного прямоугольника. Сверху и снизу можно удалить лишнее прямоугольным выделением:
![Вставьте картинку Вставьте картинку](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/b084b8.png)
10. Тень под баннером. Нарисуем на новом слое круглое выделение, высотой 40 пикселов, шириной в 10 колонок сетки, посередине. Зальем его черным цветом:
![Тень под баннером Тень под баннером](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/9b9af6.png)
Снимем выделение и размоем слой фильтром "Гауссово размывание", радиусом 30:
![Гауссово размывание Гауссово размывание](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/2b14f7.png)
Удалим лишнее (чтобы тень не наезжала на баннер) и сделаем непрозрачность слоя с тенью 30%.
![сделаем непрозрачность слоя сделаем непрозрачность слоя](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/bc5fb3.png)
С баннером покончено.
Основные разделы сайта
11. Напишем заголовок разделов под баннером. Шрифт Helios, размер 35 пикселов, цвет шрифта #72685d. Написание в верхнем регистре (с зажатой Shift).
![заголовок разделов заголовок разделов](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/25c23d.png)
12. Создадим новую группу слоев и создадим в ней новый слой, на котором нарисуем выделение с закругленными углами (радиус закругления 5), шириной в 4 колонки сетки, высотой 140 пикселей. По примеру баннера, что рисовали выше, зальем выделение цветом #8BA9AB, уменьшите выделение на 1 пиксел и зальем остальную часть белым цветом (#FFFFFF). Сделаем непрозрачность слоя 35%. Точно также как для баннера, под новым прямоугольником сделаем тень круглым выделением в той-же группе слоев и размоем ее гауссовым размыванием (радиус размывания 15/15):
![Создадим новую группу слоев Создадим новую группу слоев](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/e0b5b2.png)
Вставим картинку (bunny.jpg) и подгоним под размер прямоугольника, как показано на картинке. Лишнее обрежем.
13. Ниже напишем заголовок пункта:
![заголовок пункта заголовок пункта](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/33fb0e.png)
Подзаголовок "О КРОЛИКЕ" будет выглядеть следующим образом:
![Подзаголовок Подзаголовок](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/71dc91.png)
14. Под текстом, на новом слое сделаем выделение высотой 3 пиксела, шириной в 4 колонки и зальем цветом #72685d. Закругление можно убрать.
Далее напишем текст раздела:
![текст раздела текст раздела](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/b17490.png)
15. Напишем "ПОДРОБНЕЕ" ниже текста раздела. Размер шрифта 20, цвет #fe7e01, написание в верхнем регистре. Рядом создадим круглое выделение на новом слое, радиусом 28 пикселов. Зальем его цветом #C4C4C2. Не снимая выделения, уменьшим его на 1 пиксель и снова зальем цветом #F9F7E7 (вспоминаем кнопку поиска). После всех потуг с уменьшением, уменьшим выделение еще на 1 пиксель и, наконец, зальем оставшуюся часть выделения градиентом цветами от #FE7E01 (нижний цвет градиента) до #FFA955 (верхний цвет градиента).
![зальем оставшуюся часть выделения градиентом зальем оставшуюся часть выделения градиентом](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/652323.png)
16. Вставим в макет стрелку (изображение arrow-right.png), выделим волшебной палочкой контур стрелки и зальем белым цветом. После чего, уменьшим стрелку и поместим в наш кружок:
![Вставим в макет стрелку Вставим в макет стрелку](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/40c990.png)
Сделаем непрозрачность слоя со стрелкой 80%.
17. Помните, мы создавали группу для элементов разделов? Это не просто так. Теперь выберите эту группу на панели слоев и создайте ее копию. Переместите (с зажатой Shift) копию в следующую четверку колонок. Потом еще раз:
![выберите эту группу на панели слоев и создайте ее копию выберите эту группу на панели слоев и создайте ее копию](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/fe544c.png)
Замените у всех элементов текст и картинки, согласно изображению. Дополнительные картинки находятся в архиве.
![Замените у всех элементов текст и картинки Замените у всех элементов текст и картинки](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/6c78b3.png)
18. Прежде, чем приступить к подвалу (футеру) сайта, доработаем верхний баннер. Сделайте круглое выделение, радиусом 150 пикселей, залейте его белым цветом, затем уменьшите выделение на 10 пикселов и удалите содержимое. После этого уменьшите выделение еще на 10 пикселов и снова залейте белым цветом. Поместите получившееся изображение в центр баннера.
![доработаем верхний баннер доработаем верхний баннер](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/fc86b7.png)
Снова откройте стрелку (файл arrow-right.png) и выделением отрежте хвостик. Поместите ее в центр кружка.
![Поместите ее в центр кружка Поместите ее в центр кружка](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/655b6f.png)
Установите непрозрачность стрелки и кружка 35%.
Подвал (футер) сайта
19. Нарисуйте прямоугольное выделение во всю ширину макета, высотой от самого низа до разделов, залейте выделение на новом слое цветом #515046 и примените фильт "Шум RGB".
![Подвал (футер) сайта Подвал (футер) сайта](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/f0610e.png)
20. Напишите заголовки в подвале, с разбиением по 3 колонки. Можно провести горизонтальную направляющую, чтобы заголовки были на одном уровне.
![Напишите заголовки в подвале Напишите заголовки в подвале](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/f19a23.png)
Ниже напишем пункты с нижним подчеркиванием. Шрифт Arial, размер 14 пикселей, цвет #b7b2ac.
![напишем пункты напишем пункты](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/97843f.png)
21. Создадим группу слоев и поместим в нее заголовок и пункты. Продублируем также, как группу с элементами выше и напишем уникальный текст для каждого раздела подвала, как на макете в начале урока (ФАЙЛЫ, АРХИВЫ, КАТЕГОРИИ, ПОСЛЕДНИЕ ЗАПИСИ).
22. Снова вставим кляксу, поместим ее в правую часть футера и установим следующие параметры цвета (Цвет > Тон-Насыщенность):
![Тон-Насыщенность Тон-Насыщенность](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/027bb2.png)
23. В середине 3-й колонки сделаем вертикальное выделение шириной в 1 пиксель, высотой 260 пикселей. Зальем его цветом #423E39. Рядом, на этом же слое создадим таке же выделение и зальем его на этот раз цветом #66675E.
![вертикальное выделение вертикальное выделение](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/ff5bd7.png)
Сотрем края получившейся разделительной линии вверху и внизу мягкой резинкой достаточно большого диаметра.
![Сотрем края Сотрем края](http://webdesign-master.ru/img/blog/web-design/2015-06-15-gimp-1-2013/f19e09.png)
Последним действием продублируем данную линию 2 раза и расположим между остальными категориями подвала, согласно сетке.
Источник: http://webdesign-master.ru/blog/web-design/527.html