DesignAkadémia

Mockup, avagy tedd egyedi környezetbe az alkotásaidat!

A mockup-okat, azaz a kreatív sablonokat alkotásaink, portfóliónk “tálalására”, bemutatására használjuk, hogy az elkészített munkáink egyedi, valódinak tűnő környezetben köszönjenek vissza.

Mit is jelent maga a “mockup”?

Eredeti fordításban makettet, mintadarabot jelent. A grafikai tervezés világában azonban sokkal inkább hívhatjuk kreatív sablonnak, amely látványtervek elkészítésére, alkotások prezentálására alkalmas

Mire használjuk a kreatív sablonokat?

Ezek a kreatív sablonok nagy segítséget nyújtanak az adott munka prezentálásában, hiszen egy előre megtervezett és elkészített közegbe, környezetbe, miliőbe tudjuk beilleszteni az adott alkotást, mint például a megtervezett logót, névjegyet, szórólapot, plakátot, magazint, csomagolást, kirakattervet, étlaptervet, autómatricát, egyenruha-dizájnt, stb. Ezáltal a beillesztett elem olyan hatást kelt, mintha már eredetileg is ebben a környezetben fotózták volna le. Ha mockup segítségével szemléltetjük a terveinket, alkotásainkat, akkor a megrendelőnk számára is könnyebb elképzelni, hogy az adott munka hogyan is fog kinézni, “hogyan is fog működni” a gyakorlatban. Nem mellesleg sokkal profibban és látványosabban lehet mockupokba illesztve bemutatni a munkáinkat, tehát a stílusos, egyedi mockup-ok remekül megállják a helyüket a portfóliónkban is, a referenciamunkák bemutatása során, weboldalon elhelyezve, valamint közösségi oldalakon egyaránt.

Hol találunk mockup-okat? Honnan szerezhetjük be őket?

A mockupok alapvetően PSD fájlok, azaz Photoshop fájlok, a Photoshop grafikai programban lehet őket megnyitni és dolgozni velük. Hamarosan mindezt megnézzük a gyakorlatban is! : )

Az interneten böngészve rengeteg helyen találkozhatunk akár ingyenes, akár megvásárolható mockup-okkal. Az ingyenesen letölthető lehetőségek között is remek mockupokat találunk! : )

Sőt, akár mi magunk is készíthetnénk mockupot – némi PS rutinnal a hátunk mögött. : )

Akár úgy, hogy az adott munka köré építünk ki megfelelő, témában passzoló környezetet, vagy profi mockupot készítünk, azaz intelligens objektumot*** illesztünk a sablonba. A smart object olyan réteg, mely raszteres vagy vektoros képekből származó képadatokat tartalmaz. A kép forrásával együtt megőrzi minden eredeti tulajdonságát, így lehetővé teszi, hogy a képen minőségromlás nélkül hajtsunk végre változtatásokat, szerkesztéseket, ezek nincsenek hatással a kép eredeti, érintetlenül hagyott képpontjaira. Mindegy, hogy milyen gyakran méretezzük át, forgatjuk el, torzítjuk vagy alakítjuk az intelligens objektumot, az mindig megőrzi élességét és határozott kontúrjait.

Azonban ma már igen széles a kínálat a kreatív sablonok világában, így számtalan mockup áll a rendelkezésünkre.

Hogy hol? Íme:

Néhány remek ingyenes és fizetős mockup-lelőhely:

Free Mockup

Mockupworld

PSD Mockups

Mockupsdesign

Mockup Cloud

Unblast

Graphicburger

Behance

Pixeden

CreativeMarket

Milyen mockupok léteznek?

Szinte bármilyen témában, bármilyen munka szemléltetéséhez találunk mockupot – a logótól kezdve a csomagolásterven át egészen a pólódizájnig.

Nézzünk is meg néhány példát!

logó prezentálására alkalmas mockup
kétoldalas névjegykártya esetében bizonyos sablonoknál lehetőségünk van a névjegy előlapjának és a hátlapjának az együttes bemutatására is
többoldalas szórólapokhoz is találhatunk olyan mockupot, mely a szórólap mindkét oldalát megfelelően tudja szemléltetni
a magazinok prezentálására készített sablonok többnyire már magában foglalják a magazin előlapjának, belső lapjainak és hátlapjának együttes megjelenését
plakátot “élő” környezetben szemléltető mockup
weboldalakat, webdesign terveket, azok különféle eszközökön (laptopon, tableten és mobilon) való megjelenését is általában egy mockupon belül tudjuk szemléltetni is egyaránt
csomagolástervek bemutatásához is remek mockupok állnak a rendelkezésünkre
textiltermékek dizájnját is lehet mockupokkal szemléltetni

Milyen egyedi mockupokkal találkozhatunk?

Léteznek olyan mockupok, melyek egyedien módosítják a beillesztett objektumot. 

Néhány példa – a teljesség igénye nélkül:

Az adott munkának, például a beillesztett logónak fémes textúrát, fémes színt kölcsönöz, tehát a logó a mockupban már nem az eredeti színvilágában köszön vissza:

A mockup az adott munkát bevésetté teszi:

A kreatív sablon az objektumnak domború hatást is adhat:

Az adott munkát a sablon segítségével egyszínűvé, például fehérré vagy feketévé is tehetjük, hogy az ne az eredeti színében kerüljön bemutatásra – ha kifejezetten ez a cél:

Olyan kreatív sablonokkal is találkozhatunk, melyekben a háttér színe, árnyékai, keretei és elemei is módosíthatók:

Hogyan lehet a mockupokkal dolgozni?

Ahogyan már az előzőekben említésre került – a mockupok alapvetően PSD fájlok, azaz Photoshop fájlok, a Photoshop grafikai programban lehet őket megnyitni és dolgozni velük, de akkor sem meglepődnünk, ha esetleg Illustrator avgy egyéb programban megnyitható mockuppal találkozunk.

A kreatív sablonok is rétegekből állnak, és legfőbb elemük (a szintén már említett) intelligens objektum. Az intelligen objektum lesz az, ami az adott munka megjelenítését végzi el. A smart object a mockup szerves része, ennek segítségével tudjuk az adott munkát az adott tárgyba és környezetbe illeszteni.

Nézzük, hogy hogyan tudunk a mockupokkal dolgozni!

A mockupot általában ZIP mappaként tudjuk letölteni. A ZIP mappát csomagoljuk ki, majd keressük benne magának a mockupnak a PSD fájlját. Nyissuk meg ezt a PSD fájlt a Photoshop programban, és ezzel párhuzamosan nyissuk meg azt a munkát is, melyet a mockupba szeretnénk illeszteni.

Ez lehet például:

  • Illustratorból kiexportált logó PNG formátumban
  • Photoshopban készített, JPG formátumban mentett szórólap
  • InDesign program készült kiadvány, melyről JPG/PNG formátumú fotó készült (pl. a PDF formátumú kiadvány egyik oldalát megnyitjuk a Photoshopban, majd JPG fotóként mentjük)

A mockupba, annak intelligens obejtumába tehát legegyszerűbben és legkönnyebben a már fix, “nézőmódhoz” JPG/PNG formátumban lementett munkát lehet illeszteni, de természetesen például AI fájl objektuma vagy magában a Photoshopban készült munka rétegei is “behúzhatók”.

A mockup ablakában, a jobb oldali Rétegek panelen találhatjuk a mockup elemeit, rétegeit. (Megjegyzés: ha összetettebb mockupról van szó, akkor a mockup elemei, azok rétegei mappákban helyezkednek el –ha szükséges, nyissuk le ezeket a mappákat, hogy átlássuk a mockupot alkotó rétegeket.)

A kreatív sablonok legfontosabb eleme az intelligens objektum, mely segítségével a sablonba tudjuk illeszteni a saját munkánkat. A legtöbb esetben ez az intelligens objektum, annak rétege a “Your design here”, “Design here” elnevezéssel szerepel a Rétegek panelen, ezzel is jelezve, hogy ezzel a réteggel, ezzel az elemmel kell dolgoznunk, ebbe kell beleillesztenünk a munkánkat.

Duplán kattintsunk az intelligens objektum bélyegképére. Ennek hatására az külön ablakban nyílik meg. Erre a munkaterületre kell áthúznunk, beillesztenünk a saját munkánkat. Ha esetleg itt már találunk tartalmat, ne ijedjünk meg! : ) Ezen a munkaterületen általában jelen van a mintaobjektum is, mely iránymutatást ad abban, hogy a saját munkánkat mekkora méretben és hova helyezzük el.

A meglévő mintaobjektum rétegét a Réteg panelen található “szem” ikon segítségével elrejthetjük, de akár törölhetjük is ezt a réteget. A “helyére” behúzhatjuk az előzetesen már megnyitott, külön ablakban található saját munkánkat, melyet szükség szerint még tudunk méretezni, forgatni, igazítani.

Ha megfelelően elhelyeztük a munkánkat, kattintsunk a felső menüsorban a “Fájl/Mentés” lehetőségre. Ennek hatására kerül “beolvasztásra” a saját munkánk az intelligens objektumbe, ennek eredményeként pedig magába a kreatív sablonba.

Térjünk vissza a mockup eredeti ablakába, ahol már az egyedi háttérbe illesztett munkánk fogad minket

Az elkészült mockupot a “Fájl/Mentés másként” opcióra kattintva JPG/PNG vagy egyéb formátumokban is elmenthetjük, és így használhatjuk őket például a portfóliónkban.


Használj bátran mockupokat munkáid bemutatására! : )

Hozzászólás írása

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

A felhasználói élmény fokozásra ún. cookie-kat használunk. Reméljük, nem gond számodra, ha mégis, kattints a további infó gombra.
OK, üzenet bezárása