Hogyan készítsünk animációt a zászlóban

Helyszíni tervezés az ábrán 15 perc alatt: az elrendezés illusztrációkkal

Ebben a leckében megértjük, hogyan lehet a helyszín kialakítását az ábrán 15 perc alatt a gyakorlatban. A leszálló oldal elrendezését illusztrációkkal fogjuk elvégezni. Meg fogja tanulni, hol kell kezelni a minőségi illusztrációk ingyen és hogyan kell használni őket a projektben.

Felkészülés a webhelytervezés létrehozására

Először is le kell töltenie és telepítenie kell az Ön számára készített készletet. Ezzel felgyorsíthatja a munkát a céloldal létrehozásakor. Kattintson ide a készlet letöltéséhez

A készlet beállítása Menjen a “Vázlat” szakaszba, és húzza azt más fájlokhoz. A bal oldalon is van egy “import” ikon. Kattints ide, és válassza ki a “HAB” fájlt a számítógépen.

Plug-in telepítése illusztrációkhoz a lobogóban lévő webhelytervezés létrehozásához

Ebben a leckében a plugint a “Storyset by Freepik” illusztrációkkal fogjuk használni, amelyeket a linkre kattint. A telepítéshez kattintson a “Telepítés” gombra a tetején, jobbra.

Lépésenkénti utasítások a figma webhely kialakításához

Az első képernyő létrehozása

Először is, meg kell tennie az elemeket a korábban telepített készletből. Azt javaslom, hogy a fejlécet és a szöveget a szöveggel a fentiek szerint. Helyezze a kalapot a szövegre.

Hogy aktiválja a bővítményt, hogy mi meg „Kattintson a bal oldali menü”, majd a „Plaagins” és válassza ki a listából „StorySet által Freepik”.

A pluginban kiválaszthatja az illusztrációk stílusát. Az első listát választom, majd az agyag a kívánt illusztráción.

Illusztrálok egy keretben az elemek és a szövegünkbe.

Kiválasztok egy keretet és a jobb oldali ablaktáblát, a “kitöltés” betű alján helyezze el a színértéket

Ezután megváltoztatom a szöveg színét fehéren.

Az ábrán nem szükséges elemeket eltávolítok. Ha valamilyen elemet szeretne kiválasztani, kattintson a “Ctrl” bilincsre, és kattintson a bal egérgombra, hogy kiválasszon egy objektumot 1 kattintással.

Hozzon létre egy kört az “Ellipse” eszköz használatával.

Tettem egy kört a keretben, és a háttérbe költöztem. Ehhez kattintson a “Ctrl + Alt + [” gombok kombinációjára.

Változtassa meg a kör színét a # 3bb.

Kártyák létrehozása az első képernyő alján

Ezután másolja a termékkártya készletet. A másoláshoz kattintson a “Ctrl + C” gombra.

Az elemek beillesztéséhez kattintson a “Ctrl + V” gombra.

A Belefész elemet a kártyáról a bal egérgombok és az Alt gomb lenyomva tartásával. Igaz az irányba.

Hozzon létre egy másik téglalapot a téglalap belsejében. Ehhez aktiválja a “téglalap” eszközt felülről.

Két elemet választok, és összehangolom őket egymáshoz képest, ha az ikonokra kattintva.

I Kiemelés 2 téglalap, nyomja meg a jobb egérgombot, és válassza a Keret Selecitont.

Átneveztem az “img” réteget.

Másolja az elemek csoportját egy “alt” pontokkal.

Ennek eredményeként 6 négyszögletet hozok létre, amint azt a fentiek szerint.

Elindítom a plugint a “Storyset by Freepik” illusztrációkkal, és kattintson a téglalapra. Akkor az illusztrációban. Hasonló művelet más 6 téglalappal.

A gombokat és az árakat választom, a “Ctrl” “Shift” rögzítő gombokkal. Ezután törölje a “Backspace” gombra kattintva.

Kártyák, árak és gombok nélkül.

Mozgassa a létrehozott téglalapokat illusztrációkkal az áru kártyákon lévő téglalapok között.

Nem távolítom el a szükséges elemeket a kártyák tetején. Kiderül 3 kártyát illusztrációkkal.

Duplikált kártya a “Ctrl + D” gombra kattintva. Ezután 3 maradék illusztrációkat helyezzen el ezeken a kártyákon.

6 kártyát mutatott illusztrációkkal.

Mozgó kártyák a keretünkhöz.

Színes változás a helyszín kialakításában Illusztrációkkal a figma

Következő lépésként válassza ki az illusztráció és a jobb oldalon, alul a betűkkel „Selection Colors” választom kék helyett a kék szín, ami most.

Minden elem “kék” a színpalettán.

Ha például rózsaszínre változtatsz, az összes elem színe is megváltozik.

Ezenkívül másolhat néhány elemet a készletben. Például számok szöveggel.

Ezután helyezze őket a cím alján.

Távolítsa el a felirat és a behelyezett szöveg színének megváltoztatását a fehérre.

Ez az, ami az illusztrációk, plug-in és a készlet használatának eredményeként történik, amelyet felkészítettem az Ön számára. Hogyan készítsünk oldalakat hibáztatva a fenti videóban.

Következtetés

Tehát ebben a videóban megtudta, hogyan kell létrehozni egy webhelyet (tervezési céloldal) a. Szintén foglalkozott egy plugint is, amely lehetővé teszi a hűvös illusztrációk beillesztését. Lásd a többi web design órákat, hogy segítsen kitalálni a Figma programot, és töltse ki a kezét.

Cikk Szerző: Vladimir Chernyshov