Как сделать свой баннер для сайта? (полный курс)

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

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

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

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

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

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

1)Открываем фотошоп

2)Находим фон для баннера например картинка с морем…я беру эту!

(Для увеличения картинке щелкните по ней левой кнопкой мыши)

баннер

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

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

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

И так обводим место на картинке под фон баннера нажимаем CTR+C потом создаем новый лист по умолчанию ширина и высота будет указываться обведенной картинки поэтому создаем по той что будет задана по умолчанию, после на новом листе вставляем копированную область клавишами CTR+V

фотошоп,дизайнТак теперь фон есть можно добавить в него текстуры, я покажу вам как придать текстуру картинке…

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

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

Пример моей текстуры:

текстура пескаИ так открываем картинку в фотошоп и нажимаем CTR+SHIFT+U картинка должна полностью обесцветиться

фотошоп

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

А далее просто изменить режим наложения на перекрытие и все.

фотошоп,вебдизайнер

Вот результат.

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

Выбираем этот инструмент и пишем все что хотим.

я написал seo-блог!

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

И так пишем текст потом открываем стиль слоя текста о том как это сделать, показано на следующей картинке.

дизайн,баннер

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

Результат баннера:

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

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

Теперь белым цветом текста напишите любое слово к примеру огонь.

Потом нажмите в верхнем меню Изображение->Повернуть холст->Повернуть по часовой стрелки.

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

Заходим в верхнем меню Фильтр-Стилизация-Ветер и применяем его 2 раза к слою.

Получаем такой эффект:

Теперь поворачиваем холст обратно Изображение->Повернуть холст->Против часовой стрелки.

Текст будет горизонтальным пора применить к нему фильтр Рябь

Фильтр-Искажение-Рядь в итоге мы получим вот такой текст.

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

И выбираем свойство внешнее свечение устанавливаем цвет красным и получаем огонь.

огонь

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

Если вам понравился урок и вы хотите больше узнать о возможностях фотошопа и научиться делать разные эффекты ведь это были только основы ;) то голосуйте в комметариях вообщем жду Критики :D

Заработай на своих сайтах!
Чтобы первыми получать все полезные статьи блога советую подписаться на RSS!
rss
Введите свой e-mail:

12 комментариев для “Как сделать свой баннер для сайта? (полный курс)”

  1. Lanqu

    Реально основы)) Было бы отличным, если бы ты замутил еще какие-нибудь эффекты и рассказал как их делать.

  2. BloggerMen

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

  3. admin

    да но как правило у новичков нету средств на это, поэтому приходиться все делать самому

  4. admin

    можно было но я не буду этого делать потому что, читателей блога пока что мало, да и уходит время на написание такого раза в 3 больше…и блог нацелен на сео тематику это был просто один из постов посмотрим дальше будет видно!

  5. BloggerMen

    В этом вы правы.

  6. zemlemer-67

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

  7. DNB Fan

    Тут я думаю одним уроком не обойтись. Полёт фантазии безграничен

  8. Симпатяжка

    Добавлю от себя: научившись делать хорошие красивые баннеры (или «шапки») вы легко можете продавать свой талант на заказ. Заделаться таким себе веб-дизайнером.
    Если я не ошибаюсь, то на бирже шапка сайта стоит от 10 долларов.

  9. ihvar

    Неплохо бы еще научиться баннеры на флэше делать )

  10. Оксана

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

  11. Ольга

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

  12. Святослав

    Да….Банер,как и граватар, пригодится…

Оставить комментарий к статье “Как сделать свой баннер для сайта? (полный курс)”

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

rss
Введите свой e-mail: