Skip to content
 

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

 Как создать баннер в фотошопе.

создание баннеров

Здравствуйте, дорогие друзья! Мой блог: — «Создание и продвижение сайта. От чайника до профи», всегда открыт для вас! В прошлых статьях я рассказала о том, как создать флеш баннер, и как потом установить flesh banner на блоге. Сегодня я хочу рассказать вам о том, как сделать баннер в фотошопе.

У баннеров, сделанных в Photoshop, больше плюсов, чем минусов.

1. Лёгкий вес
2. Простота в установке
3. Отображается на всех видах устройств
4. Легко делается
5. Не грузит сайт
6. Баннер можно часто обновлять

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

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

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

Создание статичных баннеров JPEG в программе Photoshop.

Открываем фотошоп, создаём новый документ: «Файл» — «Создать». В открывшемся окне прописываем название, указываем ширину в пикселях, и высоту в пикселях. Ширину узнаете, померив ваш сайдбар. Красиво смотрится баннер, расположенный по всей ширине сайдбара. Высоту указываете исходя из того, какая высота у подготовленной картинки, плюс 50 или 60 пикселей – место для кнопочки.

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

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

Высота автоматически изменится, запомните её, или запишите. Жмите «ок».
Перетаскиваем картинку на созданный документ, зажав её левой кнопкой мыши, и нажав кнопку ALT на клавиатуре. На левой панели фотошопа, выбираем инструмент «перемещение». Первый с верха. И с помощью стрелочек на клавиатуре располагаем картинку на баннере.

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

Вот и всё, баннер готов! Объединяем все слои: — «Объединить видимые». Далее «файл» — «Сохранить для Web…». Выбираем формат сохранения JPEG. Выбираем папку для сохранения. Жмём «сохранить».

Создание анимированного баннера gif, в программе Photoshop.

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

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

Вот это нам и позволяет сделать картинку двигающейся.
Для создания задуманной мной анимации понадобится кнопка без надписи. Я её раскрашу в разные цвета. Сделаю слой с кнопкой активным (нажму на него один раз). Далее «изображение» — «коррекция» — «цветовой тон – насыщенность».

В открывшемся окне, ставлю галочку – тонирование. И двигая, верхний ползунок, выбираю цвет, подходящий к моей картинке. Затем жму левой кнопкой мыши по слою, и выбираю «создать дубликат слоя». Появляется слой с точно такой же кнопкой. Опять иду в «изображение» — «коррекция» — «цветовой тон – насыщенность».

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

Например, я решила сделать надпись: — «Получить бесплатно». Можно написать — «Узнать подробнее». Пишу слово – «Получить», по размеру кнопочки. Щёлкаю один раз по слою с текстом. Выбираю инструмент «перемещение». Устанавливаю надпись строго по центру кнопки.

Опять беру инструмент «Текст». Создаю дубликат слоя с текстом, выделяю текст, и заменяю его, на слово – «Бесплатно». В этом случае слово встанет там, где нужно, можно его немного подвинуть вправо или влево, не забывая брать инструмент перемещение.
Осталось нам как то раскрасить текст. Двойной щелчок по слою с текстом, В открывшемся окне настраиваем тень, выбираем градиент, делаем обводку.

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

Анимация баннера в фотошопе.

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

Теперь нужно закрыть глазки у всех слоёв, которые должны оставаться невидимыми. Например: — у нас две кнопки, значит, видимость одной закрываем. У нас два слова на одном месте – одно слово временно отключаем.

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

 

создание баннеров

 

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

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

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

Ролик без слов, но с пояснениями. Записывала ночью, когда все спали, поэтому говорить не могла. Но зато вы можете послушать приятное музыкальное сопровождение. Приятного просмотра!

 

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

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

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

Код для вставки баннера в виджет:

По этой ссылке страница открывается в той же вкладке

По этой ссылке страница перехода откроется в новой вкладке.

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

PS. Прочитайте статьи, как установить кроссворд на сайте, сделать красивые формы подписки, красивые музыкальные открытки или страницы захвата. Не спешите покидать блог, вы найдёте много интересной информации.
Баталова Ирина

Я хочу быть в курсе событий на сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности

Google

47 комментариев

  1. Отличная статейка подойдёт любому блогеру

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

  3. Я фотошоп так и не освоила в полной мере и сейчас пользуюсь простейшим редактором Paint.NET

    • Паинт не интересен, совсем мне не нравится, что там можно создать? Другое дело — Фотошоп! Это просто чудо, творить можно чудеса, и вытворять тоже! А сколько возможностей — море! Нет определённо вам нужно обратить внимание на фотошоп. Тем более сейчас куча обучающего материала в интернете совершенно бесплатно!

  4. Спасибо, Ирина — всё очень просто!

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

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

  7. Согласен с предыдущими мнениями, добавлю в избранное

  8. Ирина, спасибо! Нужно обязательно опробовать этот метод. Мне хочется чтобы кнопочка немного мигала)) А с Фотошопом у меня пока не очень крепкая дружба)

    • Ой, Галина, это же как два пальца об асфальт! 😉 Обращайся за советом, если что то не получится, я объясню. И дополню статью. А то я переживаю всё ли доступно объяснила и показала в видео.

  9. Ира, удали последний комментарий, это спам

  10. А чем можно заменить фотошоп? У меня его нет. А хотелось бы делать такие вещи самой

    • Олеся, есть много программ для редактирования картинок, но я пользуюсь только фотошопом. Другие программы не признаю. Многие работают в кореле, или в паинте, есть ещё пикаса. Я даже и не смогу перечислить все программы. Нужно поискать в интернете, какие программы есть.

      • @Ирина, Просто по другим программам практически не уроков, а по фотошопу много чего

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

  11. Собственно в конце публикации ошибка — код не валиден. При установке картинки на сайте (и даже баннера) очень важно чтобы атрибут alt присутствовал в коде, даже если его значение будет нулевым.

  12. Я делаю анимацию в отдельной программе.. попробую еще по-Вашему.. Правда, фотошоп я все никак не осилю)))

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

  14. Ирина,спасибо за детальные инструкции.
    Все расписано подробно.
    Обязательно воспользуюсь.

  15. Ирина, спасибо. Вроде бы всё понятно. Как и все видео ролики скачаю этот себе на компьютер.

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

  17. Нина Отченаш:

    Ирина!Спасибо Вам за уроки. У Вас ОТЛИЧНЫЕ статьи,все ясно и понятно. Спасибо,что делитесь с нами своими знаниями и опытом.Я у Вас многому научилась и буду учиться дальше.

  18. Да уж,когда создавали программу фотошоп,много сил и знаний сюда было вложено.

Написать отзыв

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: