[Conception] Comment s'y prendre pour créer le désign d'un site ? [Résolu]

Diezo · 27/05/2006, 18h01

Salut à tous,

Je voudrais savoir comment est-ce que l'on fait pour créer un désign de site juste avec du HTML...

Je vais m'expliquer plus clairement, je connais les langages HTML, CSS (les bases), C et un peu le PHP (apparament quand on connait le C le php est pas très compliqué...). Maintenant je n'a jamais crée de site webs et voudrais en crée un pour un artiste (mon frère) pour qu'il puisse y mettre ses différents projets.

Il va donc créer lui même le désign mais ceci avec Photoshop seulement, et comment devrai-je faire pour que, à partir ce cette image photoshop du site, je puisse l'intégrer dans mon code HTML ?
En regardant les "templates" j'ai bien l'impression que en fait une page internet est un grand tableau qui est ensuite devisé en plusieurs ligne et colonne qui contiennent des petites images du design. Devrai-je donc à partir de son image photoshop la découper en "petit-bout" et l'insérer dans des cases d'un tableau que je créerai sur HTML ?...

Enfin bref, je suis un peu perdu

En espérant que vous m'avez compris... merci de m'aider. N'hésitez pas à me demander plus d'infos

Nemesys · 27/05/2006, 22h27

avec son image tu ne feras rien a part s'il a inséré une baniere etc.. tu pourras la recuperer et la placer dans ton code.. mais au moins tu sais que tu dois reproduire ce qu'il a fait sur son image de telle sorte que ce soit visible sur un navigateur. C'est deja un bon projet si tu es debutant ! Pour cela il faut juste un peu d'experience en html/css pour le design et aprés vient le php pour le dynamisme du site !

Voila si tu veux plus de précisions encore n'hesite pas.

kankrelune · 28/05/2006, 19h02

Citation:

Envoyé par Nemesis_

avec son image tu ne feras rien a part s'il a inséré une baniere etc.. tu pourras la recuperer et la placer dans ton code.. mais au moins tu sais que tu dois reproduire ce qu'il a fait sur son image de telle sorte que ce soit visible sur un navigateur.

Non... comme il l'a décrit il va devoir passer par un découpage de son image pour ensuite la dispatché comme il faut sur sa page... .. .

@ tchaOo°

Nemesys · 28/05/2006, 19h08

Oui s'il y a des images dessus il peut les découper (comme une banniere par exemple), mais s'il a écrit des menus a la main avec photoshop sur cette meme image globale il faudra bien qu'il le code sinon ses liens ne marcheront pas ...

kankrelune · 28/05/2006, 19h31

Citation:

Envoyé par Nemesis_

Oui s'il y a des images dessus il peut les découper (comme une banniere par exemple), mais s'il a écrit des menus a la main avec photoshop sur cette meme image globale il faudra bien qu'il le code sinon ses liens ne marcheront pas ...

Oui mais c'est facilement faisable... d'autre part et c'est plus dans ce sens là que je parle de découpage il peut découper son menu pour en récupérer les contours... de même pour les bloc de contenu, etc... .. .

@ tchaOo°

Diezo · 28/05/2006, 21h18

Oui les titres des menus etc ... seront fait pas mon frère via photoshop. Moi je dois créer les liens, lui permettre d'ajouter des news au milieu de la page ( lui il s'occupe de laisser de la place pour les news )
Et pour tout ca la meilleure solution reste donc de faire une page avec photoshop, puis de la découper encore avec photoshop puis de placer chaque bout dans les cellules du tableau de la page html ?

kankrelune · 29/05/2006, 15h27

Citation:

Envoyé par Diezo

Et pour tout ca la meilleure solution reste donc de faire une page avec photoshop, puis de la découper encore avec photoshop puis de placer chaque bout dans les cellules du tableau de la page html ?

Tout à fait... le mieux je pense c'est que tu cherche des kits graphiques gratuits et que tu regarde comment ils sont fait... pour le reste pas de secrets... html/css... .. .

@ tchaOo°

ps : le mieux serait de ne pas mettre les titres par exemple dans les liens du menu ça te permettra une mise à jour plus facile... .. .

marsupix · 29/05/2006, 15h39

le mieux est:
- créer le design sous photoshop (ce que ton frère a fait) en séparant bien chaque élément graphique de la page sur différents calques (ce que j'espère que ton frère a fait)
- enregistrer les "bouts d'images" qui t'interressent.
Pour le faire, par exemple tu as des boutons de menus sur un calque:
tu ne va pas enregistrer 10 images si tu as 10 boutons. une seule suffit. donc, tu affiche seulement le calque ou il y a le bouton tu fais image > rogner et laisse coché "rogner pixels transparents" et valide. l'image se réduit au bouton affiché.
Tu va alors dans fichier > enregistrer pour le web (là tu règle comme il faut pour optimiser le rapport poids/qualité, et tu enregistre ton image. Ensuite tu annule le rognage pour retrouver ton design complet et continuer avec la suite.
Pour les fonds de "cadres de news" par exemple, selon le design, tu peut les faire soir tout en css, soit séparé en 3 DIV avec une image pour la bordure du haut, une pour celle du bas, et une autre de 1pixel (ou plus si besoin selon le graphisme) répétée verticlament, pour le contenu de la DIV.

Une fois que tu as toutes tes images, fait ta page html, d'abbord sans css, en respectant la sémentique des balises etc...
Puis fait ton css en incorporant les images exportées, les couleurs etc...

Rappel toi aussi que par rapport au design de base, tu peut faire beaucoup en css en général (couleurs de fond, bordures de cadres, etc...)

Diezo · 30/05/2006, 17h19

Merci pour toutes ces infos.
Sinon je pensais faire le design de base avec HTML et CSS sans aucune image. Je créer des blocs par ci par la dans ma page en utilisant la balise <div> ( pour le menu à gauche, la banniere, le corps au milieu) et ensuite j'injecte en fond les images de mon frère. Ce serait pas la meilleure solution ?

ner0lph · 31/05/2006, 17h06

Si !
Et c'est même la plus souple : le jour où ton frère veut changer le design, il n'aura qu'a refaire les images et les enregistrer en lieu et place de celles existantes.
Et du coup, il peut même prévoir plusieurs graphismes (suivant les saisons par exemple,

).

jadey · 01/06/2006, 23h15

bon dsl les amis chui pas un pro non plus mais bon je SAIS que ça n'est pas de cette façon que l'on procede pour creer un site web même si c'est un truc basique.
Pour la methode de "decoupage" c tres efficace pour faire un site proffesionnel (on creer generalement un ou deux design sous potoshop en metant sur differents calques les differents elements, ce qui permets a la foi d'etablir une charte graphique et d'avoir des elements de debut (bannieres, logo etc) pour debuter)

le code de tes pages il faudra le faire avec un outil de developpement web genre DreamWeaver ou encore FrontPage (sinon tu as le bloc-note mais ça n'est pas reelement ce que l'on peut appeler un logiciel WYSWYG lol)

pour faire de l'animation y'a pas de secret fo apprendre a bricoler o moins avec Flash...

moi ce que je te conseille de faire puisque ton frere semble se debrouiller ac Photoshop c que tu essaye de trouver un tuto pour DreamWeaver qui n'est reellement pas difficile a utiliser pr faire un site, ça te prendra pas une semaine pour apprendre a t'en servir assez pour creer un site basique...

bonne continuation

Seb06 · 27/06/2006, 07h37

Citation:

Envoyé par jadey

ça te prendra pas une semaine pour apprendre a t'en servir assez pour creer un site basique...

1/2 journée en s'y mettant bien....

caro17 · 27/06/2006, 15h27

Salut !

Je voudrais moi aussi proceder à un decoupage pour mon design.
Mais j'ai quelques questions :
Les 'bouts' de graphisme quel'on obtiendra après, il suffira juste de les mettre en fond de bloc, et d'ajouter un hyperlien pour le menu ?
Et aussi, avec dreamweaver, comment cree t'on d'autre bloc a part le menu, l'en tête, et le corp ?

Merci

K-Kaï · 04/07/2006, 15h06

Bon, je ne suis pas un expert en design web mais j'ai réalisé mon premier design complet recemment (un truc somme toute basique). Pas la peine de vous prendre la tête à comprendre le fonctionnement de dreamweaver pour faire ensuite la mise en page à votre place. Autant apprendre directement à faire la mise en page.

Il y a de très bons sites qui te permettrons d'apprendre les bases de la mise en page avec XHTML et CSS. Puis il y a des forums aussi pour quand tu coinces.

Sinon franchement si toute les images pour ton site sont faites (si tu doits les decouper il y a même un tutoriel sur le net -> Google). Le reste c'est juste passé un peu de tps sur le CSS pour tout mettre en place mais rien de franchement trop sorcier.

27/05/2006, 18h01	#1
Diezo Invité de passage Étudiant Inscription : mai 2006 Messages : 3 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2006 Messages : 3 Points : 1 Points : 1	[Conception] Comment s'y prendre pour créer le désign d'un site ? Salut à tous, Je voudrais savoir comment est-ce que l'on fait pour créer un désign de site juste avec du HTML... Je vais m'expliquer plus clairement, je connais les langages HTML, CSS (les bases), C et un peu le PHP (apparament quand on connait le C le php est pas très compliqué...). Maintenant je n'a jamais crée de site webs et voudrais en crée un pour un artiste (mon frère) pour qu'il puisse y mettre ses différents projets. Il va donc créer lui même le désign mais ceci avec Photoshop seulement, et comment devrai-je faire pour que, à partir ce cette image photoshop du site, je puisse l'intégrer dans mon code HTML ? En regardant les "templates" j'ai bien l'impression que en fait une page internet est un grand tableau qui est ensuite devisé en plusieurs ligne et colonne qui contiennent des petites images du design. Devrai-je donc à partir de son image photoshop la découper en "petit-bout" et l'insérer dans des cases d'un tableau que je créerai sur HTML ?... Enfin bref, je suis un peu perdu En espérant que vous m'avez compris... merci de m'aider. N'hésitez pas à me demander plus d'infos
	00

27/05/2006, 22h27	#2
Nemesys Membre Expert Étudiant Inscription : mars 2006 Messages : 1 910 Détails du profil Informations personnelles : Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2006 Messages : 1 910 Points : 2 086 Points : 2 086	avec son image tu ne feras rien a part s'il a inséré une baniere etc.. tu pourras la recuperer et la placer dans ton code.. mais au moins tu sais que tu dois reproduire ce qu'il a fait sur son image de telle sorte que ce soit visible sur un navigateur. C'est deja un bon projet si tu es debutant ! Pour cela il faut juste un peu d'experience en html/css pour le design et aprés vient le php pour le dynamisme du site ! Voila si tu veux plus de précisions encore n'hesite pas.
	00

28/05/2006, 19h08	#4
Nemesys Membre Expert Étudiant Inscription : mars 2006 Messages : 1 910 Détails du profil Informations personnelles : Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2006 Messages : 1 910 Points : 2 086 Points : 2 086	Oui s'il y a des images dessus il peut les découper (comme une banniere par exemple), mais s'il a écrit des menus a la main avec photoshop sur cette meme image globale il faudra bien qu'il le code sinon ses liens ne marcheront pas ...
	00

28/05/2006, 21h18	#6
Diezo Invité de passage Étudiant Inscription : mai 2006 Messages : 3 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2006 Messages : 3 Points : 1 Points : 1	Oui les titres des menus etc ... seront fait pas mon frère via photoshop. Moi je dois créer les liens, lui permettre d'ajouter des news au milieu de la page ( lui il s'occupe de laisser de la place pour les news ) Et pour tout ca la meilleure solution reste donc de faire une page avec photoshop, puis de la découper encore avec photoshop puis de placer chaque bout dans les cellules du tableau de la page html ?
	00

29/05/2006, 15h39	#8
marsupix Membre éclairé Étudiant Inscription : décembre 2005 Messages : 273 Détails du profil Informations personnelles : Âge : 29 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : décembre 2005 Messages : 273 Points : 317 Points : 317	le mieux est: - créer le design sous photoshop (ce que ton frère a fait) en séparant bien chaque élément graphique de la page sur différents calques (ce que j'espère que ton frère a fait) - enregistrer les "bouts d'images" qui t'interressent. Pour le faire, par exemple tu as des boutons de menus sur un calque: tu ne va pas enregistrer 10 images si tu as 10 boutons. une seule suffit. donc, tu affiche seulement le calque ou il y a le bouton tu fais image > rogner et laisse coché "rogner pixels transparents" et valide. l'image se réduit au bouton affiché. Tu va alors dans fichier > enregistrer pour le web (là tu règle comme il faut pour optimiser le rapport poids/qualité, et tu enregistre ton image. Ensuite tu annule le rognage pour retrouver ton design complet et continuer avec la suite. Pour les fonds de "cadres de news" par exemple, selon le design, tu peut les faire soir tout en css, soit séparé en 3 DIV avec une image pour la bordure du haut, une pour celle du bas, et une autre de 1pixel (ou plus si besoin selon le graphisme) répétée verticlament, pour le contenu de la DIV. Une fois que tu as toutes tes images, fait ta page html, d'abbord sans css, en respectant la sémentique des balises etc... Puis fait ton css en incorporant les images exportées, les couleurs etc... Rappel toi aussi que par rapport au design de base, tu peut faire beaucoup en css en général (couleurs de fond, bordures de cadres, etc...)
	00

30/05/2006, 17h19	#9
Diezo Invité de passage Étudiant Inscription : mai 2006 Messages : 3 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2006 Messages : 3 Points : 1 Points : 1	Merci pour toutes ces infos. Sinon je pensais faire le design de base avec HTML et CSS sans aucune image. Je créer des blocs par ci par la dans ma page en utilisant la balise <div> ( pour le menu à gauche, la banniere, le corps au milieu) et ensuite j'injecte en fond les images de mon frère. Ce serait pas la meilleure solution ?
	00

31/05/2006, 17h06	#10
ner0lph Membre éclairé Florian Développeur Web Inscription : octobre 2005 Messages : 246 Détails du profil Informations personnelles : Nom : Florian Âge : 30 Localisation : France, Moselle (Lorraine) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : octobre 2005 Messages : 246 Points : 332 Points : 332	Si ! Et c'est même la plus souple : le jour où ton frère veut changer le design, il n'aura qu'a refaire les images et les enregistrer en lieu et place de celles existantes. Et du coup, il peut même prévoir plusieurs graphismes (suivant les saisons par exemple, ).
	00

01/06/2006, 23h15	#11
jadey Membre éclairé Inscription : juin 2005 Messages : 1 056 Détails du profil Informations forums : Inscription : juin 2005 Messages : 1 056 Points : 329 Points : 329	bon dsl les amis chui pas un pro non plus mais bon je SAIS que ça n'est pas de cette façon que l'on procede pour creer un site web même si c'est un truc basique. Pour la methode de "decoupage" c tres efficace pour faire un site proffesionnel (on creer generalement un ou deux design sous potoshop en metant sur differents calques les differents elements, ce qui permets a la foi d'etablir une charte graphique et d'avoir des elements de debut (bannieres, logo etc) pour debuter) le code de tes pages il faudra le faire avec un outil de developpement web genre DreamWeaver ou encore FrontPage (sinon tu as le bloc-note mais ça n'est pas reelement ce que l'on peut appeler un logiciel WYSWYG lol) pour faire de l'animation y'a pas de secret fo apprendre a bricoler o moins avec Flash... moi ce que je te conseille de faire puisque ton frere semble se debrouiller ac Photoshop c que tu essaye de trouver un tuto pour DreamWeaver qui n'est reellement pas difficile a utiliser pr faire un site, ça te prendra pas une semaine pour apprendre a t'en servir assez pour creer un site basique... bonne continuation
	00

27/06/2006, 15h27	#13
caro17 Invité de passage Inscription : juin 2006 Messages : 1 Détails du profil Informations forums : Inscription : juin 2006 Messages : 1 Points : 1 Points : 1	Salut ! Je voudrais moi aussi proceder à un decoupage pour mon design. Mais j'ai quelques questions : Les 'bouts' de graphisme quel'on obtiendra après, il suffira juste de les mettre en fond de bloc, et d'ajouter un hyperlien pour le menu ? Et aussi, avec dreamweaver, comment cree t'on d'autre bloc a part le menu, l'en tête, et le corp ? Merci
	00

04/07/2006, 15h06	#14
K-Kaï Membre actif Inscription : avril 2006 Messages : 371 Détails du profil Informations personnelles : Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : avril 2006 Messages : 371 Points : 186 Points : 186	Bon, je ne suis pas un expert en design web mais j'ai réalisé mon premier design complet recemment (un truc somme toute basique). Pas la peine de vous prendre la tête à comprendre le fonctionnement de dreamweaver pour faire ensuite la mise en page à votre place. Autant apprendre directement à faire la mise en page. Il y a de très bons sites qui te permettrons d'apprendre les bases de la mise en page avec XHTML et CSS. Puis il y a des forums aussi pour quand tu coinces. Sinon franchement si toute les images pour ton site sont faites (si tu doits les decouper il y a même un tutoriel sur le net -> Google). Le reste c'est juste passé un peu de tps sur le CSS pour tout mettre en place mais rien de franchement trop sorcier.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email