Scenario: Noen gir deg et Illustrator-dokument med deres nyeste weboppsett, og det er jobben din å konvertere den til HTML og CSS. La oss ta en titt på hvordan du kan gjøre det.

Merk: Målet med denne opplæringen er ikke å perfeksjonere designen for nettbruk. I stedet skal vi bruke den til å utforske arbeidsflyter og funksjoner innen Illustrator som hjelper oss å gjøre det.

Illustratorfilen

La oss starte med å se på dokumentet i spørsmålet:

Se hvordan vårt eksempellayout ble laget i denne opplæringen

Det er et oppsett for en 404 side; en side som forteller brukerne at det de ikke leter etter, ikke kan bli funnet, og at de kanskje bør prøve noe annet. Vi kan se en overskrift, noen instruksjonsavsnitt, et søkeskjema og en knapp, samt noen knapper med verktøytips nederst på siden.

Alt ser ut til å flyte midt på siden, både horisontalt og vertikalt. Den har en gul bakgrunn, noen varme aksenter og drop shadows her og der. Hvor begynner vi??

Lett Gjør det!

Vi skal ikke gjenoppfinne hjulet for dette, la oss gjøre dette så enkelt som mulig på oss selv. Illustrator kommer ikke til å skrive ut en fin pakke med HTML, CSS og JavaScript for dette, og vi skal ikke kaste bort tiden vår bygger alt fra grunnen, så la oss gå og ta en kopi av Bootstrap for å gi dette prosjektet en kickstart.

For tiden v3.1.1, som du kan se ...

Jeg lastet ned Bootstrap, fjernet noen av CSS og fontfiler vi ikke trenger, og la en index.html-fil basert på Cover template fra Mark Otto. Fire minutter med museklikk, og jeg har meg selv en grunnleggende side som omtrent ligner på det vi er ute etter.

Det ser kanskje ikke ut som mye, men vi har akkurat spart massevis av tid ...

Kildefiler for å fortsette fra dette punktet er tilgjengelige i GitHub-repo, i mappe 1-startpunktet.

Legge til Markup

Det neste logiske trinnet ville være å legge til strukturell merking til vår index.html (igjen, Illustrator kommer ikke til å gjøre det for oss). Vi har allerede en sentraljustert beholder, a div med klasser indre deksel:

 
404
 
Dette er grunnen hvorfra vi skal jobbe. All fluff er fjernet.
 

La oss legge til noen ekstra stykker i det:

 
Feil
 
404
 
Beklager, siden du lette etter eksisterer ikke
 
Prøv å søke etter siden her:
  
 
 Søke  
 Søke 
 
Eller
  tilbake hjem kontakt oss 

Vi har lagt til overskriftsmerker

og

, noen avsnitt, og noen typiske Bootstrap form-merking (du kan ta flere eksempler fra Bootstrap-dokumentene). Skjemaet har en klasse av form inline, en innfødt Bootstrap klasse som plasserer våre formelementer langs en linje.

Til slutt, helt til slutten, ser du tre ankre, alle med klassene btn og btn-primær. Disse vil fungere som våre knapper. Her er det vi har på dette stadiet:

På dette punktet har vi ikke gjort noe når det gjelder styling, ikke en enkelt linje med CSS, men takket være Bootstrap har vi effektivt bygget vår side, klar for polering opp.

La oss få verktøytipsene som fungerer

Noe annet som Bootstrap skal hjelpe oss med; verktøytipsene. Du kan lese mer om de forskjellige alternativene som er tilgjengelige for oss i Bootstrap-dokumentene, men for nå kan vi bare legge til de nødvendige ingrediensene i vår HTML.

Til hver knapp legger vi til en ekstra klasse Tips brukes til å identifisere noe som trenger et verktøytips. Vi trenger også en tittel attributt som dikterer hva som faktisk vil vises innenfor verktøytipset:

tilbake

De bootstrap.min.js filen som vi allerede trekker inn, har alt JavaScript som trengs for verktøytipsene. Faktisk har den masse andre JavaScript-leker, og mange av dem trenger vi ikke engang, så i et produksjonsmiljø kan det være lurt å bare inkludere de tingene vi bruker. Bootstrap-verktøytips er innlogging, slik at de ikke fungerer automatisk, vi må initialisere dem. La oss gjøre det innenfor skriptetiketter nederst på siden vår, under der vi har kalt den andre JavaScript:

Ferdig. Vi har nå dette:

Massiv forskjell!

La oss nå prøve noen stiler

Jeg har lagt til en tredje CSS-fil til prosjektet som heter theme.css og har pekt på det fra dokumentet . Men hva legger vi til stilarket?

Vi skal begynne med hovedbeholderen. Velg beholderobjektet i Illustrator, og du vil merke, i lag panelet, at det er blitt kalt hoved-.

Dette er relevant. I en lagssituasjon er det lurt å ha en felles forståelse for hvordan objekter som dette skal bli navngitt. Du vil se hvorfor når vi åpner CSS-panelet. 

CSS Egenskaper

Gå til Vindu> CSS Egenskaper å avsløre et panel med samme navn. Med vårt hovedobjekt valgt, vil dette inneholde alle relevante stilarter som vi kan lim inn direkte inn i stilarket. Du får se at disse stilene har blitt brukt på selgeren .hoved-, akkurat som vårt objekt har blitt oppkalt.

Gå videre og kopier det du ser, og lim det inn direkte i theme.css fil. For at disse reglene skal gjelde for vårt containerelement, må vi endre väljeren til det vi faktisk bruker (holder .hoved- selector er litt risikabelt som vi kan finne dette brukt andre steder i vårt overordnede nettsted). Endring .hoved- til .inner.cover og du bør se at beholderelementet ditt blir en nydelig gylden gul, med avrundede hjørner og til og med en bokseskygge, alle påført med anstendig kryss-nettleser CSS.

CSS Dimensjoner

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 det, så vi ser virkelig bare etter estetiske stiler. Ved å endre CSS Egenskaper Eksporteringsalternativer vi kan få våre dimensjoner inkludert her, men vi vil legge dem ut.

Vår beholder er litt bred, men på grunn av stiler som allerede er brukt, så la oss overstyre disse dimensjonene med følgende medieforespørsel:

@media (min bredde: 992px) .masthead, .mastfoot, .cover-container bredde: 400px; 

Dette overstyrer regler som finnes i cover.css, noe som gir oss en bredde på 400px på skjermene minst 992px bred. 400px er ikke helt sant for designet, men jeg finner de sanne dimensjonene og skriftstørrelsen litt små, så jeg vet om det!

Mens vi er her, vil jeg bare endre stilene, slik at vi bruker de avrundede hjørnene i denne medieforespørselen også. Fjern dem fra reglene du limte fra Illustrator, og bruk dem som dette i stedet:

@media (min bredde: 992px) .masthead, .mastfoot, .cover-container bredde: 400px;  .inner.cover border-radius: 10px; -moz-grense-radius: 10px; -webkit-grense-radius: 10px; 

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

... og dette på små skjermer:

Spesifikke målinger

Vi er ikke akkurat trofaste mot de nøyaktige dimensjonene som brukes i Illustrator-dokumentet, men det er ikke noe problem; nettet er flytende. Likevel kan vår container bruke noe polstring på bunnen, så la oss finne ut nøyaktig hvor mye Illustrator-designen vår sier at vi skal bruke.

Velg Måleverktøy i Illustrator (du finner den med Eyedropper verktøy) og dra markøren for å måle et hvilket som helst gitt område av designet. Vi kan se at polstringen 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

Vi har ganske mange stiler og objekter å håndtere her, og hvis alt ble oppkalt akkurat slik det burde være, kunne vi (i utgangspunktet) sende ut en stor haug med CSS fra Illustrator for å håndtere alt. Det er imidlertid noen uoverensstemmelser med objektet som navngir her (unngår det ville kreve noe nær design / utviklerkommunikasjon), og vi kan ende opp med noen ekstern kode som vi ikke trenger.

I stedet jobber du tålmodig fra element til element, velger hvert objekt og sender ut relevant CSS. Begynn med typografi, og la oss bare se hvor godt Illustrator gjør.

fonter

En av de første tingene du vil merke er at CSS for et hvilket som helst type objekt inkluderer: font-family: Open Sans;

Åpne sans er ikke en standard systemfont og vil ikke vises i en hvilken som helst nettleser hvor brukeren ikke har den installert. Du må derfor gå over til Google Fonts og ta tak i CSS-lenken for å trekke den inn i siden gjennom magien til webfonter.

knapper

Alt har gått ganske bra så langt, men da slår vi på knappene. Søkeknappen er egentlig ikke dårlig, men de tre knappene nedenfor har ikke blitt gitt objektnavn, så vi ser følgende i vårt CSS-egenskaper vindu:

Ingen CSS-kode ble generert. Hvis du vil opprette CSS for ikke-navngitte objekter, kan du enten oppgi objektet i lagpanelet eller aktivere alternativet 'Generer CSS for Unnamed Objects' i dialogboksen CSS Exporteringsalternativer.

Gå videre og åpne opp alternativene som vi diskuterte før, så sørg for at du har sjekket Generer CSS for Unnamed Objects. Alternativet ville være å gi våre knapper et navn, men enten er det bra her.

Nå, med alle våre valgte knapper, kan vi treffe Generer CSS og ha stilene utdata for oss. Dessverre vil Illustrator sende komplette stiler for hvert enkelt objekt, selv om de alle deler de samme reglene. Dette ser ut til å være tilfelle selv om vi bruker felles Grafiske stiler, Tegn stiler, Stikkord, eller til og med gi alle objekter samme navn! Rom for forbedring der, men vi kan i det minste gripe vanlige stiler og bruke dem på flere objekter manuelt.

Jeg kopierte stilene for søkeknappen, og brukte den på .btn, .btn: svever for å være sikker på at alle Bootstrap-stiler ble overskrevet. Jeg har også lagt til en grense: ingen; å bli kvitt Bootstraps blå ramme. 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. Tekstskyggene er ikke overholdt (de mangler gjennomsiktighet), gradienter på knappene er ikke riktige, og de mangler helt deres bokseskygger.

Hvorfor?

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

Det er herlig. Men ta en titt på hvor mange fyll, gradienter og skygger har gått i å bygge den:

Au. Det er ikke overraskende at Illustrator sa Nei. Selv grense-radiusen er blitt utelatt av ligningen fordi ting er blitt for komplekse.

Du tuller ikke ...

I stedet skal jeg bare bruke noen enkle stiler og sidestep det komplekse CSS (denne opplæringen handler om hva Illustrator kan gjøre for oss etter alt ...) Den endrede .btn stiler ser slik ut:

.btn, .btn: hover font-family: Open Sans; font-weight: bold; skriftstørrelse: 14px; farge: # AC4400; tekstskygge: 0px 1px 0px rgba (255, 255, 255, 0.3); bakgrunn: # FDDA2F; border-farge: # FDDA2F; grense-radius: 4px; 

Når det gjelder CSS-effektivitet, forlater dette alt mye å være ønsket, men vi jobber med det Illustrator gir oss for demonstrasjons skyld. Du ville være klokt å gå tilbake etterpå og rydde opp CSS, kanskje til og med med et verktøy som CSSLint.

ikoner

Det vi har generert frem til nå er ikke dårlig, så vi lar det være alene for nå. La oss være oppmerksom på knappens ikoner. Det er noen tilnærminger vi kan bruke her:

Eksporterer Bitmaps

Ved å velge hver grafikk, kan du generere CSS på omtrent samme måte som vi har før. Illustrator vil velge å eksportere komplekse veier som png-filer, og bruk disse bildene som bakgrunn for elementene dine.

Du får en gruppe eiendeler som skal brukes:

Men igjen, det er ikke perfekt, og vil utelate bestemte aspekter av designen og gi ut tvilsomme stiler i andre tilfeller, så denne tilnærmingen vil ta litt raffinering fra din side. Denne tilnærmingen tar heller ikke hensyn til å ta hensyn til netthinnen, noe som potensielt gir oss understandardgrafik på visse skjermer. Uansett, utgitt CSS for denne grafikken ser slik ut:

.bilde bakgrunnsbilde: url (image.png); bakgrunn-gjentak: ikke-gjenta; 

SVG

Min preferanse, som webdesigner, ville være å gå for SVG i dette tilfellet, noe som Illustrator blir veldig bra på.

Velg først et ikon, og kopier det deretter til utklippstavlen på vanlig måte (kommando + C). SVG-dataene for det objektet er nå tilgjengelig for å lime inn i en tekstredigerer (fantastisk). Åpne en ny fil i ditt webprosjekt, ring det "icon-contact.svg" og lim inn innholdet i utklippstavlen i det.

Du kan nå legge til SVG som et bilde direkte i oppslaget til index.html:

Hei der…

Det finnes mange måter du kan implementere SVG på på en nettside; via CSS, ved å først konvertere XML til base64, klistre det 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 fint, men i alle fall i moderne nettlesere, så vi holder fast ved det.

Gjenta prosessen for de andre ikonene, og ...

Vi er ferdige!

Med litt mer tweaking (jeg har lagt til noe polstring på skjemaelementet), bør du ha noe som ligner dette:

Ikke verst! Det gjenspeiler ikke Illustrator-grafikken 100%, men vurderer at vi hovedsakelig har stolt på stilutgangene fra Illustrator. Jeg tror vi kan være ganske fornøyd. Eventuelle ytterligere forbedringer må gjøres for hånd, Illustrator har gjort alt det kan for oss på dette punktet.

Har du noen tips som kan hjelpe Illustrator direkte å forbedre dette weboppsettet? Gi oss beskjed i kommentarene!