Как сделать баннер в фотошопе cs3. Лёгкое создание баннера в Photoshop

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

Что такое баннерная реклама

Баннерная реклама - графическое изображение рекламного характера. Рекламные щиты на улицах, растяжки над магазинами, картинки на сайтах в Интернете, при клике на которые переходишь на другой сайт - все это баннеры. Уличные баннеры появились давно, когда еще не было даже радио. А вот в Интернет они просочились в 1994 году и быстро начали набирать популярность. На сегодняшний день ни один бизнес не обходится без рекламы, и в частности рекламы в Интернете, а баннеры — это один из весьма эффективных инструментов в деле продвижения товаров и услуг.

Какие виды баннеров бывают

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

Виды интернет-баннеров по способам реализации

Перед тем как узнать, как создать баннер в "Фотошопе", мы познакомимся с разновидностями способов их реализации.

• Статичные. Простейший баннер - картинка с рекламным содержимым. Размер файла небольшой, поэтому быстро загружается даже при медленном Интернете. Легко создать баннер как в "Фотошопе", так и в других графических редакторах.
• Анимированные. Весят они в несколько раз больше статичных, в связи с этим загружаются медленнее, но зато больше бросаются в глаза пользователю. Такой рекламный баннер создать в "Фотошопе" уже гораздо сложнее.
• Ричтекст (Rich text). Баннер, похожий на информационную статью с графической составляющей.
• HTML5, JS, флеш-анимация. Это уже баннеры, которые являются интерактивными мини-программами. Например: различные тесты, примитивные игры, опросники. Создать такой рекламный баннер в "Фотошопе", как вы понимаете, никак не получится.

Определение размеров баннера

Прежде чем узнать, как создать макет баннера в "Фотошопе", необходимо определиться с его размерами. Стандартом считается размер 100 х 100 пикселей. Самый часто используемый вариант - 468 х 60 и 234 х 60. Первая цифра определяет ширину, а вторая длину. Так что вертикальный баннер будет иметь размер, например, 60 х 468 пикселей. Поэтому важно знать, где вы будете размещать свой баннер.

С чего начать

Вот мы узнали, что можно баннер создать в "Фотошопе" как больших размеров, так и миниатюрных. Но спешить не стоит и прежде, чем открыть программу, чтобы создать баннер, как и в любом творческом деле, надо прикинуть дизайн и содержимое. Мы советуем это сделать при помощи бумаги и карандашей. Сначала чертим прямоугольник, учитывая пропорции будущего баннера. Придумываем необходимый рекламный текст. Затем определяем, каким будет фон. Необходимости в рисовании всего этого нет, достаточно просто задуманное написать словами. Далее уже можно прикидывать, какие картинки можно вставить и где их стильно разместить, в том числе и возможный фирменный логотип. Скорее всего, получившееся на бумаге будет выглядеть как схематический план. Финальная стадия подготовки: ищем в Интернете картинки, подходящие под вашу идею. Важно помнить об авторских правах, поэтому подбираем картинки на бесплатных ресурсах.

Делаем свой рекламный баннер

Итак, ваш макет готов. Теперь приступим непосредственно к основному процессу.

В этой статье мы сделаем статичный горизонтальный рекламный баннер размером 468 × 60 пикселей и текстом «Распродажа iPhone 5. Не упусти шанс» в программе "Фотошоп" версии CS6.

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

Урок о том, как создать анимированный баннер в программе Photoshop для новичков, не владеющих инструментами редактора. Достаточно уметь открывать в нем графические файлы. Мне, как раз, необходимо создать реальный баннер партнерского хостинга. Его размер будет 468 х 60 px — это один из стандартных размеров (готовый баннер внизу страницы).

1. В основном меню программы жмем «Файл — Создать» (Ctrl+N):

В окне необходимо задать Имя, размеры и выбрать Прозрачный фон — остальные параметры трогать не надо, жмем OK. Если у вас другая версия Photoshop — не страшно, все действия и инструменты будут такие же. На пустой баннер я поместил изображение серверов, а вам нужно открыть своё: «Файл — Открыть» (Ctrl+O).

Высота нашего баннера 60 px, подгоните по размеру своё: «Изображение — Размер изображения» (Alt+Ctrl+I).

2. Выделите его инструментом «Прямоугольная область» (1), или его часть, затем «Редактирование — Скопировать» (Ctrl+C). Теперь на пустом баннере выделите примерную область вставки и далее: «Редактирование — Вставить» (Ctrl+V). Подправьте его расположение инструментом «Перемещение» (2):

3. Инструментом «Заливка» (3) кликните на пустом месте баннера. Если ваше изображение было в формате JPG, то останется его фон, покликайте по нему — может не получиться, закрасится полезная область. В идеале лучше иметь изображение в формате PNG, без фона, и вставить его уже на залитый баннер. У меня получилось сносно:

Чтобы установить цвет, кликните по квадрату (5), а в открывшейся «Палитре цветов» выберите нужный, у меня желтый: #f9f100 — его можно просто ввести в поле, внизу палитры:

4. Выделите инструментом «Прямоугольная область» (1) прямоугольник в средней части баннера, выберите в «Палитре цветов» (5) белый цвет: #ffffff и залейте область инструментом «Заливка» (3). Для отмены любых действий используйте «Редактирование — Шаг назад» (Alt+Ctrl+Z). Теперь будем работать с инструментом «Текст» (4):

5. Выберите инструмент «Горизонтальный текст» (4) и кликните в белой области — наберите нужный вам текст. На расположение не обращайте внимание, готовую надпись потом сдвинете инструментом «Перемещение» (2). На горизонтальной Панели управления, где кнопки (6) и (7), установите шрифт, его размер, резкость, цвет надписи — та же «Палитра цветов» (5). Просто выделяйте курсором сделанную надпись и меняйте эти параметры.

Для первой надписи «хостинг» (шрифт KabelCTT Medium, размер 36пт, цвет #444444) применялся инструмент «Деформировать текст» (6), он на скриншоте; для второй «от 0.4$» панель «Символ» (7) — сужение-растяжение символов по ширине и высоте, плотность и др., причем не всей надписи, а отдельных символов — выделяя их по отдельности.

Во второй надписи: шрифт Arial, его размер неодинаковый, толщина для «0.4» — black, для «от..$» — bold, цвет красный — #ff0000. Чтобы сохранить надпись — нажмите галочку (8), а соседняя кнопка отменяет все несохраненные действия с текстом. После этого можете сместить и выровнять надпись инструментом «Перемещение» (2):

Для первой надписи применялся эффект «Тень», для второй — эффект «Обводка», задействовать их можно через тоже основное меню: «Слои — Стиль слоя». Поэкспериментируйте. Ниже вы видите панель «Слои» (не путать с пунктом основного меню) — она справа в рабочем окне Photoshop, если там нет, то: «Окно — Слои» (F7). В ней мы будем работать со слоями, у нас их три — два текстовых.

6. А пока, объединим три наших слоя: «Слои — Объединить видимые» (Shift+Ctrl+E) — они все с глазиками. Глазик делает слой видимым, если по нему кликнуть, убрав глазик, — данный слой будет невидимым. А можно по другому: выделим все слои, кликнув, но каждому слою с зажатой клавишей Shift , и далее: «Слои — Объединить слои» (Ctrl+E). Останется один слой, изменить его название (пригодится далее) можно дважды кликнув, прямо на самой надписи «Слой 1»:

7. Сделаем обводку баннера, выделив слой: «Редактирование — Выполнить обводку», здесь серый цвет #999999:

8. Две области баннера у нас готовы, третья будет анимированная. Делается это довольно быстро. Нужно просто создать дублирующий слой, выделив кликом «Слой 1», далее в основном меню: «Слои — Создать дубликат слоя»:

Зададим ему название «Слой 2»:

9. На этом слое в третьей части напишем надпись, как на скриншотах ниже — используем инструмент «Текст» (4). Образуется еще один слой — текстовой, снова объединим его со «Слоем 2». Если название объединенного слоя получилось неправильное — двойной клик строго по самому названию и заменяем на «Слой 2»:

10. Снова дублируем «Слой 2», получаем «Слой 3» — он такой и останется (с текстом). А на «Слое 2», выделив его кликом, сделаем залитый прямоугольник. Инструментом «Прямоугольная область» (1) выделяем область с надписью, как на скриншоте:

Заливаем её инструментом «Заливка» (3), серый цвет #999999 в «Палитре цветов» (5), несколько раз энергично кликнув по области выделения:

У нас получилось три слоя: «Слой 1» — пустой, «Слой 2» — с залитым прямоугольником, «Слой 3» — с надписью. По аналогии с ними нужно добавить еще две надписи (см. готовый баннер), т.е. еще шесть слоёв — всего получится девять:

11. Осталось анимировать баннер в панели «Анимация», если в правой панели ее нет, то вызываем её из основного меню: «Окно — Анимация».

Нажав кнопку (9), создаем дублирующий кадр (один там уже будет), выделяем его кликом — он будет в рамочке. Переходим в панель «Слои», снимаем глазик со «Слоя 1», включаем глазик в «Слое 2» и выделяем слой кликом. Переходим в панель «Анимация», создаем кнопкой (9) третий дублирующий кадр — можно сделать сразу девять кадров. Принцип простой: кадр 3 — «Слой 3» (включаем глазик и выделяем его), кадр 4 — «Слой 4» и т.д.

Кнопка (10) служит для удаления ненужных кадров, в треугольничке (11) выставляем время для каждого кадра, в нашем случае: 0.1 сек. — 0 сек. — 1 сек, а далее по аналогии. Кнопкой «Запуск» (12) запускаем анимацию баннера.

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

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

Photoshop имеет огромное количество функций и возможностей, в том числе и создание баннеров

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

Процесс и правила создания статичных баннеров

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

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

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

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

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

После этого баннер считается готовым, остаётся только соединить все применяемые слои, а затем сохранить готовый результат в формате jpeg , но обязательно выбрав пункт «Сохранить для Web».

Создание анимированных вариантов

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

Процесс и правила создания анимированных баннеров

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

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

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

Когда работа с первым слоем завершена, следует создать новый слой. Для этого следует зайти в панель «Слои» и найти пункт «Создать дубликат слоя». В новом слое опять следует проделать те же самые действия с кнопкой, только при выборе цвета следует остановить свой выбор на том же цвете, но с другим оттенком.

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

Теперь остаётся привести баннер в движение - собственно, сделать его анимированным. Для этого нужно открыть параметр «Создать анимацию кадра».

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

В завершение остаётся поставить отметку «Проигрывать постоянно», сохранить для Web, но в формате gif.

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

Здравствуйте, дорогие друзья! Мой блог: — « », всегда открыт для вас! В прошлых статьях я рассказала о том, как , и как потом на блоге. Сегодня я хочу рассказать вам о том, как сделать баннер в фотошопе .

У баннеров, сделанных в Photoshop, больше плюсов, чем минусов.

1. Лёгкий вес
2. Простота в установке
3. Отображается на всех видах устройств
4. Легко делается
5. Не грузит сайт
6. Баннер можно часто обновлять

К минусам можно отнести лишь то, что он не такой «живой» как флеш, чувствуется разница между кино и картинкой. Но это единственный недостаток, и его можно частично устранить при помощи GIF картинки.

Перед тем, как приступить к созданию баннеров, необходимо сделать подготовительную работу. Подобрать нужные картинки, кнопочки. Определиться с тем, какой будет баннер: — неподвижный, или анимированный. Сделать на бумаге набросок будущего баннера, что бы чётко представлять, что вы хотите получить в конечном результате.

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

Создание статичных баннеров JPEG в программе Photoshop.

Открываем фотошоп, создаём новый документ: «Файл» — «Создать». В открывшемся окне прописываем название, указываем ширину в пикселях, и высоту в пикселях. Ширину узнаете, померив ваш сайдбар. Красиво смотрится баннер, расположенный по всей ширине сайдбара. Высоту указываете исходя из того, какая высота у подготовленной картинки, плюс 50 или 60 пикселей – место для кнопочки.

Разрешение документа – укажите 72 пикселя, это самое оптимальное разрешение для интернета. При большем разрешении картинка будет тяжёлой, при меньшем – плохого качества. Цвет фона выбирайте с учётом цвета фона картинки.

Как узнать какая высота картинки? Для этого откройте вашу картинку в Photoshop, жмите «изображение» — «размер изображения». В открывшемся окне меняете ширину изображения на ту, какая ширина сайдбара. Внимательно смотрите, что бы размер был указан в пикселях, если стоят другие значения, поставьте пиксели.

Высота автоматически изменится, запомните её, или запишите. Жмите «ок».
Перетаскиваем картинку на созданный документ, зажав её левой кнопкой мыши, и нажав кнопку ALT на клавиатуре. На левой панели фотошопа, выбираем инструмент «перемещение». Первый с верха. И с помощью стрелочек на клавиатуре располагаем на баннере.

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

Вот и всё, баннер готов! Объединяем все слои: — «Объединить видимые». Далее «файл» — «Сохранить для Web…». Выбираем формат сохранения JPEG. Выбираем папку для сохранения. Жмём «сохранить».

Создание анимированного баннера gif, в программе Photoshop.

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

Что бы вы не задумали анимировать, принцип создания – одинаковый. Поэтому я решила показать вам, как сделать моргающую кнопку, и меняющуюся надпись. Сначала, как и в первом случае, создаём новый документ, и перетягиваем на него все необходимые картинки. Обратите внимание, что все изображения получаются на отдельном слое.

Вот это нам и позволяет сделать картинку двигающейся.
Для создания задуманной мной анимации понадобится кнопка без надписи. Я её раскрашу в разные цвета. Сделаю слой с кнопкой активным (нажму на него один раз). Далее «изображение» — «коррекция» — «цветовой тон – насыщенность».

В открывшемся окне, ставлю галочку – тонирование. И двигая, верхний ползунок, выбираю цвет, подходящий к моей картинке. Затем жму левой кнопкой мыши по слою, и выбираю «создать дубликат слоя». Появляется слой с точно такой же кнопкой. Опять иду в «изображение» — «коррекция» — «цветовой тон – насыщенность».

Ставлю галочку – тонирование. Выбираю тот же цвет, но с другим оттенком. Теперь у меня два слоя с кнопкой, разного оттенка.
Пришло время для текста. На левой панели выбираю инструмент «текст». Настраиваю размер и шрифт. Пишу одно слово.

Например, я решила сделать надпись: — «Получить бесплатно». Можно написать — «Узнать подробнее». Пишу слово – «Получить», по размеру кнопочки. Щёлкаю один раз по слою с текстом. Выбираю инструмент «перемещение». Устанавливаю надпись строго по центру кнопки.

Опять беру инструмент «Текст». Создаю дубликат слоя с текстом, выделяю текст, и заменяю его, на слово – «Бесплатно». В этом случае слово встанет там, где нужно, можно его немного подвинуть вправо или влево, не забывая брать инструмент перемещение.
Осталось нам как то раскрасить текст. Двойной щелчок по слою с текстом, В открывшемся окне настраиваем тень, выбираем градиент, делаем обводку.

Всё выбираете в зависимости от цвета вашего баннера, картинки и кнопок. Всё должно гармонично сочетаться.
Выбрав необходимые эффекты, жмём «ок». Далее правой кнопкой мыши по слою с выбранными эффектами, и в окне жмём – «скопировать стиль слоя». Щелкаем по слою с текстом без эффектов, и жмём – «вклеить стиль слоя». Теперь оба слоя с одинаковыми эффектами. Баннер создали, приступим к анимации.

Анимация баннера в фотошопе.

Для этого открываем вкладку «окно», на верхней панели, и выпавшем списке выбираем «шкала времени» и внизу на шкале – «создать анимацию кадра». В разных версиях фотошопа название может быть разным. Например в пятёрке нужно в окне выбрать – «анимация». Суть в том, что вы ищите всё, что связанно с анимацией кадра. Если будут затруднения, задавайте вопросы в комментариях.

Теперь нужно закрыть глазки у всех слоёв, которые должны оставаться невидимыми. Например: — у нас две кнопки, значит, видимость одной закрываем. У нас два слова на одном месте – одно слово временно отключаем.

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

Что бы он отличался от первого, я решила сменить кнопку. То есть тот слой с кнопкой, что был закрыт, я открыла, а ту кнопку, что была видна – закрыла. Делаю следующий кадр. Пришло время поменять не только кнопку, но и слово.

Закрываю слово, которое было видимым, открываем глазок на ранее закрытом слое, также меняем глазки на кнопках. И создаём последний, четвёртый кадр. Меняем только кнопочки. Ставим отметку проигрывать анимацию – «постоянно» и запускаем проверку анимации. Если всё сделали правильно, то кнопочки будут мигать в два раза чаще, чем меняться слова.

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

Ролик без слов, но с пояснениями. Записывала ночью, когда все спали, поэтому говорить не могла. Но зато вы можете послушать приятное музыкальное сопровождение. Приятного просмотра!

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

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

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

Код для вставки баннера в виджет:

Вот и пришло время прощаться, я рассказала вам о том, как сделать статичный и анимированный баннер в Photoshop. Если у вас что то не получается, пишите в комментариях. И не забудьте нажать на кнопки социальных сетей, вам не трудно, а автору приятно!

PS. Прочитайте статьи, как установить , сделать , красивые или . Не спешите покидать блог, вы найдёте много интересной информации.
Баталова Ирина

Привет Друзья! С Вами опять я — Владимир Савельев и сегодня мы продолжаем тему создания баннеров для сайта! В первой части статьи, я рассказал Вам о , которые помогут реализовать Ваши самые смелые задумки!

Теперь же пришла пора показать Вам — как же создают баннеры в Photoshop! На самом деле ничего трудного и ужасного Вас не ждет, просто повторяйте все действия за мной и мы вместе дойдем до завершающего финала, а именно создадим наш первый рекламный баннер!

Ну не буду долго тянуть кота за яйца поехали...

Делаем баннер в Adobe Photoshop

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

Затем уже можно запустить Photoshop и создать новое изображение с прозрачным фоном (File/New) размером, например, 468 на 60 пикселей;

Выводим на экран панель работы со слоями “Layer”.
В качестве отдельного слоя создаём фон – здесь советуем особо не экономить и любой сколько-нибудь заметный элемент баннера размещать на отдельном слое, вплоть до того, что под каждую букву слогана выделить свой слой.

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

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

Все варианты, пока в многослойном варианте, сохраняем в отдельных файлах в формате psd (заметим, jpg-формат «не помнит» информацию о слоях, он все слои соберёт в один и в будущем разбивка уже будет невозможна).

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

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

Как сделать баннер в фотошопе анимированным (gif-файл)? И с этой задачей наш родной Фотошоп справится на ура! Открываем вкладку — окно — Анимация.

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

Необходимо понимать, что вы уже создаёте какое-никакое видео, а значит, не обойтись без небольшого «сценария». По крайней мере, очень важно будет точно смоделировать весь характер анимации – партию каждого «героя-слоя».

Здесь потребуется точно определить все:

• временные параметры поведения каждого слоя;
• поведение его прозрачности;
• траекторию перемещения.

Дело совсем не сложное, но заставит почувствовать, насколько сложна эта профессия сценариста-режиссёра.

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

Вот такой вот баннер я создал за 5 минут! Он конечно далек от совершенства, но ведь моей целью было показать Вам возможности Фотошопа и я с этим справился!

Да, чуть не забыл рассказать о своей находке В прошлой статье, я рассказывал о том, что купил видео курсы Сергея Буйбарова, о том как создавать баннеры и зарабатывать на них ! После детального изучения (целый день смотрел видео трюки и фишки Сережи) я понял, что подобного рода курсы, очень нужны в Рунете! Советую к приобретению однозначно...