1. Як створити банер в фотошопі. Вітаю, дорогі друзі! Мій блог: - " Створення і просування сайту....
2. Створення анімованого банера gif, в програмі Photoshop.
3. Анімація банера в фотошопі.

Як створити банер в фотошопі.

Вітаю, дорогі друзі! Мій блог: - " Створення і просування сайту. Від чайника до профі », Завжди відкритий для вас! У попередніх статтях я розповіла про те, як створити флеш банер , І як потім встановити flesh banner на блозі. Сьогодні я хочу розповісти вам про те, як зробити банер в фотошопі.

У банерів, зроблених в Photoshop, більше плюсів, ніж мінусів.

1. Легка вага
2. Простота в установці
3. Відображається на всіх видах пристроїв
4. Легко робиться
5. Не вантажить сайт
6. Банер можна часто оновлювати

До мінусів можна віднести лише те, що він не такий «живий» як флеш, відчувається різниця між кіно і картинкою. Але це єдиний недолік, і його можна частково усунути за допомогою GIF картинки.

Перед тим, як приступити до створення банерів, необхідно зробити підготовчу роботу. Підібрати потрібні картинки, кнопочки. Визначитися з тим, якою буде банер: - нерухомий, або анімований. Зробити на папері ескіз майбутнього банера, що б чітко уявляти, що ви хочете отримати в кінцевому результаті.

Зібрати всі підготовлені картинки в окрему папку, створену на робочому столі. Після створення банера її легко можна буде видалити, і ви не забудете це зробити, так як вона буде на увазі. Отже, картинки підготовлені, і ми приступаємо!

Створення статичних банерів JPEG в програмі Photoshop.

Відкриваємо фотошоп, створюємо новий документ: «Файл» - «Створити». У вікні прописуємо назву, вказуємо ширину в пікселях, і висоту в пікселях. Ширину дізнаєтеся, помірявши ваш сайдбар. Красиво виглядає банер, розташований по всій ширині сайдбара. Висоту вказуєте виходячи з того, яка висота у підготовленої картинки, плюс 50 або 60 пікселів - місце для кнопочки.

Дозвіл документа - вкажіть 72 пікселя, це найоптимальніше вирішення для інтернету. При більшому дозволі картинка буде важкою, при меншому - поганої якості. Колір фону вибирайте з урахуванням кольору фону картинки.

Як дізнатися яка висота картинки? Для цього відкрийте вашу картинку в Photoshop, тисніть «зображення» - «розмір зображення». У вікні, міняєте ширину зображення на ту, яка ширина сайдбара. Уважно дивіться, що б розмір був зазначений в пікселях, якщо стоять інші значення, поставте пікселі.

Висота автоматично зміниться, запам'ятайте її, або запишіть. Тисніть «ок».
Перетягуємо картинку на створений документ, затиснувши її лівою кнопкою миші, і натиснувши кнопку ALT на клавіатурі. На лівій панелі фотошопа, вибираємо інструмент «переміщення». Перший з верху. І за допомогою стрілок на клавіатурі маємо картинку на банері.

Подвійним клацанням по екрану відкриваємо папку з підготовленими картинками, і вибираємо кнопку. Перетягуємо її на банер, встановлюємо на потрібному місці. Можна надати кнопці ефект тіні. Подвійне клацання по шару з кнопкою, у вікні вибираємо «тінь», налаштовуємо необхідні параметри.

Ось і все, банер готовий! Об'єднуємо всі шари: - «Об'єднати видимі». Далі «файл» - «Зберегти для Web ...». Вибираємо формат збереження JPEG. Вибираємо папку для збереження. Тиснемо «зберегти».

Створення анімованого банера gif, в програмі Photoshop.

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

Що б ви не задумали анімувати, принцип створення - однаковий. Тому я вирішила показати вам, як зробити Морган кнопку, і мінливу напис. Спочатку, як і в першому випадку, створюємо новий документ, і перетягуємо на нього всі необхідні картинки. Зверніть увагу, що всі зображення виходять на окремому шарі.

Ось це нам і дозволяє зробити картинку рухається.
Для створення задуманої мною анімації знадобиться кнопка без напису. Я її розмалюю в різні кольори. Зроблю шар з кнопкою активним (натисну на нього один раз). Далі «зображення» - «корекція» - «колірний тон - насиченість».

У вікні, ставлю галочку - тонування. І рухаючи, верхній повзунок, вибираю колір, що підходить до моєї зображенні. Потім тисну лівою кнопкою миші по шару, і вибираю «створити дублікат шару». З'являється шар з точно такою ж кнопкою. Знову йду в «зображення» - «корекція» - «колірний тон - насиченість».

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

Наприклад, я вирішила зробити напис: - «Отримати безкоштовно». Можна написати - «Дізнатися більше». Пишу слово - «Отримати», за розміром кнопочки. Клацаю один раз по шару з текстом. Обираю інструмент «переміщення». Встановлюю напис строго по центру кнопки.

Знову беру інструмент «Текст». Створюю дублікат шару з текстом, виділяю текст, і заміняю його, на слово - «Безкоштовно». У цьому випадку слово встане там, де потрібно, можна його трохи посунути вправо або вліво, не забуваючи брати інструмент переміщення.
Залишилося нам як то розфарбувати текст. Подвійне клацання по шару з текстом, У вікні налаштовуємо тінь, вибираємо градієнт, робимо обведення.

Все вибираєте в залежності від кольору вашого банера, картинки і кнопок. Все повинно гармонійно поєднуватися.
Вибравши необхідні ефекти, тиснемо "ок". Далі правою кнопкою миші по шару з вибраними ефектами, і у вікні тиснемо - «скопіювати стиль шару». Клацаємо по шару з текстом без ефектів, і тиснемо - «вклеїти стиль шару». Тепер обидва шару з однаковими ефектами. Банер створили, приступимо до анімації.

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

Для цього відкриваємо вкладку «вікно», на верхній панелі, і випав списку вибираємо «шкала часу» і внизу на шкалі - «створити анімацію кадру». У різних версіях фотошопа назва може бути різним. Наприклад в п'ятірці потрібно у вікні вибрати - «анімація». Суть в тому, що ви шукайте все, що пов'язано з анімацією кадру. Якщо будуть труднощі, задавайте питання в коментарях.

Тепер потрібно закрити очі у всіх шарів, які повинні залишатися невидимими. Наприклад: - у нас дві кнопки, значить, видимість однієї закриваємо. У нас два слова на одному місці - одне слово тимчасово відключаємо.

Внизу на шкалі у нас вже створено перший кадр. Вибираємо час показу кадру. Не переживайте, якщо вам не сподобається, то його в будь-який момент можна змінити. Тиснемо знизу на листочок, і у нас створився наступний кадр.

Що б він відрізнявся від першого, я вирішила змінити кнопку. Тобто той шар з кнопкою, що був закритий, я відкрила, а ту кнопку, що була видна - закрила. Роблю наступний кадр. Прийшов час поміняти не тільки кнопку, але і слово.

Закриваю слово, яке було видимим, відкриваємо вічко на раніше закритому шарі, також змінюємо очі на кнопках. І створюємо останній, четвертий кадр. Міняємо тільки кнопочки. Ставимо позначку програвати анімацію - «постійно» і запускаємо перевірку анімації. Якщо все зробили правильно, то кнопочки будуть мигати в два рази частіше, ніж змінюватися слова.

Банер готовий. Зберігаємо для Web, в форматі Gif.
Для того, щоб вам було зрозуміло, як все потрібно робити, я записала процес створення банерів на відео ролик. Прошу строго не судити, тому що це мій перший відео урок. Намагалася не поспішати, щоб ви могли побачити процес створення банера в фотошопі.

Ролик без слів, але з поясненнями. Записувала вночі, коли всі спали, тому говорити не могла. Але зате ви можете послухати приємний музичний супровід. Приємного перегляду!

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

За таким же принципом можна зробити мінливу картинку. Спробуйте зробити банер самі, і ви зрозумієте, що це не складно. Якщо виникнуть складності в створенні банерів, то звертайтеся, я із задоволенням допоможу. А можете замовити виготовлення банера, і я зроблю вам його від початку і до кінця.

Створений банер завантажуємо в бібліотеку, відкриваємо в окремій вкладці, копіюємо адресу зображення, зберігаємо. Вставляємо в код, і ставимо код в віджет.

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

За цим посиланням сторінка відкривається в тій же вкладці

За цим посиланням сторінка переходу відкриється в новій вкладці.

Ось і прийшов час прощатися, я розповіла вам про те, як зробити статичний і анімований банер в Photoshop. Якщо у вас щось не виходить, пишіть в коментарях. І не забудьте натиснути на кнопки соціальних мереж, вам не важко, а автору приємно!

PS. Прочитайте статті, як встановити кросворд на сайті , зробити красиві форми підписки , красиві музичні листівки або сторінки захоплення . Не поспішайте залишати блог, ви знайдете багато цікавої інформації.
Баталова Ірина