Design, photoshop et CSS...

Bonjour à tous,
Je bricole dans tous les sens (Photoshop, flash, CSS, PHP etc.) mais j'ai beaucoup de mal à synthétiser mes (modestes) connaissances pour réaliser un site visuellement correct.

Surtout une question m'obsède :

Comment importer dans une page web un design sympa exclusivement réalisé dans Photoshop ? J'ai lu à droite et à gauche des avis contradictoires : découper avec l'outil tranche de Photoshop (puis importer dans ma page les éléments en tant qu'image) ou bien utiliser les CSS (méthode a priori à la mode)... bref je m'y noie un peu.

1- En utilisant les CSS, mon design ne sera pas intégré en tant qu'image mais bien en tant que background ? C'est ça ?

2- Avec les CSS, faut-il intégrer l'ensemble de la maquette d'un coup (CSS "conteneur" ?) ou bien en découper des parties que je placerai au millimètre dans chaque bloc afin de reconstituer le tout ?

3- Si je réalise un design dans Photoshop comment traiter les zones réactives et plus particulièrement les boutons ? Car à ma connaissance je peux simplement les dessiner dans Photoshop et pas créer de liens. Faut-il prévoir de réaliser ces boutons avec les CSS ?

Voilà, j'ai essayé de me faire comprendre au mieux avec mon vocabulaire... si quelqu'un pouvait me donner quelques pistes de réflexion. Merci !

JPV56

Salut,

1: ton desing sera intégré en tant qu'images, donc tu récupères des images que tu dois mettre dans l'html. En découpant ta maquette tu dois récupérer les zones intéressantes de ton design comme les dégradés, mais aussi les zones qui se répètent (ombres sur les côtés par ex ou un background spécifique), et les boutons dans les deux états (s'il y en a).

2: Je dirais de tout découper au pixel et de le placer avec le CSS

3: Tout à fait, par exemple pour les boutons plusieurs méthodes son possibles comme celle des portes coulissantes. Si tu n'as pas les bases en CSS et en HTMl je te conseille les nombreux tutoriaux d'alsacréations

Bonne chance et courage !

Bonjour,

Avant de vouloir réaliser un design, il serait bien de faire une page HTML (adaptable par la suite) histoire de "voir comment ça marche" et d'essayer d'implémenter les éléments du design via CSS (qui n'est pas une mode).

Photoshop n'est pas un outil pour créer des sites web, c'est un outil pour créer des images qui pourront éventuellement servir au design d'un site.

Bonjour et bienvenu sur le Forum,

Pour y voir un peu plus clair, il est tout à fait possible de soumettre ton design et d'expliquer comment tu comptes l'intégrer.
Cela te permettra d'avoir différents avis sur la réalisation technique d'une part et d'éviter quelques probables erreurs.

Merci à tous pour vos conseils.

Donc si je comprends bien je peux utiliser Photoshop (ou logiciel équivalent) pour créer un modèle graphique que je découpe (outil tranche) et que j'intègre dans le HTML de ma page ? J'avais pourtant lu quelque part qu'il fallait éviter depuis le web 2.0 ces découpes et privilégier les CSS afin de générer du code propre et fonctionnel...

Auriez-vous des livres à me conseiller en matière de design et d'intégration web ? Et si possible des livres abordables pour un "débutant".

Merci !

JPV56

Ces découpes peuvent (et devraient) être ajoutée via CSS.

Je pense que tu peux te tourner vers la section "Apprendre" du site. Il y a quelques tuto pour débutant (et plus) :
- Construire un site sans tableaux
- Initiation au positionnement en CSS
- Initiation au positionnement CSS (partie 2)
- Réalisation d'un design complet (XHTML / CSS) en 5 étapes
- Aligner des éléments sans tableaux

Pour les livres, tu peux également conslter le site, qui offre depuis peu une section dédiée.

Je te remercie pour ces informations.
A bientôt sur le forum et toutes mes félicitations à Alsacreations ! (hier impossible de se connecter, j'ai eu peur).

JPV56

jpv56 a écrit :
Comment importer dans une page web un design sympa exclusivement réalisé dans Photoshop ?

Cette étape correspond à une activité professionnelle que l'on nomme intégration web (en français) ou front-end development (en anglais, quand on ne l'inclut pas dans le lot du webdesign en appelant ça «CSS coding»).

L'intégration d'un design demande une bonne connaissance de HTML et CSS, un minimum d'expérience, et pas mal de temps (autant que pour la création des maquettes graphiques, pour donner un ordre de grandeur).

Donc il ne s'agit pas d'utiliser un outil intégré à Photoshop qui va automatiser la tâche. Tout simplement parce que la tâche n'est pas automatisable. Si on veut produire un code de qualité, cela demande de l'expérience et des jugements humains.

Ok merci pour les encouragements lol.
Donc c'est râpé pour tout amateur qui bosse le jour et qui refuse d'y passer des nuits blanches !
Tant pis, je me satisferai de mes modestes connaissances

jpv56 a écrit :
Donc c'est râpé pour tout amateur qui bosse le jour et qui refuse d'y passer des nuits blanches !

Disons qu'il vaut mieux apprendre HTML et les rudiments de CSS avec autre chose en tête que l'intégration d'un design complexe. Réaliser des pages simple avec un peu de mise en forme, puis s'amuser à apprendre des choses plus complexes. Et une fois cette petite expérience acquise, on peut s'attaquer à une intégration un peu plus ambitieuse.

Il y a une grande place pour les autodidactes et les amateurs dans le domaine de la conception web. Certains pros (la plupart?) sont d'ailleurs des amateurs tellement passionnés qu'ils ont acquis des compétences professionnelles. D'autres amateurs, moins passionnés, évitent de se lancer des défis trop importants, et s'amusent/arrivent à leurs fins.

Fonctionner dans l'autre sens (partir d'un design complexe et bricoler une intégration) risque d'être plus frustrant qu'intéressant.

Bonjour,
Oui ton analyse est lucide et logique.
Je vais me contenter de commencer au raz des pâquerettes et d'apprendre ou de consolider les fondamentaux. Après on verra jusqu'où je suis capable d'évoluer.
Déjà, je viens de commander deux bouquins dont j'ai trouvé les références ici. Merci Alsacreations !

++ et bonne journée.

JPV56