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


Мастер-класс смотреть онлайн: Создаем баннер с нулевыми знаниями фотошопа

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

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

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

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

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

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

Итак, приступим!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И стиль шрифта.

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

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

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

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

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

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

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

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

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

Как сделать собственный баннер

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

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

Чтобы запустить этот баннерпроект, откройте предоставленный файл шаблона. Выберите «Файл»> «Открыть» и перейдите к файлу.Выберите его и нажмите «Открыть».

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

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

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

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

Чтобы применить стиль слоя, сначала убедитесь, что слой выбран. Затем выберите «Слой»> «Стиль слоя»> «Внутренняя тень». В появившемся диалоговом окне вы можете изменить все виды настроек, чтобы получить желаемый эффект, и даже попробовать другие популярные эффекты, такие как Outer Glow или Drop Shadow.

Когда вам понравится то, что вы видите, нажмите OK. Эффект внутренней тени теперь появляется на изображении… здесь. Он также появляется под слоем с фигурой на панели «Слои», что позволяет легко включать и выключать, редактировать или даже удалять.

Теперь приготовим яичный желток. Нам нужен еще один круг, и поскольку у нас уже есть круг с желаемым эффектом, мы можем просто продублировать этот круг и внести некоторые изменения. На панели «Слои» с выбранным слоем-фигурой выберите «Слой»> «Дублировать слой». Назовите слой «Желток» и нажмите ОК.

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

Наш яичный желток должен быть меньше, поэтому нам нужно изменить его размер. В Photoshop вы можете использовать Transform для изменения размера содержимого выбранного слоя, не затрагивая остальную часть изображения. Поскольку у вас есть слой желтка и выбран инструмент «Перемещение», вы увидите рамку «Трансформирование» вокруг желтка. Если вы не видите этого поля, выберите «Правка»> «Свободное преобразование».Нажав клавишу Shift, чтобы форма не искажалась, перетащите угол формы, чтобы изменить его размер, сделав его меньше. Щелкните и удерживайте внутри поля преобразования, стараясь не щелкнуть этот значок в середине поля, и перетащите круг, чтобы поместить его здесь. Щелкните галочку на панели параметров, чтобы остановить редактирование.

Теперь сохраним баннер.

Выберите «Файл»> «Сохранить как». Убедитесь, что сохранили его в формате Photoshop с установленным флажком «Слои», чтобы у вас был многослойный файл, который можно было повторно открыть для последующего редактирования.Затем щелкните Сохранить.

Вы также можете экспортировать другую копию в формате изображения, который вы можете опубликовать в Интернете, например, JPEG, PNG или SVG. Выберите «Файл»> «Экспорт»> «Экспортировать как…

».

В диалоговом окне «Экспортировать как» можно выбрать тип файла - в данном случае JPEG. Нажмите «Экспортировать все» и выберите, куда экспортировать файл, затем нажмите «Экспорт».

Вы также можете экспортировать определенные части баннера - например, только яйцо, а не целиком. Во-первых, нам нужно сгруппировать слои в форме яйца, чтобы они воспринимались как единый объект.На панели «Слои» щелкните верхний слой-фигуру, затем, удерживая клавишу Shift, щелкните последний слой-фигуру здесь. Выберите «Слой»> «Группировать слои». Щелкните правой кнопкой мыши групповой слой здесь и выберите «Экспортировать как». В диалоговом окне «Экспорт как» выберите формат, например PNG или SVG - оба они подходят для использования на веб-сайте, - и нажмите «Экспортировать все». Будет экспортирована только форма яйца, без остальной части баннера.

Дополнительную информацию об экспорте иллюстраций из Photoshop можно найти в других руководствах Adobe Learn на сайте Adobe.com.

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

.

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

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

Создание нового документа В Photoshop выберите «Файл» и «Создать».

Откроется окно «Новый файл», в котором вы можете выбрать все свойства своего баннера. Выберите размер (мы выбрали 8 футов x 2 фута) и разрешение (в данном случае достаточно 120 пикселей / дюйм, учитывая, что этот баннер будет виден с расстояния примерно 10 футов).Чем дальше будет стоять зритель, тем ниже может быть разрешение. Так вы не получите массивный файл. Если вы не уверены, какое разрешение выбрать, обратитесь к своему принтеру.
Убедитесь, что выбран цветовой режим CMYK. Это режим, используемый для печати, а фоновое содержимое устанавливается на белый для белого фона.

Как только вы нажмете кнопку ОК, откроется такой слой.

Шаг 2
Вставьте изображение Выберите файл и поместите

Откроется окно «Поместить».Выберите изображение по вашему выбору и нажмите «Поместить».


Выбранное изображение появится на вашем баннере следующим образом.

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

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

Если вы хотите изменить размер фотографии после ее размещения, выберите «Редактировать», затем «Свободное преобразование».

, и снова появится ограничивающая рамка.

Шаг 3
Добавление текста Выберите инструмент «Текст» в боковом меню.

Щелкните в любом месте баннера, чтобы начать ввод.

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

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

Повторите процесс, чтобы добавить больше текста, если необходимо.

Вы можете изменять размер текста так же, как и изображения (Правка> Свободное преобразование), и перемещать его с помощью инструмента «Перемещение».

Шаг 4
Изменение цвета фона

Выберите инструмент «Ведро с краской» в меню слева и на фоновом слое. Выберите цвет либо из образцов, либо из миксера цветов.

Просто щелкните баннер, чтобы изменить цвет фона.

Шаг 5
Сохранение файла Выберите файл, затем Сохранить как ...

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

Затем перейдите к слою - сведите изображение и повторите процесс (Файл> Сохранить как ...) и сохраните его в формате Photoshop PDF. Это файл, который вы отправите на свой принтер. Щелкните Сохранить.

Откроется новое окно «Сохранить Adobe PDF».Убедитесь, что вы выбрали печать высокого качества в качестве предустановки.

.

Как создать анимированный баннер в Photoshop

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

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

Шаг 1

Откройте новый документ Photoshop шириной 300 пикселей и высотой 250 пикселей. Это размеры стандартного баннера. Поскольку баннер будет использоваться только в Интернете, мы можем сохранить разрешение 72.

Шаг 2

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

Шаг 3

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

Шаг 4

На панели «Слои» должен быть выделен новый слой-фигура.Выберите раскрывающееся меню fx и выберите Bevel and Emboss. Установите стиль на внутренний скос и глубину на 50%.

Шаг 5

Добавьте новый слой в свой файл и с помощью инструмента «Текст» (T) создайте кнопку CTA (призыв к действию).

Шаг 6

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

Шаг 7

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

Шаг 8

Создайте новый кадр на панели «Анимация». В рекламном баннере снова сделайте видимым слой основного сообщения.Сдвиньте текст вверх, чтобы вы могли видеть только последнюю строку. На панели «Слои» установите непрозрачность этого слоя на 40%.

Шаг 9

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

Шаг 10

Создайте новый фрейм и переместите текст сообщения в его окончательное место. Увеличьте Непрозрачность полностью до 100%.

Шаг 11

Создайте пятый фрейм и сделайте видимыми слои кнопки и текста кнопки.

Шаг 12

Вы увидите, что в каждом кадре под миниатюрой указано «0 секунд». В раскрывающемся меню установите для Frames # 1-3 значение 0,1 секунды; Кадр №4 - 0,5 секунды, а кадр №5 - 2 секунды. Щелкните значок «Воспроизвести» на панели анимации, чтобы посмотреть, как работает баннер, и при необходимости отрегулируйте время.

Шаг 13

Чтобы завершить создание баннера, выберите «Файл»> «Сохранить для Интернета и устройств».Во втором раскрывающемся меню сверху выберите GIF в качестве типа файла и нажмите «Сохранить».

Освоив эти основы, вы можете применить тот же метод к объявлениям разных размеров и дополнительным элементам в объявлениях. Ознакомьтесь с некоторыми вариантами ниже:

Изучите значки и графику для ваших собственных анимированных баннеров в лайтбоксе ниже »

Изображение вверху: векторные элементы навигации и значки от Darko1981

Изображения, использованные в этом сообщении:

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

.

Как создать анимированный веб-баннер в Photoshop

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

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

Создайте этот анимированный баннер для веб-сайта, расположенного ниже…

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

01. Настройте свой документ

Запустите Photoshop, перейдите к файлу> новый и выберите Интернет в раскрывающемся меню «Preset». В раскрывающемся списке размеров выберите полноразмерный баннер или, если ваши размеры различаются, выберите пользовательский и вручную введите размеры в пикселях.

Если в меню просмотра выбрана привязка к границам документа, перетащите направляющие для привязки ко всем границам документа.

02. Добавление графических элементов

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

03. Создание дополнительных слайдов

Теперь просто скопируйте свой текстовый слой, отключите текстовый слой под ним и введите следующий этап сообщения, в данном случае «В ПРОДАЖЕ». Как только вы будете довольны тем, что у вас есть все элементы, объедините как можно больше слоев. Поскольку фон, логотип и изображение обложки останутся статичными, мы можем объединить их, оставив четыре слоя: фон, слои текста и слой со стрелкой.

04. Создайте покадровую анимацию

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

05. Сделайте так, чтобы стрелка мигала, и настройте время.

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

06. Сохранить для Интернета и устройств

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

.

Смотрите также

Поделиться в соц. сетях

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

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