For små virksomhedsejere er produktmockups en vigtig del af at præsentere idéer, generere forretning og endda brainstorme om nye idéer og produktmuligheder. Uanset om du ønsker at bruge dine mockups i bestyrelseslokalet eller på en plakat, er det at vise dit produkt i aktion en fantastisk måde at få folk til at blive begejstrede. Selv om der er masser af måder at generere mockups af høj kvalitet på – herunder dyr professionel hjælp – er mockups faktisk ret nemme at lave med Adobe Photoshop. For at vise dig hvordan, hvorfor vi har sammensat denne enkle vejledning ved hjælp af stockbilleder.
Strin et:
Download dit baggrunds stockbillede og åbn det i Adobe Photoshop
Dette trin er næppe et trin overhovedet, men der er et par vigtige ting at huske, når du vælger et baggrundsbillede. Ideelt set skal din skærm være sort, og jo enklere perspektivet er, jo nemmere bliver de følgende trin. Hvis du downloader et billede fra de fleste lagerudbydere, kan du desuden kun bruge det redigerede billede til personlig brug. Med andre ord, hvis mockup’en kommer til at tjene penge til dig, er den forbudt, medmindre du vil risikere en retssag om ophavsret. Heldigvis er vores billeder alle royaltyfri, så du kan bruge disse mockups i markedsføringskampagner og til andre professionelle formål. Til vores mockup brugte vi dette baggrundsfoto og dette solsikkefoto.
Stræk to: Tegn din form
Tegn en simpel form ved hjælp af værktøjet “Form” i værktøjslinjen. Den behøver ikke at være helt perfekt, men sørg for, at den dækker hele figuren helt og holdent.
Pro Tip:
Trin tre: Brug dine vejledninger for at gøre denne proces nemmere og mere idiotsikker: Konverter din form til et Smart Object
Det er vigtigt, at du udfører dette trin, før du justerer billedet, så det passer bedre til skærmen i billedet (trin fire). Hvis du vil konvertere en form til et Smart Object, skal du blot højreklikke på dit lag i lagpanelet til højre og derefter vælge “Konverter til Smart Object” i rullemenuen.
Gå med i vores kreative fællesskab
Access the best video tips, design hacks, and deals straight to your inbox.
Stræk fire: Juster perspektivet
Nu skal vi få vores Smart Object til at passe til skærmskærmen på fotografiet ved hjælp af “Transform-værktøjet”. Gå til Rediger > Transformér > Forvrængning for at begynde at redigere formen på dit Smart Object.
Pro Tip: Hvis du reducerer opaciteten i lagpanelet, kan du nemmere se billedet nedenunder. Klik og træk i hjørnerne for at få den nødvendige størrelse og form. Husk, at elektronik normalt viser en tynd sort kant omkring kanterne af skærmvinduet, så vi ønsker ikke at fylde skærmen helt ud.
Hvis du har en afrundet form, eller hvis noget (f.eks. en person eller et objekt) kommer ind i rammen, hvilket kræver en mere tilpasset form, kan du bruge en lagmaske til at “slette” de ekstra pixels. Du skal blot vælge laget og tilføje en lagmaske ved at klikke på ikonet for lagmaske nederst i lagpanelet. Du kan derefter bruge din pensel med farven indstillet til sort til at male over alle de pixels, du ikke ønsker. Hvis du maler noget, du gerne ville beholde, skal du blot skifte farven til hvid og male over området igen for at få dem til at dukke op igen.
Klik på ENTER for at anvende dine ændringer og bringe lagets opacitet op til 100 % igen.
Stræk fem: Tilføj dit billede
Nu er det tid til at tilføje dit faktiske produktbillede til mockup’en. For at gøre dette skal du først dobbeltklikke på din Smart Object Thumbnail i lagpanelet. Hvis du blot dobbeltklikker på selve laget, vil dette ikke fungere. Du skal klikke på billedikonet ved siden af lagnavnet. Når det er gjort, vil du se en ny skærm dukke op, som ser ud til at have samme form som dit Smart Object tilbage i trin tre. Som du kan se nedenfor, har vi nu et stort rektangel, der ligner vores oprindelige rektangel utrolig meget, før vi anvendte transformationen.
Åbn dit produktbillede i Photoshop (FILE > OPEN). Træk og slip nu dit nye billede ind på denne skærm ved hjælp af værktøjet “Flyt”. Ændr størrelsen på billedet, så det fylder hele skærmen. Klik nu på SAVE (Gem), og luk vinduet. Sørg for, at du ikke lukker alle dine Photoshop-vinduer, for vi har stadig brug for vores oprindelige baggrundsbillede!
Pro Tip: Hvis du holder shift nede, vil det nye billede falde direkte ind i midten af det smarte objekt.
Stræk seks: Voila!
Når du vender tilbage til dit oprindelige baggrundsbillede, venter der dig en overraskelse! Der er dit billede, der på magisk vis er indsat og justeret i dit oprindelige baggrundsbillede!
På dette tidspunkt kan du måske lade din mockup være som den er, men der er et par tricks, du kan bruge for at gøre den endnu mere realistisk.
- Er skærmen for lys? Hvis dit originale billede havde en sort baggrund, skal du blot reducere opaciteten på dit Smart Object-lag for at gøre tingene mørkere.
- Leg dig frem med Burn, Multiply og de andre billedindstillinger i lagpanelet.
- Føj skygger til. Der er mange måder at gøre dette på i Photoshop, men en af de enkleste er at bruge effekten Farvebrænding med din pensel. Pas dog på, at du ikke ændrer billedet for meget. Hvis du laver rod, skal du bare Ctrl + Z!
Bonusrunde!
Nu da vi har fået trinene på plads, gik vi videre og anvendte den samme proces på resten af skærmene i billedet, hvilket gav os vores færdige mockup!
Og der har I det, folkens! Vi kan ikke forestille os noget mere inspirerende end at se dine idéer blive ført ud i livet. Takket være royaltyfri lagerfotos og Adobe Photoshop kan alle mestre denne enkle teknik og forvandle visioner til virkelighed. Når du har behersket denne færdighed, kan du gå videre til at lære at skabe video mockups.