Logo Yrial in Sight

Lorsque le site et le blog ont été refondus en 2016, j’en ai profité pour incorporer ma favicon et par là-même, mon logo pour Yrial in Sight.

Pour vous donner une idée, le logotype d’Yrial in Sight a toujours porté sur le « Y », le son en diphtongue qu’on retrouve aussi dans « insight » ou « in sight ». Yrial a une sonorité minérale et à l’époque où j’ai créé le site, en 2006, j’ai inventé le nom, en combinant des sons que j’aimais bien. Ça m’a pris un peu de temps mais je suis arrivée à quelque chose qui était original, dans la mesure où je n’ai pas trouvé d’équivalent pour « yrial » sur le web lors de la création. Voilà pour l’anecdote – que vous trouverez également en biographie dans la section à propos ^^

J’ai souvent proposé aux clients d’inclure en favicon leur logo ou un extrait de leur logotype. Et j’ai tendance à concevoir une identité graphique ainsi. Ici, il s’agit donc bien d’un logo picto conçu d’abord en favicon – l’icône dans l’onglet du navigateur, quand vous arrivez sur le site web yrialinsight.com. Les crayonnés de recherche datent de 2015 et voici son dessin vectoriel, en grand :

Logotype et favicon pour Yrial in Sight
Logotype et favicon 2015 pour Yrial in Sight – version en noir sur fond transparent

Pour mémoire, ma précédente favicon (1) était composée du premier idéogramme de « saisei », mon pseudonyme. Il est temps de la simplifier ! Saisei disparaît donc au profit d’Yrial InSight – devenu Yrial in Sight. Comme je souhaitais toutefois conserver la caractéristique japonaise, j’ai donné aux « Y » un style calligraphié.

Ensuite, le plus petit symbole à côté du Y rappelle, à dessein, un œil ouvert, vue de profil et tourné vers la droite. Ceci pour plusieurs raisons :

  • Yrial in Sight est un site de dessins, on a donc besoin de la vue pour le voir, le découvrir
  • Le blog Lumière Elfique (le nom de ce blog à l’origine), fait directement référence à la « lumière qui éclaire dans n’importe quelle obscurité » (2) ; c’était donc une façon de rester connectée au nom premier du blog
  • La lumière est également liée à la physique de notre œil, qui a besoin de lumière pour discerner, capter les informations sur la rétine ; et lors des cours de physique, on représentait l’œil ouvert (il vaut mieux !) et de profil
  • « in Sight » signifie « à l’horizon », »en vue de », « dans la ligne de mire » – là encore, représenter un œil, vers la droite (l’avenir en occident) me semblait opportun
  • « insight » signifie entre autre « idée », « connaissance », « lucidité » des valeurs que j’apprécie, ainsi que « aperçu », « vue », « perception », « vision » … CQFD !

Ok, alors pourquoi est-ce que je n’en parle qu’aujourd’hui ?

Et bien je pense m’en inspirer pour changer mon avatar sur Deviant Art, qui deviendrait donc ceci :

Si vous regardez tranquillement le visuel, vous observez qu’il change graduellement de couleur, allant du noir au rose, sur un rythme croissant – décroissant assez doux. Cette petite animation me permet d’ajouter quelques signifiants à ce que j’ai énoncé plus haut :

  • Le rose est une couleur nouvelle depuis 2016 – avant le site était majoritairement en bleu, avec une transition en violet pendant quelques temps
  • Je travaille de plus en plus souvent en noir et blanc – avant je ne faisais que de la couleur et sinon, des crayonnés – donc les deux se trouvent maintenant associés
  • Le flux et le reflux régulier du rose au noir m’évoque un cœur qui bat ; quelque chose de plus dynamique, de vivant, de respirant – en tout cas, j’y ai pensé lorsque j’ai réalisé le montage : )

D’ailleurs la couleur pourpre intermédiaire peut aussi faire penser au flux de sang, foncé au retour et clair à l’aller car chargé d’oxygène. Je n’ai eu besoin que de deux teintes pour ça, le pourpre étant la combinaison du rose au noir à différents degrés d’opacité. En un mot : j’abandonne ma petite frimousse dessinée pour un picto ^o^

 

Voilà pour rétrospective explicative, voilà ce qui se passe dans ma tête quand je conçois quelque chose. Même si le crayon glisse instinctivement sur la feuille au moment de créer concrètement, le mouvement est souvent précédé d’une digestion et d’une connexion d’informations, d’idées, de concepts ; )

 


(1) favicon : combinaison et contraction de « favourite » et « icon » <=> pour mettre un site en favoris, il suffit de glisser – déposer la favicon dans vos bookmars / favoris ou votre barre personnelle en haut.

(2) référence au Seigneur des Anneaux de Tolkien, dans laquelle je vois une métaphore de l’espoir

Ou laissez-moi un commentaire

Stormy sunset : isles in sight !

Suite de l’illustration Îles en vue – isles in sight avec cette-fois la version finale pour MDdrawing !

Pour cet article, je vous partage deux étapes !

1. Équilibrer le dessin suivant la position du texte – qui va influencer la composition :

la branche gêne un peu
on vire la branche et on incline
on remonte la ligne d’horizon

Evidemment, cette composition doit être vérifiée en version tablette et mobile, la taille de l’image variant d’un support à l’autre (mais pas le positionnement) :


2.  Illustration en elle-même + test intermédiaire :

illustration du décor seul : la couleur du soleil caché dans les nuages se confond avec une éventuelle éruption !
illustration du perroquet au premier plan et décor
ajout de texture pour rendre l’approche de l’orage palpable
un test intermédiaire niveau couleurs entre la version bleue « shiny » et la version rose « stormy »

J’adore ce genre de variantes d’ambiance !!!


Vue de l’illustration intégrée au webdesign :

preview de l’accueil sur MDdrawing, mon portfolio en anglais

 

Cette illustration destinée au web fait suite à mes études de perroquets et mes esquisses d’îles.

Si vous êtes curieux, rendez-vous sur MDdrawing.com !

Ou laissez-moi un commentaire

Carte de vœux finale

Après l’effort, le réconfort, on avance. Tel est le thème de cette année ^__^

Voici donc le projet de carte, mêlant habitations rocheuses, monts escarpés, itinéraire à découvrir !

carte de vœux finale
carte de vœux finale

Le cadre en gros coups de brosse est un rappel du cadre utilisé pour la carte de l’année dernière ^.~ Je voulais quelque chose de plus spontané quitte à paraître davantage « cracra » !

Mes sources d’inspiration, un petit melting-pot pour le plaisir :

  • les montagnes pour le rapport à l’effort mais aussi l’idée de profiter du chemin en cours de route – la récompense dans la contemplation du paysage
  • les vestiges de civilisation qui appellent l’imaginaire : temples greco-romain, temples coréens-japonais, et le site de Petra en Jordanie

Certains sites sont accessibles, d’autres pas directement. C’est au randonneur de décider du chemin à prendre, en sécurité à chaque marche, ou en rappel d’escalade ^.~

La nouveauté est bout du chemin, pensez à souffler et à profiter de chacune de vos réalisations !
Et bonne inspiration pour vos prochaines idées !!!

Ou laissez-moi un commentaire

Variations de papier parcheminé

Suite du précédent article sur l’exercice de perspective !

J’aime beaucoup tester différentes options pour les ambiances. Que ce soit pour un costume, un décor, les jeux de couleurs et de saturation peuvent m’absorber un moment. Ici j’ai essayé différents modes de fusion et de styles pour associer une photographie de ciel à une texture de papier.

lettrage 3D - expérimentations
Bonne année 2017 en perspective – papier parcheminé

Il m’arrive fréquemment de travailler à partir de photographies ; je stocke beaucoup de clichés persos, ici une photo de ciel d’été (juillet 2014) ! Ci-après, une incrustation similaire et un style encré. Le texte s’insère mieux dans le décor :

lettrage 3D - expérimentations
autre style encré – papier parcheminé

Et un autre essai ! La cime des nuages devient un effet de craquelure :

lettrage 3D - expérimentations
papier parcheminé orangé

Je ne poste pas tout ici, c’est juste une parenthèse sur ma manière d’expérimenter. De toute façon, le collage paraît encore très brut ! Il reste encore du chemin à parcourir pour combiner harmonieusement les textures.

Ce qui est sûr, c’est qu’à force de texturer, l’œil change et on apprécie que les effets de matière soient plus estompés qu’au début.

Ou laissez-moi un commentaire

Une bonne année en perspective…

… A un point de fuite, en version papier !

J’avais même pensé à l’insérer sur un origami (c’est un peu private joke).

Bref, c’est surtout une excuse pour alimenter le blog avec un petit step-by-step, comme souvent ^.~.

D’abord les chiffres de face, puis l’épaisseur et ensuite, ça s’étoffe ! Avec quelques obliques, histoire de varier les « plaisirs » :

Un petit exercice de révision pour bien démarrer !

Ou laissez-moi un commentaire

Goodies Wazabies for Heroes of Wazabi !

Vous l’aviez demandé. Vous l’avez ! L’association Wazabi publie des goodies 100% illustrées cette année. En parallèle des badges et miroirs, décapsuleurs et  t-shirts. Et cette fois-ci, il s’agit de fragments* des précédentes affiches, format carte postale A4 !

cartes illustrées | Wazabi
cartes illustrées | Wazabi | sortie pour la convention Heroes of Wazabi | Septembre 2016

* Je dis fragments, car :

• L’A4 n’est pas homothétique du B1 par exemple ; une partie du dessin a donc été rognée – forcément !
• Le format retenu est plus petit que les affiches « normales » ; quelques zooms s’imposent donc sur ce format intermédiaire entre une affiche A3 / A0 / B1 et un flyer A6.

news-2016-08-30-goodies-wazabi-cartes-center
Visuels de gauche à droite : Wazabi Golden Week, Wazabi Itadakimasu, Pique-Nique Wazabi, Wazabi Tournament, et Epic Wazabi (collaboration avec Wolf & Belette) !

Fragments aussi car certaines affiches ont été conçues pour accueillir du texte – beaucoup de texte, comme vous savez… Par conséquent, j’ai choisi de recentrer le cadrage sur un ou des morceaux choisis de l’illustration. Il a parfois été nécessaire de complètement repenser les éléments !

Toutefois, il n’est pas question de sortir un puzzle ^__^
Vous aurez donc des illustrations (décor + personnages) en version intégrale.
… Bon en fait ce serait une idée, ça : des miniatures qui, assemblées, formeraient une illustration complète ^^

news-2016-08-30-goodies-wazabi-cartes-center-rotate
cartes illustrées issues des affiches Wazabi | sortie pour la convention Heroes of Wazabi | Septembre 2016

Vous retrouverez donc quelques-unes des illustrations des précédentes affiches samedi 10 et dimanche 11 septembre à Heroes of Wazabi !

____________________________

Remarques sur…

• Ces nouveaux produits illustrés :
Le papier choisi diffère de ce que vous aviez pour l’artwork né de Wazabi Origins ; à cette occasion-là, nous avions retenu un papier granulé. La texture était sympa mais vous aviez regretté que le dessin ne se plie pas. Là ce sera possible de rouler le dessin ! ^.~

• Les produits dérivés de Wazabi :
Retrouvez l’ensemble des autres goodies habituelles lors de l’évènement – plus d’infos sur www.wazabi.fr

____________________________

Ou laissez-moi un commentaire

Nouvelle version du site en ligne !

You-hou ! Nouvelle forme pour Yrial in Sight et Lumière Elfique !!!

Peu de choses changent côté design, beaucoup de chose changent côté admin. En bref : de mon côté, ça sera plus simple, et du vôtre, presque rien ne bouge.

yrial in sight - galerie illustrations - screenshot
Galerie d’illustrations – versions desktop || à gauche : nouvelle version | à droite : ancienne version

Le scénario de visite reste égal

Pas de changement fondamental : une galerie pour zapper, un blog pour détailler.

Les options ont disparues de la galerie (la possibilité de tri dynamique côté visiteur semble inexistant avec WordPress) : il ne vous est donc plus possible d’afficher, sur la même page, les illustrations regroupées par critère – en l’occurrence des dessins triés par étape (colo, noir et blanc, lines, crayonnés), thème, style, catégorie ou date. Des recherches ont commencé en ce sens (entre bibliothèque et code à la main, ce que je souhaite éviter cette fois).
Affaire à suivre ! En attendant, je suis contente d’adopter la masonry !!!

Côté blog, les tags n’apparaissent que si on clique sur le titre ; là je me suis basée sur ma propre utilisation des sites web, c’est-à-dire une approche thématique, en privilégiant les mots-clés. Voilà pourquoi étiquettes (tags) et sujets (catégories) se retrouvent propulsés en haut du menu latéral. Quant aux commentaires, peu utilisés, il faut cliquer sur le titre pour en ajouter un. Côté archives, je ne les utilise quasiment pas en tant que visiteuse – et dix ans de blog, ça commence à faire – donc je les ai passées en mode compressé (menu déroulant).

Blog - version tablette
Environnement : Webvilla | Visuel sur tablette : blog du site yrial in sight, nouvelle version

Côté charte graphique, simplification générale

Le bleu disparaît progressivement au profit de teintes plus chaudes ; les spirales, les ombres portées et les effets de transparences passent à la trappe, on fait dans l’épuré ! J’ai longtemps repoussé cette étape car je craignais de perdre « l’ambiance » du site. Finalement, un petit tri dans les items s’est révélé bénéfique. Et un site toujours responsive, bien sûr. ^__^

Visuels sur smartphone et tablette : blog du site yrial in sight, nouvelle version
Environnement : Carlos Martinez sur GraphicsFuel | Visuel : blog & galerie yrial in sight, nouvelle version

Côté contenu, ménage estival

La galerie et le blog ont été transférés – et convertis au nouveau système – dans leur intégralité. Tout y est. C’est ce qui a pris le plus de temps ! Toutefois, les url ont changé, donc si vous avez opéré des liens vers certains articles… N’hésitez pas à me contacter !

Le côté positif de l’histoire ? J’ai fait la chasse aux liens cassés – nombre de liens externes pointaient vers des pages d’évènements ou de comptes-rendus désormais obsolètes. J’en ai conservé les mots (notamment pour mon ancien compte no-xicien, saisei.no-xice) mais il ne vous est plus proposé de suivre de liens morts, sortants ou internes. Les quelques liens qui restent (vers d’anciennes pages appelées à renaître ultérieurement) sont ostensiblement barrées.

Ce qui manque ? Les pages « bd / comics », « tutoriels », « informations », « papote / livre d’or » et « bannières partenaires ». Elles ne m’ont pas parues essentielles pour le lancement. Idem pour l’option de switch entre français et anglais.

 

Voilà pour cette nouveauté de l’été ! Bon farniente, bossez bien et / ou bronzez bien !

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

Mockup et point de fuite photoshop

Ça faisait un petit moment que l’idée me trottait dans la tête. Voici un bref tutoriel pour mettre en scène ses créations !

On aimerait avoir toujours des photos de nos travaux ! Mais ce n’est pas toujours possible. Soit parce les œuvres digitales n’ont pas lieu d’être imprimées (charte graphique de site web par exemple, diffusion exclusivement online) ou parce qu’il ne nous est pas possible de les photographier dans de bonnes conditions.

Et souvent le client a besoin de « voir » la réalisation «en situation ».

Commençons !

1/ La source d’environnement : une de vos photos ou une photo dont les droits sont disponibles – à l’achat ou en prêt gracieux par l’auteur. L’idée directrice : remplacer le visuel d’exemple sur la tablette :

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-01

Ici j’ai flashé sur un « freebie » de Webvilla ; pour masquer, j’utilise un masque de fusion mais vous pouvez découper tout simplement. Ici je vais vous montrer comment s’en passer.

2/ Ouvrir les deux fichiers : celui de l’environnement (1) et celui à insérer (2)

3/ Dans la palette des calques du fichier (2)

> sélectionner toute la surface | CTRL + A

> la copier | CTRL + C

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-02

Les deux fichiers ouverts côte-à-côte dans l’espace de travail | zoom sur les pointillés de sélection pour le fichier (2) à insérer

4/ Dans la palette des calques du fichier (1), créer un nouveau calque, c’est là que le fichier (2) viendra se coller… Mais on ne colle pas tout de suite !

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-03

Avoir le calque 1 en surbrillance avant de passer à la suite – c’est sur celui-ci que ça se joue

5/ Ouvrir le menu : Filtre > Point de fuite

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-04

Aperçu du menu | apparaît cette interface de travail

6/ Dessiner la grille de perspective ; si elle est bleue, c’est bon, si elle est rouge ou jaune, c’est que la perspective n’est pas bonne > reprenez :

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-05

L’outil ne fait pas tout ! A vous de tracer au plus près les contours de la zone à remplacer

7/ Coller votre visuel (CTRL + V) et glisser-le sur la grille :

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-06

Au moment du collage, le fichier (2) apparaît dans le coin supérieur gauche ; faites-le glisser dans votre grille bleue

8/ S’il est trop grand, redimensionner (CTRL+T) et jouer avec les poignées :

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-07

Avec ce raccourci vous pouvez aussi faire pivoter votre visuel, bien que l’outil point de fuite gère en général automatiquement l’inclinaison. Toutefois il peut y avoir de grosses distorsions, à vous de doser ^.~

9/ Valider. Oui, vous avez fini ! ^o^/

…A quelques fioritures près > voir « aller plus loin ».

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-fin

Exemple avec l’illustration du tutoriel : jardin japonais, île de Versailles, Nantes.

Remarque : tous les raccourcis sont donnés pour Windows, avec photoshop CS5.

Il y a plusieurs méthodes pour y arriver : masquer la zone qui accueillera votre création (avec une découpe, ou, avec un masque de fusion), puis glisser votre création dessous. Ou insérer directement votre création au dessus, sans effacer le dessous ; là vous modifiez votre créa avec l’outil homothétie et perspective, ou, comme je viens de le montrer, à l’aide de l’outil point de fuite de Photoshop. On peut en combiner plusieurs ; j’ai choisi celle qui offre le plus de souplesse car elle s’adapte le mieux en toute circonstance, enfin à mon avis.

news-2016-03-06-mettre-en-valeur-ses-creations-mockup-singe-de-feu

Exemple une autre illustration : singe de feu, nouvel an chinois, 2016.

Pour aller plus loin : recréer un effet de reflet sur la tablette, redessiner les bords, adoucir les contours… Pour que le collage ne soit pas trop brut !

______________________________________________________________________

J’aime beaucoup le travail de Webvilla ! N’hésitez pas à faire un tour du côté de
son site web www.webvilla.pl, ou de sa page projet sur Behance ainsi que sa page dessin sur Behance toujours.

Ou laissez-moi un commentaire