BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Création d'un cadre simple
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Création d'un cadre simple

 Répondre Répondre
Auteur
Message
Isa OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 13 Sep 2006
Status: Inactif
Points: 798
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Isa OE Citer  RépondreRéponse Lien Direct à ce Post Sujet: Création d'un cadre simple
    Envoyé : 14 Sep 2011 à 20:15

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"






Edité par Isa Maido - 28 Oct 2011 à 14:28
Haut de la page
Louyse allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 12 Mai 2014
Pays: Canada
Status: Inactif
Points: 1
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Louyse Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 12 Mai 2014 à 16:51
Merci beaucoup pour ce super tuto et pour toute l'aide apportée.
Bonne journée.Smile
Merci beaucoup pour toute l'aide offerte.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.094 secondes.