So machen Sie das Schneiden weniger 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 zu verwandeln. Ich meine, ich hasse Photoshop-Tools. Der gesamte Prozess macht mein PSD-System sehr voll, unübersichtlich und übermäßig kompliziert. Daher überspringe ich es normalerweise ganz. Stattdessen entscheide ich mich, Bilder nach Bedarf manuell zuzuschneiden und zu speichern.

Um dieser Tendenz entgegenzuwirken und zu versuchen, den Nutzen der Photoshop-Schneidewerkzeuge zu erkennen, habe ich mich auf eine Mission begeben, um alle Feinheiten der Schneidefunktion kennenzulernen. Nachfolgend 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 wussten!

Es gibt drei Arten von Slices in Photoshop

Drei Arten von Scheiben!? Dies war eines der interessantesten und überraschendsten Dinge, die ich gelernt habe. Ich habe nicht wirklich viel mit den Schnittfunktionen experimentiert und dachte nur, dass es nur einen Weg gibt. Ich hab mich geirrt.

Die drei verschiedenen Arten von Slices sind User Slices, Auto Slices und Layer-basierte 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, in der Tat entsteht einer der 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 Comp, in denen Sie dies tun möchten, können Sie schnell und einfach mehrere Bilder gleichzeitig optimieren und exportieren.

Wenn Sie einen Schnitt ausführen, sollten Sie etwas wie das unten gezeigte Ergebnis erhalten.

Was ich hier gemacht habe, ist, eine Box um das Logo oben auf der Seite zu zeichnen. Bei dieser einen Aktion wurden 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 zu verwandeln. Ich persönlich finde diese Annahme ziemlich ärgerlich, und wir werden später besprechen, wie man sie umgehen kann. Im Moment wissen Sie einfach, dass Photoshop aufgrund dieser Annahme die Ränder Ihres Slice über die gesamte PSD-Seite erstreckt, wodurch mehrere andere Abschnitte automatisch erstellt werden. Dies ist im obigen Bild dargestellt.

Tricks für das Arbeiten mit Benutzer- und Auto-Slices

Während wir uns mit User- und Auto-Slices beschäftigen, wollen wir einige der offensichtlichen und weniger offensichtlichen Funktionen durchgehen, damit Sie wirklich ein Gefühl für die Tools und Optionen bekommen, die Ihnen zur Verfügung stehen.

Slices verschieben und bearbeiten

Sobald Sie ein Segment erstellt haben, sollten Sie ähnliche Steuerelemente wie bei einer freien Transformation sehen, mit denen Sie es verschieben und bearbeiten können. Sie können das Slice-Auswahlwerkzeug auch verwenden, um sicherzustellen, dass Sie nur die aktuellen Slices bearbeiten und keine neuen erstellen. Dieses Werkzeug befindet sich im Flyout-Menü unter dem Slice-Tool.

Konvertieren von automatischen Slices in Benutzer-Slices

Während des gesamten Slicing-Prozesses werden Auto Slices kontinuierlich erstellt und aktualisiert und unterscheiden sich nicht von Benutzer-Slices. Später werden wir uns ansehen, wie sie als Dateien exportiert oder beim Exportieren ignoriert werden. Im Folgenden betrachten wir jedoch, wie ein Auto-Slice in ein User-Slice umgewandelt wird.

Der Prozess ist extrem einfach. Zuerst müssen Sie das automatische Slice mit dem Slice-Auswahlwerkzeug auswählen. Wählen Sie als Nächstes das Auto-Slice aus, das Sie konvertieren möchten, und drücken Sie die Taste? Knopf oben.

Das ist es! Jetzt sollte der Auto-Slice seine Farbe ändern, was darauf hinweist, dass es sich jetzt um einen User-Slice handelt. Jetzt haben Sie eine größere 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 durchzublättern. Stattdessen können Sie ein Segment erstellen, das alle Objekte umfasst, und Photoshop anweisen, den Rest zu erledigen.

Erstellen Sie dazu zunächst Ihr großes Segment, indem Sie eine Box um alle Objekte ziehen. Klicken Sie dann bei aktiviertem Slice-Auswahlwerkzeug auf die Schaltfläche "Teilen". Schaltfläche oben auf der Seite.

Dies sollte die "Teilen Slice" bringen. Dialogfeld oben angezeigt. Mit 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 Guidesystem fühlt sich zugegebenermaßen etwas weicher an.

Wenn Sie so rollen, passt dies perfekt in einen einfachen Arbeitsablauf zum Erstellen von Slices. Ziehen Sie einfach die Hilfslinien heraus, um Ihre PSD aufzuschneiden, und ignorieren Sie die Schneidewerkzeuge vollständig. Wenn Sie fertig sind, wählen Sie das Slice-Tool aus und klicken Sie auf die Option "Slices aus den Guides". Knopf oben.

Slices benennen

Das Ärgerliche, das Sie beim ersten Arbeiten mit Slices stört, ist, dass beim Exportieren der Dateien alle resultierenden Dateien mit großen, hässlichen Namen versehen werden, die überhaupt keine Bedeutung haben. Um dieses Problem zu beheben, müssen Sie sicherstellen, dass Sie jedes Segment entsprechend benannt haben. Der von Ihnen zugewiesene Name wird beim Export als Dateiname übernommen.

Um einem Slice einen Namen zu geben, doppelklicken Sie einfach mit dem Slice-Werkzeug auf seinen Inhalt. Daraufhin wird der folgende Dialog angezeigt.

Beachten Sie, dass Sie hier mehrere Optionen haben, einschließlich der Einstellung der Farbe für das Segment, der manuellen Eingabe der Abmessungen und der Zuweisung eines Namens. Es gibt auch eine Reihe von HTML-Elementen wie URL, Target usw. Es stellt sich jedoch heraus, dass Photoshop Ihre aufgeschnittene PSD als Web-Seite ausgeben kann. Einige bash diese Funktionalität, da die Standardeinstellungen ein tabellenbasiertes Layout erstellen. Sie können jedoch auf CSS umstellen.

Nun, sei nicht so aufgeregt. Selbst wenn die CSS-Optionen ausgewählt sind, ist Photoshop immer noch ziemlich faul beim Erstellen einer Website für Sie.Es ist viel besser, es per Hand zu tun oder zumindest zu Dreamweaver zu übernehmen, was bedeutet, dass Sie alle anderen Optionen vollständig ignorieren sollten.

Schichtbasierte Schnitte und warum sie besser sind

Eine der Hauptfunktionen, durch die das Schneiden für mich weniger gesaugt wurde, sind Layer-basierte Slices. 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 einer Box, die Sie manuell zeichnen, sondern folgen automatisch den Begrenzungen einer Ebene. Um ein schichtbasiertes Segment zu erstellen, wählen Sie eine Ebene in der Ebenenpalette aus, gehen Sie zum Menü und wählen Sie Ebene> Neues schichtbasiertes Segment. Beachten Sie, dass dies auch funktioniert, wenn Sie mehrere Layer ausgewählt haben. Jeder Layer wird einfach in ein eigenes Slice umgewandelt.

Damit dies einwandfrei funktioniert, müssen Sie wirklich gut sein, wie Sie Ihre Ebenen strukturieren. Sie sollten Ihre Modelle trotzdem als vollständig geschichtete und organisierte Dateien erstellen, sodass dies kein Problem sein sollte.

Der Vorteil

Einer der Hauptgründe, warum normale Slices so lahm sind, ist, dass dies eine Menge zusätzlicher Arbeit verursacht, wenn Sie Ihre Designs optimieren möchten. Nachdem Sie das Bildmaterial gemischt haben, müssen Sie zurückgehen und alle Ihre Segmente verschieben, um sie an das neue Layout anzupassen. Aus diesem Ärger rette ich die einzelnen Teile immer manuell durch Zuschneiden.

Layer-basierte Slices sind jedoch ziemlich intelligent. Wenn Sie sich um Ihre Ebenen bewegen, folgen Ihre Slices automatisch. Wenn Sie einen Effekt hinzufügen, der die Grenzen ändert, z. B. ein äußeres Glühen, wird das Slice erweitert, um es aufzunehmen. 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-basierten Slices, wann immer dies möglich ist, da Sie in der unvermeidlichen Re-Design-Phase unglaublich viel Zeit sparen.

Die Unordnung töten

Ein weiterer großer Ärgernis beim Schneiden ist, dass dadurch eine wirklich unübersehbare PSD erzeugt werden kann. Dies geschieht meistens mit dem Nebeneffekt Auto Slicing.

Schauen Sie sich zum Beispiel das Bild unten an (hier ist es etwas vereinfacht, aber Sie bekommen den Punkt). Hier wollte ich eigentlich nur drei Scheiben erstellen, aber Photoshop ist automatisch hineingegangen und hat es gemacht zwölf Scheiben!

Ich weiß nicht, wie es Ihnen geht, 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, sie fügen also meiner Oberfläche nur Rauschen hinzu. Wenn ich ein Dokument wie dieses sehe, sind die Slices für mich kein sinnvolles Werkzeug mehr.

Um dies zu korrigieren, können wir das Slice-Auswahlwerkzeug verwenden und die Option Auto Slices ausblenden anklicken. Schaltfläche oben auf dem Bildschirm. Dies macht genau das, was der Name andeutet, und raubt all diese unangenehmen Auto-Slices aus der Sicht.

Schauen Sie, wie viel einfacher unser Dokument wird! Die wenigen Scheiben, die wir verwendet haben, sind eindeutig identifizierbar und behalten daher ihren Nutzen. Meines Erachtens wird diese Betrachtungsweise Ihrer Scheiben sehr bevorzugt. Dies ist einer der Fälle, in denen Photoshop einfach zu sehr versucht, meinen bevorzugten Arbeitsablauf vorherzusagen, und die Funktionen zu übertreffen.

Slices exportieren

Hier kommt die Nützlichkeit des Schneidens wirklich zum Tragen. Ohne zu schneiden müssen Sie jeden Teil Ihres Comps einzeln speichern. Der Arbeitsablauf würde etwa wie folgt aussehen: Eine Auswahl treffen, zuschneiden, unter "Für Web speichern" optimieren, speichern, den Zuschnitt rückgängig machen und wiederholen. Das sind viele unnötige Schritte! Mal sehen, wie es beim Schneiden funktioniert.

Nachdem Sie alle Details des Slicing-Verfahrens herausgefunden haben und Ihre PSD einsatzbereit sind, müssen Sie im Dateimenü "Speichern für Web und Geräte" wählen. Sie kennen dieses Dialogfeld wahrscheinlich bereits, aber es ist etwas anders, wenn Sie in Ihrem Dokument Slices haben.

Wenn Sie über Slices verfügen, werden alle in der Vorschau Ihres Dokuments in diesem Fenster angezeigt (leider auch solche nervigen Auto Slices). Von hier aus können Sie einfach klicken, um jedes Segment auszuwählen und die Einstellungen für jedes einzeln zu optimieren. Dies umfasst den Dateityp, die Qualität usw. In einer Sitzung können Sie also den Export von drei JPGs und einer PNG-Datei mit jeweils einer für Sie angemessenen Qualität einrichten.

Wenn Sie alles Ihren Wünschen angepasst haben, klicken Sie auf die Schaltfläche "Speichern". Taste. Ein Dialogfeld sollte erscheinen, in dem Sie einen Ordner auswählen können, in den alle Bilder eingefügt werden sollen. Denken Sie daran, dass wir die Namenskonvention bereits eingerichtet haben. Der Schlüssel hier ist, um sicherzustellen, dass Sie entweder nur All User Slices exportieren. oder? Ausgewählte Scheiben ?.

Je nach gewünschtem Workflow funktioniert eine dieser Optionen hervorragend. Die Standardoption ist einfach "All Slices" (All Slices), zu der nicht nur die benutzer- und schichtbasierten Slices gehören, sondern auch die völlig unbrauchbaren Auto Slices, die Sie sowieso nur wegwerfen müssen. Sparen Sie sich die Mühe und graben Sie diese hier ab, bevor die eigentliche Speicherung stattfindet.

Fazit

Wir haben uns heute eine Menge technischer Photoshop-Sachen durchgesehen, also versuche ich es kurz zu fassen. Erstens: Das Aufteilen einer PSD kann sich wirklich als plumper Prozess anfühlen, wenn Sie nicht wissen, was Sie tun. Stellen Sie sicher, dass Sie sich in Photoshop wirklich umschauen, und experimentieren Sie mit den oben genannten Tipps, um sicherzustellen, dass Sie die verfügbaren Tools optimal nutzen.

Bedenken Sie zweitens, dass es drei Arten von Slices gibt: Auto Slices, User Slices und Layer-basierte Slices. Auto Slices sind ziemlich lahm und sind eher ein unglücklicher Nebeneffekt beim Schneiden als eine hilfreiche Funktion. Sie müssen mir diesbezüglich nicht zustimmen, aber wenn Sie es tun, verstecken Sie sie, damit sie nicht so ablenken. User Slices sind einfach die, die Sie absichtlich erstellen. Sie können sie mit dem Slice-Auswahlwerkzeug anpassen und mit einem Doppelklick auf den Inhalt benennen.Layer-basierte Slices sind wie User Slices, nur sie sind viel intelligenter, da sie sich automatisch an die Grenzen einer bestimmten Ebene halten. Sie können eine Ebene verschieben, in der Größe verä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 Save for Web, und optimieren Sie jedes Slice als eigene Datei. Stellen Sie außerdem sicher, dass Sie nur die User Slices oder Selected Slices exportieren, da sonst alle von Photoshop erstellten Auto Slices Ihren Bilderordner füllen.

Dies ist wahrscheinlich viel mehr als Sie jemals über das Schneiden in Photoshop wissen wollten, aber hoffentlich haben Sie dabei geholfen, die Ineffizienzen im System zu erkennen, so dass Sie dieses nützliche Werkzeugset anpassen und trotzdem nutzen können, ohne durch seine Unbequemlichkeit behindert zu werden.

Hinterlasse einen Kommentar und erzähle 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!