Hvordan lage en produktboks og Flash Drive Mock-up

I denne opplæringen lærer du hvordan du lager ditt eget oppsummeringsbilde av en flash-stasjon og en produktboks ved hjelp av rektangulærverktøyet, pennverktøyet, 3D Extrude & Command og forskjellige gradienter.


Trinn 1

Velg rektangulært verktøy (M) og tegne et rektangel med dimensjoner W: 596px ved H: 452px.


Steg 2

Opprett symbolene du vil søke på boksen. Jeg opprettet fire symboler i ett. Etter at du har opprettet figurene, skyv dem inn i symbolpanelet, ta en titt på bildet nedenfor.


Trinn 3

Velg rektangelet fra trinn 1 og gå til Effect> 3D> Extrude & Command, skriv inn følgende innstillinger: Angi rotasjon rundt X-aksen: 0, Angi rotasjon rundt Y-aksen: -38, Angi rotasjon rundt Z-aksen: 0, Perspektiv: 58, Ekstruder Dybde: 100pt, Slå på Forhåndsvis for å se på forhånd perspektivet, klikk deretter Map Art-knappen og bruk symbolene du opprettet i Trinn 2, klikk OK og rett etter at du går til Objekt> Utvid Utseende.


Trinn 4

Velg pennverktøyet (P), opprett en form i bunnen av boksen som vist nedenfor, og fyll med Linear Gradient-farger. R: 239 G: 133 B: 43 til R: 191 G: 106 B: 34


Trinn 5

Velg rektangulært verktøy (M), tegne et rektangel med avrundede hjørner, Radius: 30px over alle andre former. Etter at du har rundet hjørnene, gå til Objekt> Utvid utseende.


Trinn 6

Nå må du fjerne de avrundede hjørnene på venstre side av formen fra forrige trinn. For å gjøre dette, tegne et rektangel som vil dekke formenes avrundede hjørner, velg deretter formen fra foregående trinn og rektangelet du opprettet tidligere, åpne Pathfinder-panelet og klikk på knappen Minus foran.


Trinn 7

Med formen som fortsatt er valgt, går du til Effekt> 3D> Ekstruder og kommando. I det nye åpningsvinduet angis følgende innstillinger: Angi rotasjon rundt X-aksen: 0, Angi rotasjon rundt Y-aksen: 0, Angi rotasjon rundt Z-aksen: 0, Perspektiv: 58, Ekstruder Dybde: 0pt. Selvfølgelig kan du legge til et annet symbol hvis du vil. Klikk på OK, gå til Objekt> Utvid utseende og fyll på formen med Linear Gradient-farger R: 242 G: 242 B: 242 til R: 240 G: 230 B: 225 og rediger venstre tastepunkter som vist på bildet nedenfor.


Trinn 8

Kopier formen du opprettet i forrige trinn to ganger med Control + C, etterfulgt av Control + F, klikk igjen Control + F, skyv den andre kopien nedover og til venstre, og rediger deretter punktene som vist på bildet nedenfor. Velg nå første kopi og kopien du flyttet nedover og til venstre, og rediger punktene, åpne Pathfinder-panelet, klikk på Minus Front-knappen og fyll på formen med Linear Gradient. For å gjøre dette, åpne Gradient-panelet ved å gå til Vindu> Gradient (Control + F9). Du trenger fire glidebrytere. For den første fra venstre til høyre velg farge R: 209 G: 201 B: 196 med Plassering: 0%, for den andre R: 145 G: 145 B: 149, Plassering: 30%, for den tredje R: 164 G: 163 B: 163, Plassering: 62% og for den fjerde R: 95 G: 94 B: 96, Plassering: 100% og Vinkel: 90 grader.


Trinn 9

Velg pennverktøyet (P), opprett en form på venstre side av boksen på plass som vist på bildet under og fyll med Linear Gradient mørkegrå til lysegrå.


Trinn 10

Kopier formen fra forrige trinn ved hjelp av Control + C, klikk Control + B bak det, endre fargen til svart. Flytt kopien noen få piksler til venstre, bruk Gaussian Blur, Radius: 14px og reduser Opacity: 35px


Trinn 11

Velg pennverktøyet (P) og lag en form i toppdelen under figurene fra trinn 9 og 10 og fyll den med svart.


Trinn 12

Opprett en annen form på undersiden på plass som vist og fyll den med Linear Gradient. Påfør deretter Outer Glow med innstillingene: Modus: Multiply, svart farge, Opacity: 75%, Blur: 4px. Gjør også Gaussian Blur, Radius: 5,2px og reduser Opacity: 60%.


Trinn 13

Kopier formen fra trinn 8 ved hjelp av Control + C etterfulgt av Control + F. Flytt kopien over alle andre ved å gå til Objekt> Ordne> Ta til forside, og opprett en form ved hjelp av Pennverktøyet (P) som dekker toppdelen av formen flyttet vi over alle andre. Velg begge fasene, åpne Pathfinder-panelet, klikk på Minus Front-knappen og fyll den nye formen med Linear Gradient, bruk også Gaussian Blur med Radius: 5,2px og endre blandemodus fra Normal til Overlay.


Trinn 14

Opprett en annen form i nedre del på plass som vist nedenfor, fyll den med farge R: 247 G: 237 B: 232, bruk Inner Glow med følgende innstillinger: Modus: Normal, farge # 5E5E5E, Opacity: 75%, Blur: 2px og klikk OK.


Trinn 15

Igjen, bruk pennverktøyet (P) til å lage en form med svart farge i øverste venstre del av boksen under alle andre, ta en titt på bildet nedenfor.


Trinn 16

I dette trinnet går vi tilbake i begynnelsen. Velg Direct Selection-verktøyet (A), klikk på den større formen fra trinn 2 og fyll den med fargen R: 217 G: 217 B: 217, klikk deretter på venstre side av boksen og fyll den med fargen R: 247 G: 237 B: 232, kopier nå den siste formen du endret fargen til med Control + C etterfulgt av Control + F. Fyll kopien med Linear Gradient. For å gjøre dette, åpne Gradient panelet. Du trenger tre Gradient Sliders. For den første fra venstre til høyre velg fargen R: 145 G: 145 B: 149, for den andre R: 164 G: 163 B: 163 og for den tredje R: 95 G: 94 B: 96. Endre blandingsmodus fra Normal til Multiply og reduser Opacity: 70%. Tegn en linje på plass som vist med Stroke Color R: 102 G: 102 B: 102, Vekt: 1px og bruk Gaussian Blur med Radius: 5,6px.

Vi er ferdige med boksen. I de neste trinnene vil vi opprette flash-stasjonen.


Trinn 17

Velg Ellipseverktøyet (L), tegne en ellipse som vist nedenfor, og gå til Effect> 3D> Extrude & Command, skriv inn følgende innstillinger: Angi rotasjon rundt X-aksen: 58, Angi rotasjon rundt Y-aksen: -20, Angi rotasjon rundt Z-aksen: 62, Perspektiv: 80, Ekstruder Dybde: 190pt, klikk på knappen Flere alternativer og skriv inn innstillingene som vist nedenfor.


Trinn 18

Velg pennverktøyet (P), opprett en form på plass som vist på bildet under og fyll det med Linear Gradient, ta en titt på bildet nedenfor.


Trinn 19

Lag en annen form under den forrige og fyll den med Linear Gradient som vist på bildet nedenfor.


Trinn 20

Vi fortsetter å legge til nødvendige former for flash-stasjonen som vist nedenfor.


Trinn 21

Nå velger du alle former for flash-stasjonen og grupperer dem ved å gå til Objekt> Gruppe.


Trinn 22

Med gruppen valgt, kopier den ved hjelp av Control + C, etterfulgt av Control + F. Gå deretter til Objekt> Utvid utseende, åpne deretter panelvinduet og klikk på knappen Legg til formområde.


Trinn 23

Med formen som dukket opp i forrige trinn, velg, gå til Objekt> Sti> Offset-vei. I det nye åpningsvinduet Sett Offset: 5px, klikk OK. Du vil legge merke til at formen dupliseres i større størrelse etter at du har brukt Offset. Du kan slette den mindre formen og fylle den større med Linear Gradient som vist nedenfor, og endre blandemodus fra Normal til Multiply, reduser Opacity: 32% og gå til Objekt> Path> Offset Path, sett Offset: -2px, klikk på OK og øke Opacity: 48%.


Trinn 24

Velg pennverktøyet (P), opprett figurer på plass som vist på bildet under og fyll dem med Lineær gradient.


Trinn 25

Velg pennverktøyet (P), opprett et par former over alle andre, fyll dem med farge, bruk Radial Blur med innstillinger: Beløp: 100, Blur Metode: Spinn, Kvalitet: Bra, klikk OK, og med dette er vi ferdige.


Konklusjon

Til slutt kan du legge til bakgrunn, skygge og refleksjon på en måte du liker. Her er resultatet.