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

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

Photoshop имеет огромное количество функций и возможностей, в том числе и создание баннеров

Те, кто имел уже опыт создания баннеров в Adobe Photoshop CS6, может перечислить несколько их преимуществ. В частности, их достаточно просто устанавливать, они занимают совсем немного места, что так важно, когда на сайте присутствует дефицит свободного пространства. Также он достаточно легко обновляется и отображается на всех устройствах.

Процесс и правила создания статичных баннеров

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

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

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

Разрешение нового документа также устанавливает сам пользователь, но при этом важно учитывать некоторые правила. В частности, рекомендуется применять разрешение в 72 пикселя, поскольку при увеличении этого показателя готовый баннер будет тяжеловат для сайта, а при уменьшении будет наблюдаться потеря качества. Фон баннера подбирается под тот, который имеет основная картинка.

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

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

Создание анимированных вариантов

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

Процесс и правила создания анимированных баннеров

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

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

Если хочется, чтобы кнопка изменяла цвет, следует кликнуть по слою с кнопкой, делая его активным, после этого следует перейти в «Изображение», потом «Коррекция», а затем найти пункт «Насыщенность цветового фона». Кликнув по нему, открывается окно, в котором выбирается тонирование, позволяющее пользователю, двигая ползунок, выбрать желаемый оттенок.

Когда работа с первым слоем завершена, следует создать новый слой. Для этого следует зайти в панель «Слои» и найти пункт «Создать дубликат слоя». В новом слое опять следует проделать те же самые действия с кнопкой, только при выборе цвета следует остановить свой выбор на том же цвете, но с другим оттенком.

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

Теперь остаётся привести баннер в движение - собственно, сделать его анимированным. Для этого нужно открыть параметр «Создать анимацию кадра».

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

В завершение остаётся поставить отметку «Проигрывать постоянно», сохранить для Web, но в формате gif.

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

Привет Друзья! С Вами опять я — Владимир Савельев и сегодня мы продолжаем тему создания баннеров для сайта! В первой части статьи, я рассказал Вам о , которые помогут реализовать Ваши самые смелые задумки!

Теперь же пришла пора показать Вам — как же создают баннеры в Photoshop! На самом деле ничего трудного и ужасного Вас не ждет, просто повторяйте все действия за мной и мы вместе дойдем до завершающего финала, а именно создадим наш первый рекламный баннер!

Ну не буду долго тянуть кота за яйца поехали...

Делаем баннер в Adobe Photoshop

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

Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;

Выводим на экран панель работы со слоями “Layer”.
В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.

На отдельном слое – рекламный призыв, а так же заранее подготовленную по размерам фотографию, эмблему.

Компонуем все элементы баннера и обязательно создаём несколько возможных вариантов, которые не мешает обсудить с коллегами.

Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).

Очень полезно пока от компьютера отойти, отдохнуть от работы и вернуться к ней на следующий день, чтобы «свежим взглядом» оценить сделанное и выбрать окончательный вариант, который и будет подкорректирован и переведён в jpg.

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

Как сделать баннер в фотошопе анимированным (gif-файл)? И с этой задачей наш родной Фотошоп справится на ура! Открываем вкладку — окно — Анимация.

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

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

Здесь потребуется точно определить все:

• временные параметры поведения каждого слоя;
• поведение его прозрачности;
• траекторию перемещения.

Дело совсем не сложное, но заставит почувствовать, насколько сложна эта профессия сценариста-режиссёра.

Вся работа обеспечивается основной идеей – многослойностью изображения и возможностью работать с каждым слоём совершенно независимо друг от друга.

Вот такой вот баннер я создал за 5 минут! Он конечно далек от совершенства, но ведь моей целью было показать Вам возможности Фотошопа и я с этим справился!

Да, чуть не забыл рассказать о своей находке В прошлой статье, я рассказывал о том, что купил видео курсы Сергея Буйбарова, о том как создавать баннеры и зарабатывать на них ! После детального изучения (целый день смотрел видео трюки и фишки Сережи) я понял, что подобного рода курсы, очень нужны в Рунете! Советую к приобретению однозначно...

Самые маленькие баннеры размером 88х31 пикселей или же флеш-кнопки пользуются заслуженной популярностью. Они не занимают много места и меньше весят, поэтому веб-мастера сторонних сайтов охотнее размещают их на своих ресурсах, чем большие. С другой стороны сделать баннер в фотошопе маленького размера, чтобы он был информативный и красивый, подчас гораздо сложнее, чем большой. Яркая и броская Flash-анимация на маленьком поле выглядит не так эффектно как на большом и скорее раздражает посетителя, чем побуждает его сделать переход по баннеру.

Разместить весь необходимый текст на 2728 пикселях так, чтобы он выглядел не просто хорошо, а хотя бы был читабельным — крайне сложная задача. Исходя из этих предпосылок создадим анимированный GIF-баннер в мощном графическом редакторе Photoshop. Выбор на него пал потому что в нем можно работать со слоями изображения и лучше корректировать промежуточные и конечный результат.

Если вам нужен отечественный или импортный электродвигатель, то SZEMO может обеспечить вас двигателями со стандартом ГОСТ и DIN. Но они занимаются не только производством и поставкой, но и обслуживанием данных двигателей. Это удобно в случае если при использовании двигателя нужно провести техническое обслуживание. Консультацию о покупке и техническому обслуживанию электродвигателей вы можете получить по федеральному номеру 8-800-550-00-93.

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

Открываем редактор, нажимаем «Файл» -> «Создать» и создаем новый документ с заданными параметрами.

Выбираем цвет фона удобным для Вас способом и применяем инструмент «Заливка».

Придаем баннеру эффект объемности. Для этого переключаемся с «Заливки» на «Градиент».

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

У нас получился первый слой, назовем его «Фон». Для этого дважды щелкаем левой кнопкой мыши по слову «Слой 1» и переименовываем его. Затем делаем щелчок правой кнопкой по полю слоя и выбираем пункт «Параметры наложения…»

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

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

Выделяем текст или нужные буквы и настраиваем шрифт, размер, высоту, ширину, разрежение и прочие параметры надписи.

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

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

Для построения анимации воспользуемся кнопкой «Создание копии выделенных кадров» на шкале времени.

На первом кадре отключим видимость текстового слоя. Текст пропадет и на втором, так как это его копия. Затем включим текстовый слой на втором кадре. Зададим желаемое время показа каждого кадра, например 1-го – 1 сек., а второго 2 сек. Мы получили классический баннер «мигалку», но такие баннеры скорее раздражают посетителя сайта, чем побуждают его перейти по ссылке.

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

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

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

Однако если мы захотим сохранить созданный баннер привычным способом с помощью функций «Сохранить» или «Сохранить как…», то у нас ничего не получится. Вернее будет сохранен лишь один статический кадр. Для сохранения анимации необходимо выбрать пункт «Сохранит для Web…»

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

Теперь Вы знаете как сделать баннер в фотошопе. Оставьте отзыв о статье, мне очень важно Ваше мнение. Спасибо за внимание.

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

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

Как сделать анимационный баннер в фотошопе.
Вариант 1.
Анимационный баннер, полученный в результате простой смены картинок (фонов, рекламных объявлений). Для этого нам надо сделать всего три простых шага:

Шаг 1. Подготовительный.
выбираем размер баннера (в нашем случае 468х60) и создаем пустой файл
берем подготовленные заранее для нашего баннера картинки, которые уже приведены к нужному размеру баннера, копируем их и каждую из них вставляем в наш файл в виде отдельного слоя (открываем картинку- выделяем ее -копируем Ctrl+C — переходим в наш файл- вставляем Ctrl+V) . Для своего баннера я подготовила 3 картинки (картинка А).

Шаг 2. Делаем обводку для баннера:
Выбираем слой 1. Двойным щелчком по слою вызываем меню «Стиль слоя» и в этом меню выбираем «Обводка».

Выбрав ширину обводки, ее положение и цвет, зафиксируем эти параметры, нажав на кнопочку «Применить по умолчанию». Цвет обводки должен выделять четко контуры нашего баннера, а это означает, что он должен быть в меру ярким и контрастным по отношению и к фонам картинок и к фону вашего сайта.
Переходим на слой 2 . Щелкаем по нему дважды и в окне «Стиль слоя» просто выбираем «Обводка» и нажимаем ОК. (настройки стиля обводки мы оставляем неизменными)
Аналогично обводим и последний третий слой-картинку.

Шаг 3. Создаем непосредственно анимацию для нашего баннера.


Выбираем в верхнем меню фотошопа «Окно»-«Анимация» и выбираем покадровую анимацию. На картинке Б подробно показано, что обозначает каждая отдельная кнопочка на панельке анимации.(картинка Б)

Создаем кадры анимации: первый кадр создается, когда мы становимся на слой первой картинки, для создания второго кадра нажимаем на кнопочку 7(картинка Б) и переходим на второй слой, для создания третьего кадра мы снова нажимаем на кнопочку 7 (картинка Б) и «включаем» третий слой — слой нашей третьей картинки.
Определяемся со временем анимации. Выставляем время на каждом кадре и нажимаем на кнопочку 4, чтобы посмотреть, как получается. Если что-то не устраивает – корректируем время. Если устраивает и больше ничего мы не хотим менять, то сохраняем полученный простейший анимационный баннер.

Здесь я привожу только описательную часть данного шага, посмотреть ее можно в видео, которое размещено в конце урока.

Все, простейший анимационный баннер в фотошопе готов.

Когда будете смотреть видео, то обратите внимание, что на создание его фактически ушло примерно 3 минуты.

Вариант 2. Анимационный баннер, полученный в результате наложения на один и тот же фон-заготовку разных текстовых сообщений (или можно каких-то изображений).

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

1 кадр — фон+первый текст
2 кадр — фон+второй текст
3 кадр- фон+третий текст

На видео вы все сможете рассмотреть в реальном исполнении.

Анимация текста для создания анимационного баннера.
И еще в видео я показала, как сделать анимацию текста для анимационного баннера. Показан последовательный процесс формирования «рекламного» текста. Вначале показано, как сделать, чтобы первый текст перемещался снизу-вверх, затем второй текст перемещается справа-налево, как бы «выпрыгивая», и последний текст добавляется просто как кадр.

Будут вопросы- спрашивайте, обязательно отвечу подробно.

Пожалуй и все на сегодня. Пробуйте, экспериментируйте! Вот и обещанное видео!!!

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

И еще… Уроки по созданию анимационных баннеров пригодяться вам не только для создания баннеров для вашого сайта, но и для создания любой анимации, Ведь принцип анимации останется таким же, изменится лишь размер картинки!

Так что, если вам интересна тема анимации, подписывайтесь на обновления блога, чтобы ничего не пропустить!

Всем привет. В текущей статье я покажу вам, как можно сделать gif баннер средствами Photoshop. Вообще, я привыкла делать баннеры и анимацию в . Естественно, Photoshop не сравнится с данным пакетом по функционалу для анимации. Но все же достаточно простые и интересные баннеры в Photoshop делать можно, ведь в его новых версиях, начиная с CS5, насколько я знаю, появились возможности создавать анимацию прозрачности, масштабирования, перспективы и т.д. Рассмотрим процесс создания gif баннера в Photoshop на примере работы, расположенной в заголовке статьи.

Создадим новый документ размером 600 на 200 px. Фон — #589fff

Для начала соберем баннер в статичном виде. Расположим на слое нашего главного персонажа – рыбу, где можно взять бесплатные ресурсы для своих работ я писала в статье « »:

С помощью инструмента «Произвольная фигура » расположим на слое выноску с диалогом.

Напомню, что отредактировать фигуру (векторный объект) можно с помощью инструмента «Выделение узла».

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

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

И обратите внимание, что текстовые слои у нас должны быть кадрированы по размерам слоя с фигурой диалогового облака, чтобы оно служило рамкой, из-за которой текст уже не будет видно.

Итак, все слои у нас готовы. Расположены в порядке их появления (снизу вверх). Можем приступать к анимации.

Выберите пункт Окно – Шкала времени. В появившейся панели выберите кнопку Создать шкалу времени для видео. В результате создастся временная шкала, со всеми нашими слоями, которые мы уже можем двигать и анимировать.

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

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

Так же, если щелкнуть правой клавишей мыши по самому названию слоя на дорожке временной шкалы, откроется список дополнительных анимационных действий.

Активировать создание ключевых кадров для конкретной дорожки со слоем, можно, нажав на значок с часами напротив названия атрибута анимации.

Желтый ромб (пиктограмма ключевого кадра) появится там, где стоит временной указатель на шкале времени. Например, в начале. Вы можете изменить значение атрибута объекта, например, позиции и ее значение будет сохранено для данного ключевого кадра. Затем, чтобы задать новое значение и новый ключевой кадр, нужно переместить указатель времени на новое место. Щелкнуть по значку с ромбом напротив названия атрибута (на временной шкале появится новая пиктограмма ключевого кадра) и задать новое значение атрибута. Например, переместить объект в новое место.

Теперь попробуем применить полученные знания. Наша рыба должна появиться слева направо и ее прозрачность должна поменяться с 0 до 100%. Так будет выглядеть шкала времени в данном случае.

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

Для фигуры применим те же действия.

Теперь создадим анимацию для текста, используя тот же алгоритм. Только у текста будет параметр не Позиция, а Перспектива, при этом мы сможем не только изменять позицию, но и изменять масштаб от меньшего к большему, при начале движения текста. Для этого используется стандартный инструмент трансформации объекта (Ctrl +T ). Так как изначально слои с текстом у нас кадрированы по форме фигуры, то они будут видимы только в ее пределах. У второго текста я так же изменила стиль. Добавила градиент в параметрах наложения слоя.

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

Хоть Photoshop и не создан для какой-то сложной анимации (и это резонно), но с помощью вот таких нехитрых действий можно добиться достойного результата при создании gif баннера. Особенно если вы чувствуете себя в Photoshop, как рыба в воде, нежели при работе во Flash.

(Visited 2 407 times, 4 visits today)