Разработка сайта по вашему дизайну. Доработка, поддержка, html-верстка сайтов.

Как создать gif баннер в фотошопе (видеоурок)

/ Сергей Нуйкин / Уроки по фотошопу

Если у вас есть свой сайт, то рано или поздно вам понадобится создать gif баннер. Для каких целей мне нужен баннер,  подумаете вы сначала. А все просто для рекламы (сайта, товаров, услуг, курсов, книг, мануалов, софта и др.).

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

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

Сегодня я поделюсь с вами минимальным набором знаний для создания простого gif баннера в фотошопе. Мы разработаем баннер размером 240х400px. Проработаем дизайн, композицию и в заключение создадим анимацию.создание gif баннера в фотошопе

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

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

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

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

Если возникнут вопросы, задавайте в комментариях.

Понравилась статья?
Подпишитесь на обновления:
Поделитесь материалом с друзьями:

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

Комментарии к статье:
    • Денис

      Сергей, привет! Большое спасибо за интересный урок! Обязательно буду пробовать, добавил страницу в закладки. Вроде не очень сложно… Баннер у тебя на сайте про разработку уникального дизайна очень симпатично смотрится)

    • Сергей Нуйкин

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

    • Денис

      Скажешь тоже, простенький, просто отличный получился! Мне до такого как до луны) А сколько по времени у тебя вышло на его создание?

    • Сергей Нуйкин

      Да не особо много, может минут 30. Пока идею продумал, пока все собрал в картинку, сделал анимацию. Опыт большой, баннеров делал много раньше.

    • Денис

      Опыт имеет большое значение, с этим не поспоришь :smile:

    • Сергей Нуйкин

      Денис, полностью с тобой согласен.

    • Владимир

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

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

      К примеру, если слои не лежат изначально в папках, то их можно мгновенно выбирать при помощи инструмента указателя (V) зажав при этом CTRL (по типу Corel Draw с фигурами). Если же слои уже в папках, то данный способ поможет быстро отыскать эту самую папку. (с фигурами и векторными элементами (те же кнопки, например) проще — их ВСЕГДА можно отыскать, где бы они не лежали глубоко среди папок — инструмент «стрелка» A — просто кликаем по искомой фигуре/элементу).
      Делать дубликат слоёв проще-простого — зажать ALT и перетянуть куда-либо элемент или слой.
      Чтобы вставить введённый шрифт и поменять инструмент — зажмите CTRL и нажмите ENTER.
      Ну и прочие другие трюки. Может кому-нибудь да пригодится, если вы знали об этом.

    • Сергей Нуйкин

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

    • Андрей

      Сергей, спасибо за урок. Случайно попал на ваш сайт, по ссылке с youtybe канала. Искал информацию, как создать gif баннер в photoshop. Подписался на ваш youtybe канал и поставил лайк. Спасибо за интересную информацию.

    • Вера

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

    • Сергей Нуйкин

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

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности.