Le design multi-écrans en HTML5 

Dans cet épisode, Marc Autret et Loïc Aigon, deux experts de l'extensibilité nous font un tour d'horizon des langages de scripting utilisables pour enrichir ou adapter les fonctionnalités de la Creative Suite en particulier avec JavaScript.

Dans cet épisode nous allons voir comment faire en sorte que nos vidéos sur le web soient visibles par un maximum de gens grâce à une utilisation combinée de Flash et de HTML5.

Pixel Bender est une technologie qui permet de faire des filtres Photoshop, After Effects ou Flash. Un seul filtre commun aux 3 logiciels à partir d'un même fichier source. Dans cet épisode, nous allons voir comment créer ou utiliser des filtres existants dans Photoshop et dans Flash Professional.

Lorsque l’on travaille sur un projet de design, il est intéressant de pouvoir demander des avis et commentaires à des collaborateurs distants tels que l’intégrateur, le client, etc. Et tout cela sans arrêter de travailler sur le projet en question. Bien sûr, on peut initier une révision partagée depuis Acrobat Pro, mais il faut en amont générer un fichier PDF. Pour un besoin de retour plus rapide, on peut utiliser le service en ligne CS Review que nous allons présenter dans cet épisode.

Les fragments de code (snippets) apparus dans Flash CS5 permettent de gagner en productivité, à condition de respecter certaines bonnes pratiques. Ce sont ces pratiques dont nous allons discuter dans ce nouvel épisode.

Dans cet épisode, nous allons voir comment Device Central nous aide à simuler l'exécution de nos contenus web sur un grand nombre d'appareils, en particulier les smartphones et les tablettes.

Lorsque l'on parle de livre électronique, on parle principalement de deux formats : le PDF et l'ePub. InDesign permet de générer les deux, mais dans cet épisode, nous allons nous concentrer sur la création et l'enrichissement d'un ePub, dont la base est du HTML/CSS.

Cet épisode montre comment utiliser un plug-in de Photoshop pour récupérer les successions de tâches effectuées sous forme de JavaScript et ainsi rendre notre panneau Configurator autonome des Scripts (Actions en anglais). Nous verrons aussi comment accéder à ses JavaScripts plus rapidement dans Photoshop. 

Photoshop regorge de fonctions, panneaux et outils. S'il est possible de mémoriser des Espaces de travail et d'apprendre/personnaliser des raccourcis pour atteindre plus rapidement les fonctions souhaitées, il serait plus intéressant de pouvoir centraliser ses outils dans un panneau personnalisé afin de gagner en productivité. Nul besoin pour cela d'être développeur, car Configurator (application gratuite) permet de créer un tel panneau de manière simple et intuitive.

Dreamweaver CS5 améliore l'affichage en direct (LiveView) et le promeut au rang de véritable navigateur intégré. BrowserLab permet de tester le rendu des pages HTML entre différents navigateurs et systèmes d'exploitation à distance, via une application en ligne. Dans cet épisode, nous verrons le cadre d'application de ces deux fonctionnalités.

Le nouveau modèle d'animation apparu dans Flash Professional CS4 est encore relativement sous exploité par ses utilisateurs. En effet, au regard des habitudes induites par l'ancien modèle, certaines fonctions semblent manquer. Après un bref rappel de l'ancien modèle, nous ferons donc le tour du nouveau et nous verrons de la manière de l'aborder.

Certains effets graphiques peuvent nécessiter des ressources importantes (filtres, modes de fusion). Dans de nombreuses situations, l’utilisation de la vidéo peut s’avérer plus intéressante. Cet épisode est aussi un clin d’œil à Thibault qui fait ici sa dernière apparition.

En tant que developer ou designer utilisant Flash, il existe des règles simples d’optimisation permettant d’améliorer les performances et optimiser les ressources utilisées par une application. Dans cet épisode, nous découvrons quelques-unes de ces techniques.

La question de la compression d’images pour un projet Flash est une question récurrente. Nous ferons un rappel des différents outils permettant cette optimisation d’image avec leurs avantages respectifs. Enfin, nous verrons les bonnes pratiques et astuces de gestion d’images dans Flash.

S’il est vrai que le vectoriel peut être plus léger que le bitmap, il peut aussi parfois (en fonction de sa complexité) être plus lourd qu’un simple bitmap, surtout en terme de rendu dans le Flash Player. Cet épisode montre les problèmes que cela peut engendrer et les moyens d’optimiser les vecteurs dans Flash et Illustrator.

Depuis l’arrivée de Flash Catalyst, les développeurs Flash ont désormais un outil pour leur faciliter le workflow avec les outils créas (PS, AI). Nous allons voir comment travailler de manière itérative avec Flash Catalyst et Flash Builder.

Depuis toujours le format FLA était un format propriétaire fermé et binaire, il était donc courant de véroler un fichier FLA et il était impossible de voir les éléments qui composent le projet sans ouvrir le fichier FLA. Désormais avec Flash CS5, le FLA est un répertoire zippé qui contient une description du projet au format XML ainsi que tous les éléments qui composent le projet. Nous verrons dans cet épisode l’intérêt de ce nouveau format en production.

Dans la InDesign CS4, on a fait un premier pas vers Flash en ajoutant la capacité de d’exporter au format XFL pour récupérer les éléments graphiques et leur mise en forme. On récupérait du graphisme statique, et surtout les moteurs de texte n’étaient équivalents dans les deux logiciels. On peut maintenant, dans CS5, exporter directement au format FLA tout en préservant l’intégrité du document — animations comprises.

Si Illustrator est imbattable concernant le vecteur, l’export d’élément sur le Web sous forme de bitmap laissait apparaître parfois des pixels flous dus au positionnement « interpixels », ce qui pour toute interface est problématique. Cet épisode explique comment gérer cela dans les différentes versions d’illustrator.

Lors d’un clic droit sur un SWF, des informations relatives au Flash Player apparaissent. On peut personnaliser une partie de cette zone pour donner accès à des options contextuelles concernant la navigation ou la situation.

Découvrez la notion d’imagerie dynamique au sein Scene7 afin de simplifier le workflow d’une équipe graphique.

Dans le précédent épisode, nous avons expliqué l’intérêt des métadonnées pour la recherche. Nous verrons dans celui-ci comment enrichir concrètement et surtout rapidement nos fichiers en métadonnées.

Les métadonnées sont beaucoup utilisées dans les secteurs de l’impression mais très peu l’industrie du Web, hormis dans les entêtes de page HTML. Pourtant, l’emploi des métadonnées permet de fluidifier les recherches d’éléments graphiques en local et augmente les pertinences de réponse dans certains moteurs de recherche.

Lorsqu’une campagne de pub web est lancée plusieurs déclinaisons d’accroche, statiques ou animées doivent être déclinées sous différents formats. Les variables de Photoshop vont nous permettre de travailler plus efficacement dans ce contexte.

Afin d'automatiser certaines tâches répétitives dans Flash, le JSFL (JavaScript Flash) s'avère être une solution efficace pour augmenter la productivité d'une équipe.

Mettre en place une campagne d'emailing peut paraître simple, mais le processus de création et de publication du contenu est souvent peu optimisé.Nous allons voir comment Fireworks nous permet de simplifier cela.

Lorsqu'une campagne de pub web est lancée plusieurs déclinaisons d'accroches, statiques ou animées doivent être réalisées sous différents formats. Les variables de Photoshop vont nous permettre de travailller plus efficacement dans ce contexte.

Pour améliorer votre productivité, nous pouvons ajouter des extensions, des panneaux et des scripts, qui vont alors complémenter certaines fonctions de nos logiciels favoris.

Quand les couleurs d'un site nous plaisent, il peut être intéressant en création de comprendre quelle est la règle d'harmonie qui les agence pour pouvoir s'en inspirer afin de créer nos propres couleurs. Illustrator nous permet cette analyse.

La transcription des dialogues d'une vidéo peut être utilisée pour l'indexation de vidéos sur le Web et pour le sous-titrage.

La transcription des dialogues d'une vidéo peut être utilisée pour l'indexation de vidéos sur le Web et pour le sous-titrage.

Des animations Flash peuvent être très complexes, mixant les éléments vectoriels et bitmap (pixels). Cela peut entraîner des contraintes d’optimisation et la mise en cache bitmap, bien utilisée, peut résoudre certaines problématiques de performances.

La création d'un design d'Application Internet Riche (RIA) diffère-t-elle de celle d'un site web classique ? Michaël Chaize nous explique les spécificités d'une RIA et comment exploiter un document Illustrator dans Flash Catalyst.

Les compositions de calques de Photoshop permettent de gérer des déclinaisons différentes d'un projet dans un unique fichier. Fireworks et Flash peuvent en tirer parti à l'importation

Après un rappel du fonctionnement et des avantages du nouveau modèle d’animation, nous verrons l’intérêt des présélections de mouvements dans Flash CS4.

Dans la création d’une application, le Wireframe est une phase essentielle. Nous allons explorer les moyens d’optimiser cette étape de création avec Photoshop et Illustrator.

Comment récupérer une animation faite pour le web afin de la placer dans un document interactif pour l’enrichir ? Et comment aller plus loin dans la personnalisation avec la notion de FlashVars au sein du PDF.

Découvrez comment optimiser vos textes dans Flash grâce aux nouvelles capacités du moteur de texte Flash Player 10.

Redimensionnez vos images, empilez-les dans un fichier Photoshop via Bridge puis gérez les options de Flash pour les importer directement dans un clip

Découvrez la nouvelle émission Chips & Tips - les meilleurs trucs & astuces de nos experts Adobe.

Fireworks est un outil de prototypage Web très puissant qui permet entre autre de communiquer à son client un fichier unique, dans lequel il pourra expérimenter l’interactivité et même apporter des commentaires partagés.

InDesign permet d’exporter les contenus d’une mise en page papier au format XHTML pour le Web. Nous verrons dans cet épisode, les bonnes pratiques d’export et d’enrichissements de cet export.