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:
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:
- Opter pour un outil capable de faire des captures
d'écran
facilement et qui soit gratuit. La capture ne doit concerner que la
fenêtre de l'émulateur Apple II et pas le reste de
l'écran.
- Quand on fait un snapshot d'un soft tournant sous
émulateur,
on capture aussi le cadre dudit émulateur. J'utilise
indifféremment
Apple Oasis et Applewin (sous Linux ou Windows 98SE). Personnellement,
je ne veux pas
le garder. Je préfère n'avoir que
l'écran
réel. Il faut donc que l'écran total
récupéré soit
découpé
pour n'extraire que l'écran Apple II. La
subtilité supplémentaire, c'est qu'en fonction
non
seulement de l'émulateur mais aussi de
l'OS (voire du style), les cadres ne sont pas de la même
taille.
- Sur certaines pages web, je mets beaucoup de
clichés car
c'est
l'article qui veut cela. Aussi il me faut des vignettes
(thumbnail) de
quelques kilo-octets pour ne pas trop alourdir la page. Chaque vignette
doit commencer par le préfixe "VIG_".
Si le lecteur
veut avoir plus
de détail, il n'aura qu'à cliquer dessus et elle
s'affichera dans sa taille
réelle sur une autre page. (La vignette sera
entourée par
un cadre minimaliste
défini dans le style css).
- Je dois aussi réduire les photos prises avec mon
numérique ainsi que les scans (de magazines principalement).
J'aime bien que toutes ces
réductions soient de la
même taille sur une page web réalisée.
En fonction
du sens de la prise
d'une photo (horizontal ou vertical) et de la taille de la photo/scan
(je n'utilise pas toujours la même résolution),
les
paramètres
des commandes changent.
Il faut donc que le traitement sache s'adapter en fonction du format.
- Je ne veux pas générer les vignettes
une par une.
Il me
faut un script bash (ou un .bat windows) pour prendre en compte tous
mes
clichés présents dans un répertoire.
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:
Résultat de la capture:
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):
Résultat de la capture:
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://underground2e.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):
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.
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):
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.
Avec -sample la taille est de 4,7 ko, avec -thumbnail de 24,3 ko (!):
Avec The Gimp en
opération manuelle de
changement de
l'échelle de l'image (7,3 ko):
Exemples de la qualité des vignettes en mode loupe.
Avec -sample:
convert Zephyr_p1.png -sample 280x192
VIG_Zephyr_p1.png
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
Avec The Gimp (qui ne
créé
qu'une seule
nuance supplémentaire dans ce cas de figure):
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):
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.
Si je veux un cadre simple en blanc par exemple:
convert nom1.png -bordercolor white -border 5x5 nom2.png
Ou alors mieux un cadre avec un effet 3D (qui fait plus classe):
convert nom1.png -frame 10x10+0+6 nom2.png
Pour la couleur, aucun soucis pour les vignettes avec -sample.
L'image en taille normale fait 5,6 ko et la vignette 3 ko:
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;
|