ImagemagickLogo Imagemagick

Concevoir des pages web sur l'Apple II est une tâche longue et fastidueuse.
Il y a une importante recherche documentaire (magazines, disquettes, courriers, internet, mails, ...) et rédactionnelle pour donner une vie et un sens aux différents éléments glanés.

Aussi quand j'ai achevé cette phase là (scans, photos, capture d'écrans, test de disks images, extraction de fichiers, ...) j'ai envie que la fin s'enchaîne rapidement. Pourtant, ce n'est pas aussi simple que cela quand on n'a pas les bons outils sous la main.

Dans cet article, je vais me pencher sur la mise en forme des captures d'écrans et des scans réalisés. C'est du minimaliste puisqu'il y a des sites documentaires très complets sur le sujet (avec pleins d'options que je n'aborderai pas ici).

Comment font les autres?

J'ai bien l'impression que chacun bidouille ses écrans dans son coin!
J'ai regardé 2 cas concrets avec du clean et du copier/coller cradingue.

Une illustration de ce dernier sur le site suivant: http://www.nibblemagazine.net/nibble_disks.htm

Il s'agit d'une page du site de Mike Harvey, l'ancien éditeur de la revue Nibble qui eu une longévité exceptionnelle. Mike revient sur le devant de la scène en proposant ses anciens produits.

Je vous invite à aller en bas de cette page et de cliquer sur les snapshots (jpeg) de l'émulateur Applewin pour les voir en taille réelle. De tout évidence, il s'agit de hardcopies bestiales découpées ensuite à la serpe: il reste autour du cadre de l'émulateur des morceaux du fond de son écran.

Certains diront que je chipote mais je trouve que ce n'est pas beau.
D'autres me diront -ou me l'ont déjà dit!- que mon site n'est pas un exemple non plus d'ergonomie, mais c'est une autre histoire et l'idée de cet article est de discuter de quelque chose dont j'ai déjà fait l'expérience, alors...

Compte tenu de l'intérêt (contenu et historique) de ces productions Nibble, ce détail est insignifiant. Mais une illustration propre aurait quand même été préférable.

Exemple avec des reliquats de background et les angles coupés en arrondis:

Nibble23

Apparemment, il a du prendre des copies d'écran de PC en entier et découper ensuite grosso modo chacun des écrans Apple II. Cette méthode est longue et le résultat est approximatif. En tout état de cause, pour un tel résultat, ça ne peut qu'être une opération manuelle.


Un autre cas, bien plus propre celui-ci: celui de mon ami Thry2 qui a mis pas mal d'écrans d'apple II d'illustration sur son site.
Les siens sont impeccables. Je l'ai interrogé sur la méthode employée: il travaille aussi en manuel de A à Z.

Extrait de notre échange de mails:

> Comment de ton côté fais-tu pour préparer les copies d'écran que tu mets,
> enfin mettais ;-))), sur ton site? Avec quels outils? (Note: Il est sous WinXP).

Je prends les screenshots (SS) avec HardCopy Pro.
Pour les images + petites, je visualise avec ACDSee, je reduis l'image, je
re-SS et je coupe avec PaintShopPro.
Et compresse tout ça avec Image Optimizer...
Pour les gifs animés, j'utilise Ulead Gif Animator que j'optimise en
principe avec un programme pour ça mais me souviens plus du nom là.

Tous mes SS sont avec les bordures de l'émulateur en l'occurrence Applewin...
Et encore, en fonction de la version d'Applewin, les couleurs ne sont pas
les mêmes.
Et pour les SS monochromes, je fais un trait sur 2 (plus proche de la
réalité).

> Tu veux dire que tu traites manuellement SS par SS quand tu prépares une
> page web?? Découpage à chaque fois avec PaintShopPro à la main les 1 après les
> autres??

Ben wé !

> Actuellement, tu mets combien de temps pour traiter une dizaine de SS?

6 mois à un an.
Pour ça que c long :)
Plus sérieusement, j'ai jamais compté.
Mais ça doit avoisiner la demi-heure.


Le résultat est joli mais il faut avoir le temps. Et ça, en ce qui me concerne, ce n'est pas monnaie courante. D'ailleurs pour lui non plus (Xbox oblige ;-))) et c'est pour cela qu'il faut attendre autant pour que la moindre page apparaisse (quand ce n'est pas tout le site qui disparaît d'ailleurs au profit de la Marseillaise! Ha ha ha!!!)


Vous utilisez une méthode rapide automatisée? Contactez-moi!

Définition du cahier des charges

Voici résumés mes besoins pour les illustrations de mon site:

Mes choix

Voici bien longtemps que je ne suis plus les dernières évolutions techniques.
Aussi mon matériel est vieillissant mais il remplit parfaitement son office (et je ne lui en demande pas plus!)
Cette précision est faite car il ne s'agit bien sur pas des dernières versions logicielles dont je parlerai ici.

Pour faire des captures d'écran sous Linux, j'utilise le logiciel KSnapShot (package de l'environnement graphique Kde).

Ici la capture d'un écran du jeu Séduction 1 par la société Froggy Software:

Applewin Linux
Capture Applewin Linux

Résultat de la capture:

Séduction 1

Si j'ai besoin de booter Windows 98SE pour une raison quelconque (c'est rarement le cas!), je peux faire des snapshots en employant le logiciel de dessin The Gimp. Il a une option prévue à cet effet.
J'utilise aussi ce logiciel sous Linux pour d'autres types de traitements graphiques car il offre un panel impressionnant de possibilités.
Ce soft gratuit peut être téléchargé sur le site: http://www.gimp.org/
Pour Windows: http://www.gimp.org/windows/

Ici la capture de l'écran d'une démo de soft copyrighté Froggy Software. (Cette démo rare fut trouvée dans un paquet de diskettes donné par le pirate Copperfield en 90/91 et n'a jamais été diffusée à ma connaissance):

Zephyr
Zephyr

Résultat de la capture:

Zephyr avec cadre


Afin d'automatiser les traitements appliqués à ces captures, j'avais écrit des petits programmes en C qui utilisaient des fonctionnalités de SDL - Simple Directmedia Layer (http://www.libsdl.org/index.php). Mais ensuite ayant découvert un outil sensas' beaucoup plus simple, j'ai zappé.

Aujourd'hui, tout le reste du travail est réalisé par la boite à outils nommée ImageMagick.

Cette toolbox est multi-plateformes (Linux, Mac OS X, Windows) et chacun doit pouvoir s'en servir sur sa machine. Elle peut être téléchargée à l'url suivante: http://www.imagemagick.org/

Les possibilités sont nombreuses: affichages, modifications, corrections, effets, ... sans le moindre soft de dessins nécessaire. Je l'utilise en ligne de commande mais il existe des frontaux pour des usages plus complexes.

Pour des exemples concrets des possibilités de la toolbox, vous pouvez lire les pages du site: http://www.cit.gu.edu.au/~anthony/graphics/imagick6/


Je lui délègue le travail sur mon PC (Linux Mandrake 9.2).
J'ai en standard Imagemagick 5.5.7 du 28/08/2003! Ce n'est pas une version récente mais elle répond à tous mes besoins.

Voici le petit script bash que je lance pour traiter mes captures d'écran au format .png (8 bits, 256 couleurs).

#!/bin/bash

#=========================================================================
# Script de mise en forme de clichés pour le site http://boutillon.free.fr
#=========================================================================

# Supprime le cadre d'un snapshot de l'émulateur Applewin version Windows 98

# Ma version d'Imagemagick ne supporte pas l'option +repage aussi
# pour que l'offset png ne pourrisse pas le résultat en le tronquant,
# il faut l'option -page +0+0

# Cette commande traite TOUTES les captures d'écran du répertoire courant et
# découpe la partie de l'écran Apple II en dégageant le cadre.
# Ici la bordure gauche de l'émulateur fait 8 pixels et la bordure haute 27 pixels.
# Un écran Apple II en window fait toujours 560x384 (largeur x hauteur).
# Chaque capture d'origine est remplacée par la version découpée.

mogrify -crop 560x384+8+27 -page +0+0 *.png

# Traite tous les objets du répertoire courant pour faire les vignettes.
# 2 possitiblités:
# 1) On copie sous le nom préfixé par VIG_ chacun des écrans pour préparer
#    les vignettes et on lance un mogrify global après sur tous les VIG_*.png)
# ou
# 2) On créé les vignettes à fur et à mesure. (J'ai choisi cette option, l'autre
#    est mise en commentaire)

for file in *;
do

# Ne prend en compte que les png (s'il y a d'autres fichiers qui trainent)

extension=${file##*.};
if [ $extension = png ]; then

# Copie de l'image actuelle sous son nom de vignette (faire un mogrify après)
#cp $file VIG_$file;

# ou création de la vignette à la volée.
# 2 possibilités:
# a) Qualité ok mais taille importante voire supérieure à image d'origine!
#    Nbr de couleurs dans la palette de la vignette > nbr de couleurs de l'original.
#    En effet il y a un filtrage qui lisse le résultat et introduit de ce fait des
#    couleurs supplémentaires gonflant ainsi la taille.
#convert $file -thumbnail 280x192 VIG_$file
# b) Taille ok. Qualité couleur ok. Mais qualité pas terrible pour le N&B.
#    Nbr de couleurs dans la palette de la vignette = nbr de couleurs de l'original.
#    En fait, GIMP est plus malin quand on fait une réduction de taille. Il introduit
#    peu de nouvelles couleurs pour un résultat + propre avec une taille réduite.
#    Pour certains snapshots N&B, reprendre manuellement avec The Gimp. Par exemple
#    les damiers en caractères souris 80 colonnes (V et W) ou certains graphs monochromes
#    en DHGR.
convert $file -sample 50% VIG_$file

fi;
done;
#mogrify -sample 50% VIG_*.png


A noter que vous pouvez facilement convertir au préalable le format de vos captures d'écran grâce à la commande:

mogrify -format <type désiré> *.<type actuel>
ou
convert -format <type désiré>  old.<type actuel>  new.<type désiré>
(mogrify fait toutes les images du répertoire courant alors que convert ne traite que l'image mentionnée).



Exemples pas à pas:

Capture d'écran brut avec le cadre Applewin (Windows 98SE):

Zephyr

Après l'instruction convert -crop (ou mogrify si plusieurs captures).
Il n'y a pas de bordure du tout. C'est l'écran Apple II brut de fonderie.

Zephyr

La vignette créée a la tête suivante (ici affichage brute puis avec un cadre minimaliste généré à la volée par le html):

Zephyr
Zephyr

Exemple de qualités différentes des vignettes en fonction de l'option -sample ou -thumbnail.

L'image en taille normale fait 8,8 ko.

Zephyr

Avec -sample la taille est de 4,7 ko, avec -thumbnail de 24,3 ko (!):

Zephyr
Zephyr

Avec The Gimp en opération manuelle de changement de l'échelle de l'image (7,3 ko):

Zephyr


Exemples de la qualité des vignettes en mode loupe.

Avec -sample:
convert Zephyr_p1.png -sample 280x192 VIG_Zephyr_p1.png

Sample

Avec -thumbnail  (création par ImageMagick de nuances supplémentaires qui prennent de la place):
convert Zephyr_p1.png -thumbnail 280x192 VIG_Zephyr_p1_IM_convert_thumbnail.png

Thumbnail

Avec The Gimp (qui ne créé qu'une seule nuance supplémentaire dans ce cas de figure):

Gimp



Si vous voulez rajouter autour de votre image un cadre ou une bordure fantaisie automatiquement, ImageMagick propose des options pour le faire facilement.

Voici un exemple de screenshot 16 couleurs (DHGR):

IM II

On vire le cadre avec convert -crop (ici cadre Applewin sous linux).
Note: A chaque fois pour connaitre la hauteur et le bord gauche à virer pour l'option -crop, remplissez votre écran en blanc en étant sous émulateur avec un logiciel de dessins ou directement sous moniteur en passant en mode HGR2 et en collant des $FF de $4000 à $5FFF (*4000:FF et *4001<4000.5FFFM), faites une capture et comptez ensuite en mode loupe les pixels entre les bordures et le début de l'écran blanc.

IM II

Si je veux un cadre simple en blanc par exemple:
convert nom1.png -bordercolor white -border 5x5 nom2.png

IM II

Ou alors mieux un cadre avec un effet 3D (qui fait plus classe):
convert nom1.png -frame 10x10+0+6  nom2.png

IM II

Pour la couleur, aucun soucis pour les vignettes avec -sample.
L'image en taille normale fait 5,6 ko et la vignette 3 ko:

IM II



Passons à présent aux photos numériques et aux documents scannés.
J'utilise un autre script bash qui détermine pour chaque image quel est le côté le plus grand (de la largeur ou de la hauteur) et effectue un appel à la commande Imagemagick: convert -geometry pour donner une taille fixe au document traité.
Dans cet exemple, je ne traite que les documents de type jpeg.

#!/bin/bash

#==========================
# Fabrication des vignettes
# Deckard Juin 2004
#==========================

# Les commandes utilisées nécessitent la présence du package ImageMagick

# Taille vignette désirée (à changer si besoin)
largeur_vignette=128;
hauteur_vignette=96;

# Indice nom de fichier en cours
id_pic=0;

# Définition d'un tableau de noms
declare -a picture;
# Définitions numériques
declare -i largeur_photo;
declare -i longueur_photo;

for file in *;
do
# Récupère le nom suivant du catalog
picture[$id_pic]=$file;

# Ne traite que les jpg
extension=${file##*.};
if [ $extension = jpg ]; then

# Récupère taille de l'image
largeur_photo=($(identify -format "%w" "${picture[$id_pic]}"));
hauteur_photo=($(identify -format "%h" "${picture[$id_pic]}"));

# Largeur et hauteur vignette en fonction du format actuel
if [ $largeur_photo -gt $hauteur_photo ]; then
convert -verbose -geometry ${largeur_vignette}x${hauteur_vignette} ${picture[$id_pic]} VIG_${picture[$id_pic]};
else
convert -verbose -geometry ${hauteur_vignette}x${largeur_vignette} ${picture[$id_pic]} VIG_${picture[$id_pic]}
fi

fi

id_pic=$((id_pic+1));
done;



Imagemagick