Thème Cryonie : Changer les éléments graphiques
Comment utiliser ses propres images, et comment ont été créées les images fournies par défaut avec le thème pour Wordpress.
Tous les éléments graphiques peuvent être réalisés avec The GIMP.
Le header
Outre le logo, il comporte trois éléments graphiques: le fond pour l'en-tête, le fond pour la barre de navigation, et l'image d'arrière plan pour le logo.
La barre de navigation
Un simple dégradé sert à obtenir le fond. La hauteur est de 20 pixels et la largeur de 1 pixel.
Avec les couleurs de premier plan et de fond blanc et noir on utilise l'outil dégradé.
Le fond de l'en-tête.
La hauteur est de 76 pixels et la largeur de 1 pixel. On procède comme pour le fond de la barre de navigation.
L'image d'arrière-plan.
On mettra en oeuvre le tutoriel pour combiner des images avec effet de fondu.
On dispose d'une image de 482 pixels de large et 76 pixels de hauteur comme par exemple celle-ci:
Pour l'intégrer dans l'arrière plan, on va créer un effet de fondu...
- Charger l'image de fond d'en-tête de 76x1 pixels.
- Sélectionner tout. Copier pour l'avoir dans le presse-papier.
Elle deviendra disponible comme motif. - On crée une nouvelle image de 482x76 pixel. On actionne l'option "avancé" pour choisir le type de remplissage.
- On remplit avec un motif. On utilise le premier motif qui est l'image dans le presse papier.
On dispose maintenant d'une image qui correspond au fond de l'en-tête:
- Sur l'image du paysage, on réalise un dégradé tranparent à droite comme indiqué dans le tutoriel cité plus haut.
- On fait un copié-collé de cette image sur l'image ci-dessus. On obtient l'image suivante.
- Sauver sous le nom de wisland.jpg ou choisir un autre nom et modifier la règle #logoback dans le fichier style.php.
Le logo
Le menu Fichier->Créer->Logo propose un choix de scripts pour réaliser des logos.
Choisir un format et des dimensions permettant de l'insérer dans l'en-tête: 450x64 pixels au plus.
Sauvegarder au format PNG ou GIF avec option de fond transparent, sous le nom logo.gif ou logo.png et modifier éventuellement la règle #logo dans style.php.
Mise en ligne
Les fichiers graphiques sont à la racine du thème.
|
|
|