How å lage et sett med produktivitets ikoner i Adobe Illustrator
Hva du skal lage
I dagens tutorial jeg skal vise deg hvordan du oppretter et sett med flat produktivitets ikoner som kan komme godt med i fremtidige prosjekter.
Vi skal bruke Adobe Illustrator, og prosessen med å gjenskape dem vil være basert på rektangelverktøyet brukes i kombinasjon med Pathfinder og en dash av Direct Selection Tool her og der.
1. Innstilling UpOur Dokument
Det første vi må sette opp før westart bygge ikonene selv er vår dokumentet. Forutsatt at du er alreadyinside Illustrator, opprette en ny fil ( Fil > New
) og bruke disse innstillingene:
Antall tegnebord
: 1
Bredde
: 600 px
Høyde
: 500 px
Enheter
: Piksler
Og fra fanen Avansert plakater (som du kan veksle ved å klikke på høyre facingarrow på sin venstre):
Fargemodus product:: RGB
Raster Effects
: Høy (300 ppi)
Align nye objekter toPixel Grid
: merket
Disse små endringene vil gi rom for en maksimal grad av nøyaktighet, men bare hvis Fest til rutenett er aktivert. For å aktivere dette, bare gå til Vis > Fest til rutenettet.
Trinn 2
Likevel ved hjelp av Avrundet rektangel Tool
,
createfour 52 x 4 px
objekter som har en Hjørneradius
av 2 px
. Color dem ved hjelp #ABABAB, og deretter distansere dem fra en anotherat om 6 px, etter å sørge for gruppe ( Ctrl-G
) Hotell og plassere dem på avstand av 24 px
fra oversiden av objektet vi opprettet i trinn 1.
trinn 3
Dobbeltklikk på de grupperte tekstlinjene we'vejust opprettet for å angi Isolation
modus, og deretter opprette en 20 x 4 px
shapewith en 2 px Hjørneradius Hotell som Vivil posisjon over linjene, og en annen litt bredere 34 x 4 px
ett (med samme 2 px
verdi for Hjørneradius
), holder samme avstand på 6 px
betweenthem og fire sentrert linjer.
Avslutt Isolation
modus ved å trykke Esc
, og thenselect både dokumentets hovedformen og dens linjer og gruppere dem sammen ( Ctrl-G
).
6. Opprette det andre dokumentet Ikon
Trinn 1
Fordi alle de resterende dokumentikonene aremodified versjoner av vår første en, vil vi lage en kopi ved å dra Itto høyre mens du holder nede Alt
key.Once kopien er opprettet, velger du ganske enkelt både den og den opprinnelige og bruk Align
panel for å plassere den på ca 68 px
fra den første.
Trinn 2
Som vår andre dokument ikonet har en foldet rightcorner, må vi justere kopi vi har nettopp opprettet. Først inn Pixel Forhåndsvisning
modus og opprette en 36 x 36 px
form med en Hjørneradius
av 4 px
. Farge det ved hjelp av # E8E8E8 og deretter plassere den slik at document'sright hjørne er spissen peker nøyaktig mot den på midten.
Trinn 3
Grab AddAnchor Point Tool
(plassert under Pen Tool
) og legge til to ankerpunkter akkurat der den øverste og rightsides av dokumentet møte mindre avrundet hjørne torget.
Trinn 4
Når du har lagt til to ekstra ankerpunkt, isolere dokumentets hoveddel (høyreklikk med Direct Selection Tool > isolere Selected Sti
) og deretter deletethe øverst til høyre ankere som danner rundt hjørnet. Umiddelbart etter deletingthem trykk Ctrl-J
å forene theremaining seg, gi dokumentet en skarp diagonal linje.
Trinn 5
OK, så nå har vi justert riktig hjørne, buthow om at plassen igjen på toppen av det? Vel, fordi jeg vil at du skal kunne toadjust hvor mye av folden går i dokumentet, vil vi maskere det med en Beskjærings Mask
. Velg whitedocument form ved hjelp av DirectSelection Tool
kopi ( Ctrl-C
) og lage en kopi ( Ctrl-F
) ontop av det og den lille firkanten. Velg både duplikat og plassen andright klikk > Gjør Clipping Mask
.
Hvis du finner ut at du trenger å gjøre figuren større eller mindre, klikker du bare på lysere grå delen ved hjelp av Direct Selection Tool (A) Hotell og deretter MOVEIT henhold til dine preferanser ved hjelp av retningspilene på tastaturet.
Oh, og ikke glem å gruppere alle elementsof det andre dokumentet ikonet ved hjelp av Ctrl-G
slik at i tilfelle du uhell flytte noe rundt, det er composingshapes vil ikke bli kastet rundt.
7. Opprette thethird Document Ikon
Trinn 1
Som du kan se av forhåndsvisningsbildet, er det thirdicon utgangspunktet den første med to mindre deler stablet oppå ofeach andre. Så grip det første dokumentet, oppretter en kopi til høyre ved draggingwhile holde nede Alt, etter og thenposition det i en avstand på 68 px
Bergem andre.
trinn 2
Når du har det tredje ikonet plassert, selectit og dele opp elementene product: (høyreklikk > Dele
). Lag en copyof den hvite delen, og endre Bredde
til 52 px Hotell og farge til # F0F0F0, og pass på å plassere den under (høyreklikk > Arranger > Send til Back
), presser den mot toppen av 6 px product: (høyreklikk > Transform > Flytt Hotell og innspill 6 px
i < b> Vertikal
boxleaving Horisontal
satt til 0 px
).
Trinn 3
Legg en liten skygge ved å opprette en 52 x 2 px
svart (# 000000)
rektangel, og plasser den bare abovethe hvite dokument delen. Når du har det på plass, endre Blending Mode
til Multipliser, etter å senke sin Opacity
til om 10%
.
< h3> Trinn 4
Legg til et mindre siden under en Wejust opprettet, ved å kopiere den hvite formen en gang til. Justere Bredde
til 44 px
, endre fargen til # 999999, og deretter sørge for å sende den tothe iden av resten av våre elementer og flytte den 6 px
mot toppen.
Trinn 5
Legg til en annen skygge til tidligere createdshape, ved å opprette en 44 x 2 px
svart (# 000000) rektangel, endre Blending Mode
til Multipliser
og sørge for å lowerits Opacity
nivå til 14%
. Til slutt velger du alle ikon elementer og gruppere dem (Ctrl-G).
8. Opprette theClosed konvolutt Epost-ikon
Trinn 1
Velg RoundedRectangle Tool
og skape en 80 x 56px
form med en Hjørneradius
av 4 px
. Farge det bruker # E8E8E8 andthen vertikalt justere den til den første dokumentikonet, posisjonering det om 66 px
fra undersiden.
Trinn 2
Bruke PenTool (P)
vi er nødt til å skape den øverste delen av konvolutten ved startingfrom sentrum og beveger seg utover til øvre høyre hjørne hvor vi skal setthe to første ankerpunkt. Jeg anbefaler at du slår på Pixel Forhåndsvisning
så du har maksimal nøyaktighet når du oppretter theanchor poeng. Formen bør utvide mot venstre og høyre ved 1 px Hotell og til toppen av 2 px
.
Trinn 3
Når du har formet den øverste delen av theenvelope, må vi gjøre det mer runde rundt hjørnene. Vi vil gjøre det byselecting form og deretter gå til Effect > Stylize > Runde Corners Hotell og legge inn 4 px
inn i Radius
field.Once hjørnene er justert, sørg for å velge objektet og Utvid
det ( Object >. Utvid Utseende
)
Trinn 4
Hvis du går tilbake til Pixel Forhåndsvisning
modus, kan du legge merke til at når du har utvidet utseendet på formen, dets ankerpunktene har jumpedoff pikselnettet.
Vi må rette opp dette ved å zoome inn andsnapping dem tilbake ved hjelp av DirectSelection Tool (A)
.
Trinn 5
Antar you'vealigned alle ankerpunktene riktig, flytte formen ned av 2 px Hotell og deretter lage en kopi på Clipboard product: ( kontroll-C
). Fordi vi må legge en skygge under topfolded delen av konvolutten, har jeg funnet ut at det ville være lettere å firstcreate folden, kopiere den til utklippstavlen og deretter forvandle bretten inn theactual skygge og lim den opprinnelige på toppen fra utklippstavlen.
nå som du forstår hva som skal skje, endre toppform farge til svart (# 000000) og deretter sette sin Blending Mode
til Multipliser, etter senking sin Opacity
til 10%
.
Trinn 6
Bruke DirectSelection Tool (A), etter velge nederste anker poeng og flytte dem ned av 2 px Hotell og indre venstre og rettigheter onesby 1 px
mot utsiden.
Trinn 7
Avslutt Isolasjon
modus og lim ( Ctrl-F
) AKopier av den øverste delen av konvolutten fra Clipboard plakater (den jeg fortalte deg å duplisere i trinn 5) på theshadow .
Trinn 8
lim inn enda en kopi av den øverste delen, andthen snu den horisontalt product: (høyreklikk > Nødvendigvis > Horisontal
) makingsure å endre sin farge til # 808080, og justere den til undersiden av mainenvelope form.
Trinn 9
Fordi vi trenger den nederste delen for å gå utføres under de skygge og toppen lettere en, må vi velge både den og mainenvelope form, og deretter høyreklikk > Arranger > Send til Back
.
Trinn 10
Når vi har øverst, nederst og skygge sectionsof vår konvolutt, må vi bruke en maske slik at de delene som går utenfor ikonet ' sbase form vil være skjult. For å gjøre dette, må vi først kopiere ( Ctrl-C
) og lim inn ( Ctrl-F
) en kopi av basen shapeonto de tre nevnte seksjoner. Når kopieringen er på plass, velger du ganske enkelt itand de tre delene som vi trenger for å maskere og traff høyreklikk > Lag Clipping Mask
Quick tips. Fordi større objekt skjuler det meste av thesurface av bitene vi trenger for å maskere, har vi for å zoome inn på hjørnene andmake valg med delene som går utenfor hovedformen område. Velg alle elementene i e-postikonet andgroup dem sammen ved hjelp av Ctrl-G Som andre e-postikonet er basert på onethat vi har nettopp opprettet, bare kopiere den originale og lage et duplikat atabout 48 px Løs opp gruppe objektene (høyreklikk > Dele Velg den øverste fold, og deretter reflektere den horisontalt slik at spissen vil nowpoint oppover. Velg den reflekterte objektet, og deretter flytte ittowards toppen av 26 px Endre objektets farge # E3E3E3 og thencreate en 76 x 62 Siden brevet og topp ganger trenger å være maskert, vi vil ha å kopiere den nederste delen fold ved hjelp av Direct Selection Tool (A) Fordi vi ønsker masken for å skjule en bestemt partof vårt brev og topp fold, må vi justere den ved første slette thetop midtre og øvre venstre og høyre anker punkter. Først dobbeltklikk på theshape å angi Isolation fortsatt i Isolation Velg den formen vi har nettopp opprettet, topfold og brev delen, og deretter høyreklikk > Gjør klipping Mask Vi vil nå måtte gjenta trinn 6 og deretter changethe figurens farge # C7C7C7. Denne kopien av objektet vil fungere som innerlomme som vårt brev vil gå inn i. Som lommen må passe inn i overflaten ofour brevet, vil vi måtte bruke en < b> ClippingMask Før vi går i lommen på baksiden av theletter, må vi først kopiere sine bunnsentrert og middelankerpunkt, som Vivil bruke til å lage den indre skygge for vår lomme. Først grab Direct Selection Tool (A) Så snart du ' har opprettet en kopi av anchorpoints, kan du velge bokstaven og bringe både det og toppen peker foldto forsiden av lommen (høyreklikk > Arranger > Legg foran Dobbeltklikk på brevet delen for å angi Isolasjon Velg skyggen og deretter Utvid Mens stillinside det isolert gruppe, skape en mindre 20 x 4 px Hotell og tre bredere 64x 4 px . Legg en bunn skygge til brevet som willcover de laveste to linjer med tekst. Gjøre det ved å opprette en 76 x 37 px Legg en liten 28x 2 px For å avslutte vår lille ikonet, må vi correctthe bunnen brettet delen, som trenger å komme på toppen av lommen shadow.Simply velge fold , og deretter bringe den til fronten av resten av ourelements å bruke Ordne > Ta toFront Det ikonet som vi har til å skape er onewith alle skriveredskaper. Vi vil ta hvert element og bygge dem oneat gangen. Bruke RoundedRectangle Tool Dupliser viskelær hovedform, og thenuse rektangelverktøyet (M) Bruke RoundedRectangle Tool Opprett en litt mørkere (#CCCCCC) 10 x 8 px Legg en liten 6x 1 px Legg til en 10x 24 px Legg til en 13x 2 px Avslutt pennens lokk ved å legge til et 2 x 22 px Opprett en 6x 73 Juster blyant topp side ved å velge anddeleting den top-middelankerfester, slik at du eliminere runde corners.Do dette ved hjelp av Direct Selection Tool (A) Hotell og når du har fjernet ankrene trykk på Ctrl-J Lag en kopi av den resulterende form ( Ctrl-C > Kontroll-F Avslutt den nederste delen av blyanten byadding en 6 x 5 px Ta RectangleTool (M) Hotell og skape en 2 x 61 px Createthe spissen på en blyant ved å tegne en 6 x 9px Deretter bruker du Ellipse Tool (L), etter å lage en 8 x 6 px Når du har lagt spissen, velger du alle theelements av blyant og gruppere dem sammen ( Kontroll -G Så den siste delen av vår lille writinginstruments ikonet er hersker. For å gjenskape det vi vil stole på våre trofaste Avrundet rektangel Tool, Legg den indre delen ved å opprette en 8 x 33 px Lag et duplikat av hoved linjal form, og lim den på toppen av alt annet. Deretter, ved hjelp av rektangelverktøyet (M), Når du har everythingpositioned, velger du bare kopiere og rektangel og bruke Pathfinder Å fullføre linjal, bare legge til ca 11 tabpositions (plass indikatorer). Start med en større 4 x 1 px Ikke glem vennene du vil legge viskelæret , penn, blyant og linjal og gruppere dem sammen ( Ctrl-G Vi er nesten therenow, så vi har bare tre flere ikoner å gå! Så sørg for at du er på thedevices lag, og la oss begynne å bygge disse søte små enhetene. Med hjelp ofthe Avrundet rektangel Tool På toppen av det, legge til en annen 54 x 72 Begynn å legge detaljer til skjermen ved å skape azigzag form med hjelp av PenTool (P), etter å gi objektet en lysere nyanse (# 595959 ). Klikk på den, og usethe Direct Selection Tool (A) Som linjen må gå fra den ene siden av thescreen til den andre, kan det hende du trenger for å lage en kopi av den større grå rektangelet og plasser den på den grønne linjen for å maskere deler goingoutside sitt område. Legg en liten hvit (#FFFFFF) 8 x8 px Dupliser mørkere rektangelet representerer thedevice skjerm, og lime inn kopien på alle de andre elementene. Endre itscolor til hvit (#FFFFFF), sin BlendingMode Med DirectSelection Tool (A) Siden dette ikonet er i utgangspunktet en litt largerversion av iPad mini en, bare følg de samme trinnene, men gi theelements litt større dimensjoner. For den hvite delen, må vi opprette en 70 x 96 px For innloggingsbildet, lage to 24 x 4 Skyv login form mot toppen byright klikke >.; Transform > Flytt Opprett påloggingsikonet ved å tegne en 22 x 22 px For den menneskelige silhuetten, må vi først legge hodet, som vi vil bygge ved hjelp av en 8 x 10 px Da på bare én piksel under, vil vi legge til en 20 x 20 px Fullfør opp enheten ved å legge en screenreflection bruker den samme prosessen som vi brukte for iPad mini. Kopier mainscreen form, lim den på toppen av alt annet, og deretter bruke Direct Selection Tool (A) La oss begynne med å lage stativet for iMac'sdisplay. Bruke rektangelverktøyet (M) justere formen topp forankringspunkter ved movingthem mot innsiden av 2 px Legg til en 26 x 2 px Ta Avrundet rektangel Tool Hotell og skape en 100 x 72 px Legg til en enda mørkere (# 404040) 92 x 52 px Dupliser mindre mørkere skjerm-delen (< b> Ctrl-C Jeg vet ikke ifyou've lagt merke til, men ikonene som vi har laget så langt ser ut til å bli lackingsomething. Hvis du tar en nærmere titt på forhåndsvisningen du vil vite hva I'mtalking om. Vent til det ... vent på det ... Yup! Gradienter! Våre ikoner trenger agradient kledde på dem for å gjøre dem gnisten. Som prosessen med å legge gradienten er exactlythe samme for hvert ikon, jeg vil bare vise deg et eksempel for dokumentet ikon, slik at du kan fullbyrde resten av dem. Sørg you'reon riktig lag (i dette tilfellet dokumenter laget), og ved hjelp av Direkte Selection Tool (A) Når du har gjort det , bare bruke en lineær Gradient Når du har opprettet en gradient, bare sette sin Blending Mode Jeg håper at du ' ve klarer å følge opplæringen og gjenskape disse hyggelig ser ikonene, men viktigst jeg håper virkelig du har lært noe nytt underveis. Inntil neste gang!
Trinn 11
.
9. Opprette OpenedEnvelope e-postikonet
Trinn 1
til høyre
Trinn 2
). og deretter inn Isolation
modus (dobbeltklikk på eitherthe topp eller bunn konvolutt folder) hvor vi må kutte ( Ctrl-X
) den øverste delen, exit Isolasjon Hotell og lim den på toppen av alt annet ( Kontroll -F
).
Trinn 3
Trinn 4
. For å gjøre dette, bare høyreklikk > Transform > Flytt Hotell og i pop-up boks skriv - 26 px
for Vertikal
innspill og 0
for Horisontal
en.
Trinn 5
hvit (#FFFFFF) rectanglewith en Hjørneradius
av 4 px
. Plasser den nye formen på om 8 px
fra spissen av den øverste foldedsection.
Trinn 6
, lim den på toppen av de andre elementene, reflektere den horisontalt, Hotell og deretter alignit til den øverste delen av ikonets hoved~~POS=TRUNC.
Trinn 7
modus andthen bruke Direct Selection Tool (A)
å fjerne de angitte ankere ved å velge og deretter trykke på Slett
.
Trinn 8
modus, ta tak i Pen Tool (P)
andclick på øverste høyre ankerpunkter og begynne å tegne en figur som går allthe vei til spissen av folden. Bruk PixelPreview
slik at du kan ha en mer nøyaktig visning av banen, andhold ned Skift
samtidig legge anchorsso at linjene ender opp helt rett.
Trinn 9
. Også kan du bli kvitt skyggen under theletter objekt ved hjelp av Direkte SelectionTool (A)
å slette den, så formen er inne i samme klipping maske som thebottom fold objekt.
Trinn 10
Trinn 11
til det ved å lage en kopi av den viktigste formen vår konvolutt på toppen, og deretter med begge valgt, høyreklikk > Gjør Clipping Mask
.
Trinn 12
klikker onthe form, og deretter en gang ankerpunktene viste, velge de som Ipointed ut, ved å klikke på den første, og deretter holde nede Shift
å velge resten. Når du haveall av dem valgt, bare kopiere dem til Clipboard product: ( Ctrl-C
).
Trinn 13
)
<. h3> trinn 14
modus og lim inn ( Ctrl-F
) ankerpunkter som vi copiedin trinn 12. Vend Fyll
med theshape Stroke product: ( Shift-X
) og deretter endre farge til svart (# 000000) og Blending Mode
Multiply.
Så sørg for å senke sin Opacity
nivå til 12%
andset Stroke Vekt
til 4 px
.
< h3> Step 15
det ved å gå til Object > Utvid, etter og sjekk Fyll Hotell og Stroke
.
Step 16
figurer, alle med en CornerRadius
av 2 px, etter og deretter distancethem fra hverandre ved hjelp av Align
panelets Horisontal Fordel Space product: (sett på 6 px
). Gruppe linjene ( Ctrl-G
) og deretter justere dem horisontalt
til brevet form, på en distanceof 10 px
fra sin oversiden.
< p> også, sørg for å bringe lommen skyggen tothe foran tekstlinjer (høyreklikk > Arranger > Legg foran
)
Trinn 17
svart (# 000000) rektangel, som Vivil sentrum horisontalt til brevet form, samkjøre det til bunnen side.Then endre Blending Mode
til Multipliser, etter å senke sin Opacity
til 8%
.
Trinn 18
rektangel rett over brevet delen. Siden dette vil fungere som ashadow, vi trenger å endre sin BlendingMode
til Multipliser Hotell og senke Opacity
til 10%
. Fordi vi ønsker skyggen å gå over bare toppen pointingfold, trenger vi å kopiere folden og lim den på toppen, og deretter med begge themselected, høyreklikk > Gjør ClippingMask
.
Trinn 19
. Når du har gjort det, rett og slett velge alle ikon elementer andgroup dem sammen ved hjelp av Ctrl-G
.
10. Opprette theEraser
Trinn 1
skape en 16 x 32 px
shapewith en Hjørneradius
av < b> 2 px, etter å gi det en rosa farge (# FFB8C9) .Bottom justere formen til den andre e-postikonet og distansere de to på om 51 px
.
Trinn 2
å skape ashape som dekker den øverste halvdelen av elementet, og trekke den fra eraserusing Pathfinder
s Minus Front
alternativet. Endre theresulting form farge til # C6B8FF og deretter gruppe både det og viskelær er mainshape inn et enkelt objekt ( Ctrl-G
).
11. Opprette thePen
Trinn 1
skape en 6 x 80 px
shapewith en Hjørneradius
av < b> 2 px
. Bottom justere objektet til theeraser i en avstand på 8 px
til høyre.
Trinn 2
rektangel, bunn justere den til den tidligere opprettede form, og etter å lage en kopi av thepen base form, velger du både det og mørkere rektangel og bruke Pathfinder
's Snitt
funksjonen til å opprette undersiden av pennen.
Trinn 3
segment på toppen av formen vi nettopp opprettet, og farge det bruker # B3B3B3.
Trinn 4
rektangelet mot toppen av pennen, og pass på å farge det opptakerendinkandugjennomføreopptakfraen lysere nyanse av grått (# F2F2F2 ).
Trinn 5
rektangel (# E6E6E6) på ca 2 piksler
fra pennen topp side, samkjøre det til den rette. Deretter oppretter du en 6 x 2 px
svart (# 000000) rektangel, endre Blending Mode
til Multipliser Hotell og dens Opacity
til 10%
, andposition det i underkant av pennens lokk.
Trinn 6
form med en Hjørneradius
av 1 px
, farge den med # F2F2F2 og deretter justere den til venstre makingsure at runden øverste delen går om 1px
utenfor cap forlengelse bro . Når du har lagt til littledetail, gruppere alle elementene i pennen ved hjelp av Ctrl-G
.
12. Opprette thePencil
Trinn 1
avrundet rektangel (# E8CA8B) med en Hjørneradius
av 2 px
.Align den til bunnen av pennen i en avstand på 6 px
fra sin høyre side.
Trinn 2
å forene resterende en for å fylle gapsand lukke figuren
Trinn 3
). og thenadd en 12 x 67 px
protestere på toppen ofit, horisontalt samkjøre det til oversiden av vår blyant. Med både valgt, bruker du Minus Front
å trekke thelarger overdel og få den lille viskelær. Endre resulterende shape'scolor til # FFB8C9.
Trinn 4
grå (# E6E6E6) rektangel , og en mindre 6 x 1 px Hotell og mørkere (#CCCCCC) form på toppen av det. Også legge til to 1 x 1 px
sirkler (# B3B3B3), plassere dem i en avstand på 2 px
fra hverandre, og deretter groupthem ( Ctrl-G
) og bothvertically og horisontalt justere dem til større grå objektet vi justcreated.
Trinn 5
form, farge den med # FFDF99 og deretter horisontal justere den til oversiden av ourpencil.
Trinn 6
rektangel og plassere den på toppen av hovedformen vi har så far.Using Legg Anchor Point Tool,
createan forankringspunkt på oversiden av formen, akkurat i midten. Deretter usingthe Slett Anchor Point Tool, etter removethe øverste venstre og høyre ankere slik at spissen kan ta form.
sirkel, farge den med # 938585and plasser den på toppen av tuppen slik at bare en liten del av det willintersect overflaten. Lag en kopi av tuppen på sirkelen, og deretter hidethe resten av sirkelen ved hjelp av en ClippingMask plakater (både spiss og sirkelen valgt > Gjør Clipping Mask
). Når du har gjort det, opprette tre mindre 2 x 4 px
former, og fjerne sine topanchor punkt ved hjelp av Direkte SelectionTool (A)
. Plasser alle tre gjenstander i nærheten av hverandre, like under thepencil tips.
Trinn 7
).
13. Opprette Linjal
Trinn 1
som Vivil skape en 22 x 81 px
hvit (#FFFFFF) form. Juster den til bunnen av blyanten, og deretter plassere det på 8 px
fra sin høyre side. Når du haveit på plass, senke Opacity
levelto rundt 40%
.
Trinn 2
avrundet rektangel med en Hjørneradius
av 1 px Hotell og en Opacity
levelof 20%
.
Trinn 3
tegne en 20x 81 px
objekt og Vertikal
alignit til høyre side av duplikat vi nettopp opprettet.
's Minus Front
å lage sidedelen som vi trenger. Senk sin Opacity
til 20% Hotell og deretter opprette en ny kopi som vi vil gjenspeile verticallyand justere til herskerens høyre side.
Trinn 4
rektangel, etterfulgt av en sekvens av fire mindre 3 x 1 px
seg, og deretter en annen largerone og så videre, til du har alle 11 av dem . Gruppe alle fanene sammen ( Ctrl-G
) og senk deres Opacity
til 80%
.
), som danner en singleicon.
14. Opprette iPad Mini
Trinn 1
skape en 62 x 92 px
hvit (#FFFFFF) form andgive det en Hjørneradius
av 4 px
. Juster den horisontalt
til e-ikon, i en avstand på 46 px
.
rektangel som vi vil fokusere både vertikalt og horisontalt tothe større form, og farge det ved hjelp av # 404040. Legg en mindre 2 x 2 px
sirkel (# 404040) på toppen, og en annen større 4 x 4 px
circletowards bunnen, fargelagt det i en litt lysere nyanse (#DBDBDB) .
Trinn 2
til Merk av i ankerpunkter som danner sikksakk linje. Lag en duplikatlinje afterthem, fargelagt det grønne (# 76D9BF) og gi det en 2 px Stroke Vekt
.
sirkel, og en enda mindre 4 x4 px
grønn en (# 6DC7AF) på toppen for å danne verdibarometer, og positionit på toppen av den nederste linjen verdi.
Trinn 3
til Overlay Hotell og dens Opacity
til 16%
.
ta tak i nedre høyre hjørne og flytte det oppover med om 54 px
. Du kan enten gå inn Pixel Forhåndsvisning Hotell og flytte ankeret ved draggingit, eller du kan velge den og deretter høyreklikk > Transform > Flytt > Hotell og skriv 54 px
i Vertikal
InputBox, og 0 px
for Horisontal
en.
15. Opprette iPad
Trinn 1
form med samme 4 px Hjørneradius
, samtidig som det gir theinner skjermen seksjon en størrelse på 62 x 76 px
. Plasser de samme topp og bunn sirkler på det andre ikonet, noe som gjør sureto justere dem horisontalt.
Trinn 2
rektangler med en Hjørneradius
av 1 px
. Color dem ved hjelp av # 404040 og deretter distansere dem på 4 px
fra hverandre. Senter themhorizontally til iPad form, og pass på å gruppere dem etterpå andalign dem til skjermens undersiden
Trinn 3
andentering -. 18 px
i Vertikal
input boksen
Trinn 4
sirkel som vi vil colorusing samme verdi som innloggingsformer (# 404040). Deretter horisontalt justere Itto skjermen, plasserer den på 6 px
Bergem innloggingsfeltene.
Trinn 5
ellipse, som vi willposition mot toppen av den tidligere opprettede form, på om 3 px
fra toppen.
sirkel som vi vil maskpartially å bruke en 18 x 18 px
smallerone.
Trinn 6
å flytte itsright nedre hjørne til toppen ved om 56px
. Endre formen Blending Mode
til Overlay, etter å senke sin Opacity
til 16%
.
16. Opprette theiMac
Trinn 1
createa 28 x 2 px
form, farge det hvit (#FFFFFF), andthen bunnen justere den til iPad i en avstand på 80 px
.
Trinn 2
.Create den midtre delen av stativet ved å tegne en < b> 24 x 12 px
litt mørkere (# E8E8E8) form, som vi vil ha toadjust som vi gjorde med basen. Denne gangen, derimot, vil vi flytte ankere ved bare 1 px
.
svart (# 000000) rektangel som vil fungere som en skygge, andalign den horisontalt til oversiden av midt stå delen. Fordi theside av skyggen går utenfor standen område, må vi kopiere ( Ctrl-C
) og lim inn ( Ctrl-F
) en kopi av stativet ontoit, og deretter velg både og lage en klipping maske ved å høyreklikke > Gjør Clipping Mask
.
Trinn 3
hvit (#FFFFFF) rectanglewith en Hjørneradius
av 4 px
. Dette vil fungere som vår base screenshape. Lag en kopi av det, endre farge til # 595959, og deretter usingthe Direct Selection Tool (A)
removethe Nederst i midten ankerpunkt, trykke på Ctrl-J
å forene de gjenværende. Juster høyden på formen byselecting bunn ankere og flytte dem mot toppen av 8 px
.
form, og sentrum er det bothvertically og horisontalt til den delen vi opprettet tidligere. Legg en liten 4 x 4 px
sirkel mot bottomwhite delen av skjermen der Apple-logoen ville gå.
Trinn 4
), og lim den på toppen ofeverything annet ( Ctrl-F
). Asthis vil fungere som vår refleksjon, må vi endre sin farge til hvit (#FFFFFF), setter sin Blending Mode
til Overlay
, og senk deretter Opacity
16%
.
17. Legge thefinal Touches
Trinn 1
velge andcopy ikonets basen form. Hvis ikonet er sammensatt av flere elementer (som flere dokumenter, iMac og instrumenter ones) må du Merk av i de grunnleggende former som danner ikonet og lim dem over groupedelements selv.
bruker # 1B1464 for vår leftcolor og # C1272D for våre rette, og pass på å stille inn vinkelen på 60
°
.
Trinn 2
til Overlay
, senke Opacity
til 52%
. Du kan spille rundt med Opacity
nivå kanskje du vil finne at en høyere eller lowervalue fungerer bedre for deg.
Det er det!