Scénario: quelqu'un vous remet un document Illustrator avec sa dernière mise en page Web et vous devez le convertir en HTML et CSS. Voyons comment vous pouvez le faire.

Remarque: L'objectif de ce didacticiel n'est pas de recréer parfaitement le design pour une utilisation Web. Au lieu de cela, nous allons l'utiliser pour explorer les flux de travail et les fonctionnalités d'Illustrator qui nous aident à le faire..

Le fichier Illustrator

Commençons par examiner le document en question:

Voyez comment notre exemple de mise en page a été réalisé dans ce tutoriel

C'est une mise en page pour une page 404; une page qui indique aux utilisateurs que tout ce qu'ils recherchent est introuvable et qu'ils devraient peut-être essayer autre chose. Nous pouvons voir un titre, des paragraphes d’instruction, un formulaire de recherche et un bouton, ainsi que des boutons avec des info-bulles tout en bas..

Le tout semble flotter au centre de la page, horizontalement et verticalement. Il a un fond jaune, des accents chauds et des ombres portées ici et là. Où allons-nous commencer?

Facile le fait!

Nous n'allons pas réinventer la roue pour cela, faisons en sorte que cela soit le plus facile possible pour nous-mêmes. Illustrator ne va pas sortir un paquet soigné de HTML, CSS et JavaScript pour cela, nous ne perdons pas notre temps à tout construire à partir de rien, alors allons chercher une copie de Bootstrap pour donner un coup de pouce à ce projet..

Actuellement v3.1.1, comme vous pouvez le voir…

J'ai téléchargé Bootstrap, supprimé une partie des fichiers CSS et des fichiers de police dont nous n'avons pas besoin, puis ajouté un fichier index.html basé sur le modèle Cover de Mark Otto. Quatre minutes de clic de souris et j'ai moi-même une page de base qui ressemble à peu près à ce que nous recherchons.

Cela peut ne pas sembler beaucoup, mais nous venons de gagner beaucoup de temps…

Les fichiers source pour continuer à partir de ce point sont disponibles dans le référentiel GitHub, dans le dossier 1-point de départ.

Ajout de balisage

La prochaine étape logique serait d'ajouter un balisage structurel à notre index.html (encore une fois, Illustrator ne le fera pas pour nous). Nous avons déjà un conteneur aligné au centre, un div avec des cours couverture intérieure:

 
404
 
Ceci est la base à partir de laquelle nous allons travailler. Toutes les peluches ont été enlevées.
 

Ajoutons quelques morceaux supplémentaires à cela:

 
Erreur
 
404
 
Désolé, la page que vous recherchez n'existe pas
 
Essayez de chercher la page ici:
  
 
 Chercher  
 Chercher 
 
Ou
  retour à la maison contactez-nous 

Nous avons ajouté des balises de titre

et

, certains paragraphes et quelques balises de formulaire Bootstrap typiques (vous pouvez obtenir d’autres exemples dans la documentation Bootstrap). Le formulaire a une classe de formulaire en ligne, une classe Bootstrap native qui place nos éléments de formulaire le long d'une ligne.

Enfin, tout à la fin, vous verrez trois ancres, toutes avec les classes btn et btn-primaire. Ceux-ci serviront de nos boutons. Voici ce que nous avons à ce stade:

À ce stade, nous n'avons rien fait en termes de style, pas une seule ligne de CSS, mais grâce à Bootstrap, nous avons efficacement construit notre page, prête à être peaufinée..

Faisons fonctionner les info-bulles

Quelque chose d'autre que Bootstrap va nous aider avec; les info-bulles. Vous pouvez en savoir plus sur les différentes options disponibles dans la documentation Bootstrap, mais pour le moment, ajoutons simplement les ingrédients nécessaires à notre code HTML..

A chaque bouton, nous ajoutons une classe supplémentaire pointe utilisé pour identifier tout ce qui nécessite une info-bulle. Nous avons aussi besoin d'un Titre attribut qui dicte ce qui sera réellement affiché dans l'info-bulle:

retour

le bootstrap.min.js Le fichier que nous extrayons déjà contient tout le code JavaScript nécessaire pour les info-bulles. En fait, il contient une multitude d'autres jouets JavaScript, dont beaucoup ne sont même pas nécessaires. Dans un environnement de production, il peut donc être judicieux d'inclure uniquement les éléments que nous utilisons. Les info-bulles Bootstrap sont acceptées, elles ne fonctionnent donc pas automatiquement, nous devons les initialiser. Faisons cela dans les balises de script au bas de notre page, en dessous de l'endroit où nous avons appelé l'autre JavaScript:

Terminé. Nous avons maintenant ceci:

Différence massive!

Essayons maintenant quelques styles

J'ai ajouté un troisième fichier CSS au projet appelé theme.css et ont pointé à partir du document . Mais qu'est-ce qu'on ajoute à la feuille de style?

Nous allons commencer par le conteneur principal. Sélectionnez l'objet conteneur dans Illustrator et vous remarquerez, dans le Couches panneau, qu'il a été nommé principale.

Ceci est pertinent. Dans une situation d'équipe, il est sage d'avoir une compréhension commune de la manière dont les objets comme celui-ci doivent être nommés. Vous verrez pourquoi lorsque nous ouvrirons le panneau CSS. 

Propriétés CSS

Aller à Fenêtre> Propriétés CSS pour révéler un panneau du même nom. Avec notre objet principal sélectionné, il contiendra tous les styles pertinents que nous pouvons coller directement dans notre feuille de style. Vous verrez que ces styles ont été appliqués au sélecteur .principale, tout comme notre objet a été nommé.

Allez-y et copiez ce que vous voyez, puis collez-le directement dans le theme.css fichier. Pour que ces règles s’appliquent à notre élément conteneur, nous devrons changer le sélecteur en fonction de ce que nous utilisons réellement .principale le sélecteur est un peu risqué car nous pourrions le trouver utilisé ailleurs dans l'ensemble de notre site). Changement .principale à .intérieur.cover et vous devriez voir votre élément de conteneur prendre une belle couleur jaune doré, avec des coins arrondis et même une ombre de boîte, le tout appliqué avec un CSS cross-browser décent..

Dimensions CSS

Vous remarquerez que nos règles CSS ici n'incluent pas de largeurs ni de hauteurs. C'est une bonne chose; Bootstrap s'occupe de tout ça, donc nous cherchons vraiment des styles esthétiques. En changeant le Options d'exportation des propriétés CSS nous pourrions avoir nos dimensions incluses ici, mais nous les laisserons de côté.

Notre conteneur est cependant un peu large, en raison des styles déjà appliqués. Remplaçons donc ces dimensions par la requête multimédia suivante:

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

Cela annule les règles trouvées dans cover.css, nous donnant une largeur de 400 pixels sur les écrans d'au moins 992 pixels. 400px n'est pas tout à fait fidèle à la conception, mais je trouve personnellement que les vraies dimensions et la taille de la police sont un peu petites, donc je m'oppose à cela!

Pendant que nous sommes ici, je souhaite simplement modifier les styles afin que nous appliquions également les angles arrondis dans cette requête. Supprimez-les des règles que vous avez collées dans Illustrator et appliquez-les comme suit:

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

Nous devrions maintenant avoir quelque chose comme ceci sur de grands écrans:

… Et ceci sur de petits écrans:

Mesures spécifiques

Nous ne sommes pas exactement fidèles aux dimensions précises utilisées dans le document Illustrator, mais cela ne pose pas de problème. le web est fluide. Néanmoins, notre conteneur pourrait utiliser un rembourrage sur le fond, nous allons donc savoir à quel point notre conception Illustrator indique que nous devrions utiliser.

Sélectionnez le Outil de mesure dans Illustrator (vous le trouverez avec le Pipette) et faites glisser le curseur pour mesurer une zone donnée du dessin. Nous pouvons voir que le rembourrage que nous recherchons est de 25px, appliquons donc cela manuellement à nos styles..

.inner.cover padding-bottom: 25px;

Meilleur

Les autres styles

Nous avons beaucoup de styles et d’objets à traiter ici, et, si tout était nommé exactement comme il se doit, nous pourrions (en principe) produire une énorme pile de CSS d’Illustrator pour tout gérer. Cependant, il y a quelques divergences avec la dénomination d'objet ici (éviter de demander une communication étroite entre concepteur / développeur) et nous risquons de nous retrouver avec du code étranger dont nous n'avons pas besoin..

Au lieu de cela, travaillez patiemment d’un élément à l’autre, en sélectionnant chaque objet et en générant le CSS correspondant. Commencez par la typographie et voyons à quel point Illustrator fonctionne bien..

Les polices

Une des premières choses que vous remarquerez est que le CSS pour n'importe quel objet type comprend: famille de polices: Open Sans;

Open sans n'est pas une police système standard et ne s'affichera dans aucun navigateur où l'utilisateur ne l'aura pas installée. Vous devrez donc vous rendre sur Google Fonts et saisir le lien CSS pour l'insérer dans la page grâce à la magie des polices sur le Web..

Boutons

Tout s'est bien passé jusqu'à présent, mais ensuite nous avons appuyé sur les boutons. Le bouton de recherche n'est pas vraiment mauvais, mais les noms des objets ne sont pas attribués aux trois boutons ci-dessous. Nous voyons donc ce qui suit dans notre fenêtre Propriétés CSS:

Aucun code CSS n'a été généré. Pour créer du CSS pour des objets non nommés, nommez-le dans le panneau Calques ou activez l'option "Générer le CSS pour les objets non nommés" dans la boîte de dialogue Options d'exportation CSS..

Allez-y et ouvrez les options comme nous en avons discuté auparavant, puis assurez-vous que vous avez coché Générer CSS pour les objets non nommés. L'alternative serait de donner un nom à nos boutons, mais l'une ou l'autre option convient parfaitement ici.

Maintenant, avec tous nos boutons sélectionnés, nous pouvons frapper Générer du CSS et avoir les styles de sortie pour nous. Malheureusement, Illustrator générera des styles complets pour chaque objet, même s'ils partagent les mêmes règles. Cela semble être le cas même si nous utilisons des méthodes communes. Styles graphiques, Styles de personnage, Styles de paragraphe, ou même donner le même nom à tous les objets! Des améliorations sont possibles, mais nous pouvons au moins saisir les styles courants et les appliquer manuellement à plusieurs objets..

J'ai copié les styles pour le bouton de recherche, puis appliqué à .btn, .btn: survol pour vous assurer que tous les styles Bootstrap ont été écrasés de manière appropriée. J'ai aussi ajouté un bordure: aucune; se débarrasser de la bordure bleue de Bootstrap. Voyons ce que cela nous procure!

Pas mal, mais pas parfait

Ce n'est pas mauvais, mais c'est tout à fait parfait. Les ombres de texte n'ont pas été respectées (elles manquent de transparence), les dégradés des boutons ne sont pas corrects et leur ombre de boîte leur manque complètement..

Pourquoi?

En bref, l'exportation CSS Illustrator n'est pas encore prête pour ce type de structure complexe (pour être juste, c'est très complexe). Regardons le bouton de recherche que nous voulons recréer:

C'est adorable. Mais regardez combien de remplissages, de dégradés et d’ombres ont été nécessaires à sa construction:

Aie. Pas vraiment surprenant que Illustrator dit Non. Même le rayon de la frontière a été exclu de l'équation parce que les choses sont devenues trop complexes.

Tu ne rigoles pas…

Au lieu de cela, je vais simplement appliquer quelques styles simples et éviter le CSS complexe (ce tutoriel décrit ce que Illustrator peut faire pour nous après tout…). .btn les styles ressemblent à ceci:

.btn, .btn: hover font-family: Open Sans; poids de police: gras; taille de police: 14px; couleur: # AC4400; ombre du texte: 0px 1px 0px rgba (255, 255, 255, 0,3); arrière-plan: # FDDA2F; border-color: # FDDA2F; border-radius: 4px; 

En termes d’efficacité CSS, tout cela laisse à désirer, mais nous travaillons avec ce que Illustrator nous donne à des fins de démonstration. Il serait sage de revenir ensuite et de nettoyer le CSS, peut-être même en utilisant un outil tel que CSSLint.

Les icônes

Ce que nous avons généré jusqu'à présent n'est pas mauvais, nous allons donc le laisser pour le moment. Tournons notre attention vers les icônes des boutons. Il existe quelques approches que nous pourrions utiliser ici:

Exporter des bitmaps

En sélectionnant chaque graphique, vous pouvez générer du CSS de la même manière qu’auparavant. Illustrator choisira d'exporter les chemins complexes sous forme de fichiers png, puis utilisera ces images comme arrière-plan pour vos éléments..

Vous recevrez un groupe d’actifs à utiliser:

Mais, encore une fois, ce n’est pas parfait et omettra certains aspects de la conception, produisant des styles douteux dans d’autres cas. Cette approche nécessitera donc quelques perfectionnements de votre part. Cette approche ne prend pas non plus en compte les affichages de la rétine, nous donnant potentiellement des graphiques sous-standard sur certains écrans. Quoi qu'il en soit, le CSS généré pour ces graphiques ressemble à ceci:

.image background-image: url (image.png); répétition de fond: non répétée; 

SVG

En tant que concepteur Web, ma préférence serait d’utiliser SVG dans ce cas, ce que Illustrator devient très bon en.

Tout d’abord, sélectionnez une icône, puis copiez-la dans le presse-papiers de la manière habituelle (commande + C). Les données SVG pour cet objet sont maintenant disponibles pour que vous puissiez les coller dans un éditeur de texte (incroyable). Ouvrez un nouveau fichier dans votre projet Web, appelez-le "icon-contact.svg" et collez-y le contenu du presse-papiers..

Vous pouvez maintenant ajouter ce fichier SVG en tant qu’image directement dans le balisage de votre index.html:

Bonjour…

Il y a toutes sortes de façons d'implémenter SVG dans une page Web. via CSS, en convertissant d’abord le code XML en base64, puis en le collant dans votre balise, le choix vous appartient (reportez-vous à Fichiers SVG: De Illustrator au Web pour plus d’informations). Notre approche fonctionne cependant très bien, du moins dans les navigateurs modernes, nous allons donc rester avec elle.

Répétez le processus pour les autres icônes, et…

Avaient fini!

Avec un peu plus de peaufinage (j'ai ajouté un peu de remplissage à l'élément de formulaire), vous devriez avoir quelque chose qui ressemble à ceci:

Pas mal! Cela ne reflète pas à 100% le graphique Illustrator, mais étant donné que nous nous sommes principalement appuyés sur les styles édités par Illustrator, je pense que nous pouvons en être très satisfaits. Toute autre amélioration devra être apportée à la main, Illustrator a tout fait pour nous à ce stade..

Avez-vous des conseils qui pourraient aider Illustrator à améliorer directement cette présentation Web? Faites le nous savoir dans les commentaires!