Scenariu: cineva vă dă un document Illustrator cu cel mai recent aspect web și este treaba dvs. să o convertiți în HTML și CSS. Să aruncăm o privire cum poți face asta.

Notă: Scopul acestui tutorial nu este de a recrea perfect designul pentru utilizarea web. În schimb, o vom folosi pentru a explora fluxurile de lucru și caracteristicile din cadrul Illustrator care ne ajută să facem acest lucru.

Fișierul Illustrator

Să începem să aruncăm o privire asupra documentului în cauză:

Vedeți modul în care a fost făcut aspectul nostru în acest tutorial

Este un aspect pentru o pagină de 404; o pagină care le spune utilizatorilor că ceea ce caută nu poate fi găsit și că ar trebui să încerce altceva. Putem vedea o rubrică, câteva paragrafe instructive, un formular de căutare și un buton, plus câteva butoane cu sfaturi de căutare în partea de jos.

Totul pare să plutească în centrul paginii, atât pe orizontală cât și pe verticală. Ea are un fundal galben, unele accente calde și umbre picătură aici și acolo. De unde începem?

E ușor!

Nu vom reinventa roata pentru asta, sa facem acest lucru la fel de usor cu putinta pentru noi insine. Illustratorul nu va lansa un pachet de HTML, CSS și JavaScript pentru acest lucru, și nici nu vom pierde timpul construind totul de la zero, așa că haideți să luăm o copie a Bootstrap pentru a da acestui proiect un start.

În prezent v3.1.1, după cum puteți vedea ...

Am descarcat Bootstrap, am desprins cateva din fisierele CSS si fontul de care nu avem nevoie, apoi am adaugat un fisier index.html pe baza modelului Cover by Mark Otto. Patru minute de clicuri pe mouse și am o pagină de bază care seamănă aproximativ cu ceea ce am urmat.

Poate nu arata mult, dar tocmai am salvat o tona de timp ...

Fișierele sursă pentru a continua din acest punct sunt disponibile în repo GitHub, în ​​folderul 1-punct de pornire.

Adăugarea marcajului

Următorul pas logic ar fi să adăugăm marcă structurală index.html (din nou, Illustrator nu va face asta pentru noi). Avem deja un container aliniat central, a div cu clase capacul interior:

 
404
 
Aceasta este baza de la care vom lucra. Toate pufurile au fost dezbrăcate.
 

Să adăugăm niște bucăți suplimentare în cadrul acestuia:

 
Eroare
 
404
 
Ne pare rău, pagina pe care o căutați nu există
 
Încercați să căutați pagina aici:
  
 
 Căutare  
 Căutare 
 
Sau
  inapoi acasa contactati-ne 

Am adăugat etichete de rubrică

și

, unele paragrafe și câteva marcări tipice de formare Bootstrap (puteți obține mai multe exemple din documentele Bootstrap). Forma are o clasă de form-inline, o clasă Bootstrap nativă care plasează elementele noastre de formă de-a lungul unei singure linii.

În sfârșit, chiar la sfârșit, veți vedea trei ancore, toate cu clasele BTN și BTN-primar. Acestea vor servi drept butoanele noastre. Iată ce avem în acest stadiu:

În acest moment nu am făcut nimic în ceea ce privește stilul, nu o singură linie de CSS, dar datorită lui Bootstrap ne-am construit efectiv pagina noastră, pregătită pentru lustruire.

Să lucrăm cu sculpturile

Altceva cu care ne va ajuta Bootstrap; sfaturile de instrument. Puteți citi mai multe despre diferitele opțiuni disponibile în documentele Bootstrap, dar pentru moment să adăugăm doar ingredientele necesare pentru codul HTML.

La fiecare buton se adaugă o clasă suplimentară bacsis folosit pentru a identifica orice are nevoie de o sugestie. Avem de asemenea nevoie de a titlu atribut care dictează ceea ce se va afișa de fapt în tooltip:

înapoi

bootstrap.min.js fișierul pe care deja îl tragem are toate JavaScript-urile necesare pentru sfaturile de instrument. De fapt, are multe alte jucării JavaScript, dintre care multe nu avem nevoie, deci într-un mediu de producție ar putea fi înțelept să includem doar lucrurile pe care le folosim. Bootstrap-urile sunt opt-in, deci nu funcționează automat, trebuie să le inițializăm. Să facem acest lucru în etichetele de script în partea de jos a paginii noastre, de sub numele de alt JavaScript:

Terminat. Acum avem acest lucru:

Diferență masivă!

Acum, să încercăm câteva stiluri

Am adăugat un al treilea fișier CSS la proiectul numit theme.css și am subliniat acest lucru din document . Dar ce adăugăm la foaia de stil?

Vom începe cu containerul principal. Selectați obiectul container în Illustrator și veți observa, în straturi panou, că a fost numit principal.

Acest lucru este relevant. Într-o situație în echipă, este înțelept să avem o înțelegere comună despre cum ar trebui să fie numite obiecte ca aceasta. Veți vedea de ce atunci când deschidem panoul CSS. 

Proprietăți CSS

Mergi la Fereastră> Proprietăți CSS pentru a dezvălui un panou cu același nume. Cu obiectul principal selectat, acesta va conține toate stilurile relevante pe care le putem lipi direct în foaia de stil. Veți vedea că aceste stiluri au fost aplicate selectorului .principal, așa cum a fost numit obiectul nostru.

Du-te și copiați ceea ce vedeți, apoi lipiți-l direct în theme.css fişier. Pentru ca aceste reguli să se aplice elementului nostru container, va trebui să schimbăm selectorul la ceea ce folosim de fapt (păstrând .principal selectorul este un pic riscant, deoarece acest lucru poate fi folosit în altă parte în site-ul nostru global). Schimbare .principal la .inner.cover și ar trebui să vedeți elementul dvs. de container să transforme un galben de aur minunat, cu colțuri rotunjite și chiar și o cutie de umbră, toate aplicate cu CSS cruce-browser-ul decent.

Dimensiunile CSS

Veți observa că regulile noastre CSS aici nu includ lățimi sau înălțimi. Ăsta este un lucru bun; Bootstrap se ocupă destul de mult de toate acestea, așa că chiar căutăm stiluri estetice. Prin schimbarea Proprietăți CSS Proprietăți de export am putea avea aici dimensiunile noastre, dar le vom lăsa afară.

Cu toate acestea, containerul nostru este destul de lat, datorită stilurilor deja aplicate, deci să ignorăm aceste dimensiuni cu următoarea interogare media:

@media (min-lățime: 992px) .masthead, .mastfoot, .cover-container width: 400px; 

Acest lucru suprascrie regulile găsite în cover.css, oferindu-ne o lățime de 400px pe ecrane cu o lățime de cel puțin 992px. 400px nu este exact adevărat pentru design, dar eu personal găsesc dimensiunile adevărate și dimensiunea font-ului puțin mic, așa că o veto!

În timp ce suntem aici, vreau doar să modific stilurile, astfel încât să aplicăm colțurile rotunjite și în această interogare media. Eliminați-le de regulile pe care le-ați lipit din Illustrator și le aplicați în felul acesta:

@media (min-lățime: 992px) .masthead, .mastfoot, .cover-container width: 400px;  .inner.coper border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Acum ar trebui să avem așa ceva pe ecrane mari:

... și pe ecranele mici:

Măsurători specifice

Nu suntem exact fideli dimensiunilor precise utilizate în documentul Illustrator, dar asta nu este o problemă; webul este fluid. Cu toate acestea, containerul nostru ar putea să utilizeze niște cearceafuri în partea de jos, deci să aflăm exact cât proiectul nostru de Illustrator spune că ar trebui să folosim.

Selectează Măsurați instrumentul în Illustrator (îl veți găsi cu Instrumentul pentru picant) și trageți cursorul pentru a măsura orice zonă dată a designului. Putem vedea că umplutura pe care o urmăm este de 25 de pixeli, deci să aplicăm manual stilul nostru.

.inner.cover padding-bottom: 25px;

Mai bine

Celelalte stiluri

Avem o mulțime de stiluri și obiecte pentru a rezolva aici și, dacă totul era denumit exact așa cum ar fi, am putea (în principiu) să scoatem o grămadă de CSS de la Illustrator pentru a rezolva toate acestea. Cu toate acestea, există unele discrepanțe cu denumirea obiectului aici (evitând faptul că ar necesita o comunicare apropiată de designer / dezvoltator) și am putea ajunge cu niște coduri străine pe care nu avem nevoie.

În schimb, lucrați cu răbdare de la element la element, selectând fiecare obiect și afișând CSS-ul relevant. Începeți cu tipografia și să vedem cât de bine are Illustrator.

Fonturi

Unul dintre primele lucruri pe care le veți observa este că CSS pentru orice obiect de tip include: font-family: Open Sans;

Open sans nu este un font standard al sistemului și nu va fi afișat în niciun browser unde utilizatorul nu are instalat. Prin urmare, va trebui să vă îndreptați către Fonturile Google și să luați legătura CSS pentru ao trage în pagină prin magia webfonturilor.

Butoane

Totul a mers destul de bine până acum, dar am lovit butoanele. Butonul de căutare nu este de fapt rău, dar cele trei butoane de mai jos nu au primit nume de obiecte, așa că vedem următoarele în fereastra CSS Properties:

Nu a fost generat niciun cod CSS. Pentru a crea CSS pentru obiecte anonime, fie denumiți obiectul în panoul straturilor, fie activați opțiunea "Generați CSS pentru obiecte anonime" în dialogul CSS Export Options.

Continuați și deschideți opțiunile așa cum am discutat înainte, apoi asigurați-vă că ați verificat Generați CSS pentru obiecte fără nume. Alternativa ar fi să-i dăm numele butoanele, dar oricare dintre opțiuni este bună aici.

Acum, cu toate butoanele noastre selectate, putem lovi Generați CSS și au stiluri de ieșire pentru noi. Din păcate, Illustrator va scoate stiluri complete pentru fiecare obiect individual, chiar dacă toate au aceleași reguli. Acest lucru pare să fie cazul chiar dacă folosim comun Stiluri grafice, Stiluri de caractere, Stiluri de paragrafe, sau chiar dau toate obiectele acelasi nume! Cameră pentru îmbunătățire acolo, dar putem cel puțin să prindem stilurile comune și să le aplicăm manual mai mult obiectelor multiple.

Am copiat stilurile pentru butonul de căutare și apoi l-am aplicat .btn, .btn: hover pentru a vă asigura că toate stilurile Bootstrap au fost suprascrise corespunzător. Am adăugat, de asemenea, a frontieră: nici una; pentru a scăpa de granița albastră a lui Bootstrap. Să vedem ce ne face asta!

Nu e rău, dar nu perfectă

Acest lucru nu este rău, dar este un drum destul de perfect perfect. Umbrele de text nu au fost respectate (lipsesc transparența), gradientele de pe butoane nu sunt corecte și le lipsesc complet umbrele.

De ce?

Pe scurt, exportul Illustrator CSS nu este încă pregătit pentru acest tip de structură complexă (pentru a fi corect, este foarte complex). Să ne uităm la butonul de căutare pe care vrem să-l recreăm:

Este minunat. Dar aruncați o privire asupra numărului de umpluturi, gradienți și umbre care au fost construite:

Ouch. Nu este deloc surprinzător faptul că Illustrator a spus Nu. Chiar și raza de graniță a fost lăsată în afara ecuației deoarece lucrurile au devenit prea complexe.

Nu glumești ...

În schimb, am să aplice doar câteva stiluri simple și să împiedic complexul CSS (acest tutorial este despre ceea ce Illustrator poate face pentru noi după toate ...) .BTN stilurile arată astfel:

.btn, .btn: mutați font-family: Open Sans; font-weight: bold; font-size: 14px; culoare: # AC4400; text-shadow: 0px 1px 0px rgba (255, 255, 255, 0.3); fundal: # FDDA2F; culoarea frontală: # FDDA2F; raza de graniță: 4px; 

În ceea ce privește eficiența CSS, acest lucru lasă mult de dorit, dar lucrăm cu ceea ce ne dă Illustrator de dragul demonstrației. Ar fi înțelept să vă întoarceți după aceea și să curățați CSS-ul, poate chiar folosind un instrument precum CSSLint.

icoane

Ceea ce am generat până acum nu este rău, așa că o să lăsăm în pace acum. Să ne îndreptăm atenția asupra pictogramelor butoanelor. Există câteva abordări pe care le putem folosi aici:

Exportarea fișierelor bitmap

Prin selectarea fiecărui grafic, puteți genera CSS în același mod pe care l-am avut înainte. Illustrator va opta pentru a exporta căi complexe ca fișiere png, apoi utiliza acele imagini ca fundaluri pentru elementele dvs..

Vi se va da un grup de active pentru a utiliza:

Dar, din nou, nu este perfectă și va omite anumite aspecte ale designului, scoțând stiluri discutabile în alte cazuri, astfel că această abordare va necesita o anumită rafinare din partea dvs. De asemenea, această abordare nu reușește să țină cont de afișajele cu retină, oferindu-ne posibilitatea de a furniza grafică sub-standard pe anumite ecrane. Oricum, CSS-ul de ieșire pentru aceste imagini arată astfel:

.imagine fundal-imagine: url (imagine.png); background-repeat: nu-repeta; 

SVG

Preferința mea, în calitate de web designer, ar fi să merg la SVG în acest caz, ceea ce Illustrator este foarte bun la.

Mai întâi, selectați o pictogramă, apoi copiați-o în clipboard în mod obișnuit (comanda + C). Datele SVG pentru obiectul respectiv sunt acum disponibile pentru inserarea într-un editor de text (uimitor). Deschideți un fișier nou în proiectul dvs. Web, numiți-l "icon-contact.svg" și lipiți conținutul clipboard-ului în el.

Acum puteți adăuga SVG ca imagine direct în marcarea index.html:

Salutare…

Există tot felul de moduri în care puteți implementa SVG într-o pagină web; prin intermediul CSS, transformând mai întâi XML în base64, adăugându-l în linie de marcare, alegerea ta este a ta (pentru mai multe informații, aruncă o privire la fișierele SVG: de la Illustrator la Web). Abordarea noastră funcționează bine, totuși, cel puțin în browserele moderne, așa că vom rămâne cu ea.

Repetați procesul pentru celelalte pictograme și ...

Au fost efectuate!

Cu un pic mai mult de tweaking (am adăugat unele padding la elementul de formă), ar trebui să aveți ceva care seamănă cu acest lucru:

Nu-i rău! Acesta nu reflectă 100% graficul Illustrator, dar având în vedere că ne-am bazat în principal pe realizarea stilurilor de la Illustrator, cred că putem fi destul de mulțumiți. Orice îmbunătățiri ulterioare vor trebui făcute manual, Illustrator a făcut tot ce ne poate ajuta în acest moment.

Aveți sfaturi care ar putea ajuta Illustrator să îmbunătățească în mod direct acest aspect web? Spuneți-ne în comentariile!