MARIE & JULIEN - ressources

Une interview pour toi, l'étudiant en com/graphisme dont le prof n'a aucune imagination

Julien — Sun, 11 Dec 2011 20:32:00 +0100

Dans le cadre de ta formation en communication et/ou graphisme, ton prof à eu l'idée merveilleuse et originale de te filer comme exercice la réalisation de l'interview d'un graphiste ou webdesigner. Et comme ils sont bourrés d'imagination, ils collent ça à TOUS les élèves de TOUTES leurs promo, dans quel but, nul ne le sait tant l'exercice est vain.

Avec cet exercice dans la poche, que fais-tu ? Tu cherches sur google qui tu pourrais bien interviewer, et fatalement c'est toujours pour la gueule des mieux référencés, à qui tu envoies un mail vaguement personnalisé accompagné de tes 10/12/15 questions.

Comme j'en ai marre de recevoir des tombereaux d'interviews chaque année, et que tuer des professeurs de com' est réprimé dans ce pays, je vais y répondre une bonne fois pour toutes (oui, parce que EN PLUS les questions sont identiques d'une années sur l'autre), et en échange vous dites à vos profs d'aller se faire voir de ma part. Qui sait, peut-être qu'un jour cette folie cessera ?

C'est parti :

1. Qu'est ce qui vous a amené vers le design graphique ?

Un pote m'a filé photoshop 3.0 cracké quand j'étais en classe de 4eme, j'ai essayé et j'ai accroché. Je suis rentré dans le graphisme par la technique et en tant que hobbie, à base de site de team counter-strike faits sur publisher et hébergés chez Wanadoo. Au départ je ne voulais pas en faire mon métier. Après j'ai fait du droit pendant 6 mois et j'ai vu qu'il fallait trop travailler, alors j'ai choisi graphiste à la place.

2. Comment expliquez-vous votre travail à votre entourage et, plus généralement, aux personnes extérieures au milieu du design graphique ?

J'ai abandonné l'idée de faire rentrer dans la tête de mes grands parents que NON, je n'étais pas informaticien, et pour les autres je leur dit que je créé des sites internet, mais PAS le leur, inutile de demander.

3. Quelle importance accordez-vous à la connaissance et à la maîtrise des médiums et systèmes techniques qui gravitent autour du design graphique (connaissance des techniques d'impression, du développement informatique, de la photographie, de l'illustration...)

Il faut connaitre le média sur lequel on évolue et les métiers y afférant, à des degrés d'expertise variés selon sa spécialisation.

4. Comment vous situez-vous dans la chaîne graphique (relations aux développeurs, illustrateurs, photographes, imprimeurs, commerciaux ou encore graphistes exécutants) ?

La direction artistique se situe pas mal en amont du projet, vu que ça fait appel à de la conception. Après on brief les différents intervenants pour que tout s'accorde bien.

5. Dans votre relation avec vos commanditaires, privilégiez-vous une proximité et une relation d'échange ou préférez-vous garder un maximum d'autonomie ? Vous estimez-vous dans un rapport d'égalité ?

Les chefs de projets (en agence) se chargent de toutes les relations avec le client, sinon je brûlerais leur enfants et violerait leur Xantia break à la première suggestion de "mixer la piste 2 et la piste 3, en ajoutant des effets dynamique à la Apple"

6. Comment votre approche diffère t-elle lorsque vous êtes "votre propre commanditaire" (travaux personnels ou carte blanche) ?

J'ai d'abord une super idée qui tue, je fais tout en 5 minutes, puis ça va pas, puis je pète tout, puis je joue à Call of duty, puis je mets des mois à m'y recoller et à finir péniblement le truc en me disant que il faut que ça sorte et que c’est mieux que rien, puis ça sort, puis je vois que quelqu'un à fait un truc quasi similaire qui ressort pile quand j'ai fini le mien. Alors je créé un dossier V12 où je recommence tout avec une super idée.

7. Comment justifiez-vous vos tarifs auprès de vos clients ?

Quand j'étais free, je n'ai jamais justifié mes tarifs. Tu achètes ou non, on discute de la prestation, on négocie, mais je ne vais pas t'expliquer que je dois être rentable blablabla, normalement le client le sait. Tu as un presta 2× moins cher à coté ? alors pourquoi t'es encore au téléphone avec moi ? Moi j'ai fait tel et tel truc, regarde, choisis.

8. Lorsque vous intervenez sur un message, souhaitez vous rendre votre intervention visible en apportant un certain style qui vous caractérise ou, au contraire, tentez-vous de vous faire aussi transparent que possible ?

Je réponds le moins possible au gens sur internet, j'aime être discret et transparent, ne pas faire de vagues et passer inaperçu. (mais que diable vient faire cette question ici ?)

9. Lorsque vous réalisez un projet, espérez-vous que le public prendra le temps nécessaire pour comprendre les enjeux de votre intervention ou préférez vous simplifier votre approche pour toucher le public le plus large possible ?

L'un empêche l'autre ? Tout ce que je veux c'est que les objectifs de com' qu'on m'a fixé dans le brief soient remplis.

10. Quelles sont, d'après-vous, les principales différences entre un travail pour le milieu culturel/institutionnel et un travail plus commercial ?

Dans le culturel, on fait des affiches mal payées avec des gros fonds de couleurs vives et des collages à la photocopieuse pour des pièces de théâtre au décor dépouillé où des acteurs en vêtements blancs vont inexorablement se foutre à poil avant l'entracte, alors que dans des boulots commerciaux le client paye cher pour ne PAS voir ce genre de choses.

Pour moi il n'y a pas de différence : on doit répondre à des objectifs de communication, pour des cibles et des publics différents, comme à chaque fois.

11. Comment définiriez-vous dans votre domaine une forme de réussite professionnelle ?

On a pas réussi tant qu'on a pas sniffé de la coke sur des putes sur de la coke sur des putes sur de la coke sur des putes. En vrai, ça dépend de chacun non ? Quand ce qu'on créé fait mouche souvent, je pense qu'on fait déjà bien son travail.

12. Quelle production du monde du design graphique donneriez-vous comme exemple de travail réussi ?

L'affiche de la fête de la musique 2011. Je trépigne de voir la 2012, y'aura peut être de la gouache sortie du tube et des collages de photocopies avec un peu de chance.

À votre tour

Aidez les étudiants de France et de Navarre à faire leurs exercices chaque année : remplissez le questionnaire en commentaire, ou postez d'autres question pour l'enrichir. Ensuite faites tourner pour que l'interview soit tellement bien référencée que MÊME les profs vont tomber dessus en ne préparant pas leur cours, et, qui sait, si dieu veut, arrêteront d'infliger cet exercice à leurs élèves.

Merci pour eux.

Webdesign et Photoshop : qualité et productivité - retour sur l'atelier, slides, scripts et fichiers d'exemple

Julien — Sun, 17 Oct 2010 20:15:00 +0200

Pour ceux qui y étaient et les autress, voilà le résumé de mon atelier à Paris Web et tout le matériel nécessaire pour ne JAMAIS designer directement en code dans le navigateur

Ce compte-rendu sera surtout utile pour ceux qui y étaient, pour les autres certains points vont sembler incompréhensible, mais tout s’éclairera ~~quand la vidéo sera en ligne (date indéterminée)~~

La vidéo de l’atelier

UPDATE !! la vidéo est en ligne !! (Merci à Paris Web de mettre ces vidéos à disposition gratuitement)

Les fichiers

Les slides
Le script d’export JPG commenté (merci à Yannick Lepetit de l’avoir codé selon mes instruction tyranniques.) Veuillez ne pas redistribuer ce script directement sur votre site, mais plutôt de linker vers ce billet si il vous a été utile.
Le zip contenant les fichiers d’exemples pour l’exercice des variables (les photos sont là à titre d’exemples et ne sont pas libres de droit)

Quelques notes rapides au sujet des slides, pas très explicites seules.

Slide #4 sur la méthodo

Chez nous, les fichiers sont organisés en versions dans un dossier “PSD” et incrémentés sur 2 chiffres. Si il y a plusieurs pistes, elles sont chacune dans un dossier au sein du dossier PSD. Les exports sont eux dans un dossier portant la date du jour lui même dans un dossier “JPG”.

exemple :

PSD
-Axe 1
—home_01
—home_02
—home_03
—page_panier_01
-Axe 2
—home_01
—home_02
—page_panier_01

JPG
-20101710
—home_01.jpg

Dans tous les cas, il faut essayer de limiter la taille des fichiers. Un fichier de home assez complet peut tenir en moins de 50Mo (moins de 20Mo pour certains de mes fichiers). Évidemment, ça dépend des cas, il n’y a pas de règle, mais un fichier de 500Mo pour du web à de grandes chances d’être mal optimisé, sauf cas particulier.

Pensez à ranger aussi l’intérieur de vos PSD et à supprimer les calques d’essai inutiles. Prenez le reflexe de replier tous les dossiers de calques avant de sauver et fermer le fichier. Il suffit pour cela d’appuyer sur Alt et de cliquer sur la petite flèche à gauche du dossier. Pour la nomenclature inter, j’utilise des majuscules, et parfois des couleurs pour les grandes sections du site “HEAD” “CONTENT” “FOOTER” et des minuscules pour le reste.

Slide #5 quelques tips en vrac

les repères commentés
la grille à décaler au lieu de se créer un petit calque carré de x pixels comme un goret
Cocher l’option magnétisme des pixels pour les formes vectorielles
Utiliser le curseur sur l’icône devant les champs numériques pour modifier les valeurs
Dans une boite de dialogue : échap pour la fermer, touche alt pour faire apparaitre une option “rétablir”
Utiliser des les doubles masques vectoriels ET pixel pour avoir une maîtrise totale
Cocher “effets masqués par le masque de fusion” dans les styles de calques pour faire certains effets
shift + drag’n’drop de calque dans un fichier de même taille pour dupliquer en place
Possibilité d’ouvrir des fichiers depuis internet en les drag’n’droppant ou simplement en copiant/collant l’url dans la boite de dialogue “ouvir” (fonctionne avec les PNG24 sans le bug du fond noir)
utiliser les motifs pour faire des lignes pointillées ou tordues, comme sur le site MAIF
Possibilité de versionning dans les options la palette d’historique

Slide #7 partage de paramètres

Utiliser le gestionnaire de paramètres prédéfinis pour gérer et exporter les paramètres. Créez-vous des formes et des nuanciers prédéfinis sur chacun de vos projets.

Slide #8

Utilisez les variables mais seulement dans le cas de gros volumes de documents à gabarits fixes, sans formatage de texte. possibilité d’importer des données depuis excel ou équivalent. Les variables se trouvent dans images/variables/définir ou “ensemble de données” si vous les avez déjà définies.

Slide #9

utilisez le Javascript pour scripter des actions avancées et piloter Photoshop entièrement, avec des possibilité de variable et de conditions, contrairement aux actions. la doc sur les scripts se trouve dans les répertoire de Photoshop.

Merci

À tous ceux qui ont suivi cet atelier, merci de l’avoir choisi (pas évident avec l’atelier sur css3 et HTML5 de Raphaël Goetter en même temps) j’espère qu’il vous aura été utile, n’hésitez pas si vous avez des retours, des questions, ou même des scripts ou tips à partager avec moi et les autres participants.

Google font API : l'inutile "révolution"

Julien — Sun, 23 May 2010 13:26:00 +0200

Lors de google I/O, google à annoncé en grande pompe, avec ses airs de sauveurs du web qui commencent à nous être familier, une “avancée révolutionnaire” permettant de rendre le web plus beau. J’ai nommé la google fonts API

Cette “avancée” consiste à proposer une bibliothèque (assez pauvre) de typo, et il suffirait au webmaster d’insérer un simple code fourni par google pour que cette typo soit embarquée dans son site. Magie.

Vu les commentaires enthousiastes à cette news (ex : merci google, depuis le temps que j’attendais ça, le web avance), je me pose des questions sur le niveau technique des commentateurs, tant la solution de google est faible et surtout en retard. En effet, le support des typo comme le propose google est disponible depuis… Internet Explorer 4. Le dernier navigateur à s’y être mis est firefox 3.5, mais depuis sa sortie il est admis que le suport des typos non système en HTML est maitrisé et efficace. Google n’apporte strictement rien avec sa “font API”, si ce n’est un effet de buzz.

Voici les différents inconvénients de la technique google :

Une bibliothèque de typo très limitée (18 typos non exclusives)
Une compatibilité sur les navigateurs imparfaite
Une fausse simplicité du code qui e fait appelle d’autres portions de codes
l’utilisation de Javascript (pas de JS, pas de typo)
Les typos hébergées par google
Un appel au site de google à chaque fois qu’une typo est demandée

En fait le principe est le même que quand vous appelez jQuery chez google au lieu de l’héberger chez vous par exemple.

Vous pouvez faire très facilement ce que propose google, et même bien mieux, avec plus de facilité

Utilisez le code CSS @font-face, compatible sur tous les navigateurs du marché (IE 4+, firefox 3.5+, safari, safari mobile iphone ipad, Chrome, Chrome lite android, Opéra… Comme vous le voyez c’est très bien implémenté et très robuste)
Il sera fonctionnel même avec le JS désactivé
Vous avez accès à toutes les typos que vous souhaitez (y compris à celle que vous avez créé exprès pour votre site) et non pas à une dizaine (pourvu que leur licence le permette)
La typo est hébergée sur votre serveur
le code nécessaire est très simple
C’est une implémentation standard qui ne vous oblige pas à dépendre d’une entreprise tierce pour le rendu de votre site

Je suis assez déçu que google joue les chevaliers blancs sur ce coup alors qu’il ne fait que compliquer la tâche des gens, les obligent à passer par leur serveur et n’encourage pas les standard. Le seul point positif c’est peut être que comme ça, la technique va être connu et que les gens vont enfin utiliser des typos non standard dans les sites web.

Si la technique vous intéresse, voici quelques ressources vous permettant d’inclure de la typo non standard en html :

Des typos open sources gratuites sous licence SIL (dont certaines utilisées dans la bibliothèque google. Je vous recommande chaudement la célèbre inkboyfont en licence SIL (aperçu)
Des typos gratuites sur un site très bien fait, avec des packs prêt à l’emploi
un outil vous permettant de transformer une typo existante en typo compatible tous navigateurs
Une fonderie spécialisée dans les typos web ready
Les licences typos les plus connues (Meta, Din) disponibles pour le web

Tout ce dont vous avez besoin pour que ça marche c’est une typo, et ce malheureux bout de code dans votre CSS:

@font-face {
  font-family: 'matypo';
  src: url('matypo.ttf');
  src: local('matypo.ttf'),
  url('matypo.woff') format('woff'), url('matypo.ttf') format('truetype');
}

la dernière ligne est là pour assurer une compatibilité totale “bulletproof” si vous avez plusieurs formats de typo

Voilà, c’est tout ce dont vous avez besoin !! Vous appelez la typo une seule fois dans votre CSS, et ensuite vous l’incluez dans votre code comme si c’était une typo système.

Vous n’avez quand même pas besoin de google pour ça non ? Si la réponse était “oui”, il serait temps de vous mettre à jour techniquement

Profession graphiste indépendant : Le livre de référence ultime pour tout graphiste qui se lance

Julien — Sat, 08 May 2010 18:03:00 +0200

Sonnez hautbois, résonnez musette, non je ne suis pas mort, et seule une très bonne raison pouvais me faire sortir de mon mutisme. M. Julien Moya (assisté de M. Éric Delamarre) nous a commis un bouquin, et quel bouquin !!! La référence ultime en matière de graphisme freelance. l’ouvrage que tout le monde aurait rêvé d’avoir quand il s’est lancé en indépendant. Si vous avez le petit livre jaune, c’est bien, mais achetez le gros livre rose, il défonce tout.

Objectivement.

C’est un condensé de bonnes pratiques, d’exemples concret, d’interviews, de documents-types, d’arnaques à éviter, le tout écrit simplement et de manière pragmatique. Si vous venez sur ce blog ne cherchez pas : il vous faut acheter ce bouquin.

Même si vous êtes déjà installés, ce bouquin ne pourra que vous être utile dans votre pratique au quotidien, et vous apprendrez surement des trucs (j’en ai appris en le feuilletant !). Également, il est un outil précieux pour tous ceux à qui il manque des infos pratiques sur la manière de se comporter devant un client, comment prospecter, fixer ses prix, gérer ses projets.

Je pense sincèrement que ce bouquin peut faire gagner un an, voire deux, à un freelance qui se jette à l’eau, en lui évitant vraiment pas mal de galères. Il agrège également toutes les questions courantes que l’on trouve sur les forums et les commentaires de ce blog, en un seul ouvrage. Bref, si vous cherchez une source fiable et centralisée, et que vous ne voulez pas chercher des heures la réponse sur internet, achetez ce bouquin.

Cerise sur le gâteau, vous retrouverez page 24 le merveilleux schéma qui a fait mon succès dans les diners en ville, et dans les ressources rien moins qu’un lien vers marie///julien. la classe

Retrouvez toutes les infos utiles (sommaires, extraits) sur le livre “Profession graphiste indépendant”, éditions eyrolles, 255 pages.

Et si on se "faisait la main", mais sans donner son travail ?

Julien — Sun, 20 Apr 2008 00:53:00 +0200

Avec les récents rebondissements de l'histoire Wilogo, je me suis rendu compte que beaucoup de graphistes étaient contents de participer à des plateformes de crowdsourcing, car ça leur permettrait de "se faire la main" en attendant d'avoir des vrais clients ou de se lancer pour de bon. J'ai critiqué parfois assez durement ce mode de fonctionnement, mais en y réfléchissant, j'ai vu qu'il n'y avait pas beaucoup d'autres alternatives. J'ai donc eu une idée sur laquelle j'aimerai avoir votre avis.

Je trouve le fait d'offrir gratuitement son travail à une entreprise privée sous couvert de "s'entrainer" ou de "se faire la main" complètement inapproprié (voir stupide), mais force est de constater que de nombreuses personnes voulant se lancer dans le graphisme ont recours à ce genre "d'appel d'offres", et que de nombreuses entreprises exploitent cette naïveté pour faire du profit en revendant ces prestations qui ne leur ont rien couté.

Je me suis longtemps demandé ce qui poussait les gens à se faire exploiter, mais en y regardant de plus près, et à la lumière de certains commentaires récents, je commence à comprendre ce qui motive ces graphistes en devenir.

Constat

De nombreuses personnes veulent se lancer dans le graphisme, mais ne sont pas sures d'elles, elles cherchent donc un test pour voir ce qu'elles valent
Comme elles n'ont pas d'expérience, il est difficile de trouver un emploi qui permettrai d'exercer ses talents (le fameux cercle vicieux de pas d'xp = pas de boulot = pas d'xp)
N'étant pas encore sures de leur voie, et de sa viabilité, elle ne veulent pas s'engager à faire des démarches contraignantes, pour se lancer en free par exemple
Certaines entreprises exploitent donc ce filon, en proposant de faire travailler des débutants pour de vrais clients, ou pour des appels d'offres réels sous forme de concours, sous le prétexte de s'entrainer "en condition réelles" et d'avoir de la visibilité ainsi que des avis de nombreux autres graphistes
Ainsi, les graphistes ont l'illusion de travailler "pour de bon" même si c'est gratuitement et qu'en réalité les conditions de travail sont bien éloignées du métier réel de graphiste, même si certaines plateforme tentent d'enrober le tout dans du jargon technique pour faire plus sérieux
Ces entreprises se forgent l'image de "donner leur chance" à tout le monde en leur "permettant" de répondre à des demandes spécifiques, gratuitement
Les graphistes sont maintenus dans l'ignorance totale des bonnes pratiques et des tarifs du métier, car le but de ces plateforme n'est pas pédagogique, mais plutôt d'obtenir des prestations commercialisables avec une plu-value, dans une logique de production, ce qui peu à peu tire la profession vers le bas.

Ce constat me désespère, et je ne comprends vraiment pas ce besoin d'aller donner son travail, avec les dégâts collatéraux que ça peut entrainer pour le profession, sous le seul prétexte de s'entrainer. Il y'a bien d'autres façons de se faire la main, notamment dans des stages, de l'alternance, ou en travaillant pour des projets associatifs ou open source.

Comme il est parfois difficile de faire entendre son point de vue devant des pratiques qui tendent à s'enraciner, j'ai pensé que le mieux était encore de proposer une alternative sérieuse à tous ces gens qui se disent aider les graphistes mais qui en réalité les exploitent, pour que tout le monde y trouve son compte. J'ai donc un projet en tête, mais je ne sais pas encore si c'est viable ou pas, et si ça peut être intéressant pour les personnes qui fréquentent les plateformes de perverted crowdsourcing. voilà l'idée:

Projet "Graphist Training Facility"

Régulièrement, un projet sera soumis sur ce blog, avec un cahier des charge réel et complet. Pour des raisons évidente, il sera un peu modifié et anonymisé, mais la base sera un brief client existant, que je prendrai dans mes archives ou chez d'autres free qui voudront bien se prêter au jeu. En gros pas le style de brief avec écrit "je veux un logo bleu, j'aime le bleu. Et le web2.0 aussi. Le but sera de répondre à une vraie problématique.
D'après ce cahier des charges, il faudra faire une proposition commerciale fictive (un devis) en essayant d'être le plus juste possible. Les devis seront soumis aux commentaires pour des explications ou des ajustements, le tout dans un but pédagogique
Ensuite, ceux que ça tente pourront essayer de répondre à la demande, pour voir ce qu'ils sont capable de proposer et comment ils se situent par rapport aux autres participants, et ils bénéficieront des commentaires des autres membres et/ou d'un jury qualifié (je ne sais pas encore comment mettre ça en place)
Évidemment, vos créations restent votre entière propriété, et il est hors de question de les réutiliser ou de les vendre, ou même de se faire une vitrine quelconque avec.
Pour le prix, il n'y a rien à gagner, c'est juste un moyen d'acceder à de vrais cahiers des charges et profiter de conseils de personnes installées depuis longtemps dans ce métier
Je pense tabler sur un cahier des charges par mois environ, pour éviter l'effet "rush" et que les gens aient le temps de faire des propositions construites et intelligentes.

Voilà, je sais pas si c'est l'idée du siècle, si ça se trouve la majorité va trouver ça complètement naze et/ou inutile, et le concept est surement à affiner, et c'est justement pour ça que j'attends vos opinions dessus, surtout de la part de ceux qui recherchent des challenges ou de l'entrainement. Vos avis et critiques là dessus m'intéressent beaucoup, ainsi que vos éventuelles propositions pour affiner ce projet.

Nouveautés, ressources, autopromo

Julien — Sun, 09 Dec 2007 19:11:00 +0100

Je profite d'une trêve ce week-end pour vous noyer sous les billets, profitez-en car ça ne va pas durer ! Je vous conseille de les économiser en lisant pieusement un petit bout chaque soir, avant que votre maman vienne vous border dans votre couette Harry Potter. Si vous trouvez ça injuste d'être obligé d'éteindre à 20h, vous pourrez continuer à lire avec la lampe de poche, si vous vous faites pincer, on se connait pas.

Coté nouveautés d'abord:

les smileys reviennent, et ils sont pas contents. Non en fait je me suis rendu compte qu'ils avaient sautés mystérieusement du template (je me demande quelle force maléfique est allée se connecter à mon FTP pour virer la ligne de code et ne rien changer d'autre ). Voilà c'est réparé maintenant.

Je ne m'en étais pas aperçu plus tôt vu que je fais partie des 2 privilégiés de ce blog qui n'ont pas besoin du formulaire pour poster des commentaires.
Goulven, j'ai retiré ton smiley préféré, car il me flashait copieusement la gueule lorsque je rédigeais des messages, provoquant convulsions et bave aux lèvres, et ça faisait désordre, mais ne t'inquiètes pas, il a juste disparu de la barre, pour l'obtenir il te suffit de taper CHOC entre 2×2 points ( : ) comme ça :

J'ai installé le plug-in citation, qui est parfaitement inutile donc tellement indispensable, vous avez maintenant droit à une citation du jour située au dessus du formulaire de commentaires, on ne sait jamais, ça peut peut être vous inspirer ou vous remettre sur la voie de la sagesse au moment de poster. Les citations sont essentiellement tirées de bashfr, des slogans lafraise ou de wikiquotes (+ certaines de mon cru)
Comme j'avais un peu de temps, j'ai produit un peu de matos promotionnel, on ne sait jamais, ça peut toujours servir dans notre but avoué de conquérir le web. Ne paniquez pas, c'est rien d'affolant: quelques boutons et une bannière. Si vous voulez nous faire de la pub, sur les forums de graphistes, votre blog ou autres, ne vous privez pas ! (en signature et si vous trouvez le blog utile hein, pas flooder tous les forums avec un topic dédié, je vous ai à l'œil.)

voici les quelques boutons:

un petit bouton, classique
une variante
à utiliser si par hasard vous détectez des concours limites. la définition des différents types se trouve ici.

Un petit visuel, ~~signé par~~ inspiré de René Magritte:

Et une version "Magritte2.0" pour ceux qui voudraient quand même faire de la pub, mais pas massacrer leur magnifique design web2.0 avec de l'art décadent de 1929 (il ne faut pas les effrayer), j'ai bricolé un web2.0style à l'arrache.

C'est dispo en plusieurs tailles dans l'archive jointe au billet, qui comprend aussi les boutons présentés plus haut.

La bibliographie du parfait petit graphiste

Marie-Anaïs — Sun, 21 Oct 2007 16:49:00 +0200

Voici une petite liste non exhaustive des bouquins à avoir chez soi, qui pourront vous aider techniquement ou simplement vous inspirer.

Guide du graphiste indépendant

Auteur: Christelle Cappo-Chichi
Éditeur: Pyramyd
Date: 2006
N°ISBN: 2-910565-80-7
Prix : 14.90 €

Alors tout d'abord le plus indispensable de tous (que vous devriez déjà avoir entre vos mains) Le guide du Graphiste Indépendant. C'est une mine d'infos pour quiconque souhaite se lancer en freelance, il aborde tout les sujets importants comme entre autres les démarches administratives, les droits d'auteurs, la rémunération, comment s'organiser etc.. Donc voilà courez l'acheter, si ce n'est pas déjà fait.

La chaine graphique

Auteur: Kaj Johansson
Éditeur: Eyrolles
Date: 2005
N°ISBN: 2-212-11336-6
Prix : 52.00 €

Un livre à posséder absolument pour comprendre les rouages et les nombreux aspects du métier. Plutôt orienté print, c'est une énorme référence pour tout graphiste. Il est très complet et vraiment très pratique. Il pourra vous être d'un grand secours dans vos relations avec les imprimeurs et pour comprendre tout les aspects techniques de l'imprimerie.

Le logo (2eme édition)

Auteur: Christian Delorme
Éditeur: Editions d'organisation
Date: 1999
N°ISBN: 2-7081-2218-5
Prix : 28.50 € (attention apparemment il n'est plus édité)

Le livre à acheter si l'on s'intéresse à la charte graphique et au logo, et pour enrichir sa culture graphique. Très concis, ce livre est un excellent récapitulatif des notions importantes. Il aborde, entre autres, la typologie, la sémantique, le graphisme et la typographie. Il décortique le logo dans tout les sens et aborde tout les aspects de la création en passant par les tests de qualités, le prix d'un logo et les bons usages à pratiquer.

À bâtons rompus

Auteur: Adrian Frutiger
Éditeur: Atelier Perrousseaux
Date: 2003
N°ISBN: 2-911220-08-0
Prix : 24.00 €

Un maitre de la typographie donne un petit cours. Les origines de l'écriture et son évolution, le processus de lecture, l'apparition des caractères typographiques, les règles à suivre pour la conception d'une police et les grandes familles de caractères, tout ces sujets sont abordés dans ce livre très concis, bien illustré, précis.

L'harmonie des couleurs le guide

Auteur: Tina Sutton
Éditeur: Pyramyd
Date: 2004
N°ISBN: 2-910565-73-4
Prix : 27.00 €

LE guide des couleurs, avec symboliques, concordances etc...

Maquette et mise en page

Auteur: Pierre Duplan
Éditeur: Editions du Cercle de la librairie
Date: 2004
N°ISBN: 2-7654-0876-9
Prix : 55.00 €

Un très bon et complet récapitulatif sur la mise en page et la typographie

Créer des .ico (pour des favicon par exemple) directement avec photoshop

Julien — Fri, 19 Oct 2007 21:45:00 +0200

Allez, après "les majuscules accentuées facile" c'est la fête à la "ressource qui simplifie la vie" ce soir avec ce petit plugin opensource (le 1er de la liste) vous permettant de lire et d'écrire les fichiers icônes (.ico) dans photoshop, comme si c'était en natif !!

Il suffit de copier un petit fichier dans le répertoire adéquat de photoshop et le tour est joué. Vous pourrez ensuite créer n'importe quelle image pourvu qu'elle soit en 256 couleurs et ne dépasse pas une certaine taille (256px de coté me semble t'il) et l'enregistrer en .ico comme pour n'importe quel autre format, c'est à dire en passant par fichier > enregistrer sous et en choisissant le format approprié.

Avec tous les formats supporté par photoshop, je trouvais dommage que le .ico ne le soit pas, alors que c'est très basiquement une image 256couleurs carré avec une taille limitée.

L'icône sera immédiatement utilisable dans n'importe quelle appli, et vous pourrez l'insérer comme favicon dans votre site avec ce simple code html à inclure dans le header:

<link rel="icon" href="http://www.mariejulien.com/moncheminamoi/favicon.ico" type="image/ico" />

Notez que le format .ico est le seul qui est recommandé par le W3C pour faire des favicon, étant donné que sémantiquement, un .ico c'est une icone, et qu'en plus il passe partout, y compris sur linux et sur IE6 par exemple.

Le plugin marche sous win et mac, testé avec succès sur la CS3 à ma maison . La page est truffée d'autres plugin, souvent en open source, je ne les connais pas mais peut être trouverez-vous d'autres choses sympa !

Accentuez facilement vos majuscules, même sous windows

Julien — Fri, 19 Oct 2007 21:06:00 +0200

Malgré une croyance populaire, l'accentuation des majuscules en français est obligatoire, mais quand on est sous windows, c'est pas pratique du tout étant donné qu'il faut taper des codes barbares pour avoir un malheureux "É"; Heureusement, il existe une solution !

D'abord, un peu d'histoire pour faire le mariole: la croyance que les majuscules doivent être occultées en français date de la seconde guerre mondiale, lors de laquelle nombre d'imprimerie avaient été bombardées. Elles ont ensuite été reconstruites en utilisant du matériel d'importation allié, majoritairement anglais ou américain, peuples barbares qui ignoraient superbement les accents et leurs subtilitées, et encore plus les majuscules accentuées. Cette mauvaise habitude a ensuite été prolongée avec l'arrivée des machines à écrire d'origine américaine, puis des premiers jeux de caractères informatiques qui zappaient tout simplement les caractères autres que américain.

La mauvaise habitude a perdurée avec le développement de l'informatique et le quasi monopole de tonton billou et de son windows, système sur lequel il est très difficile d'obtenir des majuscules accentuées, à moins de pouvoir se rappeler du tac au tac que taper simultanément alt+144 ça donne un "É", ou d'avoir sans cesse ça table de caractères/de glyphes à disposition (le truc chiant quoi )

pourtant l'académie française est formelle sur ce point:

Accentuation des majuscules

Quant à l’utilisation des accents sur les majuscules, il est malheureusement manifeste que l’usage est flottant. On observe dans les textes manuscrits une tendance certaine à l’omission des accents. Il en va de même dans les textes dactylographiés, en raison notamment des possibilités limitées qu’offrent les machines traditionnelles. En typographie, enfin, certains suppriment tous les accents sur les capitales sous prétexte de modernisme, en fait pour réduire les frais de composition.

Il convient cependant d’observer qu’en français, l’accent a pleine valeur orthographique. Son absence ralentit la lecture, fait hésiter sur la prononciation, et peut même induire en erreur.

On veille donc, en bonne typographie, à utiliser systématiquement les capitales accentuées, y compris la préposition À, comme le font bien sûr tous les dictionnaires, à commencer par le Dictionnaire de l’Académie française, ou les grammaires, comme le Bon usage de Grevisse, mais aussi l’Imprimerie nationale, la Bibliothèque de la Pléiade, etc. Quant aux textes manuscrits ou dactylographiés, il est évident que leurs auteurs, dans un souci de clarté et de correction, auraient tout intérêt à suivre également cette règle, en tirant éventuellement parti des ressources nouvelles que peuvent offrir les traitements de texte modernes.

Il en va de même pour le tréma et la cédille.

C'est vrai que sans les accents, c'est vite incompréhensible, voilà quelques exemples tirés de wikipédia:

L'ENFANT AFFOLE SON PERE TOMBE ou le célèbre JAURES ASSASSINE. Les majuscules servent parfois à distinguer deux mots de graphie par ailleurs identique : un état n'est pas la même chose qu'un État.
LE GOUVERNEMENT SUBVENTIONNE L'INDUSTRIE DU POISSON SALE.
LES FILS LEGITIMES DE LOUIS XIV. Ici, l'ambiguïté est grave, puisque le sens de la phrase peut s'en trouver radicalement changé : les fils légitimes sont justement le complet opposé des fils légitimés !
LES AVOCATS SERONT JUGES.
LE PALAIS DES CONGRES.
LA RETRAITE A 42 ANS.
SALLE DES INTERNES (dans un asile d'aliénés ?)
UN INTERNE TUE (quatre possibilités)

Mais alors que faire ?

On peut légitimement se demander pourquoi windows n'utilise pas le même système que linux (ou que mac, mais mac c'est moisi comme mapage clavier, et même moisi tout court dans son ensemble ) pour accentuer les majuscules, à savoir se débrouiller pour que "caps lock + é" ça donne "É" et pas "2", car ça les amis, c'est quand même bien appréciable.

Et bien à cette question existentielle je répondrai que si il n'y avait que ça comme problème avec windows, ce serait moindre mal.

Bref, tout ça pour vous dire que j'ai trouvé un logiciel bien utile pour se faire un mapage clavier aux petits oignons (et non pas "nappage clavier aux petits oignons", pour ça je vous fait confiance, vous n'avez pas besoin de soft), c'est microsoft qui produit ça (sont vicieux quand même chez crosoft, ils pourraient pas simplement corriger le problème ?) et ça s'appelle Microsoft Keyboard Layout Creator 1.4 et c'est téléchargeable gratuitement, à condition bien sûr d'avoir un windows légal, de se galérer avec WGA puis d'installer .NET Framework 2.0 et de faire la danse du ventre devant son écran avec pour seul vêtement un pagne constitué de CD de windows millenium (je me suis toujours demandé si chez microsoft y'avait pas un mec dont la tache est de compliquer la vie des utilisateurs, si c'est le cas, il faut l'augmenter direct ! )

Une fois que vous avez fait tout ça, vous pourrez vous créer un nouveaux clavier à votre convenance pour par exemple écrire cømme dåns Åsterix et lå grånde tråversée (ça va, on s'amuse comme on peut ). Apparement c'est quand même un peu dur à configurer.

Heureusement, il y 'a un mec qui s'y est collé avant nous, et nous a concocté un mapage de clavier FR aux petits oignons avec l'appli microsoft, optimisé pour la mise en page en plus, je me demande encore pourquoi vous vous plaignez !! son mapage est nickel, il comprend les majuscules accentuées "unix style" (c-a-d avec le caps lock) plus quelques autres joyeusetés du style de l'espace insécable en appuyant simplement sur altGR+Espace, ou encore les guillemets typographiques ou le œ !! Autant vous dire que ce mec ne sera jamais embauché chez microsoft car son package est très simple d'installation, il suffit de double cliquer sur un .msi et de choisir le nouveau clavier et le tour est joué, sans compter qu'en plus il file ses sources si vous voulez paufiner et que le tout est sous licence creative commons !!

un petit aperçu de ce clavier:

J'ai testé pour vous, ça fonctionne parfaitement, seule ombre au tableau: mystérieusement ça ne marche pas sur firefox, alors que ça marche sous opéra et IE7 (et tous les autres applis en fait puisque c'est un clavier in standard) Si quelqu'un sait pourquoi je veux bien la réponse !!

En attendant ce blog continuera donc d'être écrit comme un sagouin sans cédilles aux majuscules ni "e dans l'o", ça vous apprendra ! (c'est quand même dommage que ça marche pas dans firefox vu que c'est l'appli dont je me sers le plus pour écrire )

//Edit: Mais non en fait c'est tout bonnement magnifique car le clavier marche aussi sous mon firefoxounet, il suffisait de redémarrer l'ordi !! À UTILISER SANS MODÉRATION !!

trousse à outil de l'infographiste: les extensions firefox

Julien — Sat, 08 Sep 2007 13:16:00 +0200

Le miracle de firefox, c'est qu'on peut augmenter grandement ses capacités en installant des extensions qui vous simplifient la vie, quelle que soit la tache que vous accomplissez sur le web. Je vais vous fournir la liste des extensions qui me sont indispensables et me font gagner du temps quand je surfe ou que je développe des sites web.

Je vais cibler ce billet sur les extensions propres à l'infographie, en omettant volontairement toutes les extensions indispensables qui n'ont aucun rapport, ne vous étonnez donc pas si il y a des manques comme l'excellent adblock+, tabmix + ou autres. J'ai par contre ajouté des "mini-extensions" très pratiques qui devraient être fournie en standard avec firefox.

evidemment si j'en ai oublié dans le lot, faites partager votre expérience en commentaire.

les indispensables

Web developer toolbar: un classique que vous devez déjà tous connaitre, c'est une barre qui permet de faire tout ce dont un webdesigner a besoin, de la validation du code à l'édition à la volée, en passant par l'affichage de règles, la simulation de résolutions pour tester son site, la gestion des images et l'affichage de toutes les infos possible sur un mise en page html, bref, un must.
Firebug: Au départ cette extension ne figurait pas dans ma liste car je l'avais essayé à la va vite et désinstallée car je trouvais qu'elle faisait doublons avec webdeveloper, un oubli impardonnable corrigé par un collègue américain du sud-ouest . Après un court (2eme) essai je me suis aperçu que si dans les fonctions on peut penser que ça fait doublons, dans les faits firebug est ZE extensions pour faire du layout css, avec liste des propriétés hérités, possibilités de changer les valeurs à la volée, d'activer/désactiver des propriétés, aperçu des margin/padding etc directement dans la page (pratique pour voir les padding hérités et autres conneries qui nous font chercher 3h le problème) etc... bref beaucoup plus souple que webdevelopper pour cet usage, je regrette de ne pas y avoir prété plus d'attention au départ, j'aurai gagné pas mal de temps pour faire le theme de ce blog.Ceci dit je pense que je vais l'utiliser pour optimiser la feuille de style et éviter les doublons.
Fireftp: un client ftp inclus dans firefox, je n'utilise plus que ça pour uploader mes fichiers, c'est très pratique.
ColorZilla: une extension permettant entre autre de "piquer" une couleur et de l'enregistrer automatiquement dans le presse papier dans le format voulu, rvb et hexa, un must pour avoir les références couleurs qui vous plaisent !
Flash Switcher: permet de switcher entre les versions de flash pour tester son site et voir si il marchera sur les lecteurs pas à jour.
Google pagerank status: pour avoir le pagerank google en un seul coup d'oeil, pratique pour le référencement
ImageZoom: pour zoomer ou dezoomer sur n'importe quelle image affichée, très pratique pour voir les détails de certaines photos
Save image in folder: un énorme gain de temps pour enregistrer les images trouvées sur le web: il suffit de pré-configurer des dossiers (genre mes images, images macro, portraits etc...) puis de faire un clic droit sur l'image et se voir proposer l'enregistrement dans un de ses dossiers ! beaucoup plus pratique pour trier ses photos à la volée et éviter le fastidieux "enregistrer l'image sous... chercher le dossier...enregistrer"
IEtab: vous connaissez aussi surement, ça permet d'avoir le moteur d'internet explorer dans firefox, c'est très pratique pour voir des sites interdits aux autres navigateurs qu'IE, et pour tester une mise en page sans changer de navigateur. ATTENTION: j'ai déjà remarqué des différences entre le rendu d'IE tab et le vrai IE, ne basez donc pas tous vos tests là dessus (ce phénomène est d'ailleurs inexplicable vu que c'est le même moteur qui est utilisé)
Screengrab: extension permettant de faire un screenshot de la page web en cours et de l'enregistrer directement. Vous pouvez faire une capture d'écran de la portion visible, de l'intégralité de la page ou d'une selection précise.

celles qui font gagner du temps

Hashcoloured tabs +: permet d'ajouter un carré de couleur aux sites qui n'ont pas de favicon, en se basant sur l'url du site. ça n'a l'air de rien, mais quand on à 15 onglets ouverts on se rends compte de l'utilité du machin pour retrouver sa page
Faviconize tab: Une extension qui permet de réduire l'onglet à la seule taille de la favicon. C'est un gros gain de place dans la barre d'onglets, car il y a plein de sites qui n'ont pas besoin d'avoir un onglet complet. Je m'en sert par exemple pour gmail, netvibes, google calendar, enfin bref les sites dont la favicon est parlante et le titre de page pas important. Vous pouvez "faviconiser" un onglet en faisant alt+clic ou en définissant à l'avance les sites ou domaines devant être "faviconisés".
Linkification: indispensable ! transforme tous les liens textuels en vrais liens clicables de manière 100% transparente, je ne peux plus m'en passer !! Avant je rechignait à copier/coller les longs liens dans un nouvel onglet, le glisser-déposer dans la barre ne marchent pas à tous les coups, maintenant je ne me pose plus de questions !
Locationbar²: une extension qui met en valeur des éléments de l'url comme le domaine pour une lecture immédiate, très pratique pour repérer le site sur lequel on se trouve
Resizeable Textarea: une extension invisible dont je ne pourrai plus me passer non plus: elle permet de redimensionner les zones de textes, tout simplement. très pratique sur les forums ou les formulaires où on ne vous accorde que 5 lignes de texte pour écrire votre message, vous obligeant à scroller pour vous relire

les moteurs de recherches

les extensions c'est bien beau, mais firefox permet aussi d'inclure des moteurs de recherches qui peuvent faciliter grandement votre vie d'infographiste/webdesigner

Wikipedia images: recherche des images libres de droits dans la bibliothèque wikipédia
documentation css/html/actionscript mediabox: cherche dans la doc mediabox
creative commons: permet de chercher du contenu sous cette licence
flickr tags: permet de chercher des images sur flickr