Если у вас есть свой сайт, то рано или поздно вам понадобится создать gif баннер. Для каких целей мне нужен баннер, подумаете вы сначала. А все просто для рекламы (сайта, товаров, услуг, курсов, книг, мануалов, софта и др.).
Когда вы решите что будите рекламировать, вам нужно будет создать баннер и вот тогда возникнет вопрос, а как его создать. Есть два пути решения этой задачи. Это обратиться к фрилансерам или в студию которые предоставляют услуги по изготовлению баннеров для сайтов. Либо взять все в свои руки и создать баннер самостоятельно.
У этих путей решения есть плюсы и минусы. Если обращаться к разработчикам, то им нужно заплатить за их работу. Если разработкой заниматься самим, то нужны какие-то знания и информация по разработке баннеров.
Сегодня я поделюсь с вами минимальным набором знаний для создания простого gif баннера в фотошопе. Мы разработаем баннер размером 240х400px. Проработаем дизайн, композицию и в заключение создадим анимацию.
Видеоурок по изготовлению баннера для сайта
Я долго думал о написание статьи по изготовлению баннеров для сайтов, но все никак не выходило, так как хотелось написать информативную статью для большего понимания, а это большой объем материала.
Поразмыслив, я решил записать видеоурок по созданию gif баннера в фотошопе, в котором и раскрыть необходимую информацию. Которой будет достаточно для изготовления полноценного простого баннера для сайта. Урок получился на удивление небольшой, но емкий.
Приятного просмотра, надеюсь, вы узнаете из видеоурока что-то новое и интересное для себя.
Если возникнут вопросы, задавайте в комментариях.
Оформление текста и фона волнистыми линиями в фотошопе
Как сделать текст из картинки. Видеоурок по фотошопу
Как сделать иконку в фотошопе – процесс отрисовки (видеоурок)
Видеоурок по созданию Mock-up
Как создать Mockup в photoshop (видеоурок)
Сергей, привет! Большое спасибо за интересный урок! Обязательно буду пробовать, добавил страницу в закладки. Вроде не очень сложно… Баннер у тебя на сайте про разработку уникального дизайна очень симпатично смотрится)
Привет, Денис! Пожалуйста, по сути да, не особо сложно, если не делать сложную анимацию. Старался сделать простой урок. Да баннер в сайдбаре вроде простенький получился.
Скажешь тоже, простенький, просто отличный получился! Мне до такого как до луны) А сколько по времени у тебя вышло на его создание?
Да не особо много, может минут 30. Пока идею продумал, пока все собрал в картинку, сделал анимацию. Опыт большой, баннеров делал много раньше.
Опыт имеет большое значение, с этим не поспоришь
Денис, полностью с тобой согласен.
Сергей, спасибо за хороший урок, хотя для себя я нового ничего и не узнал, т.к. так же переделал кучу самых разных анимированных кнопок, баннеров сначала в Фотошопе, а потом уже и во флэш. Кстати, готовую анимацию можно и лучше всего предварительно ещё перед сохранением просмотреть в интернет-браузере — в том же окне, где выбираем формат, параметры цвета, прозрачности, оптимизации. Потому что скорость анимации при просмотре в самом Фотошопе очень часто отличается от реальной (может запаздывать, могут вылетать кадры или попросту тормозить).
Не знаю, быть может это старый урок или вы не знаете или не используете — горячие клавиши и их комбинации. Есть масса удобнейших функций в Фотошоп, которые повышают комфорт при работе и экономят массу времени.
К примеру, если слои не лежат изначально в папках, то их можно мгновенно выбирать при помощи инструмента указателя (V) зажав при этом CTRL (по типу Corel Draw с фигурами). Если же слои уже в папках, то данный способ поможет быстро отыскать эту самую папку. (с фигурами и векторными элементами (те же кнопки, например) проще — их ВСЕГДА можно отыскать, где бы они не лежали глубоко среди папок — инструмент «стрелка» A — просто кликаем по искомой фигуре/элементу).
Делать дубликат слоёв проще-простого — зажать ALT и перетянуть куда-либо элемент или слой.
Чтобы вставить введённый шрифт и поменять инструмент — зажмите CTRL и нажмите ENTER.
Ну и прочие другие трюки. Может кому-нибудь да пригодится, если вы знали об этом.
Владимир, спасибо за развернутый и интересный комментарий. Я просмотром при сохранение к сожалению практически никогда не пользуюсь, дело привычки видимо.
А горячие клавиши использую, правда не все, а частично. Вы наверное обратили внимание на клавиши из-за того что я не использую их в уроке? Если так, то это сделано намеренно для большей наглядности и понимания.
Сергей, спасибо за урок. Случайно попал на ваш сайт, по ссылке с youtybe канала. Искал информацию, как создать gif баннер в photoshop. Подписался на ваш youtybe канал и поставил лайк. Спасибо за интересную информацию.
спасибо за отличный урок, все ясно и понятно. Интересно получится ли работать в другом редакторе (ссылка удалена согласно правил) с вашими подсказками
Вера, данный материал ориентирован на создание баннера в граф. редакторе Adobe Photoshop. Но если вы понимаете принцип создания gif баннеров, то создать можно в любом другом редакторе. Главное условие возможность редактора создавать анимированные gif изображения.