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


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

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

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



≡  1 Июль 2015   ·  Рубрика:   

Время чтения статьи: примерно 6-8 минут.

Сделать баннер онлайн

Как самостоятельно создать баннер онлайн

Здравствуйте друзья!

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

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

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

Содержание статьи

Создание баннера онлайн на бесплатных сервисах

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

Вот они:

1) bannerovich

2) Banner Fans

3) printdesign

4) artbanner

5) banner-s

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

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

После тщательного отбора, мой выбор пал на онлайн сервис Bannerovich и именно ему я посвящаю свою статью!

Как сделать баннер онлайн, в сервисе Bannerovich.ru

Как только вы зайдёте на сайт , увидите справа голубую кнопку «Создать баннер». Жмёте на неё и попадаете сюда:

Создать баннер

Здесь всё интуитивно понятно. Вверху пишите название баннера, а ниже выбираете его размеры, в зависимости от его будущего месторасположения на блоге. Сейчас я буду создавать баннер для сайтбара, значит мне нужно выбрать ширину сайтбара — 240 px и высоту — 400 px. Нажимаете на «Создатъ баннер» и попадаете сюда:

редактирование баннера

Вот сейчас всё только начинается.

Первым делом можете создать рамку (границу) для баннера. Нажимаете на кнопку «Другие элементы» ⇒ «Редактировать границу» и у вас откроется окошко, в котором можно выбрать цвет рамки и её ширину.

Редактирование границы баннера

После этого нажимаете на «Закрыть окно» и идёте дальше.

Загрузить фон — если нажмёте на эту кнопку, то сможете загрузить собственный, заранее подготовленный фон для баннера. Такой фон можете создать самостоятельно через специальные программные редакторы или скачать с интернета. Лично я покажу вам как воспользоваться разными фонами, которые предлагает сервис bannerovich.ru

Добавить фон — нажимаете на эту кнопку и у вас появится большой выбор интересных фонов.

Загрузить фон для баннера

Как видите, выбор просто огромный. Для примера я выбрал фон, который называется «Лёгкая линия»

Кстати, почитайте эту статью тоже:   Маленький, да удаленький! Как уменьшить размер и вес картинки в 30 раз, не теряя её качества

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

Фон и рамка баннера

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

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

Добавить изображение в баннер

Из всеx изображений я выбрал картинку под названием «Хорошая работа» Так это выглядит:

Картинка в баннере

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

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

Добавить кнопку — нажимаете на этот пункт и в баннере добавится красивая кнопка:

Добавить кнопку в баннер

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

Редактирование кнопки

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

Внешний вид кнопки будет зависеть только от от вашей фантазии. Лично я оставлю её в таком виде, в каком она уже есть. Мне и так нравится.

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

дополнительные картинки сервиса bannerovich.ru

Здесь также достаточно большой выбор картинок. Давайте я добавлю в мой баннер две 3D стрелочки. Получилось так:

Добавить стрелки

Далее я нажал снова кнопку «Изображение» и выбрал другую картинку под названием «Большая кнопка» Уменьшил её по желаемому мной размеру и вот что получилось:

Выбор изображения для баннера

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

Редактирование текста bannerovich.ru

Здесь вы может редактировать ваш текст, как только пожелаете.

И так, прошу любить и жаловать мой новый баннер:

Баннер, сделаный через сервис bannerovich.ru

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

Как получить и скачать баннер с сайта bannerovich.ru

После того, как ваш баннер будет готов, вы должны нажать на кнопку «Получить баннер» и у вас откроется такое окошко:

Скачать баннер с сервиса bannerovich.ru

Здесь в верхней строчке пишете свой e-mail, а в нижней вставляете ссылку на ту страницу, которая будет открываться при клике на баннер. Далее нажимаете на жёлтую кнопку «Получить баннер» и он сразу же начнёт создаваться сервисом bannerovich.ru

Кстати, почитайте эту статью тоже:   Проверить скорость загрузки сайта. Обзор 13 популярных сервисов

Создание баннера онлайн

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

Мой кабинет в сервисе bannerovich

Все личные данные (пароль и имя пользователя) вы получите по своей электронной почте.

После того, как зайдёте в свой кабинет, увидите ваш новенький баннер, а под ним будет уже готовый html код, который нужно будет установить в сайтбар сайта.

html код для баннера

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

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

Сохранить картинку как

Далее заливаете картинку на ваш сайт через FTP клиент или через административную панель.

Как установить баннер на сайт

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

Далее пишете заголовок для баннера и в окошке вставляете этот код:

<a href="ссылка которая ведёт на желаемую страницу при клике на баннер"> <img src="Ссылка на картинку баннера" title="Название баннера" border="0" style="margin: 5px; border: 0; padding: 0;" /></a>

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

Например, у меня это будет выглядеть так:

Код html для вставки баннера в сайтбар сайта

Чтобы узнать ссылку на картинку баннера, вам нужно зайти в «Медиафайлы», выбрать нужную картинку и нажать на неё и слева увидите ссылку на файл.

Ссылка на файл

Вот её и вставляете в соответствующее место в коде.

Ну вот в принципе и всё.

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

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

А я с вами прощаюсь и до новых скорых встреч. Пока-пока.

С уважением, Игорь Черноморец

Почитайте также другие, не менее интересные статьи:


Источник: http://igorchernomoretz.com/kak-sdelat-samomu-banner-online.html


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


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

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

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

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

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

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

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

Читать топ новости: