Adobe Illustrator rolle i en Web Design arbeidsflyt
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Quick Tips: Hvordan lage en Ultra Glossy Scalable Web Button med 9-Slice ScalingQuick tips: Hvordan lage en glanset web stil Avrundet knapp
Adobe Illustrator er ikke utformingen verktøyet for de fleste som gjør nettet. Interface design, bitmap skapelse, pixel perfekt bildemanipulering; alle oppgaver som har typisk blitt bedre håndtert av andre programmer. Nettet er under store forandringer, imidlertid, og den rollen Illustrator kan spille i et webdesign arbeidsflyt er i endring også. La oss finne ut hvordan!
Photoshop og Web Design
Nylig skrev jeg om Photoshop rolle i en Web Design arbeidsflyt, en artikkel bedt av endringer i industrien og det vi kjenner som "beste praksis". Jeg anbefaler at du går og lese den (selvsagt), men la meg oppsummere raskt.
Et tiår eller så siden, under overgangen fra papir til web design, Photoshop var et svært nyttig verktøy som tillot designere til å fortsette arbeidsflyt de var kjent med
Classic grafisk designer arbeidsflyt
Denne arbeidsflyten omfattet noen få enkle trinn.; utforme, presentere et bevis til klienten (kanskje en PDF for eksempel), og etter noen runder med tilbakemeldinger sender ut som et endelig produkt. Det fungerte for print, og det ville fungere fint for web.
Men denne tilnærmingen førte designere til å presse på for en piksel perfekt versjon av det endelige produktet, før du selv tenker på å bygge. Disse PSD comps (omfattende oppsett) ga designere muligheten til å finjustere hver minste detalj, før du forplikter deg til uhyggelig prosessen med å gjenskape en faksimile for leseren
Amplius -. PSD mal på Themeforest
Det viser seg dette var en ufullkommen prosess, men det er bare fordi økningen av Responsive Web design som vi har virkelig begynt å sette pris på det faktum. Responsive web design gjør at nettsteder for å bøye og endre til sine omgivelser; samme nettsted kan vises svært forskjellig på en stor PC-skjermen i forhold til sin mobil motstykke. Det kan også vises forskjellig i ulike nettlesere på samme skjerm - og det er greit
Hvordan påvirker dette designprosessen har vi bare diskutert.? Det betyr at for å demonstrere et produkt til kunden, ville vi trenger for å produsere bevis for en rekke resolusjoner:
Printgram på mediaqueri.es
Det er ikke slutten av verden om - vi vil bare bruke den ekstra tiden (jeg er sikker på at klienten vil betale regningen) og jobbe litt hardere. Hva med feedback loop skjønt? Dersom kunden bestemmer seg for at de ikke ønsker søkefunksjonalitet, må vi slette den fra alle de ulike comps! Mareritt!
Og det er ingen fastsatt utvalg av standard oppløsninger heller. Vi vet hvor stor en iPhone 5 skjermen er nå Vi har alle verktøyene som vi er mest komfortable arbeids med, og det er For arbeidsflyt grunner som nevnt ovenfor er det imidlertid bare ikke fornuftig å nærme seg ting på denne måte lenger. Det er lite fleksibel. Igjen, hvis du leser min forrige artikkel om Photoshop rolle i webdesign, finner du dette drøftes nærmere. Vi må finne en mer fleksibel arbeidsflyt, som betyr å gå modulær. Webdesign prosessen kan deles inn i logiske deler: Splitting prosessen inn i moduler som disse gjør at kundene å gi tilbakemelding og signere på hvert trinn individuelt. Dykking tilbake i humør boards og endre merkevarebygging fargene er mye enklere enn å redigere de samme aspektene ved flere detaljerte comps. Når prosessen har nådd en passende konklusjon, er alle fornøyde og det endelige produktet kan bygges. Selvfølgelig kan denne prosessen inkluderer en belastning på andre moduler også, noe som fører oss (endelig) for å snakke om Illustrator rolle i denne ordningen. Illustrator kan lett slå sin hånd til en rekke aspekter i denne arbeidsflyten, så hvorfor ikke bruke det? Wireframing med Illustrator er muligens den beste kampen her; form verktøy og svært kontrollerbar typografi gjør Illustrator ideell for raske ramme svømme oppsett. Strukturer som Zurb Foundation, som jeg nevnte tidligere, ofte tilby vektorsett med alle sine grensesnitt elementer, ideelt for Wireframing. Og hvis de rammer selv ikke gi en, kan du satse noen i samfunnet har bygget en allikevel! Utnytt symboler også, slik at du kan arbeide på en ikke-destruktiv måte. Lagrer resuable elementer som symboler gjør at du kan dra og slippe, gjør endringer over hele linja hvis nødvendig. Å ha hele regioner (for eksempel bunntekst, navigasjon, kommentarer område) er tilgjengelig som symboler vil spare deg poser av gangen. tegn- og avsnittsmaler hjelpe ikke-destruktiv arbeidsflyt ytterligere. Sett visse stiler for hver typografisk element innenfor wireframe (størrelse, vekt, font) og bruke den til alle relevante deler av teksten. Hvis du trenger å endre størrelsen på posisjonene, gjør det innenfor tegnstiler panelet og se på endringene trer i kraft over hele dokumentet. Akkurat som CSS og web-sider, når du tenker på det .. Forbedringer til Adobes Creative Cloud har sett Typekit (deres nylig kjøpte web font tjeneste) integrert i mange applikasjoner. Fra Illustrator karakterer panelet vil det snart være mulig å velge en rekke web-fonter, for å gi hi-fidelity trådmodeller ekstra detalj om nødvendig. Til slutt, mens de fortsatt på temaet trådmodeller, kommer flere illustrasjonsbrett. Disse vil hjelpe deg å vise ulike tilstander, forskjellige oppløsninger, ulike sider, alt innenfor det samme dokumentet. Lagre illustrasjonsbrett ut til en enkelt PDF hvis kunden favoriserer som metode for presentasjon. Jeg har brukt vektorer i mange år. Gode gamle pålitelige vektorer. Første gang jeg møtte dem takket være Coreldraw! tilbake i … Jeg har ingen anelse om når. Min første virksomhet var i skriftfresing, ved hjelp av tvilsomme vektor programvare for å kutte ark med vinyl for Sticke opp båter og varebiler. Senere flyttet jeg inn i web-design, som på den tiden inkluderte Adobe Flash (hmm) så også, til en viss grad, vektor verktøy. Til slutt overgangen var fullstendig og jeg flyttet inn kode redaktører og glemte vektorer i stor grad. Hvorfor får jeg kjedelig du med alt dette? Vel, fordi Circle of Life ™ har kommet rundt en gang til og vektorer er igjen spiller en rolle i det jeg gjør for en levende; webdesign. Wahoo! Du kan takke Apple for dette. Selv om de ikke var de første til å produsere en hi-pixel-density skjermen sin Retina Display sikkert tok konseptet mainstream. Forbrukere over hele verden gliste øre til øre på utsiktene til super-skarpe skjermer; webdesignere utenlandsoppdrag gispet i skrekk som sine bitmap-baserte nettsteder slått til pixelated søppel over natten. Dette var bare et eksempel på nettsteder oppfører seg på måter vi ikke hadde forventet. Mer bevis på at vi trenger å være så agnostiker som mulig i måten vi bygger. Heldigvis lesere er flinke til håndtering vektorer i disse dager (selv om svært komplekse, vil million-noded kaos innvirkning på ytelsen). Vi kan bruke SVG (Scalable Vector Graphics) som tillater oss å sende våre vektorgrafikk direkte til leseren, akkurat som vi har alltid vært vant til med punktgrafikk. SVG-filer er effektivt XML på hjertet, slik at mer dristig blant oss kan åpne dem opp i en kode editor og leke seg med den interne driften - selv gjemmer flere bilder i samme fil for visning under forskjellige leser omstendigheter Dette er veldig viktig faktisk.; det faktum at Illustrator er en vektor grafikk verktøy og vektorer er plutselig en viktig del av oppløsning uavhengighet, er nøkkelen til sin renessanse i verden av web design. Nett designer kjærlighet affære med ikoner er like gammel som næringen selv. Hvem har ikke funnet seg ivrig spare gigabyte med .png filer på sine eksterne harddisker på noen scene ?! For de grunner som er beskrevet ovenfor imidlertid bitmap ikonene er problematisk disse dager. I stedet kan vi nå bruke Webfonts, som tillater oss å kartlegge ikon symboler til skrifttegn og visning i nettleseren som "type". Faktisk, vi kjørte nylig et fellesskap prosjekt som samlet bygget et webfont ikonsett: Ved hjelp av tjenester som Icomoon du kan laste opp dine SVG-ikoner, kart dem til tegnene du vil, så har dem ut som en webfont pakke virkelig lett du kan også vise logoer på denne måten.; kartlegge dem til en rekke tegn som en ligatur: Ved å bruke vektorbaserte SVG-filer og webfont ikoner, vinne vi eventuelle oppløsning problemer. Takk, Illustrator. Vi har diskutert hvordan det er mulig Dette er en funksjon som allerede finnes i Photoshop som standard, eller som en forlengelse for eldre versjoner, og Adobe åpenbart følte det viktig nok til å integrere i Illustrator. Hvis du liker å designe elementer og effekter i Illustrator, vil du snart kunne utgang disse objektstiler som CSS, direkte lime inn kode editor. Er dette nyttig? Kan være. Kan det danne en legitim del av en web-design arbeidsflyt? Det er ikke for meg - selv om det er viktig å merke seg at hver enkelt er fullt berettiget til å nærme seg ting men de vil! Uansett fungerer. Adobe absolutt ikke lener seg på Illustrator som sitt webdesign verktøy for fremtiden. Det pleide å være rollen som fyrverkeri, men de sendte nylig som i Dignitas-klinikken i Sveits. I stedet er Adobe tungt å investere i sin åpen kildekode editor (som er strålende, forresten): og resten av deres Edge pakke med fleksible web-verktøy, slik som Aron Shekey sin Reflow Stopp designe hi-fidelity nettside comps i Illustrator! Ikke fordi det er mot loven, eller at din familie vil fornekte deg, men fordi du kan bruke Illustrator mer effektivt og til mye større effekt. Omfavne utsiktene til en ny, modulær webdesign arbeidsflyt og holde et åpent sinn som forbedringer er foreslått Og nå for det uunngåelige kommentar-spørre spørsmålet.; bruker du Illustrator til å designe for web?
, men det vil endre seg når Apple slipper en ny telefon - og i mellomtiden vil det være fire tusen andre nye enheter på markedet. Vi har simpelthen ikke vet hvor store skjermer er, eller hvordan våre nettsteder blir vist.
Dette gjelder også illustratør
webdesignere som bruker Illustrator av den grunn. Det er ikke så vanlig å se full blåst comps produsert i Illustrator, men det er fullt mulig (Illustrator selv tilbyr oss den fryktede skive verktøyet), så hvorfor ikke? Vi har opplæringsvideoer på Vectortuts + nærmer ting på at svært måte.
Bruk Adobe Illustrator for å lage et rent Nettstedet Layout
Så hva er alternativet?
Wireframing som legger ut elementære forhold, visuell hierarki og grunnleggende nivåer av interaktivitet. Trådmodeller kan være svært forenklede, gjennom til mer detaljert (hi-fi), men aldri bryte utover grensene for deres kjerneformål. Les En nybegynners guide til Wireframing for mer informasjon.
Illustrator og Modular arbeidsflyt
Zurb stiftelsens PDF sjablong satt
Twitter Bootstrap Illustrator fil
Janko Jovanovic gratis Wireframing kit er en gammeldags, men en Goldie
vektorer? I Web Design ?!
Oppløsning Independence
< p> for at våre nettsteder er immun mot variasjoner i pikseltetthet, må vi stole på lesergenerert grafikk så mye som mulig. Slicing opp bitmaps å dekorere våre sider skjære ikke det lenger. Heldigvis har CSS kommet langt i de siste årene og vil nå hjelpe oss med avrundede hjørner, graderinger, selv mønstre, slik at vi ikke lenger trenger å lene seg på punktgrafikk for disse tingene. Faktisk er denne bevege seg bort fra svært strukturerte og polert bitmap-basert design har bedt om en trend i Flat design, selv om det er et emne for en annen artikkel
Ikoner og Webfonts
kolossale og strålende Fuge ikonsett
The Eventuelle Old Ikon Tuts + fellesskap drevet ikonsett
Hvis du er interessert i å lære mer om dette, sjekk ut din egen logo, som en Web Font Ligatur
Hvordan Adobe se ting
å bruke Illustrator i et webdesign arbeidsflyt, men hva gjør Adobe tror vi bør gjøre? De har nylig annonsert flere forbedringer i Illustrator (sammen med hele Creative Cloud samling) inkludert noen oppmerksomhet til CSS Export.
<. p> Tilpass flyt er satt til å integrere godt med Photoshop og Illustrator; deling av eiendeler, fonter og prosesser for en kombinert webdesign arbeidsflyt. Det er verdt å merke seg at dette ikke er ment å være et nettsted produksjons-maskin, men svært godt egnet for å bygge fleksible prototyper, som vi diskuterte i vår modulære arbeidsflyt.
I Konklusjon