Ha nem tud dönteni egy szín mellett, a színátmenetek kiváló választást jelentenek. A Figmában különféle színátmenetes háttereket készíthet, színátmenetet helyezhet el egy alakzatra és szövegre, körvonal-átmeneteket hozhat létre, és még sok más. Akár hálós színátmeneteket is létrehozhat az elmosódás effektussal vagy a Figma közösségi háló gradiens beépülő moduljával.
Mivel a Figma nagyon sokféle módon hozhat létre gradienst, az új felhasználóknak nehézségekbe ütközhet, hogy a kezdetektől fogva megértsék őket. Természetesen a kísérletezés a tanulási folyamat része, de sokkal könnyebb, ha minden utasítást egy helyen tárolunk. És ez a cikk pontosan ezt tartalmazza.
Különböző színátmenetstílusok létrehozása a Figmában
A Figma különféle színátmeneti stílusokat kínál, amelyek segítségével több színnel töltheti ki a háttereket vagy objektumokat a vásznon.
-
Lineáris: A lineáris színátmeneteknek két színe van, amelyek egyenes vonalban keverednek egymással.
-
Radiális: A sugárirányú színátmeneteknél az első szín egyetlen pontból indul ki, és minden irányban beleolvad a másikba.
-
Szög: A szöges gradienseknél szögek hozzáadásával határozhatja meg a gradiens mozgási irányát. Kiváló lehetőség 3D képek készítésére.
-
Gyémánt: Ahogy a neve is sugallja, a gyémánt színátmenetek egy pontból indulnak ki, és gyémánt alakban terjednek.
A színátmeneti stílusok létrehozásának lépései ugyanazok. Az egyetlen különbség a kiválasztott stílusban van. A következőképpen hozhat létre színátmenetet a Figmában:
- Nyisson meg egy üres Figma-fájlt.
- Érintse meg a „Téglalap eszközt” a bal oldali eszköztáron.
- Az eszköz segítségével rajzoljon egy téglalapot a vászonra, amelyet gradiens referenciaként használ.
- Válassza ki a létrehozott téglalapot.
- Kattintson az aktuális színre a „Kitöltés” alatt a jobb oldali panelen a színválasztó megnyitásához.
- Nyomja meg a legördülő menüt, és módosítsa az alapértelmezett „Szilárd”-t a kívánt színátmenetstílusra. Két színes stop vagy négyzet jelenik meg.
- Válassza ki az egyes színmegállókat, és válassza ki a színátmenethez hozzáadni kívánt színt.
- Érintse meg a „Kitöltés” melletti négy pontot a színátmenet stílusként való mentéséhez.
Ezután beállíthatja az átlátszóság értékét, elhelyezheti a színmegállókat oda, ahol az egyik színt szeretné befejezni, és a másodikat kezdeni, hozzáadhat egy másik színütközőt, mozgathatja őket a vásznon, vagy módosíthatja a színátmenet szögét. Ha végzett a beállítással, mentse újra a színátmenetet (8. lépés).
Megjegyzés: Egy hozzáadott színütköző törléséhez válassza ki a megállót, és nyomja meg a „Delete” vagy a „Backspace” gombot a billentyűzeten.
Mostantól bármilyen objektumra alkalmazhatja a színátmenet stílusát.
Hogyan hozzunk létre háló gradienst a Figmában
A hálós gradiensek népszerűek a nagy cégek és márkák körében. Ha gyakori Instagram-felhasználó, minden nap látja az alkalmazás logóját. Így ezek létrehozásának ismerete hasznos lehet olyan helyzetekben, amikor valamilyen érdeklődést kell hozzáadnia a projektekhez.
Mint már említettük, háló gradiensek hozhatók létre a csatlakoztat a Figma közösség biztosítja. De van egy egyszerűbb módja annak, hogy több színt adjon hozzá bárhol, ahol csak akarja, külső eszközök nélkül.
A következőképpen hozhat létre háló gradienst a Figmában:
- Írjon be egy új Figma-fájlt.
- Hozzon létre egy keretet.
- Jelölje be a „Tartalom kivágása” négyzetet a jobb oldali panelen, hogy a kereten kívülre kerülő elemek levágásra kerüljenek.
- Kezdje el a különböző formák hozzáadását, vagy hozzon létre saját objektumot a kereten belüli „Pen” eszközzel.
- Módosítsa az egyes új űrlapok „Kitöltés” értékét, hogy eltérjen a többitől.
- Válassza ki az összes formát.
- Az „Effektusok” alatt nyomja meg a legördülő menüt, és válassza a „Réteg elmosása” lehetőséget.
- Nyissa meg a „Réteg elmosása” beállításokat, és növelje az értéket, amíg már nem lát egyértelmű határokat az alakzatok között.
- Mentse el a stílust a fentiek szerint, és használja más objektumokon.
A háló gradiens létrehozásának másik módja a szögstílus használata. Kicsit eltérő, de ugyanolyan érdekes, lenyűgöző eredményt ad, mint az első oktatóanyag.
A következőket kell tennie:
- Nyisson meg egy üres vásznat.
- Használja a kívánt formát, és adja hozzá a vászonhoz.
- A „Kitöltés” alatt módosítsa a „Szilárd” értéket „Szögletesre”.
- Válassza ki a színátmenet színeit.
- Állítsa be a színátmenet szögét és egyéb szempontjait.
- Adjon hozzá egy másik alakzatot, lehetőleg „Eclipse”, azaz egy kört.
- Rakd rá a másik alakzatra a vászonra.
- Adjon hozzá egy lineáris színátmenetet, és változtassa meg a színt olyanra, amely jól illeszkedik a többihez.
- Az „Effektek” alatt használja a „Réteg elmosódása” effektust, és homályosítsa el az új alakzat vonalait, hogy beleolvadjon az első alakzatba.
Kép színátmenete a Figmában
A színátmenet létrehozásán kívül egy meglévő képet is átfedhet színátmenettel, hogy dimenziót adjon hozzá. „Elfakul” hatást ad, vagy egy láthatatlan fényforrás illúzióját, amely kívülről világít a képre.
A következőképpen adhat hozzá színátmenetet egy képhez a Figmában:
- Nyisson meg egy új fájlt a Figmában.
- Húzza át azt a képet, amelyhez hozzá szeretné adni a színátmenetet a vásznon.
- Adjon hozzá egy alakzatot, amely megfelel a tetején lévő kép méretének.
- Válassza ki a színátmenet stílusát a „Kitöltés” részben.
- Válassza ki a színátmenet színeit a színválasztóból.
- Állítsa be az átlátszóságot, a szöget stb.
Használhatja a „Toll” eszközt is, és rajzolhat egy alakzatot arra a területre, ahol a színátmenetet szeretné elérni.
Szöveg színátmenete a Figmában
A Figma programban a szövegen a színátmenet létrehozása nagyon hasonló ahhoz, ahogyan bármilyen más alakzathoz színátmenetet hoz létre. Íme a lépések:
- Nyisson meg egy új vásznat a Figmában.
- Nyomja meg a „Szöveg” eszközt a bal oldali eszköztáron.
- Kattintson bárhová a vásznon, és kezdjen el írni.
- Válassza ki a szöveget, és lépjen a „Kitöltés” elemre.
- Válassza ki a színátmenet stílusát.
- Nyomja meg az egyes színmezőket, és keresse meg a színátmenethez hozzáadni kívánt színt.
GYIK
Hány színt adhatok hozzá egy színátmenethez a Figmában?
Tetszőleges számú színt adhat hozzá mind a normál, mind a hálós Figma gradiens stílusokhoz. De próbálj meg ne ess túlzásba. Mivel a színátmeneteknek több átmeneti színük van, ötnél több túl sok lehet, még hálós színátmenet esetén is.
Importálhatok gradienst a Figmába?
Bármilyen színátmenetet importálhat a Figmába. Például beilleszthet kódot a CSS-ből (Cascading Style Sheets) a „Kód” panel megnyitásával és a kód beillesztésével. A színátmeneteket az Adobe Illustratorból is importálhatja.
Hol találok ingyenes Figma gradienseket?
Ingyenes és fizetős Figma gradienseket találhat a Figma közösség. A Figma felhasználók által készített gyönyörű és egyedi dizájnok tömkelege található benne. Szűrhet bővítmények, fájlok és widgetek szerint. Csak írja be a „gradiens” szót a felső keresősávba, és keresse meg a kívántat.
Legyen funky színes színátmenetekkel
A színátmenetek kiváló módja annak, hogy a tervezést egyedivé és személyre szabottá tegyük. A Figma pedig lehetővé teszi a zökkenőmentes átmenetet bármely két vagy több választott szín között. Azonban ne vigyük túlzásba. Keverje össze a jól egymáshoz illő színeket, és próbáljon meg ugyanazon a színpalettán belül maradni.
Próbáltál már színátmenetet készíteni a Figmában? Mondja el nekünk az alábbi megjegyzésekben, hogy melyik színátmenet stílust és mire használta.
