| Les tutoriels de Jardinamel |
Pour imprimer cliquez ci-contre
Les filtres pour images peuvent être lancés pour améliorer la qualité ou modifier des images pendant la génération de l'album.
On peut ajouter sur l'image des textes transparents (watermark) ou des logos..etc..
Les filtres pour les images peuvent être appliqués aux images, aux vignettes ou aux deux.
Plusieurs filtres peuvent être enchaînés pour produire l'effet désiré.
Imaginons que vous appliquiez d'abord un filtre anti yeux rouges, puis un filtre netteté et enfin que vous ajoutiez votre logo.
De nombeux filtres sont incorporés dans les skins, mais ceux qui vous manquent peuvent être contrôlés
avec quelques simples réglages dans les "variables définies par l'utilisateur" de l'onglet "Avancées".
REMARQUE IMPORTANTE
En passant par l'onglet "Editer" vous trouvez les filtres suivants :
| Noms anglais | Equivalent français | Commentaire |
|---|---|---|
| crop | Recadrer | Permet de recadrer les images |
| Levels | Niveaux | Permet de modifier la liminosité, le contraste et la saturation |
| Rotate | Rotation | Rotation suivant un angle à définir |
| Sepia | Sepia | Convertit les images en couleur sépia |
| Blur | Flou | Donne du flou aux images |
| Invert | Inversion | Permet d'inverser les couleurs |
| Red Eye | Yeux Rouges | Supprime l'effet yeux rouges |
| Gamma | Gamma | Modifie le gamma total ou par couleur |
| Gray | Gris | Donne une teinte grise aux images |
| Sharpen | Accentuation | Accentue les images |
| Flip | Miroir | Retourne les images verticalement ou horizontalement |
| Pixelate | Pixelisation | Pixelise les images |
Ces filtres agissent individuellement sur chaque photo.
Ils ne remplacent donc pas les filtres réglables par les "Variables d'utilisateur"
qui eux permettent d'agir sur la totalité du projet.
Comme apprendre par "l'exemple" est le meilleur moyen,
on va débuter en appliquant un filtre gris à toutes les vignettes et ajouter un logo dans chaque image.
(Pour une description sommaire des filtres disponibles, voir plus bas.)
Démarrez JAlbum et préparez un projet pour la création d'un album.
Puis allez dans l'onglet "Avancées" de JAlbum.
Vous y trouverez une section appelée "Variables de l'utilisateur".
Nous allons utiliser cette section pour paraméter les réglages de nos filtres.
Tapez exactement comme dans l'exemple.
Faites attention aux "Majuscules", ("GrayscaleFilter" est différent de Grayscalefilter).
Lorsque vous avez terminé, cliquez sur "Entrée" au clavier pour sauver vos nouveaux réglages.
Réglages des paramètres dans l'onglet "Avancées"
Retournez maintenant dans l'onglet "Principal"
et cliquez sur "Créer tout" afin que les filtres soient appliqués.
(Il est nécessaire d'utiliser "Créer tout" car utiliser "Modifications" ne met pas à jour les images existantes.)
Le résultat devrait ressembler à ceci :
La vignette et l'image après application des filtres
Les filtres sont appliqués dans l'ordre de leur numéro (filter1, filter2, etc)
Les réglages des filtres sont sauvés avec le fichier "projet" de l'album,
n'oubliez donc pas de sauver votre projet lorsque vous êtes satisfait du résultat.
Vous trouverez ci-dessous la liste des filtres inclus avec JAlbum
ainsi que leurs caractéristiques (propriétés).
Tous les filtres acceptent les paramètres qui contrôlent si le filtre
est appliqué aux vignettes, aux images ou aux deux à la fois.
Par défaut, les filtres s'appliquent aux deux à la fois.
Certains skins tels Chameleon ou FotoPlayer permettent d'ajouter directement un logo ou un filigrane
sur les photos pour empêcher leur exploitation par des internautes mal intentionnés.
Malheureusement, de nombreux skins n'offrent pas cette possibilité.
Pour ceux qui désirent protéger leurs réalisations, il existe une solution.
C'est l'utilisation des filtres !
Ce tutoriel va vous montrer comment procéder.
Nous commençons par les trois filtres nécessaires
pour obtenir ce que nous recherchons.
Ajoute un logo en bas à gauche des images.
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | LogoFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant redimensionnement |
| src | URL to jpeg or gif image | N'importe quelle URL valide (http:// file:/// etc) |
| align | left|center|right | Alignement horizontal du logo. (left) |
| valign | top|center|bottom | Alignement vertical du logo. (top) |
| margin | Margin in pixels | Distance du logo à partir du bord de l'image. (0) |
| offset | Horizontal offset in pixels | Réglage fin horizontal en pixels. (0) |
| voffset | Vertical offset in pixels | Réglage fin vertical en pixels. (0) |
Exemple: class=LogoFilter src="http://jalbum.net/images/cup.png" align=left valign="bottom" closeups
Ajoute le logo de JAlbum à partir de l'URL (adresse web) du site web de JAlbum, dans le coin bas à gauche de l'image.
Autre exemple: class=LogoFilter src="file:///C:/adir/anotherdir/animage.jpg" closeups
Ajoute une image depuis le disque dur local au lieu d'un emplacement distant.
Pour les images de logos, privilégiez le type PNG qui soutient la transparence.
Les images en PNG sont parfaites pour superposer un logo sans bords crénelés.
Ajoute des textes aux images de l'album.
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | TextFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant redimensionnement |
| text | Text to display | Permet d'utiliser des $variables JAlbum comme $originalDate et $comment pour insérer des commentaires variables en fonction des images |
| color | HTML color definition | Comprend les noms de couleurs standards comme "pink", "red"..et les formats #rrggbb et r,g,b |
| face | Name of font | Nom valide de police comme "Helvetica", "Verdana", "Courier New" etc |
| style | plain|bold|italic|bolditalic | Style de la police (bold) |
| size | Font size in pixels | Taille de la police en pixels (16) |
| antialias | true|false | Antialiasing permet des bords doux. (true) |
| align | left|center|right | Alignement horizontal du texte (left) |
| valign | top|center|bottom | Alignement vertical du texte. (top) |
| margin | Margin in pixels | Distance du texte par rapport au bord de l'image. (5) |
| offset | Horizontal offset in pixels | Réglage fin horizontal en pixels. (0) |
| voffset | Vertical offset in pixels | Réglage fin horizontal en pixels. (0) |
Exemple: class=TextFilter text="Date: $fileDate" size=20 color=#99ff99 closeups
Ajoute la date d'un fichier image en haut en couleur vert clair
Comme le filtre texte mais avec un effet de transparence.
Propriétés étendues (voir filtre texte pour les autres)
Nota : La couleur n'est pas prise en compte.
| Noms | Valeurs | Commentaires |
|---|---|---|
| class | WatermarkFilter | Identifiant du filtre (nécessaire) |
| strengthPercent | Intensité en % | Controle la visibilité du watermark. (20) |
Exemple: class=WatermarkFilter text="Jalbum" size=30 closeups align=left valign=bottom margin=0
Ajoute le texte "JAlbum" transparent près du bord gauche inférieur
Tous les filtres suivants offrent plus ou moins d'intérêt
Les opérations qu'ils permettent de réaliser
n'étant pas toujours judicieuses appliquées à l'ensemble d'un album.
Mais il peut être utile de savoir qu'ils existent.
Le principe étant toujours identique, je ne rentrerai pas dans le détail,
mais donnerai juste une description de l'action du filtre et des valeurs à indiquer.
Convertit les images en niveau de gris.
| Noms | Valeurs | Commentaires |
|---|---|---|
| class | GrayscaleFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant le redimensionnement? |
Exemple: class = GrayscaleFilter
Applique le filtre en niveaux de gris aux vignettes et images.
Permet de régler la couleur des images.
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | TintFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant redimensionnement |
| redPercent | Intensité en % | Couleur Rouge (100 par defaut) |
| greenPercent | Intensité en % | Couleur Vert (100 par defaut) |
| bluePercent | Intensité en % | Couleur Bleue (100 par defaut) |
Exemple: class=TintFilter redPercent=100 greenPercent=60 bluePercent=60
Applique une coloration rouge sur les images.
Vous pouvez obtenir des effets interssants en combinant le filtre Gris avec le filtre Teinte.
Comme le filtre texte mais avec les ombres en plus.
Propriétés étendues (voir filtre texte pour les autres)
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | ShadowTextFilter | Identifiant du filtre (nécessaire) |
| shadowColor | HTML color definition | Couleur de l'ombre. Comprend les noms de couleurs standards comme "pink", "red"...et les formats #rrggbb et r,g,b |
| shadowDistance | Distance en pixels | (2) |
Exemple: class=ShadowTextFilter text="Date: $fileDate" size=20 color=#99ff99 closeups
Ajoute la date d'un fichier image en haut en couleur vert clair avec ombre noire
Zoom sur les images. Utile pour rendre les vignettes plus lisibles
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | ZoomFilter | Identifiant du filtre (nécessaire) |
| zoomPercent | Facteur du zoom sur le centre de l'image | (30) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant redimensionner? Vivement recommandé |
Exemple: class=ZoomFilter prescale thumbnails zoomPercent=30
Applique le filtre zoom aux vignettes. Notez l'attibut "prescale" (important pour les vignettes)
Coupe les images de façon à correspondre exactement aux valeurs fixées dans l'interface
pour "Taille des vignettes" ou "Taille des images".
Il en résulte que toutes les vignettes/ou images ont la même taille. (portrait, paysage, etc).
| Noms | Valeurs | Commentaires |
|---|---|---|
| class | FixedShapeFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant le redimensionnement? Vivement recommandé |
Exemple: class=FixedShapeFilter prescale thumbnails
Applique le filtre fixed shape filter aux vignettes. Notez l'attribut "prescale" (important pour les vignettes)
Accentuer les images
| Property | Values | Comment |
|---|---|---|
| class | SharpenFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant le redimensionnement |
Exemple: class=SharpenFilter closeups
Applique une accentuation de la netteté aux images.
Donne du flou aux images
| Noms | Valeurs | Commentaires |
|---|---|---|
| class | BlurFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant redimensionnement |
Exemple: class=BlurFilter closeups
Applique un flou aux images.
Rotation des images suivant la valeur indiquée en degré ou de façon aléatoire (par image)
Nota: La taile des images ayant subies une rotation n'est pas la même que celle de l'image originale,
ne spécifiez donc pas de taille fixe basée sur image widths heights,
par exemple $imageWidth dans une balise <img> dans une page Modèle (htt).
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | RotationFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant de redimentionner? Recommendé pour des bords plus doux |
| angle | Angle en degrés | Angle de rotation des images (ou limite pour la rotation aléatoire, si celle-ci est sélectionnée) (15 par défaut) |
| random | true|false | Pour appliquer une rotation aléatoire à chaque image (maximum est défini par la valeur de l'angle ci-dessus) |
Exemple: class=RotationFilter angle=10 random thumbnails prescale
Rotation aléatoire des vignettes de -10 à 10 degrés.
Ajoute des bordures cadres et ombres de votre choix aux images de vos albums.
| Noms | Valeurs | Commentaire |
|---|---|---|
| class | XBorderFilter | Identifiant du filtre (nécessaire) |
| thumbnails | true|false | Appliquer aux vignettes? |
| closeups | true|false | Appliquer aux images? |
| prescale | true|false | Appliquer le filtre avant le redimensionnement |
| bgCol | HTML color definition | Couleur du fond pour les parties transparentes des ombres et cadres |
| bgFile | URL vers image jpeg, png ou gif | Emplacement du fichier graphique à utiliser pour les fonds des parties transparentes des ombres et cadres |
| bgOffX | x offset en pixels | x Offset pour le bgFile (nouveauté de la version V0.95 β) |
| bgOffY | y offset en pixels | y Offset pour le bgFile (nouveauté de la version V0.95 β) |
| boBlend | true|false | Fondu des bandes de couleur on "on" ou "off" ? |
| boClip | border clip rayon en pixels | Angle arrondi pour les bordures |
| boCol | (list of) HTML color definition(s) | Accepte les noms de couleurs standards de Nescape et Explorer comme "pink", #rrggbb |
| boMargin | marge des bordures en pixels | marge entre les bordures et le bord de l'image |
| boTrans | (liste des) transparences des cadres | 0 = opaque, 100 = complétement transparent (invisible) |
| boWidth | largeur des bordures en pixels | Les 4 cotés ont la même valeur |
| boWidthE | bordure "Est" en pixels | seulement E |
| boWidthN | bordure "Nord" en pixels | seulement N |
| boWidthS | bordure "Sud" en pixels | seulement S |
| boWidthW | bordure "Ouest" (Western border) en pixels | seulement W |
| brCol | couleur des crochets (parenthèses) | (nouveauté de la version V0.96) |
| brStyle | style des crochets | (nouveauté de la version V0.96) |
| brThick | épaisseur des traits des crochets | (nouveauté de la version V0.96) |
| brX | longueur des branches horizontales des crochets |
(nouveauté de la version V0.96) |
| brY | longueur des branches verticales des crochets |
(nouveauté de la version V0.96) |
| clip | rayon de l'arrondi en pixels | rayon de l'angle arrondi |
| debug | enables debug output | seulement pour les développeurs |
| frBlend | true|false | fondu des bandes de couleur "on" or "off" ? |
| frCol | (list des) HTML color definition(s) | Accepte les noms de couleurs standards de Nescape et Explorer comme "pink", #rrggbb |
| frTrans | (liste des) transparences des cadres | 0 = opaque, 100 complétement transparent (invisible) |
| frWidth | largeur du cadre en pixels | les 4 cotés ont la même valeur |
| frWidthE | cadre "Est" en pixels | seulement E |
| frWidthN | cadre "Nord" en pixels | seulement N |
| frWidthS | cadre "Sud" en pixels | seulement S |
| frWidthW | cadre "Ouest" (Western border) en pixels | seulement W |
| shCol | definition des couleurs HTML | Accepte les noms de couleurs standards de Nescape et Explorer comme "pink", #rrggbb |
| shDir | NE|SE|NW|SW | direction de l'ombre |
| shDrop | hard|norm|soft | dégradé de l'ombre |
| shTrans | minimum shadow transparency | transparence minimum de l'ombre près du bord de l'image |
| shWidth | largeur de l'ombre en pixels | les 2 directions ont la même valeur |
| shWidthX | largeur de l'ombre suivant x en pixels | seulement x |
| shWidthY | largeur de l'ombre suivant y en pixels | seulement y |
| shExX | excédent d'ombre suivant x en pixels | largeur de l'excédent d'ombre du coté opposé |
| shExY | excédent d'ombre suivant y en pixels | largeur de l'excédent d'ombre du coté opposé |
Exemple: class=XBorderFilter frWidth=20 frCol=ivory shWidth=15 closeups
Ajoute un cadre et une ombre sur les images.
Autre exemple: class=XBorderFilter boWidth=20 boCol=ivory closeups
Ajoute une bordure sur les images.
=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=o=
Nous voici au terme de ce petit tutoriel.
J'espère qu'il pourra être utile à certains.
Exeptionnellement il n'y a pas d'album exemple,
les images du tuto étant, je pense, assez explicitent.
