Share
Hva du skal skapeI dag skal jeg vise deg hvor enkelt det er å lage din egen "Website Under Construction" -illustrasjon ved hjelp av Adobe Illustrator. Forhåpentligvis vil denne raske opplæringen inspirere deg til å skape noe som er unikt for deg selv, og du kan da løsne på nettet. Så ta en kopp kaffe og åpne Illustrator slik at vi kan komme i gang.
Siden formålet med å gjøre denne typen illustrasjon er å bringe noen karakter til nettstedet ditt som for tiden er under utvikling, bør du vurdere noen få viktige punkter som kan påvirke sluttproduktet.
For å gjøre dette må du svare på to relativt enkle spørsmål:
Nummer ett: Hvor bredt vil hovedinnholdsbeholderen din være?
Dette er faktisk veldig viktig, siden du vil ha illustrasjonen din tilpasning innenfor en bestemt plass (viewport), spesielt hvis du bare gjør designen og ikke den kodende delen.
Ved å gjøre det, har du en grunnleggende ide om størrelsen (bredde og høyde) av illustrasjonen din, noe som du må pinke deg selv eller med hjelp av din kodende kompis.
Nå om det er en 960 px bred beholder, eller noe større (1024 px), bør du alltid ta et sekund og bestemme hvilke andre visuelle elementer du skal bruke, noe som tar oss til det andre spørsmålet.
Måten du senterer informasjonen din er, er viktig, siden du vil ha brukeren fokus på en bestemt del av siden. Enten det er en mengde sosiale lenker eller et abonnementsskjema, vil du at illustrasjonen skal være midtpunktet, der alt annet skjer, siden hele ideen er å gjøre noe nyttig og visuelt tiltalende samtidig.
I mitt tilfelle bestemte jeg meg for å bruke en 960 x 480 px Størrelsen skal ha meg dekket, siden sammensetningen teoretisk ville bli brukt på en hvit bakgrunn og ta opp midtpunktet.
Selvfølgelig, hvis du gjør illustrasjonen for et faktisk prosjekt, kan du alltid gå større avhengig av hvordan innholdet ditt vil bli vist, men for øyeblikket håper jeg at 960 px bredde vil være en perfekt kamp for de fleste av dere som leser dette.
I henhold til Online Business Dictionary kan et merke defineres som et "unikt design, tegn, symbol, ord eller en kombinasjon av disse, ansatt i å lage et bilde som identifiserer et produkt og skiller det fra sine konkurrenter."
I dagens marked er det veldig viktig å sette din bedrift fra hverandre ved å lage et bilde som lett kan gjenkjennes ved hjelp av et par enkle visuelle utløsere.
Hele ideen bak prosjektet for denne opplæringen er å bygge noe tiltalende som faktisk kan brukes så snart du er ferdig med å skape sluttproduktet.
Jeg oppfordrer deg til å lage ditt eget design ved å "merkevare" illustrasjonen, slik at du til slutt vil ha en unik versjon av det.
Hvordan kan du spørre?
Vel, her er noen utgangspunkter.
Farge er lett et av de mest nyttige verktøyene når det gjelder byggemerker, siden den rette verdien lett kan skille deg fra konkurrentene dine, så lenge du gjør det interessant.
Jeg har gått med en fin gul for aksentene og hovedfokuspunktet, men det betyr ikke at du må holde fast ved det.
Når du har funnet ut fargevalg, kan du vise merkevaren eller firmaet ditt ved å ta på et tema som beskriver kjernevirksomheten. Her kan du komme ned og kreative og reflektere over de visuelle elementene du vil kommunisere.
Hvis du for eksempel bygger et nettsted som skal behandle dataanalyse, kan du lage noe som bruker grafiske diagrammer og prosentvis indikatorer, for å gi seerne en liten smak av hva virksomheten handler om.
Eller, hvis du har et digitalt produkt, la oss si et program, du kan lage et abstrakt vindu med noen små funksjoner fra selve programmet, noe som vil gi dem et hint på produktets art.
I denne spesielle opplæringen har jeg bestemt meg for å gå med noe litt mer generisk siden jeg trodde du kan bruke min versjon som utgangspunkt og bygge videre på det.
Når det blir sagt, la oss slutte å kaste bort dyrebar tid og bli kreativ.
Ta opp Illustrator, og opprett en Nytt dokument (Fil> Ny eller Kontroll-N) ved hjelp av følgende innstillinger:
Og fra Avansert tab:
Raskt tips: Som du kanskje allerede har gjettet, skal vi skape illustrasjonen ved hjelp av en piksel-perfekt arbeidsflyt, så jeg anbefaler på det sterkeste at du leser veiledningen min om hvordan du lager piksel-perfekt kunstverk, noe som vil hjelpe deg mye.
Før vi begynner å bygge noe, anbefaler jeg på det sterkeste at du identifiserer og skiller illustrasjons hoveddeler på eget lag, siden det blir enklere å målrette og redigere dem senere hvis du trenger å.
Ta en titt på vår sammensetning, vi bruker seks lag, noe som gir dem lett gjenkjennelige navn som vil hjelpe med prosessen med å identifisere et bestemt element fra hele.
Når du har lagret dokumentet ditt, kan vi nå begynne å jobbe med selve illustrasjonen, og det vil vi gjøre ved å lage grunnlinjen og bakgrunnen.
Plasser deg selv på bakken, og bruk avrundet Rektangelverktøy Lag tre forskjellige breddeformer med en tykkelse på 6 px og a 3 px hjørne radius. Farge dem med en mørk rød-grå (# 3f3838) og sørg for å plassere dem om 8 px fra hverandre.
Deretter grupperer du dem med Kontroll-G tastaturgenvei, og senter dem til artboard bruker Juster panelet's Horisontal justeringssenter alternativ, sørg for å legge et gap av 46 px mellom dem og artboardnederst på siden.
Plasser deg selv på bakgrunnslaget, og bruk Ellipseverktøyet (L), lage en 536 x 536 px form som vi vil farge ved hjelp av #efefef og masker så delvis for å skjule bunnseksjonen som går under bakken.
Deretter legger du til en annen mindre 46 x 46 px sirkel mot øverste høyre hjørne, og farg det med samme verdi (#efefef).
Raskt tips: Hvis du vil bruke en annen farge for bakgrunnen, kan du enkelt gjøre dette, men når du ender med å eksportere filen, prøv å fjerne den, siden en gjennomsiktig PNG-fil kan være bedre egnet, spesielt når innholdsbredden er større enn selve illustrasjonen.
Begynn å jobbe på MacBook ved å lage en 426 x 24 px base med rundbunn, som vi vil farge ved hjelp av # e2e2e2 og deretter gi en 6 px disposisjon (#aaaaaa) bruker Offset-banen verktøy.
Raskt tips: Du kan lære å lage oversikter ved å ta en titt på min grundige sammenligning mellom Forskjellige baner og streker brukt som metoder for å lage linjepiktogrammer.
Når du har de viktigste figurene til basen (1), begynner du å legge til noen detaljer på den, for eksempel lysere toppseksjonen (Bredde: 426 px; Høyde: 16px; Farge: # e2e2e2) (3), 426 x 6 px tykk delingslinje (# 3f3838) (2), de subtile høydepunktene (Farge: hvit; Blandingsmodus: overlegg, opacity: 80%) (4) og touchpad-området (5) for å få det til å se ut som en faktisk bærbar datamaskin og ikke en tallerkenplate.
Begynn å jobbe på MacBooks øverste del ved å lage lokket og selve displayet.
Først opprett en 364 x 220 px rektangel med en 18 px hjørne radius brukes til de øverste venstre og høyre hjørner. Farge formen med # 756c6c og deretter gi den en 6 px disposisjon (# 3f3838) (2).
Deretter oppretter du en annen 184 x 328 px rektangel, farger det med merkevaren din farge (som i vårt tilfelle er # edd87e), gi det det samme 6 px disposisjon (# 3f3838) og deretter plassere de to mot midten av lokket, slik at det bare er et gap 6 px mellom dem og MacBook base (3).
Legg til et par høydepunkter og en skygge for å gi stykket litt mer polsk (4).
Når du har opprettet MacBook, kan du begynne å jobbe med temaet på nettstedet ditt, så ta deg tid, bli kreativ og finne ut nøyaktig hva det er som du vil vise seerne dine..
I vårt tilfelle er det et enkelt nettstedslayout, med en toppnavigasjonsmeny, et bildeplassholder, en anrop til handlingsknapp og et par morsomme elementer som stigen og det hvite, ikke-malte området.
Når du er ferdig, ikke glem å gruppere alle MacBook-elementene sammen ved hjelp av Kontroll-G tastaturgenvei, og lås deretter laget, slik at vi kan gå videre til neste del av illustrasjonen.
Begynn å jobbe med kranen, og se om du kan legge merkevaren til farger eller farger til noen av komponentene, for å lage noen accentfarger for å hjelpe deg med å utføre temaet.
I vårt tilfelle har vi brukt vår solgul (# edd87e) for kranens førerhus og den lille sideheisen.
Fortsett å jobbe med temaet ditt ved å legge til elementer som vil være relevante for nettstedet ditt, eller bare fyll ut det tomme rommet slik at illustrasjonen ikke ender opp med å se ubalansert.
Jeg bestemte meg for å holde ting enkelt ved å legge til en liten dumpster mot høyre side av MacBook, noe som kan være en metafor for de tingene som ble resirkulert under byggingen av nettstedet.
Avslutt illustrasjonen ved å legge til det siste stykket av puslespillet, som i vårt tilfelle er det lille "låtbildet" som holdes av kranens arm.
Så der har du det - en fin, enkel veiledning for å bygge en interessant "Website Under Construction" Illustrasjon, som kan hjelpe ditt personlige eller bedriftens merkevare skiller seg ut fra resten.
Takk for din tid og oppmerksomhet, og vær sikker på å vise oss hva du har kommet opp med etter å ha lest dette stykket.
Siden jeg vet at dette er en rask opplæring, og jeg har ikke tid til å gå gjennom hele kreative prosessen bak illustrasjonen, skal jeg gi deg den redigerbare kildefilen, slik at du kan tinker med det, men ditt hjerte ønsker. Se nedlastingslenken i høyre sidefelt.
Accentsconagua