Création d'image


 
AccueilPortailCalendrierFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Design de site web, kit graphique

Aller en bas 
AuteurMessage
Agonie
createur
createur


Nombre de messages : 615
Age : 25
Localisation : Sur ma chaise
Date d'inscription : 08/11/2006

MessageSujet: Design de site web, kit graphique   Jeu 16 Nov - 9:35

Voila je propose que sur ce topic on crée des kit graphiques de nous memes.

Notes: kit graphiques= design de site internet
Si vous ne savez pas le faire, voici un petit tutorial (juste avec photoshop) :


1-Tout d'abord, créé une image en 1000 x 1000 pixels

2-Faites un genre de screenshot de votre futur site: une image avec UN SEUL calque; pour moi :


en créant au minimum : un menu de navigation, un emplacement de banniere et le corps de la page et si possible sans ellipse Smile

3-Maintenant enregistrez votre image en .psd puis en .jpeg .

4-fermez photoshop et ouvrez image ready

5-selectionez l'outil tranche:

6- Decoupez les parties principales e votre site, menu(s), corps de la page, banniere (logo Wink) etc...

7-faites fichier->enregistrer sous en .psd

8-fichier-> enregistrez une copie optimisée sous et choisissez "html et images"

9-fermez ou reduisez imageready

10-ouvrez la page le nom-que-vous-avez-choisi.html et vous remarquerez que sous firefox (si vous l'avez), il y a des genres de bugs donc ouvrez la page avec internet explorer et là cela devrait apparaitre comme il le faut.

Mais me direz vous, a quoi ca sert de faire un joli design de site internet si il y a pas de texte sur les images QuestionQuestion
he bien continuez a lire ExclamationExclamationExclamation

11-Je vous conseille de telecharger un editeur html de designer pour 'voir' si votre travail est bien fait: dreamweaver

12-apres avoir installé et fait tout le bidouillage necessaire Razz , ouvrez dreamweaver

13-faites fichier->ouvrir-> votre page en .html et allez dans affichage->creation

14- cliquez sur l'image censée etre corps de votre page puis faites affichage->fractionner .

15-une partie du code html est selectionnée, c'est le code de l'image. Cliquez juste avant le debut du texte selectionné et inserez ce code :
Code:
<div class="Style1" style="width: 714px; height: 155px; padding: 0; margin: 0; background: url(images/tranche_03.jpg);">Votre texte</div>

a la place de XX (largeur) et YY (hauteur): mettez les dimensions de l'image decoupée dans l'image d'origine de votre kit graphique (le fichier ou vous avez enregistré votre page .html ->images -> l'image que vous avez selectionné dans dreamweaver->mettez votre curseur dessus (sans cliquer) et vous aurez la largeur ainsi que la hauteur de l'image.

a la place de
Code:
(image.jpg)
mettez : image/le-nom-de-l'image.jpg et supprimez le code:
Code:
<img src="images/nom de l'image.jpg" alt="" name="quelquechose" width="39" height="737" id="autrechose ^^">
retournez dans la partie du dessous, cliquez sur l'image que vous avez modifié et...vous pouvez ecrire, c'est magique alien cheers Like a Star @ heaven Like a Star @ heaven Like a Star @ heaven Like a Star @ heaven Like a Star @ heaven .

16- vous devez refaire l'etape 16 sur les images sur lesquelles vous voulez mettre du texte.



Conclusion : petit tutos que j'ai fait mais pas tres explicite malheuresement confused mais j'espere que vous reussirez, n'hesites pas a poser des qustions plus bas.


Postez vos créations !!

Mon kit graphique: http://simulation-hack.ovh.org/kit/tranche.php a regarder avec internet explorer...



PS: ils vous faut un hebergeur pour mettre vos pages en ligne, si vous en avez un faites le mais sinon postez seulement un screen ou l'image et rajoutes moi dans vos contacts msn: kakashiprovost@msn.com pour que je le mette sur mon hebergeur santa , je vous passerez le lien et vous pourrez le poster en me remerciant du fond du coeurs Razz

PPS:si vous voulez utilisez ce kit graphique, contactez moi Very Happy

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Design de site web, kit graphique
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Site render graphique
» Comment importer un kit graphique sur WebzDitor ?
» Insertion dans le site
» Le Flat Design
» hébergeur gratuit pour un site rein quand flash(RESOLUT)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Création d'image :: partie externe :: ecole de graff :: photoshop-
Sauter vers: