Bei der Arbeit sehe ich, wie ein Kollege eine Site in Photoshop / Fireworks entwirft. Ich sehe eine andere, die diese Daten aufnimmt, aufteilt und sie mit Dreamweaver von Grund auf neu erstellt.
Es sieht so aus, als würde man zu viel herumalbern!
Ich weiß, dass Photoshop Tabellen-basiertes HTML ausgeben kann und Fireworks divs mit absoluter Positionierung erstellt; beides scheint nicht sehr hilfreich zu sein.
Zugegebenermaßen habe ich nicht viel von (DW / FW) (CS4 / CS3) probiert, seit ich Programmierer geworden bin, also weiß ich nicht, ob neue Versionen dieses Problem lösen, aber wir behandeln die Dinge immer noch doppelt ?
Können wir eine Art von Layout-Metadaten anhängen (dies ist eine Rollover-Schaltfläche, dies ist eine SWF-Datei, dies ist Text, dieses Logo wird "xyz" & lt; h1 & gt; zu Slices, um die Layoutgenerierung zu unterstützen ? Gibt es einige geheime Tools , die diesen Konvertierungsprozess unterstützen? Oder sind wir immer noch auf Dinge von Hand beschränkt?
Die Frustration geht weiter, wenn die von Hand erstellte Seite erneut überarbeitet werden muss, um zu Smarty Templates / Wordpress / generischem CMS zu passen.
Ich gebe zu, dass Designer frei von Systemen sein müssen, um alles zu können, aber die meisten konventionellen Websites haben:
Angesichts der Ähnlichkeit vieler Komponenten sollte nicht einen systematischeren Ansatz für den Übergang von Sliced Designs zu funktionalem HTML bieten?
Oder vereinfache ich die Dinge zu sehr?
-editiert- Mmmmm .... Ich nehme an, ich werde eine Antwort akzeptieren, aber sie waren nicht wirklich das, wonach ich gesucht habe.
Es sieht so aus, als wäre die Gestaltung des DOM ein Stückchen von heiligem Gral ("Es ist nur ein Modell!"), und vielleicht mit all den "groovigen" Dingen, die man mit HTML und Javascript machen kann, wäre es harte Arbeit, aber mit einer Reihe von Einschränkungen (das 960 Zeug sieht interessant aus), einige gut gestaltete Reset-Stylesheets und ein bisschen ... Feenstaub? wir sollten in der Lage sein, den Arbeitsablauf zu verbessern.
Die Tabellen von Photoshop selbst sind ziemlich nutzlos, da stimme ich zu, aber wir können diese Daten sicher nehmen, und dann eine Gruppe von Zellen auswählen und sagen "richtig, das ist ein Text Div, Überlauf: Auto" oder "diese Zellen sind ein Bildblock, style es mit der gleichen Höhe / Breite wie der ausgewählte Bereich ". Zugegeben, hier bei der Arbeit gibt es noch andere Elefanten im Raum, die formell in das Management eingeführt werden müssen, aber einige Teile des Designs & gt; Seitenworkflows scheinen ... bestenfalls ungebildet.
Für mich ist das von Hand ein Vorteil. Sie müssen es nur einmal richtig machen, und wenn Sie speziell für visuelle Attraktivität gehen, haben Sie wahrscheinlich eine Menge Arbeit vor Ihnen, die es browser-freundlich machen ...
Würde gerne andere Antworten hören. Dies ist nur meine Meinung, da ich mehr datengesteuerte als visuell ansprechende Websites mache.
Überspringen Sie Photoshop ganz und lassen Sie Ihre Designer in der HTML-Ansicht einfach nur spotten. Sie werden nicht nur den komplizierten, unangenehmen Prozess, den Sie fühlen, entfernen, sondern Sie werden bessere, widerstandsfähigere Designs erhalten, weil 100% davon auf dem basieren, was in HTML / CSS möglich ist, nicht was in Photoshop möglich ist.
Mehr lesen:
Eine Reihe von Leuten entwirft gerade mit Hilfe von (X) HTML / CSS direkt in den Browser, weil sie genau dieses Problem haben - alles mit Photoshop herumprobieren und dann Code schreiben, nachdem der Kunde sich auf einem statischen Dokument abgemeldet hat Design.
Eine gute Lektüre ist Andy Clarkes Wände kommen nach unten Präsentation.
Omega hat es berührt, aber ich denke, das größte Problem ist die Cross-Browser-Kompatibilität. Wenn all diese Browserquirks nicht existieren (hustInternetExplorercough), wäre das, was Sie vorgeschlagen haben, viel einfacher. Es erfordert jedoch oft eine Menge an Handcodierung, damit es in jedem Browser pixelgenau aussieht.
Eine andere Sache ist feinkörnige Kontrolle. Sicher, Sie können Ihre PSD-Vorlage einfach in Dreamweaver oder whatnot einfügen und haben eine funktionierende Website, aber es wird Hacks und hässliche Dinge wie Tabellen verwenden, damit es funktioniert. Und selbst dann wird es wahrscheinlich nicht ganz so funktionieren, wie du es willst. Du musst dich auch an Dinge wie Barrierefreiheit und SEO erinnern, und Dreamweaver kann dir das einfach nicht geben.
Ich bin der Meinung, dass HTML / CSS so einfach ist, dass ein kompetenter Webdesigner es fließend beherrschen sollte. Photoshop hat seinen Platz für schnelle Look-and-Feel-Experimente, aber ich denke, das vermisst einen wichtigen Schritt: User Experience Design.
Ich entwerfe und prototypiere seit einiger Zeit direkt in HTML. Hier zeigt sich die saubere Trennung von Inhalt und Layout, die CSS bietet. Ich organisiere Seiten in Regionen mit unstyled divs, die es mir ermöglichen, die Seite konzeptionell zu organisieren (d. H. Verwandte Elemente im Code nebeneinander zu halten) und das Nachdenken über das Aussehen zu verschieben. Dies hat den Nebeneffekt, eine ziemlich gründliche Site-Bestandsaufnahme zu machen.
Als nächstes verwende ich CSS, um die divs zu erstellen, was erfreulicherweise auch Wireframes erzeugt (nützlich für Reviews und Papier-Prototyping).
Im letzten Schritt werden visuelle Elemente angewendet: Farbe, Textstile, Grafiken. Ich werde jedes Grafikprogramm benutzen, das ich brauche, um das hübsche zu kochen.
Beachten Sie die Orthogonalität, die dieser Methode innewohnt: Entwickeln Sie Konzepte, dann Layout, dann Aussehen und Gefühl. Dies setzt das harte Denken (konzeptuelle Modelle) voraus und das flüchtigste Denken (Farben / Stile) am Ende. Wenn der Art Director die Farbpalette ändert, müssen Sie nur eine CSS-Datei bearbeiten. Und wenn Sie Ihr konzeptionelles Modell ändern müssen, kann ein Großteil des Layouts und Aussehens / Gefühls wiederverwendbar sein.
Wenn Sie bei dieser Methode Traktion benötigen, können Sie ein Standard-CSS-Gitter wie 960 verwenden ( Ссылка ). Es behandelt eine Menge der arithmetischen und floaty Geschäft, das Layout so eine lästige Pflicht macht.
Zusätzlich zu Rahuls Link oben empfehle ich auch: Ссылка
Es ist ein schöner Traum, aber ich denke, solange Websites in (X) HTML / CSS geschrieben sind, müssen Sie am Ende des Tages immer etwas tun oder alle Arbeiten manuell.
Es gibt nur einen grundlegenden Unterschied zwischen statischen Pixeln in einigen Einkaufssoftware und dynamischen, sich verändernden, expandierenden, inhaltsorientierten textbasierten Websites. Das beste Werkzeug, um diese Lücke zu schließen, ist immer noch ... der menschliche Profi.
Tools wie iWeb (komplett WYSIWYG) oder DW / Fireworks (irgendwo in der Mitte) bringen dich nur so weit oder haben ernsthafte Einschränkungen. Im Falle von iWeb erhalten Sie nur vorgefertigte Vorlagen, bei DW / Fireworks oft nicht optimalen Code. Sie müssen entscheiden, mit welchen Einschränkungen Sie leben können und wann es am besten ist, es manuell zu tun.
Es gibt verschiedene Tools wie Sitegrinder , die genau das tun.
Adobe selbst hat ein Projekt in Labs namens Catalyst , das das tut, was Sie beschreiben und mehr für Flash:
Er nimmt die Slices von Photoshop, ermöglicht es ihnen, ihre Eigenschaften zu ändern und sie in eine funktionierende Flash-Datei zu exportieren. (Rechter Mausklick, Texteigenschaften hinzufügen, es wird zu einem Textfeld ...)
Wenn du dir ihr Video ansiehst (was du solltest - es ist unglaublich), wirst du sehen, dass sie davon täuschen, dass Webseiten bald auf diese Art und Weise gebaut werden.
Bevor Zimbra von Yahoo gekauft wurde, sah es so aus, als würden sie auf ein solches Tool zusteuern, das plattformübergreifendes HTML ausgab, ähnlich wie bei Flash. Nicht mehr. Aber mit den Erschütterungen bei Yahoo, kann solche Software noch aus der Zimbra Asche aufsteigen.
Meiner Meinung nach sollte eine Site in Photoshop verspottet werden, wenn Teile für die Verwendung auf der tatsächlichen Website ausgeschnitten werden, aber die Site vollständig in Photoshop zu gestalten und dann im Web einfach funktionieren soll rückwärts gehen. Eigentlich sollten die beiden parallel gemacht werden.
Kurz gesagt, Grafikdesigner gestalten das Aussehen einer Website, aber Sie brauchen einen Programmierer, Programm es.
Was Sie wahrscheinlich tun sollten, ist, die Designer darin zu schulen, innerhalb eines gut etablierten Rastersystems für ihre Website-Designs zu arbeiten. Wenn sie das Layout als ein Raster / Block-System verstehen können, kann viel interessantes Design innerhalb dieser Einschränkungen erreicht werden. Aber es wird keine direkte Konvertierung von PSD zu HTML sein, da es sich um zwei völlig unterschiedliche Arten der Darstellung visueller Daten handelt.
Es gibt viele Frameworks, die die CSS-Arbeit erleichtern. Einer ist Blueprint CSS
Es gibt viele Vorlagen für die Darstellung des Rastersystems in Photoshop.
Stellen Sie sich das Raster als visuelle Constraint-Ebene vor, dann kann das Design zwischen einer Photoshop-Comp und einer spezifischen HTML / CSS-Implementierung abgebildet werden. Visuelle Elemente müssen in saubere Gitterboxen eingebunden werden. SOme-Elemente oder -Einheiten innerhalb des Gitters können Hintergrundbildern zugeordnet werden. Andere feste Farben oder weißer Raum mit div Behältern, die Inhalt halten.
Mit einem gut verstandenen und Rasterrahmen können Sie pixelperfekten Layouts ziemlich nahe kommen.
Auch gute Designer werden verstehen, wie man Leerraum in einem Design-Modell effektiv nutzt. Wenn es im visuellen Design viele seltsame Schnittlinien und Crossover-Elemente gibt, dann ist das eine echte Herausforderung für die Implementierung. Nur weil Sie sich das visuell vorstellen können, heißt das nicht, dass es einfach in einem Browser zu implementieren ist, ohne bestimmte Kompromisse bei der Funktionsweise von HTML und CSS einzugehen. Stellen Sie sich das Rastersystem als Einschränkungen und eine effektive Möglichkeit vor, Layoutanforderungen zu beurteilen.
Persönlich entwerfe ich es zuerst in html / css, indem ich Rahmen und Hintergrundfarben verwende. Ich nehme dann die PSD und füge die Bilder als Hintergrundbilder oder HTML-Bilder ein. Es ist ziemlich schnell, der Code gehört dir, damit du weißt, was jede CSS-Regel bedeutet, die den Entwicklungsprozess beschleunigt (im Gegensatz zu PS's ungeschnittenen Bildnamen und CSS-Selektoren-Namen)