fr32c blog

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

Mot-clé - Illustrator

Fil des billets - Fil des commentaires

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é.

mercredi 11 septembre 2013

Simuler la sortie v1 - Script de prévisualisation dans Illustrator par Gustavo Del Vecchio

— Edit du 13/09 —
Le plug-in existe désormais en français, à télécharger ici (là où c'est écrit French). Vous êtes gâtés :)

Vous ne parlez ni anglais, ni portugais (portugais-brésilien, de plus), cet article est là pour vous.

Que les habitués d'inDesign se réjouissent, ils vont désormais retrouver leur W favori dans Illustrator et prévisualiser les pages, sans les guides et sans les éléments qui débordent des plans de travail.

Pour ce faire, jusqu'ici, il "suffisait" de créer un rectangle à la taille adaptée, et de creuser un autre rectangle beaucoup plus grand, puis d'afficher ou masquer la page.

Grâce au travail de Gustavo Del Vecchio vous bénéficiez d'un petit script tout simple qui va faire le travail à votre place, d'un clic.

OutputSimulationV1.png

En plus, il vous propose une fenêtre de dialogue pour ajuster la couleur du fond (blanc/gris/noir).

Pour l'instant, les plans de travail qui se recouvrent ne sont pas pris en compte, mais ça pourrait venir.

Là où ça devient intéressant, c'est quand on couple ce script et la technique pour ajouter un script et créer une action. Il ne vous reste plus qu'à choisir le raccourci à utiliser, sachant qu'on reste contraint aux F1 (et suivantes) + cmd + maj.

Le lien vers le script dans l'article en anglais.

jeudi 25 juillet 2013

SVG interactif via Illustrator

Le SVG est un des sujets récurrents que je croise à chaque fois que je parle d'animation avec Edge Animate, que ce soit en mode basique, ou en mode interactif.

Et pour cause, jusqu'ici, Edge Animate ne donne accès au SVG que sous la forme d'une image, inaccessible, à moins d'y entrer par le biais des Edge Commons

Après avoir lu une question sur le forum, dont l'auteur rêvait de reproduire cette infographie du Guardian, je me suis dit qu'il était grand temps que je rédige un petit truc, avec un exemple à la clé.

GrapheInteractif.png

Voici donc l'infographie SVG avec les légendes interactives. Très basique, vous n'aurez besoin que d'illustrator et de quoi saisir du texte brut.

Le reste dans le corps du billet.

Lire la suite...

samedi 18 mai 2013

Les nouveautés Creative Cloud

fr_449_neu_in_id_cc.jpg La nouvelle version d'InDesign débarque avec de nouvelles fonctionnalités : le menu Polices, les QR codes, le panneau Exchange intégré, etc. Vous y trouverez aussi de grandes avancées dans le domaine du ePub, mais surtout une refonte complète du code, qui est passé au 64bits pour une meilleure utilisation de toute la mémoire disponible, ainsi que la nouvelle interface HiDPI !

Au programme de cette formation video2brain

  • Une nouvelle version d'InDesign
  • InDesign et ePub
  • Nouvelles fonctions d'InDesign

Nous allons donc passer 45 minutes en tête à tête.

Mais la grosse révolution aura surtout lieu dans la transition des applications au Creative Cloud.

Plus besoin d'attendre que toutes les équipes aient finalisé les fonctionnalités d'une application pour bénéficier des nouveautés indispensables au quotidien sur votre logiciel préféré.

cc_landingpage_gf_fr.jpg

Et comme d'habitude, video2brain vous accompagne pour ne rater aucune des nouveautés. Quelques minutes avec vos formateurs favoris pour gagner des heures de travail au quotidien !

Continuez plus bas pour lire ce que vous ont concocté Yves Chatain (Ps), Jérôme Bareille (Ai), Jean-Luc Delon (Fl), Birnou Sébarte (Dw), Bruno Quintin (Ae) et Sébastien Gaillard (Pr) et accéder directement au contenu.

Lire la suite...

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 28 octobre 2012

Edge Code Preview — Visualiser la syntaxe colorée des SVG

Edge Code (pour l'instant Preview) est un éditeur de code à la fois très basique et très puissant distribué par Adobe et basé sur Brackets.

FR-EdgeCodePreview-Syntax-SVG.pngDestiné à écrire du code, le syntaxer, l'amender pour pouvoir fabriquer des sites web en html5, css et js, il est bien pratique, léger et très efficace, et surtout en évolution permanente. Or, dans les sites web aujourd'hui, avec le Responsive Web Design comme objectif, on utilise de plus en plus d'illustrations SVG.

Et le SVG, c'est bêtement un format de description de dessin vectoriel avec les instructions entre balises (Markup Language).

Sauf que par défaut, Edge Code Preview|Brackets Sprint 15 affichent le SVG comme du texte brut

Voyons ci-dessous comment faire évoluer son appli.

Lire la suite...

jeudi 30 août 2012

Illustrator Cs6 - Mise à jour Creative Cloud 16.1.0

Je vous ai déjà parlé du Creative Cloud et des mises à jour fréquentes des applications et services. Par exemple l'arrivée surprise de Lightroom dans l'offre déjà bien riche du Creative Cloud.

Cette fois-ci, c'est Illustrator qui s'y colle avec deux mises à jours, selon le type de version dont vous disposez : 16.0.1 si vous avez acheté la version perpétuelle et 16.1.0 si vous avez acheté la version Abonnement Creative Cloud.

La première fait partie des mises à jour standard, avec correction des bugs découverts une fois que l'application a été rendue publique (plus d'utilisateurs, plus de configurations machines, plus de manières d'utiliser l'outil = plus de bugs à résoudre).

La première est spécialement réservée aux abonnés Creative Cloud, qui n'auront pas à attendre la prochaine "grosse version" d'illustrator pour profiter des nouveautés.

Découvrons en quoi elle consiste.

Lire la suite...

mercredi 25 juillet 2012

Ai Spray Tools

Avec l'arrivée du 64 bits sur Illustrator et le retour de la puissance de calcul, on peut à nouveau parler des outils bien pratiques pour la création : les Outils de Symbolisme.

Ai-SprayTools.gif

Lire la suite...

lundi 25 juin 2012

Illustrator CS6 - Les points d'un tracé

Les points d'un tracé dans Illustrator CS6 de moi sur Vimeo.

Si chacun connait bien l'utilisation des tracés dans Illustrator, ces petits rappels devraient vous réconcilier avec les éléments qui constituent des tracés : les points. Abordé lors du e-séminaire sur les nouveautés de la Cs6, l'amélioration de l'interface et de l'ergonomie générale du logiciel passe aussi par la connaissance de ses composants.

Je vous représente donc quelques outils fort utiles :

  • Sélectionner tous les points d'un tracé, SAUF UN, permet de passer du mode tracé au mode point
  • L'outil Lasso (Q) pour sélectionner des points en alternance
  • Convertir les points en angles ou en arrondis
  • Aligner et répartir des points (bien plus pratique et efficace que cmd+alt+J)

Si vous voulez en savoir plus, Jérome Bareille — izidesign vous présente le reste dans Illustrator Cs6, les nouveautés.

Et vous, avez-vous d'autres astuces ?

samedi 5 mai 2012

Inverser le sens d'un tracé Illustrator - Installer un script et créer une action de script

Parfois, en utilisant illustrator, on cherche une fonction qui semble évidente, sans succès. Diverses méthodes plus ou moins efficaces, plus ou moins adaptées. Du coup on se plonge dans les forums, sur les sites de référence (j'en liste quelques uns dans mon delicious), et c'est le moment d'assembler les recherches, pour moi, pour plus tard, mais aussi pour vous :)
Ma dernière quête en date est l'inversion du sens du tracé (reverse path direction, en anglais, pour les intimes et ceux qui voudraient faire la recherche eux même), et ça a donné ces quelques minutes, plus la vidéo suivante où je développe un peu sur les scripts.

Inverser le sens d'un tracé dans Illustrator de moi sur Vimeo.

Donc, quelles sont les différentes manières (et raisons) d'inverser le sens d'un tracé dans illustrator :

  • Panneau options d'objet pour les formes fermées composées (tracés transparents).
  • Options de forme de brosse, symétrie horizontale pour les pinceaux
  • Clic sur le premier point qui devient le dernier point
  • Profil de contour / bouton Symétrie horizontale pour les épaisseurs de contour
  • Utilisation du script Reverse Path Direction
J'y parle de ce script chez Kelso Cartography tout en bas, par Wolfgang Reszel : Reverse Path Direction. Or, je me suis rendu compte qu'il n'était pas toujours évident de savoir où placer les scripts téléchargés, ni même comment les appeler.

Installer un script et créer une action

Il existe beaucoup de sites de scripting pour étendre les fonctionnalités d'illustrator (voir le delicious cité plus haut), pour les utiliser via le menu Fichier/Scripts, il suffira de les placer dans le répertoire Illustrator/Paramètres prédéfinis/fr_FR/scripts.
Or, il est impossible d'attribuer des raccourcis clavier à ces éléments de sous menu. On peut donc réaliser un script d'action (panneau scripts d'action) qui appellera directement ces scripts (javascripts), afin de leur assigner des touches de fonction ou un bouton coloré. En outre, les scripts d'action d'illustrator n'enregistrent pas les commandes de menu, donc il faut lui préciser.
Voilà pour aujourd'hui, j'espère que ça vous sera utile.

PS : sur la première vidéo, le son est sature brièvement par endroits, c'est assez agaçant, mais cela ne gâche pas d'information essentielle.

vendredi 30 mars 2012

Illustrator CS5 – Astuces de la Palette de Couleurs

Trucs et astuces de la palette couleurs dans Illustrator CS5 de moi sur Vimeo.

Lorsqu'on parle de couleurs dans illustrator, on a tendance à se focaliser sur les outils très complets et efficaces comme le guide de couleurs ou la modification/redéfinition des couleurs de l'illustration (comme j'en parlais lors du e-séminaire sur le sujet.

Or les modifications les plus fréquentes des couleurs dans Illustrator sont réalisées fort basiquement depuis la palette de couleurs, sans se préoccuper de réglages fins ou d'harmonies. Mais qui a déjà pris le temps d'explorer un peu plus les différents raccourcis et combinaisons, sur le spectre, sur les curseurs, sur les icones d'alerte ?

Après fait le tour du sujet à l'aide de Jérome Bareille — izidesign qui nous avait déjà bien défriché le terrain dans son excellent Fondamentaux d'Illustrator, j'ai compilé ce que j'avais sur cette palette, et uniquement celle-ci.

Qu'en pensez-vous ?

mardi 27 mars 2012

Mise en couleur et théorie avec Illustrator CS5

Avec le eSéminaire du jour, la liste de liens correspondants pour retrouver les indications données durant l'heure.

Quelques liens :

Mon Delicious (Franck Payen / fr32c) ou celui de Stéphane Baril (retrouver les liens mentionnés) Me suivre sur Twitter (et avoir des actualités sur ce sujet et d’autres) e-séminaires Adobe (pour vous inscrire aux séminaires suivants)

Des références et des tutoriels sur la couleur (dans Ai) :

Colorisation BD, le livre (Colorisation de Bande Dessinée du traditionnel au numérique – par Stéphane Baril & Naïts pour retrouver les slides sur la théorie de la couleur) Terry White (Comprendre les outils de couleur [En]) Mordy Couleur (Formation spécifique sur la couleur dans AiCS4[En]) Kuler (outil intégré aux Touch Apps, aux versions [En] de la Créative Suite et site de partage de thèmes de couleurs)

Illustrator formation et dessin

Formation Illustrator par Izidesign (La formation complète et en détails par Jérôme Bareille chez Vidéo2Brain) Adobe TV fr (l’essentiel des vidéos en français) Mordy Dessin sans plume (Redécouvrir le dessin vectoriel… sans la plume [En]) VectorTutsPlus (Ressource riche en tutoriaux [En]) Von Glitschka (Artiste digital) Google Translate (pour les textes en anglais)

mardi 14 février 2012

Gestion de la Couleur dans la Creative Suite (eSéminaire du 14 février 2012)

Suite au eSéminaire du 14 février 2012 sur la Gestion de la Couleur dans la Creative Suite, quelques liens pour retrouver les indications données durant l'heure, certains ont été réactualisés.

Quelques liens :

Mon Delicious (Franck Payen / fr32c) ou celui de Stéphane Baril (retrouver les liens mentionnés) Me suivre sur Twitter (et avoir des actualités sur ce sujet et d’autres) e-séminaires Adobe (pour vous inscrire aux séminaires suivants)

Les références sur le sujet :

CIE (L’historique Commission Internationale d’Eclairage) à ne pas confondre avec l’ECI (European Color Initiative) ou la Fogra
(Entités de recherche sur la couleur qui proposent (et commercialisent) des solutions et profils colorimétriques)

Pour décoder (et comprendre) tout ça :

Guide de gestion des couleurs (Site clair et détaillé d’Arnaud Frich de la théorie à la pratique) Gérard Niemetzky sur Wisibility (Explications vidéo sur la colorimétrie et les profils) ColorWiki (une base de données en ligne) 10 trucs Prépresse (par Marco Kramer sur Smashing Magazine [En]) Profil-Couleur (Compilation d’informations sur les profils par Daniel Metz) Worqx (Janet Lynn Ford sur la couleur, recherches et prédagogie intéressantes [En])

Et enfin quelques outils (parfois datés) :

J’aimais beaucoup Color Consultant Pro (abandonné, poursuivi sur d’autres outils du même éditeur) Colour Lovers (inspirations de gammes de couleurs par rapport à des visuels) Kuler (outil intégré aux Touch Apps, aux versions [En] de la créative et site de partage de thèmes de couleurs) Apple et Colorsync (Attention, page disparue, donc lien vers internet Archive) Google Translate (pour les textes en anglais)

dimanche 25 avril 2010

Dessin vectoriel dans Illustrator + peinture dans Photoshop

Ouh comme je m'amuse...

Les étapes du début sont faites dans illustrator, pas grand chose de différent dans la cs5.
Là où ça devient intéressant, sur ce genre de projet, c'est l'outil "Shape Builder" (je ne sais pas encore comment il va s'appeler en français) qui me permet à coup de alt-clic de supprimer des traits, un peu comme dans Flash.
On poursuit le dessin avec un autre outil bien classe : "Width", l'outil "épaisseur", qui va permettre d'appliquer des épaisseurs aux tracés, même s'il ne s'agit pas de brosses, et, surtout, de manière dynamique et ajustable : si ça ne me va pas, je peux revenir, décaler l'épaisseur, épaissir un côté ou l'autre de mon tracé, pour aérer la lecture.
Pour la mise en couleur, toujours l'outil Shape Builder, cette fois-ci avec le nuancier affiché, pour remplir des espaces. Un peu comme la peinture dynamique, mais en plus direct, le tout croisé avec le pathfinder.
Ensuite j'ouvre tout ça dans photoshop pour profiter des nouvelles brosses de peinture "naturelle" (oui, bon...), et je réimporte ce psd dans mon illustrator, pour conserver la transparence.

Et voilà :)

jeudi 24 mai 2007

Meuh si, je bosse


Je sais, ça devrait aller de l'autre côté, mais comme c'est pour un boulot, que c'est en cours, etc etc, y'avait de la place ici.