A következő tanfolyam indul

2017. október 19.
mockup

Így használjuk a mockup-okat!

Mi is ez a mockup? („mokáp”-nak ejtjük, egyben és kötőjellel is írható). Eredeti jelentésében mintadarabot, modellt, makettet jelent, ha a saját szakterületünket nézzük, akkor kreatív sablonnak is nevezhetjük. Hogy mire való egy mock-up? Saját munkánkat (pl. logó, névjegykártya, plakát, webdesign-terv) illeszthetjük a sablonba, és ennek segítségével prezentálhatjuk. Hogyan? Az adott munka beleolvad ebbe az előre elkészített környezetbe, miliőbe, designba, mintha eredetileg is azzal együtt fotózták volna le. A jobbnál-jobb mockup-okkal profin tálalhatjuk a munkáinkat, igen szemrevaló és hatásos látványt kapunk kézhez. :) A Webdesign tanfolyam hallgatói is megismerkednek ezekkel, ők is nagyon szeretik a kreatív sablonokat, grafikai munkáikat is ilyen formában adják be értékelésre. Bejegyzésünkben a mock-upok használatához adunk tippeket-tanácsokat.

 

Honnan/hogyan tudunk mockupot beszerezni?

Ma már számos ingyenes, illetve fizetős mock-up áll a rendelkezésünkre, melyeket főként gyűjtőoldalakon, designnal kapcsolatos szakmai oldalakon találhatunk. Az adott munkához konkrét sablont tudunk keresni, ugyanis vannak kifejezetten logóhoz, névjegykártyához, plakáthoz, webdesignhoz, csomagoláshoz, ruházathoz, stb. készített mockupok.

Néhány mockup-lelőhely:

Mockupworld

Mocup

Pixeden

Behance

Graphicburger

CreativeMarket

 

Azonban ha ügyesek vagyunk, és már a Photoshopban is feltaláljuk magunkat, akkor mi is készíthetünk kreatív mockupokat. 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.

További tudnivalók az intelligens objektumról: https://helpx.adobe.com/hu/photoshop/using/create-smart-objects.html

smart_object

 

Milyen mockupok léteznek?

Ahogyan az előző pontban már említettük, egyrészt vannak kifejezetten logóhoz, névjegykártyához, plakáthoz, webdesignhoz, csomagoláshoz, ruházathoz, stb. készített sablonok. Másrészt mockup és mockup között is akadnak különbségek. Lássuk, melyek ezek!

Vannak olyan sablonok, melyek jelentősen módosítják a beillesztett objektumot. Mit is jelent ez?

Néhány példa:

egyszínűvé (pl. fehérré, feketévé, aranyszínűvé) teszi az adott munkát, például a beillesztett logót, így az nem eredeti színeiben jelenik meg

egyszinu

bevésetté/domborúvá teszi az adott munkát, például a beillesztett logót, így az nem eredeti megjelenésében jelenik meg

domboritas

más textúrát ad az adott munkának, például textilre festett objektummá alakítja

textura

Tehát ha eredeti megjelenésében szeretnénk prezentálni az adott munkát, akkor ennek megfelelő sablont válasszunk. Ha pedig éppen az a cél, hogy valamilyen „extra” kinézetben tálaljuk az aktuális munkát, akkor bátran válasszunk egyedi mockupot.

Továbbá vannak olyan mockupok, melyek fixek, azaz csak a munkát tudjuk beilleszteni, annak környezetén nem tudunk változtatni, és szerencsére akadnak olyan sablonok is, melyeknek elemei, összetevői módosíthatók, mint például a háttér színe, textúrája, az árnyékok, keretek, szegélyek, stb.

valtoztatasi_lehetosegek

valtoztatas

 

A legtöbb mockup egy-egy munka megjelenítésére alkalmas, de számos sablon egy munka többféle megjelenítését is lehetővé teszi.

Néhány példa:

magazin bemutatására szolgáló sablon magában foglalja a magazin előlapjának, hátlapjának, belső lapjainak a megjelenítési lehetőségét (aktívvá, inaktívvá kell tenni az adott intelligens objektumot, réteget)

kétoldalas névjegykártya bemutatására szolgáló sablon magában foglalja a névjegykártya elejének és hátuljának a megjelenítési lehetőségét

webdesign-terv bemutatására szolgáló sablon magában foglalja a weboldal laptopon, tableten, mobilon való megjelenítési lehetőségét

tobbfele_mockup

 

Hogyan használjuk a mockupot?

Ha kiválasztottuk az ideális mock-upot, letöltöttük/megvásároltuk, a Photoshopban tudjuk megnyitni, ugyanis a legtöbb sablon PSD formátumú. Nyissuk meg külön ablakban a saját munkát is, mely JPG/PNG formátumú legyen (pl. egy plakát megfelelő JPG formátumban, egy logó legyen áttetsző PNG formátumú). Azonban ha például egy logót szeretnénk mockupba illeszteni, akkor magát az AI fájlt is megnyithatjuk a Photoshopban.

1

A mockup ablakában a jobb oldalon található Rétegek panelen láthatjuk, hogy milyen elemekből épük fel a mockup (ha szükséges, nyissuk le a mappákat), továbbá itt derül ki, hogy hova is kell beilleszteni a saját munkánkat. A sablonok fő alkotója az intelligens objektum – ez az, amely lehetővé teszi a mockup ilyen módon történő használatát –, ezt kell megnyitnunk és erre behúznunk a saját munkánkat. Az, hogy ebbe kell illesztenünk a saját munkánkat, általában jelzik is a réteg találó elnevezésével (pl. „Your design here”, „Design here”, „Add logo here”).

2

Kattintsunk duplán erre az intelligens objektumra (a bélyegképére). Ekkor kapunk egy üzenetet, mely instrukciókat ad a további lépésekhez, ezt OK-ézzuk le.

3

Maga az intelligens objektum egy külön ablakban nyílik meg. Erre a munkaterületre kell ráhúzni a saját munkánkat. Általában megtalálható rajta az eredeti objektum is, tehát láthatjuk, hogy a saját munkánkat mekkorára kell átméretezni, hova kell pontosan beilleszteni.

4

Az eredeti objektum réteget (ha van ilyen) törölhetjük is, és el is rejthetjük.

5

Kattintsunk a Fájl/Mentés opcióra, majd térjünk vissza a mockup eredeti ablakába. Itt már vissza is köszön az egyedi környezetbe beillesztett munkánk. :) Az elkészült mockupot a Fájl/Mentés másként menüpontban JPG vagy egyéb formátumban menthetjük el.

6

7

8

+ akadnak egyszerűbb mockupok, melyek AI formátumúak

+ vannak egyszerű fotó-mockupok

ai_mockup

foto_mockup

 

Mire használhatjuk a mockupot?

A munkáinkkal felvértezett mockupokat weboldalon, portfólióban, referenciamunkákat bemutató oldalon, továbbá például moodboardon és közösségi oldalakon alkalmazhatjuk. Sokkal látványosabb és hatásosabb ilyen módon bemutatni a munkáinkat, mintha csak egy JPG fotót töltenénk fel a weboldalunkra. Nem mellesleg a valósághű mockupokkal a Megrendelő is könnyebben el tudja képzelni az adott munka gyakorlatban való megjelenését, működését.

mockup_2

 

Ti milyen mockupokat ismertek még? Találkoztatok/dolgoztatok már nagyon extra sablonnal?

Várjuk a válaszokat! :)

Hozzászólások