A következő tanfolyam indul

2017. szeptember 21.
abstract-background-2-500x500

Készítsünk geometrikus képeket

Valamilyen szinten a Flat designhoz kapcsolódóan nagyon divatosak és népszerűek manapság a geometrikus hátterek és képek. A legtöbb esetben talán háttérképként találkozhattatok vele például telefonoknál, táblagépeknél. Hogy mire gondolok? Nos, ilyesmire:

abstract background 2

Ilyen geometrikus képet mi magunk is készíthetünk például Adobe Illustrator segítségével, de az elég sok időt vesz igénybe és macerás is kicsit. Mi tehát a megoldás?

Készítsünk geometrikus képet generátorral

Egy generátor tehát, mégpedig az I♥▲ (I love Tri) nevezetű remek kis generátor.

1. lépés

Magát a generátort az alábbi weboldalról lehet elérni:

http://somestuff.ru/filter/HTML5/I

Itt a demó videó alatt van egy link, erre kattintva le kell tölteni egy fájlt a gépünkre. A fájlt ki kell csomagolni, majd a Triangulator mappán belüli “index” HTML-t kell megnyitni. Ezt fogjuk látni a megnyitás után:

step1

2. lépés

Ezt követően keressünk egy képet, ami tetszik Nekünk, és amit alapul fogunk venni a háttér generálásához. Célszerű szép, színes képet választani. Mondhatni, nem is a tartalom, hanem a színek, és azok elhelyezkedése az elsődleges szempont.

Nyissuk meg egymás mellett a fenti oldalt és a könyvtárunkat, melyben a kép található, majd egyszerűen fogjuk meg egérrel a képet és húzzuk át.

step2

3. lépés

A kép máris betöltődik. Ha a kép túl nagy és nem látod teljes egészében, akkor  méretezd a ctrl-t nyomva tartva az egeret tekerve. Így kicsinyíteni tudod a képet, amíg nem látod teljesen.

step3

4. lépés

A következő lépésként a felső sorban lévő “randomly” feliratra kattintunk. Ezt annyiszor tegyük meg, hogy elérjük a kívánt végeredményt.

step4

5. lépés

Előfordulhat, hogy a háromszögezett rész nem “fedi” teljesen jól a képet, ilyenkor a szerkesztőpontokat egérrel megfogva húzzuk ki szélre a háromszögeket. Itt jegyezném meg, hogy a program viszonylag nagy memóriát igényel, így ha valakinek kicsi teljesítményű számítógépe van, az bizony nehézkesen boldogulhat.

6. lépés

Amikor már viszonylag jó a végeredmény, akkor mentsük le a képet. A program svg kiterjesztést ment, amit Adobe Illustratorban tudunk megnyitni. Ha nincs Illustratorunk, akkor mentsük le svg-ként, majd valamilyen online fájl konvertáló segítségével (keressünk rá a neten) alakítsuk át png fájllá.(Nagyon fontos a png kiterjesztés,  mert bár itt tökéletesnek látszik a végeredmény, a háromszögek között lehetnek rések.)

A mentés menete a következő: felül az “export to SVG: save this link as file”-nál jobb egér gombbal kattintsunk a “this link”-re majd itt válasszuk a “Hivatkozás mentése más néven” lehetőséget.

step5

 

7. lépés

Az így mentett SVG fájlt nyissuk meg Illustratorban. Mint láthatjuk, az egész geometrikus fedés vektoros, így Illustratorban szerkeszthető és tovább finomítható tetszőlegesen. Olyannyira, hogy minden egyes háromszög külön van definiálva, így pl. tetszőlegesen alakíthatjuk, színezhetjük, stb. Bár most a képen nem látszik, de a háromszögek találkozásánál lehetnek pici rések. Ezeket úgy a legegyszerűbb eltüntetni, hogy duplikáljuk a képet (ha kell háromszorozhatjuk is).

step6

Nekem most elég volt duplikálni:

step7

Ezzel gyakorlatilag kész is vagyunk. Az elkészült képet használhatjuk háttérképként webdesign- ban, plakátoknál és egyéb kreatív munkáinknál.

Hozzászólások

  • Flo

    WOW! Nagyon tetszik! Már cak ez az egy program is új világot nyitott előttem, köszi! :-)

    • Sandeep

      Nagyon klassz lett! Amikor me9g csak a kicsi ke9pet le1ttam a bologm oldalse1vje1ban, azt hittem gyertye1t horgolte1l a kupak se1rge1ja miatt le1tszott annak). Annak sem lenne rossz, de ez nagyon f6tletes, ha jf6n a hideg!