Ako vytvoriť animovaný webový banner vo Photoshope

Vytváranie webových bannerov nie je najpríťažlivejšou prácou na svete, ale je to niečo, čo bude musieť každý návrhár urobiť v určitom okamihu svojej kariéry, pravdepodobne mnohokrát. Aj keď pri vytváraní webových bannerov neexistujú nijaké tvrdé a rýchle pravidlá, je samozrejmé, že typ musí byť veľký a priebojný.

Pretože animujeme aj toto, navrhujem vám nie viac ako tri snímky alebo animované prvky, pretože ľudia to jednoducho nebudú pozerať. Blikajúce prvky môžu tiež pomôcť upútať pozornosť diváka.

Vytvoriť tento animovaný banner pre webovú stránku nižšie ...



Vytvoriť tento animovaný banner pre webovú stránku nižšie ...

V nasledujúcich niekoľkých krokoch ukážem, ako nastaviť a vytvoriť jednoduchý animovaný webový banner, ktorý po zvládnutí bude hračka, ktorá sa bude v budúcnosti uchádzať o akúkoľvek novú prácu.

najlepší externý disk na strih videa

01. Pripravte si dokument

Spustite Photoshop, prejdite do priečinka> nové a z rozbaľovacej ponuky Predvoľba vyberte Web. V rozbaľovacej ponuke veľkosti vyberte výsledkovú tabuľku alebo ak sa vaše rozmery líšia, vyberte vlastné a manuálne zadajte rozmery pixelov.

ako nakresliť leviu hlavu

Ak chcete z ponuky prezerania vybrať hranice prichytenia k dokumentu, presunutím vodiacich prvkov sa uchytia ku všetkým hraniciam dokumentu.

02. Pridávanie grafických prvkov

Teraz umiestnime naše základné konštrukčné prvky. Vo vyššie uvedenom príklade som vložil do štvorcového loga T3 a ako som ho vytvoril, mohli ho vodítka zmeniť jeho veľkosť a ľahko ho pripevniť k okrajom dokumentu. Vložte grafiku so šípkou, ktorú použijeme neskôr, a pomocou textového nástroja nastavte svoju správu pre prvú snímku. Prilepte všetky potrebné obrázky a potom nezabudnite všetky svoje vrstvy správne pomenovať.

03. Vytváranie sekundárnych snímok

je možné nakresliť dokonalý kruh

Teraz jednoducho duplikujte svoju typovú vrstvu, vypnite textovú vrstvu pod textom a zadajte ďalšiu fázu správy, v tomto prípade „PREDAJ HNED TEĎ“. Až budete šťastní, že máte všetky prvky na svojom mieste, zlúčte čo najviac vrstiev. Keďže pozadie, logo a obrázok na obale zostanú statické, môžeme to zlúčiť, čím nám zostanú štyri vrstvy, pozadie, vrstvy typu a vrstva šípky.

04. Vytvorte rámcovú animáciu

Teraz jednoducho kliknite na kartu časová os v dolnej časti okna alebo prejdite do okna> Časová os. Kliknite na malú šípku v strede okna, vyberte možnosť „Vytvoriť animáciu rámu“ a potom kliknite na tlačidlo. Teraz vypnite všetky vrstvy okrem vrstvy pozadia a prvej vrstvy správ. Z rozbaľovacej ponuky na malom ráme animácie použite na snímku oneskorenie jednej sekundy. Teraz jednoducho kliknite na tlačidlo „duplikovať vybrané snímky“ na časovej osi, ale vypnite prvú správu a zapnite druhú správu. Tento postup opakujte pre všetky vrstvy až po vrstvu so šípkami.

05. Nechajte šípku blikať a upravte časovanie

Ak chcete šípku zablikať, jednoducho stlačte na časovej osi príkaz „Duplikovať vybrané snímky“ a šípku vypnite. Upravte čas na 0,5 sekundy a proces opakujte zapínaním a vypínaním šípky na paneli vrstiev tak, aby vyzeral, akoby blikal. Nakoniec možno budete chcieť upraviť niektoré načasovanie, kým nebudete úplne spokojní. Ľudia majú veľmi krátke rozpätie pozornosti, takže nemá zmysel byť pomalý so snímkovou frekvenciou, ale musia to vedieť prečítať.

photoshop ako vyplniť tvar

06. Uložte pre web a zariadenia

Nakoniec prejdite na možnosť „Uložiť na web“ a z rozbaľovacej ponuky vyberte GIF. Tu tiež môžete mierne znížiť kvalitu, aby ste zmenšili veľkosť súboru. Keď budete spokojní, uložte gif a potom ho jednoducho pretiahnite do webového prehliadača a vyskúšajte.