Scenario: iemand overhandigt u een Illustrator-document met de nieuwste weblay-out en het is uw taak om het te converteren naar werkende HTML en CSS. Laten we eens kijken hoe je dat kunt doen.

Notitie: Het doel van deze zelfstudie is niet om het ontwerp voor webgebruik perfect na te maken. In plaats daarvan gaan we het gebruiken om workflows en functies binnen Illustrator te verkennen die ons daarbij helpen.

Het Illustrator-bestand

Laten we beginnen met het document in kwestie te bekijken:

Bekijk hoe onze voorbeeldlay-out werd gemaakt in deze zelfstudie

Het is een lay-out voor een 404-pagina; een pagina die gebruikers vertelt dat wat ze zoeken niet kan worden gevonden en dat ze misschien iets anders moeten proberen. We kunnen een kop zien, enkele instructieparagrafen, een zoekformulier en een knop, plus enkele knoppen met knopinfo helemaal onderaan.

Het geheel lijkt in het midden van de pagina te zweven, zowel horizontaal als verticaal. Het heeft een gele achtergrond, enkele warme accenten en laat hier en daar slagschaduwen vallen. Waar beginnen we?

Rustig aan!

We zullen dit wiel niet opnieuw uitvinden, laten we dit zo eenvoudig mogelijk maken voor onszelf. Illustrator gaat hiervoor geen keurig HTML, CSS en JavaScript uitvoeren, en we zullen ook geen tijd verspillen met het bouwen van alles, dus laten we een kopie van Bootstrap gaan maken om dit project een kick-start te geven.

Momenteel v3.1.1, zoals u kunt zien ...

Ik heb Bootstrap gedownload, een deel van de CSS- en lettertypebestanden ontdaan die we niet nodig hebben en heb toen een index.html-bestand toegevoegd op basis van de Cover-sjabloon door Mark Otto. Vier minuten muisklikken en ik heb zelf een basispagina die ongeveer lijkt op wat we zoeken.

Het ziet er misschien niet zo uit, maar we hebben net een hoop tijd gespaard ...

Bronbestanden om vanaf dit punt verder te gaan zijn beschikbaar in de GitHub-repro, in het map 1-startpunt.

Markering toevoegen

De volgende logische stap zou zijn om structurele markup toe te voegen aan onze index.html (nogmaals, Illustrator zal dat niet voor ons doen). We hebben al een centraal uitgelijnde container, div met lessen innerlijke dekking:

 
404
 
Dit is de basis van waaruit we zullen werken. Alle pluis is eruit gehaald.
 

Laten we daar wat extra stukjes aan toevoegen:

 
Fout
 
404
 
Sorry, de pagina waarnaar u zocht bestaat niet
 
Probeer hier naar de pagina te zoeken:
  
 
 Zoeken  
 Zoeken 
 
Of
  Neem contact op met ons thuis 

We hebben heading-tags toegevoegd

en

, sommige paragrafen, en enkele typische Bootstrap-vormmarkup (u kunt meer voorbeelden uit de Bootstrap-documenten halen). Het formulier heeft een klasse van -vorm inline, een native Bootstrap-klasse die onze formulierelementen op één regel plaatst.

Eindelijk, aan het einde, zie je drie ankers, allemaal met de klassen BTN en btn-primaire. Deze zullen dienen als onze knoppen. Dit is wat we in deze fase hebben:

Op dit punt hebben we niets gedaan in termen van styling, geen enkele CSS-lijn, maar dankzij Bootstrap hebben we onze pagina effectief gebouwd, klaar om op te poetsen.

Laten we de tooltips werken

Iets anders waar Bootstrap ons mee gaat helpen; de tooltips. U kunt meer lezen over de verschillende opties die beschikbaar zijn in de Bootstrap-documenten, maar laten we voor nu gewoon de benodigde ingrediënten toevoegen aan onze HTML.

Aan elke knop voegen we een extra klas toe tip gebruikt om iets te identificeren dat een tooltip nodig heeft. We hebben ook een titel kenmerk dat dicteert wat er daadwerkelijk in de knopinfo wordt weergegeven:

terug

De bootstrap.min.js bestand waar we al aan trekken, heeft al het JavaScript nodig voor de tooltips. In feite heeft het heel veel ander JavaScript-speelgoed, waarvan vele we zelfs niet nodig hebben, dus in een productieomgeving is het misschien verstandig om alleen de dingen op te nemen die we gebruiken. Bootstrap-tooltips zijn opt-in, dus ze werken niet automatisch, we moeten ze initialiseren. Laten we dat doen met scripttags onderaan onze pagina, waar we het andere JavaScript hebben genoemd:

Gedaan. We hebben nu dit:

Enorm verschil!

Laten we nu een paar stijlen proberen

Ik heb een derde CSS-bestand toegevoegd aan het project genaamd theme.css en hebben ernaar verwezen vanuit het document . Maar wat voegen we toe aan het stylesheet?

We beginnen met de hoofdcontainer. Selecteer het containerobject in Illustrator en u zult merken in de Lagen paneel, dat het een naam heeft gekregen hoofd.

Dit is relevant. In een teamsituatie is het verstandig om een ​​gemeenschappelijk begrip te hebben over hoe objecten als deze een naam moeten krijgen. U zult zien waarom wanneer wij het CSS-paneel openen. 

CSS-eigenschappen

Ga naar Venster> CSS-eigenschappen om een ​​paneel met dezelfde naam te onthullen. Als ons hoofdobject is geselecteerd, bevat dit alle relevante stijlen die we rechtstreeks in onze stylesheet kunnen plakken. Je zult zien dat deze stijlen zijn toegepast op de selector .hoofd, net zoals ons object is genoemd.

Ga je gang en kopieer wat je ziet, plak het direct in de theme.css het dossier. Om ervoor te zorgen dat deze regels van toepassing zijn op ons containerelement, moeten we de selector wijzigen in wat we daadwerkelijk gebruiken (het bijhouden van de .hoofd selector is een beetje riskant, omdat we dit misschien elders in onze algemene site vinden). Verandering .hoofd naar .inner.cover en je zou je containerelement prachtig goudgeel moeten zien draaien, met afgeronde hoeken en zelfs een doosschaduw, allemaal aangebracht met fatsoenlijke cross-browser CSS.

CSS-dimensies

U zult merken dat onze CSS-regels hier geen breedte of hoogte bevatten. Dit is iets goeds; Bootstrap zorgt daar vrijwel allemaal voor, dus we zijn eigenlijk gewoon op zoek naar esthetische stijlen. Door de CSS-eigenschappen Exportopties we zouden onze dimensies hierin kunnen opnemen, maar we zullen ze weglaten.

Onze container is echter een beetje breed, vanwege de reeds toegepaste stijlen, dus laten we die dimensies negeren met de volgende mediaquery:

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

Dit heft de regels op die gevonden worden in cover.css en geeft ons een breedte van 400px op schermen van minimaal 992px breed. 400 px is niet helemaal waar aan het ontwerp, maar ik vind persoonlijk de ware afmetingen en de lettergrootte een beetje klein, dus ik zeg het veto!

Terwijl we hier zijn, wil ik alleen de stijlen aanpassen, zodat we ook de afgeronde hoeken toepassen in deze mediaquery. Verwijder ze uit de regels die u in Illustrator hebt geplakt en pas ze als volgt toe:

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

Nu moeten we zoiets hebben op grote schermen:

... en dit op kleine schermen:

Specifieke metingen

We zijn niet precies trouw aan de precieze dimensies die in het Illustrator-document worden gebruikt, maar dat is geen probleem; het web is vloeibaar. Toch kan onze container wat opvulling aan de onderkant gebruiken, dus laten we erachter komen hoeveel we volgens ons Illustrator-ontwerp moeten gebruiken.

Selecteer de Meet gereedschap in Illustrator (je vindt het bij de Pipet gereedschap) en sleep de cursor om een ​​bepaald gebied van het ontwerp te meten. We kunnen zien dat de opvulling die we zoeken 25px is, dus laten we dat handmatig toepassen op onze stijlen.

.inner.cover padding-bottom: 25px;

Beter

De andere stijlen

We hebben nogal wat stijlen en objecten om mee om te gaan en als alles precies zo zou zijn zoals het zou moeten zijn, zouden we (in principe) een enorme stapel CSS van Illustrator kunnen produceren om alles te verwerken. Er zijn echter enkele discrepanties met de naamgeving van het object hier (om te voorkomen dat daarvoor een nauwe communicatie met ontwerper / ontwikkelaar nodig zou zijn) en we kunnen eindigen met een externe code die we niet nodig hebben.

Werk in plaats daarvan geduldig van element naar element, selecteer elk object en voer de relevante CSS uit. Begin met typografie en laten we gewoon zien hoe goed Illustrator werkt.

fonts

Een van de eerste dingen die je zult opvallen, is dat de CSS voor elk type object het volgende bevat: font-family: Open Sans;

Open sans is geen standaardsysteemlettertype en wordt niet weergegeven in browsers waarin de gebruiker dit niet heeft geïnstalleerd. U moet daarom naar Google Fonts gaan en de CSS-link gebruiken om het naar de pagina te trekken via de magie van webfonts.

Toetsen

Alles is tot nu toe redelijk goed gegaan, maar toen klikten we op de knoppen. De zoekknop is eigenlijk niet slecht, maar de drie onderstaande knoppen hebben geen objectnamen gekregen, dus we zien het volgende in ons CSS-eigenschappenvenster:

Er is geen CSS-code gegenereerd. Als u CSS voor naamloze objecten wilt maken, geeft u het object de naam op in het deelvenster Lagen of schakelt u 'Genereer CSS voor naamloze objecten' in het dialoogvenster CSS-exportopties in..

Ga je gang en open de opties zoals we eerder hebben besproken en zorg er vervolgens voor dat je hebt gecontroleerd Genereer CSS voor Naamloos Objects. Het alternatief zou zijn om onze knoppen een naam te geven, maar beide opties zijn prima hier.

Nu, met al onze knoppen geselecteerd, kunnen we slaan Genereer CSS en hebben de uitvoer van stijlen voor ons. Helaas voert Illustrator volledige stijlen uit voor elk afzonderlijk object, zelfs als ze allemaal dezelfde regels delen. Dit lijkt het geval te zijn, zelfs als we gemeenschappelijk gebruiken Grafische stijlen, Tekenstijlen, Alineastijlen, of geef zelfs alle objecten dezelfde naam! Ruimte voor verbetering daar, maar we kunnen op zijn minst veelgebruikte stijlen vasthouden en ze handmatig op meerdere objecten toepassen.

Ik heb de stijlen voor de zoekknop gekopieerd en daarna toegepast .btn, .btn: hover om zeker te zijn dat alle Bootstrap-stijlen geschikt werden overschreven. Ik heb ook een toegevoegd rand: geen; om de blauwe rand van Bootstrap kwijt te raken. Laten we eens kijken wat dat ons brengt!

Niet slecht, maar niet perfect

Dit is niet slecht, maar het is een goede manier om perfect te zijn. Er is niet voldaan aan de tekstschaduwen (ze missen transparantie), de hellingen op de knoppen kloppen niet helemaal en ze missen hun doosschaduwen volledig.

Waarom?

Kortom, Illustrator CSS-export is nog niet klaar voor dit soort complexe structuren (om eerlijk te zijn, het is erg complex). Laten we naar de zoekknop kijken die we willen recreëren:

Het is prachtig. Maar kijk eens hoeveel vullingen, hellingen en schaduwen er zijn gebruikt om het te bouwen:

Ouch. Dat is nauwelijks verrassend, zei Illustrator Nee. Zelfs de grensradius is buiten de vergelijking gelaten omdat dingen te ingewikkeld zijn geworden.

Je maakt geen grapje ...

In plaats daarvan ga ik gewoon een aantal eenvoudige stijlen toepassen en de complexe CSS omzeilen (deze tutorial gaat over wat Illustrator voor ons alsnog kan doen ...) De gewijzigde .BTN stijlen zien er als volgt uit:

.btn, .btn: hover font-family: Open Sans; lettertype: vet; lettergrootte: 14 px; kleur: # AC4400; text-shadow: 0px 1px 0px rgba (255, 255, 255, 0.3); achtergrond: # FDDA2F; randkleur: # FDDA2F; grensradius: 4px; 

In termen van CSS-efficiëntie laat dit alles te wensen over, maar we werken met wat Illustrator ons geeft omwille van de demonstratie. Het zou verstandig zijn om achteraf terug te gaan en de CSS op te ruimen, misschien zelfs met behulp van een tool zoals CSSLint.

Icons

Wat we tot nu toe hebben gegenereerd is niet slecht, dus laten we het voorlopig met rust. Laten we onze aandacht richten op de knoppictogrammen. Er zijn een paar manieren om dit te doen:

Bitmaps exporteren

Door elke afbeelding te selecteren, kunt u CSS genereren op vrijwel dezelfde manier als voorheen. Illustrator zal ervoor kiezen om complexe paden als png-bestanden te exporteren en vervolgens die afbeeldingen als achtergrond voor uw elementen te gebruiken.

Je krijgt een groep te gebruiken middelen om te gebruiken:

Maar nogmaals, het is niet perfect en zal bepaalde aspecten van het ontwerp weglaten, en in andere gevallen dubieuze stijlen produceren, dus deze aanpak zal enige verfijning van jouw kant vereisen. Deze benadering houdt ook geen rekening met retina-displays, waardoor we op bepaalde schermen mogelijk sub-standaard graphics krijgen. Hoe dan ook, de uitgevoerde CSS voor deze grafische afbeeldingen ziet er als volgt uit:

.afbeelding background-image: url (image.png); achtergrondherhaling: geen herhaling; 

SVG

Mijn voorkeur, als webdesigner, zou zijn om voor SVG te gaan in dit geval, iets waar Illustrator erg goed in wordt.

Selecteer eerst een pictogram en kopieer het op de gebruikelijke manier naar het klembord (opdracht + C). De SVG-gegevens voor dat object kunnen nu in een teksteditor worden geplakt (verbluffend). Open een nieuw bestand in uw webproject, noem het "icon-contact.svg" en plak de inhoud van het klembord erin.

U kunt nu die SVG als een afbeelding rechtstreeks toevoegen aan de markup van uw index.html:

Hallo daar…

Er zijn allerlei manieren waarop u SVG kunt implementeren in een webpagina; via CSS, door eerst de XML in base64 te converteren, deze in uw opmaak inline te plakken, de keuze is aan u (kijk eens naar SVG-bestanden: van Illustrator naar het web voor meer informatie). Onze aanpak werkt echter prima, tenminste in moderne browsers, dus we houden ons eraan.

Herhaal het proces voor de andere pictogrammen en ...

Werden gedaan!

Met een beetje meer tweaken (ik heb wat opvulling toegevoegd aan het formulierelement) zou je iets moeten hebben dat er zo uitziet:

Niet slecht! Het is niet 100% een weerspiegeling van de Illustrator-afbeelding, maar aangezien we voornamelijk op stijlen van Illustrator hebben vertrouwd, denk ik dat we redelijk tevreden kunnen zijn. Alle verdere verbeteringen moeten met de hand worden aangebracht, Illustrator heeft op dit moment alles gedaan wat we konden doen.

Heeft u tips die Illustrator kunnen helpen deze weblay-out direct te verbeteren? Laat het ons weten in de comments!