Graphiste/illustrateur indépendant, basé en Bretagne, je vous propose sur ce blog de découvrir des "work-in-progress" de certains de mes travaux, pro ou perso, et aussi au fil de mon humeur certains liens vers des sites qui me semblent intéressants, et certainement d'autres choses encore, rien n'est tout à fait défini !
Comme 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.
Donc j’ai modifié les attributs CSS des zones qui m’interessaient, à savoir les sidebar, header, etc. selon le schéma suivant :
Je suis donc parti de ça :
pour arriver à ça :
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 !
J’ai pour projet de refaire entièrement mon portfolio en ligne, actuellement en Flash. Tout d’abord parce qu’il ne me plait plus tellement, et que je souhaite une solution qui me facilite les mises à jour. Après moults hésitations, j’essaye de partir sur une base Wordpress, afin de bénéficier du CMS et moteur de recherche intégré. Tout en sachant que j’ai une vision assez précise de ce que je veux au final, et cela ne correspond pas du tout à la structure classique des blogs sous Wordpress. Donc je ne sais pas du tout pour l’instant si cette solution est envisageable, mais je vais au moins essayer !
Comme la personnalisation d’un blog Wordpress est de plus en plus courante, vu l’essor de ce moteur, je vous propose de détailler sur ce blog les différentes étapes de cette réalisation, ça pourra toujours servir à d’autres, et je risque aussi d’avoir par moment besoin d’aide…
Par contre je préfère vous prévenir tout de suite, au vu de mon planning je risque de ne pouvoir travailler que de manière très épisodique sur cette refonte, si ça se trouve ça va s’étaler sur plusieurs mois ! En plus ceux qui me connaissent savent que je spécialiste des projets persos inachevés…
M’enfin, donc la toute première étape a été d’installer Wordress, une nouvelle base de données SQL (pour ne pas mélanger la base du Blog et du futur portfolio), et choisir un thème qui me servira de base, même si je vais être amené à totalement le modifier… Cette version « zéro » est donc visible ici. Le thème utilisé est le « Fervens A », créé par designdisease.com. Ce thème m’a été conseillé sur le forum Wordpress. Ca ressemble pour l’instant à ça :
J’ai juste pour l’instant désactivé les commentaires, et mis quelques billets fictifs, pour que la catégorisation et les mots clés soient actifs. Maintenant il va falloir que j’essaye de modifier la structure complète, je voudrais que cela ressemble au final à ça : essai de structure
Soit un site entièrement horizontal. Bref, ya du boulot pour essayer de mêler les deux… Les thèmes Wordpress étants constitués d’un header, corps, 1 ou 2 sidebars et un footer, je pensais essayer de faire comme cela :
Pas sûr du tout que ce soit réalisable… A suivre !
Je ne regrette absolument pas d’avoir accepté cette misson, déjà il n’y a finalement pas de concurrence, la cible de ce site n’étant pas la même que la mienne. Ce genre de service est parfait pour les personnes ayant besoin d’un « petit » site qu’ils devront mettre à jour eux-même, qui n’ont aucune connaissance en informatique, mais ont quand même besoin d’un site sérieux. Ils proposent des formules gratuites et d’autres payantes, mais dans tous les cas à bas prix.
Qui plus est, il est toujours agréable quand on est indépendant de travailler dans de « bonnes conditions », ce qui a été largement le cas ici. Budget réduit, mais client qui ne cherche absolument pas à abuser, ouverts aux échanges, qui propose de lui même un accompte et paye dès réception de la facture, c’est assez rare pour le noter !
J’ai enfin pu avancer un peu sur mon projet « clonks »… Ayant un planning surchargé en ce moment, je ne peux avancer qu’au compte-goutte, désolé. En clair, j’arrive difficilement à trouver 1 ou 2 heures par semaine pour y travailler, ce qui explique la lenteur de l’avancée du projet ! Mais merci aux quelques personnes m’ayant demandé des nouvelles, ça me motive pour avancer !
Bref, je n’avait pour l’instant travaillé que sur l’animation du premier robot, Blew… J’ai pu lui faire un tapis roulant, et l’ampoule associé.
Voici ce que ça donne :
Un zoom sur la partie « mécanique » du tapis roulant et l’ampoule :
Pour rappel, le principe de l’économiseur d’écran que j’ai prévu est le suivant : 3 robots, Raid Grin et Blew font avancer des tapis roulant qui alimentent chacun une ampoule à sa couleur. Chaque robot marche pendant un temps aléatoire (random Flash sur le nombre de boucle de marche), puis s’arrête pendant un temps lui aussi aléatoire. Quand un robot s’arrête, son ampoule s’éteint, donc la luminosité de l’écran diminue. Donc comme tout est aléatoire pour chaque robot, il peut arriver que les 3 robots soient en marche, auquel cas la luminosité est maximum, et il peut aussi arriver que les 3 robots soient arrêtés, auquel cas la luminosité est au plus bas.
Rien de bien compliqué techniquement… par contre j’ai donc commencé l’intégration de l’ensemble dans Flash, et première déconvenue : avec juste un robot, l’animation est déjà trèèèèès gourmande en ressources processeurs… Chez moi presque 90% du processeur est sollicité. Donc avec 3 robots, ca devrait être totalement saturé, perdre en fluidité, etc. Un économiseur d’écran ruineur de processeur, c’est pas top…
Vous pouvez tester par vous même, c’est visible ici : Economiseur V1
Pour la gestion du plein écran, je me suis basé sur ce tutorial : http://www.flashxpress.net/ressources-flash/site-en-flash-a-100/ que je trouve très didactique, et un fichier d’exemple est disponible.
Pour l’instant j’ai mis des points rouge et vert à la place des robots manquants. En haut à gauche sont visibles les variables de boucles de marche et d’arrêt, c’est juste provisoire, pour vérifier le fonctionnement. Mais donc avant de continuer et de travailler sur les 2 autres robots, il faut optimiser tout ça ! J’ai donc demander conseil autour de moi, que ce soit sur la mailinglist Flash-fr, le réseau PAO dont je fais partie, etc.
Les principales pistes d’optimisation qu’on ma conseillé : passer en bitmap la plupart des éléments vectoriels, vu que ces derniers sont assez complexes et comportent beaucoup de vecteurs, parfois un gros bitmap est préférable. Gérer aussi la luminosité de l’écran par l’ActionScript plutôt que par des interpolation.
Cet essai est visible ici : Economiseur V2
Mais sauf erreur, c’est en effet un peu plus fluide, mais quand même aussi gourmand en ressources processeurs…
Du coup j’ai essayé en enlevant certains calques, pour essayer d’isoler les éléments d’animations qui prenaient trop de ressources, et il semble que ce soit les rayures du tapis roulant… En les enlevant, ca semble mieux : Economiseur V3
Dernier essai en remetant les éléments en vectoriels, mais donc sans les rayures : Economiseur V4
Je vais encore faire quelques essais avant de trancher…
Dernier point sur lequel il faut que je me penche : quel logiciel utiliser pour transformer l’animation Flash en économiseur d’écran… Après quelques recherches, il semble qu’il ne soit pas évident de trouver un logiciel pas cher et qui permette de générer des économiseur d’écran à la fois pour Mac et Windows… J’ai posé la question aux créateurs du célèbre économiseur Anooki, si vous ne le connaissez pas, je ne peux que vous conseiller de l’essayer, il est vraiment très très chouette ! Et donc, en plus ces créateurs, l’agence Inook sont apparement très sympas, vu qu’ils m’ont répondu dans l’heure en me donnant des informations précises sur le logiciel utilisés, les avantages et inconvénients, etc. Encore merci à eux !
Ils utilisent donc le logiciel Screentime. Inconvénient, pour générer un économiseur pour les 2 plateformes, il est necessaire d’acheter les 2 versions, donc 400$… Ca commence à faire cher pour un économiseur que je ne compte pas vendre…
Si jamais vous avez d’autres pistes, n’hésitez pas !
Et à bientôt pour la suite…
Après pas mal de difficulté, voici le premier robot, Blew, en train de marcher…
J’ai vraiment peiné pour le mouvement de la marche, je m’aperçois qu’il est vraiment difficile d’avoir un mouvement « naturel ». J’ai du modifier un peu le robot de base, pour éviter des effets de perspective que je n’arrivais pas à gérer. Je ne suis pas complètement satisfait du résultat, mais je laisse comme ça pour l’instant je verrais plus tard si j’arrive à mieux !
[edit 22 février : j'ai modifié le mouvement des bras, ça me semble déjà mieux comme ça...]
La première étape a été de préparer le fichier dans Illustrator, en placant sur des calques séparés chaque éléments qui serait animés dans Flash. Donc dissocier les bras, tronc, main, etc. Dans l’image ci-dessous, les formes noires et roses correspondent aux masques prévus dans Flash. Vu que je n’aime pas du tout les outils vectoriels de Flash, j’essaye au maximum de prévoir tous les objects nécessaires en amont, dans Illustrator.
Ensuite, export en swf, en demandant à dispatcher les calques AI en images :
Et enfin, import du SWF dans Flash, j’ai redispatché les images sur des calques, puis animation de l’ensemble… Sur l’image ci-dessous, les filets et points rouges et gris visibles derrière sont des repères que j’ai fait pour me guider…
Comme 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 !
