Návody na vytváření bannerů ve Photoshopu. Animovaný banner ve Photoshopu

Dobrý den, přátelé! Jsem opět s vámi - Vladimir Savelyev, a dnes pokračujeme v tématu vytváření bannerů pro web! V první části článku jsem vám řekl, že vám to pomůže realizovat vaše nejdivočejší nápady!

Nyní je čas ukázat vám, jak vytvořit bannery ve Photoshopu! Vlastně vás nečeká nic těžkého a strašného, jen po mně zopakujte všechny kroky a společně dojdeme do finálního finále, totiž vytvoříme náš první reklamní banner!

No, nebudu dlouho tahat kočku za koule, pojďme ...

Vytvoření banneru v Adobe Photoshop

Před zahájením práce je velmi důležité přesně vymodelovat povahu samotného banneru (jeho rozměry, zda bude statický nebo animovaný). Důležité je také určit barvy, použití podniková identita, vymyslete chytlavé titulky a slogany.

Poté můžete spustit Photoshop a vytvořit nový obrázek pomocí průhledné pozadí(Soubor/Nový) velikost, například 468 x 60 pixelů;

Zobrazíme panel pro práci s vrstvami „Vrstva“.
Pozadí vytváříme jako samostatnou vrstvu - zde radíme moc nešetřit a umisťovat jakýkoli nápadný prvek banneru na samostatnou vrstvu až do té míry, že si pro každé písmeno sloganu vyberete vlastní vrstvu.

Na samostatné vrstvě reklamní hovor, stejně jako fotografie předem připravená ve velikosti, znak.

Skládáme všechny prvky banneru a určitě jich vytvoříme několik možnosti to nezasahuje do diskuse s kolegy.

Všechny možnosti ve vícevrstvé verzi jsou uloženy v samostatné soubory PROTI ve formátu psd(všimněte si, že formát jpg si "nepamatuje" informace o vrstvách, shromáždí všechny vrstvy do jedné a v budoucnu již rozdělení nebude možné).

Je velmi užitečné se na tuto chvíli vzdálit od počítače, dát si pauzu v práci a vrátit se k němu další den, abyste mohli zhodnotit, co se udělalo, s „čerstvým vzhledem“ a vybrat konečnou verzi, která bude opravena a přeloženo do jpg.

Práce je z velké části kreativní povahy, na hranici zvládnutí nástrojů programu Photoshop, smyslu pro psychologii, vliv reklamy a jejího předmětu.

Jak udělat banner ve Photoshopu animovaný (soubor GIF)? A náš nativní Photoshop se s tímto úkolem vyrovná s třeskem! Otevřete záložku - okno - Animace.

Dále v tomto okně musíte přidat snímky skrytím a zobrazením vrstev. Zjistíme také rychlost zobrazení snímku a jeho smyčkování!

Musíte pochopit, že už vytváříte nějaký druh videa, což znamená, že se neobejdete bez malého „scénáře“. Přinejmenším bude velmi důležité přesně vymodelovat celý charakter animace – várku každého „hrdiny vrstvy“.

Zde je potřeba vše přesně definovat:

časové parametry chování každé vrstvy;
chování jeho transparentnosti;
trajektorii pohybu.

Případ to není nijak těžký, ale dá vám pocítit, jak je tato profese scénáristy-režiséra náročná.

Veškerou práci zajišťuje hlavní myšlenka – vícevrstevný obraz a možnost pracovat s každou vrstvou zcela nezávisle na sobě.

Tady je takový banner, který jsem vytvořil za 5 minut! K dokonalosti to má samozřejmě daleko, ale mým cílem bylo ukázat vám možnosti Photoshopu a povedlo se!

Ano, málem jsem vám zapomněl říct o svém nálezu V minulém článku jsem mluvil o tom, že jsem si koupil video kurzy Sergeje Buibarova, o tom, jak vytvářet bannery A vydělat na nich! Po podrobném studiu (celý den jsem sledoval video Serezhoných triků a triků) jsem si uvědomil, že takové kurzy jsou v Runetu velmi potřebné! Rozhodně doporučuji nákup...

Ahoj drazí přátelé. Dnes si povíme něco o bannerech, jak udělat animovaný banner ve Photoshopu. Viděli jste bannery na mnoha stránkách více než jednou, možná jste tyto bannery umístili na své stránky. Smyslem každého banneru je samozřejmě upoutat pozornost návštěvníka. A pokud si vyberete dobré obrázky, pak udělat slušný banner není těžké.

Chcete-li tedy uložit animovaný banner, musíte otevřít položku nabídky "Soubor"— "Uložit pro web".

Nyní je vaším úkolem si vybrat formát gif Photoshop udělá zbytek za vás. S nastavením můžete samozřejmě experimentovat. Ale nemyslím si, že je to nutné.

V důsledku toho získáte podobný banner.

Jak nainstalovat banner na web

Nestačí udělat krásný banner. Stále je třeba jej nainstalovat na web. K tomu je třeba nahrát na váš web samotný banner. Můžete to udělat pomocí nebo prostřednictvím .

Nyní na místo webu, kde chcete banner zobrazit, vložte tento kód:

Pamatujte, že kódy se vkládají do zdroj webu nebo prostřednictvím widgetů. Nezapomeňte změnit odkazy a velikosti bannerů.

Banner, který jsem vytvořil, má ideální velikost pro sitebar, takže je nejjednodušší ho vložit přes widget.

Chcete-li to provést, otevřete administrativní Ovládací panel WordPress – « Vzhled» - - typ widgetu "Text".

Poté přidejte widget na lištu webu a vložte do něj kód banneru. Nezapomeňte změnit odkazy!

Hotovo, užijte si plody své práce.

A nyní sledujeme video tutoriál, v němž uvidíte vše jasně a mnoho otázek se vyřeší sami.

Přátelé, to je pro dnešek vše. Přeji hodně štěstí a dobrou náladu! Uvidíme se v nových článcích.

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

Co je bannerová reklama

Bannerová reklama - grafický obrázek reklamní charakter. Billboardy na ulicích, fáborky nad obchody, obrázky na webových stránkách na internetu, na které po kliknutí přejdete na jinou stránku – to vše jsou bannery. Pouliční transparenty se objevily už dávno, ještě předtím, než existovalo rádio. V roce 1994 ale unikly na internet a rychle si začaly získávat popularitu. Bez reklamy se dnes neobejde žádný podnik, a to zejména reklama na internetu, a bannery jsou jedny z nej efektivní nástroje při propagaci zboží a služeb.

Jaké typy bannerů jsou

Venkovní reklamní banner. Vyrábí se ze speciální PVC fólie, vinylového, latexového nebo nylonového papíru. Představuje obdélníkové plátno různé velikosti na kterých jsou vytištěny reklamní informace. Lis je vyroben tiskárnami pro velkoformátový tisk - plotry.
Reklamní bannery na internetu. Zpočátku to byly jasné, zapamatovatelné obrázky, ale s rozvojem technologií se objevily bannery s animovaným obsahem v podobě krátkého videoklipu a dokonce i interaktivních miniher. 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, jak je implementovat.

Statický. Nejjednodušší banner- obrázek s reklamním obsahem. Velikost souboru je malá, takže se načte rychle, i když pomalý internet. Vytvořit banner je snadné jak ve Photoshopu, tak v jiných grafické editory.
Animovaný. Váží několikanásobně více než statické, a proto se načítají pomaleji, ale jsou pro uživatele nápadnější. Vytvořit takový reklamní banner ve Photoshopu je již mnohem náročnější.
Bohatý text. Banner, který vypadá jako informační článek s grafickou součástí.
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.

Velikost banneru

Než se naučíte, jak vytvořit rozvržení banneru ve Photoshopu, musíte se rozhodnout o jeho rozměrech. Standardem je 100 x 100 pixelů. Nejčastěji používané možnosti jsou 468 x 60 a 234 x 60. První číslice určuje šířku a druhá určuje délku. Vertikální banner by tedy měl 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že jsme se dozvěděli, že můžete vytvořit banner ve Photoshopu jako velké velikosti stejně jako miniaturní. Ale neměli byste spěchat a než otevřete program, abyste vytvořili banner, jako v každém kreativním podnikání, musíte odhadnout design a obsah. Doporučujeme vám 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čí myšlenku napsat slovy. Pak už můžete vymyslet, jaké obrázky můžete vložit a kam je stylově umístit, včetně případného loga firmy. S největší pravděpodobností bude výsledný papír 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 na volné zdroje.

Vytvoření bannerové reklamy

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

V tomto článku vytvoříme ve Photoshopu CS6 statickou bannerovou reklamu o rozměrech 468 x 60 pixelů s textem „Výprodej iPhone 5. Nenechte si to ujít“.

Toto byl úvodní článek pro začátečníky s minimem podrobný návod vytvoření banneru. Na internetu je spousta odborné literatury a videonávodů. Když věnujete pár dní studiu tohoto úžasného programu, můžete tvořit mnohem lépe reklamní bannery. Za zmínku také stojí, že existují podobné produkty s nízkou hmotností funkčnost, stejně jako aplikace speciálně vytvořené pro vytváření

Pokračujeme v lekci o vytváření bannerů. Dnes se podíváme na to, jak si můžete vyrobit animovaný banner pro svůj web.
V předchozí lekci jsme se zabývali hlavním rozdílem mezi animovaným bannerem a animovaným bannerem a poukázali jsme na jeho výhody a nevýhody.
Upozorňuji vás na tom, že ve svých návodech na tvorbu bannerů neberu v úvahu samotný skript a vývoj nápadu banneru. Jde o velmi důležitou a dokonce bych řekl i hlavní fázi, protože bez toho, abyste přesně věděli, CO přesně chcete svým bannerem říci a JAK si to představujete, nemá smysl se pouštět do výroby banneru.

Proto mluvím pouze o technické stránce tvorby bannerů a o tom, že když je nápad a scénář, tak si banner může udělat každý sám.
Animovaný banner lze vytvořit nejen ve Photoshopu, ale i v dalších programech k tomu speciálně upravených, kterých je velké množství. Budeme o nich také mluvit, ale o něco později. Mezitím se pustíme do tvorby banneru v mém oblíbeném Photoshopu.

Jak vytvořit animovaný banner ve Photoshopu.
Možnost 1.
Animovaný banner vzniklý jednoduchou změnou obrázků (pozadí, reklamy). K tomu potřebujeme provést pouze tři jednoduché kroky:

Krok 1. Přípravný.
vyberte velikost banneru (v našem případě 468x60) a vytvořte prázdný soubor
fotíme předem připravené snímky pro náš banner, které již byly přivezeny správnou velikost banner, zkopírujte je a vložte každý z nich do našeho souboru jako samostatnou vrstvu (otevřete obrázek - vyberte jej - zkopírujte Ctrl + C - přejděte do našeho souboru - vložte Ctrl + V). Pro svůj banner jsem připravil 3 obrázky (obrázek A).

Krok 2. Tah pro banner:
Vyberte vrstvu 1. dvojklik Na vrstvě vyvolejte nabídku „Style vrstvy“ a z této nabídky vyberte „Tah“.

Po zvolení šířky tahu, jeho polohy a barvy tyto parametry opravíme kliknutím na tlačítko "Použít jako výchozí". Barva tahu by měla jasně zvýrazňovat obrysy našeho banneru, což znamená, že by měl být středně jasný a kontrastní ve vztahu k pozadí obrázků i pozadí vašeho webu.
Pojďme k vrstvě 2. Dvakrát na něj klikněte a v okně „Style vrstvy“ vyberte „Tah“ a klikněte na OK. (nastavení stylu tahu necháme beze změny)
Podobně zakroužkujeme poslední třetí vrstvu-obrázek.

Krok 3. Vytvoříme přímo animaci pro náš banner.

Vyberte si v horní menu Photoshop "Window" - "Animation" a vyberte animaci snímek po snímku. Obrázek B podrobně ukazuje, co každé jednotlivé tlačítko na panelu animace znamená. (Obrázek B)

Vytváříme snímky animace: první snímek se vytvoří, když se postavíme na vrstvu prvního obrázku, pro vytvoření druhého snímku stiskneme tlačítko 7 (obrázek B) a přejdeme do druhé vrstvy, pro vytvoření třetího snímku znovu stiskneme tlačítko 7 (obrázek B) a „zapnout“ třetí vrstva je vrstva našeho třetího obrázku.
Rozhodněte se o načasování animace. Nastavíme čas na každém snímku a stiskneme tlačítko 4, abychom viděli, jak to dopadne. Pokud Vám něco nevyhovuje, upravíme čas. Pokud to vyhovuje a nechceme nic jiného měnit, pak výsledný nejjednodušší animovaný banner uložíme.

Zde uvádím pouze popisnou část. tento krok, můžete se na to podívat ve videu, které je zveřejněno na konci lekce.

Vše, nejjednodušší animovaný banner ve Photoshopu je připraven.

Při sledování videa si všimněte, že jeho vytvoření ve skutečnosti trvalo asi 3 minuty.

Možnost 2. Animovaný banner získaný v důsledku překrytí různých pozadí na stejném prázdném pozadí textové zprávy(nebo možná nějaké obrázky).

Princip tvorby takového banneru popisovat nebudu, v zásadě je podobný jako u možnosti 1, rozdíl je pouze ve vytvoření animace snímku:

1 rámeček - pozadí + první text
2 rámeček - pozadí + druhý text
3 rámeček - pozadí + třetí text

Na videu můžete vidět vše v reálném výkonu.

Animace textu pro vytvoření animovaného banneru.
A ve videu jsem ukázal, jak udělat animaci textu pro animovaný banner. Je ukázán sekvenční proces tvorby "reklamního" textu. Nejprve ukazuje, jak provést pohyb prvního textu zdola nahoru, poté se druhý text přesune zprava doleva, jako by „skákal“, a poslední text se přidá jednoduše jako rámeček.

Budou otázky - ptejte se, určitě odpovím podrobně.

Snad je to pro dnešek vše. Zkoušejte, experimentujte! Tady je slíbené video!

Obecně platí, že vytváření animovaných bannerů ve Photoshopu je fascinující proces. Ale pokud se nechcete obtěžovat a experimentovat, pak si něco povíme příště speciální programy vytvářet animované bannery, u kterých obecně potřebujete mít pouze nápad a scénář a všechny manipulace s animací se dělají jakoby mávnutím ruky Kouzelná hůlka! A také vám řeknu, jak vložit banner na vaše stránky, a dokonce se vám pokusím ukázat, jak udělat animovaný a flashový banner.

A ještě něco... Lekce tvorby animovaných bannerů se Vám budou hodit nejen pro tvorbu bannerů pro Váš web, ale i pro tvorbu jakékoliv animace. Ostatně princip animace zůstane stejný, pouze velikost obrázek se změní!

Pokud vás tedy téma animace zajímá, přihlaste se k odběru aktualizací blogu, ať vám nic neunikne!

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

Talentovaní grafici ji samozřejmě hledají, aby vytvořili úžasný projekt. Po přečtení několika doporučení, jak vytvořit banner ve Photoshopu, se však můžete naučit, jak vytvořit své vlastní zajímavé projekty sami. Je možné, že později, až budete pilovat 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ž měli zkušenosti s tvorbou bannerů v Adobe Photoshop CS6, může uvést několik jejich výhod. Zejména se docela snadno instalují, zabírají velmi málo místa, což je tak důležité, když je na místě nedostatek. volný prostor. Je také poměrně snadné aktualizovat a zobrazovat na všech zařízeních.

Postup a pravidla pro tvorbu 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ého náčrtu, znázorněného v čistý břidlice papíru, abychom měli předem představu, co chce autor nebo zákazník nakonec vidět. Poté byste měli vybrat příslušné obrázky a umístit je všechny do samostatné složky.

Po dokončení přípravné fáze můžete přistoupit k hlavní části, která zahrnuje vytvoření samotného banneru. Zpočátku se otevře Photoshop, ve kterém nový dokument.

V této fázi je důležité zadat požadované rozměry v pixelech. Šířka může být libovolná, ale zkušení návrháři doporučují nastavit šířku rovnou šířce postranního panelu. 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.

Povolení nového dokumentu si uživatel také nastavuje sám, ale je důležité vzít v úvahu některá pravidla. Zejména se doporučuje použít rozlišení 72 pixelů, protože se zvýšením tohoto ukazatele bude hotový banner pro web příliš těžký a se snížením dojde ke ztrátě kvality. Pozadí banneru je přizpůsobeno tomu, které má hlavní obrázek.

Připravený obrázek by se měl přesunout do vytvořeného nového dokumentu, poté se pomocí šipek umístí na správné místo, které bylo dříve určeno na náčrtu. Dále se na tento dokument přesune tlačítko, které lze trochu ozdobit doplněním o další stín. Chcete-li to provést, stačí na něj dvakrát kliknout a poté provést příslušná nastavení pro nastavení stínu.

Poté je banner považován za připravený, zbývá pouze sloučit všechny aplikované 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 možností

Animovaný banner dokáže efektivněji přitáhnout pozornost návštěvníků webu. Grafik musí nezávisle rozhodnout, co by mělo být přímo 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 vytvořit statické možnosti, abyste dokonale zaplnili svou ruku, a poté, po prostudování doporučení, jak vytvořit banner ve Photoshopu cs6, přistoupit k realizaci svých plánů.

Zpočátku musí uživatel vytvořit jednoduchý statický banner, na který úspěšně umístí hlavní obrázek, tlačítko a vytvoří nápisy. Chcete-li vytvořit animované tlačítko, 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é „Oprava“ a poté najděte položku „Sytost barev pozadí“. Kliknutím na něj se otevře okno, ve kterém se volí tónování, umožňující uživateli pohybem posuvníku vybrat požadovaný odstín.

Po dokončení práce s první vrstvou byste měli vytvořit 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 byste měli zastavit výběr na stejné barvě, ale s jiným odstínem.

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

Nyní zbývá uvést banner do pohybu – ve skutečnosti jej animovat. Chcete-li to provést, musíte otevřít 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 musí vybrat optimální čas jeho zobrazení, které lze později v případě potřeby upravit.

Na závěr zbývá zaškrtnout políčko „Hrát neustále“, uložit pro Web, ale ve formátu gif.

Po přečtení pokynů, jak vytvořit banner ve Photoshopu, můžete začít s praktickou implementací svého plánu a ujistit se, že vlastní zkušenostže při vytváření statických a animovaných bannerů není nic složitého. Poté, co je 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ň změní nejen barva tlačítka, ale i obrázek, nápis atd.