«

»

Мар 15

Уроки работы в фотошоп-создание анимированного баннера

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

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

Создание анимированного банера в программе фотошоп

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

Для этих целей мы с вами будем использовать графический редактор Adobe Photoshop.Если у вас его нет, то его можно скачать прочитав статью:«Уроки фотошоп-как убрать красные глаза на фото».

Открываем фотошоп и переходим по пути:Файл—>Создать-и создаём прямоугольную рамку размером 468*60,разрешение 72 пикс /дюйм,цветовой режим RGB-16 бит,как на скриншоте ниже.

Создаём рамку баннера

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

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

Фон можно загрузить как из интернета,так и сделать самому. Для этого используем инструмент «Градиент»,но перед этим на поле выбора цвета выбираем расцветку будущего фона. И далее переходим в подменю Слои,где нажимаем на значок(как на картинке)- Создаёт новый корректирующий слой,или слой заливку. И таким образом делаем «подложку»,или фон будущего баннера.

Открываем опцию- новый корректирующий слой

Работа с текстом в программе фотошоп

Далее выбираем инструмент «Текст» и в зависимости от того, как вы думаете его наносить выбираем-«Вертикальный»,или «Горизонтальный». В меню настроек текста, выбираем тип шрифта,величину и цвет.

Затем пишем призывной слоган, для успешного кликанья по баннеру с названием вашего товара,или сайта. На этом первый кадр нашего баннера готов, и необходимо сохранить его. Заходим в главное меню—>Файл—>Сохранить для Web и…,выбираем расширение JPEG и сохраняем в папку Баннер,под названием 1.jpeg.Её мы заблаговременно создаём на одном из разделов жёсткого диска.

Пишем текст и делаем анимацию

Далее приступаем к созданию второго кадра,повторяем все действия в той же последовательности снова,но при этом меняем цвет фона и текст. Сохраняем его под номером 2.jpg,и если вы задумали многослойный баннер то делаете соответственно ещё кадры.

После этого закрываем в фотошоп-е все части будущего анимированного баннера и открываем их же,только из папки Баннер. Идём по пути :Файл—>папка Баннер—> и выделяем все созданные кадры одновременно —>Открыть.

Затем наведя курсор на первый кадр открыть при помощи ПКМ(правой кнопки мыши)меню изменений и выбрать-Переместить в новое окно. И методом Перетаскивания,наложить второй кадр на первый.

Настройки анимации и создание gif баннера

После этого идём в меню : Окно—>Анимация и перекидываем все свои кадры в ленту анимации,устанавливаем время продолжительности показывания кадра и сохраняем всё это в расширении GIF. Для этого воспользуемся опцией —> Сохранить для Web и устройств. И всё,урок работы в фотошоп-создание анимированного баннера на сегодня окончен.

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

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

{lang: 'ru'}

1 комментарий

  1. Оксана

    Хорошая статья и видео про создание анимированый баннер просто класс)))

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>