Création d'un cadre simple
La première étape consiste à créer l'image de base de votre
cadre. Pour cela vous devez utiliser un logiciel graphique. Il en existe de
nombreux gratuits ou non. Pour ce
tutoriels nous avons utilisé Paint.net (gratuit, il est téléchargeable sur
internet)
1-
1-Créer une image comme celle-ci dans Paint :
Faire nouvelle image
- Prendre l'outil de sélection (la flèche), cliquer
sur le fond et le supprimer (touche "suppr" du clavier)
- Choisissez une couleur
--
- Prendre l'outil de "rectangle arrondi",
dessiner un rectangle (ni trop grand, ni trop petit)
- - - Prendre l'outil "rectangle de sélection",
entourer votre rectangle (attention de le centrer et de laisser moins de 1cm
autour du rectangle)
- - - Cliquer sur le bouton dans la barre du haut
"rogner la sélection"
- - - Allez dans "fichier",
"enregistrer sous", sélectionnez comme type "png" puis
"32 bits"
2- 2-Dans OpenElement
Ici nous allons travailler avec l'élément cadre, mais le
fonctionnement est identique pour créer un cadre sur les autres éléments (une
image, un texte…)
--
- Ajouter un élément "cadre" sur votre
page, le garder sélectionné
--
- Dans le menu du haut onglet élément, catégorie
"avancée", cliquez sur "éditeur de cadre" (le magicien)
- - - Dans l'éditeur, cliquer sur "importer une
image", sélectionner votre image
- - - Déplacer les règles (en rouges) de façon à les
positionner comme sur l'image suivante
(Les zones cadrées sur l'image suivante
doivent pouvoir se répéter)
- - - Si vous
souhaiter créer un cadre avec un fond, cliquer sur le bouton "exporter le
fond", ce n'est pas le cas dans notre exemple
- -
- Cliquer sur "Appliquer et quitter"
Voici le résultat :
Vous pouvez bien sur revenir dans l'éditeur
pour supprimer un cadre ou le modifier
Pour en faite un modèle d'élément, vous devez
sélectionner votre élément puis cliquer sur enregistrer comme modèle (Dans le
menu du haut, catégorie "avancée"
Pour positionnez le texte si vous appliquez le cadre sur une zone texte : - Sélectionnez l'élément - Menu de droite / style / Personnalisation - Categorie "textes", Ligne "hauteur de ligne" mettez la hauteur souhaitez, le texte se centrera dans cette hauteur
Pour positionner le texte dans un bouton lien : Dans les bouton, vous devez sélectionner la zone de style "Zone de
texte" (menu haut, Onglet zone de styles, Categorie "zone de styles" - Sure le même onglet dans espacement, modifiez les espacements "extérieur"
|