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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как поменять пароль на вифи ростелеком

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Как загрузить фото в контакте на аватарку

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

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

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

Теперь осталось сделать какую-нибудь надпись в фотошопе на баннере. Выбираем в панели инструмент «Текст» и пишем нужную фразу.

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

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

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

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

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

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

Путь к этому баннеру будет иметь вид .

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

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

Всем привет. В текущей статье я покажу вам, как можно сделать gif баннер средствами Photoshop. Вообще, я привыкла делать баннеры и анимацию в Adobe Flash и Adobe Animate . Естественно, Photoshop не сравнится с данным пакетом по функционалу для анимации. Но все же достаточно простые и интересные баннеры в Photoshop делать можно, ведь в его новых версиях, начиная с CS5, насколько я знаю, появились возможности создавать анимацию прозрачности, масштабирования, перспективы и т.д. Рассмотрим процесс создания gif баннера в Photoshop на примере работы, расположенной в заголовке статьи. Если вас заинтересовал такой вариант баннеров и вы не можете сделать его самостоятельно, закажите у меня создание такой анимации — заполняйте форму обратной связи и я вам обязательно отвечу

Еще примеры баннеров, которые можно сделать в Photoshop:

Создадим новый документ размером 600 на 200 px. Фон — #589fff

Для начала соберем баннер в статичном виде. Расположим на слое нашего главного персонажа – рыбу, где можно взять бесплатные ресурсы для своих работ я писала в статье « ТОП 8 сайтов с бесплатными ресурсами для дизайнера »:

С помощью инструмента «Произвольная фигура» расположим на слое выноску с диалогом.

Напомню, что отредактировать фигуру (векторный объект) можно с помощью инструмента «Выделение узла».

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

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

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

Читайте также:  Как убрать якорь в ворде 2010

Итак, все слои у нас готовы. Расположены в порядке их появления (снизу вверх). Можем приступать к анимации.

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

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

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

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

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

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

Теперь попробуем применить полученные знания. Наша рыба должна появиться слева направо и ее прозрачность должна поменяться с 0 до 100%. Так будет выглядеть шкала времени в данном случае.

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

Для фигуры применим те же действия.

Теперь создадим анимацию для текста, используя тот же алгоритм. Только у текста будет параметр не Позиция, а Перспектива, при этом мы сможем не только изменять позицию, но и изменять масштаб от меньшего к большему, при начале движения текста. Для этого используется стандартный инструмент трансформации объекта (Ctrl +T). Так как изначально слои с текстом у нас кадрированы по форме фигуры, то они будут видимы только в ее пределах. У второго текста я так же изменила стиль. Добавила градиент в параметрах наложения слоя.

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

Чтобы сохранить результат, необходимо выбрать Файл – Сохранить для Web. Выбрать формат Gif и указать, чтобы анимация повторялась постоянно.

Хоть Photoshop и не создан для какой-то сложной анимации (и это резонно), но с помощью вот таких нехитрых действий можно добиться достойного результата при создании gif баннера. Особенно если вы чувствуете себя в Photoshop, как рыба в воде, нежели при работе во Flash.

Уверена, моя статья раскрыла вам завесу тайны того, как можно создавать анимированные баннеры в Photoshop, а не только использовать покадровую анимацию готового видео, например, при создании живого синемаграфичного эффекта . Чтобы узнать новое и интересное в мире дизайна, подписывайтесь на обновления блога «Дизайн в жизни».

Так же вы можете поддержать автора статьи, просмотрев небольшой рекламный ролик:

Ссылка на основную публикацию
Как самостоятельно оцифровать видеокассету
На сегодняшний день эра видеокассет безоговорочно подошла к концу, а на ее место пришли цифровые носители. Что делать в том...
Как продать свои услуги в интернете
Как продавать свои услуги в Интернете запись закреплена Ваши первые клиенты уже через 30 дней – и больше пользы людям!...
Как продлить срок службы аккумулятора телефона
Сегодня литий-ионные (Li-Ion) и литий-полимерные (Li-pol) аккумуляторы являются самыми распространенными в мобильных устройствах.Они обладают целым рядом преимуществ по сравнению с...
Как сбросить биос джампером
Настройки базового оборудования и времени вашего компьютера хранятся в БИОС и, если по какой-то причине у вас возникли проблемы после...
Adblock detector