Suite des évolutions avec le thème WordPress « Twenty Seventeen » : une bonne base !
Ça n’a l’air de rien, mais Twenty Seventeen est plutôt « brut de décoffrage » – voici un avant-après chartage du site sur mon article test :
aperçu de la section widgets avec Twenty Seventeen « brut »aperçu de la section widgets avec Twenty Seventeen avec ma charte graphique
L’ajout d’un bordereau rose sous le titre et le changement de typographie donne un peu plus de caractère à mon avis !
aperçu de la section widgets avec Twenty Seventeen « brut »aperçu de la section widgets avec Twenty Seventeen avec ma charte graphique
Il y a eu plusieurs adaptations au thème WordPress Twenty Seventeen : rajout des catégories, tags et possibilités de poster sur chaque article, dès la vue « par archive » et pas seulement sur sur la vue « par article » (retour d’expérience utilisateur).
Mieux vaut avoir des idées de mises en page pour l’enrichir en terme de couleurs, de typographies, d’items ! Et vous passez forcément par la case « charte graphique » puis « intégration en CSS ». Sans compter les widgets qui apportent les fonctionnalités requises (ceci est commun à n’importe quel site WordPress). Dans tous les cas, une lecture assidue de la feuille de style du thème parent s’impose.
Un design de retour aux sources
Ce changement de thème, assorti d’un grand nettoyage de contenu, m’a aussi permis de me rapprocher de mon intention initiale : douceur, onirisme, simplicité – ici, coins arrondis et conservation de l’esprit cahier.
Voici exemple de simplification avec les éléments clés de la charte d’origine, suivis de leur application sur la nouvelle pagination :
en haut : les éléments du « cahier » ancienne charte graphique | en bas, version actuelle
Simplification et occupation de l’espace
Enfin, j’ai orienté la visite pour une tablette ou un smartphone, avec la suppression de l’antique menu latéral – voici un aperçu de l’évolution :
menu latéral gauche | version d’Yrial jusqu’à 2016menu latéral droit | version d’Yrial 2016-2018pas de menu latéral | version d’Yrial depuis l’été 2018
Les liens sont communiqués dans la section commune à toutes pages d’Yrial – une widget area comme on dit ! Cette réorganisation spatiale m’a fait gagner de la place et j’ai séparé les icônes de réseaux sociaux de celles des autres sites web de mon réseau :
valorisation des réseaux et distinction des sites web
Il manque un de mes sites web, c’est normal car il concerne une activité en pause ^.~
Je vous fais grâce des points de détails du reste de la charte graphique et du scénario de visites. Je me fais plaisir en vous partageant ces histoires sur Yrial… Tout en gardant à l’esprit qu’il s’agit d’un blog de dessin et d’illustrations avant tout !
Et maintenant, dites-moi : que pensez-vous de cette nouvelle version d’Yrial in Sight ? J’ai hâte de savoir ^-^
illustration, marque & logotype – vue pour mobile / téléphone / smartphone & tablette
On se sert beaucoup de photographies pour alimenter les contenus en ligne : une belle / grande image happe le regard, incite à l’engagement, positionne rapidement le produit ou service – je ne reviens pas sur le bagage marketing – communication de l’intérêt des visuels. Qu’il s’agisse de sites d’informations, de sites web vitrine, de boutiques en ligne, de blog ou de réseaux sociaux, une image vaut toujours mille mots.
illustration d’accueil, titre et promesse de la marque – vue pour desktop / ordinateur
Or les photographies n’ont pas la quasi-exclusivité dans ce domaine : les illustrations y ont une petite place ! Ok sur le principe mais concrètement ?
Du temps où l’on construisait des pages non-responsive, il était simple de passer commande et d’y répondre : telle taille, telle résolution, tel sujet à traiter, tel poids de fichier. Éventuellement des items sur des calques transparents (que IE gérait très mal et qu’il fallait hacker en CSS lors de la mise en page). Le plus compliqué qui pouvait se produire, entre guillemets, c’était de produire un pattern : un motif qui puisse se répéter soit sur un axe x, soit un sur axe y, ou les deux. Pour résumer, l’illustrateur livrait une image comme une commande de tableau : une image à dimensions et à proportions fixes, affichée à 100%. Il subsistait des surprises entre les tailles et la colorimétrie des écrans clients mais ça s’arrêtait là, en gros.
imbrication d’illustration en header et background – vue pour desktop
Puis les tailles d’écrans des ordinateurs ont commencé à s’harmoniser, tandis que les supports et les types de réseaux s’étendaient au profit des téléphones portables – smartphones et tablettes de résolution très variable. Du wap monochrome on passe à Internet, le vrai ! Et finalement, les webdesigners / graphistes web / intégrateurs s’engagent dans un design responsive : la conception web qui s’adapte au support, quel qu’il soit.
En conséquence, côté illustrateur, concevoir une image percutante de nos jours demande un peu plus de souplesse et d’imagination. Tout d’abord, il faut « relever » les principales situations où l’image apparaîtra :
desktop – au moins un format d’écran
tablette – en version portrait et paysage
smartphone – idem, les deux orientations
Puis se demander si le message sera conservé, si l’image restera lisible :
L’image sera-t-elle tronquée et comment ?
Que reste-t-il de visible une fois l’image redimensionnée au support ?
comparaison entre vue pour téléphone et ordinateur : le décor en background disparaît
C’est d’autant plus vrai si votre dessin accueille du texte, qu’il soit déjà aplati dans l’image ou rajouté dynamiquement par-dessus. A ce stade, vous pouvez normalement établir un ou plusieurs canevas. Pour ma part, je démarre mon étude en 72dpi à partir de screenshots issus de la maquette conceptuelle ou de la version bêta ou + (suivant l’avancement du projet). Il est intéressant à ce stade de gribouiller plusieurs compositions, de manière à décider du type de formats / nombres de variantes :
Quel format livrer pour couvrir ses différentes possibilités ?
Faut-il une image adaptée à chaque situation ?
quadrillage pour une illustration* en vue ordinateurmême quadrillage, même croquis d’illustration* pour vue téléphone et tablette
Là vous devez normalement avoir un bon échange avec l’intégrateur du projet : s’il est prévu d’importer une image par media (en css) ou s’il est au contraire demandé un visuel global. Je vous fais grâce de toutes les modalités du CSS3 qui sont riches ! Chacun son métier :-p
Ensuite vous pouvez vous lancer dans votre créa, en belle définition pour être à l’aise, à partir de vos crayonnés en basse déf 🙂 Sans oublier les validations intermédiaires avec le client !
une illustration de décor pour un header qui accueille un texte dynamique par dessus
Et vous préparez mentalement à ce qu’il y ait des surprises XD
Ceci reste vrai quel que soit le medium que vous utilisez : traditionnel ou numérique, 2D ou 3D. Évidemment, tout cela demande à évoluer lorsqu’on pourra visiter un espace web en 3D – véritablement en 3D comme avec Oculus Rift ou HTC Vive pour n’en citer que deux ! Hâte de voir l’évolution de la toile dans les prochaines décennies !
*Pour l’anecdote, entre le moment où j’ai démarré cette illustration et aujourd’hui, le thème WordPress de mon portfolio a changé ses préconisations en matière de taille d’image… Résultat, ça ne correspond plus à ce que j’avais anticipé. Donc pour le moment, je garde le header issu de Tempus Fugit !
Suite des évolutions avec le thème WordPress « Twenty Seventeen » : depuis août dernier, Yrial in Sight est prêt pour la rentrée 2018 ! Aujourd’hui ça se discute autour des adaptations graphiques et finalement, autour d’un thème déjà prêt, ou adapté, ou fait main.
Je ne vous le cache pas, un thème « fait maison » ou « fait main » – autrement dit concocté par vos soins, c’est long. Quoi que les professionnels du milieu, dédiés à la création de WordPress et / ou de thèmes WordPress, sont certainement bien mieux rodés à l’exercice que moi !
CSS – un langage de mise en page pour le web, ici pour Yrial in Sight
Si c’était si simple, nous serions une grande majorité à savoir coder et / ou prêt à investir les ressources nécessaires en termes de temps et de connaissance pour bâtir notre thème personnel. Preuve en est, le marché regorge de thèmes prêts-à-installer pour WordPress, en accès payant ou gratuit, proposés par de nombreuses compagnies… Et d’indépendants.
Un site fait maison ou un site Worpdress, qu’est-ce que ça implique ?
Pour faire court, un site fait maison vous demande diverses compétences ou domaines de veille – surtout si vous êtes autodidacte comme moi :
Pour l’existence du site : un hébergeur – serveur + l’achat d’un nom domaine + un outil de mise en ligne (comme FileZilla) ;
Pour l’aspect gestion de base de données – quelques requête en SQL et une petite balade régulière du côté de PHPmyAdmin pour les sauvegardes ;
Pour le code du site : php et javascript (il y en a d’autres maintenant)
Pour la mise en page du site : html, css… Et un logiciel de retouche d’images pour le web.
En comparaison, et pour faire simple, un site web WordPress assorti d’un thème tout prêt vous demande : de cliquer sur des boutons… A condition de capitaliser sur des connaissances antérieures. Car finalement, que ce soit pour le déploiement de WordPress ou le paramétrage des accessoires, la patience supplée rarement au manque de pratique. Et je dois reconnaître farfouiller le CSS pour la mise en page, d’autant que, comme je ne l’ai pas écrit en premier lieu, il me faut d’abord « rentrer dans la tête » de l’intégrateur auteur d’origine.
Voilà pour une grossière introduction en la matière ; à mon avis, tout site exige de faire de la veille et de demander conseil. Et, surtout, d’avoir une idée claire de ce que l’on veut en amont tout en restant souple : autant sur un site fait maison, vous pouvez galérez mais vous maîtrisez vos fonctionnalités de bout en bout, autant, sur un CMS comme WordPress, il faut accepter de déléguer certaines choses.
Ici par exemple, en terme de présentation graphique et de scénario de visite, mon « idée claire » repose sur un univers et un accès direct à l’information. J’ai toujours souhaité conserver une certaine ambiance, donc des éléments comme l’image de fond sont restés présents avant de valoriser mon identité ; voici une rétrospective sur un même article de blog :
Yrial in Sight fait maison jusqu’à l’été 2016Yrial in Sight avec WordPress et le thème Nisarg, 2016 – 2018Yrial in Sight avec Twenty Seventeen depuis cet été 2018
Vu de loin, le visiteur sent assez peu le changement entre Nisarg et Twenty Seventeen, les thèmes WordPress utilisés pour les deux derniers aperçus. C’est précisément l’objectif, une transition tout en souplesse en apparence.
Yrial in Sight, bac-à-sable en tout !
En 12 ans de site personnel, j’ai testé le site fait maison, le site avec thème tout prêt (1), et le site avec adaptation d’un thème (2). Avant ce site web, j’avais contribué à d’autres créations en agence, via un logiciel de type « What I See Is What I Get » comme DreamWeaver, mais je suis rapidement retournée à mon blocnote.
Je vous résume ici le cheminement d’un « Yrial @Saisei fait maison » vers un « Yrial collaboratif » à un « Yrial propulsé par WordPress » et toujours en collaboration.
Le site fait main, c’est une occasion de concevoir, de produire et de faire vivre un projet personnel de A à Z ; on apprend, on se rend visible et c’est vraiment gratifiant. Avec le temps et ce qu’on voit des autres auteurs, l’envie de moderniser le site devient presque aussi grande que produire du contenu pour le site. En tout cas, c’est ce qui s’est passé pour moi. Jusqu’à ce que le temps manque cruellement, que les métiers s’étoffent et se complexifient – d’où la collaboration et la délégation, même pour Yrial in Sight.
Pour le thème WordPress fait maison, l’idée a été abandonnée assez vite compte-tenu de l’expertise nécessaire au fonctionnement de la plateforme WordPress proprement dite. Je travaille désormais en collaboration depuis plusieurs années et demander un thème complet reste énorme ! Le sujet « site web : évolutions et nouveautés ! » vous donne déjà un aperçu de ce que l’amélioration d’un site web avec blog implique.
Lorsqu’on choisi de déléguer la technique à un CMS, on peut davantage se concentrer sur le contenu et sa mise en valeur. Ces CMS représentent vraiment un outil de démocratisation d’accès, je pense ; là où, avant leur apparition, une sélection s’opérait inévitablement. En revanche, c’est une erreur de penser qu’ils affranchissent de la rigueur pour la création et la maintenance*.
Concernant le choix d’un thème WordPress, j’ai choisi à chaque fois au plus près de ce que j’avais en tête (je note et je dessine des idées de maquette que je compile ensuite puis je compare avec les thèmes du marché). Ensuite, même si le thème sélectionné exige peu d’adaptation dans sa structure, il en va souvent autrement pour l’adaptation graphique – ici un exemple avec des changements de typographies, d’interlignages, de couleurs, d’arrondis, et ajouts de menus personnalisés :
aperçu de la section widgets avec Twenty Seventeen « brut »aperçu de la section widgets avec Twenty Seventeen et ma charte graphique
*Une petite remarque : même en déléguant à WordPress et à l’auteur d’un thème les parties les plus techniques, s’occuper de son site demande du temps, ce ne serait-ce que pour la maintenance – sauvegardes, mises à jour de sécurité, mises à jour de thème et donc d’adaptations graphiques suites auxdites mises à jour de thème… Dans tous les cas, il existe des solutions payantes.
C’est toujours le même triptyque : temps, argent, qualité (envie, connaissances). Si vous voulez de la qualité, vous y investissez du temps et / ou de l’argent ; et ainsi de suite !
A titre informatif :
mon thème WordPress 2016-2017 était Nisarg édité par Falguni – toujours maintenu par son créateur à l’heure où j’écris ses lignes ;
mon thème WordPress 2018 est Twenty Seventeen de WordPress, le petit dernier proposé en 2017 par WordPress, justement – et toujours maintenu actuellement.
Voilà pour cette « Évolution du site avec Twenty Seventeen part.4 » ! Et vous, avez-vous déjà tenté de créer un thème WordPress « fait maison » ou « adapté » ? Quelle en est votre expérience ?
Un outil dont je voulais vous parler depuis quelques temps : le filtre « découpage* ». Il permet de visualiser les zones par valeurs de saturation – et d’ajuster le schéma de valeurs* en conséquence.
Pour accéder au filtre dans le menu de Photoshop : filtres > galerie de filtre > découpage. Ensuite vous paramétrez les réglages pour obtenir des zones bien délimitées. Le résultat ? Sur un visuel simple, se créent ainsi des blocs correspondant normalement à des zones éclairées ou dans l’ombre. Je passe directement aux exemples !
Visage en normal à gauche | visage après filtre « découpage » à droite
Sur l’exemple ci-dessus, l’image parle d’elle-même ! Cet effet de découpe permet de distinguer deux sources au lieu d’une pour l’éclairage : sur le visage, la lumière semble venir de face ; tandis que sur le buste et le bras gauche sont éclairés depuis le côté gauche. Bourde que j’ai corrigée par la suite :-p
A présent, voici l’effet du filtre découpage sur une illustration – ici, le character design de Phaé :
Illustration normale à gauche | vue après filtre « découpage » à droite
Ici, en termes de masses, on voit bien le visage, on devine le bras, on suppose un tombé de cape. Il est moins aisé en revanche de comprendre ce qui se passe au niveau de la capuche – le côté droit du visuel – qui semble se fondre dans le décor. Théoriquement, je devrais travailler ce côté de manière à ce que la capuche forme un contour marqué : soit en éclaircissant l’arrière plan et en fonçant la capuche… Ou inversement : décor plus sombre vs capuche plus claire ! J’avoue, j’ai volontairement laissé ce charadesign ainsi car je trouvais l’effet agréable, mais si on suit la méthode, c’est une erreur ^^
J’ai découvert cette technique grâce à une vidéo de l’illustrateur Clint Cearley alias Swatches sur YouTube. Elle complète bien mes tests de valeurs (en niveaux de gris) et de lisibilité (vue en dézoom ou yeux plissés) ^__^
Allez, je passe à un exemple d’illustration plus complète, en couleurs :
Temple Japonais dans les montagnes, vue normale à gauche | vue avec filtre découpage à droite
Suivant les réglages, on n’obtient pas les mêmes découpes :
Temple Japonais : 2 réglages différents pour le filtre du découpage
C’est étonnant de voir qu’à un degré près, le filtre « découpage » redessine différemment les zones ! Ici, à gauche, la partie basse des falaises apparaît de la même teinte que le bloc lié au temple ; tandis qu’à droite, cette même zone se fond dans le décor de l’arrière-plan, laissant bien visible le temple au premier plan.
Du coup, la méthode du découpage paraît vraiment plus intéressante en noir et blanc. Passons la même illustration, avec les mêmes réglages de découpage, en niveaux de gris :
Il ressort de ce second test que l’illustration du « temple japonais dans les montagnes » manque de peps : elle gagnerait en lisibilité si les contrastes étaient encore plus accentués entre le premier plan et les arrière-plans.
Oui, pour bien me faire comprendre, j’ai pris des exemples qui contenaient des erreurs ! 😉 J’espère que cela vous sera aussi utile qu’à moi !
____
*Pour ceux qui suivent les tutoriels en anglais, découpage se dit « cut out » et schéma de valeurs « value scheme ».
L’exposition Mangasia à Nantes dont je vous parlais récemment se termine bientôt ! Le 15 septembre précisément.
C’est le moment de voir ou revoir « les merveilles de la bande dessinée en Asie » !
Comme je l’annonçais précédemment dans Oxyde de cuivre pour Venomancer, j’avais envie de tester mes encres :
essais sur papier canson granulé 90gr – test d’encres, diluées à gauche et pures à droite
Je connaissais déjà le résultat des encres Sepia et Terre de Sienne car je les avais achetées puis utilisées en lineart ; les deux autres sont des cadeaux que j’ai moins voire pas pratiqués – j’avais un peu testé en diluée l’encre noire lors d’Inktober l’an dernier. La surprise résidait donc dans l’encre de cuivre !
Cette encre a l’avantage de présenter une teinte chaude et donc de communiquer une certaine « sympathie » au trait, du moins en test rapide. Comme j’ignorais le résultat sur un dessin complet, j’ai encré mon croquis sur un papier granulé fin (90 gr/m2) plutôt que d’utiliser une feuille plus chère à 300gr/m2 :
à gauche, comparaison entre les quatre encre ; à droite, test du cuivre sur le dessin du Venomancer
Bien. J’ai donc décidé de tester l’encre de calligraphie « Cuivre » qui me rappelle certains godets aquarelles un peu gras. Surprise. L’encre est biphasique :
en bas du pot > oxyde de cuivre (bleuté)
en haut du pot > « eau »ou quelque chose qui ressemble à de l’eau teintée ou du jus de chaussette
D’où la nécessité de mélanger la solution pour retrouver le pigment de cuivre (bronze doré), et ce, avant chaque utilisation voire chaque passage du pinceau ou de la plume dans le pot :
à gauche, l’oxyde de cuivre vert-bleuté ; à droite, l’encre de cuivre brassée
J’avoue que c’est perturbant en cours d’encrage, d’autant qu’il faut éviter les paquets de pigments logés dans la plume. En revanche, au pinceau, ça passe bien.
Ensuite, cette encre de cuivre se révèle très sensible à l’eau : la deuxième couche d’encre diluée perturbe la première couche, elle la dilue tout ou partie => pas de superposition réellement possible :
étapes de colorisation du tronc de l’animal : la 2ème couche posée délave la 1ère couche !
En contre-partie, je note un excellent nettoyage à l’eau claire, rapide et simple – et bien sûr un repentir aisé.
Sinon, j’observe une bonne tenue des pigments une fois secs : après plusieurs jours d’exposition à la lumière (indirecte) du soleil, pas de changement de couleur notable.
Cette première approche de l’encre de cuivre pour une mise en valeur et un encrage s’en trouve donc mitigée ! Et vous, vous encrez en traditionnel ? Qu’utilisez-vous ?
Au cas où je tenterais Inktober en octobre, je voulais me remettre à l’encrage et à la mise en valeur. En traditionnel.
Pour le plaisir, et parce que j’inaugure une encre qui promet de sortir de ma zone de confort*, j’ai choisi une créature tout aussi différente de ce que je dessine d’ordinaire. Un héros du jeu vidéo et moba DotA 2 : Venomancer !
Héros du jeu vidéo DotA 2 : Venomancer
Ce héros aurait été parfait pour le sujet « poison » de la prompt list 2017 proposée par Jake Parker – l’initiateur d’Inktober. Bref, la finale des TI 2018 de DotA 2 a vraiment été excellente cette année et je remets le sujet e-sport sur le tapis ^.~ Quant au Venomancer, avec un sort qui ronge d’acide, quoi de mieux qu’utiliser de l’oxyde (de cuivre) ?
Allez, voici un petit étape-par-étape comme je les aime :
croquis et esquisses préparatoires (à droite), puis clean (à gauche)début de mise en valeur avec un lavisj’affine petit à petit – surprise sur la 2ème couche d’encre*encrage des contours à la fin du dessinDessin final du Venomancer, encré scanné
*Car il y a eu des surprises lors de ce test. Dimanche prochain, suivra donc un article sur l’encrage de ce Venomancer, à l’encre de cuivre.
C’est la première fois que je teste cette encre de calligraphie – surtout pour une utilisation qui n’est peut-être pas prévue à la base par le fabriquant ^^
La suite dimanche, donc ! D’ici-là, dites-moi… Regardez-vous ou jouez-vous à DotA – Dota – Dota2 ? Quels sont vos héros de prédilection ?
Un croquis sur carnet gris ! Où je parle transfert de graphite et fixatif.
Terre recouverte de neige, branches givrées de stalactites… Un dessin que j’avais mis de côté lors de mon étude sur le renard argenté :
croquis de renard dans un paysage digne d’une toundra
C’était un croquis pour Sketch Dailies ! Le renard argenté ne vit peut-être pas dans la toundra, mais son pelage aux reflets givrés m’y fait penser.
J’ai profité de ces trois semaines de déconnexion, pour, entre autre, restaurer une grande partie de mes dessins réalisés dans le cadre de Sketch_Dailies : la graphite grise (crayon 4B un peu gras, donc) s’était aventurée d’une page à l’autre et le pastel blanc (carrément gras celui-là) l’avait gaiement accompagnée…!
C’est chose réparée et fixée – avec une laque standard comme fixatif :
fixatif pour dessin traditionnel : laque pour cheveux…
Pas du placement de produit, hein ! Juste ce que je t’utilise ^^ Je n’ai encore jamais utilisé de fixatif « classique des beaux-arts » : jusqu’à présent, les rares fois où j’en ai eu besoin, la laque pour cheveux m’a rendu service. Et vu le peu de fois où j’ai besoin de fixer un dessin en traditionnel, je dois avoir cette laque-ci depuis peut-être 10 ans. Pour l’anecdote, c’est la laque qu’utilisais ma grand-mère – et c’est certainement de cette façon que j’ai testé la première fois ^o^
J’ai donc nettoyé et fixé une petite trentaine de dessins ; aussi, je vous invite à jeter un nouvel œil sur les précédents croquis puisqu’ils sont à présent plus nets qu’avant ^.~
En effet, si l’exposition Mangasia se prolonge jusque mi-septembre, les animations dans le cadre de la programmation s’achèvent cette semaine à Luce Courville !
Rendez-vous donc vendredi prochain :
Médiathèque Luce Courville 1, rue Eugène Thomas 44000 NANTES
Ce sera le dernier jour de l’exposition ! On se retrouve donc de 15h00 à 17h00 ^__^ A très bientôt !!
Quelques informations complémentaires avec :
Le programme du réseau de la bibliothèque municipale de Nantes
La médiathèque Luce Courville via les lignes Tram 2 et Bus C2, arrêt Chêne des Anglais
