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

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

Мне пишут люди о том, чтоб как-то подробнее все описать и показать, (я хочу сделать баннер для сайта). Так вот сегодня именно так и будет! Я в подробностях покажу что и как делается.

В статье « » я говорил что в данной программе «swishMax3» можно делать также неплохие баннера, но есть небольшое НО... При сохранение баннера, в формате gif, программа swich сохраняет в очень большом размере, что для сайта не очень хорошо, так как будет баннер долго грузится. В данной программке можно создавать красивые фреш баннера.

Как сделать рекламный баннер в фотошопе

Я буду показывать на примере «Adobe Photoshop cs6» вы можете использовать и 5, но я рекомендую версию по новее. На сайте, бесплатные легальные программы для компьютера на русском http://programmybesplatno.com можно скачать любую программу,

Заходим в программу, создаем новый файл, я буду создавать обычный баннер с размером 468×68, это стандартный размер. Для начала покажу вам, какой баннер я буду делать:

Как вы видите, все простенько и без наворотов, так как сейчас чем проще тем и не напрягает глаза, по стилю flat.

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

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

Всем спасибо за внимание, жду ваших комментариев.

Напоследок новость

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

У кого есть какие-то вопросы задавайте!!!

оздаём анимированный баннер для Вашего сайта

Откроем исходник для баннера, его размер 468х60. Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.

Выберем инструмент "Горизонтальный текст".

Добавим к тексту стиль слоя. Для этого в палитре слои нажмём на вторую слева иконку fx и выберем стиль "тень".

Появится диалоговое окно "Стиль слоя", выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.

Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём "Да".

Наш текст преобразился.

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

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

Простым перетаскиванием "Слоя 0" на вторую справа иконку создания нового слоя создадим три копии слоя "Слой 0".

Расположим эти слои так, что бы под каждым текстовым слоем находилась копия "Слоя 0".

Делаем активным текстовый слой, нажимаем сочетание клавиш Ctrl+E. Тем самым, мы сливаем вместе активный текстовый слой и расположенную под ним копию "Слоя 0".

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

Открываем палитру "Анимация". Для этого выбираем "Окно - Анимация".

Мы увидим палитру "Анимация".

Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем "Создать кадры из слоёв".

Так как, у нас четыре слоя, то в палитре "Анимация" появится четыре кадра.

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

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

Сохранеяем нашу анимацию. Идём в "Файл - Сохранить для Web" или просто нажимаем Alt+Ctrl+Shift+S.

В появившемся окне ставим формат Gif, выбираем 256 цветов и нажимаем "Save" (сохранить).

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

Вот что у нас получилось.

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


Подобные публикации:

  • видеоурок "Как сделать текстовый "
  • видеоурок "Как сделать баннер для сайта"
  • урок "Создаём анимированную кнопку для Вашего сайта"

{smooth-scroll-top}

Откроем исходник для баннера, его размер 468х60 . Если у Вас нет таких исходников, то баннер, который используется в этом уроке, Вы можете скачать А вообще можно использовать любой прямоугольник необходимых Вам размеров, залитый какой-нибудь подходящей текстурой.






Выберем инструмент "Горизонтальный текст ".




Напишем на нашем баннере любой текст, я выбрал подходящий для своего сайта.






Добавим к тексту стиль слоя. Для этого в палитре "Слои " нажмём на вторую слева иконку fx и выберем стиль "Тень ".






Появится диалоговое окно "Стиль слоя ", выберем примерно такие параметры, которые указаны на рисунке. А вообще, Вы вольны выбрать то, что Вам по вкусу.






Добавим обводку чёрным цветом шириной 1 пиксель. Нажмём "Да ".






small;">Наш текст преобразился.






Отключим видимость слоя с текстом и добавим новый текстовый слой. Что-нибудь напишем.






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






Наш верхний слой получил те же параметры стиля слоя, что и у первого текстового слоя.






Таким же образом создадим третий текстовый слой и придадим ему те же эффекты.






И наконец создадим последний слой с теми же стилями слоя.






Всего получилось четыре слоя с текстом.






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






Простым перетаскиванием "Слоя 0 " на вторую справа иконку создания нового слоя создадим три копии слоя "Слой 0 ".






Расположим эти слои так, что бы под каждым текстовым слоем находилась копия "Слоя 0 ".






Делаем активным верхний текстовый слой, нажимаем сочетание клавиш Ctrl+E . Тем самым, мы сливаем вместе верхний активный текстовый слой и расположенную под ним копию "Слоя 0 ".






Так же делаем со всеми слоями. В результате у нас останется всего четыре слоя. На этом подготовительная часть работы по созданию анимации закончена.






Открываем палитру "Анимация ". Для этого выбираем "Окно - Анимация ".




Мы увидим палитру "Анимация ".






Нажмём на стрелочку, расположенную в верхнем правом углу палитры и в открывшемся списке выберем "Создать кадры из слоёв ".




Так как, у нас четыре слоя, то в палитре "Анимация " появится четыре кадра.




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




Затем нажимаем на чёрную стрелочку под первым кадром и выбираем параметры показа анимации - будет показана один раз, всегда или можно выбрать необходимое количество раз. Я выбрал "Всегда".







Сохранеяем нашу анимацию. Идём в "Файл - Сохранить для Web " или просто нажимаем Alt+Ctrl+Shift+S.




В появившемся окне ставим формат Gif , выбираем 256 цветов и нажимаем "Save " (сохранить ).






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





{smooth-scroll-top}

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

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

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

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

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

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


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


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


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


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

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

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

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

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


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

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

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

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

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

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


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

До скорого в новой статье!


С уважением, Владимир Савельев

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

Всем привет! Баннер – это анимированная картинка небольших размеров, изображения которой, как правило, поочередно меняются. Чаще всего баннер состоит из 3-4 изображений, каждое из которых демонстрируется несколько секунд.

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

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

Программы для создания баннера

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

  1. Ulead Gif Animator
  2. Banner Maker Pro 7.0.5
  3. Banner Designer Pro 5.0
  4. Easy GIF Animator

Каждая из них имеет свои достоинства и недостатки, описывать которые нет смысла. Я рекомендую попробовать все (они небольшие – каждая занимает около 25 МБ), а остановиться на самой удобной, на ваш взгляд.

Easy GIF Animator

Я опишу создание баннера с помощью программы Easy GIF Animator, так как сам ей нередко пользуюсь. Данная программа подойдет в том случае, когда нужно быстро создать простой и незамысловатый баннер, состоящий из 2-3 меняющихся надписей. Интерфейс проги очень удобен, что позволяет мгновенно в ней разобраться. Но графика оставляет желать лучшего.

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

Запустив программу, вы попадете на главную страницу, где надо будет выбрать, что создать (анимацию, баннер, кнопку и т.д.). Мы выбираем анимированный баннер.


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

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

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

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

    Обе статьи очень подробно описывают процесс создания баннеров, поэтому проблем с их восприятием не должно возникнуть. Вот так можно . Если у вас остались какие-то вопросы, пишите в комментариях.

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

    Как создать баннер в 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.