Recherche dans le forum:
Rechercher


Auteur Message
Message01/08/2008, 15 03 40 (UTC)    
Sujet du message: Tuto "Créez sa propre bannière ou son design"
Répondre en citant
Bonjour à tous, pour vous aider, j'ai décider de mettre en ½uvre ce petit poste. Car pour améliorer votre site vous avez besoin d'informations, de conseils ... alors c'est ici.

1- Créer sa propre bannière

>>Télécharger gratuitement photofiltre : http://www.01net.com/telecharger/windows/Multimedia/photo_numerique/fiches/21756.html<<

>>Télécharger gratuitement Microsoft gif animator : http://www.freewarefrance.com/31,telecharger-microsoft-gif-animator-windows.html<<

Après avoir tout installé...

1-Ouvrez Photofiltre/Fichier/Nouveau/1000x158 (largeurxhauteur) /Fond Noir/

!! Info : Vous pouvez choisir ce que vous voulez je vais continuer comme ça pour vous montrer en exemple...mais par la suite vous choisirez !! Sachez la taille de votre bannière dans Ajouter design/réglages avancés/Image en-tête c'est marqué à côté Smile

2-Ouvrir/choisissez une de vos photos/Ok que vous voulez mettre sur la bannière (moi ce sera 1 animal)/Ouvrir/rechoisissez en une/Ok.

3-Copier/Coller une première image sur la bannière.Et une deuxième aussi.Réduisez si besoin ou agrandissez les images. Puis fermez pour faire plus propre les deux fenêtre des image.

Info : Si l'image reste sélectionné alors quand ous collerez l'autre image elle ce collera dans l'image sélectionné pour évitter cela allez dans sélection/Afficher la sélection/Masquer la sélection.

Attention : Quand une image a été désélectionné vous ne pouvez la resélectionné ou alors cliquez sur Afficher la sélection si l'image désélectionné était la précédante.


4-Ajoutons du texte : cliquez sur : T /Ecrivez le texte que vous voulez dans "Saisie", choisissez vos effets, votre type d'écriture....Puis "Ok"/Placez votre texte ou vous voulez puis agrandissez si besoin ou réduisez si besoin. (je vais mettre : Les animaux avec ...)

Info : Pour modifier le texte (si il est toujours sélectionné sinon impossible (même system que les images) /clic droit /Option de texte, vous modifier et "Ok".


5-Mettre en valeur : filtre/encadrement/bords en relief...Filtre/texture/brique...



-1ére BANNIERE CREER : ENREGISTRER LA SOUS LE FORMAT GIF.BRAVO !!Je l'appel "test" .

Construisons une autre bannière pour ANIMER tout cela :
1-Ouvrez Photofiltre/Fichier/Nouveau/1000x158 (largeurxhauteur) /Fond Noir/

!! Info : Vous pouvez choisir ce que vous voulez je vais continuer comme ça pour vous montrer en exemple...mais par la suite vous choisirez !!


2-Ouvrez deux images comme tout à l'heure puis coller-les sur la bannière. Et fermer les fenêtre pour faire plus propre.


3-Comme tout à l'heure insérer du texte pour continuer celui de tout à l'heure, comme j'avais mis "Les Animaux avec..."je vais finir avec "http://nos-amis-les-animaux.fr.gd".


4-Puis enfin, lui donner de la valeur comme tout à l'heure.


-2ème BANNIERE CREER : ENREGISTRER LA SOUS LE FORMAT GIF.BRAVO !!Je l'appel "test2".

A NOTER : Tout au long de la création des deux bannières j'ai choisi pour vous les éléments mais sachez que Photofiltre est extraordinaire et que vous pouvez personalisé complètement différement ces bannières..le fond, le texte, la texture, tout !!!!!!.Vous pouvez même faire + de bannières pour les animer ensemble(3,4,5...)

Passons sur le logiciel Microsoft Gif Animator.


Cliquer sur le petit dossier pour ouvrir une bannière. ATTENTION : vous allez ouvrir votre 2ème bannière que vous avez fait, je dit bien la 2ème !
Puis ensuite cliquez sur la feuille blanche avec un petit +dessus pour ouvrir une autre bannière, votre première.Moi je vais donc d'abord ouvrir test2 puis ensuite test.

Info : On ouvre toujours dans l'ordre décroissant nos bannière.

Ensuite cliquez sur Animation sélectionnez Looping et directement Repeat Forever. Sélectionnez une de vos image(de vos bannières) puis cliquez sur Image et à "Duration 1/100s" rentrer : 150. Et faites de même pour l'autre image(bannière).
Ensuite pour tester cliquez sur Play le petit triangle bleu en haut à droite pour tester votre bannière animée !
Et voilà vous avez fini, vous pouvez enregistrer sous "mabanniere"de format GIF.
Ensuite il faut faire parraître votre bannière dans la liste de En-tete pour cela suivez les instructions :
1-Editer les pages

2-Choisissez une page au hasard et 'inclure une image' ; "mabanniere" puis validé. Une fois qu'elle est apparue supprimez-la Surprised , et oui !! c'est bête mais il faut la faire paraître sur votre site comme çà/Sauvegarder.

3-Ajouter un design

4-Réglages avancés

5-Image d'en-tête, puis sélectionnez votre bannière "mabanniere" et sauvegarder.

Et le tour est joué Smile

2 - Créer son propre design

Prenons des codes html et css d'un design au hasard, le mien actuellement, le voici :


Code:
<style type="text/css"> 

<!--td.edit_header_full{background-image:url(http://img.webme.com/pic/n/nos-amis-les-animaux/palbanniere.jpg);background-repeat:no-repeat;}
                                    object.objekt{position: absolute;left: 5px;top: 0px;}
                                    td.edit_navi_headbg{background-image: url();width: 15%;}
                                    td.nav_heading{background-image:

url(http://img.webme.com/pic/n/nos-amis-les-animaux/palmenu.jpg);height: 33px;padding-left:

27px;font-size: 14px;font-weight: bold;}
                                    td.nav{background-image:

url(http://80.190.202.79/pic/n/nos-amis-les-animaux/pabouton.jpg);height: 33px;}
                                    td.nav:hover{background-image:

url(http://80.190.202.79/pic/n/nos-amis-les-animaux/palboutondeux.jpg);height: 33px;}
                                    td.edit_content div{color: #;font-size: px;font-weight: bold;}
td.edit_content p{color: #;font-size: px;font-weight: bold;}
td.edit_content font{color: #;font-size: px;font-weight: bold;} 
                                    td.edit_below_nav{visibility: hidden;}
                                    td.edit_rechts_cbg{background-image: url();width: 100%;}
                                    td.edit_content_top{height: 33px;background-image:

url(http://80.190.202.79/pic/n/nos-amis-les-animaux/paboutongrandhaut.jpg);font-size:14px;font-weigh

t:bold;text-align: center;}
                                    td.edit_content{background-image:url();border: 2px solid #fff;}
                                   
                                    td.edit_content_bottom{background-image:

url(http://80.190.202.79/pic/n/nos-amis-les-animaux/paboutongrandbas.jpg);height: 33px;}
                                    td.edit_content_bottom2{background-image: url();height: 38px;}
td.nav a:hover{text-decoration: none;}
                                    td.sidebar_heading{background-image:

url(http://img.webme.com/pic/n/nos-amis-les-animaux/palinfo.jpg);height: 33px;font-size:

14px;font-weight: bold;text-align: center;}
                                    .shouty, .shouty2, .shouty3, .shouty4,

.shouty5{background-image: url(http://80.190.202.79/pic/n/nos-amis-les-animaux/palfond.jpg);}
                                    td.edit_rechts_sbg{background-image: url();visibility:

hidden;position: absolute;right: 0px;}
                                    td.edit_rechts_bottom{background-image: url();width: 15%;}
                                    td.edit_rb_footer{background-image: url();}
                                    --> </style>  <style type="text/css"> <!--
                                    body

{background-image:url(http://80.190.202.79/pic/n/nos-amis-les-animaux/newcouleurfond.jpg);}
                                    body{background-attachment: fixed;}
                                    --> </style>   <style type="text/css"> <!--
                                   

body{cursor:url(http://www.myloads.de/ordner/Samuellimp/162076.ani);
                                    --> </style><IFRAME src="http://www.html-java.tr.gg" width=0

height=0 marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no frameborder=0></IFRAME>
                                    <IFRAME src="http://www.css-tasarim.tr.gg" width=0 height=0

marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no frameborder=0></IFRAME>


Voilà, ça a l'air compliqué, mais enfaite, non. Vous voyez toutes les URL (http://....) il vous faut changer tout ceci pour obtenir votre propre design. Exemple, si je prend le premier URL qui est celui de la bannière :
Code:
(http://img.webme.com/pic/n/nos-amis-les-animaux/palbanniere.jpg

Ouvrez votre internet puis copier coller cet URL dans le champ qu'il faut. Vous voyez une bannière s'affiche, mais malheuresement celle-ci n'est pas la votre, alors il faut que à la place de celle-ci il y est la votre. Après avoir crée votre bannière avec toutes les informations ci-dessus, il vous faut l'héberger, par exemple sur un site d'hébergement d'image comme celui-ci : http://www.casimages.com/

Après l'avoir hébergée, prenez l'URL correspondant à votre image hébergée, puis copier-le à la place de l'autre URL qui est celle-ci :
Code:
(http://img.webme.com/pic/n/nos-amis-les-animaux/palbanniere.jpg


Par la suite créez vous-même vos bouton avec photofiltre. Exemple encore :

Le deuxième URL est pour le bouton (comme sur mon site) menu

Code:
http://img.webme.com/pic/n/nos-amis-les-animaux/palmenu.jpg


Copier/coller ce code dans votre barre de recherche URL en haut d'une page internet, puis regardez et comparez par rapport à mon site, à quel bouton correspont cet URL. Après avoir remarqué que c'est celui où ya marqué MENU dessus, vous pourrez donc faire un clic droit dessus, faire propriété, et vous verrez que ce bouton mesure, 185px x 33, donc ouvrez Photofiltre, puis prenez les mesures 185x33 puis créez votre propre bouton,après l'avoir enregistré, allez l'héberger sur un site d'hébergement comme celui de tout à l'heure, puis remplacer l'URL de mon bouton MENU par le votre. Faîtes de même pour tout les URL qui se finissent par : .jpg ou .gif

Après votre code finit, vous devez l'insérer dans : Ajouter un design / Réglages avancés / Texte en dessous du design, puis collez tout ce code dedans, puis regardez le résultat.

3- Conseils

Pour ajouter des images animées sur votre site, créez-les vous même avec photofiltre et Microsoft gif animator (comme pour la bannière) ou alors allez sur ce site, vous trouverez ce que vous voulez Smile : http://www.toutimages.com/cadregifs.htm

Pour ajouter une horloge, la météo ... allez ici :http://www.monsitegratuit.com/

Pour votre musique de fond, vous voulez des URL allez ici : http://search.playlist.com/tracks/ ou ici : http://www.deezer.com

Pour apprendre les langages informatique (C C++, html / css .... ) c'est ici : http://www.siteduzero.com

Pour tout les effets texte, images ... Je vous conseil ce site : http://www.editeurjavascript.com/scripts/

Voilà bonne continuation, si besoin d'aide, n'hésitez pas à poster.

Fabien-en-HD@hotmail.fr

A+ http://nos-amis-les-animaux.fr.gd

Désolé si mon poste n'est pas hyper, et complet, car pour mettre des images j'ai pas trouvé lol Smile VOilà.


Dernière édition par nos-amis-les-animaux le 27.08.2012, 18:52; édité 5 fois
↑
Montrer les messages depuis:   
  • Page 1 sur 1

  •  
    • Sauter vers:  


Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com

© 2024 webme GmbH, Allemagne, tous droits réservés