2010-01-28 8 views
8

J'apprends dev web et je suis déjà stucked à un moment ..convertir PSD en site

Comment convertir un modèle PSD à un site html/css?

J'ai recadré toutes les parties de l'image et les ai enregistrées dans .gif séparément, mais ensuite? Dois-je les placer manuellement dans un modèle vide dreamweaver? Je pensais qu'il y avait un moyen automatisé de le faire ..

Aussi, j'ai essayé "Enregistrer pour le Web et les périphériques .." mais lors de l'enregistrement, il crée un fichier .html et une seule image qui contient tous les éléments? ! Je m'attendais à plusieurs images pour pouvoir les réorganiser en dreamweaver.

+0

Photoshop n'est pas un outil approprié pour créer une conception Web. Il suppose des choses sur l'impression qui ne fonctionnent plus pour le web. –

+1

Oh, et d'ailleurs: utiliser 'gif' de nos jours est juste une très mauvaise idée. Utilisez 'png' à la place. (Certaines restrictions s'appliquent - mais dans la plupart des cas, 'png' est le chemin à suivre.) –

+0

Selon la FAQ de Stack Overflow (http://stackoverflow.com/faq), vous devriez demander des choses comme ça dans Doctype (http://doctype.com/). – Tae

Répondre

11
  1. Alors que certaines applications de la publicité/fournir l'automatisation du processus de "conversion" du graphique composite mise en page Web que vous souhaitez éviter d'utiliser ces fonctionnalités. Ils vous causeront plus de problèmes qu'ils n'en valent. Surtout si vous allez utiliser CSS pour la mise en page (que je vous encourage fortement). Ce n'est pas pour dire que ces fonctionnalités n'ont pas certaines utilisations valides limitées (plus sur ce point au point 2), mais juste qu'elles ne vont pas magiquement générer votre site à partir d'un graphique.
  2. Pour utiliser "Enregistrer pour le Web ...", vous devez utiliser l'outil Couper pour découper l'image dans les différentes images dont vous avez besoin pour la mise en page. Ensuite, quand vous enregistrez pour le web et les deices avec html, il exportera le html/css et les images. Encore une fois, ce n'est pas magique et il y a de fortes chances que vous ayez à refaire complètement ce que vous avez fait pour vous - ce qui rend inutile une partie de la mise en page (disons un seul menu).

Il n'y a pas un moyen entièrement automatisé de le faire, en général parce qu'en fonction de ce que vous avez besoin de la mise en page, vous devez procéder de différentes façons et théoriquement possible de prendre en compte tous les possibles. Les exigences potentielles dans une petite interface graphique d'exportation ne sont pas vraiment réalisables.

L'essentiel est de faire cela, vous devez apprendre le HTML/CSS. Et plus vous en apprendrez, plus vous détesterez Dreamweaver (au moins en "mise en page"). Garaunteed.

9

Oui, la conception web ne fonctionne pas par magie. La bonne façon de faire est de écrire manuellement le code réel qui positionne les éléments, non seulement les claquer en place dans Dreamweaver. Il y a beaucoup de bons tutoriels là-bas, vérifier ces par exemple:

+0

Merci, je vais regarder ces liens. – user251356

+0

+1: Merci; J'allais poser une question sur "Comment puis-je convertir un PSD, découpé ou non, en une page Web idiomatique qui ne soit pas centrée sur la table et n'utilise pas" display: table-cell "pour simuler des tableaux avec DIV's Je pourrais encore poser une question, mais je pense que le deuxième lien fournit un lien supérieur qui répond à ma question – JonathanHayward

8

Bienvenue dans la réalité. Vous devrez vous trancher et vous couper en dés (bien, découper et découper l'image vous-même, mais ne vous découpez pas vous-même, peu importe combien vous voulez), puis placer chaque partie individuelle dans votre HTML ou votre modèle.

+1

+1 pour l'amour réticent de la profession :-) – prodigitalson

6

This peut vous aider, il vous guide dans le processus.

5

Il y a un certain nombre de services automatisés qui convertissent PSDs pour vous:

Cependant, vous pouvez également envisager une approche basée sur le service. Il y a une communauté florissante de trancheurs professionnels (il suffit de google "psd to html" et vous verrez ce que je veux dire).

Vous pouvez également essayer de redessiner d'un programme ou d'un cadre tel que:

Cela dépend vraiment de votre budget, vos délais et vos compétences. Je suis un grand partisan de la compréhension de quelque chose de vraiment bien avant d'essayer de l'automatiser. Ainsi, comme l'ont dit les autres affiches, trancher à la main (scratch) est très utile, surtout si vous ne le comprenez pas déjà bien. Cependant, vous pourriez ne pas prendre soin d'investir le temps nécessaire pour parvenir à une bonne compréhension du sujet. Et, c'est parfaitement correct aussi.

Je pense qu'en fin de journée, il n'y a pas de solution "correcte". Différentes personnes ont des exigences différentes qui vont changer le choix.

+1

Thanks @ Homer6, http://converxy.com travaillé pour moi –

Questions connexes