Die Anleitung des Designers zum Schneiden von Bildern in Photoshop

Wenn Sie mit Bildern im Web arbeiten, können Sie manchmal ein großes Bild laden, entweder als Hauptbild auf einer Seite oder als Hintergrund. Der Nachteil ist, dass Sie sofort auf mehrere Probleme stoßen. Zunächst einmal ist die tatsächliche Dateigröße. Zweitens ist die Auflösung. Drittens ist die Komprimierung.

Wenn die Datei groß ist, dauert das Laden sehr lange, insbesondere für Benutzer mit einer langsameren Verbindung. Sie können die Dateigröße durch Komprimierung reduzieren, aber Sie können nur so weit gehen, bis die Bildqualität beeinträchtigt wird.



Die Lösung für Ihr Problem besteht darin, Bildschnitte zu verwenden, mit denen Sie das Bild Stück für Stück laden können, bis das gesamte Bild auf Ihrem Bildschirm angezeigt wird.



Wie es funktioniert

Hier ist eine Übersicht über die Funktionsweise: Wenn Sie ein Bild haben, dessen Laden zu lange dauert, können Sie das Schneidewerkzeug in Photoshop verwenden, um das Bild in kleinere Abschnitte zu schneiden. Diese Bilder werden als separate Datei gespeichert und mit dem Befehl Für Web speichern optimiert.

Darüber hinaus erstellt Photoshop das HTML oder CSS, das zum Anzeigen des geschnittenen Bildes erforderlich ist. Bei Verwendung auf einer Webseite wird jedes Bild im Browser mithilfe von HTML oder CSS neu zusammengesetzt, um ein reibungsloses Ergebnis zu erzielen. Hier ist ein Beispiel für ein geschnittenes Bild.



Bildschneiden

Grundlagen zum Schneiden

Um die Dinge einfach zu halten, arbeiten wir nur mit dem Slice-Werkzeug auf einer Ebene. In diesem Beispiel arbeite ich mit einem Bild mit einer Größe von 960 x 722 Pixel. Einige Dinge, die Sie wissen müssen, bevor wir beginnen:

  • Beim Erstellen von Slices können Sie das Slice-Werkzeug verwenden oder sie mithilfe von Ebenen erstellen.
  • Slices können mit dem Slice Select-Werkzeug ausgewählt werden.
  • Sie können das Slice verschieben, in der Größe anpassen oder an anderen Slices ausrichten. Außerdem können Sie einen Namen für das Slice, den Typ und die URL festlegen.
  • Jedes Slice kann mithilfe der Einstellungen im Dialogfeld Für Web speichern optimiert werden.

Um loszulegen, drücken Sie C. Klicken Sie auf Ihrer Tastatur auf das Slice-Werkzeug.



Bildschneiden

Beim Erstellen von Slices können Sie aus drei Einstellungen wählen: Normal, Festes Seitenverhältnis und Feste Größe.

  • Normal : Dies wird zu einem Slice, je nachdem, wo Sie das Feld beginnen und beenden, das Sie auf dem Bild zeichnen.
  • Festes Seitenverhältnis : Hier legen Sie eine Höhe und Breite mit ganzen Zahlen fest. Wenn Sie ein Slice mit einem Verhältnis von drei zu eins erstellen möchten, geben Sie 3 für die Höhe und 1 für die Breite ein.
  • Feste Größe : Hier legen Sie die Höhe und Breite des Slice in Pixel fest.

Beim Schneiden eines Bildes haben Sie mehrere Möglichkeiten. Wenn die Genauigkeit nicht wichtig ist, können Sie das Bild manuell in Scheiben schneiden und die fertigen Scheiben bei Bedarf mit dem Scheibenauswahl-Werkzeug verschieben.

Bildschneiden

Wenn Genauigkeit wichtig ist, verwenden Sie Richtlinien, um die wichtigen Abschnitte im Bild abzubilden.

Bildschneiden

Welche Schriftart verwendet die Regierung?

Klicken Sie oben in der Slicing-Menüleiste auf das C- oder das Slice-Werkzeug, um es zu aktivieren, und klicken Sie in der Slice-Menüleiste über dem Bild auf die Schaltfläche Slices from Guides.

Bildschneiden

Die Scheiben werden automatisch für Sie gezeichnet. Anschließend können Sie die Slices mit dem Slice Select Tool neu positionieren.

Slice-Informationen bearbeiten

Nachdem jedes Slice erstellt wurde, können Sie Informationen zum Slice auf zwei Arten bearbeiten.

Klicken Sie zunächst auf das Slice-Auswahlwerkzeug, klicken Sie auf das Slice, das Sie bearbeiten möchten, und klicken Sie dann in der Menüleiste auf das Symbol neben der Schaltfläche Auto Slices anzeigen.

Bildschneiden

Eine andere Möglichkeit besteht darin, mit der rechten Maustaste auf das Slice zu klicken und im Popup-Menü auf Slice-Optionen bearbeiten zu klicken.

Bildschneiden

Bei beiden Auswahlmöglichkeiten wird das Dialogfeld Slice-Optionen angezeigt.

Bildschneiden

Wie Sie sehen können, gibt es viele Einstellungen. Sie können den Namen des Slice ändern und ihm eine URL zuweisen. Wenn Sie im Browser darauf klicken, gelangen Sie an einen anderen Ort. Sie können das Ziel (_blank, _self, _parent, _top) und die Nachricht festlegen Text, Alt-Tag, Abmessungen des Slice und mehr.

Wie erstelle ich ein Buch in Indesign?

Für das Web speichern

Wenn Sie mit Ihrem Layout zufrieden sind, gehen Sie zu Datei> Für Web speichern.

Bildschneiden

Hier können Sie den Dateityp und die Komprimierung für jedes Slice festlegen oder die im Dialogfeld Für Web speichern aufgeführte Standardeinstellung verwenden. Wenn Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche Speichern.

Bildschneiden

Daraufhin wird das Dialogfeld Gespeichert unter Optimiert als angezeigt. Am unteren Rand der Box befinden sich mehrere wichtige Einstellungen.

  • Format : Sie haben drei Optionen: HTML und Bilder, Nur Bilder und Nur HTML.
  • die Einstellungen :: Ihre Optionen sind Benutzerdefiniert, Hintergrundbild, Standardeinstellungen, XHTML und Andere.
  • Scheiben : Ihre Optionen sind Alle Slices, Alle Benutzer-Slices und Ausgewählte Slices.

Für dieses Tutorial verwende ich HTML und Bilder, Standardeinstellungen und Alle Slices. Wenn Sie mit Ihren Einstellungen zufrieden sind, wählen Sie den Ordner aus, in dem Sie die Dateien speichern möchten, und klicken Sie auf die Schaltfläche Speichern. Dadurch wird eine HTML-Datei erstellt und alle sechs Bilder in einem Ordner gespeichert.

Hier ist eine geteilte Bildschirmansicht der HTML-Datei in Adobe Dreamweaver. Wie Sie sehen können, ist der Code unkompliziert und einfach zu verwenden.

Bildschneiden

Fazit

Wie Sie sehen können, ist das Schneiden von Bildern nützlich, wenn Sie ein großes Bild haben. Wenn Sie es in Abschnitte unterteilen, werden Teile des Bildes zuerst geladen, sodass der Benutzer weiß, dass weitere folgen werden. Dies ist hilfreich für Benutzer mit einer langsamen Verbindung.

Weitere Informationen finden Sie in den folgenden Artikeln:

Wörter : Nathan Segal