Petit truc auquel je pense pour mettre un logo ou un picto en aplat de couleur dans Photoshop. En effet, le premier réflexe que l’on a pour teinter un logo dans Photoshop, on pense à le sélectionner et à le remplir de la teinte de son choix.
Ca fonctionne, certes, mais le résultat n’est pas très propre car on récupère des pixels parasites autour de l’image.

Bien entendu, la meilleure solution est d’intervenir dans Illustrator, mais souvent d’une part on n’a pas le fichier source, d’autre part c’est plus long d’ouvrir le fichier dans Illustrator, le modifier, l’enregistrer et le réimporter dans Photoshop.

Pour quelle utilisation avons-nous besoin de passer un logo dans une seule couleur ?
Il s’agit le plus souvent d’encarts ou l’on a besoin de lister des partenaires/fournisseurs/sponsors d’une société. La diversité des logos (tailles, formes, couleurs et typos différentes) est telle qu’il est recommandé de les unifier visuellement pour ne pas polluer la mise en page avec une multitude d’images disparates. C’est justement le rôle des graphistes de veiller à assurer une mise en page homogène.

Voilà ma recette qui garantit une colorisation sans dégradation d’image.
1 – on importe les logos dans le document, ce peut être un picto, un texte, peu importe. Chaque logo génère automatiquement un nouveau calque.

2 – on aplatit tous les calques

3 – dans la fenêtre de calque on choisit l’effet « incrustation couleur ».

4 – on détermine la couleur et on applique l’effet.

Ca parait évident, mais quand je vois dans la presse ou sur la toile le nombre de logos abîmés, je me dis que ce n’est pas du luxe !

Pour faire simple, on enregistre essentiellement une image pour le web au format JPG, GIF ou PNG.
JPG : pour les photos avec des nuances de couleurs plus fines
GIF : pour les logos, pictos et lettrages, avec des couleurs en à-plat, avec la particularité de faire des animations.
PNG : pour les deux, mais avec la spécificité de gérer la transparence (préférence pour le PNG-24 qui gère mieux antialiasing).
Aliasing : aspect crénelé autour des images qui ne fait pas très propre.

Partant de ce constat, Photoshop propose la fonction « enregistrer ses images pour le web », sur laquelle j’ai détaillé les spécificités ici.

Le nerf de la guerre pour les graphistes fut un temps la rapidité d’affichage du fait de générations de modems 56k, l’ADSL étant loin d’être aussi démocratisée que maintenant. Cependant, comme j’en parle dans mon article sur la préparation des images pour le web, il est primordial d’optimiser l’iconographie du web.
Certes, le taux d’équipement des ordinateurs des foyers, entreprises et écoles est indiscutablement conséquent, et beaucoup ont souscrit une offre ADSL à gros débit, aussi on peut considérer qu’on peut se permettre de mettre des fichiers plus lourds en ligne…
Oui… mais non. Il y a des cas de figures pour lesquels le poids est une contrainte majeure, je pense à une utilisation bien particulière : les e-mailings.

Un e-mailing, s’il est lourd, soit ne passera pas le seuil acceptable d’un poids limite, soit sera considéré par le logiciel de messagerie comme du spam et sera traité comme indésirable, soit tout simplement la lenteur pour ouvrir la pièce jointe (ou insérée) va décourager le destinataire qui le mettra illico à la corbeille.

Il est donc important de veiller à gagner des octets là où l’on peut.
Fort de ce constat, j’ai étudié pas mal de paramètres pour l’enregistrement des images gif.
Pour le jpg ou le png, il n’y a pas 36 options, c’est très simple. En revanche le gif a énormément plus d’options, de paramètres complémentaires qui peuvent détériorer la qualité d’image ou l’alourdir considérablement.

Eh oui, il y a un équilibre à trouver, un compromis redoutable qui s’offre au graphiste : privilégier la qualité ou la taille de l’image.

Le gif animé peut être désespérant au niveau de l’enregistrement : lors de sa conception on n’a aucun souci de couleurs, les dégradés et nuances restent subtils, par contre le gif peut vraiment abîmer le rendu final.
Déjà on n’a pas le choix du format, car le jpg et le png sont pour les images fixes, pour l’animation, à moins de faire du flash, pas d’alternative !
Pour le coup où l’on a des photos faisant partie intégrante du projet, bonjour la dégradation d’image !

Je mets donc en ligne le meilleur réglage auquel je suis parvenu pour le traitement des gifs animés, qui n’altère pas trop l’image et prépare un fichier de taille optimale :

Depuis quelques temps, même si j’adore Flash pour la fluidité exemplaire des animations, je délaisse ce logiciel pour la réalisation de sites web pour plusieurs raisons :

Compatibilité
Même si Flash est une technologie incontournable du web, je suis toujours surpris d’avoir des échos d’internautes qui n’ont pas le plug in requis, et beaucoup rechignent à l’installer. Quand il s’agit de particuliers c’est juste dommage, mais ce n’est pas dramatique. En revanche, lorsqu’il s’agit de sites internets pros et que les clients de mes clients ne peuvent lire les anims, là c’est catastrophique !
Même si elle n’est qu’illustrative, c’est toujours rageant d’avoir une icône brisée ou un lego à la place de l’animation, mais lorsqu’il s’agit d’une navigation à part entière qui ne s’affiche pas, c’est impardonnable.
Les utilisateurs finaux n’étant pas des graphistes chevronnés de la technique, ils ne vont pas s’amuser à télécharger des plug-in (des quoi ?) sur l’ordinateur de leur société. Ils n’ont qu’une trouille, que plus rien ne fonctionne après, et cette crainte est tout à fait légitime !

Référencement
Flash permet des jeux typographiques fabuleux : titrages animés, effets spéciaux, les panoplies d’habillage de textes sont nombreuses.
Le gros intérêt de Flash est aussi d’être sûr qu’une police spécifique utilisée sera respectée et s’affichera comme définie par l’auteur du webdesigner.
Le souci, lorsque l’on s’intéresse au référencement, est que Flash est réellement un frein pour aider Google à balayer le contenu d’un site. En effet, si tous les textes sont intégrés dans une anim, les robots ne les prendront pas en considération car il ne pourra pas indexer le contenu textuel.
Il vaut donc mieux choisir de rester en HTML. Ce sera moins esthétique mais plus efficace. Le talent du webdesigner est justement de jongler avec les contraintes techniques, et les contraintes de typos sont importantes à prendre en compte.

Maintenance
Si le site doit être mis-à-jour avec une fréquence régulière, Flash est nettement plus contraignant. En effet, il faut entrer dans le .fla, faire les modifs, exporter le .swf et remettre en ligne… pas très souple.

iPhone/iPad
Certes, ça peut sembler dérisoire, mais vu le taux de progression de vente d’iPhone et d’iPad, force est de constater qu’une quantité considérable d’internautes adopte un nouveau support pour surfer. Jusqu’à l’arrivée de l’iPad je ne prêtais guère attention à cette observation, mais quand je vois l’engouement des consommateurs envers la tablette d’Apple, je me dis que je dois au maximum me passer de Flash afin d’avoir des projets consultables de la manière la plus universelle possible.
Au fait, quelle est la raison de cette lacune sur ces iPhone et iPad ? L’ego de Steve Jobs qui en gros a dit à Adobe que Flash était de la m…

Solution : retour au bon vieux gif animé
Pour habiller de manière dynamique les interfaces, j’ai de plus en plus recourt au GIF animé. Je suis en fait de plus en plus séduit par ce format d’image qui existe depuis les balbutiements du web. Longtemps considéré comme un peu « cheap » à cause d’utilisations intempestives, le gif a eu mauvaise presse et fait toujours un peu ringard. Malgré tout, c’est un format que j’affectionne car il a beaucoup évolué dans sa conception.
Avant qu’Adobe ne l’intègre dans Photoshop, il fallait utiliser ImageReady. Maintenant qu’il est sous l’égide de Photoshop, les choses se sont nettement simplifiées ! Les paramètres sont très subtils, il est possible d’avoir la main sur tout ce qui peut concerner une animation (le timing de chaque image, combien de fois la séquence globale doit être jouée..).
Bien sûr il faut comparer ce qui est comparable, on ne peut faire en gif l’équivalent de flash en terme de fluidité de précision graphique (flash utilisant des données vectorielles et le gif du bitmap il y a forcément pixellisation avec ce dernier), mais pour de l’animation illustrative le gif est un bon palliatif.

Depuis la sortie de l’iPad, je préfère concevoir des sites de manière plus traditionnelle en HTML que de faire des effets de styles dans Flash qui ne seront pas visibles sur certains supports et rendront le référencement naturel plus délicat.

Il existe des cas de figure pour lesquels nous avons besoin de graver un DVD sans qu’il y ait une nécessité de créer de menu, que l’on ait juste à insérer le DVD dans un lecteur et qu’il se lance tout seul, avec une lecture en boucle du contenu.
C’est le cas pour des DVD de présentation d’entreprises diffusées sur des salons par exemple.

iDVD propose de nombreux « thèmes » qui habillent graphiquement et en musique les menus des DVD. C’est bien, mais justement dans le cas de figure précité c’est superflu et peut nuire à la simplicité de visualisation du film. En effet, quand il s’agit de montrer un film lors d’un rendez-vous client ou sur un stand, ces menus impliquent de naviguer sur le disque, il faut une télécommande, et pour un peu qu’on n’ait pas le temps de faire un menu charté aux couleurs de la société, ça risque de faire un peu « cheap ».

Il est possible de créer un DVD (ou un CD) qui se lance automatiquement, et qui plus est, tourne en boucle, ce qui est vraiment parfait pour un salon, une salle d’attente, etc…

Au lancement d’iDVD, une fenêtre s’ouvre et il faut naturellement cliquer sur « créer un nouveau projet« .
Par défaut, le projet s’ouvre avec un thème prédéfini dont nous n’avons que faire (le thème est un environnement visuel et audio).

iDVD est disponible dans le pack iLife, édité par Apple bien sûr, que nous vous recommandons de vous procurer au meilleur prix directement chez Amazon

Il faut ensuite afficher la structure du DVD en cliquant sur le bouton « plan », afin de voir l’organigramme du disque.
A partir de là, sélectionner depuis le finder le film ou l’album photo que l’on veut projeter, et le glisser-déposer sur la zone intitulée « glissez les données ici pour une lecture automatique une fois le disque inséré » (ça a vraiment l’avantage d’être un titre explicite !)
Pour que le séquence soit bien lue en boucle, dans la barre de menu aller dans les « options avancées » et cliquer sur « séquence en boucle« .
En effet, si certains lecteurs proposent un mode « repeat », tous ne le font pas, et le fait de paramétrer une lecture en boucle depuis iDVD est redoutablement utile !

A partir de là, il n’y a plus qu’à graver le DVD et c’est tout bon !

Nous étions sûr que vous trouveriez cette solution trocool

Afin de dynamiser un montage de film, il peut être vraiment intéressant d’y intégrer des animations flash.
Actuellement je monte un petit film pour un client, j’ai besoin d’avoir des textes animés et également de mettre le logo de la compagnie en mouvement, donc comme je n’ai pas Adobe After Effects – que je ne connais malheureusement pas – j’ai recours à Flash.

Comment préparer ses animations flash ?
Bien entendu, on oublie l’interactivité qu’offre Flash pour un film : hors de question d’avoir des boutons ou des zones cliquables, car il s’agit d’un film au final.
La taille de la scène doit être de 1920×1080 px, ce qui permet une intégration dans iMovie sans détérioration de l’image. En-dessous on n’obtient que de la bouillie de pixels.
D’autre part, cette taille d’image permet de conserver des proportions qui respectent le format d’iMovie, sinon le logiciel de montage a tendance à condenser ou élargir l’image ce qui la déforme.

Ensuite, ce qu’il est important de comprendre, est que l’exportation en .mov ne lit que la séquence du premier niveau : si on fait des clips animés imbriqués dans la séquence, ils ne seront considérés que comme une image fixe.

Les attributs d’opacité (ex. : alpha), les filtres (ex. : ombres portées) et les mouvements sont bien restitués. J’ai noté en revanche qu’un filtre animé est sujet à bugs (ex. : on part d’un objet normal auquel on ajoute une ombre progressivement). Il vaut mieux éviter et ne mettre des filtres que sur des objets non animés.

Exportation en .mov
Il suffit de faire « fichier » -> « exporter l’animation » et de choisir le format Quicktime.
Largeur et hauteur du rendu : 1920×1080.
J’arrête l’exportation « lorsque la dernière image est atteinte » pour faire des économies de mégas et gagner du temps de calcul.

Dans « paramètres », je clique sur « réglages video » et là en compression je mets « aucune ». Ca veut dire que j’exporte un fichier qui va être très lourd, mais d’une qualité impeccable.
Ensuite on clique sur « exporter » pour lancer la compression.

Importation du .mov dans iMovie
Fichier -> « importer des films » afin d’intégrer dans notre chutier la séquence.