Баннер в фотошопе. Как создать анимированный баннер в фотошопе - бесплатный видео урок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инструкция

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

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

В последний кадр включите адрес сайта и контактную информацию. Распределите кадры по слоям, а затем, скрывая ненужные слои для каждого конкретного кадра, сохраните их поочередно в формате GIF в отдельную папку. К примеру, в качестве первого кадра сохраните фон баннер а, в качестве второго – фон с логотипом, в качестве третьего – логотип с подписью и так далее. У вас может получиться пять или более кадров – из всех этих изображений в формате GIF вы должны собрать несложную анимацию.

Для этого откройте программу Ulead GIF Animator и выберите опцию «Мастер анимации». Укажите размер вашего баннер а и в следующем шаге загрузите в программу все созданные вами кадры, нажав кнопку «Добавить изображение».

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

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

Вам понадобится

• - компьютер с доступом в интернет;
• - Adobe Photoshop;
• - Ulead GIF Animator.

Инструкция

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

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

Скройте все слои, кроме нижнего, сохраните фон баннера в формате gif. Далее сохраните файл с логотипом (аналогично сделайте все остальные слои невидимыми). И так поступите со всеми слоями последовательно. В результате вы получите 5 статических гиф -файлов, из которых нужно будет смонтировать анимированный файл в формате gif.

Запустите программу Ulead GIF Animator, чтобы создать анимированный gif-баннер. Запустите «Мастер анимации» (из меню Файл). Выберите необходимый размер баннера, нажмите «Далее». В следующем шаге добавьте созданные ранее кадры будущей анимации. Нажмите кнопку «Добавить изображение», зажмите Shift, выделите все нужные файлы за один раз, добавьте их в мастер. Выберите необходимую скорость, с которой будут сменяться кадры. Нажмите «Далее». Работа Мастера закончена.

Установите кадры в необходимой последовательности, выставьте время задержки для каждого кадра, выберите его свойства, вызывая контекстное меню на нем. Измените время показа баннера, щелкните по кадру, в верхнем поле впишите время. Сделайте предварительный просмотр будущего файла, для того выберите вкладку «Предосмотр». Сохраните файл в формате GIF.

Видео по теме

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

Инструкция

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

Как создать баннер в Photoshop - 5.0 out of 5 based on 3 votes

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

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

1. Вначале создайте новый документ. Задайте имя, ширину, высоту и разрешение для нового документа. В данном случае мы создадим баннер стандарта 468×60.

2. Когда вы сделаете все вышеперечисленное, нажимаете «OK».

3. Дважды кликните по иконке слоя.

4. Введите имя слоя.

5. Нажмите на кнопку «OK», теперь ваш слой имеет имя, а также будет разблокирован.

6. Теперь снова кликните два раза на иконке слоя, чтобы открылись параметры наложения (Blending Options).

7. Выберите пункт, наложение градиента (Gradient Overlay) и укажите градиент, от серого до белого.

8. Когда все сделаете, нажмите на кнопку «OK»

9. Теперь необходимо создать новый слой, для этого нажмите на иконку «Создать новый слой» (Create New Layer).

10. Выберите инструмент «Перо» (Pen Tool) и нарисуйте форму как на рисунке выше.

11. Перейдите на вкладку «Контуры» (Paths).

12. Выберите «Рабочий контур».

13. Кликните по значку «Загрузить контур как выделенную область» (Load Path as a Selection), затем возьмите инструмент «Прямоугольная область» (M) и нажмите сочетание клавиш (Shft+Cntr+I). После этого выберите инструмент «Заливка» (G).

14. Установите цвет переднего плана: # 3129c3.

15. Кликните внутри выделения, чтобы заполнить его выбранным цветом.

16. Кликните по вкладке «Слои» (Layers).

17. Дважды щелкните по миниатюре слоя, чтобы открылись параметры наложения.

18. Нажмите на вкладку «Обводка» (Stroke), выберите оранжевый цвет и размер обводки 2 пикселя. После установки необходимых параметров нажмите на кнопку «ОК», чтобы применить обводку.

Примечание: повторите шаги с 10 по 18, чтобы добавить еще одну фигуру, как на рисунке ниже.

19. Выберите инструмент «Прямоугольник со скругленными углами» (Round Rectangular Tool).

20. Выберите цвет для новой фигуры, которую мы собираемся создать. Значение цвета можете указать: # a51219.

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

Создание баннера в фотошоп,анимированный gif баннер Photoshop.

Важную роль в продвижении сайтов, внешней и внутренней оптимизации играет баннер. Баннера могут быть статическими различных форматов изображений и анимированными (gif, flash). В баннер вставляется ссылка в редакторе на сайте. На этой странице рассматривается создание баннера в фотошоп в формате GIF (анимированный баннер photoshop) . Аналогично можно создать анимированный баннер в Corel Photo Paint или в программе Corel Paint Shop Pro Photo. Баннер в Corel Draw можно создать только статический, т. к. программа не поддерживает анимацию. Ссылку в изображение (баннер) в программе Фотошоп вставить нельзя, в отличии от CorelDraw. Примеры созданных анимированных GIF баннеров в Photoshop можно посмотреть в галерее в разделе мои баннеры . Урок создание анимации в фотошоп. Создание анимированного баннера в Photoshop. Рассмотрим 3 приема создания GIF анимации в фотошоп. Анимированный баннер

Анимация текста, Переключение слоев, 3. Затухание (переход).

Создание движущегося текста в фотошоп.

Для тех, кто только начинает знакомство с Adobe Photoshop, рассмотрим создание простейшего анимированного баннера с функцией движущийся (анимированный) текст. Так как Adobe Photoshop это программа для работы со слоями растровой графики, то она даст нам возможность создавать растровые изображения с анимацией слоев и сохранением в формате GIF, который поддерживает анимацию. Кнопки и инструменты Adobe Photoshop, которые нам понадобятся для создания баннера анимация движущийся текст: кнопки меню ФАЙЛ, ОКНО, ПРОСМОТР, панель инструментов, инструменты ТЕКСТ, окна АНИМАЦИЯ, СЛОИ, СИМВОЛ.Создаем новый документ - кнопка ФАЙЛ - в раскрывающемся меню жмем НОВЫЙ.

В появившемся окне задаем нужные размеры, допустим 200 пикселей ширина, 100 высота, задаем для начала прозрачный фон (потом можно будет залить нужным цветом). На панели инструментов слева жмем кнопку текст (Т ) и на поле документа набираем текст, допустим «ТЕКСТ» для последующей анимации движения еще раз набираем второе слово «ТЕКСТ» на таком расстоянии от первого, чтобы второе слово вышло за пределы баннера справа (стало невидимым). Настройки текста можно задать в верхнем меню - жмем кнопку ОКНО - в раскрывающемся меню жмем СИМВОЛ - в окне меню СИМВОЛ задаем нужные параметры текста: шрифт, размер, цвет и т.д.

Создание анимации текста в фотошоп

В верхнем меню - жмем кнопку ОКНО - в раскрывающемся меню жмем АНИМАЦИЯ - в окне меню АНИМАЦИЯ видим первый кадр.

Для создания анимации необходимо несколько кадров. В окне АНИМАЦИЯ снизу слева от кнопки корзины жмем кнопку в виде листа и создаем копию кадра. На обоих кадрах задаем время отображения кадра (допустим 0,2 сек, но можно подобрать под нужную скорость в соответствии количеством промежуточных кадров для себя). Нажимаем на второй кадр и в окне СЛОИ нажимаем на слой с нашим текстом для активации слоя. Если нет по краям окна программы линеек для создания направляющих - в верхнем меню - жмем кнопку ПРОСМОТР - в раскрывающемся меню жмем ЛИНЕЙКИ. Нажимаем на левую линейку и, не отпуская, тянем (по умолчанию голубенькую) направляющую к началу текста. На поле баннера нажимаем на текст (при активном втором кадре) и зажав клавишу Shift (чтобы сдвиг был строго по горизонтали), тянем текст влево так, чтобы появившееся второе слово ТЕКСТ подошло к направляющей, но не в плотную, а с маленьким зазором от направляющей до начала второго слова, чтоб в последствии не было рывков в анимации при возвращении анимации к первому кадру.

В окне АНИМАЦИЯ внизу слева от кнопки создание нового кадра нажимаем на Добавление промежуточных кадров, в открывшемся окне задаем количество промежуточных кадров, допустим 10 с параметром «предыдущий кадр» (чем больше кадров зададим, тем плавне будет движение анимации, но, соответственно, увеличится вес изображения баннера) жмем ДА. По идее анимация готова. Теперь надо проверить анимацию. В окне АНИМАЦИЯ жмем на кнопку воспроизведение анимации и просматриваем в основном окне программы на баннере движение текста.

Если все устраивает - сохраняем - жмем ФАЙЛ - сохранить для web устройств. Перед сохранением нужно чтоб активный кадр был первым на готовом баннере (с него начнется анимация) или задать кадр для начала анимации. При сохранении для веб устройств открывается окно, в котором задаем формат GIF (только формат GIF для анимации!) если надо выбираем количество цветов colors (чем меньше оттенков, тем легче баннер), для данного черного текста хватит 8 цветов. Цикличность (looping option) оставляем forewer (без остановки). В этом окне сохранения для веб устройств можно поменять размер баннера - уменьшим - 100 на 50. Здесь же можно просмотреть результат анимации. Если все устраивает - жмем Save и указываем место сохранения баннера, допустим на рабочий стол. Назвать для последующей загрузки на сайт необходимо латинскими буквами, например banner_text. Просматриваем готовый баннер и если устраивает - можно загружать на сайт. Такой же эффект движения можно сделать не только с текстом, но и с частью изображения (объектом).

Второй способ создания анимированного баннера в Adobe Photoshop.

Баннер со сменяющимися изображениями изготавливается путем создания нескольких слоев изображений и включения (выключения) их в заданном порядке. Создадим 2 слоя с разными изображениями.

Слой 1 и слой 2. Создаем в окне анимации 2 кадра. Задаем время показов. В первом кадре оставляем включенный слой 1, слой 2 выключаем. Просматриваем анимацию и сохраняем для веб устройств в формате GIF. Для более точной передачи цветовой гаммы выставляем количество цветов 256.

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

Опять создаем 2 слоя, но не выключаем их, а применяем функцию прозрачности. Создаем 3 кадра. В кадре 1 первый слой непрозрачность 100%, во втором кадре слой 1 непрозрачность 0%. В 3 кадре слой 1 опять непрозрачность 100%. Между тремя кадрами создаем необходимое число промежуточный кадров и получаем эффект перехода изображения.

Уменьшение размера gif анимации (баннера) в Фотошоп.

Что делать, если необходимо уменьшить размер анимированного баннера (изображения), а нет PSD исходника? Напряпрямую готовый гиф со слоями в фотшоп не откроешь. Это можно сделать в Corel Photo paint. Как уменьшить размер анимированного gif баннера в фотошоп ? Тут надо знать маленькую хитрость. В Фотошоп gif анимацию загружаем через меню ФАЙЛ - импортировать - кадры видео в слои. На данном этапе и начинается фокус. Во первых, на компьютере должен быть установлен Quick Time Player. Во вторых, в открывшемся окне загрузки сразу наш gif не найти (по умолчанию-видео форматы). Чтобы найти наш баннер, необходимо в строку ИМЯ ФАЙЛА в окне поиска Фотошоп при импорте написать расширение гиф следующим образом - "*.GIF" без кавычек.

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

Видео наглядно показывает создание анимированного баннера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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