Front-End-Technologie-PS-Schneiden

PS-Schneiden des Seitenproduktionsteils

Aus technischer Sicht besteht der erste Schritt des Webdesigns darin, dass der Künstler ein Webseiten-Rendering erstellt, und der zweite Schritt besteht darin, die Webseite darauf zu schneiden Frontend der Webseite. Zu den häufig verwendeten Werkzeugen zum Schneiden von Webseiten gehören Fireworks und PS, die hier zum Schneiden von Webseiten verwendet werden.

Wir erhalten die gewünschte Ausgabe (wie .png-, .jpg-Dateien) durch den Designentwurf und stellen Bildmaterial (HTML: img, CSS: Hintergrund) für die Webseite bereit.

1. PS-Tools verwenden

1.1 PS-Voreinstellungseinstellungen

Bearbeiten -> Voreinstellungen -> Einheiten und Lineale, Pixel auswählen.

1.2 Panel

Im Menü „Fenster“ öffnen:

Tools (standardmäßig aktiviert)

Optionen (standardmäßig aktiviert)

Ebene (standardmäßig aktiviert)

Informationen (manuell aktiviert)

Verlauf (manuell aktiviert)

Schließen Sie andere nicht benötigte Funktionen und platzieren Sie die oben genannten Funktionen im entsprechenden Bereich. Speichern Sie den Arbeitsbereich wie folgt:

1.3 Allgemeine Werkzeuge zum Ausschneiden von Bildern

▪Verschiebewerkzeug

wird automatisch ausgewählt und überprüft, und die Gruppe wird in Ebene geändert

▪Rechteckiges Auswahlwerkzeug

▪Zauberstab-Werkzeug

▪Zuschneidewerkzeug + Schnittwerkzeug

▪Skalierungswerkzeug

-Vergrößern: Strg + Pluszeichen

-Herauszoomen: Strg+Minus

▪Farbauswahl

1.4 Hilfsansicht

Im Menü „Ansicht“ aktivieren:

▪Ausrichtung (standardmäßig aktiviert) (es gibt eine Adsorptionskraft beim Auftreffen auf Hilfslinien und Grenzen)

▪Lineal Strg+R

▪Anzeige-> Zeilen Strg+ ; (Zusätzlicher Inhalt muss angezeigt werden)

2. Informationen abrufen

Öffnen Sie den Designentwurf und erhalten Sie die Informationen:

▪Dimensional Informationen: Messung

▪Farbinformationen: Farbauswahl

Das Wichtigste, um Informationen zu erhalten, besteht darin, die Leinwand so groß wie möglich zu strecken, um den Fehler zu minimieren.

Messung

2.1 Alle Zahlen müssen gemessen werden

Werkzeuge:

Rechteckiges Auswahlfeld + Informationsfeld

Maßinhalt:

Breite, Höhe

Abstand, Ränder

Rand

Positionierung

Textgröße

Zeilenhöhe

Hintergrundbildposition

2.2 Auswahl messen (rechteckiges Auswahlwerkzeug)

Zur Auswahl hinzufügen: Halten Sie die Umschalttaste gedrückt

Von Auswahl subtrahieren: Alt gedrückt halten

Mit Auswahl überschneiden: Umschalt+Alt gedrückt halten

2.3 Textbezogene Messungen

2.3.1 Separate Textebene

Wählen Sie die Ebene aus und klicken Sie auf Werkzeug T. Der obere Optionsbereich wird wie folgt angezeigt:

Sie können direkt Holen Sie sich die Textgröße;

Klicken Sie auf , um eine andere Sicherheit zu erhalten, z. B. die Zeilenhöhe:

2.3.2 Nicht getrennte Textebene (wählen Sie die größere Schriftart als Maß)

Verwenden Sie das rechteckige Auswahlrechteck-Werkzeug, um den Text auszuwählen, und die Höhe ist die Schriftgröße

Maß der Zeilenhöhe

Verwenden Sie für die Mit dem rechteckigen Auswahlrechteck-Werkzeug ist die Höhe vom unteren Ende der vorherigen Textzeile bis zum unteren Ende dieser Textzeile die Zeilenhöhe, wie unten gezeigt:

Farbauswahl

2.4 Alle Alle Farben müssen ausgewählt werden

Werkzeuge:

Farbauswahl + Pipettenwerkzeug

Farbauswahlinhalt:

Rahmenfarbe

Hintergrundfarbe

Textfarbe

Vergrößern Sie die Leinwand so weit wie möglich, um feste Punkte zu erhalten und gezackte Punkte zu vermeiden.

2.5 Die Farbe einer separaten Textebene kann direkt abgerufen werden, und andere Farben können mit dem „Farbwähler + Pipetten-Werkzeug“ abgerufen werden

Besondere Aufmerksamkeit gilt aufgrund des Überlagerungseffekts von Ebenen. Die angezeigte Farbe stimmt nicht mit der tatsächlichen Farbe überein. Verwenden Sie dazu den Farbwähler, um die Farbe zu erhalten.

2.6 Farbauswahl Werkzeug Verwenden Sie geschickt

2.6.1, um festzustellen, ob der Hintergrund einfarbig ist (Farbwähler + Pipette).

Klicken Sie weiter auf verschiedene Bereiche, um zu sehen, ob sich die Farbe ändert

2.6.2 Bestimmen Sie, ob es sich um einen linearen Farbverlauf handelt (Zauberstab)

Wählen Sie zuerst die Ebene aus, wählen Sie dann das Zauberstab-Werkzeug aus und klicken Sie, um die oberste Linie auszuwählen Die Anzeige sieht wie folgt aus:

Klicken Sie weiter und wählen Sie jeweils eine Zeile nach unten aus

Bestätigen Sie, dass es sich um eine Linie handelt Gradient.

3. Slicing

3.1 Inhalt, der geschnitten werden muss

Geändert (im Allgemeinen im Hintergrundattribut verwendet):

Symbol, Logo

Schaltflächen, Text usw. mit Spezialeffekten

Nicht einfarbiger Hintergrund

Inhaltsbasiert (wird im Allgemeinen in IMG-Tags verwendet)

Banner, Werbebilder

Bilder im Artikel...

Beispielsweise muss im Bild unten das rote Kästchen ausgeschnitten werden , und die Blackbox wird aus dem Hintergrund erhalten. Kein Ausschneiden erforderlich

3.2 Art der ausgeschnittenen Bilder speichern

Inhalte werden im Allgemeinen als gespeichert .JPG,

Geänderte Dateien werden im Allgemeinen als .PNG8, .png24

gespeichert. Sowohl PNG8 als auch PNG24 unterstützen Transparenz (die Bildqualität ist relativ hoch). ie6 unterstützt jedoch keine PNG24-Transluzenz, was eine Kompatibilität erfordert.

3.3. Bild ausschneiden

Text ausblenden und nur den Hintergrund behalten

3.3.1 Textunabhängige Ebene (versteckte Textebene)

Textebene gefunden

Brillensymbol entfernen

3.3.2 Text und Bild zusammenführen (gekachelter Hintergrund verdeckt Text)

Das Hintergrundbild kann gestreckt werden

Wählen Sie einen Bereich mit dem rechteckigen Auswahlwerkzeug aus

Freie Transformation Strg+T

Das Hintergrundbild kann nicht gestreckt werden ( Der Hintergrund hat Textureffekte usw.)

Wählen Sie einen Bereich mit dem rechteckigen Auswahlwerkzeug aus

Verwenden Sie das Verschieben-Werkzeug + Alt

3.3.3 Holen Sie sich Slices

Bild ausschneiden.PNG24

•Wählen Sie die erforderlichen Ebenen mit dem Verschieben-Werkzeug aus (halten Sie die Strg-Taste gedrückt, um mehrere auszuwählen)

•Klicken Sie mit der rechten Maustaste, um sie zusammenzuführen Ebenen (Strg+E)

•Versenden Sie die Zeichnungsebene per E-Mail an eine neue Datei oder ziehen Sie sie direkt in eine vorhandene Datei (Neu: Strg+N)

Auf .PNG8 schneiden ( Mit Hintergrund ausschneiden)

•Sichtbare Ebenen zusammenführen (Umschalt+Strg+E)
•Inhalt mit dem rechteckigen Auswahlwerkzeug auswählen
•Überschüssiges mit dem Zauberstab-Werkzeug entfernen (Von der Auswahl subtrahieren: gedrückt halten Alt)

3.3.4 Kachelbare Hintergrundausschnitte

Wählen Sie einen Bereich mit dem rechteckigen Auswahlwerkzeug aus

Kopieren und in eine neue Datei einfügen

Kacheln Der Inhalt füllt die Breite (x-Achse) oder Höhe (y-Achse) der Datei aus: Wenn beispielsweise eine neue Datei zum Kacheln der x-Achse verwendet wird, sollte die Breite des ausgeschnittenen Bildes sein im Einklang mit der neuen Datei

3.4. Slicing-Tool (geeignet für Aktivitätsseiten, die flächendeckend geschnitten werden können)

▪ Anleitungen ziehen

▪Wählen Sie das Slicing-Werkzeug aus

▪Klicken Sie auf „Slice basierend auf“. Schaltfläche „Hilfslinien“ in der Optionsleiste

▪Wählen Sie das Slice-Auswahlwerkzeug aus

Doppelklicken Sie auf das Slice, um den Dateinamen und andere Informationen zu ändern

▪Speichern

Alle Slices auswählen und das Speicherformat einheitlich festlegen

4. Speichern

Speichern Sie den erforderlichen Inhalt (der Hintergrund ist normalerweise transparent)

▪ Kopieren, erstellen, einfügen (Strg+C, Strg+N, Strg+V oder Inhalte in eine neue Datei ziehen)

Unabhängige Ebene: Inhalte direkt in eine neue Datei ziehen

Zusammenführen: Rechteckige Auswahl des Auswahlwerkzeugs, Zauberstab-Extraktion, Strg+C, Strg+N, Strg+V

▪Gespeichert im vom Web verwendeten Format (Alt+Umschalt+Strg+S)

4.1 Speichertyp eins (JPG)

Wenn das Bild reich an Farben ist und keine Transparenz erfordert

wird empfohlen, es im JPG-Format zu speichern und die entsprechende Qualität zu wählen

Hinweis: Qualität: 60-80; kann nicht 100 sein, 80 ist bereits gut

4.2 Speichertyp 2 (PNG8)

Wenn das Bild nicht sehr farbenfroh ist, unabhängig davon, ob dort ist Transparenzanforderung

Speichern Sie es im PNG8-Format

Hinweis: Beim Speichern müssen Sie kein Dithering und keine Mattierung zurücksetzen

4.3 Speichertyp drei (PNG24)

Wenn das Bild Transparenzanforderungen hat

Im PNG24-Format speichern

Standardeinstellung.

4.4 Speichertyp vier (PSD)

Um die Qualität des Bildes sicherzustellen

behalten Sie eine Kopie der PSD-Datei. Alle zukünftigen Änderungen werden vorgenommen auf der PSD-Datei

Fünf Änderungen und Wartung

Im Verlauf des Projekts möchten wir möglicherweise die Position des Symbols ändern, neue Symbole hinzufügen, alte Symbole löschen und die Größe ändern der Leinwand, daher müssen wir Änderungen vornehmen und warten.

5.1 Leinwandgröße ändern

5.1.1 Leinwand hinzufügen

Bild->Leinwandgröße, Ankerpunkt entsprechend der Situation auswählen

5.1.2 Leinwand verkleinern

Die erste Methode: Wählen Sie den Bereich mit dem rechteckigen Auswahlwerkzeug aus, Bild->Zuschneiden, um die Leinwand zuzuschneiden; Zweite Methode: Verwenden Sie zum Zuschneiden direkt das Zuschneidewerkzeug.

5.2 Verschieben Sie das Symbol

▪

Wenn das Symbol eine unabhängige Ebene ist

, ziehen Sie es einfach mit dem Verschiebewerkzeug

▪

Wenn das Symbol nicht unabhängig ist

Verwenden Sie das Auswahlwerkzeug, um den Symbolbereich auszuwählen

Verwenden Sie das Verschieben-Werkzeug, um das Symbol zu ziehen

Hinweis:

Wenn das Symbol nicht unabhängig ist, können Sie mit dem Auswahlwerkzeug den Symbolbereich auswählen, Strg+X drücken, um ihn auszuschneiden, und ihn dann einfügen, um das Symbol zu drehen in eine unabhängige Ebene. 5.3 Symbole hinzufügen

Nachdem Sie die Symbole organisiert haben, platzieren Sie sie an der entsprechenden Position.

Hinweis:

Um das PNG8-Bild zu ändern, müssen Sie den Farbmodus auf RGB-Farbe ändern. Vorgehensweise: Bild->Modus->RGB-Farbe.

Sechs Verwendungsmöglichkeiten

Lösung zum Zusammenführen von Bildern: Sprite-Bild

CSS-Sprites werden von vielen Menschen in China CSS-Sprites genannt, was eine Verarbeitungsmethode für Web-Bildanwendungen ist. Es ermöglicht Ihnen, alle verstreuten Bilder einer Seite in einem großen Bild zusammenzufassen, sodass beim Zugriff auf die Seite nicht wie zuvor die geladenen Bilder einzeln angezeigt werden. Positionieren Sie den Hintergrund entsprechend der Position des jeweiligen Symbols im Gesamtbild.

Vorteile des Sprite-Puzzles: Reduzieren Sie Netzwerkanfragen und verbessern Sie die Ladegeschwindigkeit von Webseiten.

6.1 Größe und Qualität (Balance und Kompromiss)

Komprimierungstool:

▪Lossy TinyPng: https: / /tinypng.com/

▪Verlustfreies Minimage: https://github.com/NetEaseWD/minimage

6.2 Zusammenführen

6.2.1 Anordnen

Zwischen den Bildern müssen entsprechende Lücken reserviert werden (um die Bildbearbeitung und das Schreiben von CSS-Code zu erleichtern)

Symbolanordnung: horizontal und vertikal

6.2. 2 Klassifizierung

▪ Bilder zusammenführen, die zum selben Modul gehören (Funktionalisierung)

▪ Bilder ähnlicher Größe zusammenführen (Platz sparen)

▪Bilder mit ähnlichen Farben zusammenführen (Reduzieren Sie die Anzahl der Farben und die Dateigröße wird relativ klein sein)

▪Zusammenführung basierend auf den oben genannten Methoden

6.2.3 Zusammenführungsempfehlung

▪Nur auf dieser Seite verwendete Bilder zusammenführen

▪Zustandsbehaftete Zusammenführung von Bildern (Maus über Zustandsänderungen usw.)

Sieben Browser-Kompatibilitätslösungen

7.1 IE6 unterstützt keine PNG24-Transparenz

Lösung: Speichern Sie zwei Kopien von sprite.png(24) und sprite_ie png(8)

7.2 Css3

▪Fortgeschrittene Browser verwenden CSS3

▪Low-Level-Browser verwenden Ausschnitte

7.3 Graceful Downgrade

▪Unterstützte Anzeigeeffekte

▪Keine Unterstützung, keine Wirkung

Mehr Für Artikel zur Front-End-Technologie -PS schneiden, bitte achten Sie auf die chinesische PHP-Website!