Scenario: någon händer dig ett Illustrator-dokument med deras senaste webblayout och det är ditt jobb att konvertera det till fungerande HTML och CSS. Låt oss ta en titt på hur du kan göra det.

Notera: Syftet med denna handledning är inte att perfekt återskapa designen för webbanvändning. I stället ska vi använda den för att utforska arbetsflöden och funktioner inom Illustrator som hjälper oss att göra det.

Illustratorfilen

Låt oss börja med att titta på dokumentet i fråga:

Se hur vårt exempellayout gjordes i denna handledning

Det är en layout för en 404 sida; en sida som berättar för användarna att vad som helst de inte letar efter och att de kanske borde prova något annat. Vi kan se en rubrik, några instruktionsposter, ett sökformulär och en knapp samt några knappar med verktygstips längst ner.

Det hela verkar flyta mitt i sidan, både horisontellt och vertikalt. Den har en gul bakgrund, några varma accenter och droppskuggor här och där. Var börjar vi?

Lätt gör det!

Vi kommer inte att återuppfinna hjulet för detta, låt oss göra det så enkelt som möjligt på oss själva. Illustratorn kommer inte att skriva ut ett snyggt paket med HTML, CSS och JavaScript för detta, och vi kommer inte att slösa bort vår tid att bygga allt från början, så låt oss gå och ta en kopia av Bootstrap för att ge projektet ett kickstart.

För närvarande v3.1.1, som du kan se ...

Jag laddade ner Bootstrap, tog bort några av CSS och fontfiler som vi inte behöver, sedan lade till en index.html-fil baserat på Cover-mallen av Mark Otto. Fyra minuter med musklickning och jag har själv en grundläggande sida som ungefär liknar vad vi är efter.

Det kanske inte ser ut som mycket, men vi har bara sparat massor av tid ...

Källfiler för att fortsätta från denna punkt finns i GitHub repo, i mapp 1-startpunkten.

Lägga till Markup

Nästa logiska steg skulle vara att lägga till strukturellt markup till vårt index.html (igen, Illustrator kommer inte att göra det för oss). Vi har redan en centralt anpassad behållare, a div med klasser inre lock:

 
404
 
Detta är basen från vilken vi ska arbeta. Alla fluffar har tagits bort.
 

Låt oss lägga till några extra bitar inom det:

 
Fel
 
404
 
Tyvärr, den sida du letade efter existerar inte
 
Försök att söka efter sidan här:
  
 
 Sök  
 Sök 
 
Eller
  hemma kontakta oss 

Vi har lagt till rubrikstaggar

och

, några stycken, och vissa typiska uppstartsformformulär (du kan ta fler exempel från Bootstrap-dokumenten). Formen har en klass av form inline, en inbyggd Bootstrap-klass som placerar våra formelement längs en rad.

Slutligen, höger i slutet, ser du tre ankare, alla med klasserna BTN och BTN-primär. Dessa kommer att fungera som våra knappar. Här är vad vi har på detta stadium:

Vid denna tidpunkt har vi gjort ingenting när det gäller styling, inte en enda linje med CSS, men tack vare Bootstrap har vi effektivt byggt vår sida, redo för polering.

Låt oss få verktygetips att fungera

Något annat som Bootstrap kommer att hjälpa oss med; verktygetips. Du kan läsa mer om de olika alternativen som finns tillgängliga i Bootstrap docs, men för nu låt oss bara lägga till nödvändiga ingredienser i vår HTML.

Till varje knapp lägger vi till en extra klass tips brukade identifiera något som behöver ett verktygstips. Vi behöver också en titel attribut som dikterar vad som faktiskt kommer att visas inom verktygstipset:

tillbaka

De bootstrap.min.js fil som vi redan har tagit in har alla JavaScript som behövs för verktygstipsen. Det har faktiskt massor av andra JavaScript-leksaker, många av vilka vi inte ens behöver, så i en produktionsmiljö kan det vara klokt att bara inkludera de saker vi använder. Bootstrap-verktygstips är inloggade, så de fungerar inte automagiskt, vi måste initiera dem. Låt oss göra det inom skriptetiketter längst ner på vår sida, där vi har kallat den andra JavaScript:

Gjort. Vi har nu följande:

Massiv skillnad!

Nu ska vi prova några stilar

Jag har lagt till en tredje CSS-fil till projektet som heter theme.css och har pekat på det från dokumentet . Men vad lägger vi till stilarket?

Vi ska börja med huvudbehållaren. Välj behållarobjektet i Illustrator och du märker, i Skikten panel, att det har blivit namngivet huvud.

Detta är relevant. I en lagssituation är det klokt att ha en gemensam förståelse för hur saker som detta ska namnges. Du kommer att se varför när vi öppnar CSS-panelen. 

CSS Egenskaper

Gå till Fönster> CSS Egenskaper för att avslöja en panel med samma namn. Med vårt huvudobjekt väljs det här med alla relevanta stilar som vi kan klistra in direkt i vårt stilark. Du ser att dessa stilar har applicerats på väljaren .huvud, precis som vårt objekt har fått namnet.

Fortsätt och kopiera det du ser och klistra in det direkt i theme.css fil. För att dessa regler ska gälla för vårt behållarelement måste vi ändra väljaren till vad vi faktiskt använder (håller .huvud väljaren är lite riskabel eftersom vi kan hitta det som används annorstädes på vår övergripande webbplats). Byta .huvud till .inner.cover och du bör se ditt behållarelement vända en härlig gyllen gul med rundade hörn och till och med en boxskugga, allt applicerad med anständigt cross-browser CSS.

CSS Dimensioner

Du märker att våra CSS-regler här inte innehåller några bredder eller höjder. Detta är en bra sak; Bootstrap tar ganska mycket hand om allt det, så vi letar bara efter estetiska stilar. Genom att ändra CSS Egenskaper Exportalternativ Vi kan få våra dimensioner inkluderade här, men vi lämnar dem ut.

Vår behållare är lite bred, men på grund av att stilar redan har tillämpats, så låt oss åsidosätta dessa dimensioner med följande mediefråga:

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

Detta överstyrer regler som finns i cover.css, vilket ger oss en bredd på 400px på skärmar som är minst 992px breda. 400px är inte exakt sant för designen, men jag hittar personligen de sanna dimensionerna och typsnittstorleken lite liten, så jag vetoar det!

Medan vi är här vill jag bara ändra stilar så att vi tillämpar de avrundade hörnen inom denna mediefråga också. Ta bort dem från de regler som du klistrade in från Illustrator och tillämpa dem så här istället:

@media (min bredd: 992px) .masthead, .mastfoot, .cover-container width: 400px;  .inner.cover border-radius: 10px; -moz-gränsen-radien: 10px; -webkit-gräns-radie: 10px; 

Nu borde vi ha något liknande på stora skärmar:

... och det här på små skärmar:

Specifika mätningar

Vi är inte exakt trogna mot de exakta dimensionerna som används i Illustrator-dokumentet, men det är inte ett problem. nätet är flytande. Ändå kan vår behållare använda lite vaddering på botten, så låt oss ta reda på exakt hur mycket vår Illustrator-design säger att vi ska använda.

Välj Mätverktyg i Illustrator (du hittar den med Eyedropper verktyg) och dra markören för att mäta ett visst område i konstruktionen. Vi kan se att polstringen vi är efter är 25px, så låt oss tillämpa det manuellt på våra stilar.

.inner.cover padding-bottom: 25px;

Bättre

Övriga stilar

Vi har ett stort antal stilar och objekt att hantera här och om allt namnges exakt som det borde, kunde vi (i princip) mata ut en stor hög av CSS från Illustrator för att hantera allt. Det finns emellertid vissa avvikelser med objektnamnet här (för att undvika att det skulle behöva någon nära designer / utvecklarekommunikation) och vi kanske slutar med någon extern kod som vi inte behöver.

Istället arbeta dig tålmodigt från element till element, välja varje objekt och mata ut relevant CSS. Börja med typografi och låt oss bara se hur bra Illustrator gör.

typsnitt

En av de första sakerna du märker är att CSS för något typobjekt innehåller: font-family: Open Sans;

Open sans är inte ett standard systemfont och kommer inte att visas i någon webbläsare där användaren inte har den installerad. Du måste därför gå över till Google-teckensnitt och ta tag i CSS-länken för att dra den in i sidan via magi webfonter.

Knappar

Allt har gått ganska bra hittills, men då slår vi på knapparna. Sökningsknappen är egentligen inte dålig, men de tre knapparna nedan har inte fått objektnamn, så vi ser följande i vårt CSS-fönstret:

Ingen CSS-kod skapades. För att skapa CSS för obemannade objekt, antingen namnge objektet i lagerpanelen eller aktivera alternativet "Generera CSS för Unnamed Objects" i dialogrutan CSS Export Options.

Gå vidare och öppna alternativen som vi diskuterade förut och se till att du har kontrollerat Generera CSS för Unnamed Objects. Alternativet är att ge våra knappar ett namn, men alternativet är bra här.

Nu, med alla våra knappar valda, kan vi träffa Generera CSS och har de stilar som utmatas för oss. Tyvärr kommer Illustrator att utföra kompletta format för varje enskilt objekt, även om de alla delar samma regler. Detta verkar vara fallet även om vi använder vanliga Grafiska stilar, Teckenformat, Styckeformat, eller ens ge alla föremål samma namn! Rum för förbättring där, men vi kan åtminstone ta tag i vanliga stilar och tillämpa dem på flera objekt manuellt.

Jag kopierade stilar för sökknappen och applicerade den sedan på .btn, .btn: svävar för att se till att alla Bootstrap-stilar var lämpligt skrivna över. Jag tillade också a gränsen: ingen; att bli av med Bootstraps blågräns. Låt oss se vad som får oss!

Inte illa, men inte perfekt

Det här är inte dåligt, men det är ett rättvist sätt helt perfekt. Textskuggorna har inte följts (de saknar genomskinlighet), gradienterna på knapparna är inte korrekta och de saknar helt sina boxskuggor.

Varför?

Kort sagt, Illustrator CSS export är ännu inte klar för den här typen av komplexa strukturer (för att vara rättvis, det är väldigt komplext). Låt oss titta på sökknappen som vi syftar till att återskapa:

Det är härligt. Men ta en titt på hur många fyllningar, gradienter och skuggor har gått in i att bygga den:

Aj. Det är knappast förvånande att Illustrator sa Nej. Till och med gränsradien har lämnats ut ur ekvationen eftersom sakerna har blivit för komplexa.

Du skojar inte ...

Istället kommer jag bara att tillämpa några enkla stilar och sidostepa den komplexa CSS (den här handledningen handlar om vad Illustrator kan göra för oss trots allt ...) Den ändrade .BTN stilar ser så här ut:

.btn, .btn: svep font-family: Open Sans; font-weight: bold; typsnittstorlek: 14px; färg: # AC4400; textskugga: 0px 1px 0px rgba (255, 255, 255, 0,3); bakgrund: # FDDA2F; kantfärg: # FDDA2F; gränsstråle: 4px; 

När det gäller CSS-effektivitet lämnar allt mycket att önska, men vi arbetar med vad Illustrator ger oss för demonstrationens skull. Du skulle vara klokt att gå tillbaka efteråt och städa upp CSS, kanske till och med med hjälp av ett verktyg som CSSLint.

ikoner

Vad vi hittills har genererat är inte dåligt, så vi lämnar det ensamt för nu. Låt oss uppmärksamma knappikonen. Det finns några metoder vi kan använda här:

Exportera bitmappar

Genom att välja varje grafik kan du generera CSS på ungefär samma sätt som vi tidigare. Illustrator väljer att exportera komplexa banor som png-filer, använd sedan dessa bilder som bakgrund för dina element.

Du får en grupp tillgångar att använda:

Men igen är det inte perfekt, och kommer att utelämna vissa aspekter av designen, utfärda tvivelaktiga stilar i andra fall, så detta tillvägagångssätt kommer att ta lite raffinering från din sida. Detta tillvägagångssätt misslyckas också med att ta hänsyn till näthinnan, vilket möjligen ger oss understandardgrafik på vissa skärmar. Hur som helst, den utmatade CSS för den här grafiken ser ut så här:

.bild background-image: url (image.png); background-repeat: no-repeat; 

SVG

Min preferens, som webbdesigner, skulle vara att gå till SVG i det här fallet, något som Illustrator blir mycket bra på.

Välj först en ikon och kopiera den till utklippstavlan på vanligt sätt (kommando + C). SVG-data för det objektet är nu tillgängligt för att klistra in i en textredigerare (fantastiskt). Öppna en ny fil i ditt webbprojekt, kalla det "icon-contact.svg" och klistra in klipppappersinnehållet i det.

Du kan nu lägga till SVG som en bild direkt i markeringen av ditt index.html:

Hej där…

Det finns olika sätt att implementera SVG på en webbsida. via CSS, genom att först konvertera XML till base64, klistra in den i din markup inline, valet är ditt (ta en titt på SVG-filer: Från Illustrator till webben för mer information). Vårt tillvägagångssätt fungerar bara bra men, åtminstone i moderna webbläsare, så vi klarar oss av det.

Upprepa processen för de andra ikonerna, och ...

Var gjort!

Med lite mer tweaking (jag har lagt till en del vadderar till formelementet) borde du ha något som liknar detta:

Inte dåligt! Det återspeglar inte 100% Illustrator-grafiken, men med tanke på att vi förlitar oss främst på Style Output av Illustrator tror jag att vi kan vara ganska nöjda. Eventuella förbättringar måste göras för hand, Illustrator har gjort allt det kan för oss vid denna tidpunkt.

Har du några tips som kan hjälpa Illustrator att förbättra webbsidan direkt? Låt oss veta i kommentarerna!