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

Содержание
  1. Как создать баннер в
  2. Что такое баннерная реклама
  3. Какие виды баннеров бывают
  4. Виды интернет-баннеров по способам реализации
  5. Определение размеров баннера
  6. С чего начать
  7. Как делать баннер в фотошопе рекламный для сайта и для печати
  8. Баннер и его разновидности
  9. Немного о размерах
  10. Начинаем
  11. Украшения
  12. Текст
  13. В заключении
  14. Как сделать баннер в фотошопе легко и быстро
  15. Заказать или сделать самому?
  16. Что такое баннер?
  17. Создание баннера
  18. Как сделать баннер в фотошопе – Создание и раскрутка сайта
  19. Создание статичных баннеров JPEG в программе Photoshop
  20. Создание анимированного баннера gif, в программе Photoshop
  21. Анимация баннера в фотошопе
  22. Как сделать баннер в Фотошопе
  23. Какие у нас есть ограничения?
  24. Куда добавлять готовые баннеры?
  25. Нам необходима графика
  26. Графический редактор для создания баннера
  27. Рисуем баннер в Adobe Фотошоп CC 2015
  28. Слои баннера в Фотошоп
  29. Кнопка, которая будет двигаться
  30. Как сделать анимацию в фотошоп нашей кнопки
  31. Открываем окно Шкала времени
  32. Создаем новый кадр
  33. Более сложная gif анимация кнопки
  34. Как добиться эффекта на баннере, что кнопка нажата?
  35. Сохраняем gif баннер с анимацией
  36. Как сделать рамку для баннера?
  37. Обязательно сохраняем исходники в PSD формате
  38. Лёгкое создание баннера в Photoshop
  39. Создание статичных вариантов
  40. Процесс и правила создания статичных баннеров
  41. Создание анимированных вариантов
  42. Процесс и правила создания анимированных баннеров

Как создать баннер в

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

Каждый из нас ежедневно сталкивается с рекламой, смотря телевизор, сидя в Интернете, находясь на улице, в торговом центре и еще много где. В этой статье мы расскажем про один из самых популярных видов рекламы – баннеры. Вы узнаете, что такое баннеры, какие виды их бывают и как создать рекламный баннер в “Фотошопе”.

Что такое баннерная реклама

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

Уличные баннеры появились давно, когда еще не было даже радио. А вот в Интернет они просочились в 1994 году и быстро начали набирать популярность.

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

Какие виды баннеров бывают

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

Виды интернет-баннеров по способам реализации

Перед тем как узнать, как создать баннер в “Фотошопе”, мы познакомимся с разновидностями способов их реализации.

  • Статичные. Простейший баннер – картинка с рекламным содержимым. Размер файла небольшой, поэтому быстро загружается даже при медленном Интернете. Легко создать баннер как в “Фотошопе”, так и в других графических редакторах.
  • Анимированные. Весят они в несколько раз больше статичных, в связи с этим загружаются медленнее, но зато больше бросаются в глаза пользователю. Такой рекламный баннер создать в “Фотошопе” уже гораздо сложнее.
  • Ричтекст (Rich text). Баннер, похожий на информационную статью с графической составляющей.
  • HTML5, JS, флеш-анимация. Это уже баннеры, которые являются интерактивными мини-программами. Например: различные тесты, примитивные игры, опросники. Создать такой рекламный баннер в “Фотошопе”, как вы понимаете, никак не получится.

Определение размеров баннера

Прежде чем узнать, как создать макет баннера в “Фотошопе”, необходимо определиться с его размерами. Стандартом считается размер 100 х 100 пикселей. Самый часто используемый вариант – 468 х 60 и 234 х 60. Первая цифра определяет ширину, а вторая длину. Так что вертикальный баннер будет иметь размер, например, 60 х 468 пикселей. Поэтому важно знать, где вы будете размещать свой баннер.

С чего начать

Вот мы узнали, что можно баннер создать в “Фотошопе” как больших размеров, так и миниатюрных. Но спешить не стоит и прежде, чем открыть программу, чтобы создать баннер, как и в любом творческом деле, надо прикинуть дизайн и содержимое. Мы советуем это сделать при помощи бумаги и карандашей.

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

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

Важно помнить об авторских правах, поэтому подбираем картинки на бесплатных ресурсах.

Итак, ваш макет готов. Теперь приступим непосредственно к основному процессу.

В этой статье мы сделаем статичный горизонтальный рекламный баннер размером 468 × 60 пикселей и текстом «Распродажа iPhone 5. Не упусти шанс» в программе “Фотошоп” версии CS6.

  1. Запускаем программу. Создаем новый документ с размерами 468 × 60 пикселей.
  2. Фон мы сделаем синим, плавно переходящим в белый. Для этого выбираем цвет в нижнем белом углу, затем выбираем инструмент «Градиентная заливка». Чтобы применить заливку, нажмите курсор на одной стороне холста и, не отпуская, проведите на другой конец. Пробуйте различные варианты, пока не найдете устраивающий вас.
  3. Следующим пунктом мы вставим картинку, которую нашли в поисковике. Открываем ее в “Фотошопе”. Для начала мы подгоним размер картинки под баннер – выбираем в меню вкладку «Изображение» и нажимаем «Размер изображения». Устанавливаем высоту 60 пикселей, ширина пропорционально уменьшится. Теперь надо отделить изображение смартфона от фона. Выбираем инструмент «Полигональное лассо» и выделяем необходимое пространство. После этого перемещаем выделенный участок при помощи команды «копировать-вставить».
  4. Вставляем текст, используя инструмент «Текст». Подгоняем размеры, подбираем шрифт и цвет. Можно воспользоваться готовыми шаблонами в окошке со стилями. Обратите внимание на вкладку «Слои». Там каждый элемент баннера – отдельный слой. Их можно копировать, удалять, менять различные свойства по отдельности. Мы дублировали слой с картинкой и переместили второе изображение в противоположную сторону холста. Остается только сохранить файл. При сохранении выбрать формат JPG, GIF или PNG.

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

Это была ознакомительная статья для начинающих с минимально подробной инструкцией создания баннера. На просторах Интернета много специальной литературы и видеоуроков.

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

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

Источник: https://FB.ru/article/398350/kak-sozdat-banner-v-fotoshope-poshagovaya-instruktsiya-sovetyi-nachinayuschim

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

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

Привет, народ! Как ваши дела? Я тут к вам пришел с новым и очень интересным уроком. Тема: как делать баннер в фотошопе. Тема огромная, о ней можно разговаривать очень много.

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

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

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

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

Три основные разновидности баннеров по их расположению:

  1. Наружные (плакаты, афиши, дорожные перетяжки и транспаранты и т.д.),
  2. Для сайтов (шапки сайтов, боковые баннеры и т.д.)
  3. Для социальных сетей (в ленте новостей, в шапках сообществ и личных страниц).

У каждой из этих площадок имеются собственные правила при их создании: размер, разрешённые цвета и допустимое информационное наполнение.

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

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

Еще баннеры разделяются в зависимости от выбранного формата на 3 вида:

  1. Статические (просто картинка или текст),
  2. Gif-анимация,
  3. .

Немного о размерах

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

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

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

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

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

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

Начинаем

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

Можно взять приблизительные размеры, ведь в конце их всегда можно отредактировать. При создании обязательно проверяем настройки цветового режима: для веб-баннеров должен стоять RGB, для печатных – CMYK.

Заливаем наш фон нужным цветом с помощью инструмента «Заливка» (горячая клавиша G).

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

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

Для этого два раза кликнем по слою с фотографией. Откроется окно настроек стиля для слоя. В открывшемся окне выбираем «Наложение градиента».

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

Чтобы цвет градиента не отличался от цвета фона, его можно взять пипеткой (горячая клавиша I). Просто выбрать этот инструмент и кликнуть по фону.

Обратите внимание, что напротив инверсии стоит галочка. Это значит, что градиент будет прозрачным цветом наружу, а не внутрь. Именно так нам и нужно сделать. Чтобы градиент был по бокам, нужно выставить угол в 180 градусов.

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

Вот такая красота у нас вышла.

Украшения

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

Если у вас есть какие-то свои идеи вы можете нарисовать их инструментом «Кисть» от руки, как вам нравится. Еще можно взять png-картинки с прозрачным фоном и также их вставить. Вариантов декораций просто уйма, вам потребуется лишь воображение.

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

Изменить обводку и заливку сердец можно сверху в их настройках. Рисунки на фоне фотографии очень сильно выделяются и забирают всё внимание на себя, предлагаю уменьшить их непрозрачность до 10-15%.

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

Функция очень полезная, ведь она позволяет редактировать сразу несколько объектов, не кликая по ним отдельно.

Текст

Далее давайте вставим текст на наш баннер. Это можно сделать с помощью горячей клавиши T, либо нажав на инструмент «Текст». После активации инструмента кликаем в месте, где примерно будет текст, и начинаем набирать.

Шрифт, размер, цвет текста можно изменить сверху в параметрах. Размещаем текст так, как нам нужно, подбираем шрифт и размер. Для удобства и более понятной сортировки слоев, текст можно также объединить в группу.

Далее добавим еще немного декоративных элементов. Я добавил PNG картинку с камерой и линию между текстом, чтобы отделить и акцентировать внимание.

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

Я считаю, что на этот баннер можно больше ничего не добавлять. Вот, что в итоге у нас получилось. Просто и со вкусом.

В заключении

Ну что, друзья, как вам урок? Делитесь своими впечатлениями, рассказывайте у кого что получилось, мне очень интересно почитать! Кстати свадебная тема сегодня и вот для вас лучшие свадебные фотографы мира!

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

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

Смотрите, запоминайте то, что вам понравилось и берите за основу какие-то элементы, создавая абсолютно новые произведения. Если делали для сайта, то сохраняйте с разрешением 72 dpi, а если для печати, то соответственно — 320dpi.

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

На этом у меня всё, скоро мы с вами увидимся в новых уроках! А старые можно посмотреть вот тут. Развивайтесь, пробуйте и творите! Пока-пока!

С вами был Иван.

Источник: https://krasivodel.ru/lessons/photoshop/kak-delat-banner-v-fotoshope.html

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

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

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

Заказать или сделать самому?

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

Любой баннер можно заказать у фрилансера, но зачем тратить деньги, если он делается очень просто. Я считаю, что с фрилансерами нужно работать обязательно, но лучше поручать им такую работу, с которой вы точно не справитесь самостоятельно или которая отнимет у вас много времени. Баннер можно сделать за полчаса, а опытному дизайнеру — за несколько минут :smile:.

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

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

Что такое баннер?

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

  1. Статичные – это обычное изображение, которое можно сделать в фотошопе. Такой баннер очень легко создать, да и посетителям он нравится, поскольку не мигает перед глазами :smile:. Если вы еще не научились делать баннеры такого типа, то ничего страшного, сегодня мы затронем эту тему :smile:.
  2. Gif-баннеры содержат несколько растровых изображений, которые по очереди меняются через определенный промежуток времени. Такие баннеры сегодня мы как раз таки и будем делать.
  3. Flash – баннер создается в программе Adobe Flash. Его создать сложнее всего, но зато и пользы можно получить от него намного больше.

Итак, давайте вернемся к вопросу, как сделать рекламный баннер. Делать мы будем вот такой gif-баннер.

Как видите он состоит с двух изображений, которые через 2 секунды меняются, чтобы привлечь на себя внимание. Мы можем сделать так, что и 3 и 4 и 10 изображений будут меняться, это не имеет значения. Кроме этого, время, через которое меняются фото, также можно легко настроить.

Создание баннера

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

Для работы я использую программу Adobe Photoshop CS5 Extended на русском языке. Для того чтобы создать обычную картинку, нажимаем «Файл» -> «создать», указываем ширину и высоту, (в моем случаи это 468 на 60) и нажимаем «ок».

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

Если мой сайт зеленый, значит, баннер делаю такого же цвета. После того, как вы создали картинку, просто сохраните ее на своем компьютере («Файл» -> «Сохранить для web и устройств…»).

О том, как сохранять изображения без потери качества я писал тут.

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

Вот у меня есть 2 изображения в фотошопе:

Теперь я делаю активным второе фото и нажимаю комбинацию клавиш CTRL +A для того, чтобы его выделить. Потом CTRL +С для того, чтобы скопировать слой. Дальше делаю активным первое изображения и нажимаю CTRL +U для того, чтобы вставить слой. Второе фото я могу закрыть, оно мне не нужно. Если вы создали больше изображений, то аналогично копируйте их и вставляйте.

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

Например, на первом слои можно написать: «как сделать красивый баннер» на втором — «бесплатно» на третьем — «в фотошопе» на четвертом «за 5 минут» :smile:.

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

Сейчас нам нужно сделать так, чтобы эти изображения, когда мы их сохраним, поочередно менялись. Для этого нажимаем «Окно» -> «Анимация»:

Потом нажимаем в правом верхнем углу анимации на специальную кнопку и выбираем пункт «создать кадры из слоев»:

У нас открылись два слои, ниже которых мы можем заметить надпись «0 сек».

Это время, через которое слои должны меняться. Нажимаем на него и указываем нужное нам время, пусть будет 2 секунды:

И так нужно указать ниже каждого слоя. Можно сделать везде одинаковое время, а можно, например, между первым и вторим слоем указать 2 секунды, а между вторим и третьем 5 секунд (если у вас есть 3 слоя). Делайте, как считаете нужным.

Вот и все, баннер сделан. Теперь просто сохраняйте его в gif – формате. Для этого нажмите («Файл» -> «Сохранить для web и устройств…») и укажите обязательно gif – формат, иначе баннер работать не будет.

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

На этом все на сегодня. Теперь вы знаете, как сделать баннер в фотошопе для сайта. Всем пока ;-).

Источник: https://vachevskiy.ru/kak-sdelat-banner-dlya-sajta-v-fotoshope/

Как сделать баннер в фотошопе – Создание и раскрутка сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Опять беру инструмент «Текст». Создаю дубликат слоя с текстом, выделяю текст, и заменяю его, на слово – «Бесплатно».

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

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

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

Далее правой кнопкой мыши по слою с выбранными эффектами, и в окне жмём – «скопировать стиль слоя». Щелкаем по слою с текстом без эффектов, и жмём – «вклеить стиль слоя».

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

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

Источник: https://batalova62.ru/kak-sdelat-banner-v-fotoshopehtml

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

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

В этой транскрибации мы поговорим о том, как сделать баннер в фотошоп с простой анимацией для  Яндекс.Директ.

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

Какие у нас есть ограничения?

У нас есть требования от модерации, и есть требования по размерам. Мы можем загружать следующие размеры (240×400, 300×250, 300×500, 300×600, 336×280, 640×100, 640×200, 640×960, 728×90, 960×640, 970×250), и наш баннер должен весить до 120 КБ. То есть, если мы сделаем много анимации у большого баннера, то скорее всего, он не пройдет по весу, это понятно.

Куда добавлять готовые баннеры?

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

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

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

Это связано с тем, что в РСЯ много различных сайтов, и они в зависимости от своего дизайна добавляют рекламные блоки разного размера для показа объявлений. Думаю, это тоже понятно.

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

Итак, мы решили создать баннер. Что нам для этого необходимо?

Нам необходима графика

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

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

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

Графический редактор для создания баннера

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

Рисуем баннер в Adobe Фотошоп CC 2015

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

Например, мне нужен Ник. Выбираю этот слой, и просто перетягиваю в новый документ, и вот у меня в новом документе есть Ник. Здесь в Adobe Photoshop я могу нажать сочетание клавиш Ctrl+T или Command+T, и я получаю доступ к инструменту Трансформирование. И здесь я могу изменять размеры, это очень удобно. Поэтому я рекомендую вам обязательно начинать рисовать баннеры с большого размера.

Слои баннера в Фотошоп

Итак, у нас есть Adobe Photoshop, есть графика, мы создали документ (в моем случае это 960х640), я сюда добавил фон — это просто белое полотно.

Сделано это для того, чтобы следующий мой слой не привлекал внимания — у него есть степень прозрачности (я выставил заливку 80%), так как фотография достаточно качественная, четкая, и поэтому если оставить заливку 100%, то она слишком привлекает внимание.

Следующим элементом я добавил сюда Ника. Видите, он вырезан из какой-то студийной фотографии. Все это можно скомбинировать.

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

Далее, у меня есть текст, здесь вся информация. Потом, у меня есть логотип.

[alert class=»alert yellow»]Одно из требований Яндекс.Директ, чтобы на баннере был логотип либо ОГРН организации. Я сразу добавил и то, и другое, чтобы этот же баннер использовать, например, в myTarget. Еще у меня добавлено здесь “6+”, это тоже требование от Яндекс.Директ, чтобы на баннерах с мероприятиями была отметка о возрасте.[/alert]

Кнопка, которая будет двигаться

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

Еще у меня у прямоугольника есть эффект тени (кстати, он есть и у других элементов этого баннера — у текста). Давайте перейдем сюда и посмотрим, что это за тень. Я два раза кликнул по слою и попал в Стили слоя.

И вот здесь есть параметр Тень. Режим наложения Нормальный, непрозрачность 100%, угол 90 градусов и смещение 0.

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

Как сделать анимацию в фотошоп нашей кнопки

Теперь у нас есть все объекты.

Что необходимо сделать, чтобы создать простую анимацию?

Открываем окно Шкала времени

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

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

[alert class=»alert yellow»]Если у нас происходит анимация объекта с текстом, то этот текст должен успевать читаться. Одной секунды вполне достаточно для прочтения текста.[/alert]

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

Создаем новый кадр

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

Более сложная gif анимация кнопки

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

Обратите внимание, я нахожусь на втором кадре и скрываю предыдущую кнопку.

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

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

Как добиться эффекта на баннере, что кнопка нажата?

Перехожу в Adobe Photoshop, и перехожу в стили слоя прямоугольника-подложки группы Кнопка копия (двойным кликом по слою). И вместо Тени я ставлю Внутреннюю тень и перехожу в настройки: режим наложения Нормальный, непрозрачность 100%. Далее я делаю смещение, такое чтобы было заметно. 7 пикселей достаточно. И можно еще угол поменять — сделаем 140 градусов, чтобы тень была сбоку.

Теперь у нас на первом кадре воздушная кнопка, а на втором нажатая.

Но согласитесь, чего-то ей не хватает.

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

Можно еще по одному пикселю добавить. У нас теперь есть два кадра, которые крутятся постоянно. Мы можем проверить, как это все работает, нажав кнопку Play.

Сохраняем gif баннер с анимацией

Чтобы сохранить, необходимо выбрать Файл — Сохранить для веб — и появляется окно. Чтобы у нас работала анимация, необходимо выбрать формат GIF.

Если мы выберем формат JPEG или PNG, то наша анимация не будет работать, и будет только первый кадр.

Выбираем GIF, можем выбрать параметры повторов (постоянно или однократно — рекомендую обязательно проверить), и можем посмотреть здесь, как работает анимация.

Все бы хорошо, но в данном случае вы видите, что у нас GIF имеет большой размер. Это связано с тем, что размер баннера большой, из-за этого вес нашего объекта очень большой. В данном случае я рекомендую его сохранить как JPEG, причем в качестве 50, тогда его вес будет 104 КБ. А лимит, напомню, 120 КБ, то есть мы входим.

Но из-за того, что мы хорошо поработали в большом баннере, мы теперь эти объекты можем переносить в баннеры меньшего размера, и там уже сможем смело сохранять в GIF. Можете в этом убедиться, когда поработаете. В итоге когда мы его сохраним,  этот баннер мы уже можем загружать себе в рекламную кампанию.

Как сделать рамку для баннера?

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

Как ее сделать?

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

Баннеры небольшие, поэтому объект с фоном у вас будет, скорее всего, больше, чем ваш баннер. Поэтому его нужно будет обрезать именно в том размере.

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

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

Обязательно сохраняем исходники в PSD формате

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

Вот такое видео про то, как сделать баннер (вы прочитали транскрибацию). Если оно вам понравилось, то обязательно ставьте лайк, подписывайтесь на мой -канал, потому что вас ждет еще много интересного видео. С вами был Денис Герасимов, пока-пока!

Источник: https://rek9.ru/tehnicheskie-fishki/kak-sdelat-banner-v-fotoshope/

Лёгкое создание баннера в Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

Далее на этот документ перемещают кнопку, которую можно немного украсить, сопроводив её дополнительной тенью.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://nastroyvse.ru/programs/review/kak-sdelat-banner-v-fotoshope.html

Все лайфхаки
Добавить комментарий

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