Как да създадете анимирани банери в Photoshop

1. В главното меню кликнете върху "Файл - Нов» (Ctrl + N):

Как да създадете анимирани банери

В прозореца, трябва да посочите име, размера и изберете прозрачен фон - останалите параметри не е необходимо да я докосне, щракнете върху OK. Ако имате друга версия на Photoshop - не ужасни, всички действия и инструменти, са едни и същи. На празен банера Сложих образи на сървърите, а вие трябва да отворите вашия "File - Open» (Ctrl + O).

Нашата височина банер 60 пиксела, коригира размера на своя "Image - Размер на снимката» (Alt + Ctrl + I).

2. Изберете я инструмент "правоъгълна област" (1) или част от него, а след това "Редактиране - Копие» (Ctrl + C). Сега, на празен банер, превъртете до приблизителната площ на вмъкване и след това "Edit - Paste» (Ctrl + V). Поиграйте си местоположение инструмент "Move" (2):

3. Tool "Попълване" (3) кликнете на банера нулата. Ако вашата снимка е в JPG, остава си произход, poklikat върху него - това не може да се изключи, боядисване над зоната за полезен товар. В идеалния случай трябва да има изображение в PNG формат, без фон, и да го поставите вече облян банер. Имам доста:

Как да създадете анимирани банери

За да зададете цвят, кликнете върху квадрата на (5) и отворете "цветова палитра", изберете правото, имам жълт: # f9f100 - той просто може да се влезе в областта, в долната част на палитрата:

Как да създадете анимирани банери

4. Изберете инструмент "правоъгълна област" (1) правоъгълник в средната част на банера, изберете "цветова палитра" (5) цвят бял: #ffffff област и попълнете инструмент "Попълване" (3). За отмяна на всякакви действия, използвайте "Edit - Стъпка назад» (Alt + Ctrl + Z). Сега ние ще работим с инструмента "Текст" (4):

5. Изберете инструмент "хоризонтален тип" (4) и кликнете в бялата зона - въведете текста, който искате. Режимът не се обърне внимание, е готов да подпише след това преместете инструмент "Move" (2). хоризонтална контролния панел, където бутоните (6) и (7), определени на шрифта, размера, остротата, цветни етикети на The - същата "цветовата палитра" (5). Просто маркирайте курсора надпис и промените тези настройки.

За първи надпис "хостинг" (шрифт KabelCTT Medium, размер 36pt, цвят # 444444) е използван инструмент "Warp Text" (6), той е на екранната снимка; за втори "0.4 $" панел "Символ" (7) - Ограничение-разтягане ширина на знаците и височина, плътност и т.н., а не цялата линия, но отделните герои -. разпределянето им поотделно.

Как да създадете анимирани банери

Във втория надпис шрифт Arial на, размер на неравномерното дебелина до 0,4 «» - черен, защото "с. $ »- смел, цвят червен - # ff0000. За да се запази надписа - поставете отметка в квадратчето (8) и бутона в съседство отменя Незапазената манипулира текст. След това можете да преместите инструмента и изравнете етикет "движение" (2):

За първи надпис използва ефекта на "Shadow", а вторият - в смисъл на "Stroke", можете да ги използвате, също чрез главното меню: "Слоеве - Layer Style". Експериментирайте. По-долу можете да видите панела "Слоеве" на (да не се бърка с основния елемент от менюто) - това е точно в работен прозорец Photoshop, ако не са, "Прозорец - Layers" (F7). В него ще работят със слоеве, ние имаме три от тях - два текста.

6. В същото време, се комбинират нашите три слоя: "Слоеве - Merge Visible» (Shift + Ctrl + E) - всички от тях с glazikami. Glazik прави слоя видим, когато кликнете върху нея, премахване glazik - активен слой ще бъде невидим. Възможно ли е за друга, изберете всички слоеве, като кликнете, но всеки слой, докато държите клавиша Shift. и по-нататък: "Слоеве - Обединяване на слоеве» (Ctrl + E). Остава една слой, промени името си (полезно по-късно), можете да кликнете два пъти върху директно върху надписа "Layer 1":

Как да създадете анимирани банери

7. Уверете се, инсулт знамето подчертаване слой "Edit - Stroke" е сив цвят # 999999:

Как да създадете анимирани банери

8. Двете области на знамето, ние сме готови, а третият ще бъдат анимирани. Това се прави доста бързо. Ти просто трябва да създадете копие на слоя, като изберете клик "Layer 1", а след това в главното меню: "Слоеве - Duplicate Layer":

Как да създадете анимирани банери

Попитай го от името на "Layer 2":

Как да създадете анимирани банери

9. На този слой, в третата част ще напиша един надпис, както е на снимката по-долу - използвайте инструмент "текст" (4). Създадена още един слой - текст, отново да го комбинирате с "Layer 2". Ако името на обединената слой се оказа погрешно - кликнете два пъти при стриктно спазване на името и да ги замени с "Layer 2":

Как да създадете анимирани банери

10. Отново дубликат "Layer 2" получи "Layer 3" - той е и си остава (с текст). И на "Layer 2", като подчерта, че кликванията запълнен правоъгълник. Tool "правоъгълна област" (1) подчертават региона обозначени като на екрана:

Напълнете я с инструмента "Fill" (3), сив цвят # 999999 в "цветовата палитра" (5) няколко пъти енергично, като кликнете върху шатрата:

Имаме три слоя "Layer 1" - празен, "Layer 2" - с наводнени правоъгълник "Layer 3" - с надпис. По аналогия с тях трябва да се добавят още два етикета (вж. Готов банер), т.е. шест пласта - получават само девет:

Как да създадете анимирани банери

11. Остава да се анимирани банери в панела "Анимация", ако не се яви в десния панел, а след това го наричат ​​от главното меню: ". Window - Animation"

Как да създадете анимирани банери

Чрез натискане на бутона (9), създаване на резервно копие на изображението (един е вече там), изберете го натиснете - тя ще бъде в рамката. Ние се пристъпи към панелните "Слоеве", извадете glazik с "Layer 1", glazik включва "Layer 2" и изберете слой щракване. Ние се пристъпи към панела "Анимация", създава един бутон (9) трета рамка архив - може да се направи веднага девет кадъра. Принципът е прост: рама 3 - "Layer 3" (glazik включват и го маркирате), рамката 4 - "слой 4", и т.н.

Бутон (10) служи за отстраняване на ненужните кадри в триъгълници (11) време, за да изложи на всеки кадър, в този случай 0,1 сек. - 0 сек. - 1 сек, а след това по аналогия. Натиснете "Start" (12) серия банер анимация.

12. Запазване на знамето толкова жестоко: "Файл - Съхраняване на Web & Devices» (Alt + Shift + Ctrl + S). В долния десен ъгъл отново да можете да проверите анимацията:

Как да създадете анимирани банери

В горния десен ъгъл, изберете формата на GIF, оптимизиране на банера: 64-цветен вариант без трептене - то се оказа подходящо качество. Файл обърна 10.1 KB - малък обем:

Как да създадете анимирани банери

Готов хостинг анимиран банер:

Ако банера не се показва на сайта: 1 - валидиране на URL адреса; 2 - Функция Активира "Antibanner" в сканирането на браузъра или вирус, аз знамето блокиран Каспър - трябва да добавите адреса на банера в "белия списък" в настройките на програмата.

Можете да създадете анимиран банер в Photoshop прости средства за ограничаване на анимация и обикновен текст, но с последиците - не си правете труда. И в този урок използва малко усложнение, отшелничество - за по-добро запознаване с основните инструменти на програмата. И придобитите умения да бъдат достатъчни, за да създадете разнообразие от атрактивни банери.

Как да създадете анимирани банери