How å lage en 404-feil side i Adobe Illustrator
Hva du skal lage
I de følgende trinnene vil du lære å lage en enkel 404-feil side i Adobe Illustrator.
For det første vil du lære hvordan du setter opp et enkelt rutenett og hvordan å skape de viktigste figurer ved hjelp av grunnleggende verktøy, utseendet panel og live Corners funksjonen.
Deretter vil du lære å legge til noen slanke skillevegger ved hjelp av en enkel bane, en Drop Shadow effekt og noen grunnleggende maskeringsteknikker. Flytte på vil du lære hvordan du oppretter søkefeltet og de fire gule knappene bruker hovedsakelig Utseende panel. Tar full nytte av Snap til Bind funksjonen og bruke grunnleggende vektor form byggeteknikker og noen grunnleggende slag har din vil lære å lage de tre små ikoner.
Til slutt vil du lære å lage de enkle verktøytips og hvordan du legger en haug med tekst.
1. Opprett et nytt dokument og sette opp et rutenett
Hit Ctrl-N for å opprette et nytt dokument. Velg Piksler fra Units rullegardinmenyen, skriv inn 600 i boksen Bredde og 680 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 plakater (View > Vis rutenett) og Fest til rutenett plakater (View > Fest til rutenett). For det første trenger du et rutenett hver 5px, så bare gå til Rediger > Preferanser > Guides > Grid, skriv 5 i linjenettet hver boks og en i underinndelinger boksen. Prøv ikke å bli motløs av alle som rutenett, det vil lette arbeidet ditt 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 arbeidshastigheten.
2. Opprett Main Shapes
Trinn 1
velg den rektangelverktøyet (M) og fokus på verktøylinjen. Fjern fargen fra hjerneslag velg deretter fyll og sette sin farge på R = 252 G = 186 B = 186. Flytt til artboard og bare lage en 275 x 400 piksler rektangel, Fest til rutenett
skulle lette arbeidet ditt.
Trinn 2
Bruke Direct Selection Tool (A), reselect din gult rektangel, fokus på kontrollpanelet og bare skriv "10px" i at Corners boksen. Dette bør slå rektangel til en avrundet rektangel som vist i følgende bilde.
Trinn 3
Kontroller at avrundet rektangel forblir valgt, fokus på Utseende panelet (Vindu > Utseende), velg slag og sette farge på R = 232 G = 146 B = 0. Hold fokus på Utseende panelet og klikker på " Stroke Kontroller at avrundet rektangel er valgt, fokuserer på utseendet panel og legge til en andre strøk med Legg til ny Stroke knappen (påpekt av den blå sirkelen i følgende bilde ). Velg denne nye slag, satt sin farge på svart (R = 0 G = 0 B = 0) og sjekk Align Stroke å Utenfor knappen fra Strek fly-out panel. Hold fokus på denne nye hjerneslag og klikker på " Opacity Bruke rektangelverktøyet (M), opprette en 275 x 80px form, satt fyllfargen på svart og plasser den som vist i det første bildet. Sørg for at denne nye formen forblir velger, senke Opacity til 20% og endre Blending Mode til Soft Light. Bytt til Direct Selection Tool (A), velger de to ankerpunktene fremhevet i det første bildet, fokus på kontrollpanelet og bare skriv "10px" i at Corners boksen. Til slutt ting skal se ut i det andre bildet. Bruke rektangelverktøyet (M), opprette en 275 x 80px form, satt fyllfargen på svart og plasser den som vist i det første bildet. Sørg for at denne nye rektangler forblir valgt, senke Opacity til 10% og endre Blending Mode til Soft Light. Bruke rektangelverktøyet (M), lage en 275 x 75px form, satt fyllfargen på svart og plasser den som vist i det første bildet. Sørg for at din nye rektangelet er valgt, senke Opacity til 5% og endre Blending Mode til Soft Light. For dette trinnet trenger du et rutenett hver 1px, så gå til Rediger > Preferanser > Guides & Grid og skriv 1 Deretter må du sørge for at at horisontal bane er perfekt justert til pixel rutenettet. Reselect det og gå til Effect > Forvrenge & Transform > Transform. Dra Move-Vertical skyve -0.5px og klikk på OK. Aktiver Pixel Preview (View > Pixel Preview) så ta en titt på din vei med og uten Transform påvirke til å forstå nøyaktig hvordan ting endrer seg. Sørg for at din horisontale banen er fortsatt valgt og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Gå tilbake til hjelpelinjer hver 5px, så bare gå til Rediger > Preferanser > Guides & Grid og skriv 5 Åpne Gradient panelet (Vindu > Gradient) og klikker på gradient miniatyr å legge til standard svart til hvitt lineær gradient. Sørg for at formen forblir valgt, og holde fokus på Gradient panel. Sett vinkel på 0 grader og deretter velge svart gradient glideren og erstatte den eksisterende farge med hvite (R = 255 G = 255 B = 255). Fokus på gradient bar og bare klikke på den for å legge til en ny gradient skyveknapp. Velg denne nye skyveknapp, sette sin farge på svart, fokus på boksen Plassering (fra Gradient panel) og sette den på 50%. Husk at de hvite tall fra Gradient bildene stå for Location prosentandel. Reselect rektangelet gjort i dette trinnet sammen med horisontal bane, åpne Gjennomsiktighet-panelet (Vindu > transparent) og klikker på Bruk maske-knappen. Til slutt din maskerte banen skal se ut i det tredje bildet. Duplicate din maskert banen (Ctrl-C > Kontroll-F), velge kopi og bare dra den 80px opp. Sørg for at din kopi forblir valgt, fokus på Transparency panelet, velger masken og erstatte den eksisterende lineær gradient med det som vises i følgende bilde. Husk at de hvite tall fra Gradient bilde stå for Location prosentandel. Til slutt den nye banen skal se ut i følgende bilde. Duplicate toppen din, maskert banen (Ctrl-C > Kontroll-F), velge kopi og bare dra den 75px opp. Sørg for at din kopi forblir valgt, fokus på Transparency panelet, velger masken og erstatte den eksisterende lineær gradient med det som vises i følgende bilde. Til slutt den nye banen skal se ut i følgende bilde. Bruke rektangelverktøyet (M), opprette en 145 x 30px form, angi fyllfargen på R = 232 G = 146 B = 0 og plasser den som vist i følgende bilde. Sørg for at denne nye rektangelet forblir valgt, fokus på Utseende-panelet velger du eksisterende fylle ut og gå til Effect > Sylize > Indre glød. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Kontroller at rektangelet gjort i forrige trinn forblir valgt og fokusere på utseendet panel. Legg en 1px stroke, sette farge på svart, justere den til innsiden, senke Opacity til 20% og endre Blending Mode til Soft Light. Hold fokus på Utseende panel, sørge for at hele banen er valgt (klikk på " Bane Bruke rektangelverktøyet (M), lage en 65 x 30px form, satt fyllfargen på R = 253 G = 218 B = 47 og plasser den som vist i følgende bilde. Kontroller at gul rektangel forblir valgt, fokus på Utseende panel og legge til en annen fylling ved hjelp av Legg til ny Fyll knappen (påpekt av den blå sirkelen i følgende bilde) . Velg denne nye fyll, satt sin farge på R = 252 G = 206 B = 23 og gå til Effect > Forvrenge & Transform > Transform. Skriv inn egenskapene som vises i følgende bilde (pass på at sjekken midten, nederst referansepunkt), klikk på OK og gå til Effect > Stylize > Drop Shadow. Skriv inn attributtene som vises i det venstre vinduet (i følgende bilde), klikk på OK og gå igjen til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i vinduet til høyre og klikk på OK. Marker på nytt din gult rektangel og legge til en tredje fylle bruker det samme Legg til ny Fyll knappen. Velg denne nye fyll, dra den i bunnen av Utseende panel og legge den lineære gradient vist i følgende bilde. Husk at den gule null fra Gradient bildet står for Opacity prosentandel. Dette betyr ganske enkelt at du må velge din gradient slider og skriv at "0" i Opacity boksen fra Gradient panel. Tilbake til Utseende panel, sørg for at fyllet legges i dette trinnet er fortsatt valgt 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. Velg hele banen og gå til Effect > Stylize > Avrundede hjørner. Skriv en 3px Radius og klikk på OK. Bruke rektangelverktøyet (M), opprette tre, 30px torg og plasser dem som vist i følgende bilde. Deretter må du kopiere de bygninger som benyttes i gult rektangel og lime dem inn på de tre rutene som er gjort i dette trinnet. Bare gå til Lag-panelet, fokus på høyre side, og du vil merke at hver figur kommer med en litt grå sirkel. Det kalles et mål ikon. Hold Alt-tasten på tastaturet, klikk på målet ikonet som står for gult rektangel og dra på sirkelen som står for en av de tre rutene. Gjenta dette teknikker for de to andre rutene. Til slutt ting skal se ut i det andre bildet. Bytt til linjenettet hver 1px, så gå til Rediger > Preferanser > Guides & Grid og skriv 1 Velg den Pen Tool (P), opprette en 8 piksler, vertikal bane, plasser den som vist i det første bildet og legger til at samme 4px, oransje slag som brukes til horisontal bane. Kontroller at vertikal bane er valgt og gå til Object > Sti > Legg ankerpunkter. Bytt til Direct Selection Tool (A), velg den nylig lagt ankerpunkt og bare dra det 5PX til venstre som vist i tredje bildet. Velg det til baner som utgjør oransje pil og gå til Object > Sti > Outline Stroke. Velg de resulterende former, åpne Pathfinder-panelet og klikk på Unite-knappen. Velg den rektangelverktøyet (M), lage en 18 x 17px form og sette fyllfargen på R = 232 G = 146 B = 0. Bruke Direct Selection Tool (A), velg denne nye rektangel, fokusere på kontrollpanelet og bare skriv "3px" i at Corners boksen. Bruke Pen Tool (P), lage to enkle veien som vist i de to første bildene. Velg begge veier og fokus på utseendet panel. Pass på at det ikke er noen farge satt for fyll og velg slag, satt sin farge på R = 253 G = 218 B = 12 og vekten på 2 piksler. Reselect begge banene som er gjort i dette trinnet og klikk på Outline knappen fra Pathfinder-panelet. Sørg for at den resulterende gruppen av stier er valgt og bare trykke Shift-Control-G løse opp det. Reselect alle disse banene og legge igjen at 2 piksler, gul strek. Velg bare den lille stien markert i fjerde bildet og fjerne den ved hjelp av knappen Slett fra tastaturet. Velg det gule stier markert i det første bildet og gå til Object > Sti > Outline Stroke. Velg de resulterende former og klikk på Unite knappen fra Pathfinder-panelet. Velg denne nyopprettede form sammen med appelsin, avrundet rektangel og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende gruppe av appelsin form og bare trykke Ctrl-8 for å gjøre det til en enkel sammensatt bane. Bruke Direct Selection Tool (A), velg frisk sammensatt bane, fokus på kontrollpanelet og bare skriv "0.5px" i at Corners boksen. Velg den rektangelverktøyet (M), lage en 12 x 11px form og sette fyllfargen på R = 232 G = 146 B = 0 og gå til Object > Sti > Legg ankerpunkter. Bruke Direct Selection Tool (A), velger ankerpunktet markert i det andre bildet og bare dra den 5PX opp. Bruke Pen Tool (P), lage en enkel sti som vist i det første bildet, sørg for at det forblir valgt og fokusere på utseendet panel. Fjerne fargen fra fylle velg deretter slag. Sett farge på R = 232 G = 146 B = 0 og vekt på 3px deretter gå til Object > Sti > Outline Stroke. Bytt til rektangelverktøyet (M), opprette en 2 x 5px form, satt fyllfargen på R = 232 G = 146 B = 0 og plasser den som vist i det andre bildet. Reselect de tre oransje figurer som utgjør din lille hjem-ikonet, og klikk på Unite knappen fra Pathfinder-panelet. Bruke rektangelverktøyet (M), oppretter du en 2 x 5px form og plasser den som vist i det første bildet. Velg denne nye rektangelet sammen med den oransje form som gjør opp huset ditt ikonet og klikk på Minus Front knappen fra Pathfinder-panelet. Bruke Direct Selection Tool (A), velg den resulterende form, fokus på kontrollpanelet og bare skriv "1px" i at Corners boksen. Velg det tre former som utgjør dine små ikoner, plasserer dem som vist i følgende bilde så gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Velg den type Tool (T) og åpne Tegn-panelet (Vindu > Type > Character). Bare klikk på artboard, legge til " FEIL Kontroller at Type Tool (T) er fortsatt aktiv, legge til noen nye biter av tekst som vist nedenfor og bruke attributtene vist i følgende bilde. Marker på nytt alle biter av teksten er gjort så langt og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Bruk tekstverktøyet (T), legge til " 404 Kontroller at " 404 Bruke rektangelverktøyet (M), lage en 65 x 25px form, SE fyllfargen ved R = 60 G = 36 B = 21 og plassere den som vist i følgende bilde. Sørg for at din brun rektangel forblir valgt, fokus på Utseende-panelet velger du eksisterende fylle og kopiere den med Duplicate Selected Element-knappen (påpekt av den blå sirkelen i følgende bilde). Velg den nye fyll og gå til Effect > Konverter til figur > Rektangel. Skriv inn egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Forvrenge & Transform > Transform. Skriv inn attributtene nedenfor og klikk på OK. Marker på nytt din brun form, fokus på utseendet panel, sørg for at hele banen er valgt og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK. Bruke Type Tool (T), legge til " Go Back Duplicate gruppen som utgjør den lille tooltip (Ctrl-C >.; kontroll-F), velge kopi og plasser den som vist i det første bildet. Fokus på den gule stykke tekst og erstatte den eksisterende teksten med " Go Home Velg den rektangelverktøyet (M) og klikker på artboard å åpne rektangel vinduet. Skriv inn 610 i boksen Bredde og 690 i høyde boksen og klikk deretter på OK-knappen. Sørg for at den resulterende formen forblir valgt og sette farge på R = 35 G = 31 B = 32. Deretter må du sentrere den, så åpner Juster-panelet (Vindu > Align). Sett samkjøre til Artboard (åpne fly ut menyen og gå til Vis alternativer hvis du ikke kan se Strek Å seksjonen som vist i følgende bilde), sørg for at formen er valgt deretter klikker du bare på Horisontal Align Center og vertikal Juster midtknappen. Til slutt din torget bør dekke hele artboard som vist i følgende bilde. Til slutt, bare trykke Shift-Control-[å sende mørke rektangelet til rygg. Velg det viktigste, gul rektangel, fokus på utseendet panel, sørg for at hele banen er valgt og legge de fire Drop Shadow effekt vist i følgende bilde. 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. Sett vekt på 1px og sjekk Align Stroke til Inside-knappen.
Trinn 4
" stykke tekst for å åpne Transparency fly-out panel som vist i følgende bilde. Endre Blending Mode til Soft Light og senke Opacity til 5%.
Trinn 5
Trinn 6
Trinn 7
3. Lag de tre Dividers
Trinn 1
i Uten kraftlinjer hver
boks. Bruke Pen Tool (P), opprette en 273px, horisontal bane. Plasser den nøyaktig som vist i følgende bilde og legge til en 1px stroke med fargen satt til R = 232 G = 146 B = 0.
Trinn 2
Trinn 3
i Uten kraftlinjer hver
boks. Bruke rektangelverktøyet (M), opprette en 275 x 10px form, sørg for at det har ingen farge satt for hjerneslag og velg deretter fylle.
Trinn 4
Trinn 5
4. Lag søkefeltet og de fire knappene
Trinn 1
Trinn 2
" stykke tekst fra toppen av Utseende panel) og gå til Effect > Stylize > Avrundede hjørner. Skriv en 3px Radius, klikk på OK og gå til Effect > Stylize > Drop Shadow. Skriv inn egenskapene som vises i følgende bilde og klikk på OK.
Trinn 3
Trinn 4
Trinn 5
Trinn 6
5. Lag de tre små ikoner
Trinn 1
i Uten kraftlinjer hver
boks. Plukk Pen Tool (P), opprette en 11px, horisontal bane, sørg for at den forblir valgt og fokusere på utseendet panel. Legg en 4px slag, satt sin farge på R = 232 G = 146 B = 0 og deretter åpne Strek fly-out panel og kontroller Round Cap-knappen. Til slutt banen skal se ut i følgende bilde.
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Trinn 7
Trinn 8
Trinn 9
Step 10
6. Legg Tekst
Trinn 1
" stykke tekst og sette farge på R = 172 G = 68 B = 0. Bruk Open Sans font, gjør det Fet deretter sette størrelsen på 14 piksler og sporing på 900px. Sørg for at din del av teksten er fortsatt valgt og plassere den som vist i følgende bilde. Velg det Type Tool (T), legge til " Søk
" og " eller
" biter av tekst, plasserer dem som vist nedenfor og bruke tekstattributter vist i følgende vinduer.
Trinn 2
Trinn 3
Trinn 4
" og sette sin farge på R = 252 G = 206 B = 23. Bruk samme skrifttype, gjør det Fet, angi størrelsen på 90px deretter plassere denne nye stykke tekst som vist i følgende bilde.
Trinn 5
"del av teksten er fortsatt valgt og legge de tre Drop Shadow effekt vist i følgende bilde (Effect > Stylize > Drop Shadow).
7. Lag verktøytips
Trinn 1
Trinn 2
Trinn 3
Trinn 4
" stykke tekst, sette farge på R = 172 G = 68 B = 0 og plasser den som vist i følgende bilde. Bruk den samme Åpne Sans font, gjør den fet og sette størrelsen på 11px. Reselect denne gule stykke tekst sammen med brun form og bare trykke Ctrl-G å gruppere dem
Trinn 5
". Gjenta denne teknikken og legge den tredje tooltip som vist i det andre bildet. Erstatte den eksisterende del av teksten med " Kontakt oss
" og øke bredden av det brune form til 75px.
8. Tilsett Bakgrunn og noen subtile Shading
Trinn 1
Trinn 2
Gratulerer! Du er ferdig!