So machen Sie das Schneiden weniger zum Saugen: Tipps und Tricks zum Schneiden einer PSD
Ich habe ein schmutziges kleines Geheimnis, ich hasse es, Photoshop-Dateien zu schneiden. Damit meine ich nicht, dass ich es hasse, PSD-Comps in Websites umzuwandeln, sondern dass ich die Slicing-Tools von Photoshop hasse. Der gesamte Vorgang lässt meine PSD beschäftigt, überladen und übermäßig kompliziert aussehen. Daher überspringe ich sie normalerweise vollständig und beschließe stattdessen, Bilder manuell zuzuschneiden und nach Bedarf einzeln zu speichern.
Um dieser Tendenz entgegenzuwirken und zu versuchen, die wahre Nützlichkeit der Schneidewerkzeuge von Photoshop zu erkennen, habe ich mich auf die Mission gemacht, alle Feinheiten der Schneidfunktion kennenzulernen. Im Folgenden finden Sie eine Sammlung von Tipps und Tricks, die sich aus dieser Reise ergeben haben. Hoffentlich lernen Sie ein oder zwei Dinge, die Sie nie gewusst haben!
In Photoshop gibt es drei Arten von Slices
Drei Arten von Scheiben!? Dies war eines der interessantesten und überraschendsten Dinge, die ich gelernt habe. Nachdem ich nicht wirklich zu viel mit den Schneidefunktionen experimentiert hatte, dachte ich nur, dass es nur einen Weg gibt, dies zu tun. Ich hab mich geirrt.
Die drei verschiedenen Arten von Slices sind User Slices, Auto Slices und Layer Based Slices. Lassen Sie uns zunächst über die beiden sprechen, mit denen Sie wahrscheinlich vertraut sind: User Slices und Auto Slices. Diese sind sehr eng miteinander verbunden, tatsächlich schafft einer den anderen.
Wie Sie wissen, greifen Sie zum Schneiden einer PSD zunächst auf das Slice-Werkzeug (C) und zeichnen ein Feld um den Bereich, den Sie als eigenständiges Bild exportieren möchten. Durch Hinzufügen von Slices zu allen Bereichen Ihres Comps, für die Sie dies tun möchten, können Sie schnell und einfach mehrere Bilder gleichzeitig optimieren und exportieren.
Wenn Sie ein Slice ausführen, sollten Sie so etwas wie das unten gezeigte Ergebnis erhalten.
Was ich hier getan habe, ist ein Kästchen um das Logo oben auf der Seite zu zeichnen. Diese eine Aktion hat sowohl ein User Slice als auch mehrere Auto Slices erstellt. Wenn Sie ein Slice erstellen, geht Photoshop davon aus, dass Ihr Endziel darin besteht, die gesamte PSD in eine Reihe von Slices umzuwandeln. Ich persönlich finde diese Annahme ziemlich ärgerlich, und wir werden später diskutieren, wie wir sie umgehen können. Im Moment sollten Sie nur wissen, dass Photoshop aufgrund dieser Annahme die Kanten Ihres Slice über die gesamte PSD erstreckt und dabei automatisch mehrere andere Abschnitte erstellt. Dies ist im obigen Bild dargestellt.
Tricks für die Arbeit mit Benutzer- und Auto-Slices
Während wir uns mit dem Thema Benutzer- und Auto-Slices befassen, gehen wir einige der offensichtlichen und nicht so offensichtlichen Funktionen durch, damit Sie wirklich ein Gefühl dafür bekommen, welche Tools und Optionen Ihnen zur Verfügung stehen.
Slices verschieben und bearbeiten
Sobald Sie ein Slice erstellt haben, sollten ähnliche Steuerelemente wie für eine kostenlose Transformation angezeigt werden, mit denen Sie es verschieben und bearbeiten können. Sie können auch das Slice-Auswahlwerkzeug verwenden, um sicherzustellen, dass Sie nur aktuelle Slices bearbeiten und keine neuen erstellen. Dieses Werkzeug finden Sie unter dem Slice-Werkzeug im Flyout-Menü.
Konvertieren von Auto Slices in User Slices
Während des gesamten Slicing-Prozesses werden Auto Slices kontinuierlich erstellt und aktualisiert und unterscheiden sich von Benutzer-Slices. Später werden wir uns ansehen, wie sie als Dateien exportiert oder beim Export ignoriert werden. Im Moment schauen wir uns jedoch an, wie ein Auto Slice in ein User Slice umgewandelt wird.
Der Prozess ist sehr einfach. Zuerst müssen Sie das automatische Slice mit dem Slice Select Tool auswählen. Wählen Sie als Nächstes das Auto Slice aus, das Sie konvertieren möchten, und klicken Sie oben auf die Schaltfläche "Heraufstufen".
Das ist es! Jetzt sollte das Auto Slice seine Farbe ändern, um anzuzeigen, dass es sich jetzt um ein User Slice handelt. Jetzt haben Sie eine bessere Kontrolle über die Größe und den Export.
Scheiben automatisch teilen
Wenn Sie eine Reihe von Objekten haben, die horizontal, vertikal oder sogar in einem Raster verteilt sind, müssen Sie sich nicht die Zeit nehmen, um jede einzelne Einheit zu durchschneiden. Stattdessen können Sie ein Slice erstellen, das alle Objekte abdeckt, und Photoshop anweisen, den Rest zu erledigen.
Machen Sie dazu zuerst Ihr großes Stück, indem Sie eine Box um alle Objekte zeichnen. Klicken Sie dann bei aktiviertem Slice-Auswahl-Werkzeug oben auf der Seite auf die Schaltfläche „Teilen“.
Daraufhin sollte das oben gezeigte Dialogfeld „Slice teilen“ angezeigt werden. In diesem Fenster können Sie schnell zusätzliche vertikale und horizontale Schnitte einfügen. Wenn sie nicht richtig ausgerichtet sind, können Sie sie manuell anpassen, nachdem Sie auf die Schaltfläche "OK" geklickt haben.
Scheiben aus Guides
Viele von Ihnen arbeiten wahrscheinlich viel komfortabler mit Hilfslinien als mit Slices in Photoshop. Die Realität ist, dass beide sehr ähnlich arbeiten, aber das Leitsystem fühlt sich zugegebenermaßen etwas flüssiger an.
Wenn Sie so rollen, passt dies perfekt in einen einfachen Workflow zum Erstellen von Slices. Ziehen Sie einfach die Hilfslinien heraus, um Ihre PSD in Scheiben zu schneiden, und ignorieren Sie die Schneidwerkzeuge vollständig. Wenn Sie fertig sind, wählen Sie das Slice-Werkzeug aus und klicken Sie oben auf die Schaltfläche „Slices from Guides“.
Slices benennen
Eines der nervigen Dinge, die Sie beim ersten Arbeiten mit Slices nerven, ist, dass die resultierenden Dateien beim Exportieren große hässliche Namen enthalten, die überhaupt nicht aussagekräftig sind. Um dies zu beheben, müssen Sie sicherstellen, dass Sie jedes Slice entsprechend benannt haben. Der von Ihnen zugewiesene Name wird beim Export als Dateiname übernommen.
Um ein Slice zu benennen, doppelklicken Sie einfach mit ausgewähltem Slice-Tool auf dessen Inhalt. Dies öffnet den folgenden Dialog.
Beachten Sie, dass Sie hier mehrere Optionen haben, darunter das Festlegen der Farbe für das Slice, das manuelle Eingeben der Abmessungen und das Zuweisen eines Namens. Es gibt auch eine Reihe von HTML-Inhalten wie URL, Ziel usw. Es stellt sich heraus, dass Photoshop Ihre geschnittene PSD als Webseite ausgeben kann. Einige bieten diese Funktionalität an, da die Standardeinstellungen ein tabellenbasiertes Layout erstellen. Sie können diese jedoch auf CSS umstellen.
Jetzt sei nicht zu aufgeregt. Selbst wenn die CSS-Optionen ausgewählt sind, ist Photoshop beim Erstellen einer Website für Sie immer noch ziemlich schlecht. Sie sind viel besser dran, es von Hand zu machen oder es zumindest an Dreamweaver zu übertragen, was bedeutet, dass Sie all diese anderen Optionen vollständig ignorieren sollten.
Ebenenbasierte Slices und warum sie besser sind
Eine der Hauptfunktionen, die das Schneiden für mich viel weniger saugen ließen, sind schichtbasierte Scheiben. Hierbei handelt es sich um eine bestimmte Marke von User Slices, die in mehrfacher Hinsicht überlegen sind.
Wie der Name schon sagt, basieren diese Slices nicht auf einem Feld, das Sie manuell zeichnen, sondern halten sich automatisch an die Grenzen einer Ebene. Um ein schichtenbasiertes Slice zu erstellen, wählen Sie eine Ebene in der Ebenenpalette aus, gehen Sie zum Menü und wählen Sie Ebene> Neues schichtenbasiertes Slice. Beachten Sie, dass dies auch funktioniert, wenn Sie mehrere Ebenen ausgewählt haben. Jede Ebene wird einfach in ein eigenes Slice umgewandelt!
Damit dies richtig funktioniert, müssen Sie natürlich wirklich gut darin sein, wie Sie Ihre Ebenen strukturieren. Sie sollten Ihre Modelle ohnehin als vollständig geschichtete und organisierte Dateien erstellen, damit dies kein Problem darstellt.
Der Vorteil
Einer der Hauptgründe, warum normale Slices so lahm sind, ist, dass sie viel zusätzliche Arbeit verursachen, wenn Sie zurückgehen und Ihre Designs optimieren möchten. Nachdem Sie das Bildmaterial gemischt haben, müssen Sie zurückgehen und alle Ihre Slices verschieben, um sie an das neue Layout anzupassen. Dieser Ärger ist der Grund, warum ich die einzelnen Teile immer nur manuell durch Zuschneiden speichere.
Layer Based Slices sind jedoch tatsächlich ziemlich intelligent. Wenn Sie sich in Ihren Ebenen bewegen, folgen Ihre Slices automatisch. Wenn Sie einen Effekt hinzufügen, der die Grenzen ändert, z. B. ein äußeres Leuchten, wird das Slice erweitert, um ihn einzuschließen. Wenn Sie die Ebene auf 30% ihrer ursprünglichen Größe umwandeln, wird das Slice erneut automatisch aktualisiert!
Offensichtlich gibt es hier ein klares Argument für die Verwendung von Layer Based Slices, wann immer dies möglich ist, da Sie dadurch in der unvermeidlichen Phase des Neugestaltens unglaublich viel Zeit sparen.
Die Unordnung töten
Ein weiteres meiner größten Probleme beim Schneiden ist, dass es eine wirklich überladen aussehende PSD erzeugen kann. Dies ist hauptsächlich auf den Nebeneffekt Auto Slicing zurückzuführen.
Schauen Sie sich als Beispiel das Bild unten an (es ist hier etwas vereinfacht, aber Sie verstehen es). Hier wollte ich eigentlich nur drei Slices erstellen, aber Photoshop hat sich automatisch in zwölf Slices verwandelt!
Ich weiß nichts über dich, aber ich baue keine Webseiten als eine große Sammlung von Bildern, die alle zusammengepfercht sind. Also will ich einfach nicht all diese zusätzlichen Scheiben! Ich werde diese Bereiche nicht in Bilder exportieren, also fügen sie meiner Benutzeroberfläche nur Rauschen hinzu. Wenn ich ein solches Dokument sehe, sind die Slices für mich kein aussagekräftiges Werkzeug mehr.
Um dies zu beheben, können wir das Slice-Auswahlwerkzeug greifen und oben auf dem Bildschirm auf die Schaltfläche „Auto Slices ausblenden“ klicken. Dies macht genau das, was der Name andeutet, und lässt all diese fiesen Auto Slices aus der Sicht verschwinden.
Schauen Sie, wie viel einfacher unser Dokument wird! Die wenigen Scheiben, die wir verwendet haben, sind eindeutig identifizierbar und behalten daher ihre Nützlichkeit. Meiner Meinung nach wird diese Methode zum Anzeigen Ihrer Slices sehr bevorzugt. Dies ist einer der Fälle, in denen Photoshop einfach zu sehr versucht, meinen bevorzugten Workflow vorherzusagen, und am Ende die Funktionen übertreibt.
Slices exportieren
Hier kommt die Nützlichkeit des Schneidens wirklich ins Spiel. Ohne zu schneiden, müssen Sie jeden Teil Ihres Comps einzeln speichern. Der Workflow sieht ungefähr so aus: Treffen Sie eine Auswahl, schneiden Sie sie zu, optimieren Sie sie in "Für Web speichern", speichern Sie sie, machen Sie das Zuschneiden rückgängig und wiederholen Sie sie. Das sind viele unnötige Schritte! Mal sehen, wie es mit dem Schneiden funktioniert.
Nachdem Sie endlich alle Vor- und Nachteile des Schneidens herausgefunden haben und Ihre PSD einsatzbereit haben, können Sie im Menü Datei die Option "Für Web und Geräte speichern" auswählen. Sie kennen diesen Dialog wahrscheinlich bereits, aber er ist etwas anders, wenn Sie Slices in Ihrem Dokument haben.
Wenn Sie Slices haben, werden in der Vorschau Ihres Dokuments in diesem Fenster alle angezeigt (dies schließt leider auch die nervigen Auto Slices ein). Von hier aus können Sie einfach klicken, um jedes Slice auszuwählen und die Einstellungen für jedes Slice einzeln zu optimieren. Dies umfasst Dateityp, Qualität usw. In einer Sitzung können Sie also einen Export von drei JPGs und einem PNG in einer Qualität einrichten, die Sie für angemessen halten.
Wenn Sie alles nach Ihren Wünschen angepasst haben, klicken Sie auf die Schaltfläche "Speichern". Es sollte ein Dialogfeld angezeigt werden, in dem Sie einen Ordner auswählen können, in dem alle Bilder abgelegt werden sollen. Denken Sie daran, dass wir die Namenskonvention bereits eingerichtet haben. Lassen Sie diese also unverändert. Der Schlüssel hier ist, um sicherzustellen, dass Sie nur entweder "Alle Benutzer-Slices" oder "Ausgewählte Slices" exportieren.
Abhängig von Ihrem gewünschten Workflow funktioniert eine dieser Optionen hervorragend. Die Standardoption ist einfach "Alle Slices", die nicht nur Ihre benutzer- und schichtenbasierten Slices enthalten, sondern auch die völlig nutzlosen automatischen Slices, die Sie ohnehin einfach wegwerfen müssen. Sparen Sie sich die Mühe und lassen Sie diese hier fallen, bevor die eigentliche Sicherung stattfindet.
Fazit
Wir haben heute eine Menge ziemlich technischer Photoshop-Sachen durchgesehen, also werde ich versuchen, es gut zusammenzufassen. Erstens kann sich das Schneiden einer PSD wirklich wie ein klobiger Prozess anfühlen, wenn Sie nicht wissen, was Sie tun. Stellen Sie sicher, dass Sie sich in Photoshop wirklich umschauen und mit den obigen Tipps experimentieren, um sicherzustellen, dass Sie die verfügbaren Tools optimal nutzen.
Denken Sie zweitens daran, dass es drei Arten von Slices gibt: Auto Slices, User Slices und Layer Based Slices. Auto Slices sind ziemlich lahm und eher ein unglücklicher Nebeneffekt beim Schneiden als eine hilfreiche Funktion. Sie müssen mir nicht zustimmen, aber wenn Sie dies tun, verstecken Sie sie, damit sie nicht so ablenken. User Slices sind einfach diejenigen, die Sie absichtlich erstellen. Sie können sie mit dem Slice Select Tool anpassen und benennen, indem Sie auf den Inhalt doppelklicken. Ebenenbasierte Slices sind genau wie User Slices, nur dass sie viel intelligenter sind, da sie automatisch die Grenzen einer bestimmten Ebene einhalten. Sie können eine Ebene verschieben, ihre Größe ändern und Effekte hinzufügen, und das Slice wird kontinuierlich von selbst aktualisiert.
Wählen Sie schließlich beim Exportieren eines Dokuments mit Slices den Befehl Für Web speichern und optimieren Sie jedes Slice als eigene Datei. Stellen Sie außerdem sicher, dass nur die Benutzer-Slices oder ausgewählten Slices exportiert werden. Andernfalls füllen alle von Photoshop erstellten automatischen Slices Ihren Bildordner aus.
Dies ist wahrscheinlich mehr als Sie jemals über das Schneiden in Photoshop wissen wollten, aber hoffentlich hat dies Ihnen geholfen, die Ineffizienzen im System zu erkennen, sodass Sie diese nützlichen Tools anpassen und trotzdem nutzen können, ohne durch ihre Unbeholfenheit behindert zu werden.
Hinterlasse unten einen Kommentar und sag uns, wie du eine PSD schneidest. Der Workflow, den ich hier eingerichtet habe, ist nur eine von vielen möglichen Lösungen, und ich bin gespannt darauf, von Ihnen zu hören und zu lernen!
