Au travail, je vois un collègue concevant un site dans Photoshop / Fireworks, je vois une autre prise de ces données, le couper et utiliser Dreamweaver pour reconstruire la même chose à partir de zéro.
Cela semble trop tôt!
Je sais que Photoshop peut produire un HTML basé sur des tables et des feux d'artifice créera des divs avec un positionnement absolu; Ni semble être très utile.
Certes, je n'ai pas beaucoup essayé (DW / FW) (CS4 / CS3) depuis de devenir programmeur. Je ne sais donc pas si de nouvelles versions abordent ce problème de flux de travail, mais sommes-nous encore doubles ?
Pouvons-nous attacher une sorte de métadonnées de mise en page La frustration se poursuit lorsque ladite page construite à la main doit être retravaillé à nouveau pour adapter les modèles Smarty / WordPress / CMS générique.
Je reconnais que les concepteurs doivent être exempts de systèmes pour pouvoir faire quoi que ce soit, mais la plupart des sites conventionnels ont:
Compte tenu de la similitude de nombreux composants, ne devrait pas y avoir une approche plus systématique pour aller de designs tranchés sur HTML fonctionnel?
ou suis-je trop simplifiant les choses?
-edit-
Mmmmm .... Je suppose que je vais accepter une réponse, mais ils n'étaient pas vraiment ce que je cherchais.
Il semble juste que ce soit comme concevoir le DOM est un peu saint Graal ("ce n'est qu'un modèle!"), et peut-être avec toutes les choses "groovy" que vous pouvez faire avec HTML et JavaScript, ce serait un travail difficile, Mais avec un ensemble de contraintes (que 960 choses a l'air intéressant), des feuilles de style de réinitialisation bien conçues et une poussière de fées? Nous devrions être capables d'améliorer le flux de travail.
Les tables de Photoshop par eux-mêmes sont à peu inutile, je suis d'accord, mais nous pouvons sûrement prendre ces données, puis sélectionner un groupe de cellules et dire "à droite, ceci est un texte div, débordement: auto" ou "ces cellules sont Un bloc d'image, style avec la même hauteur / largeur que la zone sélectionnée ". Certes, ici au travail, il y a d'autres éléphants dans la salle qui doivent apporter leurs introductions formelles à la gestion, mais certaines parties du flux de travail de la conception semblent ... non éduqué au mieux. TMS) à Des tranches pour faciliter la génération de mise en page
10 Réponses :
Pour moi, le faire à la main est un avantage. Il vous suffit de le faire correctement une fois, et si vous utilisez spécifiquement un appel visuel, vous avez probablement eu beaucoup de travail en avant de le faire entre naviguer avec le navigateur ...
aimerait entendre d'autres réponses. Ceci est juste ma prise lorsque je prends plus de données que des sites visuellement attrayants.
+1 Pour mentionner la compatibilité entre navigateur.
+1 Pour mentionner la compatibilité entre navigateur, le HTML généré va être une catastrophe ....
+1 humains> machines (pour l'instant ...)
De plus, le code généré, en particulier produit par les outils visuels, n'a pas tendance à être très conformes aux normes. Des choses comme JavaScript discret, la pollution DOM et l'utilisation abusive la plus flagrante de CSS sont des caractéristiques de ces utilitaires. Finalement vous forcer à plonger avec vos mains. Je dirais faire un document solide de la terre et récolter les avantages des bons principes de conception.
oméga l'a touché, mais je pense que le plus gros problème est la compatibilité croisée croisée. Si tous ces bizarreries de navigateur n'existaient pas (CouxInternetExplorerercrough), ce que vous avez suggéré serait beaucoup plus simple. Cependant, il faut souvent beaucoup de codage à la main pour le rendre pixel - parfait dans chaque navigateur.
Une autre chose est le contrôle fin-grain. Bien sûr, vous pouvez simplement afficher votre modèle PSD dans Dreamweaver ou ce que vous avez un site Web de travail, mais il va utiliser des hacks et des objets laids tels que des tables pour le faire fonctionner. Et même alors, cela ne fonctionnera probablement pas entièrement comme vous le souhaitez. Vous devez également vous rappeler des choses comme l'accessibilité et le référencement, et Dreamweaver ne peut tout simplement pas vous donner cela.
Je sais que c'est-à-dire que c'est désordonné, nous avons réinitialisé les feuilles CSS, etc., mais nous savons les problèmes, nous pouvons sûrement contourner de gros problèmes? $ US400 pour le logiciel dans sa nième version, et tout le monde dit "le faire à la main" !? Peut-être que je devrais prendre Adobe et pirater ensemble des ... * .bat fichiers et une buggy JavaScript. Et charger la moitié du prix!
Je suis d'accord avec Assembleur ici. Il est parfaitement possible de ne pas utiliser que des techniques prouvées pour fonctionner dans IE. Le problème est que cela réduit considérablement la flexibilité sur ce que vous pouvez faire. En fonction de ce que vous voulez réaliser à la fin, vous devrez peut-être pirater / peaufiner votre site afin de fonctionner dans chaque navigateur, mais ces modifications et ces hacks sont presque impossibles à généraliser et à emballer dans un convertisseur HTML PSD->.
C'est un beau rêve de Sorta Pie-in-the-Sky, mais je pense que tant que les sites Web sont écrits dans (x) HTML / CSS, à la fin de la journée, vous devrez toujours le faire, la plupart ou tout le travail manuellement.
Il y a juste une faille fondamentale entre les pixels statiques dans certains logiciels de shopping et des sites dynamiques, changeants, en expansion, axés sur le contenu et à base de texte. Le meilleur outil pour combler cette lacune est toujours ... le professionnel humain.
Des outils tels que iWeb (complètement WYSIWYG) ou DW / Fireworks (quelque part au milieu) ne vous obtiennent que jusqu'à présent ou avoir de sérieuses limitations. Vous n'obtenez que des modèles pré-fabés en cas d'iWeb, souvent un code sous-optimal en cas de dw / feux d'artifice. Vous devrez décider quelles limitations vous pouvez vivre et quand il est préférable de le faire manuellement.
Un certain nombre de personnes de nos jours conçoivent directement dans le navigateur à l'aide de (x) HTML / CSS en raison de ce problème exact - tout ce qui vous échappe avec Photoshop, puis au code après avoir obtenu le client à signer sur une statique Conception.
Une bonne lecture est Andy Clarke's Les murs viennent tomber présentation.
Il existe plusieurs outils tels que SiteGrinder qui fait exactement cela.
Adobe eux-mêmes a un projet de laboratoire appelé catalyseur qui fait ce que vous décrivez et plus Pour Flash:
Il faut les tranches de Photoshop, vous permet de modifier leurs propriétés et de l'exporter vers un fichier flash de travail. (Boîte de clic droit, ajouter une propriété de texte, il devient un champ de texte ...)
Si vous regardez leur vidéo (que vous devriez - son incroyable), vous verrez qu'ils sont délivrés dans la pensée que des sites Web seront bientôt construits de cette façon.
Avant que Zimbra ait été acheté par Yahoo, on dirait qu'ils se dirigeaient vers un tel outil qui émet une plate-forme multiplate-forme de plate-forme similaire à ce que Catalyst est pour Flash. Pas plus. Mais avec les bouleversements à Yahoo, un tel logiciel peut encore se lever des cendres de Zimbra.
À mon avis, un site doit être dissimulé dans Photoshop si nécessaire, les pièces étant coupées pour une utilisation sur le site actuel, mais pour concevoir le site complètement dans Photoshop, veuillez alors le faire fonctionner sur le Web est juste en y retourne en arrière. Vraiment les deux devraient être faits en parallèle.
En bref, graphistes conception l'aspect d'un site Web, mais vous avez besoin d'un programmeur pour programme it.
Sautez tout à fait de Photoshop et faites simplement que vos concepteurs se moquent directement dans la vue HTML. Non seulement vous supprimerez le processus compliqué et de sentiment maladroit que vous ressentez, mais vous aurez des conceptions plus résilientes, car 100% d'entre elles seront basées sur ce qui est possible dans HTML / CSS, pas ce qui est possible dans Photoshop.
Plus de lecture:
Très vrai. Il y a tellement de choses qu'ils accomplissent d'une perspective aussi stricte. Bien placé.
Mon opinion est que HTML / CSS est suffisamment simple qu'un concepteur Web compétent devrait être couramment le fluide. Photoshop a sa place pour des expériences rapides et des expériences d'aspect, mais je pense que cela manque une étape importante: conception de l'expérience utilisateur.
Personnellement, je concevons et prototypage directement dans HTML depuis un certain temps maintenant. C'est là que la séparation propre du contenu et la mise en page fournies par CSS brille vraiment. J'organise des pages dans des régions en utilisant des divs non stylés, ce qui me permet d'organiser la page conceptuellement (c'est-à-dire de garder des articles connexes proches les uns des autres dans le code) et de reporter la réflexion sur l'apparence. Cela a l'effet secondaire de faire un inventaire de site assez approfondi.
Ensuite, je vais utiliser CSS pour établir les DIV, ce qui produit joyeusement des images filaires (utiles pour les revues et le prototypage papier.)
La dernière étape consiste à appliquer des éléments visuels: couleur, styles de texte, graphiques. Je vais utiliser n'importe quel programme graphique que j'ai besoin de préparer la jolie.
Notez l'orthogonalité inhérente à cette méthode: Développez des concepts, puis la mise en page, puis regardez et ressentez. Cela met la pensée difficile (modèles conceptuels) à l'avant et la pensée la plus volatile (couleurs / styles) à la fin. Ainsi, lorsque le directeur de l'art change la palette de couleurs, il vous suffit d'éditer un fichier CSS. Et si vous devez modifier votre modèle conceptuel, une grande partie de la disposition et de l'apparence peuvent être réutilisables.
Si vous avez besoin de traction dans cette méthode, vous pouvez utiliser une grille CSS standard comme 960 ( http://960.gs/ < / a>). Il gère beaucoup d'affaires arithmétiques et flottantes qui rend la mise en page une telle corvée.
En plus du lien de Rahul au-dessus, je vous recommande également:
Ce que vous devriez probablement aller pour que les concepteurs puissent travailler dans un système de grille bien établi pour leurs conceptions de sites. S'ils peuvent comprendre la mise en page comme un système de grille / bloc, beaucoup de conception intéressante peut être accompli dans ces contraintes. Mais cela ne sera pas une conversion droite de PSD en HTML, car ils sont deux façons de représenter des données visuelles.
Il existe de nombreux cadres qui facilitent le travail du CSS. L'un est le plans CSS
Il existe de nombreux modèles pour représenter le système de grille dans Photoshop.
http://konigi.com/tools/photoshop-template-bleprint -css-comps
Pensez à la grille en tant que couche de contraintes visuelles, la conception peut alors être cartographiée entre une compilation Photoshop et une implémentation spécifique HTML / CSS. Les éléments visuels doivent être délimités dans des boîtes de grille propres. Certains éléments ou unités de la grille peuvent être mappés sur des images de fond. D'autres couleurs solides ou espace blanc avec des conteneurs de div des conteneurs tenant le contenu.
Avec un cadre bien compris et grille, vous pouvez obtenir assez près des mises à pied parfaite des pixels.
En outre, de bons concepteurs comprendront comment utiliser l'espace blanc efficacement dans une maquette de design. S'il y a beaucoup de lignes d'intersection étrange et d'éléments de croisement dans la conception visuelle, cela présente un véritable défi pour la mise en œuvre. Ce n'est pas parce que vous pouvez imaginer visuellement cela ne signifie pas qu'il est facile à mettre en œuvre dans un navigateur sans faire de certains types de distribution pour le travail HTML et CSS. Pensez au système de grille comme des contraintes et un moyen efficace de juger des exigences de mise en page.
Personnellement, je le dessine en HTML / CSS en utilisant des bordures et des couleurs d'arrière-plan. Je prends ensuite le PSD et insérez les images comme images d'arrière-plan ou images HTML. C'est assez rapide, le code est à vous, vous savez donc que chaque règle CSS signifie qui accélère le processus DEV (par opposition aux noms d'image tranchés maladroits de PS et les noms Selectors CSS)
En théorie, tu as raison. Mais s'il s'agissait de tels sites, des sites Web comme psd2html.com n'existerait pas.
@MusicFreak: C'est ça que j'ai raison dans la pratique que je lutt avec. Peut-être que des sites comme ceux-ci ont des outils développés en interne pour traiter des modèles de conception de site communs.