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

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

Фотошоп

Автор Иван Фролов На чтение 7 мин Просмотров 10к. Обновлено

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

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

Баннер и его разновидности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начинаем

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

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

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

Фотография

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

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

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

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

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

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

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

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

Украшения

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

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

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

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

Похожие записи:

1. Как в фотошопе повернуть объект: разные способы
2. Как объединить все слои в фотошопе разные способы
3. Как в фотошопе сделать отражение: разные способы
4. Оформление фотографий: разные способы
5. Как сайт сделать недорого и качественно: разные способы
6. Как повесить фотографии на стену красиво: разные способы
7. Как делать футажи на андроид в Capcut
8. Как менять размеры изображений в фотошопе
9. Как в фотошопе создать красивый текст, показываю по шагам
10. Как в фотошопе изменить размер объекта сохранив пропорции

Создаем баннер с нулевыми знаниями фотошопа

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

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

Этот мастер-класс рассчитан для новичков в работе с фотошопом!

Сначала коротенькое отступление.

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

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

Открываем фотошоп, на верхней панели инструментов выбираем Файл — Создать.

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

Получаем наш «холст» для работы.

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

В панели слева выбираем инструмент, прямоугольная область.

Выделяем понравившийся фрагмент картинки и жмем по области правой кнопкой мыши. Всплывает окно. Выбираем «Свободное трансформирование».

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

Жмем Enter либо щелкаем два раза по уменьшенной области, кликаем правой кнопкой, в верхней панели выбираем Редактирование — Скопировать. Либо пользуемся горячими клавишами Ctrl+C.

Переходим в нужное окно, выбираем Редактирование — Вставить, либо Ctrl+V. Здесь вы еще можете точно таким же способом трансформировать вставленную картинку. У меня осталось белое место сбоку. Но растягивать и увеличивать картинку будет некрасиво, обрежутся важные детали и будут слишком крупными.

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

Я хочу освежить картинку новогодним хвойным ароматом! И конечно же мне нужно чем-то закрыть пустую область. Нужно добавить новый слой. Сюда вы можете вырезать любое изображение из любой картинки с помощью инструмента лассо, удобнее всего магнитное. Но есть вариант и гораздо проще! Например, мне нужна еловая веточка и мне совсем не хочется мучиться с ее вырезанием из какой-то картинки. Так и ищу в поисковике «Веточка елочки на прозрачном фоне», вы ищите все что угодно, на прозрачном фоне. Из предложенных вариантов сохраняете себе то, что нужно! Данные картинки уже представлены в нужном формате, без фона.

Я нашла вот такую натуральную елочку-красавицу! Чувствуете новогодний аромат?

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

Данный фон вырезается очень легко с помощью «волшебного ластика».

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

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

Осталось вставить текст! На верхней панели выбираем размер шрифта.

В панели «Работа с текстом» можно отрегулировать расстояние между строчками, между буквами, и т.д.

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

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

Я немного оттеню белый цвет своей надписи.

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

Мой баннер готов! Сохраняем в нужной папке!

Теперь обязательно «примерьте» его к магазину! Я, например, очень поспешила и загрузила новый баннер, просто, чтобы посмотреть, как он вписывается в магазин, и он сразу же прошел модерацию, а новый баннер теперь можно добавить только через месяц! Поэтому, лучше примерить баннер на скриншот вашего магазина, в том же фотошопе. Открываете свою страничку, жмете клавишу Print Screen. Затем создаете новый документ, пусть это будет стандартный а4, и жмете одновременно клавиши Shift + insert. Скриншот вашей странички вставится на лист, обрежьте его с помощью инструмента Кадрирование и вставьте баннер, уже изученным способом (выделить, трансформировать, скопировать, вставить). Хорошо смотрится? Загружаем!

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

(Кто первый напишет, что хочет такой баннер, тому отправлю его в подарок :))
С уважением, Светлана Храмовских.

Создание рекламного баннера в Фотошопе

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

Это наш очередной урок по Фотошопу. И прямо сейчас мы пошагово расскажем и покажем, как создать баннер размером 300×600 пикселей. Такой размер обычно используется в сайдбарах (боковых панелях) сайтов.

Для примера возьмем изображение наушников от SONY и загрузим его в проект:

Это руководство раскроет вам не техническую сторону вопроса, а именно методику, по которой стоит создавать баннеры в Photoshop.

Что нужно знать

1. Чтобы CTR (соотношение кликов к показам) был высоким, баннер нужно делать очень контрастным, чтобы он ни коим образом не сливался с общей цветовой гаммой сайта, но при этом и не пестрил в глазах.
2. Не стоит подробно расписывать все, что вы знаете о товаре – это только оттолкнет пользователя. Самое главное, чего хотят люди – узнать название товара, цену на него и есть ли скидка/акция.
3. На баннере должен присутствовать обязательный призыв к действию. Обычно этим самым призывом выступают слова “Купить”, “Заказать” или “Подробнее”.
4. Как бы вы не креативили с баннером, главное изображение (товар) должно находиться в центре внимания.

Исходя из выше сказанного, макет баннера размером 300×600 будет выглядеть так:

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

Что касается кнопки, то ее тоже можно скачать в Google картинках, но нам не составит труда создать ее в Фотошопе.

Давайте добавим 3 этих элемента:

Формат шрифтов

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

Нужно определиться с цветом шрифта. Мы возьмем какой нибудь темный оттенок с самих наушников, но можно брать и темно серый или черный цвет. Хотя лучше избегать прям 100% черного цвета.

Работа с фоном

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

Берем инструмент “Градиент”:

В настройках инструмента выставляем переход от светло-серого к прозрачному, а вид градиента выбираем “Радиальный”.

Остается только залить фон. Если вы не знаете, как работать с этим инструментом, то советуем для начала ознакомиться с этим уроком: Как залить фон в Фотошопе CS6 и CC

У нас получился такой результат после заливки:

Важно! Какие бы вы действия не проводили над дизайном, главное, чтобы основная информация легко читалась и была на первом плане.

Симметрия объектов

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

Для этого нам включаем линейки и, благодаря направляющим, выравниваем объекты:

Вот теперь можно сказать, что баннер готов:

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

На этом все! Благодаря программе Фотошоп и простым действиям мы смогли оперативно сделать баннер. Надеемся этот урок помог вам. Не стесняйтесь задавать свои вопросы в комментариях.

До встречи в наших следующих уроках!

Как создать баннер в «Фотошопе»: пошаговая инструкция, советы начинающим

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

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

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

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

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

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

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

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

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

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

С чего начать

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

Делаем свой рекламный баннер

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

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

Запускаем программу. Создаем новый документ с размерами 468 × 60 пикселей.

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

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