Wie man ein Banner Graphic Gestalt für Ihre HTML5 und CSS3-Site
Fast jede kommerzielle HTML5 und CSS3-Website hat eine Bannergrafik - eine spezielle Grafik, in der Regel mit einer festgelegten Größe (900x100 ist üblich), zeigt sich, dass auf jeder Seite. Normalerweise, wenn Sie eine CSS-Vorlage sind ändern, haben Sie eine Standard-Bannergrafik. Sie wollen diese Grafik, um mit der richtigen Größe und Form zu beginnen zu kopieren.
Sie können ein Banner viele Möglichkeiten, bauen, aber hier ist eine einfache Technik, die Sie ändern können:
Laden oder die Grundform erstellen.
Wenn Sie eine Start Grafik verwendet haben, laden Sie es in Gimp. Wenn nicht, erstellen Sie ein neues Bild von der Größe benötigen. Meins ist 100 Pixel hoch und 900 Pixel breit.
Erstellen Sie einen Plasma-Hintergrund.
Verwenden Sie den Plasma-Filter (Filter-Render-Wolken-Plasma), um eine halb-zufälligen Muster zu erstellen. Verwenden Sie die neue Seed und Turbulence Tasten, um den Gesamteindruck zu verändern. Mach dir keine Sorgen über die Farben- Sie sie im nächsten Schritt entfernen.
Nachdem das Plasma Hintergrund vorhanden ist, verwenden Sie das Einfärben Filter eine Farbe dem Hintergrund anzuwenden.
Wählen Sie eine Farbe, die mit Ihrem Thema. Für dieses Beispiel für eine hellere Farbe zu gehen, weil Sie Schatten verwenden, die einen hellen Hintergrund erfordern. Verwenden Sie den Helligkeitsregler eine relativ helle Farbe zu machen.
Erstellen Sie eine Textebene mit dem Textwerkzeug.
Text in einer Grafik sollte groß und fett sein. Das Textwerkzeug erstellt automatisch eine neue Ebene. Nachdem Sie Ihren Text eingeben, geben Sie die Schriftart und Größe.
Duplizieren Sie die Textebene.
Im Ebenen-Bedienfeld, machen Sie eine Kopie der Textebene. Wählen Sie die untere der beiden Textebenen (das ist ein Schatten sein wird).
Blur den Schatten.
Mit der Schattenebene ausgewählt, gelten die Gaußsche Unschärfe (Filter-Blur-Gaussian Blur).
Bewegen Sie den Schatten.
Verwenden Sie das Verschieben-Werkzeug, um die relativen Positionen des Textes und der Schatten zu bewegen. Typischerweise erwarten Benutzer ein Schatten etwas niedriger und rechts des Textes zu sein (Licht, das von oben links kommenden simuliert). Je weiter der Schatten aus dem Text ist, desto höher wird der Text zu schweben.
Machen Sie den Schatten semitransparent.
Mit der Schattenebene zu etwa 50 Prozent immer noch ausgewählt, stellen Sie die Undurchsichtigkeitsregler. Dies wird die Schatten weniger ausgeprägt machen und Teil des Hintergrunds ermöglichen, durch die Schattenebene zu erscheinen.
Saison zu geschmack- Ergänzungen nach Ihren Bedürfnissen zu machen.
Speichern Sie in einer wieder verwendbaren Format.
Das native Format für Bilder in Gimp ist XCF. XCF speichert alles - Ebenen, Einstellungen und alle. Wenn Sie das Banner ändern müssen später (und Sie werden), haben Sie eine gute Version haben aus zu arbeiten.
Wählen Sie Datei-Speichern unter die Datei zu speichern. Wenn Sie die angeben .xcf Erweiterung, Gimp speichert automatisch im Vollformat.
Export in ein web-freundlichem Format.
Im Allgemeinen sollten Sie Banner-Grafiken als PNG oder GIF-Dateien speichern. (Gimp unterstützt beide Formate.) Betrachten Sie PNG, wenn die untere Schicht Transparenz hat (weil einige Browser noch nicht die erweiterten Transparenzfunktionen des PNG-Format unterstützen). Speichern Sie keine Bilder Text im JPG-Format enthält. Das JPG-Komprimierungsschema ist berüchtigt für das Hinzufügen von Artefakten in Text um.
Normalerweise, wenn Sie in ein anderes Format zu speichern, erscheint ein Dialogfeld von Optionen. Im Zweifelsfall gehen mit den Standardwerten.
