Transat Creative Design

Par Pierre Pernix, le 4 décembre 2011  2 commentaires

DÉMO: Une mise en pratique de la méthode décrite ici est visible à cette adresse, dans les blocs du bas de page: http://india-pale-ale.fr

Inspiré par l’étiquette au look rétro d’une bouteille de Kalhua, dont le contour est découpé en forme de vague, je décidais d’appliquer cet effet à un bloc texte dans une page que j’étais en train de réaliser. En gros, un rectangle dont le contour serait constitué d’un motif ondulé, relativement facile à réaliser en vectoriel.

Il y a peu, j’aurais choisi de placer une seule image, celle du rectangle ainsi obtenu, en arrière-plan de mon texte.
Problème: il m’aurait fallu définir une largeur et une hauteur fixe pour mon bloc, afin que le contenu de ce dernier ne déborde pas au delà de l’image d’arrière plan. Or, j’ai bien l’intention de faire en sorte que mon bloc s’adapte non seulement en largeur mais aussi en hauteur, car l’ensemble de mon design devra être fluide, ou responsive, c’est à dire que son contenu pourra être redimensionné en fonction de résolutions bien différentes (écran d’ordinateur de bureau, netbook, tablette, smartphones, etc).
Heureusement, une nouvelle fonctionnalité apportée par CSS3 va nous permettre d’arriver à un résultat similaire: la possibilité d’ajouter plusieurs images à l’intérieur de la propriété background, ou multiple backgrounds.

Certes, on aurait pu s’intéresser à la propriété border-image, laquelle permet, comme son nom l’indique, d’utiliser une image pour générer la bordure d’un élément.Dans la mesure où j’ai trouvé mon bonheur autrement, je laisse cette dernière propriété de côté. En outre, ma solution m’a paru plus simple à mettre en œuvre, là où border-image semble relativement compliquée à utiliser (plein d’exemples à cette adresse). Bien sûr, j’invite tous ceux qui arrivent au même, voire à un meilleur résultat avec cette autre propriété à nous présenter leur travail dans les commentaires.

OK, voilà le principe: notre rectangle doit comporter une couleur de fond, et chacun de ses côtés sera décoré via la répétition d’un motif ondulé de la même couleur. A chaque côté son motif: en haut, un motif horizontal, dont la partie basse est de la même couleur que le fond du rectangle, et dont la partie haute est de la même couleur que le fond de la page. A droite, un motif vertical, dont la partie gauche est de la même couleur que le fond du rectangle, et la partie droite de la même couleur que le fond de la page. Etc, etc.

Première étape: dessin des motifs avec Inkscape

Vous ne connaissez pas Inkscape? Pas de problème. Il s’agit d’un logiciel libre et gratuit que vous pourrez télécharger à cette adresse: http://inkscape.org. Les étapes ci-dessous sont suffisamment détaillées pour convenir à un débutant de la première heure.
Vous détestez Inkscape, vous utilisez un autre logiciel? Pas de problème. Débrouillez vous pour créer une forme similaire à celle décrite ci-dessous, et rendez-vous directement à la partie consacrée à l’intégration CSS.

Création du motif

Avec l’outil «Créer des rectangles ou des carrés», dessiner un rectangle horizontal (dont la largeur est plus grande que la hauteur).

Cet objet rectangle doit maintenant être transformé en chemin («Chemin > Objet en chemin») pour que nous puissions intervenir sur les nœuds qui le composent.

Choisir l’outil «Édition de nœuds» et cliquer sur le rectangle (ou double-cliquez sur le rectangle avec l’outil de sélection classique). Sélectionner les deux nœuds supérieurs du rectangle.

La manipulation des nœuds s’effectue toujours avec l’outil «Édition de nœuds», bien sûr. Quand cet outil est actif, vous verrez apparaître un menu contextuel horizontal sous le menu principal, lequel comporte toutes les actions ayant trait à la manipulation des nœuds: création, suppression, fusion de nœuds, adoucissement, etc.

On va ajouter un nœud supplémentaire à mi-chemin entre les deux nœuds sélectionnés: cliquez sur «Ajouter un nœud» dans le menu contextuel du haut.

Le nœud que vous venez de créer doit maintenant être aligné sur le côté inférieur du rectangle. Pour y parvenir, nous allons avoir besoin d’afficher la boîte «Aligner et distribuer» («Objet > Aligner et distribuer»). Sélectionnez les 3 nœuds que vous voulez aligner, en l’occurence le nœud nouvellement créé et les deux nœuds inférieurs du rectangle, et choisissez «Aligner les nœuds sélectionnés selon une ligne horizontale» dans la boîte «Aligner et distribuer».

Nous pourrions nous contenter de ce résultat si nous voulions créer un rectangle dont la bordure est en dent de scie. Ce motif s’y prêterait parfaitement. Cependant, et pour coller avec notre modèle (l’étiquette de la bouteille de Kalhua), nous allons devoir arrondir les angles.

Sélectionnez le point nouvellement créé, lequel est maintenant situé sur la ligne inférieure du rectangle, et transformez-le en cliquant sur «Rendre symétrique les nœuds sélectionnés» dans le menu contextuel.

Reste à arrondir les deux nœuds du haut, pour que notre motif, se répétant, offre la vision d’une vague. Il va falloir arrondir chaque nœud séparément: l’outil «Éditer les nœuds» activé et le rectangle sélectionné, maintenez la touche «Maj» enfoncée et tirez avec le bouton gauche de votre souris sur le nœud de gauche vers le côté droit du rectangle. Vous êtes en train de manipuler une des poignées de contôle du chemin qui fait suite au nœud sélectionné, en donnant à ce chemin une forme courbe.
Pour être certain que le départ de cette courbe est parfaitement parallèle au côté supérieur du rectangle, maintenez enfoncée, en plus de la touche «Maj», la touche «Ctrl». Ainsi, l’arrondi de la demi-courbe aura pour sommet l’extrémité supérieure du rectangle et s’alignera parfaitement avec l’autre demi-courbe du motif suivant lors de sa répétition horizontale.

Quand vous avez terminé de façonner votre courbe, relâchez le bouton de la souris et répétez l’opération sur le nœud de droite, en tirant cette fois-ci la poignée de contrôle de la courbe vers la gauche, pour obtenir une courbe symétrique à celle que vous venez de dessiner.

Votre motif est terminé.
Choisissez sa couleur de fond: votre forme sélectionnée, faites un clic gauche sur une des couleurs du nuancier. Appliquez un contour transparent à votre forme: clic-droit sur la case «Aucune couleur» du nuancier.

Vous n’avez plus qu’à adapter sa taille à vos besoins. Dans l’exemple ci-dessus, notre forme on a été aplatie. Si possible, déformez votre motif en vous aidant de la grille («Affichage > grille»): zoomez jusqu’au niveau d’affichage le plus précis de la grille (c’est à dire au pixel près) et alignez votre forme sur cette grille de façons à ce que la largeur et la hauteur de votre forme correspondent à un nombre exact de pixels, et pas des valeurs avec virgule. Un pixel est un pixel, n’est ce pas?
Pour redimensionner votre forme, tirez sur les poignées qui s’affichent, l’outil de sélection classique activé, au premier clic effectué sur votre forme pour la sélectionner.

Si vous négligez cette étape, ce n’est pas grave, car Inkscape arrondira les valeurs de largeur et de hauteur pendant l’exportation pour générer une image dont les dimensions offrent un nombre rond de pixels.
Mais de cette façon, au moins, vous avez le contrôle sur vos mesures.

Voilà pour le premier motif, celui du haut de notre bloc. Passons aux suivants.
Dupliquons notre forme (Ctrl+D) et faisons-la pivoter (avec l’outil de sélection classique, faire un premier clic gauche sur l’objet à modifier pour le sélectionner, puis un deuxième clic gauche pour faire apparaître les poignées de rotation. Renouveler trois fois l’opération, pour obtenir les autres motifs: droite, bas, gauche.

Exportation

Easy. Ici, pas de tranches, de trucs et de machins. Sélectionnez un de vos motifs avec l’outil de sélection classique, et dans la fenêtre d’exportation que vous aurez pris soin d’afficher («Fichier > Exporter en bitmap»), entrez l’emplacement du disque dur sous lequel vous allez enregistrer votre image ainsi que son nom. Un clic sur le bouton «Exporter», et c’est réglé.

Un détail supplémentaire, tout de même:
Si votre motif est posé directement sur le fond de votre document Inkscape, l’extérieur de la forme ondulée dans l’image exportée ne sera pas blanc comme le fond du document, mais transparent. Pour être sûr d’exporter votre motif sur fond blanc, dessinez un rectangle de cette couleur assez grand pour englober vos quatre motifs et positionnez-le en-dessous de ces derniers (rectangle sélectionné, puis «Objet > Descendre à l’arrière plan»). Inkscape tiendra compte de la présence de ce rectangle de fond lors de l’exportation (à moins que n’ayez expressément coché la case «Cacher tout sauf la sélection»).

Deuxième étape: intégration en CSS

Ouvrez votre éditeur de texte préféré.
Voilà à quoi pourrait ressembler votre markup:

<div class="decorated">
   <h2>Un bloc au contour ondulé redimensionnable</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Et maintenant, le contenu de la CSS:

.decorated {
   padding: 25px;
   background:
      url("images/decorated-top-border.png") top left repeat-x,
      url("images/decorated-right-border.png") top right repeat-y,
      url("images/decorated-bottom-border.png") bottom right repeat-x,
      url("images/decorated-left-border.png") bottom left repeat-y,
      #e6e6e6;
}

Même si vous n’êtes pas familiers des multiples backgrounds, il vous aura suffi de quelques secondes pour comprendre que ce n’était pas compliqué. Chaque déclaration d’arrière plan est ajoutée à l’intérieur de la propriété background, suivie d’une virgule, et on termine par un point virgule, pour clore la déclaration.
Entre temps, on a aussi défini la couleur de fond de notre bloc, à la suite des différentes images.
J’ai choisi de recourir à une syntaxe simplifiée (shorthand) pour définir les multiples backgrounds, mais on aurait pu l’écrire autrement:

.decorated {
   padding: 25px;
   background-image:
      url("images/decorated-top-border.png"),
      url("images/decorated-right-border.png");
      url("images/decorated-bottom-border.png"),
      url("images/decorated-left-border.png");
   background-position:
      top left,
      top right;
      bottom right,
      bottom left;
   background-repeat:
      repeat-x,
      repeat-y,
      repeat-x,
      repeat-y;
   background-color: #e6e6e6;
}

Mais bon, franchement, lequel des deux vous paraît le plus élégant et le plus simple à maintenir?

L’ordre des images a son importance. Contrairement à ce qui arrive dans un flow normal en HTML, pour lequel les éléments déclarés en dernier sont au-dessus de la pile, ici c’est l’inverse: l’image déclarée en dernier est celle qui se retouvera sous la pile. Or, chacun de ces motifs va se répéter sur la largeur ou la hauteur de notre bloc, et forcément croiser le chemin de son voisin dans un angle.

Naturellement, j’ai déclaré les images d’arrière-plan comme je l’aurais fait pour n’importe quel shorthand CSS: en suivant le sens des aiguilles d’une montre, en commençant par le haut.
Cependant, raisonnons: puisque les motifs sont opaques, il suffit que l’un se superpose à l’autre pour le cacher entièrement. Prenons le motif du haut: se répétant à l’infini jusqu’au bord droite de notre bloc, et il y a de fortes chances pour que sa dernière répétition soit interrompue avant la fin, à moins que la somme de chaque répétition corresponde exactement à la largeur de notre bloc, ce qui est très improbable. Faisons donc en sorte que le motif suivant (pour le bord droit du bloc), que nous ferons démarrer en haut à droite, se retrouve en-dessous. Parfait, il suffit de le déclarer en deuxième dans la liste des images d’arrière plan, comme prévu. Quoiqu’il arrive, le motif du haut cachera le départ du motif de droite, et le raccord paraîtra inaperçu. Idem pour le troisième motif (pour le bord inférieur du bloc), déclaré en troisième position, dont le départ de l’angle bas-droite sera à son tour caché par le motif qui le précède (celui de droite, vous suivez, hein?).

Et puis là, crac: le quatrième motif, qui va se répéter verticalement depuis l’angle bas-gauche du bloc jusqu’à l’angle haut-gauche (si l’on suit le sens des aiguille d’une montre) finira fatalement sous le premier motif, mais là le raccord ne pourra être caché. Il y a toujours très peu de chance pour que la dernière répétition du motif de gauche tombe pile poil sous le premier motif du haut. Ainsi, selon la largeur ou la hauteur de votre bloc, la terminaison haut-gauche risque fort de ressembler à ceci:

Rusons: pourquoi ne pas ajouter une cinquième image d’arrière-plan, sans répétition, simplement calée en haut à gauche, laquelle viendrait masquer le raccord de gauche de façon à obtenir une terminaison plus satisfaisante?
Appelons-la « terminaison de motif ».

De retour dans Inkscape, on crée une forme qui correspond à la moitié d’un motif vertical. Dupliquez le motif vertical gauche (partie gauche: fond de la page ; partie droite: fond du rectangle) et coupez-le en deux, pour n’en conserver que la partie supérieure.
Pour celà, sélectionnez la forme ainsi dupliquée avec l’outil «Éditer les nœuds», sélectionnez le nœud du milieu, celui qui constitue le creux de la vague, ainsi qu’un des deux nœuds inférieurs de la forme.

Ensuite, cliquez sur «Supprimer un segment entre deux nœuds non terminaux» dans le menu contextuel, ce qui aura pour effet d’isoler le nœud du milieu de l’autre nœud sélectionné, rompant le chemin qui les liait.

Il ne vous reste plus qu’à supprimer les deux nœuds inférieurs, et vous vous retrouvez avec la moitié de la forme originale (bouton «Supprimer les nœuds sélectionnés»).

Notre « terminaison de motif » est prête.

Il reste à exporter le motif ainsi obtenu, en ayant soin, cette fois-ci, de cocher la case «Cacher tout sauf la sélection». Nous ne voulons pas que notre « terminaison de motif » comporte aussi  la couleur du fond de la page, mais seulement l’intérieur de la bordure. Pour que l’angle haut-gauche se termine par le sommet d’une ondulation, il faut que « terminaison de motif » se confonde avec la dernière occurence du motif de gauche, en superposant le petit bout de courbe qui pourrait manquer.

Voilà le résultat:

Dans la deuxième figure, la « terminaison de motif » est en rouge: on voit bien la position occupée par ce petit bout de courbe, lequel vient sauver les apparences.

Le code défintif:

.decorated {
   padding: 25px;
   background:
      url("images/decorated-end-border.png") top left no-repeat,
      url("images/decorated-top-border.png") top left repeat-x,
      url("images/decorated-right-border.png") top right repeat-y,
      url("images/decorated-bottom-border.png") bottom right repeat-x,
      url("images/decorated-left-border.png") bottom left repeat-y,
      #e6e6e6;
}

Conclusion

Voilà. Notre bloc façon étiquette rétro est tout à fait terminé et complètement responsive. La taille du bloc pourra évoluer, en fonction de la largeur de l’écran, de la disposition ou de la quantité de son contenu, que sa bordure s’adaptera de la même façon.

Vous trouverez certainement quantité d’autres motifs avec lesquels composer une bordure pour vos blocs selon cette méthode. J’attends avec impatience d’admirer le résultat de vos expérimentations…

A lire ailleurs

• Multiples backgrounds sur Alsacréations

Par Pascal Pernix, le 19 juin 2011  Laissez un commentaire

Quoi qu’on en pense, et avec toute l’admiration que nos nouvelles générations portent aux gadgets électroniques que des pubs intelligentes nous persuadent de posséder, le retour aux basiques a parfois du bon.

Prenez un objectif 24-70mm f/2.8 qui en a vu des vertes et des pas mûres, bref, qui a du mal a faire le point sur l’ensemble de la lentille, pour ne citer que ça. Ça vous donne des effets involontaires qui du coup en deviennent… intéressants. Hasardeux, du moins. Fascinants, parfois.
Rajoutez un filtre UV brossé au sable caribéen (ça non plus, ce n’était pas forcément volontaire, oups), et prenez le temps d’observer la lumière.
Parce que c’est ça, le « basique ». La lumière. Les lignes. Le volume. Les couleurs… Le bidouillage électronique n’est alors plus là que pour soutenir une bonne prise de vue, et non pas l’inverse.

Par Pierre Pernix, le 25 mai 2011  15 commentaires

EDIT : j’ai pu lire, à la fin d’un article de Smashing Magazine, ces quelques commentaires (éclairés) qui, quelque part, rejoignent le mien.
A lire aussi, cette intéressante interview du créateur Raphaël Bastide, lequel prêche pour un changement d’approche dans la conception web d’où seraient absents les softs de retouche, dont Photoshop.

Je ne peux m’empêcher de fulminer à la lecture du moindre article où il est question de l’usage de Photoshop pour réaliser des maquettes pour le web. Voilà comment ça se passe : j’ai chaud, je bave, mes tempes me font mal. Ce genre là. Comme je suis d’un naturel distrait et que j’oublie régulièrement de suivre ma timeline (quand on a du boulot, on est distrait) ou de checker les colonnes de mon agrégateur, j’arrive systématiquement après la bataille des commentaires. Une goutte de venin au coin des lèvres, je tente de m’incruster au milieu des échanges plus ou moins constructifs de ceux qui m’ont précédé. C’est du réchauffé, bien sûr. Et il était temps que je prenne la plume à mon tour. Dès lors, vous pardonnerez le peu de fiel contenu dans les lignes qui vont suivre.

C’est pas de l’Adobe

J’ai démarré ma vie d’actif en tant qu’infographiste, apprenant sur le tas un logiciel que peu connaissent et dont je dois ici louer la qualité : CorelDraw. D’une prise en main plutôt facile, grosse usine à gaz cependant, et pas tout à fait stable dans sa version d’alors, ce produit avait pour avantage d’être fourni avec les pilotes de la graveuse laser que nous utilisions.

Je commençais à utiliser Photoshop, mais il était évident que pour réaliser des maquettes de brochure, des cartes de visites et pour préparer la compo des tampons et autres gravures, rien ne valait un logiciel vectoriel (dont je rappelle qu’en l’occurrence il communiquait à la perfection avec la machine  qui gravait tout ça).

Plus tard, je me perfectionnais sur le best-seller (hum !) d’Adobe en réalisant des illustrations pour la sérigraphie. Équipé d’une tablette graphique, j’oubliais CorelDraw dans les arabesques pailletées que me réclamait mon patron, et les calques s’empilèrent dans une débauche de couleurs…

License IV

Quelques années plus tard, encore, je découvrais Photoshop sous un jour nouveau en débutant ma carrière de graphiste web au service d’une grosse boîte d’ecommerce. Là aussi, débauche de calques : chaque filet, chaque rectangle, chaque étiquette de prix soldé avait le sien. A chacun sa façon de travailler, et, bien que mon mentor soit un rapide et ne sache jurer que par le pixel, je m’efforçais d’avoir recours aux masques vectoriels pour simplifier la manipulation des formes, et aussi pour les partager avec mes collègues, qui pouvaient ainsi les agrandir et les déformer. CorelDraw en embuscade.

Les version de Photoshop passèrent (nous voyions aussi passer les factures de la suite Adobe, et je m’estimais heureux de ne pas devoir payer pour ma propre licence), pas forcément pour notre plus grand bonheur, car si les fonctionnalités nouvelles étaient alléchantes, les bugs n’étaient pas toujours résolus et nos processeurs commençaient à salement tirer le langue.

T'en veux, des calques ?

Les PSD prenaient du poids : nos maquettes, sans doute plus ambitieuses que par le passé, et truffées de styles de calque, accumulaient par dizaine les calques, calques de réglage, masques vectoriels et d’écrétage…  Quand @STPo, dans ses guidelines Photoshop pour le web, conseille de bien replier chaque groupe de calque et d’en nommer de façon pertinente le contenu, je ne peux que lui donner raison. A ce stade, non seulement les intégrateurs, mais aussi les collègues graphistes avec qui nous échangions nos fichiers, étaient au moins heureux d’y voir clair dans la liste de 50 calques et groupes de calques qui leur explosaient à la figure.

Ordre et progrès

Sauf qu’il y a un moment où la rigueur, la clarté des intitulé, en un mot l’organisation ne suffisent plus. Que les innombrables tracés d’une carte IGN, par exemple, avec ses routes, ses fleuves, ses noms de rue, sa légende, etc, soient soigneusement rangés dans des calques au nom judicieusement choisi d’un fichier vectoriel, je peux comprendre. L’ennui avec les PSD, c’est que même les maquettes simples nécessitent un paquet de calques. Qui doivent être manipulés en tant que calques. Avec ma carte vectorielle, mes objets sont rangés dans des calques. Dans Photoshop, tous mes objets sont des calques.

En outre, difficile de se satisfaire d’une aussi rigide « zone de travail ». Hors du format imprimable de mon image, point de place pour des éléments provisoires qu’on pousserait sur le côté en attendant de les réutiliser. Là encore, solution calque : on cache un élément, on en affiche un autre, on duplique, on cache à nouveau. Et on se retrouve avec un beau merdier. On versionne, au bout d’un moment, histoire de ne pas se retrouver avec des fichiers de 300 Mo pleins de nos propositions « visibles » et celles « insivibles ».

Lassé du lasso

Moi, webdesigner, qui conçoit des interfaces, qui dessine des blocs, des bordures, qui déroule du texte, définit un fond, positionne des boutons, manipule des motifs, bref, qui fait de la mise en page, même si ce n’est pas au kilomètre… qu’est-ce qui m’a pris de quitter le spacieux plan de travail d’un logiciel vectoriel pour cet étriqué labo photo à tiroirs ?

Car oui, ce pour quoi les logiciels de « composition » ou de mise en page avaient été conçus, à savoir la composition, la mise en page d’éléments graphiques et de texte, est ici réalisé avec un logiciel de retouche photo. Évolué, certes, mais dont la logique de manipulation par calques a atteint ses limites. C’est un peu tarte à la crème mais je vous avais prévenu : je lâche mon fiel, et quelques simplicismes ne font pas de mal.

Dans le même genre : avant, j’entendais dire que ce n’était pas très « pro » de concevoir un flyer avec Photoshop, et qu’un logiciel approprié était de mise.
Et maintenant, pépé, avec quoi tu lookes ton site web ? Approprié, non ?

Chérie, ça va trancher

Au final, mes anciens collègues intégrateurs trouvaient souvent plus simple d’aplatir le fichier après en avoir évacué le superflu, pour tranquillement en découper les tranches. Au pire, si une difficulté se présentait, il suffisait de demander directement au graphiste d’isoler l’élément concerné pour en simplifier l’exportation. Faut comprendre, hein : déjà que l’auteur du fichier lui-même avait parfois du mal à retrouver ses petits dans son mille-feuille… Et puis, il est parfaitement logique qu’un utilisateur de niveau moyen sur Photoshop ait parfois besoin d’un coup de main. Après tout, il s’agit d’un logiciel pas toujours intuitif, quoiqu’en disent les fans, qui n’ont généralement pas d’élément de comparaison, ou pas le recul nécessaire.

Voilà un argument supplémentaire pour remettre en question la position centrale qu’occupe Photoshop dans le processus du webdesign, dont les acteurs ne sont pas tous des infographistes chevronnés : la difficulté technique.

Il existe pourtant d’autres logiciels plus simple d’accès, dont à la fois graphistes et intégrateurs pourraient faire un usage partagé. Car il faut en arriver au but, là, maintenant : quelles alternatives ?

Lâché dans la zone

Je ne m’attarderai pas au sujet de Fireworks, que je ne connais pas bien. En tant qu’alternative à la réputation solide, je le recommande de toutes façons. Fireworks fait l’objet d’une formation sur le forum de @wdfriday.

Par contre, et c’est l’ancien utilisateur de CorelDraw qui s’exprime, je m’empresse de vous recommander Inkscape, qui est un logiciel de dessin vectoriel libre et gratuit dont les fonctionnalités sont tout à fait suffisantes, et même plus, pour répondre aux exigences du webdesigner. Je n’utilise que lui. Ses caractéristiques sont celles de la plupart des logiciels vectoriels, avec une prise en main plutôt facile. La zone de travail est infinie, et je me régale à faire cohabiter plusieurs version d’une même maquette dans le même fichier. Inkscape permet d’exporter n’importe quel élément au format PNG, tel quel, avec fond transparent ou pas. Croyez-le ou pas, pas besoin de découper des tranches : c’est un logiciel, pas un grille pain.

La zone de travail illimitée d'Inkscape

Évidemment, détourer des objets dans une photo ou en augmenter la densité n’ont pas de mise ici. Pour les images, vous reviendrez à votre logiciel de retouche préféré… Gimp, bien sûr .

Objets groupés, objets verrouillés, masques, etc. Il y a dans Inkscape de nombreuses façons de préparer votre fichier pour le partager avec autrui. Un détail : le format usuel d’Inskcape est le SVG, ça vous dit quelque chose ? Je suis assez peu porté sur la divination mais quelque chose me dit qu’il est raisonnable de miser sur les avancées du vectoriel sur le web. En s’efforçant de (re)considérer les options non-propriétaires.
HTML5, mon ami.

Débouchés, t’es sourd ?

Vous l’avez compris, je déplore l’évidente suprématie de Photoshop dans le petit monde du design pour le web, alors qu’il existe des solutions à la fois plus légères, plus accessibles et aussi moins chères ! Je passe rapidement sur les raisons supposées de cette suprématie : la réputation et l’ancienneté de la marque Adobe n’étant plus à démontrer, les professionnels se tournent aveuglément vers son logiciel phare (notez qu’en toute mauvaise foi je n’ai pas mentionné Illustrator, mais qu’il constitue lui aussi une alternative) ; les écoles et formations professionnelles ayant trait au webdesign forment essentiellement sur ce logiciel, justement pour offrir plus de débouchés professionnels ;  les graphistes web frémissent à l’idée de devoir changer leurs habitudes ; de nombreux intégrateurs eux-même craignent le syndrome de Stockholm, etc.

Des calques qui se perdent

Il est utile de rappeler que l’outil ne fait pas la créativité. Photoshop est un très bon logiciel, qui en vaut bien un autre quand il s’agit de matérialiser une idée brillante (inversement, c’est justement la facilité qu’offre Photoshop de redonner du fancy à un design mal inspiré qui a en partie fait le succès de ce produit). En revanche, c’est à mes yeux un outil désormais inadapté au webdesign, par opposition aux logiciels vectoriels dont la logique correspond davantage à des exigences de manipulation et de partage. Et peut-être même aux innovations du web moderne.

Alors j’en entends se pâmer devant les perspectives du design directement dans le navigateur (thème très hype s’il en est), mais ce sont quelquefois les mêmes qui ne jurent que par l’onéreux poids lourd de la retouche photo quand il s’agit de maquetter le moindre formulaire ! Avant de nous prononcer quant à l’avenir de la première méthode, acceptons de considérer la deuxième comme complètement ringarde.

Par Pascal Pernix, le 17 mai 2011  Laissez un commentaire

Les Caraïbes ont leurs avantages. L’hiver y est absent, ainsi que plus ou moins les 3 autres saisons, a vrai dire. Les repères temporels sont un peu confus, mais on s’y fait, croyez-le ou pas.

Alors, quand la saison des mangues arrive, on sait qu’on est en mai, et à quelques mois de la saison des pluies. On fait avec ce qu’on a. Les chaleurs étant accablantes, on reste a l’interieur, et on popote en couleur.

Cette semaine, tarte a la mangue au sucre roux, flambee à l’Appleton VX.

Pour 4 personnes :

1. Peler et découper en morceaux généreux 3 grosses mangues mûres, et les placer dans un saladier.
2. Verser l’Appleton VX (c’est un rhum jamaïcain, mais tout autre bon rhum ambré fera l’affaire) sur les mangues sans les noyer.
3. Ajouter une cuillère d’essence de vanille ou un bâton de vanille.
4. Faire reposer pendant une heure à température ambiante.
5. Pendant que vous attendez, vous pouvez boire un verre de vin. Je recommande un Chardonnay, mais c’est à vous de voir.
6. Choisir la pâte. Je préfère la pâte feuilletée, mais ça marche aussi avec n’importe quel genre de pâte a tarte. La placer à plat sur une plaque rectangulaire, saupoudrer de sucre roux et d’une cuillère de farine (ça évite que le jus de mangue ne s’infiltre trop vite dans la pâte).
7. Placer les mangues sur la pâte, de façon irrégulière, en couvrant toute la surface.
8. Saupoudrer de deux ou trois cuillères de sucre brun et placer au four à 210°C pendant 15 minutes pour une pâte feuilletée, en jetant un oeil de temps en temps.
9. Profitez de ces 15 minutes pour vous servir un second verre de Chardonnay.
10. À la fin de la cuisson, se munir de deux ou trois cuillères de rhum et d’un briquet. Verser le rhum sur la tarte et flamber. Attention aux sourcils !
11. Servir avec une boule de glace a la vanille ou rhum/raisin.
12. Finir le Chardonnay.

Par Pierre Pernix, le 8 mai 2011  Laissez un commentaire

Tam et Greg sont producteurs de plantes médicinales et aromatiques en bio-dynamie. Leur projet, démarré en 1997, est indissociable de leur démarche environnementale : habitat écologique auto-construit, agriculture non-extensive, solutions alternatives et transmission de savoir…

Jusqu’à présent, les débouchés de leur production étaient ceux des circuits traditionnels : magasins bio, salons bio, commerces de proximité.

Depuis, la perspective de vendre directement à leurs clients sur Internet, sans intermédiaire et au tarif du détail, a fait du chemin dans leur esprit, tandis que fleurissaient autour d’eux les boutiques en ligne. Le secteur d’activité du bio est en plein essor, et l’offre du pré Saint Jean est celle d’un commerce de niche, donc potentiellement très rentable, d’autant plus que la grande qualité des produits va de pair avec un prix de vente élevé.

Chez nous, à Transat, les débouchés de notre activité web se limitaient jusqu’à présent aux sites dits « vitrines », même si la présence systématique d’un outil de publication permettant au client d’en modifier le contenu facilement rendait ce terme un peu galvaudé.

Depuis, la perspective de rendre possible la vente en ligne de produits avec l’essor de plateformes d’e-commerce tels que Prestashop ont fait du chemin dans notre esprit. Ces plateformes avaient fait leurs preuves : à nous de nous en emparer, à défaut de devoir créer from scratch des outils dont les enjeux (paiement sécurisé, complexité de la base…) étaient coriaces.

Une e-boutique et des produits à la fois rustiques et délicats

Comme on ne choisit pas sa famille, Tam et Greg Pernix n’ont pas eu à chercher bien loin pour dégoter leur prestataire web (il faut avouer que de notre côté, nous avions déjà semé chez eux les germes d’un intérêt pour le web en tant que levier de croissance).

Nous avons donc fait ensemble ce premier pas : celui du e-commerce. Un défi technique pour nous. Et un axe de communication fort : montrer le couple de producteurs qui se cache derrière la boutique, et tenter d’insuffler la simplicité, le courage, le militantisme et l’humanité de leur démarche dans ce site. Des vrais gens, une vraie vocation : ce sont des produits authentiques.

Pour eux, un défi professionnel. Maintenant qu’ils ont ajouté cette corde à leur arc, ils va falloir mettre en pratique les conseils prodigués par Transat en matière de référencement et de marketing pour engendrer du trafic :

• Pour commencer, diffuser l’adresse de la boutique, dans les annuaires, auprès des proches et amis Facebook, ainsi qu’aux partenaires « classiques ».
• Alimenter un blog très personnel, lequel a été conçu comme un véritable lieu de rencontre des clients, patients, passionnés, etc, avec Tam et Greg, producteurs et cultivateurs pour de vrai, et tenter de fidéliser ces visiteurs pour les amener à fréquenter la boutique.
• Profiter de l’opt in pour animer par email la base de clients et de visiteurs et les fidéliser davantage.
• Enfin, surveiller de près le comportement des clients grâce aux outils disponibles dans la boutique afin d’être réactif à la demande.

Aujourd’hui, nous sommes ensemble fiers de ce beau bébé élevé au bio véritable, et respectueux, autant qu’il est possible, à la fois de la Terre et des bonne pratiques du web

Visitez la boutique du pré Saint Jean à cette adresse :
http://le-pre-saint-jean.fr

Par Pascal Pernix, le 10 mars 2011  Laissez un commentaire

L’association des parents d’élèves de la Cayman International School organise un gala annuel pour récolter quelques billets de cent et offrir de nouveaux gadgets à but pédagogique aux chanceux écoliers.

A Transat, nous ne sommes plus des enfants, mais nous n’en sommes pas moins veinards, après avoir reçu le feu vert pour réaliser les poster, invitations, tickets et programme du dit gala.

Le theme est simple : « South Beach (Miami, FL) meets Seven Mile Beach (Grand Cayman, BWI) » avec un goût de cocktail s’il vous plaît. A grand coups de dégrades fruités, une goutte de rhum et un splash d’exotisme, Transat, a sa manière, epice le bulletin scolaire.

Vivement les vacances.

Par Pascal Pernix, le 28 février 2011  Laissez un commentaire

À Transat, on fait dans le solide. Dans la construction. Dans le meuble. Pas dans le design de meubles, mais presque. Disons qu’on garde nos clients, aussi.

Brad, notre confrère Canado-Caribéen qui fait de belles boiseries, dont nous avons mis en ligne le très boisé site web rosin.ky il y a quelques mois, a apparemment du pain sur la planche (en teck ou chêne, au choix), et nous avons passé une bonne partie du week-end à collecter de nouvelles images de ses dernières créations. En espérant que notre collaboration continue, pour lui et pour nous. On touche du bois.

Par Pierre Pernix, le 27 février 2011  Laissez un commentaire

Quand le hobby devient un challenge : à défaut de se payer des 4×3 dans le métro, ou de s’afficher dans des stades, notre agence devient sponsor d’une écurie automobile… dans un jeu vidéo.

Autant prévenir tout de suite, le jeu en question n’a pas de mode online, ni même de mode multijoueur. Pire, il se pourrait bien que ce soit une vieillerie. En revanche, il a le bon goût de figurer dans la logithèque Ubuntu, de manière libre et gratuite, et d’autoriser la création de circuits, de concurrents et de voitures.

Vroum, la n°56 sponsorisée par Transat devance la n°15 décorée Carlsberg

Un double exercice : s’essayer au packaging de bolides et améliorer ses compétences sur Gimp, puisque les fichiers qui contiennent les livrées d’origines des bagnoles du jeu sont au format .xcf, l’équivalent du .psd de Photoshop.

D’abord, on ne sait jamais de quoi seront fait nos prochaines commandes, et la possibilité de devoir un jour résoudre la cohabitation casse-tête d’une vingtaines de logos virils (marques de bière, rasoirs, boissons énergisantes…) sur une carrosserie n’est pas à exclure.

Ensuite, la notoriété future de Transat étant inévitable (^^), il faut s’attendre à décliner notre charte sur des supports innattendus.

Et puis enfin, on n’en sait jamais assez en matière de logiciels, et gérer une tonne de calques en tentant de respecter les cotes d’un mapping à appliquer sur l’objet 3D du véhicule est un exercice que je recommanderai à tout apprenti de Gimp qui cherche à oublier ses réflexes Adobiens !

Gagné. En faisant sa pub dans le jeu, Transat la fait dans ce blog.

Quant au projet TORCS, du nom de cette simulation disponible pour Linux et pour Windows, il a fait long feu. Ses concepteurs sont passés à autre chose. Mais la course continue grâce à un fork appelé Speed Dreams, que je n’ai pas testé. Merci à eux pour leur boulot, dont je rappelle qu’il est sous licence GPL en open source.

Par Pascal Pernix, le 25 février 2011  Laissez un commentaire

Parce que c’est toujours le Printemps quelque part.

Parce qu’il y’a toujours quelque coin reculé sur Terre ou il est 5h de l’apres-midi et oui, on peut quitter le bureau, et parce que réchauffer le coeur d’européens frileux est probablement bon pour le karma, une image des premiers bourgeonnements de Lillies, fleurs tropicales aux pétales aquarelles.

C’est la beaute dé Transat, on voyage gratis, avec de belles images léchées et des couleurs d’hiver absent. Courage, peuple de l’Est Atlantique, bientôt le soleil montrera son sourire, et inspirera quelques créations chaleureuses. Remember: Light is everything.

Par Pierre Pernix, le 21 février 2011  Laissez un commentaire

Comme c’est fête et que nous avons la visite d’un ami écossais, quoi de plus approprié que d’ajouter au buffet un de ces chapeaux calédoniens ? Le scotch bonnet est un piment de la famille des habaneros. Il est l’un des plus forts du monde. Sa forme particulière et sa petite queue, semblables à ceux du galuron traditionnel écossais, ont inspiré son nom.

Un seul arrache-bouche dans l’eau de gonflage des haricots noirs suffit à donner de la force au plat. Les haricots, mixés avec du fromage frais, donneront une sauce où tremper du pain où des chips. Cuban taste. Scottish way.