fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - Tutorial

Fil des billets - Fil des commentaires

dimanche 17 août 2014

Adobe Media Encoder (AME) Ogg WebM

L'encodage des vidéos pour le web ?

La lointaine époque des vidéos encodées en flv pour Flash, qui résolvaient tous les problèmes de compatibilité, quel que soit votre navigateur ou système d'exploitation semble révolue. On lui préfère désormais le magique "HTML5" qui résout tous les problèmes et soigne tous les maux.

Or, pour la vidéo, on serait plutôt revenu à 1995, une époque que les moins de 20 ans peuvent ne pas connaître, lorsque la page vidéo d'un site web vous demandait si vous aviez une bonne connexion (type LAN) ou une connexion RTC à 33,6ko, si vous étiez sur Mac ou sur PC, si votre player vidéo serait Quick Time ou Windows Media Video, voire même Real Video. Une époque de choix, où les novices se perdaient, et vous passiez plus de temps à encoder les 28 versions différentes de vidéos.

On y revient. Désormais, si votre navigateur est Safari, vous devez lui fournir du mp4/H264, pareil si c'est IE. Pour Chrome ou Firefox, il faut un Ogg Theora ou un WebM… un .avi est conseillé, et toutes ces informations sont susceptibles d'évoluer (à l'heure où j'écris cet article, ça bouge encore)

Encoder des vidéos depuis Adobe Media Encoder

Si, comme moi, vous avez une installation standard de votre Creative Suite, vous risquez de devoir chercher un peu comment gérer ça à grands coups de recherche sur internet, de conseils divers et variés.

Et si vous avez eu l'occasion de faire du rendu vidéo depuis Photoshop (si si, c'est possible), After Effects ou Premiere, voire même des conversions de fichiers, vous êtes sans doute déjà passé par Adobe Media Encoder (AME dans la suite de cet article).

Or AME n'exporte pas en standard vers ces formats de plus en plus répandus que sont le webM et le Ogg/Ogv.

Un des aspects très intéressants d'AME, c'est sa capacité à traiter plusieurs fichiers d'un coup, plusieurs types et formats d'export à la fois.

AME-MultiEncode.png

AME-Encodage-WebM.pngVous pouvez sans souci prendre votre fichier original, lui assigner plusieurs préconfigurations, pour, comme dans l'exemple ci-dessus, exporter à la fois 2 versions de vidéo compressées, mais aussi extraire l'audio d'un fichier.

Autre point intéressant, si vous avez une machine avec un processeur "multi-core", ces exports s'effectuent en parallèle et le codage est distribué parmi les ressources.

Utiliser Adobe Media Encoder pour le Ogg et le WebM

Du coup, vous vous demandez comment réaliser ces conversions. Il existe différents logiciels en ligne qui effectuent la conversion à votre place, mais cela nécessite de transférer vos vidéos pour les récupérer, donc si vous avez plus d'une vidéo à traiter, ça peut devenir contraignant.

Pour Adobe Media Encoder, en fait, on va utiliser un plug-in. Développé par Fnordware pour ses besoins avec Premiere Pro, son architecture fait qu'une fois installé, il fonctionne aussi sur AME (et After-Effects).

Donc, dans un premier temps, télécharger le module qui vous intéresse, WebM et/ou Ogg (pour Mac et/ou Win).

AME-WebM-Ogg-Folder.pngDans les dossiers dézippés, vous retrouverez les modules en question et surtout un fichier "Read Me", dont je vous recommande la lecture, notamment sur l'emplacement d'installation qui est loin d'être évident, notamment la création, si absents, des dossiers plug-ins > 7.0 > MediaCore (à actualiser avec les versions).

Une fois effectué, vous relancez AME et disposez des options pour le Theora (Ogg video) et le WebM et vous pourrez ensuite utiliser vos exports directement dans Edge Animate en les glissant simplement dans le panneau video (par exemple).

AME-add_video_library_1405430310993.png

vendredi 14 mars 2014

Ouvrir vos jpgs avec Camera Raw (avant le filtre Camera Raw de Photoshop CC)

Depuis quelques mois maintenant, on vous vante le filtre Camera Raw qui rend tous les développements d’image faciles dans Photoshop… CC.

Or si vous n’avez pas encore franchi le cap de l’abonnement (attention, minute pub : il y a une offre photographes « à durée limitée » pour avoir Photoshop + Lightroom + Behance + 20Go pour 9,99€HT (12,29€TTC < 150€/an pour être toujours à jour sur Photoshop)), il y a une solution pour ne pas (trop) vous compliquer la vie sur la partie « développement » de vos images.

Par défaut, Photoshop ouvre directement les jpg. Vous pouvez aussi dans le menu Fichier > Ouvrir > choisir un fichier jpg (à plat) et dans le format de fichier, assigner « Camera Raw ». Votre fichier s’ouvrira dans la fenêtre Camera Raw, et vous aurez accès à toutes les options de réglage bien efficaces, et bien plus simples à prendre en main que les courbes. Une fois terminé, vous validez l'ouverture et vous retravaillez sur votre image “ « comme autrefois ».

PS-ACR-JPG-Ouverture.png

Si vous trouvez la manœuvre répétitive, n'hésitez pas à demander à Photoshop d’ouvrir TOUS vos fichiers .jpg et .tiff directement avec Camera Raw, ça se trouve cette fois-ci tout en bas du menu Photoshop > Préférences > Camera Raw.

PS-ACR-Prefs.png PS-ACR-Prefs-Ouverture.png

Et voilà !

lundi 24 février 2014

inDesign à pleine vitesse

Haeme Ulrich a publié récemment un document qui recense les écueils rencontrés par inDesign quand il s'agit de travailler à pleine vitesse. Il en profite aussi pour proposer des techniques, trucs et astuces pour résoudre ces soucis et optimiser au mieux votre travail.

Le document existait en allemand, suite à une demande populaire il l'a traduit en anglais, et je me suis chargé de la version française.

inD_vitesse_fr_v1_700.png

Cliquez sur l'image pour télécharger le pdf.

Et n'hésitez pas à partager vos propres astuces.

vendredi 7 février 2014

Adobe Muse CC : Site multilingue et widgets sociaux — Mucow et Mulib pour gagner en productivité

fr_308.jpg

Muse s'étoffe et vous permet de concevoir et de publier des sites Internet de façon toujours plus efficace. Dans cette formation, Franck Payen vous présente les nouvelles fonctions disponibles dans la version CC ainsi que quelques astuces pour la réalisation d'un site multilingue. Découvrez alors les nouveaux effets de défilement, les bibliothèques Mulib, les widgets sociaux et les Mucow, qui n’auront plus de secret pour vous !

Cliquez pour voir l'atelier Muse CC chez video2brain

Et, toujours disponibles, les précédents sujets :

Pour mémoire l'ensemble des sujets video2brain proposés est disponible dans la colonne à votre droite (là où se trouvent les icônes en couleur), et les détails sont sur la page pro, de l'autre côté.

mercredi 29 janvier 2014

DPS et empilement d'overlays (Sequence d'images et boutons)

Question déjà évoquée lors d'un précédent sujet, de retour sur le forum utilisateurs :

INDESIGN - Séquence d'images passe dessus tout le contenu je ne sais pas s'il s'agit d'un bug sur Indesign, mais une séquence d'images passe toujours par dessus tout le contenu. J'ai créé une séquence d'image sur un calque, puis créer un autre calque par dessus, avec d'autres éléments (bouton par exemple). Lorsque je teste mon folio sur mon ipad, la séquence d'image passe toujours par dessus, et cache ainsi mon bouton du calque supérieur. Est ce normal ?

La réponse est : oui, c'est normal, même si un cela nécessite de relire les quelques explications. Ce coup-ci, je vous mâche le travaille et vous donne la solution (et un fichier) :

inD-DPS-Bouton-Sequence-OEM.png

Puisque la séquence d'image est active, elle passe au dessus. Si je place un simple bouton, il sera donc "fixe", statique, et relégué au fond du document. Je place donc mon bouton dans un objet à états multiples (comme pour créer un diaporama), en mode autoplay.

ACV-DPS-Bouton-Sequence-OEM.png

Tout cela est détaillé dans la formation des fondamentaux de Digital Publishing Suite (vous avez le lien en violet dans la barre à droite).

Petit bonus, je vous ai préparé un fichier test pour inDesign CC qui m'a permis de me rappeler que désormais les assemblages dans inDesign rassemblent aussi les fichiers des overlays :

iD-CC-Assemblage-Overlays.png

mardi 24 décembre 2013

Le design web avec Photoshop : Contenu graphique et prototypes pour sites web et apps mobiles

fr_594-1.jpg Si vous avez 7h devant vous, c'est le moment de jeter un œil à ça :

En tant que graphiste web, passez par Photoshop pour la création saisissante de vos visuels, de vos prototypes et de vos maquettes. Votre formateur Franck Payen vous invite dans un espace de travail complet. Optimisez ainsi votre efficacité et les couleurs de vos rendus pour le web. Vous pourrez réaliser des traçages, des formes vectorielles et du texte qui s’adapteront facilement à votre page. Travaillez également avec les transparences et construisez une barre de navigation et les boutons, et enfin accélérez toutes ces tâches de manière automatique. Succès immédiat !

Version réactualisée (et traduite) de la formation de Justin Seeley par Franck Payen

samedi 2 novembre 2013

Cinema 4D + After Effects - 2/3 Video en arrière-plan dans C4D + animation basique

Je continue sur les 3 tous petits compléments d'information suite à la session eSéminaire du mardi 22 octobre. Toujours sur After Effects (un peu moins ici), pas mal sur Cineware, mais surtout sur C4D. Basique, mais dédié.

Voici donc le deuxième des trois.

Aperçu de la video en arrière plan dans Cinema4D + animation basique

Vous avez vu dans le billet précédent comment on récupèrait les caméras After Effects dans C4D. Ici je vous transmets une petite astuce pour placer plus facilement vos éléments 3d dans un compositing After Effects.

C'est aussi un prétexte pour présenter très rapidement quelques méthodes d'utilisation de Cinéma 4D si vous ne le connaissiez pas, notamment son tag propriété Aligner sur la spline

Aperçu de la video en arrière plan dans Cinema4D + animation basique par Franck Payen sur Vimeo.

Dans C4D

  • créer un materiau
  • importer la texture video
  • dans le menu Editeur cocher "Aperçu Animé"
  • menu Objet > Environnement > Arriere plan
  • ou Créer un objet Arrière plan
  • glisser la texture sur l'arrière plan, placer !

jeudi 24 octobre 2013

Cinema 4D + After Effects - 1/3 Exporter les caméras AE vers C4D

3 tous petits compléments d'information suite à la session eSéminaire du mardi 22 octobre. Nous y traitions d'After Effects, et le temps m'a manqué pour vous parler de la captation des ombres. Du coup, je me fends de 3 petits tutoriels pour bien aborder Cineware. Et comme je suis de bonne composition (huhu), je vous recopie aussi la base en texte (vous me direz ce que vous préférez dans les commentaires).

Voici donc le premier des trois.

Utiliser un fichier video suivi en 3d comme base pour votre animation 3D

Via Cineware, on récupère facilement les caméras de C4D dans After Effects. Pour réaliser l'opération dans le sens inverse, après un tracking 3d, on va simplement exporter le projet C4d, et tous les solides de l'environnement 3d.

Exporter les caméras After Effects vers Cinema4D par Franck Payen - fr32c sur Vimeo.

Dans une composition AE

  • poser une vidéo
  • faire le suivi 3D
  • sélectionner une série de points trackés sur un plan
  • créer un plan Sol
  • créer un solide + Caméra
  • fichier > exporter > vers Maxon C4D
  • importer le fichier C4D dans la compo
  • masquer le solide d'After Effects : le solide dans C4D reste visible

Le raccourci utile pour éditer : cmd/ctrl E vous envoie directement dans C4D

jeudi 12 septembre 2013

Muse + Inline SVG

Le SVG, c'est bien, à condition d'être sur un navigateur récent (exit les IE 6-7-8 et Android 2.3…). Mais il existe des solutions pour retomber sur du PNG.

Ça marche, et je le présente ici. Je complèterai prochainement avec plus de détails.

— Edit du 15 septembre —

Le SVG, dans Muse, c'est possible, et dès maintenant, avec un petit bonus.

Petit rappel, pour ceusses qu'auraient pas suivi. Le SVG c'est ce format vectoriel extrêmement pratique sur le web depuis qu'on s'est rendu compte que les écrans n'étaient pas seulement à 72 dpi, ni même à 96 dpi, mais parfois à 400 dpi (retina, tout ça tout ça).

Pour le fabriquer, rien de plus simple, vous passez dans illustrator, et vous enregistrez en .svg (voir à ce sujet l'excellent article détaillé de Michaël Chaize). Et puis vous le placez sur votre page et tous les navigateurs modernes afficheront exactement vos jolis vecteurs. Par navigateurs modernes, j'entends Chrome, Firefox, Safari, Opera, Android et même Internet Explorer… à partir de la version 9. D'ailleurs, Android, c'est à partir de la version 3. Exit les vieux téléphones coincés en 2.x soit près de 30% à l'heure où j'écris ces lignes. IE6-7-8, pareil, bien sûr, la joie si votre audience est en entreprise coincée sur winXP.

Je cherchais donc une solution miracle, et je suis tombé sur le fallback en PNG, qui permet de retomber sur un visuel PNG, donc non interactif, mais au moins présent, pour les navigateurs qui ne lisent pas le svg. Les explications étaient détaillées chez David Ensinger, je compile donc tout ça pour la postérité.

SVG inline avec Fallback PNG

Premier point important, pour que cette méthode fonctionne, il faut que le svg soit inline, c'est à dire qu'il fasse partie du code html de la page, et non pas <object> <embed> ou <img>, j'ai testé pour vous, ça marche beaucoup moins bien.

Niveau syntaxe, ce n'est pas bien compliqué et ça repose sur 2 balises svg :

<foreignObject> qui sera capable d'injecter au sein du svg des éléments qui n'en font pas partie, notamment du code html. C'est dans cette balise qu'on placera notre png, sous une simple <img src="" />

<switch> va permettre au svg de décider s'il affiche un groupe (<g>, en svg) ou l'autre (<foreignObject>, en html). Or, la magie qui s'opère avec un svg inline, c'est que si le navigateur sait le lire, il se débrouille avec, mais si le navigateur ne connait pas la balise svg (IE 6-7-8, Android 2.x), il ignore tout le reste… sauf le html à l'intérieur !

Et pour le contenu à adapter

data:image/png;base64 nous sommes en mode inline, il faut que notre contenu soit présent dans le svg pour limiter les appels à une ressource extérieure (et les risques liés aux répertoires, déplacements de fichiers…) pour cela, le visuel n'est pas lié, mais incorporé et traduit en base64.

Précisions pour l'usage via Illustrator : lorsque pour gagner du temps vous placez votre png directement depuis Ai (par exemple en réalisant un export pour le web, puis importation, ou en utilisant la pixellisation puis décomposition de l'aspect), il vous faudra à l'export demander d'incorporer les images. Ai vous convertira les visuels.

<img src="" /> Petit point à noter : Illustrator vous enregistre un fichier .svg, c'est bien, mais quand il met une image dedans, il le fait pour du svg, il ne sait pas encore traiter les balises qu'on a vu avant. Et pour intégrer une image à un svg, on n'utilise pas <img src="…" /> mais <img xlink:href="…" /> Du coup, vous devrez remplacer l'une par l'autre pour que ça fonctionne en entier.

Ça marche dans Muse !

Ça c'est le point le plus important pour vous, si vous êtes arrivés jusque là dans l'article (remarque, vous pourriez très bien vous servir de ça hors Muse, vous auriez déjà gagné la compatibilité IE 6-7-8 et Android 2.x). Mais surtout, une fois que vous avez lu tout ça, le plus dur est fait.

Il ne vous reste plus qu'à coller toute la partie SVG de votre fichier directement dans un objet HTML de Muse et c'est tout ! La preuve, c'en est presque magique. Et vu que les pages de Muse ne sont pas générées à la volée, mais bien par vous, vous restez sur du inline. Certes, un peu plus contraignant que de la vraie image jointe, mais combien plus pratique pour poser les éléments sur la page !

Et comme je suis quelqu'un de fondamentalement honnête, je vous livre quand même une limitation : les dimensions de votre objet SVG devront être modifiées à la main.

En tous cas pour de la jolie interactivité fine, ça redonne espoir.

Bonne lecture, et n'hésitez pas à commenter avec vos réalisations !

PS : Quelques liens pour s'entraîner avec le fichier Muse, le fichier svg (généré dans Ai, modifié dans Brackets). Et comme je suis de bonne composition ce jour, le tout zippé.

dimanche 14 juillet 2013

Edge Animate : accéder à toutes vos fonctions depuis vos symboles

J'avais prévu un autre titre au départ Edge Animate Closures/Fermetures, et je vous expliquerai plus bas pourquoi je vais recentrer mon approche sur la question fondamentale : Comment optimiser votre code ?

Et surtout comment accéder à toutes vos fonctions depuis vos symboles et déjouer quelques pièges.

Comme présenté lors de la formation "Aller plus loin avec Edge Animate" vous allez progressivement améliorer votre manière de développer, et pousser plus loin les fonctions que vous allez créer (et utiliser), puis vous tenterez d'échapper au côté "répétition" de celles-ci.

Ainsi quand vous avez plusieurs boutons différents sur la scène qui font tous la même chose, s'ils sont vraiment identiques, vous pouvez poser le même symbole à plusieurs endroits. S'ils sont différents, il vous faudra utiliser plusieurs symboles, au risque de répéter le même code, et retrouver les mêmes erreurs (à corriger à chaque fois)…

EgAn-Closures-00.png (cliquez sur l'image pour tester en live)

Je vous ai donc préparé plusieurs captures, depuis Animate, et depuis le navigateur (ici Chrome) qui vous aideront à comprendre le déroulé et le contenu du fichier .zip joint (au format Edge Animate 2.0).

Lire la suite...

lundi 22 avril 2013

Utiliser des fontes japonaises WebSafe dans Muse

Pour la création de sites internet, Muse vous propose d'utiliser des polices websafe ou d'intégrer des polices Edge Webfonts. L'utilisation de polices système les convertit en images.

Confronté au besoin de saisir du texte en japonais, je ne me voyais pas me résoudre à utiliser les polices websafe présentes, et pour cause, quelque soit le choix effectué, j'obtenais, pour les katakana/hiragana/kanji la même typo, sérif, beaucoup trop fine pour l'usage qui m'intéressait, et surtout déconnectée de mon choix de sans-sérif de départ.

Mu-JType-Fr-J.png

Or, la bandelette de menu du bas en atteste, j'ai trouvé une astuce pour avoir du texte officiellement choisi parmi les polices web-safe… japonaise.

C'est donc possible, même si indirect : voir ci-dessous pour la méthode.

Lire la suite...

jeudi 18 avril 2013

Animate, mouvements, imbrications, pourcentages

Sortons un peu des One Banner A Day pour développer un petit exemple qui permettra (je l'espère) de comprendre la différence entre les valeurs en pourcentage et en pixel lors de la création d'animations redimensionnables dans Edge Animate.

AnimateMotionGlobalApplied.png

Lire la suite...

jeudi 11 avril 2013

Commentaires PDF dans Adobe Reader

Petit billet avec des vidéos pour détailler les manières d'insérer des commentaires directement dans un fichier PDF, via Adobe Reader (gratuit). La première vidéo concernant l'ajout de commentaire, la seconde, le travail plus collaboratif, avec la validation de ces commentaires, et leur échange via un fichier FDF plus léger.

Lire la suite...

dimanche 17 février 2013

Edge Animate et les fontes incorporées

Si les animations que vous réalisez à l'aide d'Animate sont destinées à être vues hors connexion internet (par exemple, pour un contenu Digital Publishing Suite, dans un magazine sur tablette), il est souhaitable que les polices de caractère utilisées soient incorporées (contrairement aux simples webfonts, histoire d'éviter le désastre visuel…). EgAn-FontesIncorporees-Intro.png

Lire la suite...

mercredi 9 janvier 2013

Adobe Camera Raw - Inverser un filtre dégradé

Très simple de passer à côté de ce petit raccourci clavier dans Camera Raw : ACR-Grad-X1.jpg ACR-Grad-X2.jpg Lorsque vous placez un réglage par dégradé sur votre image, par exemple pour désaturer une partie de l'image, s'il vous arrive comme moi de modifier le mauvais côté de l'image, il n'est pas nécessaire d'effacer votre filtre dégradé ou de modifier la position de ses points rouge et vert, il suffit d'appuyer sur la touche X de votre clavier.

Et voilà votre désaturation haut-bas qui devient bas-haut. On ne peut faire plus simple. X

PS : Malgré l'excellent Cmd-< de Lightroom, je n'y ai pas trouvé de raccourci correspondant. ACR uniquement ?

lundi 29 octobre 2012

Tout savoir faire sur Illustrator

Article-3dMag-Illustrator-oracom-v2_700.jpg Plus de détails en cliquant de l'autre côté : je suis désormais disponible en kiosque !

dimanche 7 octobre 2012

Dégradés en bandes dans Photoshop

Sur le forum, un problème récurrent :

Systématiquement, quand j'applique un dégradé (couleur 1 > couleur 2 ou couleur > transparence), j'ai un effet de zones visibles. Bref, le dégradé n'est pas propre. Si j'essaye de le flouter, quelle que soit la méthode, c'est pareil. Idem en superposant des calques et en appliquant un flou dans un masque de fusion. Les images sont en RVB. Je n'ai certes pas un super écran, mais les zones dans les dégradés sont horriblement visibles. Il y a sans doute une option à paramétrer quelque part, mais là je sèche :-(

Ps-BandesDegrades-Rendu.jpg

Donc j'ai tenté la méthode du bruit que je détaille dans la suite de cette note (que j'ai repris ici pour poster le zip)

Lire la suite...

jeudi 27 septembre 2012

StyLighter — Visualiser vos styles sur inDesign

Ce n'est pas tout neuf, mais comme on vient de me poser la question sur le forum, j'en profite pour passer l'info ici :

Changer les couleurs dans les styles de paragraphe et de caractère est un truc de vieux routard extrêmement pratique pour savoir qui fait quoi dans votre document, et si tous les textes ont bien la même forme.

… sauf que cela nécessite de repasser tous les styles dans la bonne couleur au final (ou alors de faire des alias des couleurs à l'impression, mais cela commence à devenir complexe).

Or il existe aussi une solution moins bricolage et fort efficace via le script StyLighter sur indiscripts qui fait exactement ce dont on a besoin, de manière élégante (et réversible) :

iD-Script-StyLighter.png

Enjoy :) (et merci Marc !)

mardi 25 septembre 2012

Spritesheet depuis Flash

DivingFishAnimation.gifPour réaliser de petites animations numériques, une multitude d'outils d'offre à vous, certains plus adaptés et efficaces que d'autres.

Avec le temps, Flash a fait ses preuves en la matière et permet un travail efficace, principalement vectoriel.

Mais si votre animation est destinée a être visualisée, par exemple, sur une tablette ou un smartphone dont le navigateur n'utilise pas de plug-in (comprendre : iPad/iPhone) vous pourriez être tentés d'oublier l'outil, et de passer directement à Edge Animate.

Or, ce dernier, très efficace pour les animations de blocs, de textes ou d'images est malheureusement incapable de créer le moindre élément visuel, et sert principalement à intégrer et animer les éléments.

Découvrons ci-dessous la manière dont nous allons pouvoir exporter notre animation (en vue, plus tard, d'une utilisation dans Edge).

Lire la suite...

samedi 15 septembre 2012

Edge Animate — Polices et point-virgule

Jouons au jeu des 7 différences, en mode plus simple, avec juste 2 différences à noter et une petite subtilité pour que vos fontes fonctionnent correctement dans Adobe Edge Animate

Première image ici, la suivante dans le billet :

SemicolonAfterTypeFallbackFail.gif

Lire la suite...

- page 1 de 2