Как создать баннер самому для сайта: Конструктор баннеров | Создать YouTube баннер

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

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

Где можно заказать дизайн

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

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

1. Kwork
2. WorkZilla
3. Freelance.ru

Профессиональные веб-студии (по рейтингу рунета за 2019 г.):

1. Net-Lab
2. AIC + QSOFT
3. Red Collar

Дизайн баннера своими руками

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

1. Canva
2. Crello
3. PicMonkey
4. Pixlr

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

Практическое видео для изготовления баннера в Adobe Photoshop:

Каким должен быть эффективный баннер

Где сделать баннер мы разобрались, но как его сделать таким, чтобы реклама была эффективна? Вот пошаговое руководство.

Правило пустого пространства

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

Согласитесь, второй вариант выглядит лучше.

Один баннер – одно предложение

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

Зачем идти во второй салон понятно. А в чем преимущество первого?

Чем меньше текста, тем лучше

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

Такой баннер создает уют и располагает к себе

Подача

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

Создавайте настроение

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

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

Каким должно быть рекламное фото

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

Качество – превыше всего

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

Кадрирование и ракурс

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

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

Фото людей вызывает наибольший отклик у аудитории

Улыбчивый человек, который взаимодействует с вашим товаром – весьма хорошая идея. А ещё лучше, если этот человек всем своим видом будет показывать, как ему нравится пользоваться этим товаром и как он ему помогает. Ведь когда потребитель будет смотреть на эту рекламу, первое что он будет делать – это ассоциировать себя с персонажем данной рекламы, примерять на себя его роль и задаваться вопросом: «А может мне тоже бы не помешало это купить?»

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

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

Итоги:

1. Не стоит засорять рекламный баннер множеством изображений. Одно изображение и фон – это отличная идея
2. Также не нужно пытаться продать на одном баннере сразу много всего. Один баннер – одно предложение.
3. Кратко и четко сформулируйте, что вы хотите донести до своей аудитории.
4. Будьте оригинальны и сделайте «креатив» креативным.
5. Попытайтесь вызвать у потребителя положительные эмоции.
6. Делайте только качественные фотографии.
7. Не забывайте про базовые правила предметной съемки.
8. Фото людей вызывает наибольший отклик у аудитории.

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

Как создать баннер для сайта самому: бесплатный онлайн-конструктор

Обновлено: 19.10.2020Автор: Максим Ляшенко

Всем привет! Сегодня я расскажу о том, как создать баннер для сайта используя онлайн-конструктор BannerBoo.

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

Содержание

1. Регистрация
2. Как сделать рекламный баннер для сайта
3. Заключение

Регистрация

Регистрация на сервисе довольно простая и занимает буквально пару минут. Для начала перейдите на официальный сайт – BannerBoo и нажмите «Вход» или «Сделать баннер» в шапке:

 

 

А вот, как выглядит само окно регистрации:

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

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

Затем выбираем необходимые размеры и нажимаем «создать новый баннер».

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

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

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

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

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

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

Баннер почти готов. Осталось подгрузить какую-нибудь картинку:

Отлично, теперь все готово. Осталось все сохранить и скопировать html-код.

Если кнопка сохранить недоступна, проверьте в меню «Настройки» название проекта. Если оно не указано дальше просто не пустит.

Чтобы получить необходимый html-код нажмите «Публиковать» и щелкните «Скопировать HTML5 код». Затем выбирайте «Тип баннера» (я делал статичную картинку, поэтому выбираю ее), как будет открываться рекламируемый ресурс (в новой вкладке или нет) и нужно ли картинку адаптировать под мобильные и планшеты. Закончив с настройками нажмите скопировать код:

Все, теперь его можно добавить на свой сайт. К слову, если вы хоть немного шарите в html и можете сами все прописать, смело сохраняйте изображение в jpeg или PNG и дерзайте.

Заключение

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

Как легко создать баннер WordPress

Баннеры существуют примерно столько же, сколько и Интернет: если вы не жили под скалой, вы, должно быть, видели бесчисленное количество примеров. В этом уроке мы покажем вам быстрый и простой способ создать баннер в WordPress.

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

Об этом мы и поговорим:

• Что такое баннер в веб-дизайне

• Когда использовать баннер

• Как создать баннер с помощью дополнений Qi для Elementor

Что такое баннер в веб-дизайне

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

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

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

Когда использовать баннер

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

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

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

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

Как создать баннер с помощью Qi Addons для Elementor

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

Все, что вам нужно сделать, чтобы начать создавать баннеры для своего веб-сайта WordPress, — это установить новейшую версию Elementor (Qi Addons будет работать с бесплатной версией Elementor) и новейшая версия Qi Addons с нашего сайта. Как следует из названия, Qi Addons не будет работать с другими редакторами страниц.

С Qi Addons для Elementor вы можете создать потрясающий баннер за считанные минуты, как показано в видео ниже:

Если вы предпочитаете текстовое руководство, просто продолжайте читать.

Мы будем использовать Qi Addons для Elementor, чтобы добавить баннер к сообщению, но он также работает и для страницы. Мы начали с поста и дали ему название.

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

Чтобы настроить его, начните с вкладки Content и ее раздела General . Для макета мы выберем вариант Standard , но вы также можете выбрать макет In Box , если хотите, чтобы текст выделялся больше. Вы можете (и должны) выбрать Изображение из вашей медиатеки или загрузите изображение для фона, щелкнув поле Изображение .

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

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

Переходя к разделу вкладки Content , мы находим поля Title , Subtitle и Text . Мы не будем использовать подзаголовок для этой демонстрации, поэтому оставляем его пустым. Мы введем образец Заголовок и Текст , чтобы заменить заполнитель.

В разделе Button вы найдете параметры настройки кнопки вашего баннера. Для макета мы придерживаемся значения по умолчанию 9.0091 Заполненный , но вы также можете иметь кнопку Outlined или Textual , а для Type мы также выберем значение по умолчанию Standard , в то время как вы можете выбирать между ним и With Inner Border и В штучной упаковке варианта.

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

Наконец, мы изменим текст кнопки на Подробнее .

Последним разделом этой вкладки, который мы обсудим, является раздел Button Icon . Здесь вы можете выбрать значок для вашей кнопки. По умолчанию он пуст, и вы можете оставить его таким, или вы можете выбрать один из библиотеки значков или загрузить SVG, нажав на значок 9.0003 Значок поле. Мы выбрали значок стрелки из нашей медиатеки.

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

Переходим к вкладке Style . Первый раздел — это Content Style . Чтобы изменить наш Banner Padding , мы сначала отсоединим значения отступов, так как нам не нужен ровный отступ вокруг содержимого баннера. Мы поставим Правый и Левый дополнение к 20% . Что касается Banner Border Radius , мы не будем использовать его в этой демонстрации. Он используется для придания кривизны краям баннера, а мы хотим, чтобы наш получился прямоугольным.

Элементы управления Banner Box Shadow и Hover Banner Box Shadow используются для настройки тени для баннера, когда он неактивен и при наведении мыши, соответственно. Мы не будем использовать их для этого баннера.

Вертикальное выравнивание содержимого и Горизонтальное выравнивание содержимого Элементы управления позволяют выравнивать содержимое баннера (текст и кнопку). Мы установим их на Middle и Center соответственно.

Раздел Style вкладки содержит параметры текстового содержимого: параметры Tag , Color и Typography для Title , Subtitle и

3 Text 90.

Мы переключим Тег заголовка на h3 и выберите простой белый цвет для заголовка .

Для параметров Title Typography мы выберем другой шрифт Family ( DM Serif Display ) и установим ползунок Size на 60 пикселей . Мы не будем использовать параметр Weight (жирность), но мы установим меню Transform на Верхний регистр (другие параметры включают Нижний регистр и Заглавные буквы 9).0092 ) и Style до Italic . Мы не будем использовать меню Оформление , но вы можете использовать его, чтобы добавить Подчеркивание , Линия над или Линия через к вашему тексту.

Чтобы увеличить расстояние между заголовком и текстом, мы установим ползунок Line-Height на 59 пикселей . Мы не будем менять межбуквенный интервал для этого баннера.

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

Что касается текстового тега , мы выберем H5 . Мы также будем использовать белый цвет для Text Color и 400 для Weight в параметрах Text Typography .

Двигаясь дальше, мы находим раздел Spacing Style . Здесь мы можем установить интервал для верхнего поля Title , Text и Button . Для этого дизайна баннера мы установим Text Margin Top на 9009.1 21 пиксель и Верхнее поле кнопки до 52 пикселя . Мы не будем использовать настройку Title Margin Top .

В разделе Button Style мы снова находим параметры Typography . Мы рассмотрели их ранее, и мы не будем использовать их для оформления нашей кнопки. Далее находится переключатель Normal/Hover . Какие бы настройки вы ни использовали, пока переключатель установлен в положение Обычный , они повлияют на кнопку, пока она неактивна. Переключение на Hover позволит вам настроить особое поведение кнопки при наведении мыши.

Оставаясь в режиме переключателя Normal , мы изменим цвет текста кнопки на темно-серый (#1e1e1e). Вы также можете изменить цвет фона , который мы оставим по умолчанию белым, и мы не будем использовать элементы управления Border . Конечно, вы можете установить границу для своей кнопки и контролировать ее Цвет , Ширина , Радиус (кривизна) и Заполнение . Мы хотим настроить Border нашей кнопки, введя 0 для всех ее значений, сделав кнопку прямоугольной и Padding . Для Padding мы сначала Unlink Значения и введем 14 для TOP , 40 для справа , 13 для нижнего и 40992 для налево .

9Версия кнопки 0003 Hover предлагает вам возможность установки цвета фона при наведении и меню Reveal Background . Вы можете использовать эти элементы управления для изменения внешнего вида и поведения кнопки, когда пользователь наводит на нее указатель мыши. Мы довольны нашей кнопкой, поэтому не будем использовать эти настройки.

Переходя к Button Icon Style , мы находим только три элемента управления: Размер значка , Цвет значка и Поле значка , а также переключатель Normal/Hover . Мы установим размер значка на 6 пикселей и цвет значка на темно-серый (#1e1e1e), чтобы он соответствовал тексту кнопки. Мы не будем менять Icon Margin .

В разделе переключателя Hover вы найдете те же элементы управления, а также меню Move Icon , которое управляет анимацией значка. Мы довольны стандартной анимацией Horizontal Short , но вы можете выбирать между различными анимациями или вообще без анимации. Мы также немного подкорректируем поля иконок, на отсоединение элемента управления Icon Margin и установка поля Top на 2 пикселя и Left на 10 пикселей .

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

Наконец, мы подошли к разделу Background Style . Он также имеет переключатель Normal/Hover и один элемент управления Overlay Color в представлении Normal . Это цвет фона элемента, если вы хотите одноцветное или прозрачное наложение для вашего баннера. Мы не будем использовать его в этом дизайне.

В представлении Hover мы находим Overlay Color и два дополнительных элемента управления: Background Image Hover и меню Background Image Hover Zoom Origin . Они влияют на поведение фонового изображения при наведении курсора мыши. Мы выберем None из меню Background Image Hover , что означает, что изображение не будет анимироваться — не будет увеличиваться, уменьшаться или перемещаться — при наведении мыши. Это также устранит меню Background Image Hover Zoom Origin .

Вот и готов красивый баннер за считанные минуты! И это только одна из практически бесчисленных настроек.

В заключение

Как видите, настроить баннер для вашего сайта WordPress легко и быстро, а если вы используете дополнения Qi для Elementor, это не будет стоить вам ни копейки.

Итак, если есть что-то, на что вы хотели бы обратить внимание своих посетителей, теперь вы знаете, как это сделать.

Создание баннера для вашего сайта с помощью pixlr.com

Поддержка > Дизайн и создание вашего веб-сайта > Дизайн вашего сайта

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

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

В этом руководстве мы расскажем, как вы можете использовать Pixlr.com, чтобы превратить логотип вашей компании в баннер, добавить текст, цвет и последние штрихи, чтобы ваш веб-сайт Create выглядел более профессионально. Обратите внимание, что это более подробное руководство, чтобы все шаги были понятны!

Прежде чем начать, перейдите по адресу: http://www.pixlr.com/

Сначала вам нужно настроить холст для работы:

1. Чтобы создать основу баннера, выберите » Откройте редактор Pixlr (расширенный) «, чтобы начать работу.
2. Появится всплывающее окно с некоторыми параметрами. Нажмите « Создать новый образ », чтобы открыть и начать новый проект.
3. Начните с того, что назовите мой баннер на веб-сайте как-нибудь подходящим. (Поэтому вам будет легко найти его позже.)
4. Затем в полях «Ширина» и «Высота» установите значения «1000» и «200». ?? Это если вы хотите использовать баннер этого размера на своем веб-сайте Create
   ?? (не забывайте, что вы также можете выбрать другой вариант размера баннера в своей учетной записи Create, который составляет «? 780 X 120?», если хотите. ).
5. Установите флажок « Прозрачный » и нажмите «ОК».

Установка баннера.

Теперь вам нужно добавить свой логотип. Сначала вам нужно будет открыть их:

1. Открывшаяся страница — это ваша рабочая зона на Pixlr.com.?
   
2. Чтобы открыть изображение, нажмите « File » в меню Pixlr.com, затем выберите « Open Image… ».
3. Затем вы можете найти изображение на своем компьютере и нажать « Открыть ».
4. Теперь у вас будет два разных окна. ??Один с вашим изображением или логотипом, а другой с вашим баннером.??

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

?
Ваш баннер и логотип открываются на pixlr, а также все отмеченные инструменты.

Следующим этапом является размещение вашего логотипа на холсте вашего баннера:

1. Вам нужно будет использовать «Инструмент выделения» на левой панели инструментов и перетащите рамку вокруг вашего логотипа/изображения, чтобы выделить Это.
2. Затем вы можете скопировать его, нажав « Редактировать » в меню Pixlr.com и выбрав « Копировать ».
3. Затем щелкните по полотну баннера, чтобы вывести его на передний план.
4. Нажмите « Редактировать » в верхнем меню и « Вставить », чтобы вставить свой логотип/изображение на баннер.

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

Чтобы изменить размер логотипа, проще всего использовать « Free Transform »:

1. Нажмите « Edit » в меню Pixlr. com, затем выберите « Free Transform » в раскрывающемся меню. ..
2. Появятся обычные белые квадраты в углах вашего изображения, чтобы вы могли перетаскивать их для изменения размера.
3. Измените размер изображения, чтобы оно соответствовало форме вашего баннера.

Вставка и изменение размера логотипа на баннере .

СОВЕТ: не забывайте удерживать клавишу Shift при перетаскивании, чтобы сохранить исходное соотношение сторон изображения и убедиться, что оно не искажается.

После изменения размера изображения вы можете изменить его положение.

Чтобы переместить его, вам нужно нажать «Инструмент перемещения» на левой панели инструментов, просто щелкните и перетащите, чтобы изменить положение.

 

Теперь у вас будет логотип на полотне баннера.

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

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

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

Для этого сначала нужно создать новый слой:

1. Щелкните значок «Новый слой» в окне «Слои» (он выглядит как перевернутая страница рядом со значком корзины).
2. Затем дважды щелкните слой, чтобы переименовать его (это помогает понять, для чего нужны все ваши слои) .
3. Перетащите новый слой в самый низ под слоем с логотипом. Это гарантирует, что логотип не будет скрыт.
4. Убедитесь, что этот слой выбран. Он будет выделен, чтобы обозначить это.

СОВЕТ. Использование слоев позволяет одновременно редактировать определенные области проекта, не затрагивая другие аспекты.

Добавление нового слоя.

Теперь вы можете выбрать цвет и заполнить фон.

Для точного соответствия вашему логотипу вы можете выбрать свой цвет. Для этого:

1. Во-первых, нажмите на « Paint Bucket Tool ».
2. Затем в нижней части левой панели инструментов вы можете установить цвет. Нажмите на поле « Установить основной цвет », чтобы выбрать цвет.
3. Откроется « Color Selecto r».
4. Вместо того, чтобы угадывать, какой цвет похож на ваш логотип, вы можете использовать « Инструмент выбора цвета », чтобы выбрать цвет из вашего логотипа.? Это автоматически присутствует, когда открыт « Color Selector ». Просто наведите указатель мыши на свой логотип и нажмите на нужный цвет, пока открыт «Выбор цвета».
5. Теперь цвет будет выбран в «Выборе цвета» , нажмите «ОК» для подтверждения.

Выбор цвета из логотипа с помощью палитры цветов.

Теперь, когда цвет выбран, заполните холст:

1. Нажмите «Изменить» в меню Pilxlr.com, а затем выберите «Выбрать все». Это выделит весь ваш холст
2. Затем щелкните » Paint Bucket Tool» в любом месте моего баннера, чтобы заполнить его.

Пример простого фонового баннера.

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

Для этого вам понадобится «Инструмент градиента»:

1. Щелкните «Инструмент градиента» на левой панели инструментов.
2. Откроется панель инструментов цветового градиента в верхней части рабочей области.
3. Здесь вы хотите выбрать два цвета для слияния.
4. Нажмите на цветное поле рядом со словом « Градиент ».
5. Это вызывает различные варианты градиента, которые вы можете использовать.
6. Возможно, вам понадобится двухцветный градиент. Это настройка по умолчанию, поэтому теперь вы можете просто выбрать два цвета, которые хотите объединить.
7. Итак, сначала вы можете щелкнуть левое маленькое поле, заполненное белым цветом, а затем щелкнуть поле под названием « цвет ».
8. Это снова откроет «Выбор цвета», вы можете выбрать цвет из своего логотипа или новый цвет.
9. Затем вы можете выбрать второй цвет, который вы хотите объединить с вашим первым цветом, щелкнув маленькое правое черное поле и выполнив те же действия, что и выше.

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

Выбор цвета для градиента.

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

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

Рисуем градиентную линию.

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

Чтобы добавить текст, выполните следующие действия:

1. Нажмите на « Type Tool », чтобы выбрать.
2. Нажмите на холст, где вы хотите добавить текст. (Вам не нужно слишком беспокоиться — вы можете использовать « инструмент перемещения » позже, чтобы изменить его положение).
3. Откроется окно для ввода текста. Здесь вы также можете выбрать шрифт.
5. Вы также можете выбрать цвет для текста здесь, нажмите на поле « Color », чтобы открыть « Color selector ».

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

Написание текста на вашем баннере.

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

Чтобы применить к тексту некоторые эффекты:

1. Сначала щелкните текстовый слой, затем щелкните его правой кнопкой мыши и выберите « Layer Styles » во всплывающем меню.
2. Откроется « Layer Styles 9».0004 ”окно.
3. Здесь есть много хороших вариантов, вы можете поиграть со всеми, чтобы увидеть, что выглядит красиво.
4. Два примечательных варианта — « Внешнее свечение » и « Тень ».

Чтобы применить внешнее свечение:

1. Нажмите и отметьте « внешнее свечение ».
2. Откроются настройки этого эффекта.
3. Во-первых, вы хотите выбрать цвет свечения, поэтому щелкните поле цвета, чтобы открыть « Выбор цвета ».
4. Здесь вы также можете уменьшить ползунок « Непрозрачность ”, чтобы сделать свечение более мягким.

Чтобы применить тень:

1. Нажмите и отметьте « Тень ».
2. Выберите свой цвет тени — для этого подойдет черный или темно-серый.
3. Опять же, вы можете уменьшить « Opacity », чтобы сделать его менее интенсивным.

Выбор текстовых эффектов с помощью стилей слоя.

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

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

Красиво оформленный баннер.

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

Чтобы сэкономить вам работу:

1. Нажмите « File » в меню Pixlr.
2. Нажмите « Сохранить » в раскрывающемся меню.
3. Это вызывает некоторые варианты сохранения.
4. Назовите свой баннер соответствующим образом, затем убедитесь, что в раскрывающемся меню «Формат» выбран «JPEG».

СОВЕТ. Если вы хотите, чтобы ваш фон на вашем веб-сайте Create был четким, вместо этого сохраните файл как «PNG» в «Формат».

Сохранение баннера.

No related posts.