Jak vytvořit statický banner ve Photoshopu. Jak vytvořit animovaný banner

Upoutání pozornosti návštěvníků. Čím je barevnější a zajímavější, tím vyšší je jeho účinnost. Nejčastěji musí bannery umístit ti, kteří provádějí komerční aktivity.

K jeho vytvoření se samozřejmě hledají talentovaní grafici, kteří jsou schopni vytvořit úžasný projekt. Po přečtení několika doporučení, jak vytvořit banner ve Photoshopu, se však můžete naučit, jak sami vytvářet své vlastní zajímavé projekty. Je možné, že později, až vypilujete své dovednosti, budou vaše bannery mnohé zajímat.

Photoshop má obrovské množství funkcí a schopností, včetně vytváření bannerů

Ti, kteří již mají zkušenosti s tvorbou bannerů v Adobe Photoshop CS6, mohou uvést několik jejich výhod. Zejména se velmi snadno instalují a zabírají velmi málo místa, což je tak důležité, když je na webu nedostatek volného místa. Je také docela snadné aktualizovat a zobrazit na všech zařízeních.

Postup a pravidla pro vytváření statických bannerů

Aby mohl uživatel vytvořit banner, musí se na to nejprve připravit. Příprava spočívá ve vytvoření předběžné skici vyobrazené na čistém listu papíru, abychom měli předem představu o tom, co chce autor nebo zákazník na konci vidět. Poté byste měli vybrat vhodné obrázky a umístit je všechny do samostatné složky.

Po dokončení přípravné fáze můžete začít s hlavní částí, která zahrnuje vytvoření samotného banneru. Nejprve se otevře Photoshop a vytvoří se nový dokument.

V této fázi je důležité uvést požadované rozměry v pixelech. Šířka může být libovolná, ale zkušení návrháři doporučují nastavit šířku rovnou šířce boční lišty. Výška se vypočítá výpočtem výšky použitého obrázku a přidáním dalších 60 pixelů pro umístění tlačítka.

Rozlišení nového dokumentu si také nastavuje uživatel sám, je však důležité vzít v úvahu některá pravidla. Zejména se doporučuje použít rozlišení 72 pixelů, protože pokud se tento indikátor zvýší, hotový banner bude pro web příliš těžký, a pokud se sníží, dojde ke ztrátě kvality. Pozadí banneru se shoduje s pozadím hlavního obrázku.

Připravený obrázek by měl být přesunut do vytvořeného nového dokumentu, poté je pomocí šipek umístěn na požadované místo, které bylo dříve určeno na náčrtu. Dále se do tohoto dokumentu přesune tlačítko, které lze trochu ozdobit, doprovázené dalším stínem. Chcete-li to provést, stačí na něj dvakrát kliknout a poté zadat příslušné parametry pro nastavení stínu.

Poté je banner považován za připravený, zbývá pouze spojit všechny použité vrstvy a poté uložit hotový výsledek ve formátu jpeg, ale nezapomeňte vybrat možnost „Uložit pro web“.

Vytváření animovaných variant

Animovaný banner může efektivněji přitáhnout pozornost návštěvníků webu. Grafik se musí sám rozhodnout, co má být animováno. Může to být tlačítko nebo obrázek. Animace je dosaženo vytvořením několika vrstev, které se začnou v určité sekvenci měnit a vytvářejí iluzi pohybu.

Postup a pravidla pro tvorbu animovaných bannerů

Poté, co jste se rozhodli vytvořit animovaný banner, měli byste se nejprve naučit, jak vytvářet statické verze, aby se vám dobře dařilo, a poté, po prostudování doporučení, jak vytvořit banner ve Photoshopu cs6, začít realizovat své plány. .

Zpočátku musí uživatel vytvořit jednoduchý statický banner, úspěšně umístit hlavní obrázek, tlačítko na něj a vytvořit nápisy. Chcete-li tlačítko animovat, měli byste vytvořit několik vrstev s takovým tlačítkem, ale nějakým způsobem odlišných.

Pokud chcete, aby tlačítko změnilo barvu, měli byste kliknout na vrstvu s tlačítkem a aktivovat ji, poté přejděte na „Obrázek“, poté na „Oprava“ a poté najděte položku „Sytost barvy pozadí“. Kliknutím na něj se otevře okno, ve kterém se volí tónování, umožňující uživateli vybrat požadovaný odstín pohybem posuvníku.

Po dokončení první vrstvy by měla být vytvořena nová vrstva. Chcete-li to provést, přejděte na panel „Vrstvy“ a najděte položku „Vytvořit duplicitní vrstvu“. V nové vrstvě byste opět měli dělat stejné akce s tlačítkem, pouze při výběru barvy zvolit stejnou barvu, ale s jiným odstínem.

Po výběru požadovaných efektů stačí souhlasit kliknutím na „OK“. Dále musíte kliknout pravým tlačítkem myši na vrstvu s těmito efekty, vybrat „Kopírovat styl vrstvy“, poté kliknout na vrstvu bez efektů a vybrat možnost „Vložit styl vrstvy“. V důsledku takových akcí se vytvoří obě vrstvy doprovázené efekty.

Teď už jen zbývá banner uvést do pohybu – vlastně ho animovat. Chcete-li to provést, otevřete možnost „Vytvořit animaci snímku“.

Protože v tuto chvíli jsou ve Photoshopu otevřené dvě vrstvy s různými tlačítky, je důležité ponechat první vrstvu aktivní a druhou vrstvu vypnout. Toto bude považováno za první snímek. Uživatel by měl zvolit optimální čas pro jeho zobrazení, který lze později v případě potřeby upravit.

Nakonec zbývá jen zaškrtnout „Play always“ a uložit jej pro web, ale ve formátu gif.

Po přečtení pokynů, jak vytvořit banner ve Photoshopu, můžete začít s praktickou realizací svých plánů a z vlastní zkušenosti uvidíte, že při vytváření statických a animovaných bannerů není nic těžkého. Jakmile bude tvorba jednoduchých animovaných možností dovedena k automatizaci, můžete si vyzkoušet tvorbu složitějších projektů, kde se zároveň bude měnit nejen barva tlačítka, ale i obrázek, nápis atd.

Každý z nás se denně setkává s reklamou, sledováním televize, surfováním na internetu, na ulici, v nákupním centru a na mnoha dalších místech. V tomto článku si povíme o jednom z nejoblíbenějších typů reklamy – bannerech. Dozvíte se, co jsou bannery, jaké existují typy a banner ve Photoshopu.

Co je bannerová reklama

Bannerová reklama je grafický obrázek reklamního charakteru. Billboardy na ulicích, bannery nad obchody, obrázky na webových stránkách na internetu, po kliknutí přejdete na jinou stránku – to vše jsou bannery. Pouliční transparenty se objevily už dávno, když ještě nebylo ani rádio. Ale v roce 1994 unikly na internet a rychle si začaly získávat popularitu. Bez reklamy a zejména reklamy na internetu se dnes neobejde ani jeden podnik a bannery jsou jedním z velmi účinných nástrojů propagace zboží a služeb.

Jaké typy bannerů existují?

• Venkovní reklamní banner. Vyrobeno ze speciální polyvinylchloridové fólie, vinylového, latexového nebo nylonového papíru. Jedná se o obdélníkové plátno různých velikostí, na kterém jsou natištěny reklamní informace. Tisk je realizován pomocí tiskáren pro velkoformátový tisk - plotrů.
• Reklamní bannery na internetu. Zpočátku to byly jasné, zapamatovatelné obrázky, ale s rozvojem technologie se objevily bannery s animovaným obsahem v podobě krátkého videoklipu a dokonce i interaktivní minihry. V každém případě se jedná o reklamu, obsahuje tedy hypertextový odkaz vedoucí na konkrétní stránku. I když na banner nekliknete, informační obrázek reklamního charakteru vám stále zůstane v paměti.

Typy internetových bannerů podle metod implementace

Než se naučíme, jak vytvořit banner ve Photoshopu, seznámíme se s různými způsoby jejich implementace.

• Statický. Nejjednodušší banner je obrázek s reklamním obsahem. Velikost souboru je malá, takže se rychle načítá i na pomalém internetu. Vytvořit banner je snadné jak ve Photoshopu, tak v jiných grafických editorech.
• Animovaný. Váží několikanásobně více než statické, a proto se načítají pomaleji, ale jsou pro uživatele znatelnější. Vytvořit takový reklamní banner ve Photoshopu je mnohem obtížnější.
• Bohatý text. Banner podobný informačnímu článku s grafickou složkou.
• HTML5, JS, flash animace. To už jsou bannery, což jsou interaktivní miniprogramy. Například: různé testy, primitivní hry, dotazníky. Vytvoření takového reklamního banneru ve Photoshopu, jak víte, nebude fungovat.

Definování velikostí bannerů

Než se naučíte, jak vytvořit rozvržení banneru ve Photoshopu, musíte se rozhodnout o jeho rozměrech. Standardní velikost je 100 x 100 pixelů. Nejčastěji používané možnosti jsou 468 x 60 a 234 x 60. První číslo určuje šířku a druhé délku. Vertikální banner tedy bude mít velikost například 60 x 468 pixelů. Proto je důležité vědět, kam svůj banner umístíte.

Kde začít

Tak jsme se dozvěděli, že můžete vytvořit banner ve Photoshopu, a to jak velký, tak miniaturní. Není však třeba spěchat a než otevřete program pro vytvoření banneru, jako v každém kreativním úsilí, musíte přijít na design a obsah. Doporučujeme to udělat s papírem a tužkou. Nejprve nakreslíme obdélník s ohledem na proporce budoucího banneru. Vymyslíme potřebný reklamní text. Poté určíme, jaké bude pozadí. To vše není třeba kreslit, stačí jen slovy napsat, co máte v plánu. Pak můžete vymyslet, jaké obrázky můžete vložit a kam je stylově umístit, včetně případného firemního loga. S největší pravděpodobností bude výsledek na papíře vypadat jako schematický plán. Poslední fáze přípravy: na internetu hledáme obrázky, které odpovídají vaší představě. Je důležité pamatovat na autorská práva, proto vybíráme obrázky z bezplatných zdrojů.

Výroba vlastního reklamního banneru

Takže vaše rozložení je připraveno. Nyní pojďme přímo k hlavnímu procesu.

V tomto článku vytvoříme statický horizontální reklamní banner o velikosti 468 × 60 pixelů a textem „Výprodej iPhonu 5 Nepromeškejte šanci“ ve Photoshopu verze CS6.

Toto byl úvodní článek pro začátečníky s minimálně podrobným návodem na vytvoření banneru. Na internetu je spousta odborné literatury a videonávodů. Když strávíte pár dní učením se tomuto úžasnému programu, můžete vytvořit mnohem lepší bannerové reklamy. Za zmínku také stojí, že existují podobné produkty s odlehčenou funkčností a také aplikace speciálně vytvořené pro vytváření

Ahoj všichni. V tomto článku vám ukážu, jak můžete vytvořit banner GIF pomocí Photoshopu. Obecně jsem zvyklý dělat bannery a animace v . Photoshop se přirozeně nemůže s tímto balíčkem srovnávat, pokud jde o funkčnost animace. Ve Photoshopu ale stále můžete dělat docela jednoduché a zajímavé bannery, protože v jeho nových verzích, počínaje CS5, pokud vím, bylo možné vytvářet animace průhlednosti, měřítka, perspektivy atd. Podívejme se na proces vytváření banneru GIF ve Photoshopu na příkladu práce v názvu článku.

Vytvoříme nový dokument velikosti 600 až 200px. Pozadí - #589fff

Nejprve sestavíme banner ve statické podobě. Umístíme naši hlavní postavu – rybu – do vrstvy, kde můžete získat volné zdroje pro svá díla, napsal jsem v článku „“:

Pomocí " Volná postava» Umístěte popisek s dialogem na vrstvu.

Dovolte mi, abych vám připomněl, že pomocí nástroje můžete upravit tvar (vektorový objekt). "Výběr uzlu."

To jsem udělal - odstranil jsem nepotřebné prvky ve vrstvě s prvním tvarem a přidal 3 další elipsy, aby to vypadalo, že tento oblak dialogů přichází z rybí tlamy. Stalo se následující.

Nyní umístěme text na vrstvy dokumentu v pořadí, v jakém se objeví. Jelikož se náš text bude objevovat jeden po druhém, je přirozené, že ve statické verzi se budou vrstvy vzájemně překrývat. Ukážu všechny vrstvy s deaktivovanou poslední vrstvou textu.

A upozorňujeme, že naše textové vrstvy musí být oříznuty na velikost vrstvy s dialogovým tvarem mraku, aby sloužila jako rámeček, kvůli kterému už text nebude vidět.

Takže všechny naše vrstvy jsou připraveny. Uspořádány v pořadí jejich vzhledu (odspodu nahoru). Můžeme spustit animaci.

Vyberte položku Okno – Časová osa. Na panelu, který se zobrazí, vyberte tlačítko Vytvořte časovou osu pro video. V důsledku toho se vytvoří časová osa se všemi našimi vrstvami, které již můžeme přesouvat a animovat.

Vzhledem k tomu, že máme vrstvu Pozadí se zámkem, nebude se zobrazovat na časové ose, bude vždy přítomna beze změny. Pokud chcete pozadí animovat, odemkněte jeho vrstvu dvojitým kliknutím levého tlačítka myši.

Každá vrstva na časové ose má atributy pro animaci. Lze je vidět, pokud rozbalíte seznam vlevo od názvu vrstvy. Můžeme měnit polohu, neprůhlednost, styl.

Pokud také kliknete pravým tlačítkem na samotný název vrstvy na stopě časové osy, otevře se seznam dalších akcí animace.

Vytváření klíčových snímků pro konkrétní stopu s vrstvou můžete aktivovat kliknutím na ikonu hodin vedle názvu atributu animace.

V místě, kde se na časové ose nachází časová značka, se objeví žlutý kosočtverec (ikona klíčového snímku). Například na začátku. Můžete změnit hodnotu atributu objektu, jako je poloha, a jeho hodnota bude pro tento klíčový snímek uložena. Poté, chcete-li nastavit novou hodnotu a nový klíčový snímek, musíte přesunout ukazatel času na nové místo. Klikněte na ikonu kosočtverce vedle názvu atributu (na časové ose se objeví nová ikona klíčového snímku) a nastavte novou hodnotu atributu. Například přesuňte objekt na nové místo.

Nyní se pokusme získané poznatky aplikovat. Naše ryba by se měla objevit zleva doprava a její průhlednost by se měla změnit od 0 do 100 %. Takto bude v tomto případě vypadat časové měřítko.

Poté, co se ryba objeví, se po částech objeví dialogový mrak. Nejprve elipsy, pak samotná postava. Stopy každé vrstvy na časové ose můžeme přesouvat, takže rozmístíme jejich pozice tak, aby se objevovaly v požadovaném časovém intervalu a animaci nastavíme na parametr Neprůhlednost pro každou vrstvu.

Pro obrázek použijeme stejné kroky.

Nyní vytvoříme animaci pro text pomocí stejného algoritmu. Pouze text bude mít parametr ne Pozice, ale Perspektiva a budeme moci nejen měnit pozici, ale i měnit měřítko z menšího na větší, když se text začne pohybovat. K tomu použijte standardní nástroj pro transformaci objektů ( Ctrl + T). Protože jsou zpočátku textové vrstvy oříznuty podle tvaru obrázku, budou viditelné pouze v rámci jeho hranic. Změnil jsem i styl druhého textu. Přidán přechod do možností prolnutí vrstev.

Nyní zarovnáme všechny okraje stop na konci. K tomu je potřeba zatáhnout za pravý okraj každé stopy a vše upravit na stejný čas. Aby všechny předměty najednou nezmizely. U každé stopy můžete nastavit krytí na 0. Přehrajte, co se stalo. Můžete stisknout klávesu plocha.

Photoshop sice není stvořen pro žádnou složitou animaci (a to je rozumné), ale pomocí těchto jednoduchých kroků můžete dosáhnout slušného výsledku při tvorbě GIF banneru. Zvláště pokud se ve Photoshopu cítíte pohodlněji než při práci ve Flashi.

(Navštíveno 2 407 krát, dnes 4 návštěv)

Dobrý den, drazí přátelé! Můj blog: - "", je pro vás vždy otevřený! V předchozích článcích jsem mluvil o tom, jak a jak později na blogu. Dnes vám chci vyprávět o jak vytvořit banner ve photoshopu .

Bannery vytvořené ve Photoshopu mají více kladů než záporů.

1. Nízká hmotnost
2. Snadná instalace
3. Zobrazuje se na všech typech zařízení
4. Snadno proveditelné
5. Stránka se nenačte
6. Banner lze často aktualizovat

Jedinou nevýhodou je, že to není tak „živé“ jako blesk, cítíte rozdíl mezi filmem a obrázkem. To je ale jediná nevýhoda a lze ji částečně eliminovat pomocí obrázku GIF.

Než začnete vytvářet bannery, musíte udělat nějaké přípravné práce. Vyberte potřebné obrázky a tlačítka. Rozhodněte, jaký typ banneru to bude: statický nebo animovaný. Udělejte si náčrt budoucího banneru na papíře, abyste jasně pochopili, co chcete získat jako konečný výsledek.

Shromážděte všechny připravené obrázky do samostatné složky vytvořené na ploše. Po vytvoření banneru jej lze snadno odstranit a nezapomenete na to, protože bude viditelný. Takže obrázky jsou připraveny a můžeme začít!

Vytváření statických bannerů JPEG ve Photoshopu.

Otevřete Photoshop, vytvořte nový dokument: „Soubor“ - „Vytvořit“. V okně, které se otevře, zadejte název, určete šířku v pixelech a výšku v pixelech. Šířku zjistíte změřením vašeho postranního panelu. Krásně vypadá banner umístěný přes celou šířku postranního panelu. Určete výšku na základě výšky připraveného obrázku plus 50 nebo 60 pixelů - prostor pro tlačítko.

Rozlišení dokumentu – zadejte 72 pixelů, toto je nejoptimálnější rozlišení pro internet. S vyšším rozlišením bude obraz těžký, s nižším rozlišením bude nekvalitní. Vyberte barvu pozadí s ohledem na barvu pozadí obrázku.

Jak zjistit, jakou výšku má obrázek? Chcete-li to provést, otevřete svůj obrázek ve Photoshopu, klikněte na „obrázek“ - „velikost obrázku“. V okně, které se otevře, změňte šířku obrázku na šířku postranního panelu. Ujistěte se, že je velikost uvedena v pixelech, pokud existují jiné hodnoty, zadejte pixely.

Výška se automaticky změní, zapamatujte si ji nebo zapište. Klikněte na „ok“.
Přetáhněte obrázek na vytvořený dokument přidržením levého tlačítka myši a stisknutím tlačítka ALT na klávesnici. V levém panelu Photoshopu vyberte nástroj „přesunout“. První z vrchu. A pomocí šipek na klávesnici jej umístíme na banner.

Poklepáním na obrazovku otevřete složku s připravenými obrázky a vyberte tlačítko. Přetáhneme jej na banner a nainstalujeme na správné místo. Tlačítku můžete dát stínový efekt. Dvakrát klikněte na vrstvu pomocí tlačítka, v okně, které se otevře, vyberte „stín“ a nakonfigurujte potřebné parametry.

To je vše, banner je připraven! Sloučit všechny vrstvy: - „Sloučit viditelné“. Další „soubor“ – „Uložit pro web...“. Vyberte formát ukládání JPEG. Vyberte složku, kterou chcete uložit. Klikněte na „uložit“.

Vytvoření animovaného banneru GIF ve Photoshopu.

Vytvoření animovaného banneru se liší od statického pouze v tom, že musíte vytvořit několik různých vrstev, které se změní a vytvoří animaci obrázku. Nejprve se musíte rozhodnout, co bude blikat na vašem banneru. Hlavní část banneru můžete změnit. To znamená, že jeden obrázek bude nahrazen jiným. Můžete nechat tlačítko blikat nebo změnit popisek na tlačítku.

Ať už se rozhodnete animovat cokoliv, princip tvorby je stejný. Rozhodla jsem se vám tedy ukázat, jak vyrobit blikající tlačítko a měnící se nápis. Nejprve, stejně jako v prvním případě, vytvoříme nový dokument a přetáhneme do něj všechny potřebné obrázky. Vezměte prosím na vědomí, že všechny obrázky jsou získávány v samostatné vrstvě.

To je to, co nám umožňuje, aby se obraz pohyboval.
K vytvoření animace, kterou mám na mysli, budete potřebovat tlačítko bez popisku. Namaluji v různých barvách. Aktivuji vrstvu s tlačítkem (jednou na ni kliknu). Dále „obraz“ – „oprava“ – „odstín – sytost“.

V okně, které se otevře, zaškrtněte políčko pro tónování. A posunutím horního posuvníku vyberu barvu, která odpovídá mému obrázku. Poté kliknu levým tlačítkem na vrstvu a zvolím „vytvořit duplicitní vrstvu“. Zobrazí se vrstva s přesně stejným tlačítkem. Znovu jdu na „obraz“ - „korekce“ - „odstín - sytost“.

Zaškrtávám políčko - tónování. Vybírám stejnou barvu, ale s jiným odstínem. Nyní mám dvě vrstvy s knoflíkem, různé odstíny.
Je čas na text. V levém panelu vyberte nástroj „text“. Upravuji velikost a písmo. Píšu jedno slovo.

Například jsem se rozhodl udělat nápis: "Získejte to zdarma." Můžete napsat „Zjistit více“. Píšu slovo „Get“ podle velikosti tlačítka. Jednou kliknu na textovou vrstvu. Vybral jsem nástroj „přesunout“. Nápis jsem umístil striktně do středu tlačítka.

Znovu beru nástroj „Text“. Vytvořím duplikát textové vrstvy, vyberu text a nahradím ho slovem „Free“. V tomto případě bude slovo tam, kde je potřeba, můžete jej posunout trochu doprava nebo doleva, nezapomeňte použít nástroj pro přesun.
Stačí, když text nějak vybarvíme. Dvakrát klikněte na textovou vrstvu V okně, které se otevře, nastavte stín, vyberte přechod a proveďte tah.

Vše si vyberete podle barvy banneru, obrázku a tlačítek. Vše by mělo harmonicky zapadat.
Po výběru potřebných efektů klikněte na „ok“. Dále klikněte pravým tlačítkem myši na vrstvu s vybranými efekty a v okně klikněte na „kopírovat styl vrstvy“. Klikněte na vrstvu s textem bez efektů a klikněte na „vložit styl vrstvy“. Nyní mají obě vrstvy stejné účinky. Banner byl vytvořen, spustíme animaci.

Animace banneru ve Photoshopu.

Chcete-li to provést, otevřete kartu „okno“ na horním panelu a v rozevíracím seznamu vyberte „časové měřítko“ a ve spodní části měřítka – „vytvořit animaci snímku“. Název se může v různých verzích Photoshopu lišit. Například v prvních pěti musíte v okně vybrat „animace“. Myšlenka je taková, že hledáte vše, co souvisí s animací snímků. Pokud máte nějaké potíže, zeptejte se v komentářích.

Nyní musíte zavřít oči všech vrstev, které by měly zůstat neviditelné. Například: - máme dvě tlačítka, což znamená, že zavřeme viditelnost jednoho. Máme dvě slova na jednom místě – jedno slovo je dočasně zakázáno.

Níže na stupnici jsme již vytvořili první snímek. Vyberte čas zobrazení rámečku. Nebojte se, pokud se vám to nelíbí, můžete to kdykoli změnit. Klikněte na list zespodu a vytvořili jsme následující rámeček.

Aby se lišil od prvního, rozhodl jsem se změnit tlačítko. To znamená, že jsem otevřel vrstvu tlačítkem, které bylo zavřené, a zavřel tlačítko, které bylo vidět. Beru další záběr. Je čas změnit nejen tlačítko, ale i slovo.

Zavřu slovo, které bylo vidět, otevřu oko na dříve zavřené vrstvě a také vyměním oči na tlačítkách. A vytvoříme poslední, čtvrtý snímek. Měníme pouze tlačítka. Zaškrtneme políčko pro přehrávání animace – „nepřetržitě“ a spustíme kontrolu animace. Pokud je vše provedeno správně, tlačítka budou blikat dvakrát častěji, než se slova změní.

Banner je připraven. Ukládáme jej pro web ve formátu Gif.
Abyste pochopili, jak je vše potřeba udělat, nahrál jsem proces tvorby bannerů na videoklip. Nesuďte prosím přísně, protože toto je moje první videolekce. Snažil jsem se nespěchat, abyste viděli proces tvorby banneru ve Photoshopu.

Video je beze slov, ale s vysvětlivkami. Nahrával jsem to v noci, když všichni spali, takže jsem nemohl mluvit. Můžete si ale poslechnout příjemný hudební doprovod. Užijte si sledování!

Když si poprvé vytvoříte vlastní banner, proces vytváření bannerů ve Photoshopu vám již nebude připadat náročný. A animace je snadná, hlavní věcí je nenechat se zmást ve vrstvách a pečlivě měnit oči.

Pomocí stejného principu můžete vytvořit měnící se obrázek. Zkuste si banner vyrobit sami a pochopíte, že to není nic těžkého. Pokud narazíte na nějaké potíže při vytváření bannerů, kontaktujte mě, rád pomohu. Nebo si můžete objednat výrobu banneru a já vám ho vyrobím od začátku do konce.

Vytvořený banner nahrajeme do knihovny, otevřeme v samostatné záložce, zkopírujeme adresu obrázku a uložíme. Vložíme jej do kódu a vložíme kód do widgetu.

Kód pro vložení banneru do widgetu:

Nyní je čas se rozloučit, řekl jsem vám o tom, jak vytvořit statický a animovaný banner ve Photoshopu. Pokud se vám něco nedaří, napište do komentářů. A nezapomeňte kliknout na tlačítka sociálních sítí, není to pro vás těžké, ale autor je potěšen!

PS. Přečtěte si články o tom, jak nainstalovat, vyrobit, zkrášlit popř. Nespěchejte s odchodem z blogu, najdete v něm spoustu zajímavých informací.
Batalová Irina

Lekce jak vytvořit animovaný banner ve Photoshopu pro začátečníky, kteří neznají nástroje editoru. Stačí v něm umět otevírat grafické soubory. Potřebuji pouze vytvořit skutečný affiliate hosting banner. Jeho velikost bude 468 x 60 px – jedná se o jednu ze standardních velikostí (připravený banner ve spodní části stránky).

1. V hlavní nabídce programu klikněte na „Soubor - Nový“ (Ctrl+N):

V okně musíte nastavit Název, rozměry a vybrat Průhledné pozadí - nemusíte se dotýkat ostatních parametrů, klikněte na OK. Pokud máte jinou verzi Photoshopu, nebojte se, všechny kroky a nástroje budou stejné. Umístil jsem obrázek serverů na prázdný banner a musíte otevřít ten svůj: „Soubor - Otevřít“ (Ctrl + O).

Výška našeho banneru je 60 px, velikost si přizpůsobte své: „Obrázek - Velikost obrázku“ (Alt+Ctrl+I).

2. Vyberte ji nástrojem „Obdélníková oblast“ (1) nebo její částí a poté „Upravit – Kopírovat“ (Ctrl+C). Nyní na prázdném banneru vyberte přibližnou oblast vložení a poté: „Úpravy - Vložit“ (Ctrl + V). Upravte jeho polohu pomocí nástroje pro přesun (2):

3. Pomocí nástroje Výplň (3) klikněte na prázdné místo v banneru. Pokud byl váš obrázek ve formátu JPG, pak jeho pozadí zůstane, klikněte na něj - nemusí to fungovat, užitečná plocha bude přemalována. V ideálním případě je lepší mít obrázek ve formátu PNG, bez pozadí a vložit jej do již vyplněného banneru. Udělal jsem to docela dobře:

Chcete-li nastavit barvu, klikněte na čtvereček (5) a v „Paletě barev“, která se otevře, vyberte požadovanou barvu, mám žlutou: #f9f100 - můžete ji jednoduše zadat do pole ve spodní části palety :

4. Vyberte obdélník ve střední části banneru pomocí nástroje „Obdélníková oblast“ (1), vyberte bílou barvu z „Výběru barvy“ (5): #ffffff a vyplňte oblast nástrojem „Vyplnit“ (3 ). Chcete-li vrátit jakékoli akce zpět, použijte „Úpravy – krok zpět“ (Alt+Ctrl+Z). Nyní budeme pracovat s nástrojem „Text“ (4):

5. Vyberte nástroj „Horizontální text“ (4) a klikněte do bílé oblasti – zadejte požadovaný text. Nevěnujte pozornost umístění; poté přesuňte hotový nápis pomocí nástroje „Přesun“ (2). Na vodorovném Ovládacím panelu, kde jsou tlačítka (6) a (7), nastavte písmo, jeho velikost, ostrost, barvu nápisu - stejná „Paleta barev“ (5). Stačí zvýraznit nápis vytvořený kurzorem a změnit tyto parametry.

Pro první nápis „hosting“ (font KabelCTT Medium, velikost 36pt, barva #444444) byl použit nástroj „Warp Text“ (6), je na snímku obrazovky; pro druhý „od 0,4 $“ panel „Symbol“ (7) - zúžení a roztažení znaků na šířku a výšku, hustotu atd., nikoli celý nápis, ale jednotlivé znaky - zvýraznění samostatně.

U druhého nápisu: Písmo Arial, jeho velikost není stejná, tloušťka pro „0.4“ je černá, pro „from..$“ - tučné, barva červená - #ff0000. Chcete-li text uložit, klikněte na zaškrtávací políčko (8) a sousední tlačítko zruší všechny neuložené akce s textem. Poté můžete nápis přesunout a zarovnat pomocí nástroje „Přesun“ (2):

Pro první nápis byl použit efekt „Stín“, pro druhý efekt „Stroke“ je můžete použít ve stejné hlavní nabídce: „Vrstvy - Styl vrstvy“. Experimentovat. Níže vidíte panel „Vrstvy“ (neplést s položkou hlavní nabídky) - je vpravo v pracovním okně Photoshopu, pokud tam není, pak: „Okno - Vrstvy“ (F7). V něm budeme pracovat s vrstvami, máme je tři – dvě textové.

6. Pro tuto chvíli zkombinujme naše tři vrstvy: „Vrstvy – Sloučit viditelné“ (Shift+Ctrl+E) – všechny mají oči. Oko zviditelní vrstvu, pokud na ni kliknete a oko odstraníte, tato vrstva bude neviditelná. Nebo to můžete udělat jinak: vyberte všechny vrstvy kliknutím na každou vrstvu při stisknuté klávese Shift a poté: „Vrstvy - Sloučit vrstvy“ (Ctrl + E). Zůstane jedna vrstva, jejíž název můžete změnit (užitečné později) dvojitým kliknutím přímo na samotný nápis „Layer 1“:

7. Načrtneme banner výběrem vrstvy: „Úpravy – Tah“, zde šedá barva #999999:

8. Máme připravené dvě oblasti banneru, třetí bude animovaná. To se provádí poměrně rychle. Stačí vytvořit duplicitní vrstvu kliknutím na „Vrstva 1“ a poté v hlavní nabídce: „Vrstvy - Vytvořit duplicitní vrstvu“:

Pojmenujte ji „Vrstva 2“:

9. Na tuto vrstvu ve třetí části napíšeme nápis, jako na snímcích níže - použijte nástroj „Text“ (4). Vytvoří se další vrstva - textová, zkombinujme ji znovu s "Vrstva 2". Pokud je název sloučené vrstvy nesprávný, dvakrát klikněte striktně na samotný název a nahraďte jej „Vrstva 2“:

10. Znovu duplikujte „Vrstvu 2“, dostaneme „Vrstvu 3“ - zůstane to takto (s textem). A na „Vrstvu 2“ jejím výběrem kliknutím vytvoříme vyplněný obdélník. Pomocí nástroje „Obdélníková oblast“ (1) vyberte oblast s nápisem, jako na snímku obrazovky:

Vyplňte ji pomocí nástroje Výplň barvou (3), šedá barva #999999 v nástroji pro výběr barvy (5), několikrát rázným kliknutím na oblast výběru:

Máme tři vrstvy: "Vrstva 1" - prázdná, "Vrstva 2" - s vyplněným obdélníkem, "Vrstva 3" - s nápisem. Analogicky s nimi je třeba přidat další dva nápisy (viz hotový banner), tzn. šest dalších vrstev - celkem devět:

11. Zbývá animovat banner v panelu „Animace“, pokud není v pravém panelu, vyvolejte jej z hlavní nabídky: „Okno - Animace“.

Stiskem tlačítka (9) vytvoříme duplicitní rámeček (jeden tam již bude), kliknutím jej vybereme - bude v rámečku. Přejděte na panel „Vrstvy“, odeberte oko z „Vrstva 1“, zapněte oko ve „Vrstvu 2“ a kliknutím vyberte vrstvu. Přejděte na panel „Animace“, pomocí tlačítka (9) vytvořte třetí duplicitní snímek - můžete vytvořit devět snímků najednou. Princip je jednoduchý: snímek 3 – „Vrstva 3“ (zapněte oko a vyberte jej), snímek 4 – „Vrstva 4“ atd.

Tlačítko (10) slouží k vymazání nepotřebných snímků v trojúhelníku (11) nastavujeme čas pro každý snímek, v našem případě: 0,1 sec. — 0 sec. - 1 sekundu a pak analogicky. Tlačítkem „Spustit“ (12) spustíme animaci banneru.