Advertisement
  1. Design & Illustration
  2. Product Mockup

Kako Ubaciti Fotografiju u "Mock-Up" Skicu Proizvoda u Adobe Illustratoru

Scroll to top
Read Time: 3 min

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Envato Market je odličan izvor za "stock" fotografije, grafičke predloške i "mock-up" skice za proizvode. Ovi resursi su fantastičan način da proizvedete visokokvalitetne marketinške vizualne reprezentacije u vrlo kratkom vremenu. U ovom kratkom savjetu pokazati ću vam kako upotrijebiti Adobe Photoshop da dodate vlastitu sliku na "mock-up" skicu kupljenu na Envato Market-u.

1. Odaberite Proizvod

Jedna od prednosti korištenja kupljenog predloška je to što kreatori najčešće nude vrlo čiste i organizirane datoteke u koje je lako ubaciti vlastiti vizualni materijal. Recimo na primjer, ako promovirate novu aplikaciju koja koristi GPS kameru uređaja za lokacijske upute, koji je bolji način za marketinško oglašavanje aplikacije od toga da pokažete njen rad izravno na uređaju?

1. korak

Na tržištu postoji mnogo dostupnih "mock-up" skica za proizvode. Ona koju sam ja odabrao uključuje ruku koja drži uređaj.

The mock-up templateThe mock-up templateThe mock-up template

2. korak

Preuzmite mapu u .zip formatu i ekstrahirajte zasebne datoteke iz paketa. U Photoshopu otvorite datoteku pod imenom Hand1_Transparent.psd. Obratite pažnju na višestruke slojeve koje sadrži ova datoteka. To olakšava i pojednostavljuje proces ažuriranja datoteke da unesete vlastite slike.

Open the layered Photoshop fileOpen the layered Photoshop fileOpen the layered Photoshop file

2. Zamijenite Pozadinu

1. korak

U našem hipotetskom oglasu, aplikacija bi trebala pokazivati ono što vidi kamera uređaja. Pozadinska slika u datoteci je Smart Object sloj nazvan EDIT BACKGROUND. Dvaput kliknite na sličicu (thumbnail) da otvorite sadržaj u njegovom vlastitom dokumentu.

Double click the layer thumbnail to open the Smart ObjectDouble click the layer thumbnail to open the Smart ObjectDouble click the layer thumbnail to open the Smart Object

Datoteka se otvara - zove Layer 1.psb. Primijetiti ćete da je ima samo jedan sloj, trenutnu sliku pozadine.

The Smart Object contains a single layerThe Smart Object contains a single layerThe Smart Object contains a single layer

2. korak

Idite na File > Place Linked i odaberite novu fotografiju kao pozadinu za oglas. Ja sam odabrao ulični prizor iz vlastite kolekcije fotografija.

Use File Place Linked to add your own imageUse File Place Linked to add your own imageUse File Place Linked to add your own image

3. korak

Idite na File > Save i zatim zatvorite datoteku. Sadržaj pozadine u početnoj datoteci ažuriran je i prikazuje novu pozadinu. Datoteka automatski dodaje zamagljenje i kolorizirani efekt na novu pozadinu također.

The background is updated in the initial fileThe background is updated in the initial fileThe background is updated in the initial file

3. Zamijenite Sučelje Aplikacije

1. korak

Sučelje se ažurira pomoću iste metode. Dvaput kliknite na sličicu (thumbnail) EDIT OBJECT sloja kako biste otvorili Smart Object.

Open the EDIT OBJECT smart objectOpen the EDIT OBJECT smart objectOpen the EDIT OBJECT smart object

2. korak

Ta datoteka, pod imenom Camera.psb, uključuje dva sloja. Jedan sakriveni sloj je za bijelu verziju uređaja, i drugi koji je trenutno vidljiv, za crnu verziju. Oba su također pametni objekti (Smart Object). Znači, oni su pametni objekti unutar pametnih objekata. Dvaput kliknite sličicu (thumbnail) za objekt tamnije boje kako biste zaronili dublje i otvorili tu datoteku.

Open the smart object for the device imageOpen the smart object for the device imageOpen the smart object for the device image

3. korak

Ta datoteka, pod imenom Camera1.psb, sadrži različite slojeve koji ilustriraju uređaj i još jedan Smart Object pod imenom REPLACE CONTENTS, za zaslon. Dvaput kliknite na tu sličicu (thumbnail) da otvorite tu datoteku.

Open the REPLACE CONTENTS smart objectOpen the REPLACE CONTENTS smart objectOpen the REPLACE CONTENTS smart object

4. korak

Ta nova datoteka koja se zove Screen11.psb sadrži sliku zaslona. Idite na File > Place Linked i unesite sučelje nove aplikacije.

Insert a the new app interface image over the screen layerInsert a the new app interface image over the screen layerInsert a the new app interface image over the screen layer

5. korak

Pohranite i zatvorite svaku od otvorenih datoteka pametnog objekta. Trebalo bi ih biti tri: Screen11.psbCamera1.psb, i Camera.psb. Originalna datoteka je sada ažurirana sa novim sučeljem.

The screen is updated with the new app interfaceThe screen is updated with the new app interfaceThe screen is updated with the new app interface

To je to!

Zaista je toliko jednostavno! Samo ažuriranjem pametnih objekata unutar predloška, vrlo lako stvarate marketinšku sliku prilagođenu vašim potrebama. Imajte na umu da je datoteku još uvijek moguće editirati, pa možete, kad god želite, zamijeniti sadržaj pametnih objekata kako biste ažurirali sliku sa novim pozadinama i novim sučeljima aplikacija.

Finished product shotFinished product shotFinished product shot
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
One subscription. Unlimited Downloads.
Get unlimited downloads