Как сделать гиф баннер
Всех рад приветствовать на своем блоге с вами как всегда Максим Зеленцов и сегодня речь пойдет о баннерах а точнее ох создание, что такое баннер? Мы каждый день встречаемся с этой вещью не только в интернете но и на улице, каждый день мы видим их в разных местах города с разными размерами это и есть рекламные баннеры. Но сегодняшняя мы с вами поговорим о баннерах в интернете здесь их тоже огромное количество с разными размерами. Что же такое баннер? С помощью этого инструмента мы создаем рекламу для своего блога, к примеру если вы занимаетесь партнерками то вам необходим этот инструмент как воздух, все мы видели в партнерских сервисах картинки а снизу код для вставки на свой сайт для рекламирования.
Как говорится «реклама это двигатель бизнеса» и мы этот двигатель будем с вами создавать по гаечки по болтику мы соберем наш GIF баннер.
- Процесс создание баннера
- Настраиваем цветовую гамму
- Пишем текст и наполняем эффектами
- Установка картинки и изменение масштаба
- Делаем кнопку с надписью СКАЧАТЬ
- Настраиваем анимацию
Давайте обратимся к википедии что же такое баннер
Баннер (англ. 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 это не стандартный размер, но для своего блога могу позволить такой размер так как мой виджет имеет именно такой размер.
- Мы заходим в редактор «Photoshop» и нажимаем вкладку «файл»
- После того как мы нажали на «файл» после мы «создаем новый»
- И у нас появляется новое окно для определение размеров, и нужного фона.
- Затем вам нужно определится с размерами баннера а точнее с шириной у меня 236 px
- А здесь мы вписываем размер высоты, в моем случае это 400 px
- Мы определяем какой будет наш новый фон.
- После того как мы в новом окне все настроили мы нажимаем «ok»
Настраиваем цветовую гамму
- Для этого мы нажимаем на иконку с лева под названием «заливка»
- И у нас появляется новое окно с помощью чего мы выбираем нужный нам цвет.
- С помощью бегунка мы можем выбрать любую цветовую палитру.
- После того как мы выбрали цвет нажимаем «ок»
После чего нам нужно активировать наш слой для дальнейшего дизайна.
Фотошоп это очень удобный редактор и не отьемлемый инструмент для создание картинок разных форматов, дизайнов, эффектов и в этом нам поможет дополнение (градиенты, кисти, стили, фигуры, шрифты и.т.д) как и где скачать вы можете посмотреть в моей статье
После того как мы активировали наш новый слой далее по желании можете наложить градиент он дает нам более красивый эффект и стиль. После того как мы наложили выбранный градиент нам нужно написать текст если вы определились с нишей, что именно будет рекламировать ваш баннер то вписываете текст и затем придаете тексту стиль, эффекты а именно «обводку» и.т.д все это делается по вашему усмотрению.
Пишем текст и наполняем его эффектами
- Для того что бы написать текст мы нажимаем на нужную нам вкладку а именно на букву «Т» в левой колонки.
- Для изменение цветовой гаммы текста мы нажимаем на квадратик который расположен внизу также левой колонки панели и так же бегунком определяем нужный нам цвет.
- Для того что бы изменить какой ни будь текст, картинку и.т.д мы наводим курсор на нужный слой и нажимаем на него, после чего появляется панель внешних эффектов и выбираем нужную нам настройку и колдуем)). ( Смотрим ниже )
Установка картинки и изменение масштаба
Затем как мы написали текст и вставили эффекты для баннера нам нужно теперь вставить картинку, для этого мы нажимаем на «файл» и затем «открыть». Далее нам нужно выбрать нужную нам картинку к примеру я выбрал 3-D картинку кстати в моей статье вы можете посмотреть как ее можно сделать буквально за 2 минуты.
После того как вы вставите выбранную картинку нужно ее отсоединить от рабочего стола фотошопа, для этого мы наводим курсор на верхнюю вкладку и просто отрываете ее прижав левой кнопкой мыши на вкладку.
Затем мы таким же действием нажимаем левой кнопкой мышки на картинку и переносим ее на баннер, далее нам нужно настроить масштаб картинки, для этого бы заходим в «Редактирование» после в «Трансформирование» и нажимаем на «Масштабирование» затем вы подгоняете рисунок под нужный вам размер и сохраняете.
Так как в этой статье я показываю как создавать баннер упираясь на нишу по «создание сайта» то для этого мне потребуется кнопка с надписью «скачать» и ее мы тоже сделаем в Фотошопе. Для начала мы переходим в «файл» и нажимаем «создать» по умолчанию все наши размеры сохранились но нам нужно поменять лишь одну строчку в новом окне. В место «белого» фона нужно поставить «прозрачный» (смотрим ниже)
Делаем кнопку с надписью скачать
Кнопка делается очень просто для этого мы нажимаем с левой стороны панели на (2) квадратик и вы выбираете какой формой будет кнопка прямоугольная или с округленными углами либо круглая, после того как вы выбрали нам нужно теперь выбрать (3) цвет кнопки, ранее мы эту процедуру уже выполняли вам ее нужно повторить и в этот раз.
И вот уже кнопка почти готова не хватает только надписи и мы снова нажимаем на букву (1) Т и пышем слово на кнопке, к примеру «скачать» далее мы настраиваем эффекты под свой вкус кнопки и текста.
После этого мы нажимаем на инструмент (6) рамка это пятая функция с левой стороны панели с верху, обрезаем нашу кнопку после сохраняем. После сохранение мы сразу же ее открываем в в файле, и так же отрываем от панели и вставляем на наш баннер.
Настраиваем анимацию
Подходим к заключительному этапу настраиваем анимацию, для этого мы переходим на вкладку «Окно» и нажимаем «Анимация»
-
- После этого у вас внизу появится новое дополнительное окно это и есть анимационная функция для нашего баннера.
- После мы нажимаем на папку расположенная внизу окна, эта функция позволяет приумножить наш файл для дальнейшей работы (смотрим ниже)
- Так же если к примеру вы размножили большое количество файлов то вы с легкостью можете их удалить нажав на корзинку.
- И теперь переходим к главному для того что бы наш баннер выглядел нужным нам образом нам нужно поочередно нажимать на глазок (4) там где отображается глазок и будет отображаться на нашем баннере.
- После вам нужно определить время, поставленные вами секунды и будут отображать интервал анимационного эффекта.
- Данная функция позволяет воспроизвести то , что у вас получилось.
- Так же вы можете задать время на свое усмотрение.
