Tutoriaux Graphiques : superv20 et 45 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

[Tuto Photoshop] Faire un design web

 
n°3120
juju666
Profil : Top Penguin
Avatar
profil
Posté le 27-12-2005 à 18:38:04  
 

Bonjour tout le monde !
Alors voila aujourd'hui j'ai esayer de realiser un tutorial avec tout les astuce que j'ai pu trouver sur le web ou que l'on ma donner alors voila un petit recapitulatif , attention c'est long !
Ps:oOo il neige a gros flocon et sa a l'air de tenir !

-Introduction-

 

Voila nous allons commencer notre site web mais pour que notre site web soi beau et appresiable il lui faut de la "cohérence" !
Et la cohérence n'est pour le visiteur qu'une simple question de gout, ce qui ce traduit par le design.
Le design doit-être en rapport avec le sujet qui correspond au site (Les tux,un site d'expositio,, d'entreprise...) mais il doit rester clair car c'est le plus important !
Imaginez vous un instan arivez sur un site avec plus de chose differente tout confuse un peu de flou par ici un peu trop claire par la , un bonshomme par ici , une mascote par la ,ceci est trop dur a regarder et on se lasse vite !
Néanmoins le web évolue, ses normes aussi et il y as nombres de site qui ont un design plus ou moins hors sujet !
Il faut donc savoir s'adapter et rester à jours, mais c'est un tout autre sujet.

 

Nous allons donc dans ce tutorial Enbelir notre site en lui creean un design propre mais avant tout :

 

?Un design ce compose de quoi ?

-->Un design ce compose d'un minimum de quatres éléments.

 

-->Un fond !
-->C'est plus commun de l'appler background . Cela parait anodin, mais il fait une bonne partie de la cohérence de votre futur site !
-->Une bannière (ou header).
Ce dernier élément doit être l'emblème de votre site.C'est la clé de la réussite mais à la place de ce header vous pouvez aussi utiliser un logo tout est bon mais ceci est très important car comme dit plus haut il represente votre site !
-->Un menu pour dirigez les personne visitant votre site !.
Cela paraît logique, mais sans lui, il n'y as pas d'interet !!. Ce menu doit etre  dernière lisible, beau et manifique enfin qui donne envie d'etre regarder !
-->Une zone de texte !
C'est là que le contenu sera affiché ( un texte une image , un tutoriel !;).C'est un élément à garder sobre et sur lequel le texte doit rester très lisible.
-->En extra, il y as le pied du site pour y faire apparaître les copyrights et autre droits d'auteur (après tout ce boulot, ce serai quand même idiot de ce faire piquer notre design !;).
Par la suite, la découpe de votre interface ce présente. Après tant de travail, il serait vraiment bête de négliger cette partie simpliste, mais qui demande de la rigueur...

-le tutoriel !-

Pour creer un design il vous fau une base !
Une base pour moi c'est une idee !
Donc vous avez qu'a dessinez sur une feuille de dessin au crayon a papier votre design pour plus tard l'incorporer sur photoshop !
Voila sur se sujets je ne peut pas trop vous aidez car un design depent de tout et donc c'est assez dificile de faire un tuto sur la creation de design !
Plus tard je rajouterais peut etre des effets sympa a utiliser dans vos design et si vous en avez donnez les je me ferai un plaisir de les rajoutez !

 

Voila se tuto se tourne donc plus vers l'aide et la decoupe de design donc toute demende n'est pas la bienvenue mais l'aide l'est !

!!-La découpe-!!

 

La decoupe d'un site est tres importante car elle donne vie au site sans elle le site n'existe plus surtout que grace au codage vous pourez rendre un bouton de votre menu cliquable !

 

Donc nous allons commencez !
Prennez l'outil tranche (K) puis cliquez sur votre design (cela devrai créer une tranche de la taille de votre design,mais si cela ne marche pas ne vous inquietez pas elle apparetra plus tard !;).

 

Ensuite decoute votre design avec inteligence !
C'est à dire de faire une tranche sur les bouton , le header , la parti texte tout sa est tres important car cela rendra le parti clicquable et codable !

 

La découpe est finie, passons à l'enregistrement...

 

Allez dans fichier puis  Enregistrer pour le web... Réglez les parametre comme vous le voulez sachant bien sur que internet explorer ne gere pas le png et mets un fond deriere une image et rendra votre design inutilisable sur ie se qui est dommage !

 

Donc reflechissez a deux fois pour le format de mon coter je conseil le .gif !
Puis passez sur "Enregistrer" et changer le "Type" en "HTML et images (*.html).

 

Cela vous fera un dosier d'images (les tranches) et un fichier web en .html .
Que vous pourez admirez de suite ! Alors votre travail et digne d'un chef ??

 


Il ne reste plus qu'à coder et remplir votre interface, mais ceci est une toute autre histoire.
Je vous conseille quand meme d'aller faire un tour ici  où vous apprendrer le php,xhtml et le css !

 

-Partage d'effet-

 

Ici je placerai tout les effets sympa a utiliser !
Alors profitez s'en et si vous pouvez en faire partager allez y !

 


Juju -Copyright 2006 ! :mdr:

answer
mood
GoogleAds
profil
Posté le 27-12-2005 à 18:38:04  
 

answer
n°3121
Cybermencool
Profil : Top Penguin
Avatar
profil
Posté le 27-12-2005 à 18:43:27  
 

merci pour ton partage juju :jap:

 

pour ceux qui toutefois ont besoin de plus d'explications, il existe une version illustrée ici :wink:

answer
n°3122
juju666
Profil : Top Penguin
Avatar
profil
Posté le 27-12-2005 à 18:46:03  
 

Oui et alors tu a des effet a faire tourner ??:tongue:
Hihi tu n'est pas obligez mais c'est toujours bien !

answer
n°3124
Cybermencool
Profil : Top Penguin
Avatar
profil
Posté le 27-12-2005 à 18:49:01  
 

juju666 a écrit :

Oui et alors tu a des effet a faire tourner ??:tongue:
Hihi tu n'est pas obligez mais c'est toujours bien !

 

le rollover, effet très interressant : cliquez sur le calque et appliquer l'effet rollover :smile:

 

voisissez l'image qui apparaitra et voila :biggrin:

 


Ps : je ne sais pas très bien utiliser cet effet mais en chipotant un peu, vous trouverez votre bonheur ^^ )

answer
n°3128
juju666
Profil : Top Penguin
Avatar
profil
Posté le 27-12-2005 à 19:39:58  
 

Personne aime mon beau tuto !
C'est que j'en ai mi du temps a le faire :frown:
Pas juste !

 

Juju

answer
n°3129
Valdrin
Profil : Big Penguin
Avatar
profil
Posté le 27-12-2005 à 19:45:57  
 

Il manque des images, regarde moi j'aurai fais comme sa le tuto :

 

Voilà aller voir un bon tuto sur ce sujet là : http://www.graph-mania.info/forum/ftopic232.php

answer
n°5124
skyalex
Profil : New Penguin
Avatar
profil
Posté le 28-02-2006 à 13:04:45  
 

pas assez complet, enfin, c'est mon avis!

answer
n°5125
superskunk
Profil : New Penguin
Avatar
profil
Posté le 28-02-2006 à 15:30:10  
 

Moi j'arrive à tout sauf a héberger ma page... J'ai essayer sur ifrance et un autre mais pas moyen...
Merci pour le tuto!

answer
n°5126
linkinmimil
Profil : Penguin Pro
Avatar
profil
Posté le 28-02-2006 à 16:57:17  
 

Merci, c'est très jolii.

answer
n°5765
Chaodam
Everybody lies
Profil : Penguin Pro
Avatar
profil
Posté le 28-03-2006 à 10:22:43  
 

euh,est-ce que c'est possible,un design a partir plusieur images:
je m'explique j'ai un blog sur zeblog et je peux changer le code html est-ce si j'heberge mon design sur un hebergeur d'image je pourrais le publier?enfin le mettre sur le net quoi

answer
n°5766
Bidi
Hylien à bonnet vert
Profil : Penguin Pro
Avatar
profil
Posté le 28-03-2006 à 10:47:35  
 

joli !

answer
n°9823
Lobtec
Profil : New Penguin
Avatar
profil
Posté le 16-02-2007 à 03:33:08  
 

Ah!!!Super !Merci Juju!Maintenant tu nous file un hébergeur gratuit  :mdr: Bon, j'espère que tuu pourra m'en trouver un!

answer
n°9824
dadoux
Plutot mourir qu'vivre pas Ivre !
Profil : Penguin Pro
Avatar
profil
Posté le 16-02-2007 à 09:26:30  
 

Super tutos vraiment  :great:, moi qui avait un peu peur à l'idée de réaliser un interface me voilà ravi :he:.

 

édit : au passage les 2 liens filé précedemment ne marche pas ... c'est moi ou ?

answer
n°12471
dadoux
Plutot mourir qu'vivre pas Ivre !
Profil : Penguin Pro
Avatar
profil
Posté le 17-01-2008 à 09:13:40  
 

P'tite question, pour découper le site, faut aplatir avant son design j'imagine ? (Car dans le mien j'ai plein de calques/groupes de calques).

answer

Aller à :
Ajouter une réponse