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.
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
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)
Ö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 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:
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:
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)
•Inhalt mit dem rechteckigen Auswahlwerkzeug auswählen
•Überschüssiges mit dem Zauberstab-Werkzeug entfernen (Von der Auswahl subtrahieren: gedrückt halten Alt)
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
▪ 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
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)
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
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
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, Ankerpunkt entsprechend der Situation auswählen
▪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 istHinweis:, ziehen Sie es einfach mit dem Verschiebewerkzeug
▪
Wenn das Symbol nicht unabhängig istVerwenden Sie das Auswahlwerkzeug, um den Symbolbereich auszuwählen
Verwenden Sie das Verschieben-Werkzeug, um das Symbol zu ziehen
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
Hinweis:
Sechs Verwendungsmöglichkeiten
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)
▪Lossy TinyPng: https: / /tinypng.com/
▪Verlustfreies Minimage: https://github.com/NetEaseWD/minimage
6.2 Zusammenführen
Symbolanordnung: horizontal und vertikal
6.2. 2 Klassifizierung
▪Nur auf dieser Seite verwendete Bilder zusammenführen▪ 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
▪Zustandsbehaftete Zusammenführung von Bildern (Maus über Zustandsänderungen usw.)
Sieben Browser-Kompatibilitätslösungen
7.2 Css3▪Fortgeschrittene Browser verwenden CSS3
▪Unterstützte Anzeigeeffekte▪Low-Level-Browser verwenden Ausschnitte
7.3 Graceful Downgrade
▪Keine Unterstützung, keine Wirkung
Mehr Für Artikel zur Front-End-Technologie -PS schneiden, bitte achten Sie auf die chinesische PHP-Website!
Der Unterschied zwischen Artikel-Tag und Abschnitts-Tag
Emule-Server-Link
So erhalten Sie Douyin Xiaohuoren
Einführung in den Javascript-Spezialeffektcode
Was tun, wenn der Remote-Desktop keine Verbindung herstellen kann?
Welche Office-Software gibt es?
Der Unterschied zwischen dem selbst betriebenen Flagship-Store von JD.com und seinem offiziellen Flagship-Store
So kaufen und verkaufen Sie Bitcoin in China
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
