Purity2.fr

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase Font Size
  • Default Font Size
  • Decrease Font Size
French (Fr)English (United Kingdom)
btn_25
afuj
joomla_1_5_25
telecharger_joomla_17

Les positions (à venir ....)

Les notions de Wrap et de Main | Les styles de modules Jaxhtml et Jarounded | définition des blocks | variations de positions

HEADER (à finir) | MAINNAV | TOPSL | BOTSL | FOOTER | LEFT | RIGHT | MAIN

Créer une image header-mask personnalisée

User Rating: / 3
PoorBest 
There are no translations available.

Ce n'est pas spécifique à Ja Purity II, mais vu qu'il faut passer par là pour personnaliser la couleur du header, je vous fait un tuto pour créer l'image header-mask.png avec The Gimp.

Pourquoi The Gimp ? Parceque ce logiciel est OpenSource, donc accessible à tout le monde (contrairement à Photoshop qui est payant).

1- Nouvelle image

 Attention, l'image header-mask devra faire 2px de plus en largeur que vos photos, sinon suivant le navigateur vous aurez des bandes verticales qui dépasseront de chaque côté.

Nous allons commencer par créer une nouvelle image de taille 700px X 140px.

cliquer sur Fichier > nouveau

nouveau

Nous pouvons renseigner la largeur et la hauteur en pixels.

Ne pas oublier de cliquer sur "options avancées" afin de sélectionner "remplir avec transparence".

creer-nouvelle-image

 

2- Choix de la Couleur

Dans la boite à outils, cliquer sur "couleur de premier plan" afin d'ouvrir la sélection de couleur.

selection-couleur1

Deux solutions, soit on choisit la couleur via la mire de couleurs, soit on utilise la "Notation HTML" si on connait le code couleur que l'on souhaite utiliser.

selection-couleur2

 

3- Utiliser l'outil dégradé

Nous allons sélectionner l'outil de dégradé

selection-degrade1

Puis choisir "PP avec transparent"

selection-degrade2

 

4- Création du dégradé

nous allons appliquer une première fois l'outil dégrader de la gauche vers la droite (s'arrêter avant la moitié de l'image)

degrade1

Puis appliquer l'outil de droite vers la gauche. Une autre solution consisterait à retourner la première image et à superposer les deux images.

Avec photoshop, on peut personnaliser l'outil pour appliquer le dégradé des deux côtés en une seule passe.

degrade2

Il ne reste plus qu'à enregister l'image au format PNG

enregistrer

 


joomlart ja purity 2

purity2_thumbnail

Joomlart - T3 Blank

t3blank_thumbnail

Les liens intéressants

web_links

adaptations de Ja Purity II

purity2_thumbnail
You are here: Tutoriels Mise en page Header Créer une image header-mask personnalisée