I-Am

jeudi 17 mai 2012

inDesign, numéro de page active, numéro de la dernière page (nombre de pages d'un document)

Avec le Digital Publishing Suite pour inDesign, les besoins sur les documents longs se font à nouveau ressentir parmi les utilisateurs.

Hier, durant une formation, nous abordions la question de la pagination (jolie assonance en "ion"). Un livre papier va de la première à la dernière page en continu. Un folio/magazine DPS est plutôt une succession d'articles/colonnes, chaque colonne étant un document indesign avec un certain nombre de pages dedans. On a donc vu fleurir les articles dont la pagination est "numéro de page/nombre de pages de l'article" (1/8, 2/8…)

Or, si le "numéro de page active" est "facile" à retrouver dans inDesign (ou en tous cas bien connu : Menu Texte / Insérer un caractère spécial / Marques / Numéro de page active et qu'il a un raccourci clavier standard (cmd-alt-maj-N)), je ne trouvais pas dans ce menu de "numéro de la dernière page" ou de "nombre de pages total". Et tout ça en me disant que 1, c'était ballot, que 2, c'était quand même étrange que ça n'existe pas, mais bon, ce n'était pas le sujet du jour et on est passé à autre chose, en rentrant ce chiffre à la main, en dur, dans le gabarit (bof).

Et pour cause, ce nombre existe bien, et c'est une variable, donc dynamique, donc je peux passer mes gabarits d'un document à l'autre sans avoir à ressaisir ces valeurs. Joie :)

Et donc, la vue depuis le gabarit A/1 page de gabarit, puis sur la page 1/12 pages de document.

Au travail :)

mardi 15 mai 2012

Adobe Muse 1.0

Muse est enfin disponible en version 1.0 ! Depuis le 11 mai avec la mise à disposition du Creative Cloud Muse est donc en version "finale", stable, fonctionnelle.

En quelques lignes, Muse, c'est donc le nouvel outil d'Adobe qui va vous permettre de fabriquer des sites internet de largeur fixe, aussi simplement que vous réalisiez des documents pour l'impression dans inDesign (inD).

L'idée sous-jacente est d'avoir un outil qui soit simple et compréhensible par des graphistes, designers qui n'ont pas forcément de connaissances approfondies du web, mais seulement un usage et surtout un vrai savoir faire quant à la mise en page.

Mais là où l'équipe vante le côté "zéro code", je placerais plutôt le sujet sur le thème du "zéro mal de crâne". Avec Muse, en effet, pas besoin de connaître les css3, javascript (ou jquery ou autre) pour faire des rollover. Pas besoin de décortiquer l'inspecteur de propriétés pour placer les textes, de façon structurée.

Évidemment, comprendre que les écrans ne fonctionnent pas de la même manière que des plaquettes imprimées, qu'on y ajoute du mouvement (de l'animation), du multimédia (de la vidéo), de l'interactivité (des menus, une navigation…), évidemment, cela fera partie de l'apprentissage, et pourquoi pas, plus tard de franchir le cap qui vous sépare de cet autre métier : Développeur. Le webdesigner va pouvoir choisir sa casquette favorite, et le graphiste, maquettiste, designer graphique, vont enfin se confronter directement au web.

L'idée de départ est de se limiter à la partie graphique, à convertir des idées et composer des mises "print" pour le web, sans s'empêtrer dans les problématiques techniques.

Et surtout, on va pouvoir concevoir des sites internet qui reflètent réellement ce qui était proposé pour le print, sans s'appuyer forcément sur des modèles ou templates préexistants qui uniformisent visuellement le net. Le retour de la typographie en ligne, la gestion de l'espace, des blancs, qu'on aurait presque oublié ces dernières années, sans la complexité du codage.

Bien entendu, on pourra "intégrer" du code, le copier-coller, intégrer des éléments, widgets et autres. On pourra même intégrer l'ensemble à la plateforme Business Catalyst pour une gestion dynamique des éléments. Mais c'est déjà une autre histoire.

Au menu, pour l'instant :

  • une partie plan, un peu comme le panneau pages d'inD. Des gabarits qu'on applique, une arborescence qu'on déploie, qu'on réorganise à l'envie. C'est simple, efficace, et ça marche très très bien.
  • une partie conception, là, c'est votre plan de travail, les éléments réagissent avec des repères commentés pour aligner, espacer, répartir les éléments dans l'espace. On retrouvera des nuanciers, des palettes de texte, une traduction efficace des outils de design print à destination du web
  • une partie aperçu tout simplement parce qu'il faut tester, la disposition, les interactivités…
  • une partie publication et une gestion parce que Muse peut aussi se lier à Business Catalyst pour toute la partie dynamique.

Les abonnés de video2brain avaient eu droit à une petite video tour d'horizon où je présentais cet outil de design graphique pour le Web. Donc, si vous êtes pressés de découvrir l'outil, c'est une heure, ça va vite, et surtout ça reste focalisé sur une version béta un chouya moins aboutie (évidemment), mais déjà fonctionnelle.

Et c'est ici :

Sinon, sans vous gâcher la surprise, restez à l'écoute ici. Comme le sujet méritait un certain approfondissement avec des démonstrations, des présentations de fonctionnement sur des séquences suffisamment courtes… Bref, on l'a fait et ça arrive très très bientôt, n'hésitez pas à bookmarker, à diffuser, et même à vous inscrire sur la page pour être informé de quand c'est sorti.

Ce sera ici :

samedi 12 mai 2012

Adobe Edge et Google Webfonts (v2)

De "Tout le monde peut se tromper" à "Success is 99% failure" (S. Honda), pour une raison que j'ignore, fin janvier, je postais ça comme ultime réponse au placement de Google Webfonts dans un document Edge Preview 4.

Ça servait de base pour une petite vidéo qu'on avait ajouté au projet introduction à Edge chez video2brain.

Méthode d'alors

  • préparer sa collection dans Google Webfonts ("choose")
  • regarder ce que ça donne dans le panneau "review"
  • copier du code depuis le panneau "use", 3e onglet "javascript"
  • coller dans Edge

Le code en question :

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lilita+One::latin', 'Rouge+Script::latin', 'Ropa+Sans::latin', 'Emblema+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

Et puis hier, en cherchant à refaire du Edge avec la Preview 6, pas moyen d'avoir une fonte avec des espaces dedans. S'ensuit un échange avec Mark Anders qui me confirme que ça marche, à condition de coller non pas le javascript, mais le standard :

<link href='http://fonts.googleapis.com/css?family=Lilita+One|Rouge+Script|Ropa+Sans|Emblema+One' rel='stylesheet' type='text/css'>

Méthode que je recommande maintenant, parce qu'elle ne semblait pas fonctionner en janvier, mais qu'elle marche parfaitement maintenant, avec ou sans les collections.

On peut en effet ne copier qu'une fonte à la fois, pas forcément une famille. Ça rend les choses plus simples.

En plus, le code est désormais lisible, standard, et traduit correctement de Edge au html. bref, que du bonheur.

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.

mardi 17 avril 2012

Les rougets du Bateau du Ch'ti

En ce moment, je me donne l'occasion d'essayer les tables arrageoises, parfois par hasard, souvent sur les bons conseils des copains.

L'autre soir, c'est le Bateau du Ch'ti qui nous a accueilli en soirée. Je n'en gardais pas un souvenir marqué, juste une bonne cocotte de moules, quelques années auparavant.

Mais ce soir là, j'avais décidé de me faire plaisir et de me laisser guider par la carte, et je crois que j'ai bien fait.

Après les petites rillettes de la mer maison, je suis parti sur les rougets, simples, joliment présentés avec leur accompagnement, savoureux et pourtant pas bien compliqué : quelques pommes de terres, des carottes, poivronade, courgettes, et la petite sauce pour relever le tout.

Passés au gros sel, c'est efficace, copieux sans être étouffant, et l'idée des petites verrines permet de mieux profiter des saveur et de composer ses bouchées.

L'ambiance y est conviviale, le service impeccable et les tarifs décents. Je recommande chaudement, sur la petite place, face au beffroi, tout est là.

Prochaine étape, qu'ils aient leur propre site internet, avec des photos des plats plutôt que de la salle vide, mais bon, en attendant, tant qu'on y mange bien…

Le Bateau du Ch'ti, 17 Place des Héros à Arras (62)

vendredi 6 avril 2012

Edge et Muse

''Note pour plus tard'' : c'est pas bien compliqué de coller une animation Edge dans Muse, mais faut juste pas s'attendre à voir du rendu en direct comme pour les Google Maps.

Ah, et faut aussi bien connaître sa hiérarchie de dossiers.

Donc, par exemple, dans mon dossier MuseExport (là où Muse met tout son site), j'irai poser mon dossier EdgeAnim, dans lequel je pourrai cibler Animation.html

Y'aura plus qu'à mettre une taille, virer les bords, et zou.

Si je laisse ça en wiki, c'est très lisible, si je place en html, vous allez juste voir l'anim, pas le code :)

<iframe src="EdgeAnim/Animation.html" width="600px" height="200px" frameborder="0" scrolling="no"> </iframe>

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)

lundi 26 mars 2012

Bergstrom, en-dessous de Paris

Fasciné hier par cette vue de Paris en 1976, je me suis mis à rechercher (compulsivement sur Google Maps) où dans Paris j'aurais des chances de trouver le lieu de la prise de vue.

Et donc, ce cher Helmut Newton était tout simplement en haut du Concorde Lafayette, entre la Porte Maillot et l'avenue des Ternes pour réaliser la célèbre ''Bergstrom, au-dessus de Paris''.

Sympathique exposition au Grand Palais, malgré un espace un peu étroit, une foule un peu trop dense et des photos accrochées un peu trop haut.

Fin d'un cycle…

Voilà, je suis arrivé au bout.

Après 10 ans de bons et loyaux services, je suis allé à la préfecture me faire ficher remplacer ce cher passeport "old school" par sa version biométrique, avec emprunte de tous mes doigts, photos réglementaires, et sans doute tout un tas d'autres trucs d'identification et de sécurité que j'ai la flemme de rechercher. Tout ça parce qu'entre temps, il a été rendu un chouya plus complexe de voyager vers les états-unis (welcome DHS, ESTA…).

Et puis je me souviens d'une époque pas si lointaine où certains voyageurs exhibaient leurs vieux passeports à qui il manquait un coin, proprement découpé, mais qui y retrouvaient leurs voyages au gré des pages et des visas.

Le mien a disparu, avec sa photo décollée (joie à la douane US), ses validations de sorties non dégrafées…

Mais j'ai gardé un souvenir. Ceux qui prennent l'avion souvent doivent trouver ça bizarre, et surtout mono-maniaque. Ceux qui ne voyagent pas du tout doivent me prendre pour un globe trotter. Et pourtant, en dix ans, je n'ai visité que 3 destinations hors UE. Les états-unis, en 2003. Californie en été, NYC à Noël, avec les copains. Et puis après, ça a été le japon, pour aller rendre visite à ce cher vieux Bikoko (qui ne blogue plus depuis bien trop longtemps). 2005, 2006, 2007. Petite pause en 2008 et 2009, je devais avoir autre chose à faire, ou juste Osaka m'intéressait moins. Et puis finalement, 2010 (avec Christelle, à Setouchi) et 2011, à Tokyo, Kusatsu (parce que Niigata était sous l'eau), Kanazawa… Oh, et un crochet à Marrakech, histoire de visiter.

Visas 2003-2011

Voilà, c'est tout pour celui là, le nouveau est arrivé, et si tout va bien, il pourra faire un nouveau cycle, vu qu'il va démarrer pareil :)

jeudi 22 mars 2012

Lightroom 4, Photoshop CS5 et CameraRaw 6.7

Lors du e-Séminaire Adobe que je donnais hier sur Photoshop et Lightroom pour les photographes je me suis un peu attardé sur la version 4 de Lightroom, parue voilà moins de 2 semaines.

J'y soulevais une question sur la traduction des images entre Lightroom 4 (avec son nouveau process de développement 2012) et Photoshop CS5 + CameraRaw (restés en process 2010). En gros, une image développée dans Lr4 peut effectivement être ouverte en tant qu'objet dynamique dans PsCS5+CR6.7, mais on ne pourra pas encore affiner les réglages. Pour cela, voir CameraRaw 7, disponible dans la béta de Photoshop CS6 depuis ce matin

Comme convenu, j'ai regardé, et j'ai des réponses de l'état du 6.7 :

Tout d'abord, l'interface, le changement est flagrant, avec la disparition de la récup, lumière d'appoint, et une réorganisation autour des tons clairs et foncés. Plus à droite, quand j'ouvre telle qu'elle mon image Lr4-2012, j'ai un panneau pas tout à fait traduit, et un peu diminué.

J'ai donc repris une des images de la série les dojos au japon par Frédéric Tingaud (10par15.com), histoire de faire des tests.

Evidemment, si je veux manipuler tous les réglages de ma photo, je dois repasser dans le process de 2010, et là, le rendu est "par défaut", donc attention :

mardi 13 mars 2012

Edge et fontes CSS3

Suite au e-Séminaire Edge de ce matin et en voyant une note de blog chez Typekit, j'ai cherché une solution pour intégrer des css un peu plus poussées dans Edge (qu'est un peu limité pour le moment).

C'est donc suite à un beau bricolage que j'en suis arrivé à ce mélange là.

Tout d'abord, déclarer une nouvelle fonte et dans le code à intégrer coller le style css (qu'on va appliquer ici à une balise h1).

Sur le texte sélectionné, appliquer les ensembles de typos (avec fallback) crées,

Et surtout appliquer la bonne balise, celle définie dans la feuille de style (ici, h1)

Ci-dessous, le résultat (sélectionnable, et tout…)

Edge et animations interactives en HTML5

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 (Pour retrouver une partie des liens mentionnés durant ce e-séminaire) Me suivre sur Twitter (et avoir des actualités sur ce sujet et d’autres) e-séminaires (pour vous inscrire aux sujets suivants)

Découvrir Adobe Edge :

Edge (sur le labs d’Adobe, les installations, les démos, les cours) la Preview 5, mais aussi la Preview 4 (pour ne rien rater des nouvelles fonctions), AdobeTV (pour le reste des vidéos) l’introduction à Edge chez Vidéo2Brain (pour une prise en mains rapide et efficace), Mark Anders (qui présente le nouvel outil, en Anglais), d’excellents exemples (fichiers démos, à décomposer) Google Translate (pour les textes)

D’autres outils et informations complémentaires :

Google Web Fonts ou Typekit (Typothèques riche et accessible en ligne) Muse (La création de sites internet accessible aux graphistes)

vendredi 9 mars 2012

Soba à la truite

Ça fait un petit bout de temps que je pratique cette recette, et un peu moins que j'ai réalisé cette illustration. Y'avait toute une série d'explications pas à pas que finalement je n'ai jamais finalisées, donc on se contentera de la vue d'ensemble des ingrédients.

Donc, il vous faut : de la truite fumée (sur ce plat, bien meilleure que le saumon), du gingembre (l'équivalent d'une noix), un demi citron vert, une ou deux gousses d'ail, 4 cuillères à soupe d'huile d'olive, 2 cuillères à soupe de sauce soja, un peu de ciboulette, et évidemment des soba (nouilles de blé noir, japonaises, servies par portion liées).

Pendant que l'eau bout, vous pouvez commencer à hacher/presser/réduire dans un bol l'ail, le gingembre. Y ajouter l'huile, la sauce soja, la ciboulette. Dépecer le citron vert pour ne mettre que la pulpe dans le bol.

Plonger vos sobas dans l'eau bouillante. Pendant ce temps, découper la truite en petits carrés.

Égoutter et refroidir les sobas sous l'eau froide (ré-égoutter ensuite), les placer dans les bols/assiettes creuses pour le service, répartir les morceaux de truite, disposer un peu de la sauce par dessus, proposer le reste dans un joli bol.

C'est froid, c'est fort, c'est bon, et ça prend à peu près 10 minutes à faire.

mercredi 7 mars 2012

Aubergine farcie

Ce soir, c'était expérimentation, avec :

  • une aubergine, plongée dans l'eau bouillante un certain temps, puis vidée;
  • une demi échalote, finement hachée;
  • quatre tranchettes de viande des grisons, recoupées en petits carrés de 5mm;
  • 1/4 d'emmental, pareil, carrés, 5mm;
  • quelques cuillères d'huile de truffe (pour le parfum);
  • quelques cuillères d'huile de pépin de courge (pour adoucir ça et pour la couleur);
  • un peu de cumin moulu pour parfumer;
  • une endive en accompagnement;
  • une petite soupe miso pour faire passer le tout.

Voilà, bon, facile, léger. Contents.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 >