Front-End-Photoshop-Slicing

Was ist Slicing? (Slice in Photoshop)

Slice: Schneiden Sie das Bild in mehrere Teile und laden Sie sie einzeln hoch, damit die Upload-Geschwindigkeit schneller ist. Jedes Slice wird als unabhängige Datei übertragen, die die eigenen Einstellungen, Farbpalette, Links, Flip-Effekte und Animationseffekte des Slice enthält.

Slicing-Tool: Es wird hauptsächlich verwendet, um ein großes Bild in mehrere kleine Bilder zu zerlegen. Diese Funktion wird hauptsächlich auf Webseiten verwendet, da die heutigen Webseiten voller Bilder und Text sind und daher benötigt werden Um zu verhindern, dass die Besucher der Webseite zu lange warten, wird das Bild in mehrere kleinere Bilder zerschnitten.

Das Slicing ist ein sehr wichtiger Schritt im Webseitenerstellungsprozess. Ob das Slicing korrekt ist oder nicht, wirkt sich oft auf die Postproduktion der Webseite aus. Im Allgemeinen wird PS oder FW zum Schneiden der Darstellungen von Webseiten oder großformatigen Bildern verwendet. Das richtige Slicing wirkt sich sehr positiv auf die Website aus. Zum Beispiel: Reduzierung der Ladezeit von Webseiten, Erstellung dynamischer Effekte, Optimierung von Bildern, Links usw.

1. Erstellung von Webseiten-Slices

1. Reduzieren Sie die Ladezeit der Webseite

Manchmal ist ein großes Bannerbild auf der Webseite erforderlich, daher kostet es Browser zum Herunterladen dieses Bildes Dies wirkt sich lange Zeit sehr nachteilig auf das Benutzererlebnis aus. Das Aufkommen des Web-Slicing löst dieses Problem sehr gut. Durch die Verwendung von Slicing wird das gesamte große Bild in viele verschiedene kleine Bilder unterteilt, und der Browser lädt diese kleinen Bilder ebenfalls herunter. Auf diese Weise wird die Zeit, die der Browser zum Herunterladen des Bildes benötigt, erheblich verkürzt, was viel Zeit spart.

2. Bilder optimieren

Im Allgemeinen kann ein vollständiges Bild nur in einem Format vorliegen: JPG, GIF, PNG, PSD, DPF oder andere Verwenden Sie nur eine Möglichkeit zur Optimierung. Durch Web-Slicing kann dieses Bild in viele kleine Bilder aufgeteilt und in anderen Formaten gespeichert werden, die separat optimiert werden können. Dies kann eine hohe Bildqualität gewährleisten, den Bildspeicher reduzieren und die Ladegeschwindigkeit der Webseite verbessern.

Vorbereitung vor dem Slicing: Speichern Sie die Webseiten-PSD-Datei und integrieren Sie die PS-Bilder

Spezifische Vorbereitung für das Slicing: Aufteilen von Slices, Art des Slices (Benutzer-Slice, Nicht-Benutzer-Slice)

Grundlegende Punkte beim Schneiden:

1. Schneiden Sie entsprechend dem Farbbereich

2. Schneiden Sie die Webseitenscheiben so klein wie möglich ab Vollständig: Stellen Sie sicher, dass sich ein vollständiger Teil innerhalb eines Segments befindet, z. B. der Titeltext eines bestimmten Bereichs, was für spätere Änderungen praktisch ist. Es gibt viele Farbübergänge, die in JPG exportiert werden sollten, und die Teile mit Animation soll in eine GIF-Animation exportiert werden;

, ich weiß nicht, ob ich eines Tages einen bestimmten Teil ändern muss, z. B. Text usw. Ich kann die verwendeten Slices einfach separat ändern.

Sliced-Ebenen anzeigen und ausblenden: Slices von Hintergrundbildern; Slices von unregelmäßigen Bildern.

Bearbeiten von Slices: Größenänderung, Anpassen, Löschen, Löschen von Slices (Sie können einzelne Slices auswählen, mit der rechten Maustaste klicken, um sie zu löschen, oder alle anzeigen, um sie zu löschen), Slices speichern (in einem vom Web verwendeten Format gespeichert). )

Slice löschen

                                                                                               using           using             using             use using ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ Slicing-Optionen bearbeiten: Slice-Typ, Name: Automatisch generiert, normalerweise auf Englisch benannt, ist benutzerfreundlicher Um Englisch im Webseitencode zu verwenden, URL: Dies ist die Linkadresse, das Ziel, ALT-Tag: Sie können das Bild suchen und optimieren.                                                        

Sliced ​​speichern (als Web für Web gespeichert) Strg + Umschalt + Alt + S: Das häufig verwendete Format ist JIF und PNG -24 zur Unterstützung der Hintergrundtransparenz (Transparenzprüfung unterstützt Hintergrundtransparenz), JPEG (Bildqualität ist). in der Regel 80 oder mehr). Klicken Sie dann auf Speichern, speichern Sie das Format, das Format hat begrenzte Bilder, auf Standardeinstellungen eingestellt, Slices (alle Slices: ob Benutzer-Slices oder Nicht-Benutzer-Slices exportiert werden, alle Benutzer-Slices: nur die geschnittenen Slices, ausgewählte Slices: nur Will Führen Sie die ausgewählten Slices durch), wodurch automatisch ein Ordner (Bilder) generiert wird.

Slot-Format:

1, drei Slicing-Formate: , PNG unterstützt Webseitentransparenz und JIF unterstützt eine relativ schmale Farbe Reichweite.

2, Vergleich der drei Slicing-Formate (anwendbarer Bereich): JPG-Webseiten unterstützen dieses Format; PNG unterstützt Transparenz und JIF-Animationen können gepostet werden.

3, der Umfang sowie die Vor- und Nachteile der drei Slices: PNG: IE6 unterstützt keine Bildtransparenz;

Sliced ​​speichern und umbenennen:

1. Der Export von Slices

2. Der Name des Slicing steht am besten auf Englisch am Anfang des Symbols

Slicing-Fähigkeiten (Verlauf, Schatten, unregelmäßig):

Verlauf: Sie können einen Slicing ziehen

Schatten: So erreichen Sie die Webseite, CSS3 kann auch erreicht werden Der Schatten, aber IE6 und IE8 unterstützen es nicht. Sie können ein Segment nur für den Schatten erstellen, den Hintergrund ausblenden und es im PNG-24-Format speichern

Unregelmäßig: Der Hintergrund ist ausgeblendet, speichern Sie das PNG-Format

Web-Slice-Slices von Webseiten Praktische Übungen

Einige Farben können selbst dargestellt werden, Widget-Erstellung (ganzer Schnitt), Video-Play-Button

Schritte: Ebenen organisieren, speichern (to Sichern Sie die Bilder), machen Sie so viel wie möglich. Um genau zu sein, wenn es viele Leinwände gibt, können Sie ein neues erstellen und es auf das neue Leintuch kopieren

So fügen Sie schnell Slices ein: Hyperlink oder hinzufügen als Hintergrundlink

Zusammenfassung Wissenspunkte und Schlüsselpunkte des Slicings: das Konzept des Slicings, Funktion, Formatauswahl

Weitere Artikel zum Front-End-Photoshop-Slicing finden Sie im PHP-Chinesisch Webseite!