photoshop vers html Fermé

Question

Bonjour 

j'ai créer mon webdesign avec photoshop. je voudrais savoir comment prendre se que j'ai fait sur photoshop et le metre comme webdesign de mon site web. j'ai chercher sur le net mais le seul truc que j'ai trouver c de faire enregistrer pour le web et cella coup mon image en plein de partis et apres je dois les metre partis part partis. ya til une facon plus facile.

merci

wAxxx · Answer

Bonsoir,

ce que tu as mentionné (couper l'image en morceau) est la méthode facile. transformer un PSD en HTML n'est pas facile au débutant. Essayer d'embaucher un freelancer pour vous faire le travail

Sanzu · Answer

Salut,
contrairement à d'autres formes de publication sur Internet on sépare la forme du contenu.
Pareil pour la mise en page.
Contrairement à ce que dit wAxxx HTML et CSS sont assez simple, ils demandent par contre de la pratique.
En effet la publication à partir de photoshop en HTML est pas terrible et si vous avezz le design le principe sera bien de découper le design en 'petits bouts' qui seront plusieurs images à placer dans les différentes zones de votre page.

Ce principe est indispensable car contrairement à certains médias(tv, journaux, livres...) il n'y a pas de dimensions définit pour l'affichage d'une page.
Que la personne ai un écran de 24" en résolution maximale ou sur un mobile avec un écran qui tient dans la main l'affichage est censé resté le même.
Là j'ai pris des exemples extrêmes et ce n'est pas toujours vrai, par contre chaque utilisateur ayant des résolutions différentes(et navigateurs) il faut que le site soit le même pour tous.
Avec HTML et CSS c'est possible.
Cela impliquera: qu'une image de fond doive s'adapter à plusieurs tailles, pour cela on va la répéter(on utilise alors une texture, les côtés bord à bord seront prévus pour 'boucler' afin de rendre un fond homogène).


Commencez à faire le découpage de vos images pour les intégrer petit à petit(outil cutter(k) dans P?otoshop, ou recadrage, voire fireworks si vous avez toute la suite).

Les avantages seront doublés aussi.
rendre la mise en page indépendante du contenu permet:
_de répéter celle ci sur plusieurs pages sans rien avoir à modifier(c'est le principe des feuilles de styles externes (CSS).
Cette indéopendance de l'un par rapport à l'autre permet aussi de changer facilement et rapidement un visuel sans toucher au contenu. C'est ce qui doit être fait si l'on veut faire un site qui s'adapte aux médias comme les smartphones: on utilisera alors plusieurs règles de mise en page: 1 pour la page en dimension écran de bureau, une pour les écrans de plus petite taille qui a forcément une autre ergonomie et dimensions.


Si vous avez des compétences en graphisme apprendre HTML et CSS sera plus aisé. Cette méthode de mise en page est simple et rapide, définit la sémantique et l'organisation des contenus par le biais de repères(balises HTML) et sa présentation par le biais de 'règles' que l'on peut réutiliser à l'infini dans une page avec CSS(couleur/image de fond, typographie, contours, marges, décalages...).

Photoshop vers html

2 réponses

Discussions similaires