Share
Shopping för en ny ikon? Sök inte mer. Läs om hur du skapar en anpassad shoppingkorgikon för ditt nästa webbdesignprojekt. Vi kombinerar 3D-kvaliteter med en platt look. Du behöver en bestämd förståelse av Adobe Illustrators verktyg för att slutföra denna handledning.
Nedan är den slutliga designen vi ska arbeta för.
Börja med att välja rektangelverktyget (M) och rita en rektangel med en 4 pt stroke. Se till att du använder en ljusfärg för stroke så att du kan se vad du gör när du applicerar 3D-effekten. Applicera inte en fyllning i rektangeln.
Gå till Effekt> 3D> Extrude & Bevel. Ge din form en rotation för X-, Y- och Z-axeln "och en Extrude Depth på cirka 16. Klicka på OK. Kopiera och klistra in den här formen för att använda till nästa steg.
Dubbelklicka på Utseendepalett på 3D Extrude & Bevel. Ange en mycket högre Extrude Depth och klicka på OK.
Sätt formerna ovanpå varandra och gör antingen den övre eller nedre formen något mindre eller större än den andra. På så vis kan du berätta att det finns två former som består av korg. Detta är vad ditt konstverk ska se ut just nu.
För att manipulera formen vidare måste du först gå till Objekt> Expand Utseende. Använd Direktmarkeringsverktyget (A) genom att dra för att markera punkterna som markerade nedan. Flytta poängen inåt lite så hela korgen är lite tunnare längst ner.
Se till att du flyttar punkterna runt korgens övre kant också.
Vi applicerar en blå till svart gradient i vår korg. När du arbetar med svart, se till att du använder en svart som har nollvärden för R, G och B. Det ger dig en mycket rikare svart.
Markera korgens ansikte och gå till Objekt> Path> Offset Path. Ange om -10 och klicka på OK. Detta skapar ett inre område med samma proportioner av den större formen. Vi kan sedan applicera två olika färger på formerna för att ge korget mer visuellt intresse.
Ge det andra ansiktet på korgen samma förskjutningspassbehandling.
Om du vill att dina gradienter ska vara konsekventa i flera former än se till att du väljer båda formerna samtidigt. Jag har skapat utseendet på en mycket reflekterande yta genom att plötsligt ändra färgen i lutningen. Att få en realistisk reflektion kommer att ta lite experiment.
Välj det inre området på korgens ansikte och gå till Redigera> Redigera färger> Justera färgbalans. Ange 5 för varje värde och klicka på OK. Detta gör den blå färgen 5 procent lättare på det valda området och ger intrycket av en subtil förändring i objektets yta.
Så här ser ditt konstverk ut nu.
Fortsätt att ge resten av kurvgradienterna. Observera hur det reflekterande utseendet inte är för overdone. Jag brukar ge varje ansikte av korgen inte mer än en abrupt färgförändring. Men det var klart att regler gjordes för att brytas. Bara fortsätt att prova olika vinklar och intensiteter av färg tills det ser rätt ut till dig. Observera också hur insidan av korgen inte använder mycket av en reflektion, bara en mörk till ljusgradient.
Att göra hålen som skär genom korgen är lättare än du kanske tror. Använd pennverktyget (P) genom att teckna en form som den nedan. Se till att du följer kurvorna. I grund och botten ser du till att dina övre linjer är parallella med korgens topp och botten och sidolinjerna är parallella med korgens sidor.
Kopiera och klistra in formen och överlappa dem som visas nedan. Markera Avdrag från formområde i dialogrutan Pathfinder följt av Expand.
Du kommer att vara kvar med en form som ser ut som kanten på ett fönster.
Eftersom huvudfönsterformen fortfarande finns på klippbordet trycker du på Alternativ + F för att klistra in fönstersformen exakt där du kopierade den. Du kan nu använda denna form för att skapa de andra fönstren. Eftersom korgformen slår ner mot botten måste du justera varje fönster någonsin så att de ser rätt ut. Använd Direct Selection Tool för att justera varje fönsterform.
Rita fönstren på den andra sidan av korgen.
Välj varje fönsterform på sidan av korgens ena sida och ge dem en brun till svart gradient samtidigt. Detta garanterar att lutningen är jämn och konsekvent över alla fönstren.
För att göra lådorna som går in i korgen först rita en fyrkantig form.
Gå till Effekt> 3D> Extrude & Bevel. Ange variablerna nedan och klicka på OK.
Kopiera och klistra in rutorna ett par gånger och ändra Extrude-djupet för att göra olika höjder av lådor.
För att fortsätta arbeta med rutorna måste du expandera dem genom att gå till Objekt> Expand Utseende. Mycket viktigt: Ta bort alla rutor tills du inte längre kan gruppera dem. För att gruppera upp rutorna, gå till Objekt> Ungruppering.
Därefter roterar lådorna så att de är alla i något olika vinklar. Ge dem en varm brun gradient och se till att variera ljusstyrkan på varje sida av lådan för att skapa ett mer realistiskt utseende.
Lägg till lite mer detaljer genom att kopiera och klistra in överkanten och använda direktvalverktyget för att omforma objektet så att det ser ut som ett stycke tejp. Fyll formen med vit och justera opacitet i transparentpaletten till ca 10%.
Gå till Objekt> Path> Offset Path och skriv in -5 och klicka sedan på OK.
Välj den inre formen och justera lutningen så att den inte blandas i den andra formen bakom den.
Ett snabbt sätt att få det att se ut som om lådorna är inne i korgen är att applicera en Clipping Mask på dem.
Använd Penverktyget för att dra en linje där den streckade linjen är. Din linje behöver inte en fyllnings- eller slagfärg. Den röda linjen nedan är bara för representation.
Se till att formen du just ritat ligger framför lådorna. Markera alla rutor och välj maskformen och gå till Objekt> Klippmask> Gör. Dina lådor kommer direkt att se ut som om de är inne i korgen!
Om du vill redigera färgen eller formen på rutorna ytterligare dubbelklicka på dem för att gå in i det som kallas Isolation Mode (Illustrator CS3 och uppåt) och justera dem efter dina önskemål.
Skapa några höjdpunkter på korgen genom att först dra en grundläggande form med Pen Tool. Gå till Effect> Blur> Gaussian Blur och skriv in en variabel som ser bra ut för dig.
Kopiera och klistra in alla elementen hittills. Välj den kopia du just skapat och välj Lägg till formområde i Pathfinder Palette följt av Expand.
Ge denna form en tjock stroke. Ställ in kepsarna på Round och Join som markeras nedan. Därefter ge formen en droppskugga genom att gå till Effekt> Stylize> Drop Shadow.
Sätt formen bakom allt annat.
Du kan enkelt göra denna ikon till en uppsättning genom att ändra fönstren till en blå till svart gradient och göra en pil ur en triangel och en fyrkantig form.
Här är det, den sista kundvagnen ikoner.
Accentsconagua