Neulich sagte ein Freund von mir etwas, das meine Aufmerksamkeit auf sich zog: Ich versuche zu lernen, wie man eine PSD schneidet. Es ist eine einfache Aussage. Sobald er es sagte, wusste ich genau, worüber er sprach, und doch war da etwas, was nicht ganz richtig war.
Als ich mein Zögern sah, antwortete mein Freund mit der Frage: schneiden wir immer noch PSDs? Tolle Frage! Für Anfänger ist Jargon nicht nur Jargon, sondern impliziert einen Prozess und schlägt eine Aktionsmethode vor. Aus diesem Grund ist es häufig für fortgeschrittene Entwickler hilfreich, ihre Begriffe auf eine Weise zu definieren, die für andere sinnvoll ist. Heute werden wir uns mit der Theorie befassen, die hinter der Umwandlung einer PSD in eine Webseite steht, und mit einer Diskussion über die Höhen und Tiefen des Designs im Browser enden.
Unsere Beispieldatei
Wir werden heutzutage nicht wirklich eine PSD in HTML / CSS konvertieren. Wir diskutieren lediglich das Wie und Warum, damit Sie den typischen Ansatz der heutigen Webdesigner vollständig verstehen können.
Ich brauchte eine PSD, um im gesamten Artikel zu referenzieren, also habe ich mir die fantastische kostenlose Creative Studio Minimal-PSD von GraphicsFuel.com besorgt.
Was ist Schneiden?
Das erste, worüber wir reden sollten, ist, was es bedeutet, zu schneiden? eine PSD. Kurz gesagt, der Begriff bedeutet einfach, Ihr Photoshop-Dokument in Stücke zu zerlegen, die dann auf dem Webserver angezeigt, von HTML in die Reihenfolge gebracht und von CSS gestylt / positioniert werden.
Auf einer spezifischeren Ebene kann das Aufteilen auf bestimmte Werkzeuge in Photoshop verweisen. Mit dem Slice-Tool können wir unser Dokument in kleine Teile aufteilen. Grundsätzlich zeichnen wir einfach ein Rechteck um jedes Objekt, das wir in ein einzelnes Bild teilen möchten.
Warum schneiden?
Die Schneidewerkzeuge in Photoshop dienen lediglich der Bequemlichkeit. Es gibt eine Menge großartiger Webdesigner, die sie niemals berühren, und daran ist nichts falsch.
Hinter den Schnittwerkzeugen steht das Ziel, das Speichern einer Reihe von Bildern zu vereinfachen, sowohl für die erste Erstellung als auch für die langfristige Erstellung von Überarbeitungen. Im Grunde sparen Sie sich die Mühe, jede Portion manuell herauszuschneiden und zu speichern.
Obwohl der Prozess eine Art Schmerz ist, muss ich zugeben, dass eine gut geschnittene PSD etwas Schönes ist. Hier ist ein klares Beispiel, bei dem ich mehrere Elemente habe, die als Bilder gespeichert werden müssen. Ohne Schneiden würde jeder von ihnen einen Ernte- und Einsparungsprozess darstellen, den ich durchlaufen muss.
Wenn sie in Scheiben geschnitten werden, kann eine einzige Aktion "Für Web speichern" alle diese Slices in eigenständige Bilddateien konvertieren. Dies reduziert Ihre Zeit beim wiederholten Zuschneiden und Speichern, wenn Sie mit einer einzigen Photoshop-Datei als Quelle arbeiten.
Machen Sie das Schneiden weniger saugen
Wenn Sie sich noch nicht sicher sind, ob Sie die Photoshop-Schneidewerkzeuge verwenden möchten oder der Meinung sind, dass dies alles eine große Zeitverschwendung ist, sollten Sie unseren Artikel mit dem Titel "So machen Sie das Schneiden" weniger scheiße: Tipps und Tricks zum Schneiden einer PSD.
In diesem Artikel erkläre ich ausführlich den Vorgang des Schnittens und wie alle Schnittwerkzeuge von Photoshop funktionieren. Am wichtigsten ist jedoch, dass Sie einige gute Tipps erhalten, wie Sie den Prozess des Schneidens wesentlich verbessern können. Dinge wie Layer-basierte Slices und das Ausblenden von Auto-Slices tragen dazu bei, dass dies zu einem erträglichen Prozess wird.
Warum Slicing Old School ist
Das ist also das Schneiden. Nun, da Sie wissen, worum es geht, ist es an der Zeit zu erkunden, wie sich dieser Prozess im Laufe der Jahre so verändert hat, dass das Aufteilen von Slicing eine grundlegend andere Tätigkeit ist als früher.
Es hat einmal niemand CSS benutzt (ich weiß, der Horror!). Selbst wenn CSS kam, waren die Tools, mit denen es Webdesignern zur Verfügung stand, im Vergleich zu dem, was wir heute kennen, ziemlich begrenzt.
Infolgedessen verwendeten Websites, die versuchten, die Grenzen zu überschreiten, indem sie nicht wie Mist aussehen, eine Menge Bilder. Jedes Mal, wenn ein Design eine benutzerdefinierte Schriftart, einen einfachen Verlauf, einen Schatten oder eine abgerundete Ecke enthielt, musste ein Bild verwendet werden, um den Effekt im Browser abzurufen.
Folglich war das Schneiden eine große Sache. Wenn Sie ein Photoshop-Modell einer Website erstellt haben und sich für eine ästhetische Vereisung entschieden haben, die vor dem minimalen Kick, auf den wir jetzt gerade gehen, riesig war, mussten Sie jeden Teil Ihres Designs in winzige Teile schneiden Sie haben dann wahrscheinlich HTML-Tabellen zum Rekonstruieren verwendet. Brutal richtig? Vor allem, wenn man bedenkt, dass wir alle erstaunlich langsame Webverbindungen hatten, so dauerte es lange, bis alle Bilder geladen waren.
CSS tötet das Bild
Als sich CSS weiterentwickelte und wuchs, tauchte im Webdesign ein neuer Trend auf: imageless design. Wenn Sie sich vor ein paar Jahren in Design-Blogs umgesehen hätten, würden Sie eine Menge Artikel mit dem Titel "Erstellen eines ausgefallenen Buttons ohne Bilder" sehen. Bis heute sehen Sie solche Titel immer noch populärer, da die Leute mit CSS unglaubliche Dinge vollbringen.
Dieser Trend wäre ohne die erstaunlichen CSS-Funktionen, die wir jetzt genießen, nicht möglich. Plötzlich können Sie Ecken abrunden, Schatten hinzufügen, mehrere Hintergründe implementieren, Farbverläufe erstellen, benutzerdefinierte Schriftarten verwenden und vieles mehr mit reinem Code. Das allgemeine Ziel vieler Webdesigner ist es nun, CSS zu nutzen und so wenig Bilder wie möglich in unserem Markup zu verwenden. Imageless? ist nicht unbedingt etwas zu erreichen (man braucht fast immer ein paar Bilder), sondern strebt danach, was Sie bedeutet allgemein möchten so nahe wie möglich an den Menschen herankommen und dabei die Unterstützung hoch halten.
Vor- und Nachteile von Imageless Design
Dieser Trend geht mit seinen Höhen und Tiefen einher. Der Nachteil ist, dass CSS, trotz der Meinung von Nichtcodierern, eine sehr einfache Möglichkeit ist, ein Design langfristig zu erhalten und anzupassen. Wenn Sie etwas Kleines ändern möchten, z. B. eine Schrift oder eine Hintergrundfarbe, müssen Sie nur ein paar Codezeilen finden / ersetzen und loslegen.Es gibt auch den Vorteil, dass sogar Tausende von CSS-Zeilen so weit minimiert werden können, dass der Einfluss auf die Ladezeiten nahezu vernachlässigbar ist.
Der große, nicht zu unterschätzende Nachteil ist die Kompatibilität. Mit Bildern waren PNGs eigentlich das einzige, worüber wir uns Sorgen machen mussten (abgesehen von den Ladezeiten natürlich). Mit CSS haben wir jetzt Supportfragen auf breiter Front. Browser, die eine neue Funktion unterstützen, verfügen nur über ein eindeutiges Präfix, was sich auf lächerlich wiederholende Codierungen auswirkt. Viele Funktionen sind nur für eine einzelne Browser-Engine verfügbar. Andere werden überall unterstützt, außer IE (einige Dinge ändern sich nicht). es kann ein echtes Chaos sein.
Das ultimative Ziel ist es, das Beste für den Benutzer im Auge zu behalten. Wenn ein Bild für etwas verwendet wird, das für die meisten Menschen den größten Nutzen bringt, versuchen Sie es.
Weniger Bilder, weniger Schneiden
Aufbauend auf dieser Informationsgrundlage können wir uns endlich der Frage stellen, ob Webdesigner noch PSDs schneiden.
Wenn wir uns ein Photoshop-Dokument ansehen, das in eine Website konvertiert werden soll, versuchen wir, Code so oft wie möglich zu sehen. Es ist wie der Moment in der Matrix, in dem Neo sich in der normalen Welt umschaut und plötzlich den Code dahinter sieht. Webdesigner sehen keine Ebenen und Ebeneneffekte, wir sehen divs und CSS-Eigenschaften.
Angesichts dessen, dass dies der Fall ist, ist der Großteil der Arbeit, die mit statischen Entwürfen verbunden ist, eher im Bereich des Wiederaufbaus als beim Schneiden. Anstatt diesen glänzenden Button in Scheiben zu schneiden und als Bild zu verwenden, verwende ich CSS, um ihn von Grund auf neu aufzubauen. Dieser Vorgang wird auf der gesamten Site wiederholt. Oft werden Bilder hauptsächlich für den eigentlichen Inhalt und nicht für das Design verwendet (obwohl es immer noch eine Menge gibt, die Sie mit reinem CSS nicht machen können / sollten).
Entwerfen im Browser
Die Frage, die zweifellos vielen Webdesign-Neulingen in den Sinn kommt, wenn sie über diesen Prozess lesen, ist natürlich: Ist das nicht alles ein bisschen repetitiv? Zuerst entwerfen und erstellen Sie eine Website in Photoshop, Illustrator, Fireworks (ja, ich erinnere mich, dass Fireworks großartig für Webinhalte ist, also schreien Sie mich nicht in den Kommentaren an) oder mit einem anderen Layout-Tool Ihrer Wahl Erstellen Sie den Browser neu und erstellen Sie das, was Sie gerade erstellt haben, mit Code anstelle von Bildern, wo immer dies möglich ist.
Die Antwort ist ein klares Ja. Das Ergebnis ist eine Bewegung von Leuten, die den Entwurfsprozess direkt in den Browser verschieben. Starten Sie im Code, beenden Sie den Code, verwenden Sie Photoshop nur, wenn Sie ein Bild erstellen müssen, und beseitigen Sie diesen sich wiederholenden Unsinn praktisch.
Ich bin alles für diesen Prozess. Es ist extrem schlank und rationalisiert Ihren Workflow wirklich. Leider ist es nicht immer einfach, die kreative Seite Ihres Gehirns dazu zu bringen, mit dieser Methode die besten Ergebnisse zu erzielen. Sarah Parmenter hat sich kürzlich in ihrem Beitrag mit diesem Problem befasst: "Ich kann nicht im Browser entwerfen". in dem sie das "schuldige Geheimnis" enthüllt Auch wenn Photoshop keine gute Möglichkeit darstellt, dynamische und reaktionsschnelle Webinhalte anzuzeigen, die die Kunden heute benötigen, fördert dies mehr Kreativität als direkter Einsatz von HTML und CSS.
Wie gestalten Sie Websites?
Dieser Beitrag ist eine lange Antwort auf eine scheinbar einfache Frage. Unter dieser Frage haben wir jedoch in letzter Zeit Probleme, vom Anfänger bis zum Profi: Was ist der beste Prozess zum Entwerfen einer Website? Sollte sich der kreative Designprozess vom Codierungsprozess unterscheiden oder sollten sie ein und derselbe sein? Sollen wir Mockups in einer Layoutanwendung erstellen und diese dann für den Browser aufteilen oder gibt es einen besseren Weg? Ist Fireworks wirklich die Antwort oder fehlt immer noch eine Lösung?
Ich möchte Ihre Gedanken dazu hören. Wie sieht Ihr aktueller Workflow von Anfang bis Ende aus? Wo fangen Sie mit dem Designprozess an und wie fließt er in eine Live-Website über? Welche Werkzeuge finden Sie auf dem Weg von unschätzbarem Wert? Wie würde Ihr ideales Webdesign-Tool aussehen?