Бесплатный
графический редактор


Случайный урок:

Светящийся текст

Сайт Родителям о детях








Система Orphus



Баннер для партнерки

Автор: Викулова Юлия

Добавлено: 2009-09-19


Итак, перед нами стоит следующая задача: создать баннер для партнерки.

Сделаем небольшое теоретическое отступление для новичков и просто любопытных. Партнерка это партнерская программа, дающая возможность зарабатывать денежку в инете. Более подробную информацию о партнерских программах вы сможете найти на просторах паутины. А так как задача у нас в данный момент иная, то продолжим наш урок.

Основная идея, которую должен донести баннер - заработать на своем сайте действительно легко.

Для графического отображения идеи нам потребуются изображения весов, перышка и собственно сам логотип партнерки. Покопавшись на просторах сети я нашла вот такие весы:
 

 


Исходный файл картинки с весами.

С перышком пришлось покопаться. В итоге я нашла клипарты перьев.

И еще немного теории: Клип-арт (от англ. ClipArt) — набор графических элементов дизайна для составления целостного графического дизайна. Клип-артом могут быть как отдельные объекты, так и изображения (фотографии) целиком. С помощью клип-артов можно создавать обои для рабочего стола, сайты. Их так же используют при оформлении рекламных афиш и т. п.

В общем из найденного набора клипартов я выудила вот такое перышко smile
 

Ну а сам логотип я стащила с другого баннера той самой партнерки, к которой мы будем делать новый баннер. Надеюсь они мне это простят, ибо рекламировать мы будем их же. Собственно сам логотип:
 

Ну вот, все необходимое у нас есть, начинаем колдовать.

Наша задача показать, что партнерка это легко. Для этого нам и нужны весы. То есть будем создавать картинку, на которой перышко будет перевешивать логотип партнерки.

1. Начнем пожалуй с перышка.

Открываем картинку с пером: Файл -> Открыть... Нам нужно его (перышко) немного видоизменить, для того, чтобы оно красиво легло на чашу весов. Для начала перевернем его с помощью инструмента Зеркальное отображение . Переворачивать будем по горизонтали и по вертикали (выбирается в настройках инструмента): 
 

Теперь самое интересное smile Будем его искажать. Есть в GIMP такой замечательный фильтр «Изгиб по кривой». Вот им и воспользуемся. Найти его можно в Фильтры -> Искажения -> Изгиб по кривой:
 

Все настройки ставим, как на рисунке. И, справа на сетке, мышкой оттягиваем линию примерно так:
 

Когда вы будете тянуть линию, слева в окошке будут отображаться соответствующие изменения. Таким образом, вы сможете подобрать искривления, которые сочтете наиболее оптимальными. У меня в итоге получилось вот такое перышко:
 

Сохраняем полученное изображение в формате png: Файл -> Сохранить...

2. Теперь приступим к весам. Открываем изображение весов. На исходной картинке у нас уже есть перевес чаш весов. Нам нужно подготовить несколько кадров, для анимации, чтобы показать плавный переход из положения равновесия к тому, что имеем.

Для этого нам нужно аккуратненько отделить плечи весов с чашами. Но для начала избавимся от белого фона.

Открываем исходное изображение и добавляем к нему альфа-канал. Щелкаем правой кнопкой мыши на слое в диалоге слоев и в сплывающем меню выбираем Добавить альфа-канал
 

Теперь, с помощью инструмента Выделение по цвету , в настройках выставляем значение порога 50, выделяем белый фон, то есть просто щелкаем по нему. И нажимаем клавишу Delete. Затем Выделение ? Снять. Мы получили весы на прозрачном фоне. Получив чистое изображение, сохраняем его под новым именем, например vesi.png, не забудьте при этом поставить расширение .png. Это наше основное изображение и работать мы будем теперь только с ним.

А сейчас разделим наши весы на 4 части. Мы должны получить две чаши (левую и правую), плечи весов, ну и собственно основание, на котором вся эта красота держится. Дублируем наше изображение 4 раза. Слои так и назовем: фон, левая чаша, правая чаша, плечи основание.

Начнем с основания. Чтобы другие слои нам не мешали, отключим их, щелкнув по пиктограмме глаза . Переходим на слой Основание (щелкаем по нему в диалоге слоев). Теперь отделяем от основания все лишнее: с помощью инструмента Прямоугольное выделение  выделяем плечо и чашу слева и нажимаем Delete. То же самое проделываем с правой половиной. Остатки подчищаем ластиком. Аналогичным образом поступаем с остальными слоями (только не забывайте в диалоге слоев выделять нужный вам слой). В итоге получили вот такие части:
 

Думаю самое время положить на наши чаши содержимое. А вернее только в одну. Класть будем только перо, а логотип оставим напоследок. 

Итак, загружаем в рабочее окно наше перышко: Файл -> Открыть как слои (или комбинация клавиш Ctrl + Alt + O). 
Перо поместим в правую чашу. Поэтому все слои кроме правой части я отключила, дабы не мешали процессу.
 

 Я решила не менять размер пера, но вы можете его немного уменьшить  на свое усмотрение. Теперь сдвигаем  перо на чашу весов.
 

Думаю стоит ему придать более естественное положение, поэтому с помощью инструмента Вращение  повернем его немного, а с помощью инструмента Перемещение   опустим поглубже в чашу.
 

Так как слой с пером находится поверх слоя с чашей, то видимости того, что оно лежит в ней нет. Исправляем эту погрешность. Чтобы перо нам не мешало, отключим этот слой.  Дублируем слой с чашей и перемещаем копию поверх слоя с пером. Теперь остается стереть среднюю и левую нити но этом скопированном слое. Чтобы долго не выдумывать можно сделать это Ластиком . Включаем слой с пером, и вот что получили:
 


Теперь объединяем все слои относящиеся к правой чаше и называем полученный слой Правая чаша с пером.

3. Следующим шагом будет создание кадров из полученных частей весов. У нас по-прежнему 4 слоя. Дублируем их все кроме фона, который нужен нам для ориентира, и с помощью инструментов Вращение  и Перемещение  подгоняем их в нужное положение. На примере сделаем первый кадр, когда весы находятся в равновесии.

Итак, продублировав слои, я подняла их наверх в списке слоев и отключила слои с чашами. Они пока не нужны. Переходим на слой Копия Плечи, инструментом Прямоугольное выделение  выделяем эти самые плечи. А затем инструментом Вращение  поворачиваем слой так, чтобы весы находились в состоянии равновесия. Для того чтобы не обмануться и действительно повернуть изображение ровно, воспользуемся направляющей. У меня угол поворота составил 16 градусов.
 

Теперь включаем слои с чашами и таким же образом подгоняем их. Убираем направляющие, объединяем четыре слоя (с которыми работали), и конечный слой называем кадр1.
 

Если у вас получилась такая картинка, значит вы все делаете правильно. Далее создадим еще несколько кадров, в которых у нас перо будет перевешивать. Ориентируйтесь на слой с фоном. Просто включите его, и снизите прозрачность:
 

Когда правая чаша опускается вниз - плечи весов наклоняются на 16 градусов. Чтобы нам легче было создавать промежуточные кадры поделим эту величину на какое-то целое число, и будем поворачивать плечи весов на каждом кадре на полученный результат. У нас так и напрашивается смещение в 4 градуса. Следует заметить, что для более плавного движения чаши весов лучше брать смещение между кадрами не одинаковое, а с учетом ускорения-замедления. Но так как у нас баннер простой и кадров мало, то можно и не изобретать . В итоге у меня получилось 4 кадра. И все лишние слои теперь можно удалить.

4. Настала пора вставить логотип на вторую чашу весов. Поэкспериментировав, я выяснила, что слои нужно уменьшить приблизительно раза в два, что и делаем: Изображение -> Размер изображения. Теперь вставляем наш логотип: Файл -> Открыть как слои
Слой с логотипом при необходимости подгоняем по размеру Трансформированием (Shift+T), дублируем его 3 раза и располагаем перед кадрами с весами. 
Далее слой с логотипом перед первым кадром (остальные слои отключаем, чтобы не мешали) перемещаем  на левую чашу весов.
 

Объединяем слой с логотипом и со слоем кадр1. И делаем то же самое с остальными кадрами.

5. Нам необходимо, чтобы наш баннер был определенного размера, а именно шириной в 180 пикселей. Данный размер определен местом под баннер. Как уменьшать размер изображения было написано выше. Но есть один нюанс, на который я хочу обратить ваше внимание. Как вы видите у нас по бокам очень много лишнего места. И от него тоже нужно будет избавляться. Так вот я предлагаю сделать это перед уменьшением изображения. Выгода проявляется в том, что само изображение весов будет уменьшено не так сильно. 
Лишнее пространство убираем с помощью инструмента Кадрирование . Выбираем его на панели инструментов, а затем выделяем наше изображение: 
 

Выделив нужную область, щелкаем по ней мышкой. Таким образом мы вырежем нужную нам часть.
Ну а теперь можно и уменьшить: Изображение -> Размер изображения. Ставим ширину 180.

6. Осталось наш баннер подписать. И здесь мы тоже соригинальничаем smile

Но для начала добавим места под текст: Изображение -> Размер холста. В появившемся окошке меняем высоту. Обратите внимание на значок цепочки  справа от размеров высоты и ширины. Если цепочка соединена, то при изменении одного размера, автоматически, пропорционально поменяется другой. Так как нам нужно изменить только высоту, а ширину оставить прежней, то щелкаем по этой цепочке. Теперь она приняла вид разъединенной, что означает, что мы можем изменить высоту, не меняя ширину. Ставим высоту 200. Проставляем смещение по Y, то есть наше изображение будет не сверху, а почти посередине, и помечаем, что изменения для всех слоев. Нажимаем изменить размер.
 


 

Теперь нам нужно сделать фон. Создаем новый слой. Цвет переднего плана выбираем такой f6faf6. И инструментом Заливка   закрашиваем фон. Дублируем слой 3 раза, располагаем под кадрами, и объединяем каждый кадр с фоном. Получили 4 кадра с весами, но уже на новом фоне.
 

7. Ну вот мы и добрались до создания лозунгов. Выбираем инструмент Текст , и пишем сверху следующую фразу: "ЕЖЕДНЕВНЫЙ ДОХОД?!". Цвет для текста я выбрала — af5b0a, а шрифт URW Gothic L Semi-Bold  (или на свой вкус):
 

Теперь начинаем колдовать над текстом smile. За фразой "ЕЖЕДНЕВНЫЙ ДОХОД?!" будет следовать другая фраза - "ЛЕГЧЕ ЛЕГКОГО !!!". Но мы не будем делать просто смену одного текста на другой, а попробуем придать этой смене некоторую эффектность.

Дублируем текстовый слой. Щелкаем по нему в окне Диалогов слоев правой кнопкой мыши и в меню выбираем Удалить текстовую информацию. Выделяем этот слой: Выделение -> Все и нажимаем Delete; снимаем выделение: Выделение -> Снять. В итоге мы получили чистый слой, с размером, как у текста. Назовем его эффект. Слой с текстом лучше отключить, чтобы не мешал.
Инструментом Прямоугольное выделение  выделим на этом слое область, чуть меньшего размера, чем сам слой. 
 

Далее меняем цвет переднего плана на eef2ee, этот цвет немного темнее, чем основной фон. И заливаем этим цветом выделенную область. А затем ластиком подчищаем края. Просто делаем по краям небольшие мазки:
 

Опять меняем цвет переднего плана на более темный — e4e8e4. И инструментом Кисть  наносим горизонтальные мазки на нашу область:
 

Повторяем процедуру с еще более темным цветом — dadeda, а затем еще — c9ccc9. На последнем цвете уменьшаем размер кисти:
 

Ну а теперь последний штрих, в прямом смысле слова smile Выбираем цвет, которым писали текст, уменьшаем кисть, и делаем буквально несколько штрихов:
 

Снимаем выделение. Дублируем этот слой. Выбираем инструмент Текст  и пишем вторую фразу: "ЛЕГЧЕ ЛЕГКОГО !!!". Включаем первый текстовый слой и выравниваем по нему второй.
И создаем последнюю третью фразу, которая будет внизу: "система купли — продажи ссылок". Делаем в две строки. Шрифт я оставила тот же, а цвет взяла такой — 89ab57.
Нижняя фраза не будет изменяться, поэтому продублируем слои с этим текстом 3 раза, и объединим с каждым кадром.
 

В итоге у нас должно получиться 8 слоев: 4 кадра с нижней надписью, два текстовых слоя и два слоя с эффектом.

8. Осталось разобраться с очередностью действий, то есть каким образом наш баннер будет видоизменяться. Очередность будет такой: сначала будет меняться надпись, а затем будут двигаться весы. Таким образом нам понадобятся 4 слоя с кадром1 и 4 слоя с текстом ЛЕГЧЕ ЛЕГКОГО. Дублируем эти слои по три раза.
Объединяем их следующим образом:
кадр1 с текстовым слоем ЕЖЕДНЕВНЫЙ ДОХОД переименовываем в КАДР 1;
кадр1 со слоем эффект — КАДР 2;
кадр1 с текстовым слоем ЛЕГЧЕ ЛЕГКОГО — КАДР 3;
кадр 2 с текстовым слоем ЛЕГЧЕ ЛЕГКОГО — КАДР 4;
кадр3 с текстовым слоем ЛЕГЧЕ ЛЕГКОГО — КАДР 5;
кадр4 с текстовым слоем ЛЕГЧЕ ЛЕГКОГО — КАДР 6;
кадр1 со слоем эффект — КАДР 7;


 



Вот в общем то и все. Осталось только провести оптимизацию: Фильтры -> Анимация -> Оптимизация (для Gif); и расставить время задержки для кадров:
КАДР 1 — 2000 mc
КАДР 2 — 10 mc
КАДР 3 — 1500 mc
КАДР 4 — 150 mc
КАДР 5 — 150 mc
КАДР 6 — 1500 mc
КАДР 7 — 10 mc

Вот такие кадры мы получили после оптимизации.


И последний шаг, сохраняем наш баннер в формате gif, не забывая отметить, что это анимация. В результате получили вот такой баннер:


 

Ну а полюбоваться им в полной мере можно на странице сайта smile.

Удачи в создании собственных баннеров.

Просмотров: 20760




 

 

Ваши комментарии     



vanoc       20.09.2009 - 11:39       Ссылка      

урра! Получилось smile Спасибки за урок!


Андрей Пожарко       20.09.2009 - 16:40       Ссылка      

Ага, поздравляю. Только весы почему-то ездят влево-право. А в остальном правильно.


green       21.09.2009 - 06:09       Ссылка      

Замечательный урок! Для информации: Скрины этого урока блокируются мозиловским AdBlock Plus, похоже по ключу "baner".


Андрей Пожарко       21.09.2009 - 22:17       Ссылка      

Ага, большое спасибо за замечание, немного изменил название. Если еще будут подобные проблемы - сообщайте, еще буду колдовать.


Андрей Пожарко       02.12.2010 - 14:47       Ссылка      

green, именно так. Теперь будем знать, что изображения лучше называть каким-нибудь более удачным именем roll .


Алексей       04.01.2012 - 21:41       Ссылка      

И снова доброго времени суток smile Извините может быть не совсем сюда, решил сделать попробовать прочитав этот урок! вот хотел сделать такой себе вращающийся топорик big_smile создать создал cool вращается lol но почему первые кадры не исчезают после появления следующего cool ? подскажите пожалуйста roll


Алексей       05.01.2012 - 12:16       Ссылка      

Ко мне опять дошло но немножко позже smile) просто во всех слоях прозрачный фон smile)


Андрей Пожарко       15.06.2012 - 15:00       Ссылка      

У кадров нужно было изменить режим на "replace".


Добавить комментарий:

[b] [i] [u] [quote]     :) :| :( :D :o ;) :/ :P :lol: :mad: :rolleyes: :cool:


Введите результат =    








Мы рекомендуем функциональный Керхер К 5 купить по доступным ценам.
Проект OpenNET © 2008-2017 Андрей Пожарко Деньги владельцам сайтов