Hogyan használd a mockup-okat?

A mockup-okkal én akkor ismerkedtem meg, amikor annak idején a Kreanod-on meghirdetett pályázatokra küldtem be pár logótervet. Ott ugyanis csak az rúghat labdába, aki magas színvonalon tudja prezentálni az ötletét. Bár pályázatot nem sikerült nyernem, de nem bánom, hogy megpróbáltam, mert örömet szerzett a logótervezés minden perce. Na, de térjünk vissza a mockup-okra. Annyit tehát már tudunk, hogy a munkánk, például egy logó prezentálására szolgál. Maga a szó eredetileg mintát, modellt vagy makettet jelent, de konkrétabb megfogalmazásában kreatív sablont értünk alatta. Tehát van például egy logónk, amit beleillesztünk egy tetszőleges sablonba. Ez azért jó nekünk, mert így a logónk úgymond életre kel, azaz láthatjuk, hogy hogyan nézne ki élőben, ha például egy plakáton, hirdető táblán, könyvön, csomagoláson stb. jelenne meg. Tulajdonképpen a mockup térbe helyezi az általunk készített képeket anélkül, hogy azzal nekünk bajlódni kellene.

Sokkal érthetőbb a dolog, ha rákattintunk valamelyik mockup lelőhelyre, például a Mockupworld-re. Ez például egy olyan hely, ahol jó minőségben, ingyen tudjuk letölteni őket. Ha nekiállunk böngészni köztük, akkor láthatjuk, hogy rengeteg fajta van. Érdemes kategória szerint szűrni és a konkrét munkánkhoz leginkább passzoló témában válogatni. Mivel én a blogomhoz készítettem logót, így nálam olyan sablonok jöhettek szóba, amiken például papír, könyv, napló, naptár, pecsét, laptop, tablet, asztali pc stb. szerepel. (Update: itt is nagyon jók vannak EamejiaGraphicburger)

Na, de hogy is néz ki ez a gyakorlatban. A mockup-ok használatához szükséges némi Photoshop ismeret, de teljesen elegendő az alapszintű tudás. Nekem sincs több. 🙂 Először is válasszunk ki egy szimpatikus sablont, aztán töltsük le. Nagy méretük miatt általában zip fájl-ban vannak tömörítve, így a letöltés után ki kell csomagolni őket. A legtöbb mockup PSD formátumú, amit csak Photoshop-ban tudunk megnyitni. Rögtön láthatjuk, hogy a mockup több rétegből áll, de azzal egyenlőre semmi dolgunk. Nyissuk meg a Photoshop-ban a saját munkánkat is, ami általában jpg vagy png kiterjesztésű. A logókat például png-ben szoktuk lementeni.

Tehát a Photoshop-ban a mockup is és a logónk is meg van nyitva. Kattintsunk a mockup-ra és most vizsgáljuk meg tüzetesebben a rétegeket.

Általában a réteg elnevezések már sokat elárulnak, például tudhatjuk, hogy a “Logo Design” nevű rétegben (másnéven intelligens objektumban) fog megjelenni a logónk. “Your design here”, “Design here” vagy “Add logo here” elnevezéseket is szoktak adni. Lényeg a lényeg, hogy ebbe a rétegbe kell behúzni a saját képi anyagunkat. Ehhez kattintsunk duplán a rétegre (ne a réteg nevére és ne is a láthatóságra, hanem a bélyegképre) majd okézzuk le a felugró kis ablakot.

Ezt követően a Photoshop megnyit nekünk egy harmadik lapot is, amin a mockup-on eredetileg szereplő logó látható. Ide kell átmásolnunk a sajátunkat a megfelelő méretben.

Fontos, hogy elég nagy felbontású legyen, mert különben homályos lesz a végeredmény. A másolás és beillesztés után a logónk egy új rétegen fog szerepelni. Ez azért jó, mert így az alatta lévő, eredeti képet el tudjuk rejteni vagy akár törölhetjük is. Ezt követően menjünk a fájl menüpontra, majd a mentésre.

Most kattintsunk a mockup-ra és máris láthatjuk a logónkat szépen beillesztve a környezetbe. Ha esetleg a sablonon szerepel még oda nem illő objektum, akkor ugyanúgy, ahogy korábban, rákattintva a réteg bélyegképére tudjuk megnyitni és formázni (elrejteni vagy törölni).

Kapcsolódó bejegyzések:

Hozzászólás

Az e-mail cím nem lesz közzétéve. Kötelező mezők *