Créer son site Gratuitement : Service / Outils webmaster gratuit
Mon Site Gratuit
Contactez nous
Nos partenaires
Scripts
Tutoriaux
Nos services
Forums
Accueil
[1 étape] Créer son design web[1 étape] Créer son design web
 
[1 étape] Créer son design web

Photoshop | [1 étape] Créer son design web

Tutoriel crée par boulledogue le 29-05-2008.

SocialTwist Tell-a-Friend

Tutorial quasiment unique qui vous apprends trois choses: Créer le design d'un site, le découper et le coder html&css! Un tuto qui est donc très complet!

Créer un design Web en quelques minutes

Bonjour bonjour tout le monde,
Aujourd'hui, je vous présente le premier volet (en espérant que je sache faire les autres^^) de mon tuto: Créer un site web.
Dans ce premier volet, nous nous occuperons du design du site. Un design simple, mais agréable et joli.

Totalité du tuto

[1 étape] Créer son design web
[2 étape] Découper son site web
[3/derniere etape] Codons notre design
Pourquoi un tuto sur ce sujet?

Car il est rare qu'on explique comment faire le design d'un site internet, et pour MonSiteGratuit, un tuto sur ce sujet est indispensable :-)

Résultat final:

Résultat après l'avoir codé bien sûr. Visible en taille réelle ici: http://desopilo.olympe-network.com/cree ... _site_web/
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/tutofini.jpg

Débutons dès maintenant! :p

Créez un document (Ctrl+N), d'une taille de 700*500px, comme suit:
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/1.jpg

Prenez l'outil "dégradé" (G+G (double G quoi^^)). Appliquez un dégradé avec le plus foncé en haut, le plus clair en bas. Pour le dagradé, deux couleurs foncées suffisent. J'ai pris pour ma part deux rouges foncés, mais vous pouvez utiliser du bleu, vert etc. ;-)
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/2.jpg

Ecrivez vos boutons au dessus à droite, bien espacés les uns des autres. Je vous conseille la police Verdana, 16px, couleur blanche.
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/3.jpg

Réalisation d'un onglet

Sélectionnez l'outil Rectangle arrondi (U+U) avec un rayon de 15px, Style: carré blanc barré en rouge. Entourez un nom de bouton, le plus grand si possible, allez dans option de fusion (clic droit sur le calque=>Option de fusion). Cochez "Incrustation en dégradé". Choisissez deux couleurs foncées (Orange pour moi).
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/4.jpg

Sélectionnez maintenant le rectangle de sélection avec les données suivantes. Créez un grand carré au milieu du design, c'est l'endroit où se trouvera le contenu du site.
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/5.jpg

Voilà, REUSSI, vous avez votre design!!!
Voici ce que j'ai chez moi:

Résultat après l'avoir codé bien sûr. Visible en taille réelle ici: http://desopilo.olympe-network.com/cree ... _site_web/

http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/63/tutofini.jpg


Poster un commentaire

Commentaire :

*Vous devez être connecté pour pouvoir poster un commentaire
Si vous n'êtes toujours pas inscrit, cliquez ici !

Commentaires

merci c cool

yajuve

Question très stupide (pardon d'avance ) quelle est le logiciel à utilisé pour cette opération?

Merci d'avance ;)
Mieux vaut une question débile qu'une question à laquelle personne ne peut répondre ;) !
C'est marqué tout en haut de la page; il faut Photoshop.

jeromecold

Question très stupide (pardon d'avance ) quelle est le logiciel à utilisé pour cette opération?

Merci d'avance ;)

servettiens

Oui, Photoshop et un éditeur Web :)
Le design ici je dois avouer n'est pas top top mais il sert à bien comprendre les bases. J'en ferai un bien mieux quand j'aurai le temps ;)
A bientôt et merci pour ton intérêt à nos tutoriaux
Boulledogue

boulledogue

Je vais jouer le jeu et essayer de suivre toutes les étapes.

Je commencerai demain, sinon comme dans tout bon livre
de cuisine tu devrais commencer par nous dire les ingrédients
qu'on a besoin pour cette recettes.

J'ai quelques questions :
On a besoi ...

Melo98

Je vais essayer, merci, je te tiens au courant merci encore pour ta rapidité !

Aniki

Hum, j'ai essayé de suivre ce tuto, qui commençait sans problème mais j'ai eu un souci au moment de réaliser les onglets, quand je fais mon cadre destiné à l'onglet autour du nom de bouton, le cadre obtenu masque l'écriture , c'est sans doute un problème mineur mais comme mon expérience dans ce ...

boulledogue

Soumettre un tutoriel Photoshop

*Vous devez être connecté pour pouvoir soumettre un tutoriel
Si vous n'êtes toujours pas inscrit, cliquez ici !