How å lage en Semi-realistisk Apple Watch Illustrasjon i Illustrator
Hva du skal lage
I de følgende trinnene vil du lære hvordan du oppretter en semi-realistisk Apple Watch illustrasjon i Adobe Illustrator.
for det første vil du lære hvordan du lager den metalliske rammen og skjermen ved hjelp av enkle rektangler, grunnleggende vektor form byggeteknikker og noen effekter. Bruk av flere lineære gradienter, en Warp og Transform effekt og noen grunnleggende blandingsteknikker, vil du lære hvordan du oppretter knappene. Til slutt, vil du lære hvordan du oppretter stroppen og hvordan du enkelt kan fargelegge den.
1. Opprett et nytt dokument og sette opp et rutenett
Hit Ctrl-N for å opprette et nytt dokument. Velg Piksler fra Units rullegardinmenyen, skriv 600 i bredde og høyde boksene og klikk deretter på knappen Avansert. Velg RGB, Screen (72 ppi), og sørge for at Align nye objekter være Pixel Grid er merket før du klikker OK.
Aktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett). Du trenger et rutenett hver 1 px, så bare gå til Rediger > Preferanser > Guides > Grid, og skriv en i linjenettet hver boks og en i underinndelinger boksen. Prøv ikke å bli motløs av alt som grid-det vil gjøre arbeidet lettere, og husk at du enkelt kan aktivere eller deaktivere den ved hjelp av kontroll- "tastatursnarveien.
Du bør også åpne infopanelet (Vindu > info). for en live forhåndsvisning med størrelsen og plasseringen av figurer ikke glem å sette måleenheten til piksler fra Rediger > innstillinger > Units > Generelt Alle disse alternativene vil øke arbeidet ditt. hastighet.
2. Opprett hoved Shape
Trinn 1
Velg den rektangelverktøyet (M) og fokus på verktøylinjen. Ta ut farge fra slaget, og deretter velg fyll og sette farge på R = 39 G = 170 B = 225. Flytt til artboard og bare lage en 129 x 152 px form-nettet og Fest til rutenett funksjonen bør gjøre dette enklere. Kontroller at dette rektangelet forblir valgt og gå til Effect > Stylize >. avrundede hjørner Skriv en 25 px Radius, klikk på OK-knappen, og deretter gå til Object >. Utvid Utseende
Trinn 2
Deaktiver Grid (Control- ') og Fest til rutenett (Shift-Control-'), og deretter gå til Rediger > Preferanser > Generelt og sørge for at tastaturet Økning er satt til 1 px.
Sørg for at din blå formen er fortsatt valgt og gå til Object > Sti > Offset Path. Skriv inn en -1 px Offsettrykk, og klikk deretter på OK-knappen. Velg den nylig gjort form, fokus på Utseende panelet (Vindu > Utseende) og bare erstatte den eksisterende fyllfarge med hvitt (R = 255 G = 255 B = 255).
Trinn 3
Kontroller at hvite formen er fortsatt valgt og lage en kopi i front (Ctrl-C > Kontroll-F). Velg den og flytte den 3 px ned med pil ned på tastaturet. Reselect både hvite former, åpne Pathfinder-panelet (Vindu > Pathfinder) og klikk på Minus Front-knappen. Til slutt ting skal se ut i det andre bildet.
Trinn 4
Marker på nytt blå form og gå til Object > Sti > Offset Path. Skriv inn en -1 px Offsettrykk, og klikk på OK-knappen. Sørg for at den nylig gjort formen forblir valgt og fokusere på utseendet panel.
Ta fargen fra fyll og velg deretter slag. Sett farge til hvit, og klikk deretter at " Stroke Kontroller at hvite formen er fortsatt valgt og fokus på utseendet panel. Velg fyll, erstatte den eksisterende farge med R = 70 G = 70 B = 70 og deretter legge til en annen fylling for din form ved hjelp av Legg til ny Fill-knappen. Velg denne nye fyll, endre Blending Mode til Overlay, sette farge til svart (R = 0 G = 0 B = 0) og deretter gå til Effect > Sti > Offset Path. Skriv inn en -1 px Offsettrykk, og klikk deretter på OK-knappen. Sørg for at din blå formen er valgt og fokusere på utseendet panel. Velg fyll, erstatte den eksisterende farge med R = 245 G = 245 B = 245, og deretter gå til Effect > Stylize > Indre glød. Skriv inn attributtene vist i følgende bilde, og klikk deretter på OK-knappen. Aktiver Grid (Control-') og Fest til rutenett (Shift-Control-'). Bruke rektangelverktøyet (M), opprette en 119 x 140 px form, legg den som vist i følgende bilde, sett fyllfarge til R = 251 G = 176 B = 64, og deretter gå til Effect > Stylize > Avrundede hjørner. Skriv en 20 px Radius, klikk på OK-knappen, og deretter gå til Object > Utvid Utseende. Deaktiver Grid (Control-') og Fest til rutenett (Shift-Control-'). Sørg for at din oransje formen er valgt, og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den 15 px til høyre med pil høyre-knappen fra tastaturet. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt og fokusere på utseendet panel. Velg fyll, senke Opacity til 80% og deretter erstatte den eksisterende farge med lineær gradient vist i følgende bilde. Husk at den gule null fra Gradient bildet står for Opacity prosent mens det blå nummeret står for Location prosentandel. Sørg for at din oransje formen er valgt og fokusere på utseendet panel. Velg fyll, erstatte den eksisterende farge med sort og deretter gå til Effect > Stylize > Indre glød. Skriv inn attributtene vist i følgende bilde, og klikk deretter på OK-knappen. Sørg for at svart avrundet rektangel er fortsatt valgt og fokus på utseendet panel. Velg hjerneslag, gjør det svart, senke Opacity til 30% og endre Blending Mode til Soft Light, og deretter åpne den Stroke fly-out panel. Sørg for at vekten er satt til 1 px og sjekk Align Stroke til Inside-knappen. Hold fokus på utseendet panel, sørg for at hele banen er valgt (klikk ganske enkelt at " Bane Aktiver Grid (Control-') og Fest til rutenett (Shift-Control-'). Bruke rektangelverktøyet (M), lage en 99 x 12 px gul form og legg den som vist i det første bildet. Plukk Legg Anchor Point Tool (+), fokus på venstre og høyre side av din gult rektangel, og bare legge til to ankerpunkter som vist i det andre bildet. Velg den direkte Selection Tool (A) og fokus på venstre side av gule rektangelet. Velg den øverste ankerpunktet og dra det syv piksler til høyre, og velg deretter den nederste festepunktet og dra det 5 px til høyre. Flytt til høyre side av gul form og sørge for at Direct Selection Tool (A) er fortsatt aktiv. Først velger du den øverste ankerpunktet og dra det 7 px til venstre og velg deretter bunnen ankerpunktet og dra det 5 px til venstre. Hold fokus på gul form og sørge for at Direct Selection Tool (A) er fortsatt aktiv. Først velger de to festepunktene markert med røde sirkler i følgende bilde, flytte til den øverste linjen og bare skriv 12 px i at Corners boksen. Komme tilbake til gul form, velger de to festepunktene markert med grønne sirkler og legg inn 10 px i at Corners boksen. Til slutt velger de to festepunktene markert med de blå sirklene og skriv 3 px i Corners boksen. Til slutt din gule figuren skal se ut i følgende bilde. Husk at denne funksjonen er kun tilgjengelig for CC brukere. Den beste løsningen for å erstatte denne effekten vil være den runde et hjørne skript som kan finnes i denne artikkelen: 20 gratis og nyttig Adobe Illustrator Scripts. Lagre det på harddisken din, går du tilbake til Illustrator og ta tak i Direct Selection Tool (A). Velg de tre par festepunkter uthevet i følgende bilde (en etter en) og gå til Fil > Scripts > Andre Script. Åpne runde et hjørne Script og skriv nevnt i disse Corner bokser verdier. Sluttresultatet kan se litt annerledes, så gjerne prøve en annen verdi for radius. Kontroller at gul formen er valgt, senke Opacity til 80%, og velg deretter fyll og bare erstatte den gule med lineær gradient vist i følgende bilde . Ikke glem at de gule tall fra Gradient bilde stå for Opacity prosent mens de blå står for Location prosentandel. Bruke rektangelverktøyet (M), lage en 3 x 39 px form, gjør det gule og plasser den som vist på bildet nedenfor. Fokus på venstre side av gul rektangel og plukke Direct Selection Tool (A). Velg den øverste ankerpunktet og dra det 2 px ned, og dra den nederste festepunktet og dra det 2 px opp. Hold fokus på gul form og sørge for at Direct Selection Tool (A) er fortsatt aktiv. Velg de to festepunktene markert med røde sirkler, flytte til den øverste linjen, og skriv en px i at Corners boksen. Deretter velger de to festepunktene markert med de blå sirklene, gå tilbake til det Corners boksen og skriv 3 px. Deaktiver Fest til rutenett (Shift-Control-'). Velg gul form og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den 1 px til høyre. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt, og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Velg gul form og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den to piksler til høyre. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt, og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Kontroller at gul formen er valgt og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Aktiver Fest til rutenett (Shift-Control-'). Bruke rektangelverktøyet (M), opprette en 7 x 26 px form, gjør det gule og plasser den som vist i følgende bilde. Kontroller at gule rektangelet er fortsatt valgt og gå til Effect > Stylize > Avrundede hjørner. Skriv inn en 3 px Radius, klikk på OK-knappen, og deretter gå til Effect > Warp > Arc Øvre. Skriv inn attributtene som vist i følgende bilde, klikker du på OK-knappen, og deretter gå til Effect > Warp > Arc Nedre. Skriv inn egenskapene som vises nedenfor, klikk på OK-knappen, og deretter gå til Object > Utvid Utseende. Deaktiver Fest til rutenett (Shift-Control-'). Kontroller at gul formen er valgt, og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den 1 px til høyre. Reselect både kopier og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 72 G = 72 B = 72. Kontroller at gul formen er valgt, og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den tre piksler til høyre. Reselect både kopier og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart, senke Opacity til 80% og endre Blending Mode til Soft Light. Marker på nytt din gul form, lage en kopi i front og flytte den 1 px ned. Kopiere denne fersk form, velger du kopiere og flytte den 3 px ned. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende form og erstatte den eksisterende fyllfarge med en tilfeldig blå. Reselect din gul form og lage en kopi i front (Ctrl-C > Kontroll-F). Velg denne nye kopien sammen med den blå formen gjort i dette trinnet og klikk på Snitt knappen fra Pathfinder-panelet. Marker på nytt din gul form, lage en kopi i front og flytte den 1 px opp. Kopiere denne fersk form, valgte kopiere og flytte den 3 px opp. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende form og erstatte den eksisterende fyllfarge med en tilfeldig blå. Reselect din gul form og lage en kopi i front (Ctrl-C > Kontroll-F). Velg denne nye kopien sammen med den blå formen gjort i dette trinnet og klikk på Snitt knappen fra Pathfinder-panelet. Marker på nytt både blå figurer og klikk på Unite knappen fra Pathfinder-panelet . Sørg for at den resulterende formen forblir valgt og fokusere på utseendet panel. Bytt ut den eksisterende fyllfarge med sort, senk Opacity til 70% og endre Blending Mode til Soft Light. Aktiver Fest til rutenett (Shift-Control-'). Bruke rektangelverktøyet (M), lage et 4 x 1 px form, gjør det svart og plasser den som vist i det første bildet. Pass på at denne lille firkanten forblir valgt og gå til Effect > Forvrenge & Transform > Transform. Skriv inn attributtene vist i følgende bilde, og klikk deretter på OK-knappen. Sørg for at din lille svarte firkanten er valgt og gå til Object > Utvid Utseende. Dele den resulterende gruppen (Shift-Control-G), og deretter slå den kolonnen av små rektangler i en enkel sammensatt bane ved hjelp av kontroll-8 hurtigtast. Marker på nytt din gul form og lage en kopi i front (Ctrl-C > Kontroll-F). Velg denne kopien sammen med sammensatt bane gjort i dette trinnet og klikk på Snitt knappen fra Pathfinder-panelet. Slå den resulterende gruppe figurer i et nytt sammensatt bane (Ctrl-8), sørg for at det forblir valgt og fokusere på utseendet panel. Pass på at fyllfarge er satt til svart og endre Blending Mode til Soft Light. Kontroller at gul formen er fortsatt valgt og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Sørg for at hovedknappen formen er fortsatt valgt og gå til Effect > Stylize > Indre glød. Skriv inn attributtene vist i følgende bilde, og klikk deretter på OK-knappen. Bruke rektangelverktøyet (M), opprette en 109 x 47 px form, fyll den med en tilfeldig blå og plasser den som vist i det første bildet. Fokus på undersiden av denne nye rektangel, plukke Legg Anchor Point Tool (+) og bare legge til to ankerpunkter som vist i det andre bildet. Sørg for at din blå rektangelet er valgt, fokusere på oversiden og plukke Direct Selection Tool (A). Velg venstre ankerpunktet og dra det 18 px til høyre, og velg deretter riktig ankerpunktet og dra det 18 px til venstre. Flytt til undersiden av din blå form og fokusere på de to festepunktene lagt i forrige trinn. Velg den venstre og dra den 13 px til høyre, og velg deretter den rette og dra den 13 px til venstre. Til slutt blå form bør se ut i det andre bildet. Bruke Ellipse Tool (L), lage en 73 x 10 px form, gjør det blå og plasser den som vist i det første bildet. Sørg for at denne nye formen forblir valgt, bytt til Anchor Point Tool (Shift-C) og klikker på venstre og høyre ankerpunkter. Velg både blå figurer og klikk på Unite knappen fra Pathfinder-panelet. Hold fokus på den resulterende form og bryteren til Direct Selection Tool (A). Velg de to festepunktene markert med de blå sirklene i det andre bildet, flytter til at Corners boksen og skriv inn 20 px. Ved hjelp av det samme verktøyet, velger de to festepunktene markert med røde sirkler og skriv 5 px i at Corners boksen. Til slutt blå formen skal se ut i det tredje bildet. Deaktiver Fest til rutenett (Shift-Control-'). Sørg for at din blå formen er valgt og gå til Object > Sti > Offset Path. Skriv inn et -3 px Offsettrykk, og klikk på OK-knappen. Velg den resulterende form, lage en kopi i front og flytte den 1 px ned. Reselect begge former laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt og fokusere på utseendet panel. Bytt ut den eksisterende fyllfarge med hvitt, senk Opacity til 70%, endre Blending Mode til Soft Light og deretter gå til Effect > Blur > Gaussian Blur. Skriv inn en 3 px Radius, og klikk deretter på OK-knappen. Sørg for at din blå formen er valgt, og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den to piksler til venstre. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt og fokusere på utseendet panel. Senk opacity til 20%, endre Blending Mode til Soft Light og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Sørg for at din blå formen er valgt, og lage to kopier i front (Ctrl-C > Kontroll-F > Kontroll-F). Velg den øverste kopiere og flytte den to piksler til høyre. Reselect begge kopier som er laget i dette trinnet, og klikk på Minus Front knappen fra Pathfinder-panelet. Sørg for at den resulterende formen forblir valgt og fokusere på utseendet panel. Senk opacity til 20%, endre Blending Mode til Soft Light og erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde. Velg blå form, erstatte den eksisterende fyllfarge med lineær gradient vist i følgende bilde, og deretter gå til Effect > Stylize > Indre glød. Skriv inn attributtene nedenfor og klikk på OK-knappen. Velg alle figurene fremhevet i det første bildet, Gruppe dem (Ctrl-G), og deretter sende denne nye gruppen til å sikkerhets bruke Shift-Control-[hurtigtast. Sørg for at din gruppe er likevel valgt og gå til Object > Transform > Reflektere. Sjekk den horisontale boksen, og klikk deretter på Kopier-knappen. Velg den nylig gjort gruppe, dra det ned og legg den som vist i det andre bildet. Bare velg de to viktigste formene som utgjør stroppen og erstatte den eksisterende lineær gradient med de som vises i følgende bilder. Aktiver Fest til rutenett (Shift-Control-'). Sjekk ut Yulia tutorial hvis du ønsker å lære å lage Apple Watch UI. Når du har opprettet alle disse former, bare dra dem inn i Apple Watch Ai-fil. Sørg for at disse figurene er fortsatt valgt og deretter gå til Object > Sti > Outline Stroke og Object > Utvid Utseende. Resize de resulterende figurer som vist i det første bildet, og deretter Gruppe dem (Ctrl-G). Bruke rektangelverktøyet (M), opprette en 101 x 122 px form, gjør det hvitt og plasser den som vist i følgende bilde. Sørg for at denne nye rektangelet er fortsatt valgt og gå til Effect > Stylize > Avrundede hjørner. Skriv en 11 px Radius og klikk på OK-knappen. Marker på nytt din hvite avrundet rektangel sammen med gruppen av figurene som utgjør at UI, gå til Transparency panelet (Vindu > transparent) og klikker på Bruk maske-knappen. Til slutt ting skal se ut i det andre bildet. Her er hvordan det skal se ut. Jeg håper du har hatt glede av denne opplæringen, og kan bruke disse teknikkene i din fremtidige prosjekter.
" stykke tekst for å åpne Stroke fly-out panel. Sørg for at vekten er satt til 1 px og deretter sjekke Align Stroke til Inside-knappen. Når du er ferdig, går du til Object > Sti > Outline Stroke. Velg den resulterende formen sammen med den andre hvite form og klikk på Unite knappen fra Pathfinder-panelet.
Trinn 5
Trinn 6
3. Lag skjerm
Trinn 1
Trinn 2
Trinn 3
Trinn 4
" stykke tekst fra toppen av panelet) og gå til Effect > Stylize > Ytre glød. Skriv inn attributtene vist i følgende bilde, og klikk deretter på OK-knappen.
Trinn 5
Trinn 6
Trinn 7
Trinn 8
4. Lag Quick Access Button
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
5. Lag Digital Crown Button
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Trinn 7
Trinn 8
Trinn 9
Step 10
Step 11
6. Opprett Strap
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Trinn 7
Trinn 8
Trinn 9
Step 10
7. Skift farger stroppen
8. Tilsett Circles UI
Trinn 1
Trinn 2
Trinn 3
Gratulerer! Du er ferdig!