Initié par Fotolia, en partenariat avec Wisibility et Amkashop, le projet Ten présentera pendant 10 mois, 10 artistes français à travers une de leurs créations numériques. Chacune de ces réalisations sera disponible au téléchargement au format .PSD, et ce pendant 24 heures. Une belle occasion pour découvrir les méthodes et techniques de ces 10 artistes de talent, puisque chaque fichier donnera bien entendu accès aux calques et aux divers effets, styles, motifs, filtres ou autres ressources utilisées. Une vidéo de making-of accompagnera également chaque fichier et permettra de découvrir les dessous de la création de l’image.

Les 10 artistes du projet Ten

Pour réaliser ce projet, Fotolia a sélectionné dix artistes de renommée internationale, tous issus du secteur de la création numérique :

• SOEMONE (Pierre Doucin) : http://www.soemone.com
• TRUST IN ELEMENTS (Xavier Bourdil) : http://www.trustinelements.com
• TAKESHI (Emeric Trahand) : http://cargocollective.com/stillontherun
• HELLOHIKIMORI : http://hellohikimori.com
• JOOLZ (Julien Morel) : http://joolz.fr/folio
• FRANÇOIS LEROY : http://www.graphic-travelling.com
• PULSSART (Adrien Donot) : http://www.pulssart.fr
• XERTY (Brice Chaplet) : http://cargocollective.com/mrxerty
• NEOPEN (Nicolas André) : http://leneopen.free.fr/resume
• ELROY (Damin Vignaux) : http://www.elroy.fr

10 artistes, 10 thèmes, 10 PSD, pendant 10 mois. Le coup d’envoi est donc donné ! Téléchargez dès aujourd’hui le premier PSD.

Je suis probablement en retard sur la trouvaille, mais peu importe, je suis ravi d’avoir enfin trouvé ce petit outil, qui me faisait tellement défaut sur mon super Mac (j’entend des « OOoouuUuuh » dans l’assistance. C’est pas sympa).

Au même titre que « La Boîte à Couleur« , utilitaire disponible sur Windows qui m’aura accompagné quelques années, « ColorChooser » est une véritable pipette de combat. Elle vous permet de sélectionner une couleur n’importe où sur votre écran, d’en récupérer le code au format qui vous sied, de le conserver dans votre presse-papier, et vous offre quelques options intéressantes, comme la possibilité de créer des raccourcis clavier, créer des palettes personnalisées, etc.

J’en entends déjà me dire « c’est un logiciel payant ». Certes, mais déraisonnablement bon marché (0,79€ en ce moment sur l’AppStore). Ce qui lui donne un rapport prix/utilité dépassant l’entendement.

« _Ouais, mais ils auraient pu le faire gratuit, quand même »

« _Oui, ils auraient pu. Mais non (et paf) »

J’sais pas vous, mais moi j’suis bien content.

Ah oui, petit inconvénient pour certains : il ne fonctionne qu’à partir de Snow Leopard.

Créé par deux créatifs lillois (un indice ? ils sont tous deux rédacteurs chez ikomeo… :-p), The Mailing Book constitue une véritable source d’inspiration et de veille dédiée aux graphistes et créatifs web, qui ont à présent à disposition une belle galerie en ligne pour garder un oeil sur les tendances créatives en terme d’emailing.

Vous pouvez visionner les dernières newsletters par secteur d’activité, par marque ou même par thématique (soldes, ventes privées, Noël, etc).

Simple, pratique, efficace (et sans musique… bon ok je –>). Enjoy !

Basée sur une interface similaire aux autres produits Adobe, l’application repose sur un environnement de travail très proche de Flash Pro : présence de la timeline en bas, panneaux repositionnables, animations de positions, tailles, couleurs, etc. Nul besoin d’être un codeur fou pour réaliser ses animations et interactions en HTML5.

L'interface d'Adobe Edge

Edge vous permettra principalement de créer du contenu animé tel que des bannières publicitaires, ou de faire évoluer les pages de vos sites avec de nouvelles interactions, Adobe Edge n’intervenant pas sur le code HTML/CSS existant.

L’application Adobe Edge est une « preview release », une première version que les équipes d’Adobe affineront et perfectionneront en fonction des retours des utilisateurs. Sa version définitive sera prévue pour 2012.

Pour en savoir un peu plus sur le logiciel Adobe Edge :

Pour la petite histoire, cette publicité fait suite au concours Challenge HTML5 de Google. Ce concours invitait les agences créatives et les freelances à concevoir un masthead à l’aide de la technologie DoubleClick Rich Media Studio de google et du HTML5.

Il va sans dire que les résultats sont tout simplement bluffants et on assiste bien sagement à un changement radical de la manière de voir et d’utiliser la publicité via ce nouveau support.

Bien que ce concours ait eu lieu également en Angleterre, Allemagne et Italie, nous allons donc prendre comme exemple celui de la France, à travers  la publicité « Vue du Ciel », fruit d’un remarquable travail réalisé par les agences Biborg et Alpha Layer.

Les concepteurs de Vue du Ciel décrivent leur projet comme étant une véritable expérience divertissante et ludique autour de la thématique du voyage et de la découverte. Et en effet, ce masthead invite l’internaute dans une nouvelle expérience mélangeant interactivité et puissance de la cartographie google. A travers cette publicité, il nous est possible de contrôler et diriger une montgolfière (personnalisable au passage), naviguer et zoomer dans les lieux les plus connus de France.

Je vous laisse découvrir le projet en image :

Etape 1 : Introduction

Etape 2 : Personnalisation

Etape 3 : la navigation

Etape 4 : nous survolons la Grand Place de Lille !

Un très beau travail  qui se doit d’être salué et mis en avant, et qui laisse penser que la publicité en HTML5 a de beaux jours devant elle !

L’effet de parallaxe

Si vous ignoriez le terme, vous verrez que vous avez sans doute parcouru un de ces sites récemment tant cette nouvelle tendance s’est accrue ces derniers temps sur la toile. Alors de quoi s’agit-il exactement ?
L’effet de parallaxe appliqué au webdesign consiste à faire déplacer plusieurs images réparties sur différents plans. Ce mouvement, souvent associé au scroll ou au mouvement de souris,  permet de créer un effet de profondeur et de vitesse lors de la navigation sur le site. Utilisé à bon escient, cet effet apporte une expérience originale et parfois tout à fait surprenante.

Son fonctionnement

Contrairement à ce que l’on peut penser face à la recrudescence de cet effet sur les sites web actuels, l’effet de parallaxe n’est pas nouveau. D’abord créé en flash, l’effet de parallaxe est devenu très rapidement accessible grâce à l’utilisation des css et de la propriété background. Une technique rendue encore plus maniable grâce à Jquery et Css3 et sa capacité à pouvoir interpréter plusieurs images de fond pour un seul élément. Ensuite, le phénomène a surtout été lancé par Nike et son superbe site Nike Better World, qui utilise la parallaxe à merveille.

Concrètement, l’effet de parallaxe se base sur la propriété css background-position. En attribuant une valeur différente (en x ou en y selon le mouvement que vous souhaitez créer) à chacun de vos arrière-plans, vous allez naturellement créer un effet de flottement et de vitesse à vos images de fond lors du scroll. Ajoutez à ça une couche de jQuery (là, je passe mon tour !) et le tour est joué. Bon, l’explication est volontairement très brève, voici d’excellents tutos qui se chargent très bien de vous éclairer sur l’aspect technique :

• The parallax effects with jQuery, un excellent tuto illustré et détaillé par Franck Maurin, basé sur le site Nike Better World
• jQuery and CSS single page portfolio, a vertical parallax navigation experiment, un tuto très complet avec page de démo et sources à télécharger

Quelques exemples réussis

Je dis « réussis », car vous vous en doutez, qui dit « tendance », dit « à la mode » et c’est là que la bât blesse… La parallaxe en webdesign fait son effet, et l’originalité, c’est plutôt vendeur. Si bien que cette tendance foisonne un peu partout, au point que les créatifs en oublient parfois la cible finale : l’utilisateur. Problèmes de lisibilité, complexité de navigation, temps de chargement et fluidité de navigation qui s’en voient fortement impactés… D’où la nécessité d’utiliser ces effets à bon escient.

Voici donc une petite sélection de sites qui illustrent de très belle manière l’utilisation de l’effet parallaxe en webdesign :

Nike Better World

Mario Kart Wii Experience

Jan Ploch Portfolio

The Chris Box

Yess BMX

UBBT’11

Avec Check The Fold, un outil en ligne développé par le studio parisien Steaw, vous pourrez donc vérifier en moins d’une minute l’emplacement de la ligne de flottaison sur vos sites web, selon différentes résolutions d’écran. Entrez l’url de votre site, et observez le résultat ! Rapide, et bien pratique !

Merci Steaw pour cette bonne idée !

Soyez désormais soulagés. Grâce à Mister Geoffrey Dorne (graphism.fr), vous pouvez dès à présent vous décharger de vos lourds Secrets de Graphistes sur http://secrets.graphism.fr/ (et surtout vous rassurer en voyant que vous n’êtes pas les seuls à porter de tels fardeaux…).

Une petite sélection pour vous mettre l’eau à la bouche ? Allons-y gaiement :

Je ne dévoile pas tout, pour le reste, ça se passe donc ici !
Merci en tout cas à Geoffrey Dorne pour cette sympathique idée qui n’a pas fini de nous faire sourire

L’enregistrement de l’espace de travail, apparu depuis la CS4, permet de conserver l’organisation des différents outils, panneaux et éléments constitutifs de celui-ci en vue de vos prochains projets. Photoshop vous propose par défaut le choix entre plusieurs profils, selon que vous travaillez sur un projet de conception, de photographie, ou de 3D par exemple et organise ainsi les panneaux et les onglets selon le type de travail, de manière à n’afficher que les outils les plus utiles. Pour les graphistes qui ont l’habitude de switcher entre plusieurs types de projets (print, web, détourage ou retouche par exemple), cette fonctionnalité vous facilitera les choses.

Comment faire ?

• Pour sélectionner un espace de travail : dans le coin droit de votre fenêtre Photoshop, cliquez sur les deux flèches et sélectionnez l’espace de travail que vous désirez utiliser. Votre espace de travail affichera ainsi les panneaux et palettes correspondants.

• Pour enregistrer un espace de travail : positionnez les panneaux et palettes tels que vous souhaitez les conserver, puis dans le menu cité précédemment, cliquez sur « Nouvel espace de travail ». Attribuez un nom à cet espace, et le tour est joué. Votre configuration personnelle se trouve dans la liste des espaces de travail disponibles.

Créez et organisez vos palettes de couleurs

Rares sont les projets où seules une ou deux couleurs sont nécessaires, et où l’on ne se retrouve pas avec une palette pleine à craquer. Si vous êtes le plus souvent dans ce dernier cas, ce focus concernant les palettes de couleurs devrait vous être utile. Car si comme moi, vous utilisiez jusqu’à présent votre nuancier comme un vulgaire fourre-tout, vous verrez que même au niveau des palettes de couleurs, on peut être organisé…

Comment ?

Pour chaque projet sur lequel vous travaillez, sauvegardez votre palette de couleur dans le dossier correspondant à votre projet, sur votre poste. Cela vous permettra premièrement de retrouver les nuances que vous avez utilisées, et également, si votre charte est déclinée par une autre personne, de lui fournir un nuancier « prêt-à-l’emploi » (une telle attention mérite un schokobon en échange, sachez-le).

Pour aller jusqu’au bout des choses, vous pouvez également profiter des possibilités de Photoshop pour organiser de manière optimale votre nuancier. Le choix de l’affichage des nuances, en liste ou en vignettes, ainsi que la possibilité de nommer chaque nuance ajoutée, vous permettront de personnaliser votre nuancier selon vos préférences. Un exemple que j’apprécie particulièrement : optez pour l’affichage en liste, et à chaque ajout de couleur, indiquez son code hexadecimal (en vue de l’intégration) et son utilisation principale (par exemple : titres, liens, couleur de fond, texte de labeur, etc). Vous aurez ainsi sous la main tous les éléments pour appliquer les bonnes couleurs aux bons endroits, et ce très rapidement et simplement.

Personnalisez vos grilles et vos repères

S’appuyer sur une grille lors de la création d’une interface est un réflexe bien utile pour obtenir une certaine rigueur dans vos mises en page et de manière globale, pour aboutir à quelque chose d’harmonieux et de lisible. Vous pouvez à ce titre configurer vos grilles et vos repères comme bon vous semble. En passant par les préférences de Photoshop, puis Repères, grilles et tranches, vous pourrez ainsi changer les couleurs, les styles (traits pleins ou pointillés), et les propriétés de la grille. Pensez également à activer l’option de magnétisme sur la grille (Menu Affichage > Magnétisme > Grilles) et dans les options des calques de formes, de cocher « Magnétisme des pixels » : ceci vous permettra, lors de l’utilisation des calques de formes, d’avoir des formes vectorielles nettes.

Utilisez les bibliothèques de styles

Sans doute l’une des utilisations dont je saurais le moins me passer aujourd’hui : les bibliothèques de styles. Tout comme pour vos palettes de couleurs, Photoshop vous permet de créer et sauvegarder vos styles de calques tout au long de vos créations. Un bon moyen de ne pas recréer cent fois le même style de bouton ou l’effet d’ombré d’un bloc, ou encore ce maaaaagnifique dégradé rose bonbon et jaune poussin (hum…). En sauvegardant vos styles, vous vous créerez ainsi une bibliothèque qui s’étoffera au fur et à mesure de vos projets. A l’usage, chargez votre bibliothèque dans votre palette de style et en un clic, vous pourrez appliquer n’importe quel style sur n’importe calque. N’hésitez pas également à sauvegarder votre fichier de styles dans le dossier de votre projet, toujours de manière à conserver tous les éléments graphiques à portée de main.

De très bonnes bibliothèques de styles sont disponibles en téléchargement sur internet, profitez-en, cela vous fera gagner un temps précieux.

Concrètement :

• Pour créer un style : appliquez sur votre calque les effets souhaités (contours, ombres, dégradés, etc), puis dans votre panneau de styles, cliquez sur « nouveau style » en bas à droite. Donnez un nom à ce style puis enregistrez-le.

• Pour enregistrer votre bibliothèque de style : dans votre panneau de styles, cliquez sur les options en haut à droite, puis « enregistrer les styles » (fichier .asl)
• Pour importer une bibliothèque de style : toujours dans les options de votre panneau de styles, cliquez tout simplement sur « charger les styles » et allez chercher le fichier correspondant à votre bibliothèque

Des raccourcis, oh oui alors

Le but n’est bien sûr pas de connaître tous les raccourcis de Photoshop. Quoique si vous êtes prêt à les apprendre par coeur… euh, et bien bon courage… une aspirine ?
Il faut toutefois avouer qu’en connaitre les principaux vous fera gagner du temps. Pour les antisèches, voici quelques liens bien utiles :

• Photoshop Keyboard Shortcuts : un pdf récapitulant les principaux raccourcis (voir pdf)
• Keyonary, le moteur de recherche de raccourcis
• Quelques raccourcis secrets par WebDesigner Wall

Allez, un peu d’apprentissage, un peu de mémoire, et l’habitude et les quantités d’heures passées avec votre logiciel fétiche feront le reste … !

Rendez-vous très bientôt pour la 2ème partie de ce billet ! Bonne lecture !

Comment l’utiliser ?

Pour utiliser WhatFont, rendez vous sur le site dédié à ce bookmarklet et glissez le bouton « WhatFont » dans votre barre de favoris. Il ne vous reste plus qu’à naviguer sur vos sites préférés et cliquer sur votre nouveau bookmark lorsque vous souhaitez connaitre la police utilisée. Finger in the nose, non ?

Merci donc à Chengyin Liu pour cet outil !