David Torondel / Portfolio | Blog
19795
paged,page,page-id-19795,page-template,page-template-blog-large-image-whole-post,page-template-blog-large-image-whole-post-php,paged-3,page-paged-3,ajax_updown,page_not_loaded,,vertical_menu_enabled,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Splashscreen

Vous, je sais pas, mais moi je suis assez doué pour perdre du temps sur des choses insignifiantes… même quand je manque de temps, d’ailleurs. Ma dernière perte de temps partait pourtant d’un bon sentiment à la base… Je suis donc en train d’organiser un peu mieux mon travail en optimisant le suivi de projet. Pour cela j’ai ouvert un domaine dédié, parce que les clients préfèrent parfois que je leur montre mes maquettes sur une URL qui soit « neutre » et dans laquelle il n’y a pas forcément mon nom. J’ai donc déposé le nom de domaine « atelier36 », et y ai ouvert des sous-domaines pour les agences avec qui je travaille. Donc sous la forme http://nom-de-l-agence.atelier36.net. Il y aura également un sous-domaine dédié au suivi de projet, avec dessus une application spécifique qu’a gentiment développé Pierre Canthelou ! Je vous en reparlerais bientôt, mais en attendant n’hésitez pas à aller voir son site, ses travaux, son blog…

 

Et donc, ceux qui ont suivi auront compris que dans mon système je n’utilise que des sous-domaines, et que sur le domaine principal atelier36.net il n’y a rien… ce qui n’est pas très grave, puisque je ne diffuse pas l’url… oui mais voilà, je me dit qu’il peut arriver qu’un client ai la curiosité d’aller voir quand même. Donc pour qu’il ne tombe pas sur une page 404, je me suis dit qu’il fallait au moins que je mette une page d’index… au début, je pensais juste mettre sur cette page un fond bleu et le texte html « atelier 36 ». Et je me suis dit que ca faisait un peu pauvre, quand même… bon, en même temps, si ça se trouve personne n’ira jamais sur cette page… oui mais bon… allez, je vais mettre un fond de matière en fond… et le texte en image, faire un simili logo… ha tiens, pour illustrer la notion d’atelier, je pourrais mettre un engrenage, et ca ferais un clin d’oeil à mon projet « clonk »… bon un engrenage tout seul, ca tourne dans le vide, faut en mettre au moins 2… s’ils tournent pas, c’est du gachis… bon, je fais un petit flash… je pourrais mettre une clé animé, hop Fred Aubailly (webdesigner et formateur à Toulouse) me fourni des images en 3D, ha et tiens si je rajoutais ça, et ça, et un mouvement en fonction de la souris, etc. etc.

 

Bref vous l’aurez compris, au final je me suis embarqué dans la réalisation d’un « splashscreen », tout ça pour peut-être 3 visiteurs perdus ou curieux… Donc je me suis dit que je pouvais au moins vous le montrer ! Pour cela, cliquez sur l’image ci-dessous, attention, c’est très lourd (4Mo).

 

 

Au passage, je vous indique que le blog « Olybop », dont j’ai déjà parlé ici, m’a gentiment demandé une interview, qui est consultable ici !

Read More

Carte de voeux

Voici un lien ou aller voir une carte de voeux en Flash réalisée pour la société Compagnons de cordée (société de conseil en recrutement online). Le début est une reprise d’une animation déjà réalisée l’année dernière. Pour l’anecdote, je pensais initialement traiter les personnages en photos, mais j’avais fait un storyboard en crayonné pour faire valider le principe, et le client a préféré les crayonnés aux photos :)

Cliquez sur l’image ci-dessous pour visualiser la carte.

voeux_cdc

Read More

Des nouvelles en vrac…

Le blog a été un peu en veille ces dernières semaines, la fin d’année a été chargée en travail ! J’ai entre autres travaillé à la charte graphique de la refonte du site de Médecins du Monde. Il reste des ajustements à faire en intégration… (travail réalisé dans le cadre de ma collaboration avec l’agence Ecedi)

mdm

 

Je viens aussi de finir une application de e-learning pour Lafarge, composé d’environ 70 écrans, avec plusieurs jeux, beaucoup d’illustrations et animations… C’est pour une diffusion interne donc je ne peux montrer le résultat final ici, voici seulement quelques images.

proeco

 

Ci-dessous une animation montrant les étapes de réalisation d’une maison maçonnée, en mode isométrique :

 

J’ai également réalisé une illustration dans un style plus cartoon, pour une série de cartes postales qui vont accompagner le projet :

carte

 

(travail réalisé dans le cadre de ma collaboration avec l’agence Cavernamuth)

 

J’ai aussi travaillé à la réalisation de documents pour Compagnons de Cordée :

cdc

 

Mais aussi des maquettes d’annonces de recrutement online, toujours via Compagnons de cordée. Ces annonces sont diffusées sur différents sites de recrutement. L’intégration html finale a été réalisée par Pierre Canthelou.

recrutement

 

J’ai aussi travaillé à la charte graphique d’une boutique internet de café, des animations Flash pour un site de services pour téléphone mobile, des jeux en Flash pour une prochaine expo de la Cité des sciences… Ces projets sont finis mais pas encore en ligne officiellement, je les montrerai dès que je peux. Je voudrais aussi enfin pouvoir travailler à la refonte de mon site portfolio (et ce blog changera aussi d’interface en même temps), j’ai un projet d’animation perso, Clonk à finir… Bref, pas de quoi m’ennuyer, et mon planning de travail est déjà complet jusqu’en février ! L’année commence donc sur les chapeaux de roues… En attendant de pouvoir vous montrer d’autres choses ici, je vous souhaite à tous de très bonnes fêtes de fin d’année ! :)

Read More

Polupalo – jeu Flash sur le cycle de l’eau

J’ai un planning très très chargé en ce moment, beaucoup de projets simultanés, ce qui explique un peu le ralentissement des mises à jour (et le mise en pause des projets persos), mais j’aurais prochainement quelques travaux à vous montrer ! En attendant, voici un petit jeu en Flash, réalisé pour l’Agence de l’eau Seine-Normandie, via l’association « le temps presse » qui s’est occupé de la conception/scénarisation. En 2006 j’avais déjà réalisé sur le même thème un jeu beaucoup plus conséquent, avec de la vidéo, plusieurs types de jeux, etc. Plus d’une demi-heure de jeu, mais l’ensemble est à télécharger. La déclinaison que nous venons de finir est elle jouable en ligne. Les illustrations des personnages sont de Laure Scellier, je me suis occupé pour ma part de la réalisation de l’interface graphique, des animations, de l’illustration du paysage et de la programmation de l’ensemble.

 

polupalo

Cliquer sur l’image pour voir le jeu, ou cliquer ici.

Read More

Links of the week (4)

Bon, ma série des « link of the week » s’est un peu transformé en « link of the year », vu la fréquence…

Il faut dire que je ne trouve pas tant que ca de liens intéressants à partager… Voici quand même une dizaine de liens !
Tout d’abord voici 3 sites que j’ai trouvé simplement beaux :

ndrc

J’ai particulièrement trouvé intéressant et astucieux le parti-prix de « casser » les verticales par les formes de couleur en fond de page. La palette de couleur est elle aussi agréable.

 

siete

J’aime beaucoup le visuel du header, la structure de la page est intéressante aussi, bref une charte très réussie à mon goût !

 

forty

Pour ce dernier, je ne suis pas fan de la mise en page, mais j’aime beaucoup la gamme de couleurs utilisée.

 

Pour continuer, un site de recherche d’icones.

icones

Il en existe déjà plusieurs, en voici une sélection, mais c’est le premier à ma connaissance en français, ce qui est surtout intéressant pour la recherche par critères, on ne sait pas toujours la traduction des termes…

Donc une bonne initiative, qu’il faut à mon soutenir !

 

Pour finir, voici 6 sites dédiées à WordPress, mon « top 6 »  quand je recherche des infos sur ce moteur ! Wpchannel propose des tutoriaux vidéos, en français, ce qui est vraiment très pratique ! L’auteur « commet » aussi le site Protuts, qui est une mine d’infos, avec des tutoriels aussi. Idem pour Geekeries, Fran6 et les autres indiqués.

wpchannel

protuts

geekeries

fran6

debuter

blogtoolbox

Voilà, c’est tout pour cette fois !

Read More

Forum et blog

wpBonjour à tous, j’ai pour éventuel projet de lancer prochainement un forum, lié à un blog WordPress (sur le graphisme). Je cherche donc des solutions pour lier ces 2 supports, et pour l’instant j’ai un peu de mal à mettre en place ça… J’ai commencé par installer Onepress, mais je viens de m’apercevoir que cette solution n’était pas compatible avec la dernière version de WordPress.

Je trouve plusieurs plugins et solutions diverses, mais il me semble difficile de tout tester… D’où ce message, si quelqu’un a déjà expérimenté ce genre de « mélange » et accepterait de me donner quelques conseils, je suis preneur !

D’ailleurs il n’est pas forcément judicieux d’utiliser phpBB, il existe aussi d’autres systèmes de blogs, peut-être plus adaptés à une utilisation liée à WordPress. Là aussi, si vous avez des conseils… Merci d’avance !

Read More

Illustration isométrique BTP

Désolé pour le manque de mise à jour en ce moment, mais j’ai beaucoup de dossiers à gérer en même temps !

Voici une illustration que je viens de faire, déclinaison d’une autre déjà montrée ici. Au final ce sera une animation Flash, destinée à tourner en boucle sur des stands de salon. Cliquer sur l’image pour la voir en plus grand.

Chantier

Edit 17 oct : Pour répondre au commentaire de Heneman, pour ce genre d’illustration je me fais d’abord une « grille » dans Illustrator, que j’imprime, et qui me sers de repère pour mon croquis de base. Voici ci-dessous ce que ca donne :

chantier2

Le croquis n’est pas ultra précis, le but est vraiment de faire valider l’agencement des éléments par le client. Une fois validé, je met le croquis sur un calque dans Illustrator, et je retrace par dessus. Dans ce cas précis, comme il fallait une vue vraiment du dessus, je n’ai pas utilisé une grille « standard » isométrique. D’un côté l’angle est à 30°, de l’autre à 45°.

Mais dans la plupart des cas, j’utilise une grille avec les 2 angles à 30°. J’ai mis à disposition le fichier Illustrator de base de cette grille.

Read More

Portofolio v7 – étape 1

logoComme annoncé précédemment, je vais refaire entièrement mon site portfolio. Mon but final est d’avoir un site à la fois attractif et original visuellement, tout en ayant une facilité de mise à jour. J’ai donc opté pour le principe d’un site basé sur le moteur WordPress, qui me permettra d’avoir un module d’administration « tout fait », mais aussi de bons outils de tris croisés (catégories, tags, moteur de recherche…). La difficulté est donc de partir d’un outil (WordPress) certes très puissant, mais qui a une structure assez « classique ». Donc un gros travail de personnalisation !

 

Je suis parti d’un thème de base, pour arriver à cette structure. Vous pouvez passer d’un thème à l’autre via le menu déroulant « theme switcher » (tnet v00, tnet v01…). Pour l’instant aucun travail graphique, cette étape viendra plus tard !

 

J’ai donc commencé en farfouillant les CSS et les ai modifiés en fonction de ce que je voulais. Pour cette partie, un outil très très pratique est l’extension Firebug de Firefox. Une fois installé, cela ajoute en bas de la fenêtre de Firefox une petite icone, qui permet d’afficher tous le code, structure, css de la page visitées. Indispensable pour bien appréhender comment est construite une page, et donc la modifier.

 

Regardez par exemple dans la capture d’écran ci-dessous : j’ai activé Firebug et le mode « inspection », ensuite je survole n’importe quel élément dans la page, et en bas s’affiche le code correspondant, la classe CSS, etc. Et à droite les attributs de la classe, dans quel fichier, à quel numéro de ligne, etc.

 

firebug_little

Donc j’ai modifié les attributs CSS des zones qui m’interessaient, à savoir les sidebar, header, etc. selon le schéma suivant :

structure2

 

Je suis donc parti de ça :

avant

pour arriver à ça :

apres

 

Donc une page très très large (8000 pixels), divisée en 4 sections. Pour naviguer entre ces sections horizontales, j’ai voulu utiliser une bibliothèque javascript qui permet un défilement progressif dans les liens « ancre » d’une page. Il s’agit de « Tiny scrolling« . Un exemple de site utilisant ce javascript : Horizontal way ou encore celui-ci qui est plus proche de ce que je veux faire.

 

Pas de souci pour intégrer le javascript à WordPress, mais première déconvenue, dans mon cas le contenu des pages autres que le portfolio seront en Flash, et les liens dans les Flash ne fonctionnaient pas en « progressif ». Nouveau farfouillage en ligne, pour tomber sur un commentaire sur le site du script, ou une personne fourni une version « personnalisée » du script, qui selon lui fonctionne avec du Flash. Re-installation, cette fois les liens depuis un fichier Flash fonctionnent bien, mais au passage c’est le scroll avec la molette de souris qui ne fonctionne plus ! J’ai donc passé un peu de temps à comparer les 2 fichiers javascripts, pour récupérer la molette sur la version compatible Flash… sachant que je ne suis pas du tout programmeur, ca a été un peu laborieux, mais ca semble fonctionner (sauf sur IE).

 

Ensuite, il a fallu régler un autre souci : la partie portfolio, donc avec les articles WordPress, sont en 2e section, donc les liens internes à WordPress devaient intégrer le lien ancre correspondant. J’ai essayé de jouer avec les réglages de permaliens, sans succés. J’ai donc été demander de l’aide sur le forum WordPress… La discussion est visible ici. Et donc grâce à l’aide de « Gaz pumped » et « Comme une image« , qui m’a gentiment écrit un filtre php qui permet d’ajouter le lien ancre automatiquement !

 

Voilà ou j’en suis ! La base « technique » est donc en place, maintenant je vais pouvoir m’atteler à la partie qui m’est plus « facile » : le graphisme ! Et ensuite, le remplissage… A suivre !

Read More

Quels sont les graphistes que vous préférez ?

Je souhaite faire prochainement un article sur ce blog présentant les « meilleurs » graphistes français. Certes cette notion est forcément subjective, donc disont au moins « ma » sélection de graphistes dont j’apprécie vraiment le travail. J’ai bien sur déjà ma petite liste, mais forcément je ne connais pas tous les graphistes, donc je me suis dit que je pourrais vous mettre à contribution, vous lecteurs !

Donc n’hésitez pas à me dire quels sont les graphistes français que vous affectionnez, que ce soit en commentaires sur ce blog ou par mail, comme vous préférez !

Read More

Illustrations pédagogiques

Je travaille en ce moment à la réalisation d’un DVD ludo-pédagogique sur le thème des bonnes habitudes alimentaires. J’ai déjà montré ici les décors réalisés pour l’occasion, voici quelques autres images : la mascotte de la société qu’il a fallu redessiner et décliner dans quelques poses, et quelques copies d’écran de l’application. Je réalise la charte graphique, l’animation et la programmation Flash (interface, navigation, quiz…).

 

avenance

 

Voici également quelques images d’animations Flash réalisées pour Mobiclic, pour un jeu sur le thème des robots, dont j’ai déjà montré quelques éléments précédemment. Pour voir les animations, il faudra acheter le magazine en kiosque :)

 

mobiclic_robots

 

ccccblog2

Pour rester dans le sujet du multimédia pédagogique, j’ai réalisé dernièrement la personnalisation d’un blog WordPress pour la société ComCiComCa, un blog dédié aux réalisation de l’agence dans le domaine du multimédia éducatif et ludo-pédagogique.

 

ntvb

Par ailleurs, pour les surfers invétérés du web, je vous informe que j’ai mis à jour ma page Netvibes !

Vous y trouverez la sélection des liens que je vais voir tous les jours, une collection de liens vers des blogs BD et d’illustrateurs, mais aussi des liens vers des blogs de graphistes et des graphzines, sans oublier de la veille techno (web 2.0, etc.), une sélection de bons sites sur WordPress, et autres…

 

Read More

[Chronique Musique] Belleruche

belleruche

Photo : Patrick Schoeneich

 

Il me semble que ce sera la première fois sur ce blog que je parle de musique ! Il faut dire que le sujet est casse-gueule, vu que les goûts musicaux sont quelque chose de très subjectifs. Je sais déjà que la plupart des personnes des personnes qui vont lire cette article y seront insensibles, mais si cela permet à au moins 2 ou 3 personnes de découvrir une musique qu’ils ne connaissent pas et vont apprécier, ca vaut le coup quand même !

 

Le groupe dont je souhaite vous parler s’appelle Belleruche, derrière ce nom particulier se cache un trio londonien. J’apprécie particulièrement la voix de la chanteuse, Kathrin de Boer, qui est accompagné par un guitariste, Ricky Fabulous, et DJ Modest aux platines. Je ne suis pas du tout un connaisseur averti en musique, je fonctionne au coup de coeur, sans me soucier de savoir quel courant musical j’écoute… Qui plus est, plus ca va et moins j’y comprend quelque chose dans ce domaine ! :)

 

Mais pour essayer quand même de vous situer ça, selon les articles que j’ai pu lire sur ce groupe, il s’agirait de Trip-hop down tempo, ou de Nu-Jazz, voir de hip-hop soul. Oui, moi aussi j’essaye de parler djeuns si je veux.

 

Le souci est que je n’ai trouvé qu’un seul morceau sur Deezer, donc pour pouvoir vous faire écouter ça un peu, j’ai du me rabattre sur Youtube, qui propose quelques vidéos live.

 

Voici déjà le morceau disponible sur Deezer :

Minor Swing est une reprise d’un classique de Django Reinhardt.

Ci dessous, 3 autres morceaux parmi ceux que je préfère, en vidéo cette fois, ce sont des enregistrement live d’un concert à Paris, en 2008 :

spacer

spacer

Voilà, et si vous voulez en savoir et en écouter plus, vous pouvez aller sur leur page Myspace ou sur leur site.

Read More