Aus technischer Sicht besteht der erste Schritt beim Webdesign darin, dass der Künstler ein Webseiten-Rendering erstellt, und der zweite Schritt besteht darin, die Webseite im Frontend zu schneiden. 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.
Bearbeiten -> Voreinstellungen -> Einheiten und Lineale, Pixel auswählen.
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:
▪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
Aktivieren im Menü „Ansicht“:
▪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)
Ö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.
Werkzeuge:
Rechteckiges Auswahlfeld + Informationsfeld
Maßinhalt:
Breite, Höhe
Abstand, Ränder
Rand
Positionierung
Textgröße
Zeilenhöhe
Hintergrundbildposition
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
Wählen Sie die Ebene aus, klicken Sie auf Werkzeug T, der obere Optionsbereich wird wie folgt angezeigt:
Sie können Rufen Sie direkt die Textgröße ab.
Klicken Sie auf 
, um andere Informationen zu erhalten, z. B. die Zeilenhöhe:
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 Beim rechteckigen Auswahlwerkzeug ist die Höhe vom unteren Ende der vorherigen Textzeile bis zum unteren Ende dieser Textzeile die Zeilenhöhe, wie unten gezeigt:
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 .
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.
Klicken Sie weiter auf verschiedene Bereiche, um zu sehen, ob sich die Farbe ändert
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.
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
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.
Text ausblenden und nur den Hintergrund behalten
Textebene gefunden
Brillensymbol entfernen
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
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)
•Rechteckiges Auswahlwerkzeug zum Auswählen von Inhalten
•Zauberstab-Werkzeug zum Entfernen überschüssiger Teile (von der Auswahl abziehen: Alt gedrückt halten)
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 übereinstimmen Seien Sie konsistent mit der neuen Datei
▪Anleitungen ziehen
▪Wählen Sie das Slicing-Werkzeug aus
▪Klicken Sie auf „Slice-basiert“. auf Hilfslinien“-Schaltfläche in der Optionsleiste
▪Wählen Sie das Slice-Auswahlwerkzeug
Doppelklicken Sie auf das Slice, um den Dateinamen und andere Informationen zu ändern
▪Speichern
Alle Slices auswählen und das Speicherformat einheitlich festlegen
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: Auswahl des rechteckigen Auswahlwerkzeugs, Extrahieren des Zauberstabs, Strg+C, Strg+N, Strg+V
▪Speichern im vom Web verwendeten Format (Alt+ Umschalt + Strg + S)
Wenn das Bild reich an Farben ist und keine Transparenzanforderungen hat
Es Es wird empfohlen, es im JPG-Format zu speichern und die entsprechende Qualität auszuwählen
Hinweis: Qualität: 60-80 kann nicht 100 sein, 80 ist bereits gut
Wenn die Farbe des Bildes nicht zu satt ist, unabhängig davon, ob Transparenzanforderungen bestehen
Speichern Sie es im PNG8-Format
Hinweis: Beim Speichern müssen Sie kein Dithering und keine Kanten neu einstellen
Wenn das Bild Transparenzanforderungen hat
Im PNG24-Format speichern
Standardeinstellung.
Um die Qualität des Bildes sicherzustellen
behalten Sie eine Kopie der PSD-Datei. Alle zukünftigen Änderungen werden vorgenommen auf der PSD-Datei
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.
Bild->Leinwandgröße, entsprechend der Situation den Ankerpunkt auswählen
Die erste Methode: Wählen Sie den Bereich mit dem rechteckigen Auswahlwerkzeug aus, Bild->Zuschneiden, um die Leinwand zuzuschneiden
Die zweite Methode: Verwenden Sie zum Zuschneiden direkt das Zuschneidewerkzeug.
▪Wenn das Symbol eine unabhängige Ebene ist
, ziehen Sie es einfach mit dem Verschiebewerkzeug
▪Wenn das Symbol nicht unabhängig ist
Wählen Sie den Symbolbereich mit dem Auswahlwerkzeug aus
Ziehen Sie das Symbol mit dem Verschieben-Werkzeug
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 in ein Symbol umzuwandeln unabhängige Schicht.
Nachdem Sie die Symbole organisiert haben, platzieren Sie sie an der entsprechenden Position.
Um das PNG8-Bild zu ändern, müssen Sie den Farbmodus auf RGB-Farbe ändern. Vorgehensweise: Bild->Modus->RGB-Farbe.
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.
Komprimierungstool:
▪Lossy TinyPng: https: // /tinypng.com/
▪Verlustfreies Minimage: https://github.com/NetEaseWD/minimage
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
▪ Bilder zusammenführen, die zum gleichen Modul gehören (Funktionalisierung)
▪ Bilder ähnlicher Größe zusammenführen (Platz sparen)
▪Bilder mit ähnlichen zusammenführen Farben (reduzieren Sie die Anzahl der Farben und die Dateigröße wird relativ klein sein)
▪Zusammenführung basierend auf den oben genannten Methoden
▪Nur Bilder zusammenführen, die auf dieser Seite verwendet werden
▪Zustandsbehaftete Zusammenführung von Bildern (Maus über Zustandsänderungen usw.)
Lösung: Speichern Sie zwei Kopien von sprite.png(24) und sprite_iep(8)
▪Fortgeschrittene Browser verwenden CSS3
▪Low-Level-Browser verwenden Ausschnitte
▪Unterstützte Anzeigeeffekte
▪Keine Wirkung, wenn nicht unterstützt
Weitere PS-Schnittbilder im Seitenproduktionsteil finden Sie auf der chinesischen PHP-Website für verwandte Artikel!
Eine Sammlung häufig verwendeter Computerbefehle
Win10 stellt eine Verbindung zum freigegebenen Drucker her
So werden Sie auf TikTok ein enger Freund
Kostenlose Datenwiederherstellungssoftware
Welche Funktionen gibt es zum Erstellen von Websites?
Wie man negative Zahlen binär darstellt
Python konfiguriert Umgebungsvariablen
So öffnen Sie die WeChat-HTML-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
