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

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