Вичерпний посібник: створюйте, нарізайте та кодуйте свій макет за допомогою Gimp. Ось що ви дізнаєтеся в цьому посібнику…
Натисніть, щоб збільшити
1) Зображення можуть виглядати темнішими, оскільки вони були налаштовані за допомогою іншого монітора. Налаштуйте яскравість відповідно до свого екрана.
2) Потрібне базове знайомство з GIMP, оскільки не кожен крок є візуально деталізованим.
3) Якість зображення може відрізнятися через стиснення jpg для економії місця.
4) Вибачте за затримку оновлень через стан здоров’я.
Кроки підручника:
1) Концептуалізація вашого дизайну
2) Складання проекту
3) Створення елементів навігації
4) Виготовлення коробок вмісту
5) Нарізка макета для Інтернету
6) Інтеграція з HTML
7) Стилізація за допомогою CSS
Перед початком роботи обдумайте мету та тематику свого сайту. Виберіть назву, яку легко запам’ятати, яка відображає вміст вашого сайту. Визначтеся з колірною гамою і стилем оформлення. У цьому підручнику ми відтворимо домашню сторінку GimpTalk за допомогою темних контрастних кольорів.
Натисніть, щоб збільшити
Почніть із полотна 900 × 600 і встановіть колір тла вашого шаблону.
Використовуйте інструмент «Прямокутне виділення». 
щоб створити місце для вашого банера.
Банер повинен доповнювати стиль і колірну гамму вашого сайту. Прагніть до розміру приблизно 900×160.
Натисніть, щоб збільшити
Далі створіть новий шар для кнопок навігації під банером.
Натисніть, щоб збільшити
Застосуйте градієнт за допомогою інструмента «Градієнт». 
з вибраними кольорами.
Натисніть, щоб збільшити
Додайте глибини своїм кнопкам, обводячи виділення. Використовуйте опцію «Вибір обведення» в меню редагування для суцільної лінії 1 пікс.
Натисніть, щоб збільшити
…За потреби змініть режим шару для найкращого ефекту.
Тепер давайте створимо блоки вмісту:
– Скопіюйте шар кнопки та відрегулюйте його висоту. Цей новий шар буде називатися «шаром масштабованої кнопки».
– Поверніть цей шар на 180 градусів для поля вмісту.
Натисніть, щоб збільшити
– Визначте розмір для верхньої частини блоків вмісту за допомогою цього шару.
Коли у вас є макет, почніть додавати текст:
– Використовуйте піксельний шрифт для чіткої читабельності.
– Створіть однопіксельні лінії для розділення вашого дизайну.
– Не забудьте включити інформацію про авторські права внизу.
Розгляньте можливість додавання інтерактивних елементів, таких як підсвічування кнопок, за допомогою Javascript для динамічного взаємодії з користувачем.
Натисніть, щоб збільшити
Далі розріжте свій макет для веб-реалізації:
– Копіюйте та відокремлюйте різні частини вашого дизайну.
– Зберігайте зображення у форматі .png для кращої якості кольору та підтримки прозорості.
Натисніть, щоб збільшити
Нарешті, закодуйте свій веб-сайт:
– Почніть із документа HTML, структурованого у вигляді таблиць.
– Ретельно розміщуйте зображення, забезпечуючи правильне вирівнювання та розміри.
– Додайте будь-які необхідні стилі за допомогою CSS для відшліфованого вигляду.
Не забудьте визначити заголовок вашого документа HTML для відображення в браузері.
Дякуємо, що стежите за цим посібником. Не соромтеся ділитися своїми результатами та ставити будь-які запитання. Щасливого проектування!
