Hogyan készítsünk egy animált gif banner a honlapon a Photoshop CS, üzleti blog Max Meteleva
Az alkalmazás mindig ugyanaz - vonzza a látogatók figyelmét, ezért mentek el az oldalon.
Tehát hozzunk létre egy új dokumentumot a Fájl -> Új. Nem lehet betartani a szabványok és válassza bármilyen méretű és hosszúságú és magasságú lehet választani a megfelelő méretet a legördülő listából a Photoshop beállításokkal.
Mindenek előtt azt kell tenned, hogy kérdezni felvázolja körül a zászló 1 pixel.
- Hozzon létre egy új réteget, és nevezzük el „Keret”
- Nyomja meg a CTRL + A, jelölje ki az összes. Akkor megy a Szerkesztés elemet -> stroke. A következő beállítások érvényesek:
Hossza: 1 pixel, szín: fekete, helyét (Location): a központtól, a keverési mód (blendingmode): normál, Opacity (Átlátszóság): 100%
Ez ad nekünk egy világos egy képpont határ körül banner. Most az összes további rétegek egymásra, de a legfontosabb réteg látható marad. Amit meg is tettünk.
Most fel kell tennünk színes gradiens az ovális mezőben. Ide panelmenüben Layer (Layers) -> Layer Style -> Blend. Én az alapértelmezett beállításokat használja az alábbi színekben:
Továbbá, tegyen egy kis belső árnyék. Csak cserél a homály, hogy 20%
Ezután létrehozunk egy lekerekített régióban, ami alatt található a logó. Tegyünk egy átmenetes kitöltés az alábbi színekben:
Tedd 2px stroke ovális területen. De hol van az a logó, én töltse ki a háttérben a világosszürke, hogy nem néz ki annyira lapos.
És most folytassa a legérdekesebb része a banner tervezés - animációk.
Ahhoz, hogy szemléltessük a két blokk kerül a mi fő területe a szöveget, vagyis ők felváltva villog, először az egyik, majd a másik, és ez lesz a banner animáció.
Segítségével a „Szöveg” eszköz létrehozása tetszőleges szöveget, amely illeszkedik a határvidék.
Most elrejteni a szöveg réteget és egy második réteget egy másik szöveget, hozzátéve, hogy a hely, ahol az első.
Kiválasztunk egy második réteget a szöveg, akkor kap a következő:
Most teljesen felkészült az animáció, váltson Image Ready módban kattintson a megfelelő gombra.
A kép Ready, akkor nézze meg a következő rétegek palettán animáció, az alábbiak szerint:
Az ikonra kattintva az „új frame” (vagy az új keret), így másolja a kiválasztott réteg.
Kezdve 2 a kiválasztott réteg, válassza ki a réteget látható szöveget paletta rétegeket, és mozgassa a pixel (nyomja meg a felfelé nyíl kétszer).
Ha megnézzük az első keret és a második keret, akkor veszi észre, ezek néhány különbség egymástól.
Most két példányban az utolsó keret, majd a lefelé mutató nyílra, és mozgassa a szöveg réteg körülbelül 10 pixel, és állítsa a réteg átlátszóságát állítsd 70%
Ismét kettős az utolsó képkocka húzásával a szöveg réteget egészen a 15 pixel, és állítsa be a fedettség a réteg 40%
Most dolgozunk a második szövegmezőbe.
Elrejtése az előző mezőbe, és lépni egy másik réteg láthatóvá tenni. Haladunk azt is, mint az előző, azaz 10 pixel, és ezzel 40% fényelnyelés
Klón az utolsó keretet.
Mozgás réteg Ez a réteg a szöveg mintegy 15 pixel fel- és fedőképesség 70%
Ismét klón az utolsó keretet.
Most, hogy a szöveg réteg nagyobb mintegy 10 pixel, és állítsa be a fedettség animált gif banner 100%
Most, hogy a szöveg alatti terület 2 pixel.
Most csak annyit kell ismételni 8. lépésben, majd ezt a réteget, és egy másik réteg dudor.
Ha mindent helyesen, akkor kap körülbelül 14 képkocka.
Alján minden egyes képkocka látni fogja a „0 másodperc.” Ez a késleltetés a kockák között.
Cserélje ezek a keretek késés 0,05 vagy 0,1, attól függően, hogy milyen gyorsan szeretné futtatni banner.
Állítsa be az értéket 0,05, kattintson a nyílra a 0 másodperc, majd válassza ki az „Egyéb”, és adja meg a kívánt számot.
Mint látható, a szöveg görgetése nagyon gyorsan, olyan gyorsan, hogy lehetetlen volt ideje elolvasni. Tehát meg kell, hogy a késedelem értéke 2 másodpercig, majd az eredmény akkor lesz valami, mint ez.
történik nyolc lépés).
Ha úgy tűnik, nehéz lecke, amit csatolni alatt forráskód banner.