Ich sehe, dass viele Designer schöne Webdesign-Arbeiten in Photoshop erstellen, aber jetzt, mit der Einführung von CSS3, wenn sie das auf HTML und CSS ändern wollen, fangen sie einfach bei Null an und erstellen etwa 80 % des endgültigen Designs mit CSS3.
Sie verwenden beispielsweise Rahmenradius, Deckkraft, Hintergrundverlauf, Rahmenschatten und Textschatten und andere CSS3-Regeln, um das zu erhalten, was sie in Photoshop erstellt haben. Oft importieren sie nur ein Bild aus Photoshop, das eher einer Pinselarbeit oder einem Logo oder ähnlichem ähnelt.
Meine Frage ist, sollten Webdesigner Photoshop noch verwenden, um etwas zu erstellen, von dem nur 20% für sie nützlich wären?
Kann ein Webdesigner das gesamte Design direkt in HTML & CSS erstellen, ohne sich die Mühe zu machen, eine weitere mittlere Ebene der Designerstellung in Photoshop hinzuzufügen, und dann einfach die verbleibenden Elemente dort erstellen?
Muss allen widersprechen. Photoshop ist kein Tool zum Entwerfen einer Website. Es ist ein Werkzeug zum Skizzieren einer Website. Die Website sollte immer noch in dem Medium entworfen werden, in dem sie sich befindet – was in der Regel CSS, HTML und JS ist.
Das bedeutet nicht, dass Sie Photoshop nicht verwenden. Aber das müssen Sie sicher nicht.
Ich bin ein großer Fan davon , Kunden niemals Website-Designs in Photoshop zu zeigen. Es ist nicht das Medium, in dem die Website leben wird. Photoshop-Kompositionen bieten keine Möglichkeit, Interaktionen, Geräteunterschiede, Browser-Eigenheiten, Anklickbarkeit, Reaktionsfähigkeit usw. zu kommunizieren.
Zugegeben, in der Realität braucht man noch viel Zeit, um JPG-Mockups zu zeigen. Bußgeld. Verwenden Sie dazu Photoshop. Aber nehmen Sie dann nicht diese PSD-Datei und schneiden Sie sie in eine Website. Das machte 1999 Sinn. Heute nicht mehr so sehr. Nehmen Sie stattdessen diese PSD und verwenden Sie sie einfach als Richtlinie. So sollte die Website ungefähr aussehen, aber berücksichtigen Sie die Tatsache, dass sie in CSS/HTML/JS erstellt wurde, und passen Sie sie nach Bedarf an.
Also um die Frage zu beantworten:
Kann ein Webdesigner das gesamte Design direkt in HTML & CSS erstellen, ohne sich die Mühe zu machen, eine weitere mittlere Ebene der Designerstellung in Photoshop hinzuzufügen, und dann einfach die verbleibenden Elemente dort erstellen?
Ja. Das kann man durchaus. Ich habe das parallel mit PSD-Designern gesehen. Das größte Problem mit dem PSD-Ansatz ist, wenn Sie in einem agilen Team arbeiten. Umfangreiche Dateien, die für die Dokumentation verwendet werden (z. B. PhotoShop), werden zu einer ziemlich großen Belastung für den Agile-Prozess und fügen am Ende mehr Probleme hinzu, als sie lösen. Wir neigen dazu, umgekehrt zu arbeiten ... wir skizzieren in PS nach Bedarf und entwerfen und bauen dann in HTML/CSS/JS. Wenn wir dann schnelle visuelle Aktualisierungen für Besprechungen vornehmen müssen, machen wir einfach einen Screenshot des Markups der funktionierenden Präsentationsebene, schlagen es in PhotoShop ein und optimieren es schnell.
** BEARBEITEN **
Neuer Kunde?
Absolut - Wenn Sie ein Design für einen NEUEN Kunden/eine NEUE Website anbieten. Laien haben es im Allgemeinen schwer, zu sehen, was in deinem (meinem) Kopf vorgeht. Wireframes, Zeichnungen usw. schneiden es auch nicht immer - streichen Sie das - sie schneiden es nicht. Ich höre häufiger „Ich dachte, es würde X machen“ von Kunden, wenn sie nur einen WF oder eine Skizze haben, als ich, wenn sie ein Mockup mit ihrem Logo, Fotos, Unternehmensschriftarten und einer Benutzeroberfläche erhalten.
Jedes andere Szenario:
Vielleicht nicht - Wenn Sie vorhandenes HTML/CSS/JS verwenden können, das den Jobanforderungen entspricht, oder wenn Sie Inhalte eines vorhandenen Kunden bearbeiten, ist es besser, nur im Code zu arbeiten. Wenn nicht, werden Sie wahrscheinlich eine Menge Zeit in Photoshop verschwenden, um nur sehr wenig zurückzugeben. Es gibt diese Fälle (wie @DAO1 erwähnt), in denen ein Screenshot und eine Optimierung über Photoshop einen Genehmigungsprozess oder das Ausarbeiten einer Idee oder drei wirklich beschleunigen können.
** Ende **
Ich sage ja -
Es ist viel einfacher, Ihre Designs mit einem Bild zu verkaufen (und viel schneller Kompositionen zu erstellen) – selbst wenn es vereinfacht ist. Das ist, wo PS für meine Jobs am hilfreichsten ist.
Ich baue auch eine Ebene mit einem Rastersystem ein, damit ich sehen kann, wie die Dinge angeordnet sind, und sie schnell dorthin ziehen kann, wo ich sie brauche. Auch dies hilft bei Kompositionen und vom Kunden angeforderten Änderungen.
Wenn Sie eine Photoshop-Bibliothek mit Ihren häufig verwendeten Elementen führen: vektorbasierte Eingabefelder mit abgerundeten Ecken, Ihr(e) Raster, „Logo goes here“-Feld ... alles in Ebenen einer einzelnen Datei oder mehrerer Dateien (Ihrer Wahl) - Sie können Homepages und Innenseiten in einem Bruchteil der Zeit erstellen, die für die Programmierung benötigt wird.
Das Beibehalten einer gemeinsamen CSS-Datei (mit gängigen Einstellungen) hilft auch beim Codieren, aber ich sehe keinen Wert darin, PS aus dem Arbeitsablauf zu eliminieren - unabhängig davon, wie robust CSS wird.
Können Sie garantieren, dass 100 % Ihrer Benutzer Browser haben, die Ihre Website genau so sehen, wie Sie (oder noch wichtiger, der Kunde) es sehen wollen? Nein? Dann wie viel Prozent? 90%? 80%?
Können Sie sicherstellen, dass es sich gut verschlechtert, sodass die alternative Version, die von den verbleibenden 10 % (20 %? 40 %?) gesehen wird, akzeptabel ist?
Wenn eines oder beide dieser Probleme ein Problem darstellen, benötigen Sie etwas Photoshop.
Dinge zum Nachdenken:
Es wird viel investiert, um diese ausgefallenen Designs ins Internet zu stellen. Zumindest für die komplexeren. Photoshop hilft dabei, das Endergebnis schneller zu sehen.
Für einen Designer in seinem Job ist das Erstellen eines Modells in Photoshop normalerweise schneller und gerechtfertigt, da Sie nicht den ganzen Tag damit verbringen, HTML und CSS3 zu hacken.
Wie Sie bereits erwähnt haben, können sie 80% davon in CSS3 erledigen, aber dann benötigen sie irgendwann Photoshop.
Ich würde argumentieren, dass Sie auf ein Mock-up in Photoshop verzichten, wenn Sie der Designer und Entwickler sind und es Zeit sparen würde, ansonsten machen Sie immer ein Mock-up in Photoshop.
Dawson
b01