Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
603 connectés 

  FORUM HardWare.fr
  Graphisme
  Cours

  [TUTO WEB] Création d'un site web, méthode + choix du style

 



Notez ce tutorial, pour que je sache si j'en fais d'autres ou si je sors !




Attention si vous cliquez sur "voir les résultats" vous ne pourrez plus voter

 Mot :   Pseudo :  
 
 Page :   1  2
Page Précédente
Auteur Sujet :

[TUTO WEB] Création d'un site web, méthode + choix du style

n°699432
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 00:24:27  profilanswer
 

Ce tuto s'adresse aux webdesigners occasionnels, qui souahitent avoir un site un peu plus élaboré, avec une interface plusa accrocheuse.
Sont déjà en place : la méthode et le "cours" sur les style. Je dois refaire le tuto sur les menus et bannières, voire développer complètement sur la navigation.
 
I > L'exemple : création d'un site, la méthode
II > Les cours : comment donner du style à sa page ?
 
 
Les cours c'est bien, un exemple c'est mieu !
j'espère que je serais assez pédagogue.
 
Nous allons faire ici un site, avec mise en page en css.
Sommaire :

Citation :


0. On se pose les prèmieres questions
1. Elaboration d'un croquis papier pour la navigation
2. Choix des couleurs + Choix des polices + Choix du style
3. Elaboration d'un logo
4. Création de la page xhtml (maintenant ou après les découpages, je le conseille au début mais en général je le fait à la fin ! faite ce que je dis, pas ce que je fais)
5. Elaboration du Psd
6. Découpage du Psd
7. Création du CSS


Spoiler :

Je suis en train de faire un site, il sagit en réalité d'une refonte, donc j'ai déjà un un logo et des textes, mais je vais en mettre des bidons. L'exemple montrera la création de ce site. Il se peut que j'oublie quelque chose, ce n'est pas fixé !


 
Les quesitons
- Quel est le sujet du site ? (influera la création du logo, des couleurs, la police)

Citation :

Ici c'est un site de vente de produits de décoration orientaux :
 > logo : caligraphie orientale
 > Couleurs : chaudes, sesk (heu non pas sesk ! je me perd, c'est la chaudeur !) couleurs chaudes :o = orange, rouge, bordeau
 > Polices : je ne fais pas de fantaisies, arial, verdana...


- Quel est la philosophie associée au site ? (ilfluera plutot sur le style du site : pas de trash pour un site institutionel, mais pour un site de sport extreme, la police).

Citation :

Vendre, il faut quelque chose de classique niveau design, mais comme ca parle de déco on a le droit à un peu de fantaisies comme du trash, ou une navigation spéciale.
 > 2 niveaux de menu : un pour la navigation générale (acceuil, contacts...) l'autres pour les produits


- Faut-il créer un seul CSS ou plusieurs ? (les catégories vont-elles ensemble ? peut-on les séparer ?)

Citation :

dans mon cas j'aurais pu. mais je ne veux pas me prendre la tête, j'aimerais finir ce site dans la nuit ! je changerais juste une image dans la navigation


 
Le croquis
j'ai pas de scanner mais ca sera : un grand menu en haut avec une image, un menu texte à gauche, et le contenu à droite.
 
Choix des couleurs, du style, des polices
http://img399.imageshack.us/img399/2233/couleurs5vq.jpg
plus N&B
le style, c'est celui qui est "à la mode" dans le design CSS. J'aurais bien fait du trash mais je le sens mal, c'est assez délicat pour un site de vente.
exemple : http://colorschemer.com/
en trash ca aurait été plus ca : http://www.lanuovavela.com/
 
Le logo
 
 
Le xhtml

Citation :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>Site.com</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
<div id="conteneur">
 
 
<div id="logo">Site.com</div>
 
<div id="navigation">
 <ul id="menu">
  <li><a href="#">Acceuil</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Panier</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</div>
 
<div id="colone">
  <ul id="colone">
   <li>Lampes héné</li>
   <li>Lampes calligraphiées</li>
   <li>Lampes vieillies</li>
   <li>Applique</li>
   <li>Plafonnier</li>
   <li>Lampes en os</li>
  </ul>
  <ul id="colone">
   <li>Vases</li>
   <li>Assiettes</li>
   <li>Tajines</li>
   <li>Boites</li>
   <li>Bougeoirs</li>
   <li>Cendriers</li>
   <li>Théières</li>
  </ul>
  <ul id="colone">
   <li>Accessoirs de bureau</li>
   <li>Boites et coffrets</li>
   <li>Objets et tables</li>
   <li>Jeux de société</li>
  </ul>
</div>
 
<div id="corps">
 
  <h3>ACCEUIL</h3>
 <div id="bloc">
  <h2>Titre</h2>
  <p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
 </div>
 <div id="bloc">
  <h2>Titre</h2>
  <p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
 </div>
 <div id="bloc">
  <h2>Titre</h2>
  <p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
 </div>
 <div id="bloc">
  <h2>Titre</h2>
  <p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
 </div>
 
</div>
 
<div id="pied">
  <p id="bottom" class="footer">Site.com | <a href="http://validator.w3.org/check?uri=referer">xhtml</a> | css &copy; 2005 - An3k</p>
</div>
 
</div>
</body>
</html>


 
Elaboration du psd
600x500 px j'ai choisi une bande fine, avec un fond un peu plus élaboré pour.
- création du fond :
http://img382.imageshack.us/img382/5426/tutofond5ob.th.jpg
- création du header (chapeau) avec la navigation du premier niveau :
http://img369.imageshack.us/img369/4093/tutonav16tu.th.jpg http://img378.imageshack.us/img378/1091/tutonav29tz.th.jpg http://img366.imageshack.us/img366/6691/tutonav26ur.th.jpg
bon je vais garder ca pour le tuto, c'est simple.
je vais mettre un rollover pour le menu. vous voyez j'espere à quel point votre menu est la base de votre site. c'est vraiment le menu+baniere qui va donner du caractère à la présentation, c'est donc sur cela qu'il faut s'appliquer et le reste sera pardonné.
 
Decoupage du psd
http://img387.imageshack.us/img387/4482/baniere15jy.jpg http://img387.imageshack.us/img387/5324/fond6sp.jpg http://img387.imageshack.us/img387/4446/logo4av.jpg http://img387.imageshack.us/img387/6102/roll12ci.jpg http://img387.imageshack.us/img387/2177/roll22vd.jpg
 
Création du css

Citation :


body {
 background-color: #330000;
 background-image: url(images/fond.jpg);
 color: #990000;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 margin: 0;
 padding: 0;
}
 
a {
 color: #990000;
 text-decoration: underline;
}
 
a:hover {
 color: #000;
 text-decoration: none;
}
 
h2 {
 font-size: 13px;
 font-weight: bold;
 letter-spacing: 3px;
 margin-bottom: 0;
 margin-left: 0;
 margin-right: 0;
 margin-top: 2em;
 padding: 0;
}
 
h3 {
 font-size: 16px;
 font-weight: bold;
 letter-spacing: 2px;
 margin-bottom: 3px;
 margin-left: 0;
 margin-right: 0;
 margin-top: 10px;
}
 
ul#menu
{
 margin: 0px;
 padding: 0px;
 margin-top: 118px;
 list-style-type: none;
 text-align: center;
 font-size: 13px;
 font-family: Georgia, Times, Serif;
}
 
ul#menu li a
{
 float: left;
 display: block;
 width: 100px;
 height: 62px;
 padding-top: 20px;
 color: #000;
 text-decoration: none;
 background: url(images/roll.jpg) no-repeat 0 0;
}
 
ul#menu li a:hover
{
background: url(images/roll.jpg) no-repeat 0 -82px;
text-decoration: none;
}
 
#conteneur {
 background-color: #ffcc33;
 margin: 0px;
 padding: 0px;
 width: 550px;
}
 
#logo {
 position: absolute;
 background-image: url(images/logo.jpg);
 background-repeat: no-repeat;
 left: 0px;
 height: 144px;
 width: 150px;
}
 
#navigation {
 position: absolute;
 left: 150px;
 height: 200px;
 width: 400px;
 background: url(images/baniere1.jpg) no-repeat 0 0;
 
}
 
#colone {
 margin: 0px;
 padding: 0px;
 width: 150px;
 float: left;
 padding-top: 144px;
}
 
ul#colone
{
 margin-left: 10px;
 margin-top: 10px;
 padding: 0px;
 list-style-type: none;
}
 
#corps {
padding-top: 200px;
padding-left: 150px;
}
 
#pied {
 text-align: center;
 clear: both;
}


 
Voilà, il reste des petites améliorations au niveau des textes.
on va passer à ce qui est vraiment important : comment donner du style à sa page web ?


Message édité par Skopos le 07-01-2011 à 16:18:22

---------------
An3k.com Création de sites web - mon tuto

mood
Publicité
Posté le 20-08-2005 à 00:24:27  profilanswer
 

n°699433
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 00:24:38  profilanswer
 

Comment donner du style à sa page web ?
 
Récapitulatif :
 
Les couleurs
Vous n'arrivez à rien avec les couleurs ? Vous vous sentez daltoniens du clic ? Plusieurs sites peuvent vous aider à choisir, c'est une question de pratique.

Citation :

Je vous en donne un, il y en a des tas, à voir sur google
http://www.colorschemer.com/


 
Les polices d'écriture
Il faut prendre des polices compatibles sur toutes les plates-forme. On préfèrera des polices simples, classiques du genre arial, verdana, times, times new roman... c'est selon le style de la page et au feeling. Moi je choisis généralement verdana, mais georgia, times new roman c'est assez sympa je trouve dans les sites de couleurs claires. polices à bannir : les polices fantaisies genre comic sans ms, ca donne un style vraiment amateur.
 
Le style (en lui meme)
On distingue dans le webdesign plusieurs styles dans les formes, la présentation, l'organisation, la taille.
Je vais essayer de détailler tout ce qu'il me passe par la tête (les autres webdesigners, je compte sur vous pour complèter la liste), avec un exemple.
 
Le style trash

Citation :

C'est un style qui va avec mode du dark/gore/jackass ( :D c'est comme ca que je le défini). Le principe est de créer des images brouillée, salies, vieillies avec les brush des logiciels de retouche.


Le style clean

Citation :

C'est l'inverse du style trash, il est à la mode chez les développeurs CSS, ca ressemble presque à du dessin technique, tout est bien carré/oragnisé, très compliqué à définir puisque ce style a pris des centaines de directions
http://www.cssvault.com


Le style technique

Citation :

C'est un style qui utilise beaucoup d'images, il est associé à un style d'infographie très moderne/futuriste à la sauce Troidé et StarWars :D il faut avoir un sacré niveau en inforaphie pour réaliser ces sites
mon préféré : http://www.realityslip.com/


Le style aqua

Citation :

Rappellant les interfaces de linux et mac os9, il est bien usité (oh je parle bien!) dans le monde du libre. le principe est de donner des effet de 3D avec de la 2d et des dégradés.
par les créateur du site précedent : http://www.realityslip.com/plur2k/hybrid.htm


Le style pixel art

Citation :

Très à la mode il y a quelques années, lorsque tout le monde passait au 1024, qu'on avait des ordinateurs de plus en plus puissants, avec des cartes graphiques qui commencaient à bien en jeter, beaucoup on eu la nostalgie de la superNES et ont créé des infographies/illustration sur paint avec des effets lcd. le principe : tout faire avec l'outil crayon.
http://www.pixelsyndrome.com/


-----------------
Le portail

Citation :

non il ne sagit pas d'une forme de site avec des portes de jardin, mais de gros sites contenant beaucoup d'informations, généralement (quasi obligatoirement) élaborés avec des lagages dynamiques type PHP ou ASP. Ce genre de sites est assez réstrictif dans les formes : un menu à gauche, une banière, le conten u au milieu
http://www.voila.fr


Le mini-site

Citation :

C'est des petits sites souvent en flash qui sont un peu comme des pubs TV : petit dans le contenu, souvent en flash. Notement utilsés pour présenter un produit ou une gamme de produits.
http://www.c1.citroen.com/


Le blog

Citation :

Issu de la mode des blos que tout le monde connais, ce sont des sites qui présentent l'information en hauteur, assez souvent fins, ce sont des petits portails (c'est cette forme que j'ai utilisé plus haut).
http://www.cssbeauty.com


Le portfolio

Citation :

Tout le monde connais, pas besoin de s'étendre. Ce sont des galeries améliorées pour montrer ses oeuvres, productions ect....
http://www.an3k.com :D :sol: [:al zheimer]
http://www.metropro.com.mx


 
ect...
 
Mélangez les style, les formes et créez votre image.
 
________________________________________________________________
 
Le tuto, le vrai : :sol:  
Pour moi, la navigation, donc le menu, est l'éléments principal du site. Le menu, par sa forme, sa taille, son style va définir le reste. Il faut donc s'appliquer.
Les technologies pour les menus : FLash, CSS, JavaScript et html simple.
 
Le menu : Quelle forme choisir ? Horizontal ou vertical ?
Beaucoup de catégories (portail) ? le choix sera vertical, sauf si on peut opèrer à plusieurs subdivisions, dans ce cas on peut se permettre un menu horizontal à plusieurs niveaux, mais c'est pas super pratique à l'usage.
Peu de catégories ? il faut maintenant avoir une idée du rendu final : est-ce que on va avoir une ou plusieurs colones ? Si on a du contenu qui permet de faire une mise en page assez graphique, avec des cadres, une image+ du texte + un titre, on peu choisir une colone, ca ne fera pas vide, en revanche pour un contenu un peu monotonne, qu'on ne peut organiser sans plus, on préfèrera plusieurs colones pour éviter le vide, avec le menu dans les colones (blogs). On pourra également faire un mix des deux : le menu principale dans la banière en haut, et un autre pour des trucs moins importants dans une colone.
On évitera les menus dépliants, ils sont assez chiants à personaliser, donc difficiles à intègrer parfaitement.
 
La banière : attaché ou détaché de notre menu ?
Le reflexe, c'est souvent de faire comme un portail, une banière en haut, son menu à gauche, mais ou est le style ?
je n'aime pas personnellement les bannière seules qui font la largeur du site, ca fait m'as-tu-vu ? (après y'a des designer qui sont très convaincants et qui arrivent à faire changer d'avis. c'est plus une histoire de feeling.) j'aime créer un menu dépendant de son logo, lui meme dépendant de la bannière et vice-versa, en créant des barres horizontales ou verticales pour les relier, avoir un fond commun (cherchez des exemples). je crée un logo discret, avec le nom du site qui ne dépasse pas la taille du logo.
 
Vous êtes débutants complétement ?
Je vous conseille de faire le menu et le logo ensemble. soit toute la largeur du site en haut avec le logo à gauche ou à droite, et le menu sur le reste de la banière. soit en haut d'une colone le logo et juste en dessous votre menu (annimé très simplement : une petite fleche qui apparait au survol ?). vous pourrez comme ca très facilement crer un logo avec un menu qui vont ensemble.
 
je metterais ce tuto à jour avec des images, des exemples. il faut que je navigue un peu pour préparer ca.
 
________________________________________________________________
 
Mot de la fin :
Aucun cours ne vous fera devenir bon, il faut s'inspirer et pratiquer pour avoir un style cohérent et une pratique des couleurs. N'hésitez pas à regarder de beaux sites et à s'en inspirer, il n'y pas de mal à ca surtout au début. l'important c'est de ne pas copier, on ne progresse pas en copiant. interressez-vous surtout aux menus.


Message édité par an3k le 21-08-2005 à 20:55:40

---------------
An3k.com Création de sites web - mon tuto

n°699434
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 00:24:48  profilanswer
 

Réservé


Message édité par an3k le 20-08-2005 à 19:16:36

---------------
An3k.com Création de sites web - mon tuto

n°699486
TKG
Just a Sweet Transvestite...
Posté le 20-08-2005 à 02:02:47  profilanswer
 

Heureusement que j'aime pas le webdesign, j'aurais pas à tout lire [:itm]

n°699490
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 02:12:38  profilanswer
 

déjà un troll ? :D


---------------
An3k.com Création de sites web - mon tuto

n°699506
Danamir_
kodama
Posté le 20-08-2005 à 10:21:47  profilanswer
 

A suivre avec intérêt. [:huit]

n°699510
Skopos
Titilleur de nombrils...
Posté le 20-08-2005 à 10:54:22  profilanswer
 
n°699523
FlorentG
Unité de Masse
Posté le 20-08-2005 à 11:39:33  profilanswer
 

an3k a écrit :

Sommaire :

Citation :


0. On se pose les prèmieres questions
1. Elaboration d'un croquis papier pour la navigation
2. Choix des couleurs + Choix des polices + Choix du style
3. Elaboration d'un logo
4. Création de la page xhtml (maintenant ou après les découpages, je le conseille au début mais en général je le fait à la fin ! faite ce que je dis, pas ce que je fais)
5. Elaboration du Psd
6. Découpage du Psd
7. Création du CSS



 
L'Xhtml est effectivement à faire tout d'abord. Le mieux, c'est de faire 100% du site sans aucune présentation. Puis tester, surfer dessus, vérifier que tout fonctionne et est accessible sans images et sans CSS ni JavaScript. Après, on peut se lancer dans la partie CSS :)
 
Exemple connu :
 
http://mboffin.com/stuff/designline-openair.gif


---------------
last.fmflickr
n°699534
Ayuget
R.oger
Posté le 20-08-2005 à 12:01:49  profilanswer
 

Code :
  1. <div id="colone">
  2.   <ul id="colone">
  3.    <li>Acceuil</li>
  4.    <li>Services</li>
  5.    <li>Produits</li>
  6.    <li>Panier</li>
  7.    <li>Contact</li>
  8.    <li>Acceuil</li>
  9.    <li>Services</li>
  10.    <li>Produits</li>
  11.    <li>Panier</li>
  12.    <li>Contact</li>
  13.   </ul>
  14. </div>


Erreur au niveau du code là.
 
Bonne initiative cependant.

n°699543
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 12:32:33  profilanswer
 

oui, j'ai pas mal de trucs à changer pour l'exemple, et je dois créer "mes explications"


---------------
An3k.com Création de sites web - mon tuto

mood
Publicité
Posté le 20-08-2005 à 12:32:33  profilanswer
 

n°699780
jirotoh
Posté le 20-08-2005 à 16:49:35  profilanswer
 
n°699793
skyh_ead
Posté le 20-08-2005 à 17:19:24  profilanswer
 


Moi ce que j'aime c'est la partie "elaboration du psd"  :)  
Puisque les idées ca se trouve, le code bah c'est "que" du code, ca se trouve/change facilement/s'apprend mais alors le design  :cry:  
merci an3k  :love:


Message édité par skyh_ead le 20-08-2005 à 17:19:39
n°699808
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 18:02:46  profilanswer
 

en dessous je vais faire un tuto approfondis sur les menus


---------------
An3k.com Création de sites web - mon tuto

n°699834
jirotoh
Posté le 20-08-2005 à 19:16:47  profilanswer
 

tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ? :D
 
merci  :hello:


---------------
visit my portf o lio on jir o toh.com
n°699836
an3k
powered on macintosh ^^
Posté le 20-08-2005 à 19:30:01  profilanswer
 

jirotoh a écrit :

tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ? :D
 
merci  :hello:


j'ai utilisé une "pattern" avec le seau de peinture.
> création d'une nouvelle image 5px / 5px
> avec le crayon on crée une diagonale
> edition > define pattern (en anglais)
> on retourne dans son image
> pot de peinture > pattern (en haut à gauche) > sélectionner la pattern
 
http://img380.imageshack.us/img380/9242/untitled16ia.jpg


---------------
An3k.com Création de sites web - mon tuto

n°699862
jirotoh
Posté le 20-08-2005 à 21:25:22  profilanswer
 

ok merci !  :jap:  
 
(en fait je savais mais je trouvais que c etait une belle astuce a faire connaitre  [:bap2703] )


---------------
visit my portf o lio on jir o toh.com
n°699885
justelebla​nc
Posté le 20-08-2005 à 22:19:14  profilanswer
 

http://forum-images.hardware.fr/themes_static/images/telecharger%20com/multipleflag1.gif

n°700304
an3k
powered on macintosh ^^
Posté le 21-08-2005 à 19:30:13  profilanswer
 

Mise en place d'un sondage


---------------
An3k.com Création de sites web - mon tuto

n°700308
justelebla​nc
Posté le 21-08-2005 à 19:33:17  profilanswer
 

premier vote [:volta]

n°700309
an3k
powered on macintosh ^^
Posté le 21-08-2005 à 19:34:49  profilanswer
 


:jap:
j'espere en avoir pleing  :bounce:  :pt1cable:  :whistle:


---------------
An3k.com Création de sites web - mon tuto

n°700325
Skopos
Titilleur de nombrils...
Posté le 21-08-2005 à 19:58:18  profilanswer
 

a voté :jap:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°700345
skyh_ead
Posté le 21-08-2005 à 20:18:21  profilanswer
 

s'po fini je vote pas encore (mais où s'arretera t'il ?) :p

n°700349
an3k
powered on macintosh ^^
Posté le 21-08-2005 à 20:21:03  profilanswer
 

bah c'est un cours complet pour styliser sa page, j'en ai vu nulle part, et j'ai l'impression que certains en ont besoin. ca permet de sauter des étapes (celle du linchage publique sur HFR par exemple :P )
je devrais faire prof tient ! lol


---------------
An3k.com Création de sites web - mon tuto

n°700377
an3k
powered on macintosh ^^
Posté le 21-08-2005 à 20:56:47  profilanswer
 

tuto fini. il se peut juste (en fait dans ma tete c'est sur) que je refasse la fin qui parle des menus car j'en suis pas du tout satisfait !


---------------
An3k.com Création de sites web - mon tuto

n°700684
Natopsi
☄️Just end it already!☄️
Posté le 22-08-2005 à 12:14:36  profilanswer
 

[:blueflag]  [:huit]  
Bravo! [:acherpy]


---------------
ACH/VDSHFRCoin:7Z2K2a9BLZ1yo1v8uMr4rg7qD3vtBFXZ6p◈1435mm⚡
n°700687
seb306bzh
Posté le 22-08-2005 à 12:17:30  profilanswer
 

très bon tuto  :sol:  
 
tu pourrais m'en dire un peu plus sur le decoupage du psd ?
 
la j'ai fait une maquette mais je vois pas comment faire  :??:


---------------
merci http://forum.hardware.fr !!
n°700703
an3k
powered on macintosh ^^
Posté le 22-08-2005 à 12:27:53  profilanswer
 

seb306bzh a écrit :

très bon tuto  :sol:  
 
tu pourrais m'en dire un peu plus sur le decoupage du psd ?
 
la j'ai fait une maquette mais je vois pas comment faire  :??:


bien sur :)
bzh powaa [:bigbrother]


---------------
An3k.com Création de sites web - mon tuto

n°700706
seb306bzh
Posté le 22-08-2005 à 12:30:23  profilanswer
 

an3k a écrit :

bien sur :)
bzh powaa [:bigbrother]


merki  :D  
 
c'est clair BZH powaaaaaaaa [:bigbrother]


---------------
merci http://forum.hardware.fr !!
n°700709
an3k
powered on macintosh ^^
Posté le 22-08-2005 à 12:33:52  profilanswer
 

j'utilise l'outil tanche (slice tool).
j'imagine comment je peux mettre en page avec les tableaux ou les css et je découpe en fonction. j'essaie d'avoir le moins d'images possible donc je rgroupe des parties. (c'est là qu'on voi à quoi sert de faire un croquis :miam: ) je découpe les parties qui seront utilisées en fond le plus petit possible. tu verras très vite le fonctionnement avec l'outil tranche > apres tu envois dans image ready et tu exportes.
si tu veux un conseil montre moi ta maquette, je pourrais plus t'aider


---------------
An3k.com Création de sites web - mon tuto

n°700731
skyh_ead
Posté le 22-08-2005 à 12:56:44  profilanswer
 

an3k a écrit :

tuto fini. il se peut juste (en fait dans ma tete c'est sur) que je refasse la fin qui parle des menus car j'en suis pas du tout satisfait !


la partie sur la banniere detachée du logo détachée du menu, j'ai rien compris  :whistle:  
Moi je veux bien qu'on me dise que c'est pas le mieux de tout faire attaché mais le problème c'est qu'après souvent on voit pas comment faire pour faire plein de morceaux et garder de la coherence.  
Disons que j'ai voté c'est utile, mais que la derniere partie est un peu plus theorique que pratique (il faut pas faire çà, mais çà, oui mais comment ?)
Enfin apres c'est ptet aussi parce que je suis pas trop debutant et que je conaissais un peu ce que t'as dit.  :)

n°700732
an3k
powered on macintosh ^^
Posté le 22-08-2005 à 12:58:34  profilanswer
 

ouai c'est pour ca que je dois refaire... :/ faut pas bosser avec la migraine ca rend pas bien :/
je metterais des exemples de menus, leurs atouts, leurs défauts et peut etre comment les faire ?


---------------
An3k.com Création de sites web - mon tuto

n°700852
justelebla​nc
Posté le 22-08-2005 à 16:25:05  profilanswer
 

bzh powa aussi alors

n°700943
seb306bzh
Posté le 22-08-2005 à 17:13:20  profilanswer
 

justeleblanc a écrit :

bzh powa aussi alors


t'es d'ou ?  :D


---------------
merci http://forum.hardware.fr !!
n°701312
justelebla​nc
Posté le 22-08-2005 à 21:37:07  profilanswer
 

rennes

n°701358
kzimir
-
Posté le 22-08-2005 à 22:26:51  profilanswer
 

Très bon tuto !


---------------
Serre les fesses jusqu'en 2012...
n°701580
seb306bzh
Posté le 23-08-2005 à 12:03:41  profilanswer
 


moi vannes  :p  
 
 
et toi t'es d'ou ?
 
va falloir faire un topic des bretons  :D  
 
HS OFF


---------------
merci http://forum.hardware.fr !!
n°709792
gatsusat
Posté le 08-09-2005 à 08:28:12  profilanswer
 

skyh_ead a écrit :

Moi ce que j'aime c'est la partie "elaboration du psd"  :)  
Puisque les idées ca se trouve, le code bah c'est "que" du code, ca se trouve/change facilement/s'apprend mais alors le design  :cry:  
merci an3k  :love:


 
si ton design est tout en vectoriel, tu n'as pas trop de souci si surtout tu utilises les CSS

n°710384
an3k
powered on macintosh ^^
Posté le 09-09-2005 à 03:21:09  profilanswer
 

faut que je le finisse ce tuto... amsi j'ai du taff à la pelle là !


---------------
An3k.com Création de sites web - mon tuto

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Cours

  [TUTO WEB] Création d'un site web, méthode + choix du style

 

Sujets relatifs
[Avis] logo pour site de création graphique[Blender] 1er création ....
de Autocad au Web[Web]Charte graphique VTT freeride [MAJ]
site perso de mes dessinsavis d'amélirations d'un site
Un très bon logiciel de création de site ? 
Plus de sujets relatifs à : [TUTO WEB] Création d'un site web, méthode + choix du style


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR