A vízzel töltött üvegszöveg az átlátszóságot és a mozgást ötvözi a lenyűgöző hatás érdekében. Tökéletes digitális projektekhez, például reklámbannerekhez vagy közösségi média grafikákhoz, ezt a megjelenést Photoshopban hozhatja létre és animálhatja. Rétegstílusok, maszkok és idővonal-animációk segítségével a szöveged valósághű vízkitöltéssel és áramló mozgással lesz figyelemfelkeltő. Ebben a bemutatóban lépésről lépésre megmutatom, hogyan hozhatsz létre animált, vízzel töltött üvegszöveget. Lássunk hozzá, és keltsük életre a szövegedet!
1. Új dokumentum
Kezdjük egy új dokumentum létrehozásával, amelynek mérete 2090 x 1000 Px.
Ezután menjünk az sxc.hu oldalra, hogy megtaláljuk a háttérképünket. A keresőmaszkba egyszerűen írjuk be a következő képszámot: 1327434.
Ezután kattintsunk a képre, és húzzuk be a Photoshop dokumentumunkba.
Lehet, hogy kicsit szélesebbre kell méreteznünk a képet (Ctrl+T), hogy elférjen a munkaterületünkön.
2. Szöveg létrehozása
Most írjuk meg a szöveget, amelyre a hatást szeretnénk létrehozni. A #dbdbdb színt, 300 Px-es méretet és a "FutonCondensed" Bold betűtípust használjuk. Egy másik félkövér betűtípus is megfelelne. Csak sok helyre van szükségünk, hogy a víz jól láthatóan kiemelkedjen.
Duplikáljuk a szövegréteget, és nevezzük át mindkét réteget. Az alsót "bottom"-nak, a felsőt pedig "top"-nak nevezzük.
3. Réteghatások az "alsó" réteghez
Kattintsunk duplán az "alsó" rétegre, és adjuk hozzá a következő rétegstílusokat:
- Cseppárnyék:
| Szín: | #707070 |
| Szög: | 120°, kapcsold ki a "Globális fény" opciót. |
| Távolság | 1 Px |
| Méret | 10 Px |
- Árnyék befelé:
| Szög: | "Globális fény" kikapcsolása |
| Távolság | 0 Px |
| Méret | 10 Px |
| Kontúr | Töltse be a "Water 1" kontúrt a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours menüpontra és válassza ki a "water-1.shc" fájlt. |
- Lapított él és domborzat:
| Méret | 10 Px |
| Blur | 3 Px |
| Árnyékolás | 120°, "Globális fény" kikapcsolása, 11° magasság |
| Kontúr | Töltse be a "Water 2"-t a kontúr melletti nyílra, majd a jobb oldali kis nyílra, majd a Load contours-ra kattintva válassza ki a "water-2.shc"-t. |
Közbenső eredmény:
- Lapított él és domború kontúr:
| Sima | Jelölje be a négyzetet |
| Kontúr | Töltse be a "Water 3"-at a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours (Kontúrok betöltése ) gombra, és válassza ki a "water-3.shc" fájlt. |
| Tartomány | 100% |
Közbenső eredmény ("top" réteget előzetesen ki kell kapcsolni):
A "felső" réteg átlátszatlanságát 0%-ra állítjuk, hogy később csak a réteghatások látszódjanak.
Ezután duplán kattintsunk a "felső" szövegrétegre kicsit arrébb jobbra, és állítsuk be a következő réteghatásokat:
- Árnyék befelé:
| Szög: | Kapcsolja ki a "Globális fényt" |
| Távolság | 0 Px |
| Méret | 7 Px |
| Sima | Jelölje be a négyzetet |
| Kontúr | Töltse be a "Water 4"-et a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours menüpontra és válassza ki a "water-4.shc" fájlt. |
Közbenső eredmény:
- Lapított él és domborzat:
| Méret: | 12 Px (később kísérletezhet 24 Px-el a még nagyobb plaszticitás érdekében) |
| Blur | 2 Px |
| Árnyékolás: | 120° "Globális fény" kikapcsolása, 16° magasság |
| Kontúr | Töltse be a "Water 5"-öt a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours menüpontra és válassza ki a "water-5.shc"-t. |
Közbenső eredmény:
- Lapított él és domború kontúr:
| Kontúr | Töltse be a "Water 6"-ot a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours (Kontúrok betöltése ) menüpontra, és válassza ki a "water-6.shc" fájlt. |
| Tartomány | 100% |
Közbenső eredmény:
5. töltse ki a szöveget vízzel
Most fogjuk a téglalap eszközt...
... és rajzolunk egy téglalap alakzatot, amely lefedi a szöveg alsó felét.
A szín legyen #4594ab. Ennek az új rétegnek a két "alsó" és "felső" szövegréteg között kell elhelyezkednie.
6. Állítsa be az első horgonypontokat
Most fogjuk a horgonypont hozzáadása eszközt...
... és horgonypontokat állítunk be az egyes karakterek külső szélein.
7. Hozzunk létre hullámot
Miután ezt megtettük, további horgonypontokat állítunk be a karakterek belsejében.
A közvetlen kijelölő eszközzel kicsit felfelé és lefelé mozgatjuk őket, hogy hullámot hozzunk létre. Ha túl sok pont van, a horgonypontok törlése eszközzel ismét eltávolíthatjuk őket.
Közbenső eredmény:
8. körvonalak eltávolítása
Ezután raszterizáljuk a téglalap réteget, ezért először duplikáljuk, elrejtjük az alsó réteget, majd a másolaton jobb egérgombbal kattintunk, és a Raszterizálás réteget választjuk .
Lenyomjuk a Ctrl billentyűt, és miközben lenyomjuk, az "alsó" szövegréteg rétegpalettáján lévő ikonra kattintunk, hogy kijelölést hozzunk létre a szöveg körül.
Ezután a Ctrl+Shift+I billentyűkombinációval invertáljuk a kijelölést, ismét kijelöljük a víz alakú másolatot, és lenyomjuk a Del billentyűt. Ezután elrejtjük az alsó víz alakzat réteget.
9. Adjunk réteghatásokat a vízhez
Ezután duplán kattintsunk a víz rétegre a réteghatásokhoz, hogy a víznek valódi víz textúrát adjunk.
- Cseppárnyékolás:
| Blending mode | Többszörözés, #4494ab |
| A globális fény kikapcsolása | A deaktiválása. |
| Távolságtartás | 3 Px |
| Trapping | 12 % |
| Kitöltési méret | 3 Px |
Közbenső eredmény:
- Árnyék befelé:
| Kitöltési módszer | Többszörözés, #4494ab |
| Szög: | -75° |
| Távolság | 0 Px |
| Méret | 16 Px |
Közbenső eredmény:
- Lapított él és domborzat:
| Méret | 9 Px |
| Elmosódás | 3 Px |
| Szög | 120°, "Globális fény" kikapcsolása, magasság 42° |
| Kontúr | Töltse be a "Water 7"-et a kontúr melletti nyílra, majd a jobb oldali kis nyílra kattintva, majd a Load contours menüpontra és válassza ki a "water-7.shc"-t. |
| Mélység mód | Színes utólagos expozíció, #4295ac |
Közbenső eredmény:
A következő beállítások létrehozzák a víz textúráját:
- Szerkezet:
| Mintázat | 9 Px |
| Scale | 101 % |
| Mélység | +356 % |
- Fényesség:
| Kitöltési módszer | Többszörözés, #4293aa |
| Méret | 10 Px |
| Outline | széles kúp alakú, lásd alább. |
Közbenső eredmény:
Most a víz egy kicsit sötét, ezért hozzáadunk egy színátfedést. És hogy a világosabb szín ne tűnjön túl laposnak, a kitöltési módszert is megváltoztatjuk. A specifikációk a következők:
- Színes átfedés:
| Beolvasztási mód | Kemény világos, #24bce1 |
Közbenső eredmény:
- Fokozatos átfedés:
| Beolvadási mód | Lágy fény |
Közbenső eredmény:
Közbenső eredmény nagyítva:
Ahhoz, hogy a fennmaradó szöveg ne csak szürke, hanem üvegedénynek tűnjön, egyszerűen menjünk az "alsó" rétegre, és állítsuk az átlátszóságot 0%-ra.
Végeredmény:
10 variáció: A kék árnyalatának megváltoztatása
Itt szeretném megmutatni, hogy mit tehetünk még a szöveggel néhány apró optimalizálással. Többek között megváltoztathatjuk a víz kék tónusát, ha a rétegpalettán hozzáadunk egy Hue/Saturation (színárnyalat/telítettség ) korrekciós réteget...,
mozgassuk ezt a víz alakú rétegünk fölé, és hozzunk létre egy vágómaszkot az Alt billentyű lenyomva tartásával és kattintással, hogy a hatások csak ezt az alsó réteget érintsék.
A víznek egy kicsit több mélységet adhatunk a csúszkák néhány beállításával.
11 Variációk: A víz animálása
Egy másik lehetőség az lenne, ha megduplázná a víz réteget (először alkalmazza a vágómaszkot az Alt+kattintással ismét), majd duplán kattintva a Flatten Edge and Relief (Lapos él és enyhítés ) lehetőségre, hogy hozzáférjen a réteg stílusbeállításaihoz.
Ezután lépjen a Struktúra menüpontra, és változtassa a mélységet 280 %-ra. Ez egy kicsit megváltoztatja a víz mozgását.
Ezután ismét duplikáljuk a víz réteget, hogy másodszor is megváltoztassuk a struktúrát...
... és a mélység értékét 470 %-ra állítjuk.
Ezután az Ablak>Animáció menüpontra lépünk, hogy előhívjuk az animációs panelt.
Ezután az alábbi szimbólumra kattintunk alul, hogy elérjük a keretnézeteket:
Most 2x kattintsunk az alábbi ikonra, hogy további 2 képkockát hozzunk létre.
Ezután kiválasztjuk az első képkockát, ha rákattintunk:
Ezután elrejtjük az alsó két vízréteget. Csak a felsőnek a vágómaszkkal együtt kell láthatónak lennie.
Ezután a második keretre kattintunk alul, elrejtjük a felső és az alsó vízréteget, és csak a középsőt mutatjuk meg. Hozzáadjuk a színárnyalat-szaturációkorrekciós réteget.
Most ugyanezt tesszük a harmadik kerettel, hogy csak az alsó vízréteg legyen látható. Ezután jelöljük ki mind a 3 képkockát, és állítsuk be a másodpercet 0,2-re.
Bal oldalon kattintsunk a Once melletti háromszögre, és válasszuk a Unlimited (Korlátlan ) lehetőséget, hogy az animáció ne csak egyszer játsszon le, hanem újra és újra megismétlődjön.
Kattints a lejátszás gombra, hogy megnézd, hogyan mozog a víz. Ezt most elmenthetjük GIF-fájlként a Fájl>Mentés webre és eszközökre menüpontra kattintva.
Ott válasszuk ki a GIF-et, és kattintsunk a Mentés gombra .
Ha meg akarjuk nézni az egészet, akkor jobb, ha a fájlt egy böngészőbe húzzuk. Ott aztán lejátszásra kerül.
Így már készen is vagyunk. Remélem, tetszett ez a workshop. Alább láthatjátok az animált végeredményünket:
