Mockups er kreative, ofte fotorealistiske presentasjoner som viser hvordan et design kan se ut eller fungere i den virkelige verden. Med andre ord, å implementere en av disse 4 profesjonelle mockup-teknikkene gir et glimt inn i fremtiden: et logodesign trykt på en veske båret av tilfeldige shoppere, en app som rulles av en usynlig hånd, eller til og med en butikkfront med full merkevare. Gjør det overbevisende, du må vite hvordan du lager profesjonelle layouter. Her vil vi fortelle deg hvordan du gjør dette.

Selv om de består av bilder, er designoppsett mest effektive når de forteller en historie. Omtanken og detaljene som legges inn i historien vil avgjøre om publikum vil nyte den eller legge den i dvale.

Det er to elementer som gjør en layoutteknikk vellykket: kreativ scenesetting og realistisk inkludering av designet. Vi dekket tidligere et tidligere emne med tips som fokuserte på å formulere et layoutkonsept og velge de riktige bildene for å fortelle en historie. I denne artikkelen skal vi kort skissere de tekniske aspektene ved å lage en mockup av designet ditt ved å bruke de 4 vanligste mockup-metodene.

Oppsett av boken. Krav til bokdesign.

1. Lag din egen layout fra bunnen av. Mockups
-

Пользовательский макет — это макет, полностью адаптированный к конкретному дизайну. Если вы хотите создавать уникальные мокапы, мы рекомендуем эту технику для достижения beste resultater. Учитывая, что целью макета является презентация и, в конечном итоге, убеждение (то есть продажа концепции дизайна), само собой разумеется, что самый убедительный макет — это тот, который разработан для конкретного клиента.

Drikkevaremerkelogodesign og layout.

Drikkevaremerkelogodesign og layout

 

Но, конечно, создание мокапов с нуля для каждого проекта — не самый практичный подход. Это требует больших усилий для чего-то, что по сути является одноразовым презентационным ressurs. Это также полезно только в том случае, если концепция макета очень оригинальна — нет смысла возиться со всеми этими проблемами, если результат неотличим от шаблона. В конечном итоге вам решать, достаточно ли вы увлечены проектом или клиентом, чтобы сделать все возможное, чтобы создать единственный в своем роде мокап.

Logodesign og layoutpresentasjon for et teknologimerke.

Logodesign og layoutpresentasjon for et teknologimerke

For en virkelig tilpasset layout trenger du originale bilder. Dette lar deg lage et sceneoppsett som er mye nærmere designsynet ditt, mens lagerbilder av natur er designet for generelle innstillinger og scener. Har du utstyr, erfaring og tid kan du ta dine egne bilder. I dette tilfellet bør du brainstorme eller skissere scenen på forhånd, på samme måte som du kan skrive en film.

Hva er salgsmargin? og hvordan beregne det

Вы также можете нанять профессионального фотографа, но это, конечно, расходы, которые не будут практичными для каждого дизайнера — это более вероятно в сфере дизайнерского агентства, работающего с корпоративными клиентами. Отличная альтернатива — использовать фотографии, принадлежащие клиенту: например, дизайнер Top Level goopanic применяет свой брендинг Academia de Artes к реальным фотографиям школы и ее учеников. Даже если эти фотографии не такого Høy kvalitet, как профессиональные стоковые фотографии, они дадут клиенту более достоверное представление о том, как в конечном итоге будет выглядеть их дизайн.

Når du har bildene dine, må du bruke programvare for bilderedigering for å integrere designet ditt i bildet. Den vanligste programvaren for dette formålet er Adobe Photoshop, men Affinity Photo og Gimp er pålitelige alternativer. Disse programmene gir mange verktøy og guider for å oppnå realistiske resultater, og de koker i utgangspunktet ned til følgende:

  • transformasjonsverktøy for å få designet til å matche bildet
  • blandingsmoduser for å inkludere tekstur fra originalbildet
  • justeringslag for arbeid med lys, farge og kontrast

 

Hvis du vil jobbe med tilpassede animasjoner, bruk animasjonsprogramvare som After Effects: for eksempel kan du bruke lagmasker til å lage rulleanimasjoner for apper på et telefonbilde.

Nødvendige verktøy

  • Fotografi og/eller fotoutstyr
  • Programvare for Foto redigering (Photoshop, Serif Photo, Gimp)
  • *Valgfritt* Animasjonsprogramvare (Adobe After Effects)

utgifter

  • Moderat til høy

Pros

  • Resultatet er mockups som er mer spesifikke og tro mot designerens visjon.
  • Kildebilder; ingen vannmerker eller behov for å kjøpe lisenser

Cons

2. Lag gjenbrukbare layoutmaler. Mockups.
-

Tilpassede layoutmaler er layouter som designere lager selv, men er generiske nok til å brukes på tvers av flere prosjekter. Som vi påpekte i den siste delen, kan det være upraktisk og dyrt å lage tilpassede modeller for hvert prosjekt, men denne metoden lar designeren lage modeller som er både originale og gjenbrukbare til en lavere kostnad.

Это также способ для дизайнера добавить свой personlig merkevare или повторяющийся стиль в свои презентации для клиентов.

Appdesignmockup som viser en mann på en kafé som bruker en iPhone. Mockups

Appdesignmockup som viser en mann på en kafé som bruker en iPhone

 

Prosessen for å lage mockup-maler er i hovedsak den samme som å lage tilpassede mockups: du må fortsatt kjøpe et bilde og bruke et bilderedigeringsprogram for å innlemme designet. En forskjell er tilnærmingen til å fotografere layouten din: den skal være vag nok til å fungere for flere klienter – for eksempel, i stedet for å bruke et identifiserende landskap, fokuserer toppdesigner Daria V.s layoutbakgrunn på illustrerte aksenter som kan endres med hvert prosjekt.

Illustrert produktemballasjemockup-design. Mockups

Illustrert produktemballasjemockup-design

Illustrert produktemballasjemockup-design. Mockups

Illustrert produktemballasjemockup-design

Dette kan hjelpe gruppere kunder basert på vanlige temaer, for eksempel industri (du kan ha en layoutmal for alle dine restauranteiende kunder, en for alle detaljkunder osv.). Dette gjør det lettere å velge bilder som vil fungere i vanlige sammenhenger.

Generatorer for bokoppsett: 5 GRATIS verktøy

For fysiske produkter lager noen designere tomme gjengivelser av produktet ved hjelp av 3D-programvare som Adobe Dimension, og dette har den ekstra fordelen at det kan lages roterbare, animerte layouter.

Чтобы создать свой макет шаблона в Photoshop, ваша цель в основном состоит в том, чтобы настроить документ так, чтобы дизайн можно было легко заменить в будущих проектах, сохранив все ваши manipulasjon. Photoshop предоставляет для этого два полезных инструмента:

Photoshop Smart Objects. Mockups.

Et smart objekt er i hovedsak en beholder som lagrer et bilde i et koblet dokument, slik at du kan gjøre drastiske endringer i det i den større komposisjonen din uten å påvirke originalbildet. Hvis du erstatter et bilde i et smart objekt, vil det oppdateres i komposisjonen med alle endringene dine brukt på det.

Så, med mockups, er alt du trenger å gjøre å konvertere designlaget til et smart objekt ved starten av prosjektet (gå til Lag > Smarte objekter > Konverter til smart objekt). Etter det kan du ganske enkelt erstatte designet inne i det smarte objektet neste gang du trenger en layout.

Photoshop-handlinger. Mockups.

Handlinger registrerer endringene du gjør i et Photoshop-dokument, slik at du kan gjenta disse trinnene med et klikk på en knapp, og eliminere repeterende oppgaver. Så med en mockup kan du bruke en handling til å registrere alle transformasjonene og effektene du bruker på et design for å få det til å matche et bilde, og bruke de samme endringene på et annet design i fremtiden bare ved å klikke på en knapp.

Nødvendige verktøy

  • Fotografi og/eller fotoutstyr
  • Programvare for bilderedigering (Photoshop, Serif Photo, Gimp)
  • *Valgfri* 3D-produktmodelleringsprogramvare

utgifter

  • moderat

Pros

  • Gjentatt bruk gjør det verdt innsatsen å lage tilpassede oppsett.
  • Kildebilder; ingen vannmerker eller behov for å kjøpe lisenser

Cons

  • Krever mer avansert programvarekunnskap
  • Det kan være bortkastet innsats hvis resultatene ikke er forskjellige nok fra en tredjeparts mal.

3. Bruk en mockup generator nettside.
-

Et mockup-generatornettsted er en nettbasert tjeneste som bruker arkivbilder og AI-programvare for automatisk å generere en mockup fra en tredjepartsmal. Vanligvis er alt en designer trenger å gjøre å laste opp designet og programvaren vil ta seg av alle tekniske problemer.

Skjermbilde av hjemmesiden for Placeit design mockup generator. Mockups

Skjermbilde av Placeit design mockup generator hjemmeside

Denne metoden er den desidert billigste og enkleste løsningen, men den har noen ulemper. Det resulterende oppsettet vil være uoriginalt, og gitt at mange designere har brukt den samme tjenesten, er det ikke uvanlig å se de samme layoutbildene dukke opp i en dårlig situasjon over hele porteføljenettsteder. Samtidig kan det være nyttig i en klemme, og med mindre klienten er en designer mockup-leverandør, vil de sannsynligvis ikke ha noe imot det.

Выбирая услугу, вы должны учитывать следующее: цена, качество и актуальность. Что касается цены, многие генераторы мокапов можно использовать бесплатно, хотя вам следует опасаться скрытых неудобств, таких как установка водяных знаков или ограниченный выбор шаблонов. В противном случае цена обычно основывается на модели подписки, и большинство услуг, которые я рассмотрел, находятся в диапазоне от 10 до 20 долларов в месяц.

Utarbeiding av standard layout for bedriftsdesign. Mockups

Utarbeiding av standard layout for bedriftsdesign

Kvalitet kan komme ned til personlig smak, men du bør bruke litt tid på å studere layoutene andre designere og konkurrenter bruker for å få en følelse av hva som er smart og hva som er generisk. Du kan også bruke tjenester som Trustpilot for å finne brukeranmeldelser som forteller deg, utover reklamemateriellet, hvor godt tjenesten fungerer og hva de faktiske resultatene er.

Skjermbilde av hjemmesiden for Artboard Studio design mockup generator. Mockups

Skjermbilde av hjemmesiden for Artboard Studio design mockup generator

Skjermbilde av Smartmockups design mockup generator hjemmeside

Skjermbilde av Smartmockups design mockup generator hjemmeside

Наконец, некоторые из этих сайтов специализируются на определенных типах макетов, и вам нужно будет выбрать тот, который будет иметь отношение к вашим проектам, особенно если вы покупаете подписку. Например, Artboard Studio и Mockup Mark специализируются на печати и макетах одежды. Такие сервисы, как AppMockUp и Mockuuups Studio, специализируются на макетах цифрового дизайна. Между тем Smartmockups , renderforest и Placeit предлагают общие шаблоны макетов как для печати, так и для цифровых.

Nødvendige verktøy

  • Pålitelig Internett-tilkobling
  • *Valgfritt* Medlemskap for nettstedoppsett

utgifter

  • Fra gratis til lav

Pros

  • Raskt og uanstrengt; ingen programvarekunnskap kreves
  • Kvalitet kan noen ganger være nær tilpasset layout

Cons

  • Skaper et felles utseende med bilder som mange design bruker på nettet.
  • Abonnementsmodellen er bare nyttig hvis flere oppsett er nødvendig.

4. Bruk en programvareplugin for å lage oppsett.
-

Mockup-plugins er tredjepartsintegrasjoner som kobles til designprogramvare for å lage mockups. I hovedsak lar disse applikasjonene designere designe og lage layouter innenfor et enkelt program, med den ekstra fordelen at designeren kan bruke programmets verktøy til å gjøre endringer i layouten etter at den er opprettet.

Skjermbilde av Mokup Frames design plugin hjemmeside

Skjermbilde av Mokup Frames design plugin hjemmeside

Det er det beste fra to verdener: en rimelig, lavinnsats, tilpassbar mal. Med det sagt er denne metoden generelt ment for digital design, og de fleste plugins er rettet mot applikasjonsprototyping-programvare som f.eks. Skisse , figma и Adobe XD .

Skjermbilde av hjemmesiden for plugin-modulen for vinkeldesign

Skjermbilde av hjemmesiden for plugin-modulen for vinkeldesign

Det er flere populære tjenester som tilbyr nedlastbare plugins, inkludert Vinkel , Rotato и Mokup rammer . Fordi denne programvaren er nedlastbar, krever den vanligvis en engangsbetaling. Denne prisen er vanligvis høyere enn de fleste mockup-generatorsider, men den er lavere i det lange løp siden du ikke betaler abonnementsavgift.

Du må følge stedspesifikke instruksjoner for å laste ned og installere plugin-en i programvaren. Derfra har du muligheten til å bruke designet fra programvaren til layouten. Prosessen ligner på å bruke et nettsted med en mockup-generator: plugin-modulen vil automatisk lage mockupen din, og du vil bruke tilpasningsverktøyene til å avgrense den.

Nødvendige verktøy

  • Designprogramvare (Sketch, Figma, Adobe XD)
  • Last ned lisens og plugin

utgifter

  • lav

Pros

  • Raskt og uanstrengt; Lite programvarekunnskap kreves
  • Mockups lages i designprogramvare som en del av designprosessen.

Cons

  • Skaper et felles utseende med bilder som mange design bruker på nettet.
  • Resultatene er ikke mye forskjellig fra online mockup-generatorer

Det er på tide å lage unike mockups!
-

Designmockups er utrolig kraftige presentasjonsverktøy som ikke bare selger en designidé, men også gir seeren et vindu inn i en fremtid der designet allerede eksisterer. Når det gjøres godt, vil klienten nesten bli tvunget til å gjøre denne fremtiden til en realitet.

Как указано в этой статье, существует множество методов создания мокапы, и каждый из них имеет свои fordeler og ulemper. Но независимо от того, как вы создаете свои макеты, результаты в конечном итоге будут зависеть от дизайнера и его приверженности к реалистичному рендерингу макета, который прыгает с экрана.

 АЗБУКА

Hvordan lykkes med å administrere prosjekter i en nettbedrift