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

Как сделать баннер в програмке Photoshop за 5 минут

Со временем, когда веб-сайт набирает обороты, у него возникает хорошая посещаемость и растут характеристики ТИЦ и PR, тогда вебмастера начинает думать о рекламе собственного проекта.

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

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

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

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

Как сделать баннер в Фотошопе за 5 минут

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

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

Далее нужно определиться с размером грядущего баннера, в основном употребляют размеры 468×60, 240×400. Мы будем делать баннер размером 468×60, для этого открываем «Меню» — «Файл» — «Создать» и выставляем размеры по ширине 468, по высоте 60.

Читайте также  Как отправить игру с компьютера на телефон. Как перекинуть игру с компьютера в телефон

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

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

Загружаем понравившуюся картину в фотошоп и устанавливаем нужный размер, который будет подступать по габаритам. «Меню» — «Изображение» — «Размер изображения».

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

После всего проделанного перетаскиваем картину на будущий баннер, а уже там поместим ее в подходящем для нас месте и объединяем ее с фоном.

У вас обязано было получиться два слоя, которые выделяются во вкладке «Слои», потом надавливает правую клавишу мыши и избираем действие «Объединить видимые».

Одна заготовка у нас есть, сейчас нужно сделать дубликат ее, в данной для нас же вкладке выделяете заготовку и нажимаете «Создать дубликат слоя».

Теперь осталось сделать какую-нибудь надпись в фотошопе на баннере. Избираем в панели инструмент «Текст» и пишем подходящую фразу.

Здесь тоже постарайтесь проявить оригинальность, придумайте то что завлечет людей. Сейчас объединяем копию основного слоя с текстом, через все туже вкладку «Слои».

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

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

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

Читайте также  Как в excel разделить столбец на число. Как разделить (разбить) ячейки в программе «Excel».

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

Посмотрите что у меня вышло в итоге за 5 минут обычный, а основное увлекательной работы.

Путь к этому баннеру будет иметь вид < img srс=” URL баннера на хостинге” >< /а>.

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

А ежели кто-то спросит, как сделать баннер для веб-сайта в фотошоп, то вы уверенно можете отдать верный ответ. Пока!

Рисуем баннер для партнерки в Фотошопе

Почти все из нас, участвуя в партнерских програмках, испытывают острую нехватку маркетинговых материалов. Не все партнерки предоставляют баннеры нужных размеров, а то и совсем оставляют создание рекламы на откуп партнерам. Ежели вы попали в такую ситуацию, не стоит отчаиваться. Сейчас сделаем баннер размером 300х600 пикселей для сайдбара веб-сайта в Фотошопе.

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

В качестве продукта выберем наушники из 1-го известного интернет-магазина. Технических приемов в этом уроке будет не много, в основном побеседуем о главных принципах сотворения баннеров.

Основные правила для баннеров

  • Баннер должен быть броским и в то же время не выбиваться из основной цветовой палитры веб-сайта. Явная реклама может раздражать пользователей.
  • Изображения и текст должны нести основную информацию о товаре, но в короткой форме (название, модель). Ежели предполагается акция либо скидка, это также можно указать.
  • Текст должен содержать призыв к действию. Таковым призывом может являться клавиша с надписью «Купить» либо «Заказать».
  • Расположение главных частей баннера может быть хоть каким, но изображение и клавиша должны быть «под рукой» либо «на виду».

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

Читайте также  Активация учетной записи администратора. Включаем скрытую учетную запись администратора в Windows 10

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

Подробнее: Инструменты для сотворения фигур в Фотошопе

Правила для надписей

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

Подробнее: Создаем и редактируем текст в Фотошопе

Фон

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

Подробнее:
Заполняем фон в Фотошопе
Заливка фонового слоя в Фотошопе

Аккуратность

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

Подробнее: Направляющие в Фотошопе

Итоговый результат:

Мы с вами сейчас ознакомились с основными принципами и правилами сотворения баннеров в Фотошопе.

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

Добавьте веб-сайт Lumpics.ru в закладки и мы еще пригодимся для вас.

Опишите, что у вас не вышло. Наши спецы постараются ответить очень быстро.

Помогла ли для вас эта статья?

ДАНЕТ

Поделиться статьей в соц сетях:

Оставьте комментарий