Як зробити банер для сайту

В одному з уроків я вже демонстрував процес створення анімаційного банера і говорив, що у банерів є ряд стандартних розмірів, яких потрібно дотримуватися.

Крок 2. Далі нам потрібно підібрати колірну гамму для банера. Це краще зробити по колірному кругу або підглянути вже існуючі банери, які можна зустріти мережі.

Знайшли підходящий по колірній гамі банер? Тоді робимо скріншот екрану і завантажуємо його теж в GIMP. До речі, скріншоти я роблю за допомогою програми Lightshot. про яку запишу найближчим часом невеликий урок. НЕ пропустіть.

Після цього, за допомогою інструменту «Піпетка», ми можемо взяти зразки кольору і використовувати їх для новостворюваного банера.

Крок 3. Припустимо, що з колірною гамою ми визначилися. Тепер нам потрібно підібрати фон для банера. Для цього переходимо на сайт subtlepatterns.com. Підбираємо з представлених зразків бажаний фон і викачуємо його на свій комп'ютер.

Крок 4. Тепер нам потрібно перенести текстуру на раніше створений документ. Для цього виділяємо відкриту текстуру через меню «Виділення - Виділити все» або натиснувши Ctrl + A. Далі копіюємо, натиснувши Ctrl + C і переходимо на вкладку з раніше відкритим проектом. Після цього перемикається на вкладку «Текстура»

І тепер самий ВАЖЛИВИЙ момент. Кількома в списку текстур по найпершому квадратику і затиснувши ліву кнопку миші переносимо її на робочу область.

Має вийти так

Крок 5. Тепер, за допомогою інструменту «Текст» створюємо текстовий напис. Вибираємо шрифт - Pollock. встановлюємо розмір - 22px і колір - c31900. Далі затискаємо кнопку «Alt» і перетягуємо текст ближче до лівої сторони. Шрифт можете завантажити тут. Як встановлювати шрифти в GIMP дивіться в цьому уроці.

Крок 6. Тепер, коли текст створений, давайте додамо до нього білу обведення. Для цього натискаємо по шару з текстом правою кнопкою миші і вибираємо пункт «Альфа канал в виділення». Після цього йдемо в головне меню і тиснемо пункт «Виділення - Збільшити». Задаємо настройку 1px.

Зробили? Тоді натискаємо на іконку створення нового шару і далі виконуємо команду «Правка-Залити кольором фону». Вийде така картина, якщо звичайно колір фону у вас був білий. Поетом перевірте це заздалегідь.

Що тепер? Опустимо отриманий шар в стосі шарів нижче нашого раніше створеного текстового шару. Для цього кликнемо на піктограму «Опустити шар» і відключаємо виділення через меню «Виділення - Зняти». У результаті повинно вийти так:

Крок 7. На наступному кроці ми намалюємо невелику кнопку. Під неї створюємо новий шар, далі вибираємо інструмент «Прямокутне виділення» (в настройках вказавши закруглення кутів) і малюємо область приблизно таких розмірів.

Далі, зафарбовує створене виділення червоним кольором (c31900), тим самим кольором, яким ми писали текст раніше.

Крок 7. Залишилося додати текст «заклик до дії» на кнопку. Для цього вибираємо інструмент «Текст» (шрифт -Pollock, розмір -22. Колір - білий).

От і все. Залишилося зберегти отриманий банер. Для цього йдемо в меню «Фаил - Експорт» і в списку «Виберіть тип файлу» вибираємо формат JPG або PNG.

Ось такий у нас має вийти в результаті банер.

Дякую за увагу і до нових зустрічей на GimpArt.Org

З повагою, Антон Лапшин.

Будь ласка, оцініть цю статтю, натиснувши на зірочки нижче: