Concevoir une illustration pour le web

yrial in sight
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 ordinateur
mê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 !


Et vous, vous dessinez pour quel media ?

Ou laissez-moi un commentaire

Preview illustration artbook – memento mori, shinigami !

Quand je vous parlais d’étude de la nature et de Death Note, le lien est : fanart !

Comme promis, une preview d’un de mes projets en cours : une illustration au sein d’un artbook collectif. Mes précédents essais de nature morte – contemplation, mortalité, vanité, titouti – n’étaient uniquement mus par une volonté d’amélioration technique !

Crânes humains et crâne de ... Shinigami ! | preview partielle d'une illustration
Crânes humains et crâne de … Shinigami ! | preview partielle d’une illustration

Alors, à votre avis ? Ryuuku sera-t-il inclus dans cette vanité ? Un shinigami ne meurt pas me direz-vous. Et pourtant… Si ! Memento mori, shinigami* !

Un dieu de la mort, dans le manga Death Note, a deux façons de perdre son existence (pour ne pas dire, sa « vie »). La première : s’il glandouille trop longtemps sans écrire de noms dans sa death note, il meurt, faute d’avoir volé du temps de vie aux humains. C’est ce qui menace Shidou dans l’histoire par exemple. La deuxième ? Je vous en parlerai une prochaine fois ; )

Et globalement, j’en dirai plus lorsque la sortie de l’artbook #01 nouvelle version** approchera.

 

_______

*Memento mori = rappelle-toi que tu vas mourir, rappelle-toi que tu es mortel

*Memento mori, shinigami = indice pour le sujet de mon illustration ; )

**Artbook #01 nouvelle version = l’artbook #01 ou »Tempus Fugit » a finalement été collectivement abandonné, donc ce n’est pas de celui-là que je parle. Et par souci de discrétion je m’abstiens de parler du thème du prochain ^.~

Ou laissez-moi un commentaire

Plume G et encrage net – part.1

Suite à quelques expérimentations d’encrage traditionnel et numérique

… Projets de bannières pour les tutoriels de trames numériques en dessin manga !

news-2016-04-20-tuto-ban-05-pose-trames-numeriques
Bannière du tuto #05 sur la pose de trames numériques proprement dites.

Issue de l’illustration « Tresses Chinoises » en noir et blanc, plein de noir à l’encre et trames digitale – un vrai mix, entre crayonné et encrage traditionnel, puis pose de valeurs et de trames par ordinateur.

news-2016-04-20-tuto-ban-06-trames-tissus
Bannière du tuto #06 sur la pose de textiles en trames numériques, avec un petit apparté sur la peau.

Issue de recherches pour du charadesign orienté shojo manga – chibi manga – crayonné, encrage et valeurs en peinture numérique. Et l’un de mes tous premiers tests – voire le premier – d’encrage avec Manga Studio aka Clip Studio Paint.

Bonus histoire de vous donner encore plus envie :

animation speedpainting
animation speedpainting pour le couple de jeunes filles chibi manga

A très bientôt pour les nouveaux cours en ligne !

Je précise qu’ils ne seront pas données sur ce site comme les fois précédentes mais sur le site de No-Xice. Alors, partants ?

Ou laissez-moi un commentaire

Overlay jeu vidéo : stream, Max, stream !

Entre digital art et graphisme, coups de pinceau et projections de peinture sont à l’honneur pour la chaîne Twitch de Maxilia. Une réalisation pour « tout type de jeu vidéo » donc ne vous attendez pas ici à des cotes particulières.

Au cas où, définition : un overlay est un cadre posé sur le jeu vidéo en cours, avec une ouverture pour la webcam du streameur / de la streameuse (oui j’en profite pour faire des néologismes ^^).

Zoom sur le coin webcam :

news-2016-03-12-overlay-jeu-video-twitch-maxilia-visuel02

Extrait d’un des overlays, côté webcam à gauche. Pour la version full HD, rdv sur la chaîne de Maxilia ^.~

Une collaboration signée No-Xice avec la mascotte* de San Lee intégrée à l’overlay :

news-2016-03-12-overlay-jeu-video-twitch-maxilia-visuel03

Le même overlay vu en entier. Beaucoup d’espace laissé libre, suivant le type de jeu commenté.

Deux variantes (il existe d’autres versions mais je laisse la primeur à Maxilia) :

news-2016-03-12-overlay-jeu-video-twitch-maxilia-visuel04

Suivant la position de la map et de la webcam, chaque overlay a été livré en double – en miroir.

Au début je pensais que l’overlay devait épouser l’ensemble – cad être moins saturé et / ou plus sombre que le jeu présenté ; il s’avère que les couleurs vives de San Lee ont poussé vers des teintes bien plus pêchues ^o^

C’était sympa de pouvoir se concentrer sur les formes, les couleurs et la matière. Même si les ajouts de texture sont très discrets. Il en ressort un ensemble plutôt spontané et assez foufou !

___

*Mascotte + bannières et titres, cf. la chaîne twitch linkée en intro !

Ou laissez-moi un commentaire

Baballe 404 pour croquis de canidés

Des roughs inspirés d’une commande de la rentrée !

news-2015-11-04-etude-de-la-nature-yrialinsight-chien-saisei

Et la version vue desktop de l’utilisation du dessin…

…Qui vient agrémenter un site web traitant notamment d’éducation canine :

news-2015-11-04-mockup-desktop-dessin-chien-om-anima

Source d’environnement pour ce mockup : Behance / Graphic River

Note pour plus tard : je devrais me spécialiser dans l’illustration de pages 404 ! ^o^

Ou laissez-moi un commentaire

Recherche pour le logo Wazabi 2016

C’est dans l’air mais rien de définitif.

Recherches à la base élaborées en février – peu avant le projet d’un nouveau webdesign pour le site wazabi.fr. Oui, je poste à rebours, volontairement. Parce que ce projet de logo a finalement suivi une autre piste avec les évènements et que je ne poste pas de travaux qui n’aient fait l’objet d’une validation ! ^.~

Et ouip, je poste encore des crayonnés*…

news-2015-10-03-logo-wazabi-2016-crayonne01-blagounette

La blagounette avec le « I » de « Wazabi » plongeant dans une crotte de wasabi.

Donc ! On parle de recherche pour moderniser le logo, même si je pense que celui-ci va évoluer en parallèle du thème de chaque convention Wazabi – comme celui designé pour Epic Wazabi – plutôt que d’opérer un radical changement.

Quelques suggestions et premières pistes :

news-2015-10-03-logo-wazabi-2016-crayonne02-splash

news-2015-10-03-logo-wazabi-2016-crayonne03-splash-suite

news-2015-10-03-logo-wazabi-2016-crayonne04-kanji

news-2015-10-03-logo-wazabi-2016-crayonne05-kanji-pacman

news-2015-10-03-logo-wazabi-2016-crayonne06

Moderniser le logo reste une entreprise délicate, car :

• J’aime beaucoup le travail original de San Lee, à la fois fluide et dynamique ;

• Il est impératif de conserver l’essence d’une identité, au risque de perdre la communauté.

Mais ça reste intéressant et souvent nécessaire. Se renouveler c’est aussi « rester dans le coup ».

Voilà l’une des tâches du pôle communication Wazabi 2016 ! Sans doute auront-ils de nouvelles idées. Affaire à suivre !

**************

*Des crayonnés… En fait il n’y aura quasiment que ça jusqu’à la fin de l’année ! ^^°

Ou laissez-moi un commentaire

Chibi manga ou style réaliste ?

[suite du projet MaxiliaGartha] Cette hésitation m’a valu un exercice de style !

news-2015-09-12-chibi-manga-versus-style-realiste-recherches-croquis-maxiliagartha

Style « original » à gauche, plutôt réaliste | style « chibi » à droite, plutôt manga.

Au départ, il était décidé que les principales rédactrices seraient représentées en chibi ; comme les éléments du décor n’étaient eux, en rien simplifiés, j’ai préféré orienté vers du réalisme. Maintenant que les deux couples sont là, je pencherai presque vers les petites bouilles, plus chaleureuses et sympathiques. Vues en situation sur la bannière :

news-2015-09-12-chibi-manga-versus-style-realiste-personnages-test-chibi

news-2015-09-12-chibi-manga-versus-style-realiste-personnages-test-realiste

Ou laissez-moi un commentaire

années 50 : si sages, les décolletés ?

Loin de moi l’idée de présenter une étude complète ou un catalogue exhaustif ! Je partage juste les éléments qui ont orientés ma proposition – cf. posts précédents. Le chemisier « de base » n’allait finalement pas vraiment avec le personnage, qui présentait des côtés rétro : coiffure des années 50, escarpins, motif à pois.

Une petite recherche sur Internet fournit de nombreuses idées pour les chemisiers féminins des années 50. En général les cols et décoletés sont assez sages :

news-2015-09-13-maxilia-gartha-persos1-costume-ophelie-col3

Un col ras dont les rabats évoque une fleur, de gros boutons et des manches ajustées aux épaules.

Ce qui n’empêche pas de chercher des variantes :

news-2015-09-13-maxilia-gartha-persos1-costume-ophelie-col2

Le modèle de gauche est une fusion nœud + col qui est complètement anachronique ; celui de droite est plus d’époque, enfin je pense.

Le modèle de droite convient bien à une coiffure des années 50 : féminin, structuré. Parfait pour la vue en plongée !

Ou laissez-moi un commentaire

Personnages et tenue vestimentaire

[suite du projet MaxiliaGartha] Avec, au menu cette fois, les tenues demandées par ces dames :

news-2015-09-11-maxilia-gartha-persos1-costume-ophelie1a

news-2015-09-11-maxilia-gartha-persos1-costume-ophelie1b

news-2015-09-11-maxilia-gartha-persos1-costume-ophelie2a

news-2015-09-11-maxilia-gartha-persos1-costume-ophelie2b

news-2015-09-11-maxilia-gartha-persos1-costume-tiffany1a

news-2015-09-11-maxilia-gartha-persos1-costume-tiffany1b

Vue des deux personnages principaux, qui sert pour la bannière et le background du site, en décor, de part et d’autre des bords extérieurs :

news-2015-09-11-maxilia-gartha-persos-posture

Oui j’ai complètement intégré les gabarits 3D dans mes outils de travail. ^___^

La vue le suggère à peine : les deux personnes ont des statures et des formes un peu différentes, même s’il n’est pas vraiment possible de détailler le morphotype avec Manga Studio.

Autre chose, Manga Studio ne permet pas d’associer deux items dans le même plan : pas de zones de collision, les personnages sont sur deux calques et deux plans séparés, sans interaction l’un avec l’autre. Les deux mains qui se touchent sont en fait… « Simulées » c’est une illusion d’optique.

Prochaine étape : les dernières recherches de style. Au moment où je finis de préparer ces articles, je viens d’apprendre que le projet changeait d’optique et se mettait en pause ; pas d’url et probablement pas d’aboutissement.

Ou laissez-moi un commentaire

Nature morte pour une bannière web

Bizarre, comme titre, n’est-ce pas ?

Parenthèse ouverte sur le projet MaxiliaGartha, avec comme promis, l’étape-par-étape du décor !

Plutôt que de partir sur une basse résolution – 72dpi pour le web – j’ai travaillé sur un format homothétique en haute résolution ; au cas où le site passerait sur un autre thème, où l’image d’accueil serait affichée en grand, sur toute la largeur de l’écran.

Ci-dessous, les masses principales, une fois les items et la composition validée :

news-2015-09-10-max-bg-items-01

Vue générale de la bannière avec « bords perdus » pour avoir la place de déplacer des éléments

Zoom sur la partie droite – crayons à maquillage, lisseur :

news-2015-09-10-max-bg-items-step1

Ca s’affine, les pinceaux ont du poil !

On passe aux bouquins à gauche :

news-2015-09-10-max-bg-items-step2

Pour ceux-ci, j’aurais souhaité une mise en abîme, avec du texte issus des articles du site.

Et la vue finale pour ce background :

news-2015-09-10-max-bg-items-06

Avec une tomate cerise en bonus !

Notes persos – et synthèse – sur les natures mortes :

Oui, parce que, bon… On ne m’a pas demandé stricto sensu une « nature morte » ^.~

Au Moyen-âge, les natures mortes représentaient l’opulence. A l’entrée dans la « modernité » la crise envers la classe dirigeante (riche) entraîne une réflexion sur la vanité et provoque un allègement des compositions, avec l’apparition du clair-obscur (et des crânes !). Nos contemporains (fin XX°-début XXI°) reprennent ce thème pour dénoncer la culture dominante du consumérisme (surconsommation) et du gaspillage (pour les pays les plus développés).

Pour MaxiliaGartha, il s’agit au contraire d’un foisonnement relatif à un mode de vie sain / bio : sport, relaxation, alimentation, lectures, soin de soi (dont maquillage ^-^).

Vue générale et mockup du projet :

news-2015-09-10-max-mockup-saisei-yrialinsight

Source pour le design d’environnement : Graphic Twister, toujours ! ^^

Prochain post : les personnages et les choix de tenues vestimentaires.

Ou laissez-moi un commentaire