В результаті уроку ми намалюємо ось такий світлий і позитивний дизайн сайту:
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-35c6a7fd.jpg)
Для початку скачайте ZIP архів з необхідними файлами з Яндекс.Діск.
В архіві ви знайдете всі необхідні для створення дизайну сайту в GIMP картинки, шрифт Helios, який знадобиться нам для заголовків і меню, а також, готовий макет для GIMP в форматі XCF (файл source.xcf), який був намальований мною.
Фон сайту (Background)
1. Відкриємо файл 960_grid_12_col.xcf, розлініяний в системі сіток 960gs. Створимо новий шар на всю площу макета і заллємо його кольором # F9F7E7. Створимо ще один шар і намалюємо на ньому прямокутне виділення на всю ширину документа і висотою 800 пікселів. Заллємо виділення градієнтом квітами від # c0e1df (верхня межа градієнта) до # F9F7E7 (нижня межа):
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-277af4d5.png)
2. Застосуємо до градиентному фону шум (Фільтри> Шум> Шум RGB) з наступними параметрами:
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-8ed64903.png)
3. Тепер вставимо в документ пляму (файл klyaksa.jpg), інструментом "Виділення суміжних областей" (чарівна паличка) виділимо білий фон і видалимо його. Помістимо пляму в верхню праву частину макета і застосуємо параметри кольору (Колір> Тон-Насиченість):
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-3cc1667d.png)
Зробимо пляму непрозорою (15% непрозорості). Фон сайту готовий, приступимо до шапки.
Шапка сайту
4. Вставимо в макет логотип (файл logo.jpg), чарівною паличкою видалимо білий фон і помістимо його в перші 3 колонки системи сіток у верхній частині документа:
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-a8f61ef5.png)
Підвищимо різкість логотипу на 30 (Фільтри> Поліпшення> Підвищити різкість).
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-7b1abed4.png)
Встановіть в систему шрифт з архіву (Helios.otf). Перезапустіть GIMP, попередньо зберігши поточний результат.
5. Намалюємо пошук. Справа, навпаки логотипу намалюйте на новому шарі прямокутне виділення шириною в 3 з половиною колонки з округленими кутами (радіус заокруглення 20), висотою 32 пікселя. Залийте ви поділ кольором #FFFFFF. Потім, не знімаючи виділення, зменшіть його на 1 піксель (Виділення> Зменшити) і залийте знову кольором # F3F3F3.
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-de2ef86b.png)
6. Кнопка пошуку "OK". Створіть новий шар і намалюйте на ньому кругле виділення, розміром як на картинці. Залийте його кольором # 72685d, зменшіть на 1 піксель, залийте ще раз кольором #FFFFFF, потім ще раз зменшите на 1 піксель і знову залийте # 72685d. Напишіть на кнопці нашим шрифтом "Helios" слово "OK" (Розмір тексту 20 пікселів, літери у верхньому регістрі). В результаті вийде така кнопочка:
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-364f9715.png)
7. Напишіть пункти меню. Шрифт Helios, розмір 20 пікселів, колір # 72685d. Відбийте пункти один від одного 6-ю пробілами, надрукувавши між ними вертикальний слеш:
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-b82eab87.png)
Друге слово в меню зробіть підкресленим, для того, щоб показати виділення пункту при наведенні мишкою.
банер сайту
8. Зробіть виділення з округленими кутами (радіус заокруглення 5 пікселів) по ширині сітки, висотою 400 пікселів. Створіть новий шар і залийте його кольором # 8BA9AB, зменшіть виділення на 1 піксель і залийте решту білим кольором (#FFFFFF). Зробіть непрозорість прямокутника 35%.
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-3e577fbe.png)
9. Вставте картинку bbb-splash.jpg і зменшите її таким чином, щоб вона виявилася в центру даного прямокутника. Зверху і знизу можна видалити зайве прямокутним виділенням:
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-856b770f.png)
10. Тінь під банером. Намалюємо на новому шарі кругле виділення, висотою 40 пікселів, шириною в 10 колонок сітки, посередині. Заллємо його чорним кольором:
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-e05036ed.png)
Знімемо виділення і розмиємо шар фільтром "Гаусове розмивання", радіусом 30:
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-4e756acf.png)
Видалимо зайве (щоб тінь не наїжджала на банер) і зробимо непрозорість шару з тінню 30%.
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-fe76b32b.png)
З банером покінчено.
11. Напишемо заголовок розділів під банером. Шрифт Helios, розмір 35 пікселів, колір шрифту # 72685d. Написання в верхньому регістрі (з затиснутою Shift).
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-3d5b7318.png)
12. Створимо нову групу шарів і створимо в ній новий шар, на якому намалюємо виділення із закругленими кутами (радіус заокруглення 5), шириною в 4 колонки сітки, висотою 140 пікселів. За прикладом банера, що малювали вище, заллємо виділення кольором # 8BA9AB, зменшіть виділення на 1 піксель і заллємо іншу частину білим кольором (#FFFFFF). Зробимо непрозорість шару 35%. Точно також як для банера, під новим прямокутником зробимо тінь круглим виділенням в той-же групі шарів і розмиємо її гаусовим розмиванням (радіус розмивання 15/15):
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-2048d25e.png)
Вставимо картинку (bunny.jpg) і підгонимо під розмір прямокутника, як показано на зображенні. Зайве обрізаємо.
13. Нижче напишемо заголовок пункту:
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-2d9ea720.png)
Підзаголовок "Про кроликів" буде виглядати наступним чином:
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-861461d7.png)
14. Під текстом, на новому шарі зробимо виділення висотою 3 пікселя, шириною в 4 колонки і заллємо кольором # 72685d. Закруглення можна прибрати.
Далі напишемо текст розділу:
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-880b23b8.png)
15. Напишемо "ДЕТАЛЬНІШЕ" нижче тексту розділу. Розмір шрифту 20, колір # fe7e01, написання у верхньому регістрі. Поруч створимо кругле виділення на новому шарі, радіусом 28 пікселів. Заллємо його кольором # C4C4C2. Не знімаючи виділення, зменшимо його на 1 піксель і знову заллємо кольором # F9F7E7 (згадуємо кнопку пошуку). Після всіх потуг зі зменшенням, зменшимо виділення ще на 1 піксель і, нарешті, заллємо решту виділення градієнтом квітами від # FE7E01 (нижній колір градієнта) до # FFA955 (верхній колір градієнта).
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-069483b1.png)
16. Вставимо в макет стрілку (зображення arrow-right.png), виділимо чарівною паличкою контур стрілки і заллємо білим кольором. Після чого, зменшимо стрілку і помістимо в наш гурток:
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-ee60f2a1.png)
Зробимо непрозорість шару зі стрілкою 80%.
17. Пам'ятайте, ми створювали групу для елементів розділів? Це не просто так. Тепер виберіть цю групу на панелі шарів і створіть її копію. Перемістіть (з затиснутою Shift) копію в наступну четвірку колонок. Потім ще раз:
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-4c7418aa.png)
Замініть у всіх елементів текст і картинки, згідно зображенню. Додаткові картинки знаходяться в архіві.
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-1ce32048.png)
18. Перш, ніж приступити до підвалу (футер) сайту, доопрацюємо верхній банер. Зробіть кругле виділення, радіусом 150 пікселів, залийте його білим кольором, потім зменшите виділення на 10 пікселів і видаліть вміст. Після цього зменшіть виділення ще на 10 пікселів і знову залийте білим кольором. Помістіть зображення, що вийшло в центр банера.
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-f61bcae4.png)
Знову відкрийте стрілку (файл arrow-right.png) і виділенням відріжте хвостик. Помістіть її в центр гуртка.
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-da9b0068.png)
Встановіть непрозорість стрілки і гуртка 35%.
Земельна ділянка (футер) сайту
19. Намалюйте прямокутне виділення на всю ширину макету, висотою від самого низу до розділів, залийте виділення на новому шарі кольором # 515046 і застосуєте фильт "Шум RGB".
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-193609e7.png)
20. Напишіть заголовки в підвалі, з розбивкою по 3 колонки. Можна провести горизонтальну напрямну, щоб заголовки були на одному рівні.
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-dac97420.png)
Нижче напишемо пункти з нижнім підкресленням. Шрифт Arial, розмір 14 пікселів, колір # b7b2ac.
![Створення дизайну сайту в gimp (архів 2013) (дизайну) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-a56540b9.png)
22. Знову вставимо пляму, помістимо її в праву частину футера і встановимо наступні параметри кольору (Колір> Тон-Насиченість):
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-fe787ad6.png)
23. У середині 3-й колонки зробимо вертикальне виділення шириною в 1 піксель, висотою 260 пікселів. Заллємо його кольором # 423E39. Поруч, на цьому ж шарі створимо таке ж виділення і заллємо його на цей раз кольором # 66675E.
![Створення дизайну сайту в gimp (архів 2013) (сайту) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-216c49d5.png)
Зітремо краю вийшла розділової лінії вгорі і внизу м'якою гумкою досить великого діаметру.
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-0e16f776.png)
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-bad7b9cd.png)
На цьому у мене все, сподіваюся мій урок був корисний для вас :-)
Преміум уроки від WebDesign Master:
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-a0e2922f.jpg)
Перший професійний курс по створенню інтернет-магазину на CMS OpenCart
![Створення дизайну сайту в gimp (архів 2013) (gimp) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-8130a010.jpg)
Як стати успішним фрілансером і заробляти гроші на своїх знаннях
![Створення дизайну сайту в gimp (архів 2013) (архів) Створення дизайну сайту в gimp (архів 2013)](https://images-on-off.com/images/142/sozdaniedizaynasaytavgimparxiv2013-8400ab8b.jpg)