Как сделать гиф баннер

Всех рад приветствовать на своем блоге с вами как всегда Максим Зеленцов и сегодня речь пойдет о баннерах а точнее ох создание, что такое баннер? Мы каждый день встречаемся с этой вещью не только в интернете но и на улице, каждый день мы видим их в разных местах города с разными размерами это и есть рекламные баннеры. Но сегодняшняя мы с вами поговорим о баннерах в интернете здесь их тоже огромное количество с разными размерами. Что же такое баннер? С помощью этого инструмента мы создаем рекламу для своего блога, к примеру если вы занимаетесь партнерками то вам необходим этот инструмент как воздух, все мы видели в партнерских сервисах картинки а снизу код для вставки на свой сайт для рекламирования.

Как говорится «реклама это двигатель бизнеса» и мы этот двигатель будем с вами создавать по гаечки по болтику мы соберем наш GIF баннер.

Содержание:

1. Процесс создание баннера
2. Настраиваем цветовую гамму
3. Пишем текст и наполняем эффектами
4. Установка картинки и изменение масштаба
5. Делаем кнопку с надписью СКАЧАТЬ
6. Настраиваем анимацию

Давайте обратимся к википедии что же такое баннер

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

Размеры баннеров

88×31, 100×100, 100×200, 120×60, 120×90, 120×240, 120×600, 125×125, 125×250, 160×60, 160×120,160×240,160×600, 240×400, 250×250, 336 x 280, 460×60, 728 x 90 и многие другие.

Что нам потребуется для баннера

• И так прежде всего вам потребуется программа Photoshop не ниже cs 3, хотя и в более ранних версиях тоже можно сделать но немного в другим способом.
• Конечно же вам еще потребуется изображение смотря какая у вас тематика, в моем случае мы будем создавать баннер на тему «Как создать сайт»
• И конечно же вам потребуется немного проявить фантазии.

Процесс создание баннера

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

1. Мы заходим в редактор «Photoshop» и нажимаем вкладку «файл»
2. После того как мы нажали на «файл» после мы «создаем новый»
3. И у нас появляется новое окно для определение размеров, и нужного фона.
4. Затем вам нужно определится с размерами баннера а точнее с шириной у меня 236 px
5. А здесь мы вписываем размер высоты, в моем случае это 400 px
6. Мы определяем какой будет наш новый фон.
7. После того как мы в новом окне все настроили мы нажимаем «ok»

Настраиваем цветовую гамму

1. Для этого мы нажимаем на иконку с лева под названием «заливка»
2. И у нас появляется новое окно с помощью чего мы выбираем нужный нам цвет.
3. С помощью бегунка мы можем выбрать любую цветовую палитру.
4. После того как мы выбрали цвет нажимаем «ок»

После чего нам нужно активировать наш слой для дальнейшего дизайна.

Фотошоп это очень удобный редактор и не отьемлемый инструмент для создание картинок разных форматов, дизайнов, эффектов и в этом нам поможет дополнение (градиенты, кисти, стили, фигуры, шрифты и.т.д) как и где скачать вы можете посмотреть в моей статье

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

Пишем текст и наполняем его эффектами

1. Для того что бы написать текст мы нажимаем на нужную нам вкладку а именно на букву «Т» в левой колонки.
2. Для изменение цветовой гаммы текста мы нажимаем на квадратик который расположен внизу также левой колонки панели и так же бегунком определяем нужный нам цвет.
3. Для того что бы изменить какой ни будь текст, картинку и.т.д мы наводим курсор на нужный слой и нажимаем на него, после чего появляется панель внешних эффектов и выбираем нужную нам настройку и колдуем)). ( Смотрим ниже )

Установка картинки и изменение масштаба

Затем как мы написали текст и вставили эффекты для баннера нам нужно теперь вставить картинку, для этого мы нажимаем на «файл» и затем «открыть». Далее нам нужно выбрать нужную нам картинку к примеру я выбрал 3-D картинку кстати в моей статье вы можете посмотреть как ее можно сделать буквально за 2 минуты.

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

Затем мы таким же действием нажимаем левой кнопкой мышки на картинку и переносим ее на баннер,  далее нам нужно настроить масштаб картинки, для этого бы заходим в «Редактирование» после в «Трансформирование» и нажимаем на «Масштабирование» затем вы подгоняете рисунок под нужный вам размер и сохраняете.

Так как в этой статье я показываю как создавать баннер упираясь на нишу по «создание сайта» то для этого мне потребуется кнопка с надписью «скачать» и ее мы тоже сделаем в Фотошопе. Для начала мы переходим в «файл» и нажимаем «создать» по умолчанию все наши размеры сохранились но нам нужно поменять лишь одну строчку в новом окне. В место «белого» фона нужно поставить «прозрачный» (смотрим ниже)

Делаем кнопку с надписью скачать

Кнопка делается очень просто для этого мы нажимаем с левой стороны панели на (2) квадратик и вы выбираете какой формой будет кнопка прямоугольная или с округленными углами либо круглая, после того как вы выбрали нам нужно теперь выбрать (3) цвет кнопки, ранее мы эту процедуру уже выполняли вам ее нужно повторить и в этот раз.

И вот уже кнопка почти готова не хватает только надписи и мы снова нажимаем на букву (1) Т и пышем слово на кнопке, к примеру «скачать» далее мы настраиваем эффекты под свой вкус кнопки и текста.

После этого мы нажимаем на инструмент (6) рамка это пятая функция с левой стороны панели с верху, обрезаем нашу кнопку после сохраняем. После сохранение мы сразу же ее открываем в в файле, и так же отрываем от панели и вставляем на наш баннер.

Настраиваем анимацию

Подходим к заключительному этапу настраиваем анимацию, для этого мы переходим на вкладку «Окно» и нажимаем «Анимация»

1. 1. После этого у вас внизу появится новое дополнительное окно это и есть анимационная функция для нашего баннера.
   2. После мы нажимаем на папку расположенная внизу окна, эта функция позволяет приумножить наш файл для дальнейшей работы (смотрим ниже)
   3. Так же если к примеру вы размножили большое количество файлов то вы с легкостью можете их удалить нажав на корзинку.
   4. И теперь переходим к главному для того что бы наш баннер выглядел нужным нам образом нам нужно поочередно нажимать на глазок (4) там где отображается глазок и будет отображаться на нашем баннере.
   5. После вам нужно определить время, поставленные вами секунды и будут отображать интервал анимационного эффекта.
   6. Данная функция позволяет воспроизвести то , что у вас получилось.
   7. Так же вы можете задать время на свое усмотрение.

вернуться к содержанию

Рекомендую посмотреть видео