Share
Vad du ska skapaIdag ska jag visa dig hur lätt det är att skapa din egen "Website Under Construction" -illustration med Adobe Illustrator. Förhoppningsvis kommer denna snabba handledning att inspirera dig att skapa något unikt som du då kan släppa ut på webben. Så ta en kopp kaffe och öppna Illustrator så att vi kan komma igång.
Eftersom syftet med att göra denna typ av illustration är att föra någon karaktär till din webbplats som för närvarande är under utveckling, bör du överväga några viktiga punkter som kan påverka slutprodukten.
För att göra detta måste du svara på två relativt enkla frågor:
Nummer ett: Hur stort kommer din huvudinnehållsbehållare att vara?
Det här är faktiskt väldigt viktigt, eftersom du vill ha din illustration passande inom ett visst utrymme (viewport), speciellt om du bara gör designen och inte den kodande delen.
Genom att göra så har du en grundläggande uppfattning om storleken (Bredd och Höjd) i din illustration, vilket är något som du behöver fastna själv eller med hjälp av din kodande kompis.
Nu om det är en 960 px bred container, eller något större (1024 px), bör du alltid ta en sekund och bestämma vilka andra visuella element du ska använda, vilket tar oss till den andra frågan.
Det sätt på vilket du centrerar din information är verkligen viktigt, eftersom du vill ha användaren fokus på en viss del av sidan. Oavsett om det är en massa sociala länkar eller ett prenumerationsformulär, vill du att illustrationen ska vara mittfas, där allting händer, eftersom hela tanken är att göra något användbart och visuellt tilltalande samtidigt.
I mitt fall bestämde jag mig för att använda en 960 x 480 px storlek borde ha täckt mig, eftersom kompositionen teoretiskt skulle användas på en vit bakgrund och ta upp mittpunkten.
Självklart, om du gör illustrationen för ett verkligt projekt, kan du alltid gå större beroende på hur ditt innehåll kommer att visas, men för närvarande hoppas jag att 960 px bredd kommer att vara en perfekt match för de flesta av er som läser detta.
Enligt Online Business Dictionary kan ett varumärke definieras som en "unik design, tecken, symbol, ord eller en kombination av dessa, anställda för att skapa en bild som identifierar en produkt och skiljer den från sina konkurrenter."
På dagens marknad är det väldigt viktigt att ställa in ditt företag genom att skapa en bild som enkelt kan identifieras med hjälp av ett par enkla visuella triggers.
Hela tanken bakom projektet för denna handledning är att bygga något tilltalande som faktiskt kan användas så fort du slutar skapa slutprodukten.
Jag uppmuntrar dig att göra din design din egen genom att "branding" illustrationen, så att du i slutändan får en unik version av den.
Hur kan du fråga?
Tja, här är några utgångspunkter.
Färg är enkelt ett av de mest användbara verktygen när det gäller byggmärken, eftersom rätt värde enkelt kan skilja dig från dina konkurrenter, så länge du gör det intressant.
Jag har gått med en gul gul för accenterna och huvudfokuspunkten, men det betyder inte att du måste hålla fast vid det.
När du väl har bestämt ditt färgschema kan du visa upp ditt varumärke eller företag genom att ta på ett tema som beskriver sin kärnverksamhet. Här kan du komma ner och kreativ och reflektera över de visuella elementen som du vill kommunicera.
Om du till exempel bygger en webbplats som ska hantera dataanalys kan du skapa något som använder grafiska diagram och procentindikatorer för att ge dina tittare en liten smak av vad din verksamhet handlar om.
Eller om du arbetar med en digital produkt, låt oss säga en mjukvara, så kan du skapa ett abstrakt fönster med några små funktioner från själva programmet, vilket skulle ge dem en ledtråd på produktens art.
I den här handledningen har jag bestämt mig för att gå med någonting lite mer generisk eftersom jag trodde att du kanske skulle använda min version som utgångspunkt och bygga vidare på det.
Med det sagt, låt oss sluta slösa dyrbar tid och bli kreativ.
Ta upp Illustrator och skapa en Nytt dokument (Fil> Ny eller Kontroll-N) med följande inställningar:
Och från Avancerad flik:
Snabbtips: Som du kanske redan har gissat kommer vi att skapa illustrationen med ett pixel-perfekt arbetsflöde, så jag rekommenderar starkt att du läser min handledning om hur man skapar pixel-perfekt konstverk, vilket hjälper dig mycket.
Innan vi börjar bygga något rekommenderar jag starkt att du identifierar och separerar illustrationens huvuddelar på eget lager eftersom det blir enklare att rikta in och redigera dem senare om du behöver.
Om vi tittar på vår komposition använder vi sex lager, vilket ger dem lätt igenkännliga namn som hjälper till med att identifiera ett visst element från hela.
När du har lagat ditt dokument kan vi nu börja arbeta med den faktiska illustrationen, och det gör vi genom att skapa grundlinjen och bakgrunden.
Placera dig själv på marklinjen, och använd Avrundad Rektangelverktyg skapa tre olika breddformer med en tjocklek på 6 px och a 3 px hörn Radius. Färga dem med en mörkrödgrå (# 3f3838) och se till att placera dem om 8 px från varandra.
Gruppera dem sedan med Kontroll-G tangentbordsgenväg och centrera dem till ritytan använda Justera panelen's Horisontell inriktning Center alternativ, se till att lämna ett gap av 46 px mellan dem och ritytans nedre sida.
Placera dig själv på bakgrundsskiktet och använd Ellipsverktyg (L), skapa en 536 x 536 px form som vi kommer att färga med #efefef och maskera sedan delvis för att gömma den undre sektionen som går under marken.
Lägg sedan till en annan mindre 46 x 46 px cirkel mot det övre högra hörnet och färg det med samma värde (#efefef).
Snabbtips: Om du vill använda en annan färg för bakgrunden kan du enkelt göra det, men när du slutar exportera filen, försök ta bort den, eftersom en transparent PNG-fil skulle kunna passa bättre, speciellt när innehållsbredden är större än själva illustrationen.
Börja arbeta på MacBook genom att skapa en 426 x 24 px bas med rund botten, som vi kommer att färga med # e2e2e2 och ge sedan en 6 px kontur (#aaaaaa) använda Offsetväg verktyg.
Snabbtips: Du kan lära dig hur du skapar konturer genom att kolla på min djupgående jämförelse mellan förskjutningsvägar och streck som används för att skapa linjepictogram.
När du har de huvudsakliga formerna för basen (1) börjar du lägga till några detaljer på den, till exempel tändarens övre del (Bredd: 426 px; Höjd: 16px; Färg: # e2e2e2) (3), 426 x 6 px tjock delningslinje (# 3f3838) (2), de subtila höjdpunkterna (Färg: vit; Blandningsläge: Täcka över; Opacitet: 80%) (4) och pekplattaområdet (5) för att få det att se ut som en verklig bärbar dator och inte en matplatta.
Börja arbeta på MacBooks övre del genom att skapa locket och den faktiska skärmen.
Skapa först en 364 x 220 px rektangel med en 18 px hörn Radius appliceras till de övre vänstra och högra hörnen. Färga formen med # 756c6c och sedan ge det en 6 px kontur (# 3f3838) (2).
Skapa sedan en annan 184 x 328 px rektangel, färg det med din varumärkesfärg (som i vårt fall är # edd87e), ge det samma 6 px kontur (# 3f3838) och placera sedan de två mot mitten av locket och lämna en lucka på bara 6 px mellan dem och MacBook-basen (3).
Lägg till ett par höjdpunkter och en skugga för att ge biten lite mer polsk (4).
När du har skapat MacBook kan du börja arbeta med temat för din webbplats, så ta din tid, bli kreativ och ta reda på exakt vad det är som du vill visa dina tittare.
I vårt fall är det ett enkelt webbplatslayout med en toppnavigeringsmeny, en bildplatshållare, ett anrop till åtgärdsknapp och ett par roliga element som stegen och det vita, omoderna området.
När du är klar, glöm inte att gruppera alla MacBooks element tillsammans med Kontroll-G tangentbordsgenväg och lås sedan dess lager så att vi kan gå vidare till nästa avsnitt av illustrationen.
Börja arbeta med kranen och se om du kan lägga märkefärgen eller färgerna till några av dess kompositioner, för att skapa några accentfärger för att hjälpa dig att utföra temat.
I vårt fall har vi använt vår soliga gula (# edd87e) för kranens operationshytt och den lilla sidan hissen.
Fortsätt arbeta med ditt tema genom att lägga till element som skulle vara relevanta för din webbplats, eller helt enkelt fylla i det tomma utrymmet så att illustrationen inte ens ser ut obalanserad.
Jag bestämde mig för att hålla saker enkelt genom att lägga till en liten dumpster mot höger sida av MacBook, vilket kan vara en metafor för de saker som återvunnits under byggandet av webbplatsen.
Avsluta illustrationen genom att lägga till det sista stycket av pusslet, vilket i vårt fall är den lilla "låtsasbilden" som hålls av kranens arm.
Så där har du det - en bra, enkel guide till att bygga en intressant "Webbplats under konstruktion", som kan hjälpa ditt personliga eller företags varumärke att sticka ut från resten.
Tack för din tid och uppmärksamhet, och var noga med att visa oss vad du har kommit på efter att ha läst det här stycket.
Eftersom jag vet att det här är en snabb handledning, och jag hade inte tid att gå igenom hela kreativ processen bakom illustrationen, kommer jag att ge dig den redigerbara källfilen, så att du kan tinker med det men ditt hjärta önskar. Se nedladdningslänken i det högra sidofältet.
Accentsconagua