Így tálald a kisarculati munkádat – avagy mire való a mockup?

Így tálald a kisarculati munkádat – avagy mire való a mockup?

Aki grafikai tervekkel foglalkozik, az már a tervezés fázisában látja maga előtt a valódi környezetében az elkészített névjegykártyát, étlapot, vagy éppen póló feliratot. De a megrendelőknek nincs ilyen gyakorlata. Nekik nagy segítség, ha élő környezetben, a maga anyagszerűségében láthatják azokat a terveket, amelyekről dönteniük kell. A tervezési fázisban még nincsenek nyomtatott verziók, amikről fényképet lehetne készíteni, ezért ilyenkor olyan speciális file-okat alkalmazunk, amelyeknél a grafikai terv helyére bármi beilleszthető. Tipikusan egy kupac névjegykártya, egy modellen feszülő póló, vagy egy ajtó fölött függő cégtábla fotója lehet az ún. mockupokon, amire ráilleszthető a saját logóterv, vagy rajzolt minta.

“ Az egyszerűt bonyolulttá tenni mindennapos dolog; a bonyolultat egyszerűvé varázsolni... ez a kreativitás!"

Charles Mingus

Mire használd a mockupokat?

A mockup-ba helyezett grafikai terv nagyon jól szemlélteti, hogy az adott logó, hogy néz majd ki egy névjegykártyán, bögrén vagy kulcstartón. Aki rápillant, azt fogja gondolni, hogy egy valódi bögrét/névjegykártyát/kulcstartót lát, amiről egy profi fotós készített képet és ez az, amiért olyan fantasztikus dolog a mockup. Egy plakát tervnél is megnézhetjük, hogyan is festene az egy óriásplakáton, vagy éppen a buszmegállóban és nem kell ehhez költséges módon óriási méretben legyártatnunk.
De nem csak erre használhatod. A segítségével digitális termékeknek is adhatsz egy kézzelfogható jelleget, pl. egy online tanfolyam esetében könyvnek kinéző mockupokkal érzékeltetheted, hogy írásos tananyagról van szó, vagy egy DVD mockuppal azt, hogy videós formában történik az oktatás.

Honnan szerezzek mockupot?

A mockup amilyen hatásos, pontosan olyan könnyen beszerezhető. Természetesen, mint mindenre, itt it igaz, hogy az ingyenes verziók általában relatív kezdetlegesek, vagy egyszerűek, esetleg nehezebben formázhatók vagy alakíthatók át. Ettől függetlenül annyira nagy a választék az ingyenesek mockupok között is, hogy nem feltétlenül lesz szükséged vásárlásra az első időkben.
A letöltött mockup fájl formátumát viszont figyeld, mert ha JPG-t látsz (nem psd), akkor az nem valódi mockup, pusztán egy kép, amire ügyesen rá tudod helyezni a saját dizájnodat. Ez sem feltétlenül rossz megoldás, ha pl. egy laptopra szeretnéd rávarázsolni a frissen elkészült weboldal nyitóképét (mert azt már kezdő Photoshop tudással könnyedén kivitelezheted), de azért jóval korlátozottabb lehetőségeket biztosít, mint a valódi (psd) mockupok. Egy igazán jó minőségű mockup képes akár anyagszerű hatást is kelteni, élethűen követni a háttérben lévő egyenletlenségeket, és hihetően alakítani a tárgyra vetülő fényviszonyokat.

Milyen lehetőségek rejlenek a mockupokban?

Íme néhány példa mockup, hogy bemutassam milyen változatos és sokrétűen felhasználható technikának leszel most a birtokában!

Fába nyomtatott logó mockup

Ez például egy olyan a mockup, mintha magába a fába nyomták volna a logót. Ha hiszed, ha nem, az általad tervezett logó is így jelenik majd meg!

Logó márványon mockup

Álmodjunk nagyot és merészet! Szerinted, hogy mutatna a frissen tervezett logód, ha márványra kerülne?

Logó céges autón mockup

Azt is megnézheted, hogy fog kinézni majd a céges autód a jövőben!

Logó konténeren mockup

Konténer logó dizájnt készítettél? Gond egy szál se!
https://designhooks.com/freebies/free-shipping-container-logo-mockup-psd/

Cimkelogó mockup

És végül egy póló címke!
https://placeit.net/c/mockups/stages/side-clothing-label-mockup-on-a-cus...
Tehát szinte bármilyen mockupra találhatsz már példát, csak jól kell tudnod keresni.

Ingyenes mockup lelőhelyek

Most összegyűjtöttünk neked 5+2 ingyenes mockup lelőhelyet, ahol minőségi, modern kivitelezésű mockupokat tölthetsz le ingyen:

És a +2
Ezen felül tudom még javasolni neked a Kreatív Webdesign Tanfolyam Facebook oldalát és zárt Facebook csoportját is, ahol rendszeresen osztunk meg ingyenes mockupokat és más designerek számára érdekes csemegéket!

Fizetős mockup lelőhelyek

És akkor jöjjenek végre a konkrétumok, hogyan adhatsz te is ilyen látványos megjelenést a munkáidnak?
Biztos vagyok benne, hogy meglepődsz majd milyen egyszerű ez az egész! Bemutatom a legáltalánosabb mockup készítési módot!

Természetesen ebből a kategóriából még nagyobb a választék. Ha már aktívan dolgozol dizájnerként, úgyis lesz valamilyen előfizetésed egy stock fotó adatbázisba, ahol letöltheted magadnak a prémium mockupokat is.
Az érdekesség akkor kezdődik amikor tényleg valami különlegességre van szükséged, de ne ess pánikba, vélhetően minden létező elképzelésre lesz megoldás.

Így készíts ámulatba ejtő mockupokat

És akkor jöjjenek végre a konkrétumok, hogyan adhatsz te is ilyen látványos megjelenést a munkáidnak?
Biztos vagyok benne, hogy meglepődsz majd milyen egyszerű ez az egész! Bemutatom a legáltalánosabb mockup készítési módot!

  1. Az első lépés, hogy töltsd le a kiválasztott fájlt. Ez jellemzően zip fájl szokott lenni, így először a jobb egérgomb segítségével csomagold ki, majd nyisd meg a fájlcsomagban található psd fájlt.
  2. Vedd szemügyre a mockup rétegeit. Jellemzően szokott lenni egy „Your Design Here” elnevezésű réteg, ha az megvan, akkor kattints rá duplán!
  3. Kattints a megfelelő rétegre a mockup-on

    Ilyenkor egy új munkaablakban megnyílik a szerkesztendő réteg.

    Egy új ablakban nyílik meg a szerkesztendő réteg a mockupon

  4. Innentől nagyon egyszerű dolgunk van. A meglévő réteg helyére (pl. létrehozol egy új átlátszó réteget, a jelenlegit meg eltünteted) helyezd a saját munkádat. Mi most természetesen az új WEBARTERY – Kreatív Webdesign tanfolyam logót fogjuk használni!
  5. Ha elkészült az üres réteg, akkor a fájl menüpontra kattintva, válasszuk az „Elhelyezés beágyazottként” opciót és keressük ki a számítógépünkről a megfelelő képet. (lehetőleg legyen PNG az átlátszó háttér miatt).
  6. Elhelyezés beágyazottként a mockupon

    Elhelyezés beágyazottként a mockupon

  7. Itt még látszólag nem történik semmi varázslatos, de ments rá!
  8. Mentés a mockupon

  9. Mentés után kattints át a másik (eredeti) munkalapra és már látnod is kell az eredményt!

És íme a végeredmény!

A végeredmény a mockupon

Ugye, hogy milyen egyszerű? Azt javaslom, ne állj meg egynél, gyakorold be a folyamatot több mockupon is, és nézd meg milyen lehetőségek rejlenek ebben a technikában.
Nézd, én például már most tudom, hogy amikor majd megnyílik a WEBARTERY webdesigner irodája, majd ilyen cégtáblánk lesz!

Logó cégtáblán mockup

Bízom benne, hogy sikerült elmagyaráznom ezt a rendkívül egyszerű, de mégis hihetetlenül látványos technikát, amivel könnyedén elkápráztathatod a megrendelőidet!

Share this post

Leave a comment

Filtered HTML

  • A webcímek és email címek automatikusan kattintható hivatkozásokká alakulnak.
  • Engedélyezett HTML jelölők: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.

Plain text

  • A HTML jelölők használata nem megengedett.
  • A webcímek és email címek automatikusan kattintható hivatkozásokká alakulnak.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
CAPTCHA
Bizonyítsd be, hogy nem vagy robot!
3 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.