Рисую баннеры. Конструктор бесплатных баннеров онлайн

Здравствуйте, дорогие друзья. Сегодня статья будет о том, как нарисовать баннер для сайта или блога. Рисовать мы будем самый простой анимированный баннер в программе Adobe Photoshop CS5. Ну что ж, давайте начнем. 1. Для начала зайдем в программу:) 2. Далее нажимаем на кнопку "Файл" и нажимаем на "Создать". После чего выбираете размер баннера и задаете имя файла. У меня размер будет 468x60 пикселей. 3. Теперь сделаем фон для нашего баннера. Для этого нажимаете вот на эту кнопку: 4. Теперь пишем текст. Для этого нажимаем вот на эту кнопку:

После чего вводим текст. Заметьте, что вверху есть панель текста: можно изменить шрифт, размер и цвет. После того как Вы написали текст сохраняете первую картинку (первую, так как баннер у нас анимированный, а значит будет несколько картинок). С сохранением не спешите. 5. Для того, чтобы сохранить картинку: нажимаете на кнопку "Файл" и после чего нажимаете на "Сохранить для Web и устройств...". Формат выбираете jpg и нажимаете на кнопку сохранить. Итак первая картинка у нас готова. У меня получилось вот так: 6. Далее создаете новый файл. Как это сделать я уже объяснял раннее. Выбираете такой же размер, как и для первой картинки. Вот, например, у меня было 468x60 пикселей и я также выбираю такой же размер. 7. Теперь точно также выбираете фон и вводите текст. Вообщем делать все то же самое, как и с первой картинкой. 8. Итак, после того, как Вы нарисовали вторую картинку, также сохраняете ее. Пока я сделал вот такую надпись:

9. Так теперь Вам нужно определиться, из скольких картинок будет состоят Ваш анимированный баннер. Лично у меня из 4-х. Если Вы хотите еще нарисовать несколько картинок, то я думаю суть Вам понятна. Выбираете фон, причем один для всех картинок, после чего вводите текст и сохраняете картинку. Причем сохраняете, как я уже говорил раннее, так. Сначала нажимаете на кнопку "Файл" и после нажимаете на "Сохранить для Web и устройств...". 10. Теепрь я Вам буду объяснять, как создавать этот самый баннер. Для начала откройте все эти картинки, которые Вы нарисовали. 11. Теперь Вы должны скопировать все картинки, которые нарисовали, в самую первую, нарисованную, картинку. Для этого нужно использовать комбинацию клавиш "ctrl + A" - выделить и "cthl + C" - скопировать. После чего вставляете выделенную картинку в самую первую картинку. Чтобы вставить картинку используете комбинацию клавиш: "ctrl + V". 12. После того, как Вы закончили вставлять все картинки в первую данным способом, нужно перейти к создании анимации. 13. Для этого нажимаете на кнопку "Окно" и на "Анимация". 14. Теперь появятся своеобразное окно кадров. Там будет пока один кадр. Нажимаете вот сюда:

После чего нажимаете на "Создать кадры из слоев". 15. Далее появятся все кадры. После чего, с помощью клавиши "Shift" копируете все изображения и выбираете время, через какое они будут показываться. Выглядит это так: 16. Все наш баннер создан! Теперь осталось сохранить его. Сохраняете также, как и картинки, только теперь вместо формата "jpg" выбираете формат "gif". Фух, ну все нарисовали:) Урок конечно получился очень длинным и Вам возможно уже надоело, но по другому никак. Я Вам старался объяснить все максимально понятно и доступно. Если у Вас возникли вопросы, задавайте их в комментариях. А у меня на этом все. Ах да, еще десерт. Смотрите на красную точку в течение 30 секунд и потом посмотрите на стену, быстро моргая.

Понравилось? Расскажите друзьям:) Всем пока! С уважением, Альберт Карамов .

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

Итак, для начала Вам нудно создать документ с размерами 500×300рх и залить его белым цветом.

Затем берем инструмент Rectangle Tool (Radius: 5 px), чтобы создать фигуру и залить её цветом #6d9e1e , как показано на моей картинке ниже.

После этого применяем настройки стиля слоя Gradient Overlay к этому слою.

Результат должен быть следующим:

Отлично, переходим к следующему шагу. Пришло время создать «заголовок» для нашего баннера. Нажимаем Ctrl+левую кнопку мышки на значке слоя в наборе слоев, чтобы выделить фигуру баннера, затем используем Rectangular Marquee Tool , чтобы отрезать часть выделения. Удерживая кнопку Alt , обрезаем нижнюю часть, как показано на моей картинке ниже. После этого оставляем эту часть белого цвета.

Снимаем выделение с помощью Ctrl+D , после чего меняем режим отображения слоя на Overlay и устанавливаем непрозрачность 20% .

Отлично, переходим к следующему шагу. Я хотел бы добавить графические элементы в наш заголовок. Переходим на сайт Google Images и ищем подходящую картинку, которую мы могли бы добавить. Не имеет значения, какая это будет картинка. Это зависит только от области на баннере, куда мы собираемся её добавить. Я буду использовать картинку будильника, которую Вы можете загрузить . Открываем эту картинку и копируем её на основной холст. После этого нажимаем Ctrl+T , чтобы немного уменьшить картинку.

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

Отлично, переходим к следующему шагу. Берем инструмент Horizontal Type Tool и пишем название заголовка.

На изображении выше я использовал шрифт Myraid Pro и белый цвет для шрифта. Этот шрифт является платным, но, если у Вас он не установлен, то Вы можете легко . После этого применяем настройки стиля слоя Drop Shadow к этому текстовому слою.

Смотрим результат ниже:

Отлично, мы закончили с заголовком. После этого я хотел бы добавить несколько элементов дизайна к нашему баннеру. Выбираем инструмент Custom Shape Tool и одну из стандартных фигур Photoshop, которую Вы можете увидеть на картинке ниже.

Добавляем две фигуры белого цвета на наш баннер.

Производим слияние двух фигур в один слой. Теперь нам нужно обрезать все части, которые находятся за пределами баннера. Как нам это сделать? Нажимаем Ctrl+левая кнопка мышки на значке слоя с баннером в наборе слоев, чтобы выделить баннер, а затем инвертировать выделение с помощью Ctrl+Shift+I . После нажимаем Delete

Снимаем выделение с помощью Ctrl+D . А теперь попробуем поиграть с режимом отображения слоя и непрозрачностью/заливкой. Я попробовал режим Soft Light с непрозрачностью 20% .

Теперь нам нужно очистить заголовок баннера от этих элементов. Используем инструмент Rectangular Marquee Tool , чтобы создать выделение, как на моей картинке ниже, и нажимаем Delete , чтобы очистить выделенную область.

Снова снимаем выделение с области с помощью Ctrl+D и добавляем ещё текст с помощью инструмента Horizontal Type Tool . Используем для текста снова белый цвет.

Пришло время добавить последнюю строку текста. Но перед этим я хочу добавить подложку. Используем инструмент Rounded Rectangle Tool (Radius: 2 px) и добавляем фигуру, используя цвет #69990d .

Теперь используем инструмент Horizontal Type Tool и добавляем текст на подложку.

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

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

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

• нарисовать самому;
• взять готовое изображение с другого сайта.

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

Зачем нужны баннеры?

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

Баннер сайта-партнера принесет вам процент за продажи или просто вознаграждение за переходы по ссылке. Это отличный вид на своем веб-ресурсе.

для сайта?

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

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

Размеры изображения

Конечно же, вы можете создать баннер с любыми размерами, а потом искать сайты, на которых его можно разместить. Однако большинство веб-ресурсов имеет общераспространённые стандартизированные размеры для рекламных изображений. Вот наиболее популярные из них: 728х90, 468х60, 336х280, 300х600, 300х250, 250х250, 234х60, 200х200, 180х150, 160х600, 125х125, 120х600, 120х240. Скорее всего, весь этот набор не будет доступен на каждом сайте, но в информации о партнёрской программе будут указаны конкретные требования к вашему баннеру.

Вид баннера

По способу реализации баннеры делятся на три категории:

Приложения для создания баннеров

Первое преимущество конструктора баннеров в том, что он доступен онлайн и не требует установки дополнительного программного обеспечения. Как видно на скрине, сам сервис небольшой и не перегружен ссылками меню, кнопками управления и различных настроек. На главной странице их всего 4. Нам потребуется раздел Мои проекты и Вдохновение (Inspiration). После авторизации через Фейсбук или обычной регистрации (емейл + пароль) мы можем приступить к созданию баннера, постера или пригласительного.

Как сделать баннер

В сервисе есть все необходимые инструменты чтобы сделать баннер быстро и качественно и скачать в нужном нам формате. Доступны несколько форматов изображений готовых баннеров:JPG, PNG и PDF.

Чтобы сделать баннер, достаточно просто начать. Перейдите на сайт конструктора.

1. Мы можем выбрать готовый дизайн из предложенной библиотеки готовых варантов. По сути, если нас устраивает картинка и оформление, мы можем только заменить текст на свой;
2. Либо, можно начать создавать с чистого листа, задав нужный размер или выбрав из предложенных форматов (для Фейсбук, Инстаграмм, Постер и др) и загрузив в сервис свою картинку.

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

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

Готовый проект будет храниться в вашем аккаунте и вы сможете вернуться к редактированию когда вам потребуется. Вы сможете скачать готовый баннер или постер в любое время в формате изображения или PDF. Если у вас что-то не будет получаться, посмотрите ниже видео (звук тихий, увы так получилось), где мы попробуем сделать баннер, какой-нибудь незатейливый и скачаем его.

Для работы с конструктором лучше использовать браузер Хром, так как я заметил, что Мозиле при сохранении, не вписывается расширение.png — это решается простым переименовываением файла и добавлением нужного (в котором скачивали) точка и название (png или jpg). Вроде все.

2 голоса

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

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

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

Приступим?

Сервис для создания баннеров

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

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

Ну что ж, давайте начнем.

Первое, что вам нужно сделать, зайти на сайт Bannerovich и перейти в конструктор баннеров. Будьте внимательны, не редактор, а именно конструктор.

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

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

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

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

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

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

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

Теперь можете добавить текст. Здесь тоже нет ничего сложного.

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

Теперь вам нужно щелкнуть на «Получить баннер».

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

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

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

Чуть ниже появится вам проект и html код, который будет нужно добавить на сайт. Скопируйте его.

Как добавить баннер на все страницы

Откройте и зайдите во вкладку «Внешний вид – Виджеты».

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

Кстати, куда именно вы поместите этот виджет, там он и расположится визуально. Если над «Поиском», как я, то картинка встанет над этой панелью. Если под «Рубрики», то… ну вы поняли.

Вставьте скопированный текст в «Содержимое» и поменяйте информацию в кавычках после «a href» здесь должна быть ссылку, куда будет вести ваш баннер. Измените также текст в кавычках после title. Это добавит вашу подсказку. Сейчас она будет выглядеть, как «Баннер сделан на Баннерович».

Вот так у меня получилось в итоге, после всех изменений.

На всех страницах сайта теперь у меня появился этот рисунок.

Добавляем баннер в записи

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

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

Готово. Вот так мой баннер.

Надеюсь, вам удалось все сделать самому и проблем при регистрации не возникло. Если что – оставляйте свои комментарии к этой статье. Будем разбираться вместе. Кстати, в моем блоге вы можете прочитать еще для сайта. Они будут чуть менее красивые, зато исключительно html.

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

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

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

До новых встреч и удачи в ваших начинаниях.