Hálós elrendezés Photoshopban

Szunyogh Krisztina képe
Photoshop grid - Használd kreatívan a rácsos elrendezést



Forrás: https://stocksnap.io/photo/REIC39V50M

A rácsos elrendezés felhasználása design elemként izgalmas lehetőségeket rejt, érdemes megismerkedni vele. A felhasznált fotó ingyenesen letölthető, a forrást a kép alatti címre kattintva érheted el.

1 Új dokumentum létrehozása

Hozz létre egy új dokumentumot a Photoshopban (Fájl/File -> Új/New), mely 1125 px széles és 1500 px, magas, felbontása 125 ppi és a háttere fehér. Természetesen a méretnek alkalmazkodnia kell az általad választott fotóhoz.

Új dokumentum megnyitása Photoshopban



2 A rács kialakítása

Nyisd meg az Szerkesztés -> Beállítások -> Segédvonalak, rács és szeletek… (Edit -> Preferences ->Guides,Grid& Slices…) menüpontot. A Rács (Grid) beállításoknál a Rácsvonalak gyakorisága (Gridline every) legyen 5,715 cm , és az Alosztások (Subdivisons): 1. Ez megint egy olyan döntési lehetőség, amelyet a saját elképzelt munkád alapján kell meghoznod. Lehet, hogy sűrűbb, vagy éppen ritkább rácsra lesz szükséged. Az alapértelmezett szürke színt átállíthatod egy élénkebb színre, ha rákattintasz. A kép karakterétől függően válaszd ki a rács szerkezet színét. Kattints az OK gombra, ha elkészültél.

Milyen sűrű legyen a négyzetrács?



3 A rács megjelenítése

Menj a Nézet -> Megjelenítés -> Rács (View -> Show -> Grid) menüpontra. Most megjelenik egy 4 oszlopos rács.

Grid megjelenítése Photoshopban



4 Egy pixel széles kijelölések

Az Eszköztáron kattints és tartsd lenyomva a Téglalap kijelölő eszközt (Rectangular Marquee Tool), és válaszd az Egyoszlopos kijelölő eszközt (Single Row Marquee Tool ). 1 pixel széles sor vagy oszlop kijelölésére szolgál. Kattints a dokumentum tetején lévő első vízszintes rácsvonalra. Ezután nyomd meg és tartsd lenyomva a Shift billentyűt, majd kattints a többi vízszintes rácsvonalra is. Ezzel kijelölöd az összes vízszintes rácsvonalat. Újabb verziókban nem a Rectangular Marquee Tool „mögött” találod az Egyoszlopos kijelölő eszközt, hanem kattintani kell az eszköztár alján található "..." ikonra, és ott találhatod az extra eszközök között.

Hogyan lesz a rácsból vonal Photoshopban?



5 Függőleges rács vonalak

Ezután menj vissza az Eszköztáron a Téglalap kijelölő eszközt (Rectangular Marquee Tool) eszközre, válaszd a Egysoros kijelölő eszköz (Single Column Marquee Tool) eszközt. A Shift billentyűt lenyomva tartva kattints a függőleges rácsvonalakra. Ezzel kijelölöd az összes függőleges rácsvonalat is.

Hogyan lesz a rácsból vonal Photoshopban?



Kattints az Új réteg (New Layer) létrehozása ikonra.

Nyomj egy D gombot (Alapértelmezett fekete-fehérre állítod az előtér és háttér színeket).

Nyomj egy CTRL+Backspace gombot. (Ezzel fehér színnel töltöd ki a kijelölést).

Nyomj egy CTRL+D gombot (Ezzel eltünteted a kijelölést).

Kapcsold ki a rács megjelenítését Nézet>Megjelenítés>Rács (View>Show>Grid)

Nevezd át ezt az új réteget Rácsozat rétegnek.

(Ne ijedj meg, olyan mintha nem történt volna semmi. Azonban, ha most kikapcsolod a Háttér réteg láthatóságát, és nagyítasz, akkor halványan egy fehér színnel kitöltött rács látható az új rétegünkön. A következő lépésben majd jól láthatóvá válik a rács).

6 A kép megnyitása

Nyisd meg a modell fotóját, vagy a saját, általad választott képet és húzd a dokumentumba. Letölthető innen. Tedd a modell fotóját a Rácsozat réteg alá. Máris jól látszik a rácsunk is.

7 Photoshop áttűnés készítése

A rétegek panel alján lévő Rétegmaszk hozzáadása (Add Layer Mask) ikonra kattintva hozzáadunk egy rétegmaszkot a modellréteghez. Majd válaszd ki a Színátmenet eszközt (Gradient tool) az eszköztáron. Az Opciók sávon a színátmenet szerkesztéséhez kattints a lefelé mutató nyílra a színátmenet-indexkép jobb oldalán, válaszd a Festőszín áttetszővé (Foreground to Transparent) lehetőséget (a második a bal felső sarokban). Majd kattints a Lineáris színátmenet (Linear Gradient) ikonra.

Nyomj meg az X gombot, ezzel az előtér színét feketére állítod. Most kattints a színátmenet eszközzel a modell fotó alsó széléhez közel és húzd a színátmenet eszközt felfelé. Így a fotó elhalványul alul. Többször is használd az eszközt, amíg a modell keze el nem tűnik.

Photoshop áttűnés készítése



8 Vastagabb rácsozat

Most a rácsvonalakat kicsit vastagabbá tesszük egy egyszerű rétegstílussal. Kattints rá a Rácsozat rétegre, hogy aktívvá váljon, majd kattints a Rétegek panel alján található Rétegstílus hozzáadása (Add Layer Style) fx ikonra. Válaszd ki a Körvonalazást (Stroke). Állítsd a színt fehérre. A méretét állítsd 2 px-re, és kívül legyen a pozíciója. Kattints az OK gombra.

Vastagabb rácsozat



9 Fény- és színhatások állítgatása

Most kattints a modell rétegére, és csinálj belőle egy másolatot (CTRL+J). Ezután nyomj egy Ctrl+Shift+U gombot, hogy eltávolítsd a színt erről a másolt rétegről. Válaszd a Szűrő (Filter) menü alatt a Torzítást (Distort), és válaszd a Szórt fény (Diffuse Glow) lehetőséget. Állítsd a Szemcsézettséget (Graininess) 3-ra, a Ragyogás mértékét (Glow Amount) 5-re, és a Törlés mértékét (Clear Amount) 10-re. Ezzel hangsúlyozzuk kicsit a fényeket és egy stílusos zajt is kap a fotó. Kattints az OK gombra. (Ezek a beállítások változhatnak a választott fotódtól függően, ezért kísérletezz más beállításokkal is.)

Fény- és színhatások állítgatása



10 A kontraszt javítása

Javítunk egy kicsit a kontraszton is. Nyomd le a CTRL+L billentyűkombinációt a Szintek beállításához. Vagy a menüsorból is eljuthatsz ide: Kép>Korrekciók>Szintek. Állítottam a Bemeneti szintek (Input Levels) fekete és szürke csúszkáit az árnyékterületek sötétítésére. nem biztos, hogy erre a lépésre az általad választott fotó esetében is szükség lesz.

A kontraszt javítása



Ezután módosítsd a réteg Keverési módját (Blend Mode) Világosításra (Lighten). Kísérletezz más Blend módokkal is, érdekes hatások alakulhatnak ki. Sok esetben jól működik a Lágy fény (Soft light) keverési mód is.

Blend mode állítás



11 Fehér négyzetek hozzáadása

Most menj vissza a Rácsozat rétegre. Válaszd a Varázspálca (Magic Wand) eszközt az eszköztárból. Kattints az egyik négyzet belsejébe. Nyomd meg a Shift billentyűt, tartsd lenyomva és válassz még két másik négyzetet. Így kijelöltél három négyzetet.

Miután elvégezted a kijelöléseket, hozz létre egy új üres réteget. Töltsd ki a kijelölést fehérrel (a festőszínt fehérre állítjuk és nyomunk egy ALT+Backspace-t). Ezután töröld a kijelölést (CTRL+D). Így létrehoztunk három fehér kockát.

Fehér négyzetek hozzáadása



12 Fekete-fehér négyzetek kialakítása

Kattints ismét a Rácsozat rétegre. Válaszd újra a Varázspálca eszközt (Magic Wand) és jelölj ki még három másik négyzetet. Ezután győződj meg róla, hogy az előtér és a háttér színei az alapértelmezett fekete-fehér alapértelmezett értékre állítva (Nyomj egy D gombot).

Kattints a Rétegek panel alján található Új kitöltési réteg létrehozása ikonra (Create New Adjustment Layer), és válaszd a Színátmenettérkép (Gradient Map) lehetőséget. Ezzel az aktuálisan kijelölt négyzetek fekete-fehérek lesznek.

Fekete-fehér négyzetek kialakítása



13 Kreatív szövegek és feliratok

Végül válassz egy szép fontot és írj néhány szöveget a fehér négyzetekre. Kísérletezz bátran, játszhatsz más beállításokkal és színekkel. Kíváncsian várjuk a megoldásodat!

Kreatív szövegek és feliratok



Hozzászólások

Van egy fekete hátteres portréfotóm, és ahhoz a fekete rács-vonalakat, és a fekete hátterű, világos szövegeket fogom kipróbálni. Először névjegykártyán is el tudtam volna képzelni, de talán arra pont nem alkalmas, mert túl kicsi lesz egy négyzet. Mindenesetre szép, hangulatos munka. Kedvet csinál az alkotáshoz.

Új hozzászólás

Kocsis Kata

programtervező matematikus, webdesign oktató
Kocsis Kata, programtervező matematikus, webdesign oktató

Életem legfantasztikusabb döntése volt a sok kompromisszummal terhelt alkalmazotti lét feladása. Nagyon büszke vagyok négy éve alapított saját cégünkre, ami az én szememben életforma, hivatás, közösség és gyönyörű célok együttese. A Kreatív Webdesign Tanfolyamok nem egyszerűen online tanfolyami termékek a számomra. A szaktudáson, a tapasztalaton túl olyan értékeket is szeretnék közvetíteni, amelyek a mai társadalomban hiánycikknek számítanak. A vizuális kultúra és igényesség fejlesztése, a művészet és az alkotás becsempészése a hétköznapokba, az együttműködésben rejlő erő megtapasztalása azoknak a hallgatóknak is nagyon sokat adhat, akikből végül nem is lesz webdesigner.

Melyik témák érdekelnek a legjobban?

* kötelező mezők



Ezek a témák érdekelnek

Kicsi a bors csomag - Honlaptervezés kisvállalkozásoknak

Az akció keretében a Webdesign Workshop modul mellé a Kicsi a bors honlaptervezés csomag részeként megkapod ajándékba a Felhasználói élmény tervezés modul teljes anyagát. Egyetlen modul árával megegyező összegért 6 havi tudásanyagot kapsz, ha december 23.-ig rendelsz.

A kisvállalkozások igényeire szabva

ÁR: 48.260 Ft + áfa

Minden gyakorlati feladat a saját honlapodra vonatkozik.

Tovább a részletekre ->

Go to top