Tips for å få en Web Design fra Illustrator inn i Browser

Scenario: noen hender du et Illustrator-dokument med deres nyeste web layout og det er din jobb å konvertere den til å jobbe HTML og CSS. La oss ta en titt på hvordan du kan gjøre det

Merk:.
Målet med denne opplæringen er ikke helt gjenskape design for web bruk. I stedet skal vi bruke den til å utforske arbeidsflyt og funksjoner i Illustrator som hjelper oss til å gjøre det

Den Illustrator File

La oss begynne med å ta en titt på det aktuelle dokumentet.:
Se hvordan vårt eksempel layout ble gjort i denne opplæringen

Det er et oppsett for en 404-side; en side som forteller brukerne at det de leter etter finnes ikke, og at de bør kanskje prøve noe annet. Vi kan se en overskrift, noen instruksjons avsnitt, et søkeskjema og knapp, pluss noen knapper med verktøytips helt på bunnen.

Det hele ser ut til å flyte i midten av siden, både horisontalt og vertikalt. Den har en gul bakgrunn, noen varme aksenter og skygger her og der. Hvor skal vi begynne?

Easy Does it!

Vi har ikke tenkt å finne opp hjulet for dette, la oss gjøre dette så enkelt som mulig på oss selv. Illustrator er ikke til å sende ut en pen pakke av HTML, CSS og Javascript for dette, verken skal vi kaste bort vår tid på å bygge alt fra bunnen av, så la oss gå og ta en kopi av Bootstrap å gi dette prosjektet en kick-start.
Foreløpig versjon 3.1.1, som du kan se ..

Jeg lastet Bootstrap, strippet ut noen av CSS og skriftfiler vi ikke trenger, og deretter lagt en index.html fil basert på Cover mal av Mark Otto. Fire minutter av mus-klikke, og jeg har selv en grunnleggende side som grovt ligner det vi er ute etter.
Det ser kanskje ikke ut som mye, men vi har nettopp reddet massevis av tid ..

Source filer til fortsetter fra dette punktet er tilgjengelig i GitHub repo, i mappen 1-start-punkt.

Legge Markup

Det neste logiske skrittet vil være å legge strukturell markup til vår index.html ( igjen, Illustrator ikke kommer til å gjøre det for oss). Vi har allerede en sentral justert container, en div med klasser indre dekselet:
< div class = "indre cover" > < h1 class = "cover-overskriften" > 404 < /h1 > < p class = "lead" > Dette er utgangspunkt vil vi jobbe. All fluff har blitt strippet ut < /p > < /div >

La oss legge til noen ekstra brikker innenfor denne.
≪ div class = "indre cover" > < h1 > Error < /h1 > < h2 > 404 < /h2 > < p > Beklager, siden du leter etter finnes ikke < /p > < p > Prøv å søke etter siden her: < /p > <! - mer skjema markup tilgjengelige http://getbootstrap.com/css/#forms - > < skjema class = "form-inline form søk" role = "form" > < div class = "form-gruppen" > < label class = "sr-only" for = "searchInput" > Search < /label > < input type = "søk" class = "form-kontroll" id = "searchInput" > < /div > < knappen type = "submit" class = "btn btn-default" > Search < /knapp > < /skjema > < p > Or < /p > <! - knapper - > < a href = "#" class = "btn btn-primær" > tilbake < /a > < a href = "#" class = "btn btn-primær" > hjem < /a > < a href = "#" class = "btn btn-primær" > kontakt < /a > < /div >

Vi har lagt kursen kodene < h1 > og < h2 >, noen avsnitt, og noen typiske Bootstrap skjema markup (du kan ta flere eksempler fra Bootstrap docs). Skjemaet har en klasse av form inline, opprinnelig Bootstrap klasse som plasserer våre skjemaelementer langs en linje.

Til slutt, helt på slutten, vil du se tre ankere, alle med klasser BTN og btn -primary. Disse skal tjene som våre knapper. Her er hva vi har på dette stadiet:

På dette punktet vi har ikke gjort noe i form av styling, ikke en eneste linje med CSS, men takket være bootstrap vi har effektivt bygget vår side, klar for polering opp .

La oss Få Verktøytips Working

Noe annet som Bootstrap kommer til å hjelpe oss med; verktøytips. Du kan lese mer om de ulike alternativene tilgjengelig for oss i bootstrap docs, men nå kan vi bare legge de nødvendige ingrediensene til våre HTML.

Til hver knapp vi legge til en ekstra klasse spiss som brukes til å identifisere noe som må et verktøytips. Vi trenger også en tittel attributt som dikterer hva som faktisk vil vise i verktøytipset:
< a href = "#" class = "btn btn-primære tip" title = "tilbake" > tilbake < /a >

bootstrap.min.js
fil som vi allerede trekker i har alle Javascript trengs for verktøytips. Faktisk har det massevis av andre Javascript leker, mange av dem vi ikke engang trenger, så i et produksjonsmiljø kan det være lurt å bare inkludere de tingene vi bruker. Bootstrap verktøytips er opt-in, slik at de ikke fungerer automagisk, trenger vi å initialisere dem. La oss gjøre det innen skriptkodene nederst på vår side, under der har vi kalt den andre Script:
< script > $ (function () {$ (". tip ') tooltip ().}); < /script >

Ferdig. Vi har nå dette:
Massive forskjell
Nå la oss prøve noen stiler

Jeg har lagt en tredje CSS-fil til prosjektet kalt theme.css Hotell og har pekt på! det fra dokumentet < head >. Men hva gjør vi legge til stilark
<? Adresse href = "css /theme.css" rel = "stylesheet" >

Vi kommer til å begynne med det viktigste container. Velg container objekt i Illustrator, og du vil legge merke til, i Layers
panel, at det er blitt kåret til hoved
.

Dette er relevant. I et team situasjon er det lurt å ha en felles forståelse om hvordan objekter som dette bør bli navngitt. Du vil se hvorfor når vi åpner opp CSS-panelet.

CSS Properties

Gå til Vindu > CSS Properties
å avsløre et panel med samme navn. Med vårt hovedformål valgt dette vil inneholde alle relevante stiler som vi kan lime direkte inn i vår stilark. Du vil se at disse stilene har blitt brukt til velger .main, akkurat som vår objektet har blitt navngitt.

Gå videre og kopiere det du ser, og deretter lime den direkte inn i theme.css
fil. For å få disse reglene gjelder for vår container element, må vi endre velgeren til hva vi faktisk bruker (holde .main velgeren er litt risikabelt som vi kan finne dette brukes andre steder i vår totale stedet). Endre .main å .inner.cover og du skal se din beholder element slår en vakker, gyllen gul, med avrundede hjørner og enda en boks skygge, alt påføres med anstendig kryss-nettleser CSS.

CSS Dimensjoner Anmeldelser

Du vil merke at våre CSS-regler her ikke inkluderer noen bredder eller høyder. Dette er en god ting; Bootstrap er ganske mye å ta vare på alt dette, så vi er egentlig bare ute etter estetiske stiler. Ved å endre CSS Egenskaper Eksportvalg
vi kunne ha våre dimensjoner inkludert her, men vi skal la dem ut.

Vår container er litt bred skjønt, på grunn av stiler allerede har søkt, så la oss overstyre disse dimensjonene med følgende mediespørring:
media (min-width: 992px) {.masthead, .mastfoot, .Dekk-container {width: 400px; }}

Dette overstyrer regler som finnes i cover.css, gir oss en bredde på 400 piksler på skjermer minst 992px bred. 400px er ikke helt sant til design, men jeg personlig synes litt små de sanne dimensjoner og font-size, så jeg legge ned veto it!

Mens vi er her, jeg vil bare endre stilene så vi bruke de avrundede hjørner innenfor dette mediet søket også. Fjerne dem fra de reglene du limt inn fra Illustrator og bruke dem som dette i stedet:
media (min-width: 992px) {.masthead, .mastfoot, .Dekk-container {width: 400px; } .inner.cover {Border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }}

Nå skal vi ha noe som dette på store skjermer:

.. og dette på små skjermer:

konkrete målinger

Vi er ikke akkurat å være trofast mot de nøyaktige dimensjonene som brukes i Illustrator-dokument, men det er ikke et problem; nettet er flytende. Likevel, kan vår container bruke noen padding på bunnen, så la oss finne ut nøyaktig hvor mye vår Illustrator utformingen sier at vi skal bruke.

Velg Mål verktøy
i Illustrator (du finner den med pipetteverktøyet
) og dra markøren for å måle et gitt område av design. Vi kan se at utfyllingen vi er ute etter er 25px, så la oss bruke det manuelt til våre stiler
.inner.cover {padding-bottom:. 25px; Bedre
de andre stilene

har ganske mange stiler og gjenstander for å håndtere her, og hvis alt ble navngitt akkurat som det skal være, vi kan (i prinsippet) utgang en enorm haug av CSS fra Illustrator til å håndtere alt sammen. Men det er noen uoverensstemmelser med objektet navngi her (unngå det ville kreve noen stenger designer /utvikler kommunikasjon), og vi kan ende opp med noen overflødig kode som vi ikke trenger.

I stedet jobbe deg tålmodig fra element til element, velger hvert objekt og gi ut den relevante CSS. Begynn med typografi og la oss bare se hvor godt Illustrator gjør

Fonts

En av de første tingene du vil legge merke til er at CSS for enhver type objekt inkluderer:. Font-family: Åpne Sans;

Åpne sans er ikke en standard system font og vil ikke vises i alle nettlesere der brukeren ikke har det installert. Du vil derfor være nødvendig å gå over til Google Fonts og hente lenken CSS til å trekke den inn på siden gjennom den magiske Webfonts
< link href = 'http:.? //fonts.googleapis.com/css Familie = Åpent + Sans: 400 700 'rel = "stylesheet" type = "text /css" >
Knapper

Alt har gått ganske bra så langt, men da vi traff på knappene. Søkeknappen er faktisk ikke så verst, men de tre knappene nedenfor har ikke fått objektnavn, så ser vi følgende i vår CSS Properties vinduet:
Ingen CSS-koden ble generert. For å opprette CSS for navngitte objekter, enten navngi objektet i lag-panelet, eller aktiverer 'generere CSS for Unnamed Objects' alternativet i dialogboksen CSS for eksport.

Gå videre og åpne opp de alternativene som vi diskutert før, så sørg du har sjekket generere CSS for Unnamed Objects
. Alternativet ville være å gi våre knapper et navn, men begge alternativene er greit her.

Nå, med alle våre knapper valgt, vi kan trykke generere CSS Hotell og ha stiler utgang for oss . Dessverre, Illustrator vil produksjonen komplette stiler for hvert enkelt objekt, selv om de alle har de samme reglene. Dette synes å være tilfelle selv om vi bruker vanlige Grafisk Styles
, Character Styles
, Avsnittsstiler
, eller til og med gi alle objekter med samme navn! Rom for forbedring der, men vi kan i det minste ta vanlige stiler og bruke dem på flere objekter manuelt

Jeg kopierte stiler for søkeknappen, og deretter brukt den til .btn, .btn. Sveve å være sikker alle Bootstrap stiler var passende skrevet. Jeg har også lagt en kant: none; å kvitte seg med Bootstrap blå kant. La oss se hva som får oss!
Ikke dårlig, men ikke perfekt

Dette er ikke dårlig, men det er en rettferdig måte av perfekt. Den tekst skygger ikke har blitt overholdt (de mangler åpenhet), graderinger på knappene er ikke riktig, og de er helt mangler sine box-skygger.

Hvorfor?
< p> Kort sagt, Illustrator CSS eksport ennå ikke klar for denne typen komplekse struktur (for å være rettferdig, er det svært kompleks). La oss se på søkeknappen vi tar sikte på å gjenskape:

Det er deilig. Men ta en titt på hvor mange fyllinger, har gradienter og skygger gått inn i bygningen det:

Ouch. Neppe overraskende at Illustrator sa Ingen
. Selv border-radius har blitt utelatt av ligningen fordi ting har blitt for komplisert.
Du er ikke en spøk ..

I stedet kommer jeg til å bare gjelde noen enkle stiler og omgå komplekset CSS ( denne opplæringen handler om hva Illustrator kan gjøre for oss tross alt ..) De endrede .btn stiler se slik ut:
.btn, .btn: hover {font-family: Åpne Sans; font-weight: bold; font-size: 14px; color: # AC4400; text-shadow: 0px 1px 0px RGBA (255, 255, 255, 0,3); bakgrunn: # FDDA2F; border-color: # FDDA2F; border-radius: 4px;}

I forhold til CSS effektivitet alt dette overlater mye å være ønsket, men vi jobber med det som Illustrator gir oss av hensyn til demonstrasjonen. Du ville være klokt å gå tilbake etterpå og rydde opp i CSS, kanskje ved hjelp av et verktøy som CSSLint.

Ikoner

Det vi har generert til nå er ikke dårlig, så vi skal la det være for nå. La oss vende oppmerksomheten mot de ikoner. Det finnes noen metoder vi kan bruke her:

eksporterende punktgrafikk

Ved å velge hver grafikk, kan du generere CSS mye på samme måte som vi har gjort før. Illustrator vil velge å eksportere komplekse baner som png filer, og deretter bruke disse bildene som bakgrunn for dine elementer

Du vil bli gitt en gruppe av eiendeler for å bruke.

Men, igjen, det er ikke perfekt, og vil utelate visse aspekter ved design, sender ut tvilsomme stiler i andre tilfeller, så denne tilnærmingen vil ta noen raffinering på din del. Denne tilnærmingen unnlater også å ta netthinnen skjermer hensyn, potensielt gi oss sub-standard grafikk på enkelte skjermer. Uansett, ser outputted CSS for disse grafikk som dette:
.image {background-image: url (image.png); background-repeat: no-repeat;}
SVG

Min preferanse, som webdesigner, ville være å gå for SVG i dette tilfellet, noe som Illustrator blir veldig flinke til
<. p> Først velger et ikon, og deretter kopiere den til utklippstavlen på vanlig måte ( kommando + C
). SVG-data for dette objektet er nå tilgjengelig for deg å lime inn en tekst editor (utrolig). Åpne opp en ny fil i nettprosjekt, kaller det "-ikonet-contact.svg" og lime inn innholdet på utklippstavlen inn i den.

Du kan nå legge til at SVG som et bilde direkte i markup av indeksen. html:
< a href = "#" class = "btn btn-primære tip" title = "kontakt oss" > < img src = "img /ikon contact.svg" alt = "" > < /a > Hei der ..

Det er alle slags måter du kan implementere SVG i en web-side; via CSS, ved først å konvertere XML til base64, lime den inn i din markup inline, er valget ditt (ta en titt på SVG-filer: Fra Illustrator til Internett for mer informasjon). Vår tilnærming fungerer helt fint selv, i hvert fall i moderne nettlesere, så vi vil holde med det.

Gjenta prosessen for de andre ikonene, og ..

Vi er ferdig!

Med litt mer tweaking (jeg har lagt noen padding til skjemaet element), bør du ha noe som ligner på dette:

Ikke dårlig! Det gjør ikke 100% reflektere Illustrator grafisk, men vurderer vi har stolt hovedsakelig på stiler produksjonen med Illustrator Jeg tror vi kan være ganske fornøyd. Eventuelle ytterligere forbedringer må gjøres for hånd, har Illustrator gjort alt den kan for oss på dette punktet.

Har du noen tips som kan hjelpe Illustrator direkte forbedre denne web layout? Gi oss beskjed i kommentarfeltet! Anmeldelser