Create en Responsive Screen mockup Bruke smarte objekter i Adobe Photoshop
Hva du skal lage
Smart Objects er en av de kraftigste funksjonene i Photoshop. I denne opplæringen vil du lære hvordan å forberede en gruppe på dataskjermer som en mockup, og deretter legge til Smart Object lag til skjermene. Når alt er satt opp, kan du endre alle skjermbilder de samtidig ved å oppdatere smart objekt. Hver smart objekt kan inneholde flere lag, noe som gjør det super raskt og enkelt å endre opp presentasjonen.
1. Klargjør mockup
Trinn 1
Jeg begynner med tre forskjellige produkter. Du kan finne isolerte skudd på PhotoDune eller GraphicRiver produkt, og du kan bruke så mange du vil i din komposisjon. Dette bestemte filen har separate lag for produktene, deres skygger og gjenskinn på hver skjerm.
Trinn 2
Utarbeide et eget lag for hver skjerm. Ta rektangelverktøyet (U) og tegne et rektangel med samme størrelse som hver skjerm. Alternativt kan du bruke Rectangular Marquee Tool (M) og fylle markeringen med piksler. Uansett hvilken metode du bruker, må "skjerm" være på et eget lag.
Tegn et rektangel med samme størrelse som på skjermen. Dette vil dekke et bilde du har på skjermen og vil okkupere sitt eget lag.
Jeg foretrekker å bruke et formlag, fordi det er enklere å foreta finjusteringer til formen ved hjelp av Free Transform (Kommando-T) kommando.
Trinn 3
Gjør en skjerm laget for hver av de andre skjermene. Du kan fylle figurer med hvilken som helst farge. Disse "skjerm" lag vil bli brukt senere for å maskere smarte objekter. Din mockup skal nå se ut omtrent som bildet under:
Trinn 4
Det er en god idé å gjøre noen rengjøring på dette punktet. Navngiving og organisere lag vil spare deg tid i det lange løp. På bildet under har jeg fargekodet alle lagene som tilhører hvert produkt. For å endre et lag farge, klikk på lag for å markere den, og klikk deretter flyout menyen på siden av Lag-panelet og velg Layer Properties.
Du kan også lage Layer grupper for hvert produkt. Velg alle lagene som hører til ett produkt, og klikk på flyout menyen på Lag-panelet. Velg Ny gruppe fra Layers, som på bildet nedenfor. Du kan deretter farge hele gruppen ved å velge Gruppe Egenskaper fra flyout menyen.
2. Sett opp smartobjekt
Trinn 1
Jeg bruker en skjermdump av Tuts + nettstedet. Dra skjermbildet i mockup PSD. Flytt sitt lag over Desktop Screen laget. Å konvertere dette laget til et smart objekt, kan du gjøre en av tre ting:
- Klikk på flyout menyen i Lag-panelet og velg Konverter til smart objekt.
- Høyreklikk på lag i Lag-panelet og velg Konverter til smart objekt.
. Merk: Ikke re-størrelse laget for å passe på skjermen før du konverterer den til et smart objekt
Trinn 2
nå kan du endre størrelsen på smart objekt til å passe bredden på PC-skjermen. Trykk Kommando /Ctrl-T og bruk håndtakene for å endre størrelsen på bildet. Du vil merke en subtil visuelt når du arbeider med et smart objekt: transformerings håndtakene på et smart objekt er solide, mens håndtakene på regelmessig pixel lag er hul. La smartobjekt hengende på bunnen av skjermen for nå. Hvis du vil endre navnet på smartobjektlaget.
Trinn 3
Lag kopi av smartobjektlaget ved å dra det til det nye laget ikonet nederst i Lag-panelet.
Duplicate smartobjektlaget ved å dra det til det nye laget ikonet.
Trinn 4
Dra Smart Object kopi over Laptop Screen laget. Som du gjorde før, bruke Free Transform å re-størrelse slik at den passer til bredden av tabletten skjermen. Igjen, kan du la den strekker seg utover bunnen av skjermen for nå.
Flytt Smart Object kopi på toppen av laptop skjermen lag.
Trinn 5
Lag en annen kopi av Smart Object og legg den over tablet Screen laget. Som før, endre størrelse på det å passe til bredden av tabletten skjermen. Ikke bekymre deg om overflødig lengde.
Trinn 6
Nå som alle smarte objekter er på plass, kan du klippe dem til sine respektive skjermer. Dette vil maske av den delen av bildet som går utenfor bunnen av skjermen, men det vil faktisk ikke beskjære skjermbilde. Først velger du smartobjektlaget, og klikk deretter på flyout menyen i Lag-panelet og velg Opprett klipping maske. Du kan også bruke hurtigtasten, som vist.
Alternativt kan du holde nede Tilvalg-tasten (Alt) og klikk mellom de to lagene. Du vil se markøren endre å doble sirkler for å fortelle deg at du er på rett sted.
Hold nede Tilvalg /Alt-tasten og klikk mellom lagene å skape en Clipping Mask. Markøren endres til en dobbel-sirkelikonet.Når klipping maske er opprettet, skal skjermbildet fylle dimensjonene på skjermen. Du vil også se laget miniatyr har flyttet litt til høyre, og har en liten pil nedover. Dette indikerer at smartobjektlaget er "klippet" til laget under. Dette er grunnen til at vi laget disse skjerm lag tidligere.
Her er en mockup, med alle de smarte objekter klippet til sine respektive skjermer:
3. Rediger smartobjekt
Trinn 1
Nå som Smart Object og kopiene er på plass, kan du endre bildet på alle de tre skjermene ved å redigere den opprinnelige Smart Object. Dobbeltklikk på Smart Object miniatyr å redigere. Du vil se følgende melding. Når du blir vant til å arbeide med smarte objekter, kan du velge å slå av denne advarselen dialogen.
Smart Object åpnes som en egen, spesiell fil. Filtypen er .psb:
Trinn 2
For å redigere Smart Object, jeg skal bare dra et annet skjermbilde på toppen av den eksisterende. Det er ingen grunn til å flate ut biletet som smarte objekter kan ha flere lag.
Trinn 3
Lukk og lagre .psb filen. Nå er den nye skjermbilde vil vises på alle tre skjermene. Det er ingen grunn til å endre de andre to Smart Object lag, fordi hver enkelt er en kopi av den opprinnelige.
Du kan legge til eller endre bildet så mange ganger du vil. Du kan lagre flere skjermbilder inne lagene i Smart Object, for raskt å presentere ulike versjoner i samme Photoshop-dokument.
Konklusjon
Produkt mockups som disse er en fin måte å presentere ulike design til en klient. Fordi Smart Object lagene er kopier av originalen, kan alle de tre skjermene oppdateres samtidig. Og fordi flere skjermbilder kan lagres inne lagene av Smart Object, kan du holde alt i en pent organisert PSD.
Gå til Lag-menyen til Smart Objects > Konverter til smart objekt.