Share
Vad du ska skapaI följande steg lär du dig att skapa en enkel 404-fel sida i Adobe Illustrator.
Till att börja med lär du dig hur du konfigurerar ett enkelt rutnät och hur du skapar huvudformerna med hjälp av grundläggande verktyg, utseendepanelen och funktionen Live Corners.
Därefter kommer du att lära dig hur du lägger till några snygga delare med en enkel sökväg, en Drop Shadow-effekt och några grundläggande maskeringstekniker. Att flytta på dig kommer att lära dig hur du skapar sökfältet och de fyra gula knapparna med huvudsakligen Utseendepanelen. Med full nytta av Snap to Gird-funktionen och med hjälp av grundläggande vektorform byggnadsteknik och några grundläggande slagfunktioner lär du dig hur du skapar de tre lilla ikonerna.
Slutligen lär du dig att skapa enkla verktygstips och hur man lägger till en massa text.
Träffa Kontroll-N att skapa ett nytt dokument Välj pixlar från Enheter rullgardinsmenyn, skriv in 600 i breddlåda och 680 i höjden rutan klicka sedan på Avancerad knapp. Välj RGB, Skärm (72ppi) och se till att Justera nya objekt till pixelnätet rutan är avmarkerad innan du klickar ok.
Aktivera Rutnät (Visa> Visa rutnät) och den Snap to Grid (Visa> Snap to Grid). Till att börja med behöver du ett rutnät varje 5px, så helt enkelt gå till Redigera> Inställningar> Guider> Grid, stiga på 5 i Gridline varje lådan och 1 i underavdelningar låda. Försök att inte bli avskräckt av allt det nätet, det kommer att underlätta ditt arbete och tänk på att du enkelt kan aktivera eller inaktivera den med hjälp av Kontrollera-" tangentbordsgenväg.
Du borde också öppna Info panel (Fönster> Info) för en levande förhandsgranskning med storleken och positionen på dina former. Glöm inte att ställa in måttenheten till pixlar från Redigera> Inställningar> Enheter> Allmänt. Alla dessa alternativ ökar din arbetshastighet avsevärt.
Välj Rektangelverktyg (M) och fokusera på din verktygsfält. Ta bort färgen från stroke och välj sedan fyllningen och ställ in färgen på R = 252 G = 186 B = 186. Flytta till din tavla och helt enkelt skapa en 275 x 400px rektangel, den Snap to Grid bör underlätta ditt arbete.
Använda Direktmarkeringsverktyg (A), välj din gula rektangel igen, fokusera på kontrollpanelen och skriv in "10px" i det Corners låda. Detta bör göra din rektangel till en rundad rektangel, som visas i följande bild.
Se till att din runda rektangel hålls vald, fokusera på Utseende panel (Fönster> Utseende), välj stroke och sätt dess färg på R = 232 G = 146 B = O. Håll fokus på Utseende panel och klicka helt enkelt på "Stroke"textstycke för att öppna Stroke utflödespanel. Ställ in Vikt på 1px och kolla på Rikta in streck på insidan knapp.
Se till att din avrundade rektangeln fortfarande är vald, fokusera på Utseende panelen och lägg till en andra stroke med hjälp av Lägg till ny stroke knappen (pekad av den blå cirkeln i följande bild). Välj den här nya stroke, sätt dess färg på svart (R = 0 G = 0 B = 0) och kontrollera Justera streck till utsidan knapp från Stroke utflödespanel.
Håll fokus på denna nya stroke och klicka helt enkelt på "Opacitet"textstycke för att öppna Genomskinlighet utflödespanel som visas i följande bild. Ändra Blandningsläge till Mjukt ljus och sänka Opacitet till 5%.
Använda Rektangelverktyg (M), skapa en 275 x 80px form, sätt fyllfärgen på svart och placera den som visas på den första bilden. Se till att den här nya formen stannar välj, sänk den Opacitet till 20% och ändra Blandningsläge till Mjukt ljus.
Byt till Direktmarkeringsverktyg (A), välj de två ankarpunkterna markerade i den första bilden, fokusera på kontrollpanelen och skriv in "10px" i det Corners låda. I slutet skulle sakerna se ut i den andra bilden.
Använda Rektangelverktyg (M), skapa en 275 x 80px form, sätt fyllfärgen på svart och placera den som visas på den första bilden. Se till att dessa nya rektanglar hålls valda, sänk ner Opacitet till 10% och ändra Blandningsläge till Mjukt ljus.
Använda Rektangelverktyg (M), skapa en 275 x 75px form, sätt fyllfärgen på svart och placera den som visas på den första bilden. Se till att din nya rektangel är vald, sänk den Opacitet till 5% och ändra Blandningsläge till Mjukt ljus.
För detta steg behöver du ett rutnät varje 1px, så gå till Redigera> Inställningar> Guider och galler och skriv in 1 i Gridline varje låda. Använda Penverktyg (P), skapa en 273px, horisontell väg. Placera det exakt som det visas i följande bild och lägg till en 1px stroke med den färg som anges vid R = 232 G = 146 B = O.
Därefter måste du se till att din horisontella väg är perfekt anpassad till pixelnätet. Återmarkera det och gå till Effekt> Förvräng & Transformera> Transformera. Dra Flytta-Vertikal skjutreglaget på -0.5px och klicka ok.
Aktivera Pixel Preview (Visa> Pixel Preview) Ta en titt på din väg med och utan Omvandla påverkar för att förstå exakt hur saker förändras. Se till att din horisontella sökväg fortfarande är vald och gå till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i följande bild och klicka på ok.
Återvänd till gridline varje 5px, så helt enkelt gå till Redigera> Inställningar> Guider och galler och skriv in 5 i Gridline varje låda. Använda Rektangelverktyg (M), skapa en 275 x 10px form, se till att det inte har någon färg för stroke och välj sedan fyllningen.
Öppna Lutning panel (Fönster> Gradient) och klicka helt enkelt på gradientminnebilden för att lägga till standard svartvitt linjär gradient. Se till att din form förblir vald och fortsätt att fokusera på Lutning panel. Ställ in Vinkel på 0 grader och välj sedan den svarta gradientreglaget och ersätt den befintliga färgen med vitt (R = 255 G = 255 B = 255). Fokusera på lutningsfältet och klicka bara på det för att lägga till en ny lutningsreglage. Välj den här nya reglaget, sätt dess färg på svart, fokusera på Plats låda (från Lutning panel) och ställa in den 50%.
Tänk på att de vita siffrorna från Lutning bilder står för Plats procentsats. Återmarkera rektangeln i detta steg tillsammans med din horisontella väg, öppna Genomskinlighet panel (Fönster> Genomskinlighet) och klicka bara på Gör mask knapp. Till sist ska din maskade väg se ut i den tredje bilden.
Kopiera din maskerade sökväg (Control-C> Control-F), välj kopian och dra det helt enkelt 80px upp. Se till att din kopia förblir vald, fokusera på Genomskinlighet panel, välj masken och ersätt den befintliga linjära gradienten med den som visas i följande bild. Kom ihåg att de vita siffrorna från Lutning bildstativ för Plats procentsats. I slutet ska din nya väg se ut i följande bild.
Duplicera din övre, maskerade väg (Control-C> Control-F), välj kopian och dra det helt enkelt 75 px upp. Se till att din kopia förblir vald, fokusera på Genomskinlighet panel, välj masken och ersätt den befintliga linjära gradienten med den som visas i följande bild. I slutet ska din nya väg se ut i följande bild.
Använda Rektangelverktyg (M), skapa en 145 x 30px form, sätt fyllfärgen på R = 232 G = 146 B = O och placera det enligt bilden nedan. Se till att den här nya rektangeln förblir vald, fokusera på Utseende panelen, välj den befintliga fyllningen och gå till Effekt> Sylize> Inner Glow. Ange egenskaperna som visas i följande bild och klicka på ok.
Kontrollera att rektangeln som gjorts i föregående steg förblir vald och fokusera på Utseende panel. Lägg till en 1px stroke, sätt färgen på svart, rikta in den till insidan, sänk ner Opacitet till 20% och ändra dess Blandningsläge till Mjukt ljus. Håll fokus på Utseende panelen, se till att hela sökvägen är vald (klicka bara på "Väg"bit text från toppen av Utseende panel) och gå till Effekt> Stylize> Avrundade hörn. Ange en 3px Radius, klick ok och gå till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i följande bild och klicka på ok.
Använda Rektangelverktyg (M), skapa en 65 x 30px form, sätt fyllfärgen på R = 253 G = 218 B = 47 och placera det enligt bilden nedan.
Se till att din gula rektangel hålls vald, fokusera på Utseende panelen och lägg till en ny fyllning med hjälp av Lägg till ny fyllning knappen (pekad av den blå cirkeln i följande bild). Välj den här nya fyllningen, sätt dess färg på R = 252 G = 206 B = 23 och gå till Effekt> Förvräng & Transformera> Transformera. Ange egenskaperna som visas i följande bild (se till att du kontrollerar mitten, nedre referenspunkten), klicka ok och gå till Effekt> Stylize> Drop Shadow. Ange attributen som visas i det vänstra fönstret (i följande bild), klicka ok och gå igen till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i det högra fönstret och klicka på ok.
Återmarkera din gula rektangel och lägg till en tredje fyllning med detsamma Lägg till ny fyllning knapp. Välj den här nya fyllningen, dra den i botten av Utseende panel och lägg till den linjära gradienten som visas i följande bild. Tänk på att den gula nollpunkten från Lutning bilden står för Opacitet procentsats. Detta innebär helt enkelt att du måste välja din lutningsreglage och ange det "0"i Opacitet låda från Lutning panel.
Återgå till Utseende panelen, se till att den fyllning som läggs till i det här steget fortfarande är vald och gå till Effekt> Förvräng & Transformera> Transformera. Ange egenskaperna som visas i följande bild, klicka ok och återvända till Utseende panel. Välj hela banan och gå till Effekt> Stylize> Avrundade hörn. Ange en 3px Radius och klicka ok.
Använda Rektangelverktyg (M), skapa tre, 30px rutor och placera dem enligt bilden nedan.
Därefter måste du kopiera egenskaperna som används för den gula rektangeln och klistra in dem på de tre rutorna i detta steg. Helt enkelt gå till Skikten panelen, fokusera på höger sida och du märker att varje form kommer med en liten grå cirkel. Det kallas en målikon. Håll Alt knappen från ditt tangentbord, klicka på målikonen som står för din gula rektangel och dra i cirkeln som står för en av dina tre rutor. Upprepa dessa tekniker för de andra två rutorna. I slutet skulle sakerna se ut i den andra bilden.
Byta till gridline varje 1px, så gå till Redigera> Inställningar> Guider och galler och skriv in 1 i Gridline varje låda. Välj Penverktyg (P), skapa en 11px, horisontell väg, se till att den stannar valda och fokusera på Utseende panel. Lägg till en 4px stroke, sätt dess färg på R = 232 G = 146 B = O Öppna sedan Stroke fly-out panel och kontrollera Round Cap knapp. I slutet ska din väg se ut i följande bild.
Välj Penverktyg (P), skapa en 8px, vertikal väg, placera den som visas i den första bilden och lägg till samma 4px, orange stroke som används för den horisontella banan. Se till att din vertikala sökväg är vald och gå till Objekt> Sti> Lägg till Anchor Points. Byt till Direktmarkeringsverktyg (A), välj den nyligen tillförda ankarpunkten och dra den helt enkelt 5px till vänster som visas i den tredje bilden.
Återmarkera de stigar som utgör din orange pil och gå till Objekt> Path> Outline Stroke. Välj de resulterande formerna, öppna Stigfinnare panelen och klicka på Förena knapp.
Välj Rektangelverktyg (M), skapa en 18 x 17px form och sätt fyllfärgen på R = 232 G = 146 B = O. Använda Direktmarkeringsverktyg (A), välj den här nya rektangeln, fokusera på kontrollpanelen och skriv in "3px" i det Corners låda.
Använda Penverktyg (P), skapa två enkla banor som visas i de två första bilderna. Välj båda banorna och fokusera på Utseende panel. Se till att det inte finns någon färguppsättning för fyllningen och välj sedan stroke, sätt dess färg på R = 253 G = 218 B = 12 och den Vikt på 2px. Återmarkera båda banorna i detta steg och klicka på Översikt knapp från Stigfinnare panel. Se till att den resulterande gruppen av sökvägar är markerad och helt enkelt slå Skift-Control-G till Dela upp Det. Återmarkera alla dessa sökvägar och lägg till det igen 2px, gul stroke. Välj endast den lilla vägen markerad i den fjärde bilden och ta bort den med hjälp av Radera knappen från ditt tangentbord.
Återmarkera de gula banorna markerade i den första bilden och gå till Objekt> Path> Outline Stroke. Välj de resulterande formerna och klicka på Förena knapp från Stigfinnare panel. Välj den här nyskapade formen tillsammans med din orange, rundade rektangel och klicka på Minus Front knapp från Stigfinnare panel. Välj den resulterande gruppen orangeformad och klicka helt enkelt på Kontroll-8 att förvandla den till en enkel sammansatt väg. Använda Direktmarkeringsverktyg (A), välj din fria sammansatta väg, fokusera på kontrollpanelen och skriv in "0.5px" i det Corners låda.
Välj Rektangelverktyg (M), skapa en 12 x 11px form och sätt fyllfärgen på R = 232 G = 146 B = O och gå till Objekt> Sti> Lägg till Anchor Points. Använda Direktmarkeringsverktyg (A), välj ankarpunkten markerad i den andra bilden och dra den helt enkelt 5px upp.
Använda Penverktyg (P), skapa en enkel bana som visas i den första bilden, se till att den hålls vald och fokusera på Utseende panel. Ta bort färgen från fyllningen och välj sedan stroke. Ställ in färgen på R = 232 G = 146 B = O och den Vikt på 3px sedan gå till Objekt> Path> Outline Stroke. Byt till Rektangelverktyg (M), skapa en 2 x 5px form, sätt fyllfärgen på R = 232 G = 146 B = O och placera det som visas i den andra bilden. Återmarkera de tre orange formerna som utgör din lilla hemikon och klicka på Förena knapp från Stigfinnare panel.
Använda Rektangelverktyg (M), skapa en 2 x 5px form och placera den som visas i den första bilden. Välj den här nya rektangeln tillsammans med den orange form som utgör ditt husikon och klicka på Minus Front knapp från Stigfinnare panel. Använda Direktmarkeringsverktyg (A), välj den resulterande formen, fokusera på kontrollpanelen och skriv in "1px" i det Corners låda.
Återställ de tre formerna som utgör dina lilla ikoner, placera dem som visas i följande bild, gå till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i följande bild och klicka på ok.
Välj Typverktyg (T) och öppna Karaktär panel (Fönster> Typ> Tecken). Klicka bara på din tavla, lägg till "FEL"textstycke och ställa in sin färg på R = 172 G = 68 B = O. Använd teckensnittet Open Sans, gör det Djärv Ställ sedan in storleken på 14px och spårningen vid 900px. Se till att din textdel fortfarande är vald och placera den enligt bilden nedan. Välj om Typverktyg (T), Lägg till "Sök" och den "eller"bitar av text, placera dem som visas nedan och använd textattributen som visas i följande fönster.
Se till att Typverktyg (T) är fortfarande aktiv, lägg till några nya bitar av text som visas nedan och använd attributen som visas i följande bild.
Återmarkera alla textstycken som hittills gjorts och gå till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i följande bild och klicka på ok.
Använda Typverktyg (T), Lägg till "404"och ställa in sin färg på R = 252 G = 206 B = 23. Använd samma teckensnitt, gör det Djärv, Ställ in storleken på 90px Placera sedan den här nya texten, som visas i följande bild.
Se till att din "404"textstycke är fortfarande markerat och lägg till de tre Drop Shadow effekter som visas i följande bild (Effekt> Stylize> Drop Shadow).
Använda Rektangelverktyg (M), skapa en 65 x 25px form, se fyllfärgen på R = 60 G = 36 B = 21 och placera det enligt bilden nedan.
Se till att din bruna rektangel hålls vald, fokusera på Utseende panel, välj den befintliga fyllningen och duplicera den med hjälp av Kopiera valda objekt knappen (pekad av den blå cirkeln i följande bild). Välj den nya fyllningen och gå till Effekt> Konvertera till form> Rektangel. Ange egenskaperna som visas i följande bild, klicka ok och gå till Effekt> Förvräng & Transformera> Transformera. Ange attribut som visas nedan och klicka på ok.
Återmarkera din bruna form, fokusera på Utseende panelen, se till att hela sökvägen är vald och gå till Effekt> Stylize> Drop Shadow. Ange egenskaperna som visas i följande bild och klicka på ok.
Använda Typverktyg (T), lägg till din "Gå tillbaka"bit text, sätt färgen på R = 172 G = 68 B = O och placera det enligt bilden nedan. Använd samma Open Sans-typsnitt, gör det Djärv och ställa in storleken på 11px. Återmarkera den här gula textstycket tillsammans med din bruna form och slå enkelt Kontroll-G till Grupp dem.
Kopiera den grupp som utgör ditt lilla verktygstips (Control-C> Control-F), välj kopian och placera den som visas på den första bilden. Fokusera på den gula texten och ersätt den befintliga texten med "Gå hem". Repetera den här tekniken och lägg till den tredje verktygstipsen som visas i den andra bilden. Byt ut det befintliga stycket med"Kontakta oss"och öka bredden på den bruna formen till 75 px.
Välj Rektangelverktyg (M) och klicka helt enkelt på din tavla för att öppna Rektangel fönster. Stiga på 610 i Bredd lådan och 690 i Höjd ruta och klicka sedan på ok knapp. Se till att den resulterande formen förblir vald och ställ in sin färg på R = 35 G = 31 B = 32. Därefter måste du centrera det, så öppna Justera panel (Fönster> Justera). Ställ in anpassningen till Artboard (öppna menyn Fly-out och gå till Visa alternativ om du inte kan se Anpassa till avsnittet som visas i följande bild), se till att din form är markerad, klicka helt enkelt på Horisontell inriktning Center och Vertikalt inriktningscentrum knappar. Till slut borde torget täcka hela tavlan som visas i följande bild. Slutligen slår du helt enkelt Shift-Control- [ att skicka din mörka rektangel tillbaka.
Återställ huvudgult rektangel, fokusera på Utseende panelen, se till att hela banan är vald och lägg till de fyra Drop Shadow effekter som visas i följande bild.
Så här ska det se ut. Jag hoppas att du har haft den här handledningen och kan tillämpa dessa tekniker i dina framtida projekt.
Accentsconagua