Всем привет. В сегодняшнем уроке коснемся темы дизайна и рассмотрим практический пример из которого вы узнаете, как сделать баннер для сайта с помощью графического редактора GIMP.
В одном из уроков я уже демонстрировал процесс создания анимационного баннера и говорил, что у баннеров есть ряд стандартных размеров, которых нужно придерживаться.
Но есть маленькая проблема для вебмастеров и счастье для посетителей сайта. Баннеры стандартных размеров легко блокируются специальными программами и всевозможными дополнениями к браузеру. Надоела назойливая реклама — поставить блокировщик рекламы!
С одной стороны можно понять простых пользователей интернета. Реклама реально достала, но с обратной стороны находится вебмастер, который зарабатывает на этом свои кровные.
Какие же есть выходы? Если вы являетесь владельцем сайта и рекламируете свои услуги и товары, то реальный пример обойти блокировщик рекламы – это делать баннеры произвольных размеров. Например, есть размер стандартного баннера 468×60, как ниже:
Как сделать баннер быстро без фотошопа. Программа для создания графического дизайна Canva
А теперь вопрос на засыпку. Увидели ли вы мой баннер?
Что же можно изменить в баннере? Можно чуть-чуть увеличить его высоту, например, сделать его 468×62. Реально? Давайте попробуем, получится ли в итоге у нас обойти блокировщик рекламы ).
Как сделать баннер для сайта
Шаг 1. Открываем редактор GIMP и через меню «Файл – Создать» создаем новое изображение размером 468×62.
Шаг 2. Далее нам нужно подобрать цветовую гамму для баннера. Это лучше сделать по цветовому кругу или подсмотреть уже существующие баннеры, которые можно встретить сети.
Нашли подходящий по цветовой гамме баннер? Тогда делаем скриншот экрана и загружаем его тоже в GIMP. Кстати, скриншоты я делаю с помощью программы Lightshot, о которой запишу в ближайшее время небольшой урок. Не пропустите.
После этого, с помощью инструмента «Пипетка», мы можем взять образцы цвета и использовать их для вновь создаваемого баннера.
Шаг 3. Допустим, что с цветовой гаммой мы определились. Теперь нам нужно подобрать фон для баннера. Для этого переходим на сайт subtlepatterns.com . Подбираем из представленных образцов желаемый фон и скачиваем его на свой компьютер.
После этого, разархивировав архив, загружаем текстуру в редактор GIMP.
854
Шаг 4. Теперь нам нужно перенести текстуру на ранее созданный документ. Для этого выделяем открытую текстуру через меню «Выделение — Выделить все» или нажав Ctrl+A. Далее копируем, нажав Ctrl+C и переходим на вкладку с ранее открытым проектом. После этого переключаемся на вкладку «Текстуры»
И теперь самый ВАЖНЫЙ момент. Кликаем в списке текстур по самому первому квадратику и зажав левую кнопку мыши переносим ее на рабочую область.
Должно получиться так
Шаг 5. Теперь, с помощью инструмента «Текст» создаем текстовую надпись. Выбираем шрифт – Pollock, устанавливаем размер — 22px и цвет — c31900. Далее зажимаем кнопку «Alt» и перетаскиваем текст ближе к левой стороне. Шрифт можете скачать тут. Как устанавливать шрифты в GIMP смотрите в этом уроке.
Шаг 6. Теперь, когда текст создан, давайте добавим к нему белую обводку. Для этого кликаем по слою с текстом правой кнопкой мыши и выбираем пункт «Альфа канал в выделение». После этого идем в главное меню и жмем пункт «Выделение – Увеличить». Задаем настройку 1px.
Сделали? Тогда кликаем на иконку создания нового слоя и далее выполняем команду «Правка-Залить цветом фона». Получится такая картина, если конечно цвет фона у вас был белый. Поэтом проверьте это заранее.
Что теперь? Опустим полученный слой в стопке слоев ниже нашего ранее созданного текстового слоя. Для этого кликнем на пиктограмму «Опустить слой» и отключаем выделение через меню «Выделение — Снять». В итоге должно получиться так:
Шаг 7. На следующем шаге мы нарисуем небольшую кнопку. Под нее создаем новый слой, далее выбираем инструмент «Прямоугольное выделение» (в настройках указав закругление углов) и рисуем область примерно следующих размеров.
Далее, закрашиваем созданное выделение красным цветом (c31900), тем самым цветом, которым мы писали текст ранее.
Шаг 7. Осталось добавить текст «призыв к действию» на кнопку. Для этого выбираем инструмент «Текст» (шрифт -Pollock ,размер -22 , цвет — белый ).
Вот и все. Осталось сохранить полученный баннер. Для этого идем в меню «Фаил – Экспорт» и в списке «Выберете тип файла» выбираем формат JPG или PNG.
Вот такой у нас должен получиться в итоге баннер.
Надеюсь вам понравился мой новый урок? Теперь вы знаете друзья, что сделать баннер для сайта можно и без фотошопа Нужен только редактор GIMP!
Спасибо за внимание и до новых встреч на GimpArt.Org
С уважением, Антон Лапшин.
Если вам понравился урок или статья, то пожалуйста поддержите меня нажав на социальные кнопочки ниже. Тем самым вы поделитесь информацией о блоге GimpArt.Org со своими друзьями в социальных сетях. Спасибо!
Автор блога GimpArt.Org — Антон Лапшин
За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз.
Источник: www.gimpart.org
Как создать баннер в программе Photoshop за 5 минут
Со временем, когда сайт набирает обороты, у него появляется неплохая посещаемость и растут показатели ТИЦ и PR, тогда веб-мастера начинает задумываться о рекламе своего проекта.
В сети самый распространенный вид рекламы — это баннерная реклама. Поэтому сегодня мы узнаем о том, как сделать баннер для сайта в фотошопе, тем самым сэкономив средства на заказ его у фрилансеров.
Кто-то скажет, что такими делами должен заниматься профессионал и незачем новичкам тратить свое время, лучше статью новую написать.
Конечно можно заплатить денежку дядечке и он сделает красивый баннер к любому сайту. Но как у большинства получается на начальном этапе нет этих средств.
Поэтому я предлагаю сделать баннер для сайта в программе Photoshop самостоятельно и самое главное бесплатно. Когда вы сделаете хоть один баннер, тогда поймете что нет в этом ничего сверх сложного. Это тоже самое, что сделать красивую шапку для сайта, про которую я писал в своих предыдущих постах.
Как сделать баннер в Фотошопе за 5 минут
Начнем с того, что нам понадобиться программа, в которой можно работать с рисунками, самой лучшей по сей день была и остается Фотошоп.
Версия Photoshop не сильно имеет большое значение, я использую CS6, возможно пока вы будите читать этот пост выйдет другая, но принцип все равно останется один и тот же.
Далее надо определиться с размером будущего баннера, в основном используют размеры 468×60, 240×400. Мы будем делать баннер размером 468×60, для этого открываем «Меню» — «Файл» — «Создать» и выставляем размеры по ширине 468, по высоте 60.
Обратите внимание что слева расположена панель инструментов, где вы выбираете цвет фона баннера. С помощью заливки заливаем область нужным цветом.
Теперь нам следует найти картинку и разместить ее на баннере. Картинка должна привлекать внимание к вашему баннеру. Она должна цеплять посетителя. Представьте себя на их месте, что бы вас привлекло и вам хотелось бы на него кликнуть.
Загружаем понравившуюся картинку в фотошоп и устанавливаем необходимый размер, который будет подходить по габаритам. «Меню» — «Изображение» — «Размер изображения».
В том окне, которое откроется задаете размеры и поставьте птичку в окне «сохранять пропорции». Бывает что у картинки есть свой фон, тогда вам нужно вырезать ее и сохранить с прозрачным фоном.
После всего проделанного перетаскиваем картинку на будущий баннер, а уже там поместим ее в нужном для нас месте и объединяем ее с фоном.
У вас должно было получиться два слоя, которые выделяются во вкладке «Слои», затем нажимает правую кнопку мыши и выбираем действие «Объединить видимые».
Одна заготовка у нас есть, теперь надо создать дубликат ее, в этой же вкладке выделяете заготовку и нажимаете «Создать дубликат слоя».
Теперь осталось сделать какую-нибудь надпись в фотошопе на баннере. Выбираем в панели инструмент «Текст» и пишем нужную фразу.
Здесь тоже постарайтесь проявить оригинальность, придумайте то что привлечет людей. Теперь объединяем копию основного слоя с текстом, через все туже вкладку «Слои».
После всех процедур должно получится два шаблона:
Далее нам надо оживить наш баннер. Для этого вызываем шкалу времени, в меню жмем «Окно» — «Шкала времени». Теперь надо с помощью вкладки «Слои» скопировать две наши заготовки. Для этого используем элемент, который я выделил на фото стрелочкой.
На последнем шаге останется только указать интервал отображения каждого слоя и сохранить полученный результат в формате GIF, а то ничего работать не будет.
Все ваш баннер готов, теперь закачиваете его к себе на хостинг. Как видите, не так уж и сложно сделать баннер для сайта в программе Фотошоп, как может показаться.
Посмотрите что у меня получилось в итоге за 5 минут простой, а главное интересной работы.
Если вы все сделали правильно, тогда потраченное время на создание баннера окупится и на сайте будет только расти приток посетителей.
А если кто-то спросит, как сделать баннер для сайта в фотошоп, то вы уверенно сможете дать правильный ответ. Пока!
Источник: seoslim.ru
Как сделать баннер
Для работы в интернете очень часто требуются познания в области дизайна. Легче приходится тем, кто с фотошопом на “Ты”. А что же делать остальным? Правильный ответ – учиться. Но обучиться искусству работы с фотошопом за один день не получится, а картинки и изображения нужны сегодня.
Есть еще вариант – заказать эту работу профессионалу. Но профессионалу надо давать четкие указания, что должно получиться в итоге. Чтобы узнать, какое должно быть техзадание для дизайнера, первое время придется самому ненадолго влезть в эту незнакомую область.
Как сделать баннер самостоятельно?
Знаю, что в интернете есть массам программ и сервисов, которые смогут решить эту задачу. Из обилия этих ресурсов я выбрала одну, достойную моего начального уровня. Она неплохо выручила меня в первое время и помогла сориентироваться и определить, какие изображения на своем сайте мне нужны.
Этот онлайн-сервис называется artbanner.com. Обязательно занесите этот ресурс в закладки, так как помощь профессионалов-дизайнеров всегда востребована. Если у вас нет знакомого дизайнера, то одна рекомендация у вас уже есть. С помощью этого ресурса можно:
1. Самостоятельно изготовить баннер
2. Редактировать фото
3. Изготовить фавикон
4. Заказать баннер
Так как меня совсем недавно интересовал только один вопрос: где найти легкую и доступную для меня программу, в которой я смогу разобраться, думаю, что мой совет поможет новичкам быстро и несложно сделать изображение.
Если кто-то не знает, что такое баннер в интернете, то читайте определение: это рекламный или информационный носитель графического вида. Эти носители могут быть совершенно разными: статичными и анимированными, с применением различных эффектов и без. Все будет зависеть от того, на какую аудиторию банеры рассчитаны, и каким задачам отвечают.
Давайте посмотрим, как можно пользоваться разделом “Генератор баннеров.” Первое, что я увидела – это очень доступно написанные правила, которым надо следовать при работе с онлайн-программой. Ниже находится сам генератор.
Как видно, в программе есть несколько разделов: Макет, Текст, Рамка, Эффекты, Сохранить. Самые первые действия мы будем делать в разделе “Макет”. Выберем размер баннера. Например, нам необходимо сделать заголовок для своего блога. В этом случае подойдет размер 728 х 90. Отмечаем и переходим к выбору фона.
Нетрудно догадаться, что нажав на квадратик с цветом, можно выбрать интересующий вас цвет. Также возможно для фона загрузить свою картинку с компьютера.
Далее переходим во вкладку Текст.
Если вам необходимо изображение с текстом в 3 строки, значит надо будет работать в трех полях. В первом пишем заголовок, например Копилка советов. Шрифт мы тоже можем сделать разного цвета. Нажимая на слово Пример в картинке, мы получаем образцы шрифта, где можно выбрать тот, который нам понравился.
Вариантов немного, но согласитесь, что выручить они все-таки могут. Далее выбираем размер шрифта, здесь придется поэкспериментировать, исходя из размеров вашего баннера – есть где разгуляться, или нет. Также можно поиграть с расположением букв, с тенями, и тоже самое проделать в двух других полях, то есть строках вашего баннера.
В разделе Рамка можно установить размер и цвет будущей рамки. Если рамка не нужна – поставьте в правом поле Размер рамки – значение 0.
В разделе эффекты можно воспользоваться предложенными эффектами. После всех действий можно смело нажать кнопку “Обновить”.
Если вам не понравился полученный результат, можно поочередно открывать разделы и менять нужные значения. Займет время и подбор шрифта, и выбор подходящего размера букв и фона. В разделе “Текст” расположение строк можно регулировать бегунками, находящимися слева страницы и в самом низу.
Только после того, как вам понравилось то, что вы нарисовали, можно переходить в раздел Сохранить, где вам предложат сгенерировать HTML-код и URL-ссылку.
Отмечайте, что для вас важно и нажимайте “Сохранить баннер” и “Сгенерировать код”.
Вот такой вариант получился в итоге. Думаю, что для какого-то временного варианта вполне подойдет. А полученный в этой замечательной программе HTML-код очень пригодится в дальнейшей работе над сайтом или блогом. Установив код в виджет, мы можем проинформировать посетителей о новой статье или важных новостях и событиях.
Также на странице “Конструктор баннеров” artbanner.com.ua/konstruktor-bannerov можно создать GIF-баннер. Следуя инструкциям, сделать его несложно. Привлечение внимания посетителей – обеспечено.
В этой программе можно сгенерировать HTML-код уже имеющихся у вас изображений, которые вы хотите сделать заголовками или обложками своих книг.
В любом случае, у вас, дорогие читатели, появился еще один ресурс, где вы самостоятельно и бесплатно, без помощи специалистов, можете сделать баннер, главной задачей которого является вызвать положительные эмоции у посетителей.
Вот так, шаг за шагом, работа в Интернете учит нас азам разных профессий. Конечно, профессионалом стать непросто, но и дилетанты, учась на успешных примерах, могут овладеть необходимыми первичными навыками для ведения самостоятельной работы. Овладевайте знаниями, будьте успешны и эффективны в своих делах!
Со временем у вас будет получаться не хуже, чем у этого мальчика, который лихо припарковывает свой автомобиль.
Источник: kopilkasovetov.com