Create en Tic Tac Toe Mobile App Interface i Adobe Illustrator
Dette innlegget er en del av en serie kalt Vector Mobile App Design.Create en Tic Tac Toe Mobile App Icon i Adobe Illustrator
i de følgende trinnene vil du lære å lage en detaljert Tic Tac Toe spillet grensesnittet i Adobe Illustrator. For det første vil du lære hvordan du oppretter en konisk gradient ved hjelp av et enkelt rektangel, en radial gradient og en maske. Deretter bruker Utseende panelet, Film korn og svamp effekter, en innebygd art pensel pluss noen grunnleggende blending og maskeringsteknikker vil du lære hvordan du oppretter en subtil tekstur. Vi vil fortsette med grunnleggende vektorfigurer byggeteknikker og noen enkle Transform effekter. Flytte på, ved hjelp av mer Transform effekter sammen med 3D Extrude og Bevel effekt, Utseende panelet, Blend Tool og flere grafiske stiler du vil lære hvordan du kan lage 3D-X og O. Når du er ferdig med 3D-figurer vil du lære hvordan du legger til flere fyllinger, hjerneslag og effekter for et enkelt stykke tekst. Til slutt, vil du lære å lage en andre, større design for større skjerm.
1. Opprett et nytt dokument og oppsett et rutenett
Hit Command + N for å opprette et nytt dokument. Skriv inn 640 i boksen Bredde og 990 i høyden boksen klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi) og sørg 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). For det første trenger du et rutenett hver 10px, så bare gå til Rediger > Preferanser > Guides > Grid, skriv 10 i linjenettet hver boks og en i underinndelinger boksen. 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 > Preferanser > Units > General. Alle disse alternativene vil øke arbeidshastigheten.
2. Lag en Konisk Gradient
Trinn 1
Velg den rektangelverktøyet (M) og fokus på verktøylinjen. Fjerne fargen fra slaget velg deretter fyll og sette farge på R = 29 G = 166 B = 224. Flytt til Artboard, bare lage en 640 piksler torg og plasser den som vist i følgende bilde, bør Fest til rutenett lette arbeidet ditt.
Trinn 2
Sørg for at din blå firkanten er likevel valgt og lage en kopi i front (Ctrl + C > Control + F). Velg denne kopien og erstatte den blå med radial gradient vist i følgende bilde. Sørg for at denne kopien er valgt og lage en ny kopi i front. Fyll den med hvit deretter fokusere på Lag-panelet og gjøre det usynlige
Trinn 3
Velg den plassen fylt med radial gradient og gå til Object >.; Utvide. Sjekk Gradient Mesh knappen fra Utvid vinduet og klikk på OK. Flytt til Lag-panelet, og du vil finne en gruppe med en maske og en beskjæringsbane. Slett avgrensningsbanen og opp gruppe de resterende mesh (Shift + Ctrl + G). Grab Selection Tool (V), velg mesh og flytte den litt opp og til venstre, bare så det smekker til nettet.
Trinn 4
Deaktiver Fest til rutenett ( Vis > Fest til rutenett). Velg mesh, ta tak i Mesh Tool (U) og legge til noen nye mesh poeng som vist i følgende bilde.
Trinn 5
Hold fokus på mesh og plukke Direct Selection Tool (A). Velg mesh punktene ett for ett, og stille inn fargene som vist i følgende bilde.
3. Maske og legge tekstur for Konisk Gradient
Trinn 1
Fokus på Lag-panelet og slå på synlighet for den hvite firkanten. Velg det sammen med mesh, åpner fly-out menyen i Transparency panel og gå til Make Opacity Mask. Til slutt ting skal se ut i det andre bildet.
Trinn 2
Fokus på Lag-panelet, velger du den blå firkanten, ta den med til fronten (Shift + Ctrl +]) og fokus på utseendet panel. Først erstatte den blå med en enkel svart. Sørg for at denne svarte fyll er valgt, senke Opacity til 5%, endre Blending Mode til Overlay og gå til Effect > Kunstnerisk > Film Grain. Skriv inn egenskapene som vises i følgende bilde og klikk på OK.
Gå tilbake til Utseende panel og legge til en annen fylling for denne form ved hjelp av Legg til ny Fill-knappen (påpekt av den lille, blå pil i følgende bilde). Velg denne nye fyll, sørge for at fargen er satt til svart, senke Opacity til 40%, endre Blending Mode til Overlay og gå til Effect > Kunstnerisk > Svamp. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå tilbake til Utseende panel. Legg en 2PT slag, justere den til inne og sette farge på R = 219 G = 224 B = 227. Hold fokus på Utseende panel og legge til en andre slag for denne form ved hjelp av Legg til ny Stroke knappen (påpekt av den lille, grønne pilen i følgende bilde). Velg denne nye slag, gjør det 1pt bred, sette farge på R = 113 G = 123 B = 126 og justere den til innsiden. Sørg for at denne strukturerte former er valgt, åpner Graphic Styles panelet og bare trykke på Ny grafisk stil knappen. Dobbeltklikk på denne nye grafisk stil og bare nevne det " tekstur Kontroller at strukturert formen er fortsatt valgt og lage en kopiere foran. Velg denne kopien og bare trykke på D-tasten på tastaturet for å erstatte den eksisterende Utseende attributter med standardprogrammet (hvit fyll- og 1pt, svart strek). Deretter trenger du en innebygd art pensel. Gå til Børster panel, åpne fly-out menyen og gå til Open Brush Library > Kunstnerisk > Artistic_ChalkCharcoalPencil. Ta en titt inne i denne nye panelet, og du bør finne den Charcoal_Varied art pensel. Reselect formen gjort i dette trinnet og fokus på utseendet panel. Velg hjerneslag, legge til at Charcoal_Vadied børste og sette farge på R = 50 G = 50 B = 50. Pass på at formen gjort i dette trinnet er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " maske Velg det form med " maske Aktiver Fest til rutenett (Vis> Fest til rutenett). For dette trinnet trenger du et rutenett hver 5px, så gå til Rediger > Preferanser > Guides & Grid og skriv 5 i Uten kraftlinjer hver Velg den ni kvadrat, tilsett Charcoal_Vadied børste og sette farge på R = 50 G = 50 B = 50. Velge disse formene etter tur, og tilfeldig rotere dem som er vist i det andre bildet. Når du er ferdig Gruppe dem (Control + G). Velg denne nye gruppen, senke Opacity til 15% og endre Blending Mode til Color Dodge. Pass på at gruppen med de ni rutene er fortsatt valgt og lage en kopi i front (Ctrl + C > Control + F). Åpne ny gruppe, velg alle ni rutene og erstatte Charcoal_Vadied pensel med Chalk - Scribble pensel. Velg det hele gruppen kopiere, endre Blending Mode til Soft Light og øke Opacity til 50%. Sørg for at gruppen gjorde i forrige trinn er fortsatt valgt og lage en kopi i front. Dele denne nye gruppen, velger de resulterende ni ruter, fjerne kunsten børsten fra slag og sette fyllfargen på R = 83 G = 93 B = 96. Flytt til Lag-panelet og navngi disse figurene fra " en Fokus på torget " en Marker på nytt din " en Velg det " en Velg det " frameOne Fokus på torget ". 2 Marker på nytt din " 2 Velg det " 2 Velg det ". frameTwo Fokus på torget " 5 Velg det rektangelverktøyet (M), lage to, 160 x 10px figurer og plassere dem slik det er vist i fjerde bildet. Bytt til Direct Selection Tool (A) og fokus på undersiden av den øverste rektangelet. Velg den venstre ankerpunktet og dra det 10px til høyre og deretter velge riktig ankerpunktet og dra det 10px til venstre. Flytt til bunnen rektangel og fokusere på oversiden. Velg den venstre ankerpunktet og dra det 10px til høyre og deretter velge riktig ankerpunktet og dra det 10px til venstre. Når du er ferdig å fylle begge former med den lagrede gradient. Marker på nytt din " 5 Velg alle ni ramme grupper sammen med de to gruppene med de ni rutene (med kunst børster) og konsern dem (kontroll + G). Flytt til Lag-panelet og slett kalle denne nye gruppen " Rammer ". Fokus på " frameOne Kontroller at den blå formen er fortsatt valgt og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i det venstre vinduet (i følgende bilde), klikk på OK og gå igjen til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i vinduet til høyre (i følgende bilde), klikk på OK og gå til Effect > 3D > Extrude & Bevel. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Sørg for at du sjekker Draw Hidden Faces boks Sørg for at dine blå figurene er fortsatt valgt og gå til Object >.; Utvid Utseende. Velg de resulterende grupper av figurer og trykke Shift + Ctrl + G tre ganger løse opp alle disse gruppene. Ta en titt inni Lag-panelet, og du vil finne en haug med blå figurer. Velg den Selection Tool (V), velger ni, topp " X " former og konsernet dem (Ctrl + G). Sørg for at denne nye gruppen er valgt og sett på det blå med R = 142 G = 150 B = 155. Flytt til Lag-panelet og bare gjøre denne gruppen usynlig Velg den Selection Tool (V), velger de andre ni ". X " former og konsernet dem (Ctrl + G). Sørg for at denne nye gruppen er valgt og sett på det blå med R = 72 G = 80 B = 85. Flytt til Lag-panelet, dra denne nye gruppen under den usynlige en så gjør det usynlig. Fokus på de gjenværende blå figurer. Velg en av disse formene og gå til velge > Samme > Utseende (som vil velge alle blå figurer) så bare trykk Delete-tasten på tastaturet. Fokus på Lag-panelet, slå på synlighet for de to gruppene med " X " figurer deretter UNGROUP dem (Shift + Ctrl + G). Fokus på " frameOne Hold fokus på " frameOne Pass på at toppen ". X " Formen er fortsatt valgt, fokus på utseendet panel, legge ae nytt fyll og velg det. Bruk radial gradient vist i det første bildet, senke Opacity til 70% og gå til Effect > Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Gå tilbake til Utseende panel og legge til en ny fyll for denne formen. Bruk radial gradient vist i det andre bildet, senke Opacity til 10%, endre Blending Mode til Overlay og gå til Effect > Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Gå tilbake til Utseende panel og legge til en siste fyll og velg det. Bruk lineær gradient vist i tredje bildet, senke Opacity til 25%, endre Blending Mode til Overlay og gå til Effect > Sti > Offset Path. Skriv inn et -2px Offsettrykk, og klikk på OK. Pass på at formen redigeres i dette trinnet er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " frontGrey Fokus på verktøylinjen og dobbeltklikk på Blend Tool (eller gå til Object >. Blend > Blend alternativer. .). Velg Spesifiserte Steps fra rullegardinmenyen, skriv 25 i th hvit boks og klikk på OK. Fokus på " frameOne Deretter må du gjenta teknikker som brukes for " X1 Velg den " XGrey Hold fokus på " XYellow Hold fokus på " XYellow Velg den resterende åtte " X " figurer med " frontGrey Bruke Ellipse Tool (L), opprette en 100px sirkel og legg den som vist i det første bildet. Fyll den med ingen, men legger til en 25pt Stroke vekt, justere den til inne og sette farge på R = 29 G = 166 B = 224. Sørg for at din 100px sirkel er fortsatt valgt deretter legge til Transform og 3D Extrude & . Bevel effekter Sørg for at din blå formen er fortsatt valgt og gå til Object > Utvid Utseende. Velg de resulterende grupper av figurer og trykke Shift + Ctrl + G tre ganger løse opp alle disse gruppene. Nå, fokusere på de resulterende blå figurer og bare gjenta de teknikker som brukes for " X " former. Fjern uønskede blå figurer deretter re-farge øverst og nederst " O " former Fokus på disse ". O " figurer, bruke de samme teknikkene som brukes for " X " former og sørge for at din bruk av lagrede grafiske stiler for å lette arbeidet ditt. Ikke glem å gruppe, navn og organisere disse figurene. I og du bør ha en hovedgruppe som heter " Øgrey Duplicate din " Øgrey Bruke rektangelverktøyet (M), opprette en 550px kvadrat, fyll den med R = 83 G = 93 B = 96 og plasser den som vist i første bildet. Sørg for at denne nye formen forblir valgt, fokus på Utseende panel og legge to strøk. Velg den nederste, gjør det 1pt bred, setter farge farge på R = 103 G = 113 B = 116 og justere den til utenfor. Flytt til toppen slag, gjør det 11pt bred, justere den til inne og sette farge på R = 78 G = 88 B = 91. Bruke rektangelverktøyet (M ), lage to, 15 x 550px figurer og plassere dem som vist i det første bildet. Bytt til Direct Selection Tool (A) og fokusere på høyre side av venstre rektangelet. Velg den øverste ankerpunktet og dra det 15px ned og deretter velge nederste festepunktet og dra det 15px opp. Flytt til høyre rektangel og fokusere på sin venstre side. Velg den øverste ankerpunktet og dra det 15px ned og deretter velge nederste festepunktet og dra det 15px opp. Når du er ferdig å fylle begge former med den lagrede gradient. Bruke rektangelverktøyet (M), lage to, 550 x 15 pikslers figurer og plassere dem som vist i det første bildet. Bytt til Direct Selection Tool (A) og fokus på undersiden av den øverste rektangelet. Velg den venstre ankerpunktet og dra det 15px til høyre og deretter velge riktig ankerpunktet og dra det 15px til venstre. Flytt til bunnen rektangel og fokusere på oversiden. Velg den venstre ankerpunktet og dra det 15px til høyre og deretter velge riktig ankerpunktet og dra det 15px til venstre. Når du er ferdig å fylle begge former med den lagrede gradient. Marker på nytt din 550px torget, lage en kopi i front og bringe den til fronten. Velg denne kopien, legger " shading Bruk tekstverktøyet (T) legger til " PLAY ", " SCORE " og " PRESTASJONER " biter av tekst, som vist i følgende bilde. Bruk " amerikansk Formål font " med størrelsen satt til 56pt og fargen på svart. Velg ett av dine biter av tekst, fokus på Utseende panel og bare legge en ny fylle bruker det samme Legg til ny Fyll knappen. Velg denne nye fyll og sette farge på R = 142 G = 150 B = 155. Legg en annen fylling for denne delen av teksten, sette farge på hvit, endre Blending Mode til Overlay og gå til Effect > Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Gå tilbake til Utseende panel og legge til en tredje fyll for denne formen. Velg den, bruk venstre lineær gradient vist i følgende bilde, og gå til Effect > Sti > Offset Path. Skriv inn et -1px Offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå tilbake til Utseende panel. Pass på at toppen fyll er valgt og treffer Duplicate Selected element for å legge en kopi av det valgte fyllet. Velg denne nye fyll, erstatte den eksisterende lineær gradient med den rette vist i følgende bilde, senke Opacity til 75% og endre Blending Mode til Soft Light. Få tilbake til Utseende panel, legge til et nytt fyll, gjør det svart, dra den i bunnen av Utseende panel, senke Opacity til 5% og gå til Effect > Sti > Offset Path. Skriv en 1px Offsettrykk, og klikk på OK. Legg en annen sort fyll for denne delen av teksten, dra den i bunnen av Utseende panel, senke Opacity til 10% og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå tilbake til Utseende panel. Legg en endelig, svart fyll og dra den i bunnen av Utseende panel. Senke Opacity til 10% og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Blur > Gaussian Blur. Skriv en 2 piksler radius, klikk OK og ha en siste titt på innsiden av Utseende panel. Bare legg en 1pt slag, justere til inne og sette farge på R = 102 G = 110 B = 115. Sørg for at denne delen av teksten er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " greyText Duplicate gruppen gjorde i forrige trinn. Flytt til Lag-panelet og kalle denne nye gruppen " menuHover Bruke Type Tool (T), legge til fire nye biter av tekst og bruke samme farge og tegnattributter. Velg disse nye biter av tekst, legge til " greyText Duplicate din " endScreen Velg det fire grupper med biter av tekst sammen med ". ramme For dette trinnet trenger du et rutenett hver 1px, så gå til Rediger > Preferanser > Guides & Grid og skriv 1 Gå tilbake til " linjenettet hver 5px Fokus på Lag-panelet, åpne din " Hoved Bruke rektangelverktøyet (M), opprette en ny 640 x 220px form, legg den som vist i det første bildet og bare legge til " tekstur Bruke rektangelverktøyet (M), opprette en 105px kvadrat, fyll den med R = 83 G = 93 B = 96 og plasser den som vist i følgende bilde. Legg en 1pt slag for denne nye formen, justere den til utsiden og sette farge på R = 103 G = 113 B = 116. Bruke rektangelverktøyet (M), lage en 15 x 105px form og legg den som vist i det første bildet. Bytt til Direct Selection Tool (A) og fokus på oversiden av denne nye rektangel. Velg riktig ankerpunkt og bare dra den 10px ned. Når du er ferdig å fylle denne formen med den lagrede gradient. Kontroller at rektangelverktøyet (M) er fortsatt aktiv, opprette en 105 x 10px form og legg den som vist i tredje bildet. Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Object > Transform > Reflektere. Transform > Rotere. Stylize > Avrundede hjørner. Transform > Rotere. Utvid Utseende. 3D > Utvid Utseende. Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Stylize > Drop Shadow. Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Til slutt ting skal se ut i det tredje bildet. Stylize > Indre glød. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå tilbake til Utseende panel. Stylize > Avrundede hjørner. Stylize > Drop Shadow. Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå tilbake til Utseende panel. Stylize > Drop Shadow. Konverter til figur > Rektangel. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Forvrenge & Transform > Transform. Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. 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.
".
Trinn 3
".
Trinn 4
" grafisk stil sammen med den teksturerte plassen, åpner fly-out menyen i Transparency panel og gå til Make Opacity Mask.
4. Opprett Ni Rammer for " X " og " 0 "
Trinn 1
boks. Bruke rektangelverktøyet (M), opprette en 160 piksler kvadrat, fyll den med R = 83 G = 93 B = 96, legg den som vist i følgende bilde og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i det venstre vinduet (i følgende bilde), klikk på OK og gå igjen til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i vinduet til høyre (i følgende bilde), klikk på OK og gå til Object > Utvid Utseende. Velg den resulterende gruppen og trykke Shift + Ctrl + G tre ganger.
Trinn 2
Trinn 3
Trinn 4
" til " ni
" som vist i følgende bilde.
Trinn 5
". Velg den, legge en 1pt slag, justere den til utsiden og sette farge på R = 103 G = 113 B = 116. Bruke rektangelverktøyet (M), lage en 15 x 160 piksler form og legg den som vist i det andre bildet. Bytt til Direct Selection Tool (A) og fokus på oversiden av denne nye rektangel. Velg riktig ankerpunkt og bare dra den 15px ned. Når du er ferdig å fylle denne formen med lineær gradient vist i følgende bilde. Pass på at dette lineær gradient er fortsatt aktiv, fokus på Fargeprøver-panelet, og klikk på Ny fargeprøve for å lagre graderingen. Bruke rektangelverktøyet (M), opprette en 160 x 15 pikslers form og legg den som vist i fjerde bildet. Bytt til Direct Selection Tool (A) og fokus på venstre side av denne nye rektangel. Velg bunn forankringspunkt og bare dra den 15px til høyre. Når du er ferdig å fylle denne formen med den lagrede gradient.
Trinn 6
" kvadrat, lage en kopi i front og bringe den til fronten. Velg denne kopien, fjerne fargen fra slag og velg den resterende fyll. Erstatt eksisterende farge med radial gradient vist i følgende bilde, senke Opacity til 50% og endre Blending Mode til Soft Light. Gå tilbake til Utseende panel og legge til en annen fylling for denne formen. Velg det, sette farge på svart, senke Opacity til 3%, endre Blending Mode til Overlay og gå til Effect > Kunstnerisk > Film Grain. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Pass på at formen gjort i dette trinnet er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " shading
".
Trinn 7
" kvadrat sammen med tre figurer som brukes til å fremheve det og konsernet dem (Control + G). Flytt til Lag-panelet kalle denne nye gruppen " frameOne
", velge den og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Object > Transform > Reflektere. Sjekk Vertikal boksen og klikk på Kopier-knappen. Dette bør skape en horisontalt, venda gruppe kopi. Velg den, dra den til høyre og plassere den som vist i tredje bildet. Flytt til Lag-panelet og kalle denne nye gruppen " frameThree
". Hold fokus på Lag-panelet og fjerne det " 3
" . Square
Trinn 8
" og " frameThree
" grupper og gå til Object > Transform > Reflektere. Sjekk den horisontale boksen og klikk på Kopier-knappen. Dra de resulterende gruppene ned og plassere dem som vist i tredje bildet. Navn disse nye gruppene " frameSeven
" og " frameNine
" deretter flytte til Lag-panelet og fjerne " 7
" og " ni
" firkanter
Trinn 9
". Velg den, legge en 1pt slag, justere den til utsiden og sette farge på R = 103 G = 113 B = 116. Bruke rektangelverktøyet (M), lage to, 10 x 160 piksler form og plassere dem som vist i det andre bildet. Bytt til Direct Selection Tool (A) og fokus på oversiden av venstre rektangelet. Velg riktig ankerpunkt og bare dra den 15px ned. Flytt til høyre rektangel, fokus på oversiden, velger du venstre ankerpunktet og dra det 15px ned. Når du er ferdig å fylle begge former med den lagrede gradient. Velg det rektangelverktøyet (M), opprette en 160 x 15 pikslers form og legg den som vist i fjerde bildet. Bytt til Direct Selection Tool (A) og fokus på undersiden av denne nye rektangel. Velg den venstre ankerpunktet og dra det 15px til høyre og deretter velge riktig ankerpunktet og dra det 15px til venstre. Når du er ferdig å fylle denne formen med den lagrede gradient.
Step 10
" kvadrat, lage en kopi i front og bringe den til fronten. Velg denne kopien, legger " shading
" grafisk stil og fokus på utseendet panel. Velge det nederste fyll og justere plasseringen av den eksisterende radial gradient som er vist i følgende bilde.
Step 11
" kvadrat sammen med fire figurer som brukes til å fremheve det og konsernet dem (Control + G). Flytt til Lag-panelet kalle denne nye gruppen " frameTwo
", velge den og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Object > Transform > Reflektere. Sjekk den horisontale boksen og klikk på Kopier-knappen. Dette bør opprette en loddrett, venda gruppe kopi. Velg den, dra den ned og plasser den som vist i tredje bildet. Flytt til Lag-panelet og kalle denne nye gruppen " frameEight
". Ikke glem å fjerne " 8
" firkantet
Trinn 12
" og " frameEight
" grupper og gå til Object > Transform > Rotere. Skriv inn en 90 graders vinkel og klikker på Kopier-knappen. Når du er ferdig flytte til Lag-panelet. Navn venstre, ny gruppe " frameFour
" og den andre nye gruppen " frameSix
" deretter slette den " 4
" og " 6
" firkanter.
Step 13
". Velg den, legge en 1pt slag, justere den til utsiden og sette farge på R = 103 G = 113 B = 116. Bruke rektangelverktøyet (M), lage to, 10 x 160 piksler figurer og plassere dem som vist i det andre bildet. Bytt til Direct Selection Tool (A) og fokusere på høyre side av venstre rektangelet. Velg den øverste ankerpunktet og dra det 10px ned og deretter velge nederste festepunktet og dra det 10px opp. Flytt til høyre rektangel og fokusere på sin venstre side. Velg den øverste ankerpunktet og dra det 10px ned og deretter velge nederste festepunktet og dra det 10px opp. Når du er ferdig å fylle begge former med den lagrede gradient.
Step 14
" kvadrat, lage en kopi i front og bringe den til fronten. Velg denne kopien, legger " shading
" grafisk stil og fokus på utseendet panel. Velge det nederste fyll og justere plasseringen av den radiale gradient, som vist i følgende bilde. Velg det " 5
" kvadrat sammen med figurer som brukes til å fremheve det og konsernet dem (Control + G). Flytt til Lag-panelet kalle denne nye gruppen " frameFive
", velge den og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK.
Trinn 15
5. Lag 3D-X sin
Trinn 1
" og plukke rektangel Tool (M). Lag en 25 x 115px form, fyll den med R = 39 G = 170 B = 225 og plasser den som vist i det første bildet. Sørg for at denne blå rektangelet er valgt og gå til Object > Transform > Rotere. Skriv inn en 90 graders vinkel, og klikk på Kopier-knappen. Velg begge blå rektangler og klikk på Unite knappen fra Pathfinder-panelet. Velg den resulterende form og gå til Effect > Stylize > Avrundede hjørner. Skriv en radius 12.5px, klikk på OK og gå til Object > Transform > Rotere. Skriv inn en 45 graders vinkel, og klikk OK. Flytt denne blå formen litt, og legg den som vist i fjerde bildet.
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Trinn 7
". Velg mørkere " X " forme og lage en kopi i ryggen (Ctrl + C > Ctrl + B). Sørg for at denne kopien forblir valgt og fokusere på utseendet panel. Fjerne fargen fra fyllingen, legge til en 2PT slag og velg den. Sett farge på svart, senke Opacity til 10% og endre Blending Mode til Soft Light. Hold fokus på Utseende panel og legge til en andre slag for denne formen. Velg det, sørg for at fargen er satt til svart, gjør det 4PT bred, senke Opacity til 5% og endre Blending Mode til Soft Light. Pass på at formen gjort i dette trinnet er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og gi den navnet " tilbake
".
Trinn 8
". Velg den øverste " X " forme og lage en kopi i front (Ctrl + C > Control + F). Sørg for at denne kopien forblir valgt, fokus på Utseende panel og legge til en annen fylling. Velg det, sette farge på hvit, endre Blending Mode til Overlay og gå til Effect > Sti > Offset Path. Skriv inn et -1px Offset, klikk på OK og gå tilbake til Utseende panel. Legg en tredje fyll og velg det. Bruk radial gradient vist i følgende bilde så gå til Effect > Sti > Offset Path. Skriv inn et -1px Offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Stylize > Indre glød. Skriv inn attributtene som vises nedenfor, klikk OK og komme tilbake til Utseende panel. Legg en 1pt slag, justere den til innsiden, sette farge på R = 102 G = 110 B = 115 og senke Opacity til 15%. Bedrifter Den hvite tall fra Gradient bilde stå for plassering prosent
Trinn 9
".
Husk at de hvite tall fra gradient bilde stå for plassering prosent mens de gule står for Opacity prosent
Trinn 10
", velge både opprinnelige " X " former (de med bare ett fyll) og trykk Alt + Ctrl + B. I slutten ting skal se ut i det andre bildet. Flytt til Lag-panelet, velger du dette nye blandingen og tilsett tre Drop Shadow effekt vist i følgende bilde. Pass på at blandingen er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " blendShadow
". Gå tilbake til Artboard, reselect blandingen sammen med de to " X " figurer brukes til å markere det, og konsernet dem (Control + G). Flytt til Lag-panelet og kalle denne nye gruppen " X1
".
Trinn 11
" for de resterende " X " former. Ting skal gå raskere nå som du har de lagret grafiske stiler. Her er de raske ting som du trenger å gjøre. Fokus på " frameTwo
", velge mørkere " X " forme og lage en kopi i ryggen (Ctrl + C > Ctrl + B). Velg denne kopien og bare legge til " tilbake
" grafisk stil. Gå tilbake til din Artboard, velg topp " X " forme og lage en kopi i front (Ctrl + C > Control + F). Velg denne nye kopien og og legge til " frontGrey
" grafisk stil. Kom tilbake til Lag-panelet, fokus på " frameTwo
", velge både opprinnelige " X " figurer (de med et enkelt fyll), trykk Alt + Ctrl + B og legge til " blendShadow
" grafisk stil for den nyopprettede blanding. Velg denne nye blandingen sammen med de to eksemplarene som er gjort i dette trinnet og Group dem (Control + G). Flytt til Lag-panelet og kalle denne nye gruppen " X2
". Fortsett med det resterende " X " figurer og gjenta disse teknikkene. Når du er ferdig velger du alle ni " X " grupper og konsernet dem (Ctrl + G). Flytt til Lag-panelet og navn denne nye gruppen " XGrey
".
Trinn 12
" gruppe, lage en kopi i front (Ctrl + C > Ctrl + F) og fokus på Lag-panelet. Slå av synlighet for den opprinnelige " XGrey
" gruppe, navnet gruppen kopi " XYellow
" deretter åpne den. Velg ett av " X " figurer med et fyll av R = 72 G = 80 B = 85, gå til Velg > Samme > Utseende og erstatte R = 72 G = 80 B = 85 med R = 192 G = 108 B = 13.
Step 13
" gruppe. Velg ett av " X " figurer med et fyll av R = 142 G = 150 B = 155, gå til Velg > Samme > Utseende og erstatte R = 142 G = 150 B = 155 med R = 249 G = 174 B = 53.
Step 14
" gruppe. Velg ett av " X " figurer med " frontGrey
" grafisk stil og erstatte den eksisterende Utseende attributter med de som vises i bildet nedenfor. Sørg for at denne gule figurer er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " frontYellow
".
Trinn 15
" grafisk stil og bare erstatte den med " frontYellow
" grafisk stil. Når du er ferdig, slå av synligheten av " XYellow
" gruppe.
6. Lag
3D-0-tallet
Trinn 1
Trinn 2
Trinn 3
Trinn 4
".
Trinn 5
" gruppe og navn den nye gruppen " OYellow
". Åpne ny gruppe og gjøre den gule bruke " frontYellow
" grafisk stil og re-fargeteknikker brukes for gule " XYellow
" gruppe.
7. Lag menyrammen
Trinn 1
Trinn 2
Trinn 3
Trinn 4
" grafisk stil og fokus på utseendet panel. Velge det nederste fyll og justere plasseringen av den eksisterende radial gradient som er vist i følgende bilde. Velg denne nye formen sammen med 550px torget og de fire trapesformede former og konsernet dem (Control + G). Velg denne nye gruppen og gi den navnet " ramme
".
8. Lag Meny og End Skjermtekst
Trinn 1
Trinn 2
".
Trinn 3
< p> Velg de to andre biter av tekst og legge til " greyText
" grafisk stil. Velg alle tre stykke tekst og konsern dem (Control + G). Flytt til Lag-panelet og navn denne nye gruppen " -menyen
".
Trinn 4
". Velg stykke tekst inne i denne nye gruppen, fokus på Utseende panel og erstatte de eksisterende attributter med de som vises i bildet nedenfor. Sørg for at en av disse gule biter av tekst er valgt, flytt til Graphic Styles panelet, lagre en ny grafisk stil og kaller det " yellowText
".
Trinn 5
Trinn 6
" grafisk stil da konsernet dem (Control + G). Flytt til Lag-panelet og navn denne nye gruppen " endScreen
".
Trinn 7
" gruppe. Flytt til Lag-panelet og kalle denne nye gruppen " endScreenHover
". Velg stykke tekst inne i denne nye gruppen og bare legge til " yellowText
" grafisk stil
Trinn 8
" gruppe og gruppe dem (Control + G). Flytt til Lag-panelet og kalle denne nye gruppen " menuAndEndScreen
". Nå fokuserer på Lag-panelet og sørg for at alle gruppene er synlige. Velg alle gruppene, figurer og mesh laget så langt og konsernet dem (Ctrl + G). Flytt til Lag-panelet og kalle denne nye gruppen " Hoved
".
9. Lag et enkelt mønster
Trinn 1
i Uten kraftlinjer hver
boks. Bruke rektangelverktøyet (M), opprette en to x1px form og fylle det med R = 237 G = 28 B = 36. Fortsett med rektangelverktøyet (M), opprette en 1px kvadrat, fyll den med svart og plasser den som vist i det andre bildet. Velg det røde rektangelet og fjerne fargen fra fyllingen. Velg begge former laget i dette trinnet og bare dra dem inn i Fargeprøver-panelet for å lagre dem som et mønster. Når du har din mønster kan du fjerne de små rektangler fra Artboard.
Trinn 2
", så bare gå til Edit> Preferences > Hjelpelinjer og rutenett og skriv 5
i Uten kraftlinjer hver
boks. Bruke rektangelverktøyet (M), opprette en 640 x 15 pikslers form, fyll den med lineær gradient vist i følgende bilde og plassere den over ditt " Hoved
" gruppe som vist i følgende bilde. Legg en annen fylling for dette tynne rektangel, senke Opacity til 40%, endre Blending Mode til Soft Light og bruk som reddet mønster. Flytt til Lag-panelet og navngi denne mørke rektangelet " skillelinjen
". Duplisere " skillelinjen
", velge kopi, dra det ned og legg den under " Hoved
" gruppe som vist i følgende bilde.
10. Opprett Score Bar &
Trinn 1
" gruppe og duplisere eksisterende mesh. Velg denne kopien, dra den utenfor gruppen (i toppen av Lag-panelet), åpner fly-out menyen i Transparency panel og gå til Slipp Opacity Mask. Slett den resulterende hvite rektangelet og velg mesh. Dra den opp og plassere den omtrent som vist i det første bildet. Bruke rektangelverktøyet (M), opprette en 640 x 220px form, fyll den med hvit og plasser den som vist i det andre bildet. Velg denne hvite rektangelet sammen med den nye mesh, åpner fly-out menyen i Transparency panel og gå til Make Opacity Mask. Til slutt ting skal se ut i det tredje bildet.
Trinn 2
" grafisk stil. Kopiere denne nye rektangel, velge kopi og legge til " maske
" grafisk stil. Reselect begge rektangler som er gjort i dette trinnet, åpner fly-out menyen i Transparency panel og gå til Make Opacity Mask.
Trinn 3
Trinn 4
13. Preferanser > Guides & Grid og skriv 1
i Uten kraftlinjer hver
boks. gruppe.
Gratulerer! Du er ferdig!