ps+div+css erstellt einen blauen Hintergrund – Design der Anmeldeseite

ps+p+css erstellt einen blauen Hintergrund

Kompatibel mit gängigen Browsern sein

Wie entwerfe ich eine Seite?

Wie erreicht man ein besseres Schneiden?

Wie ist die Kompatibilität zu berücksichtigen?

Wie verwende ich p+css, um das prozentuale Layout des Hintergrunds zu erstellen?

Anmeldeseitendesign

Erstes Design in Photoshop

1 und erstellen Sie ein neues 1200px*768px; Öffnen Sie das Ebenenbedienfeld, entsperren Sie es, doppelklicken Sie auf die Hintergrundebene, entsperren Sie es und benennen Sie es: Hintergrundebene

2. Erstellen Sie einen neuen Ordner: Benennen Sie es als Farbsystem, erstellen Sie ein Fügen Sie eine neue Ebene hinzu und bestimmen Sie die Seite, in der die Farbe verwendet werden soll. Wie im Bild gezeigt:

Links: Farbverlauf: Klicken Sie auf Vordergrundfarbe: #2366fe Hintergrund Farbe: # ffffff, wählen Sie das Verlaufswerkzeug von oben nach unten

Rechts: wie oben, Vordergrundfarbe: #009cff Hintergrundfarbe: #ffffff

PS: Ich habe das Farbsystem auf der gewählt Rechts.

3. Erstellen Sie einen Website-Hintergrund.

3-1: Ziehen Sie zuerst die Grundlinie der Seite: Da die Website im Allgemeinen 960 * 768 ist und wenn sie neu erstellt wird, ist sie: 1200 * 768, also gibt es: (1200-960)/ 2=120px auf der linken und rechten Seite leer.

Spezifische Methode: Strg+R, das Lineal wird angezeigt. Klicken Sie von der linken Linealposition aus mit der linken Maustaste, halten Sie sie gedrückt und ziehen Sie nach rechts.

Ziehen Sie jeweils zwei Linien heraus: 120px und 1080px

3-2, wählen Sie „Stroh“-Werkzeuge“ , öffnen Sie die „Farbebene“, wählen Sie eine Farbe aus: Ich habe ausgewählt: #3694cf

Doppelklicken Sie auf die „Hintergrundebene“, um den „Ebenenstil“ zu öffnen, wählen Sie „Verlaufsüberlagerung“ aus und klicken Sie darauf.

Klicken Sie auf 1 im Bild: Farbkartenetikett: Der „Farbwähler“ wird geöffnet. Wählen Sie die Vordergrundfarbe: #3694cf. Nach unten anpassen. Sicher.

Klicken Sie auf 2 im Bild: Farbkartenbezeichnung: wie oben, wählen Sie die Vordergrundfarbe aus: #3694cf, erhöhen Sie sie zuerst und bestätigen Sie.

OK.

Nach der Bestätigung erhalten Sie den Hintergrund wie im Bild gezeigt

3-3: Erstellen Sie einen Hintergrund Highlight: Erstellen Sie eine neue Ebene: Nennen Sie sie Highlights. Klicken Sie auf „Auswahlwerkzeug“ -> „Ellipsenwerkzeug“. Ziehen Sie eine Auswahl im Bild, wie im Bild gezeigt:

Rechtsklick auf die Auswahl -> Feder--> Geben Sie 40px ein, OK

Öffnen Sie das Farbsystem, wählen Sie das „Pipetten-Werkzeug“, klicken Sie auf die Hintergrundfarbe, wählen Sie die Farbe aus und bestätigen Sie. Klicken Sie außerdem auf die Vordergrundfarbe, wählen Sie die Farbe aus und bestätigen Sie: Meine Vordergrundfarbe ist: # d7ecf9 Die Hintergrundfarbe ist: # 5daee2

Wählen Sie den Auswahlmodus „Verlaufswerkzeug“ „Center Gradient“ und Ziehen Sie es von oben nach unten nach unten.

Das letzte Bild:

4, Logo und Titel entwerfen

4-1: Neuen Ordner erstellen, Logo benennen, Reihenfolge anpassen

4-2: Abstandswerkzeug und Parameter auswählen sind wie in der Abbildung gezeigt, wählen Sie den Logo-Ordner aus, klicken Sie auf

4-3: Doppelklicken Sie auf die neu generierte „Form 1“ --> --> Verlaufsüberlagerung --> Farbwert: # 09649e, # 449cd5

wie im Bild gezeigt:

4-4: Überprüfen : Projektion, Parameter wie im Bild gezeigt

4-5: Kontrolle: Strich, die Parameter sind wie im Bild gezeigt

Bestätigen

4-6: Wählen Sie „Textwerkzeug“-->“Geben Sie Text_MT ein“-->Farbe anpassen: „#cbe5f7“-->Größe anpassen_80px--> Position anpassen-->Schriftart festlegen.

4-7: Öffnen Sie „Ebenenstil“ -> Innerer Schatten, die Parameter sind wie in der Abbildung gezeigt:

Die endgültige Abbildung ist wie folgt angezeigt:

5: Systemtitel

5-1: Wählen Sie „Textwerkzeug“--> „Eingabetext_XXX-Verwaltungssystem“--> Farbe anpassen: „# e7f5fd“-->Größe anpassen_50px-->Position anpassen-->Schriftart festlegen.

5-2: Stil festlegen:

5-3-1: Reflexion hinzufügen-->Zuerst In der Ebene „XXX Management System“--> Drücken Sie: Strg+J, kopieren Sie eine Ebene;--> Holen Sie sich „XXX Management System Copy“--> Klicken Sie mit der rechten Maustaste auf „XXX Management System Copy“--> Wählen Sie „Text rastern“-->Holen Sie sich die Ebene „XXX Management System Copy“-->Erstellen Sie eine neue Ebene 3 und platzieren Sie sie unter „XXX Management System Copy“-->Wählen Sie die Ebene „XXX Management System Copy“ -->Strg+E Ebenen nach unten zusammenführen, um „Ebene 3“ zu erhalten

Zugehörige Bilder:

Vor der Rasterung:

Nach der Rasterung:

Vor dem Zusammenführen mit Schicht 3:

Nach dem Zusammenführen mit Schicht 3:

ps: Achten Sie auf den roten Teil, sonst wird die Zusammenführung nicht den Effekt erzielen

5-3-2: Ebene 3 auswählen: Strg+T, Position auf „XXX Management System“ verschieben " Direkt darunter positionieren, umdrehen und neigen, das Ergebnis ist wie in der Abbildung gezeigt, bestätigen

5-3-3: Ebene 3 auswählen, Maske hinzufügen

5-3-4, wählen Sie die Maske „Ebene 3“-->Ändern Sie „Vordergrundfarbe in: Weiß“, Hintergrundfarbe in: „Schwarz“ -- >Wählen Sie das "Verlaufswerkzeug" aus.-->Von oben nach unten nach unten ziehen. Wie im Bild gezeigt,

Beachten Sie hier: Die Oberseite ist etwas länger und die Unterseite reicht gerade bis zum Ende der Schriftart

Zu diesem Zeitpunkt ist der Effekt:

Schicht:

6, Anmeldemodul erstellen und einen neuen Anmeldeordner erstellen, unter dem Logo platzieren

6-1: Hintergrund erstellen, „Entfernungswerkzeug“ auswählen, der Logarithmus lautet wie folgt:

6-2-1: Holen Sie sich die Form „Ebene 2“--> Öffnen Sie „Ebenenstil“--> : #09649e, #449cd5.

6-2-2: Aktivieren Sie „Projektion“. Die Parameter sind wie in der Abbildung dargestellt:

6-2-3: Aktivieren Sie „Hub“. ", Die Parameter sind wie im Bild gezeigt:

6-2-4: Überprüfen Sie den Parameter „Inner Glow“ wie im Bild gezeigt:

6-3: Passen Sie die Position nach Bedarf an.

6-4: Befolgen Sie Schritt 5-3, um einen Hintergrund für „Form 2“ zu erstellen. Danach ist der endgültige Effekt wie folgt:

6- 5-1: Hier werden zwei Symbole verwendet. Die Verarbeitungsmethode ist wie folgt:

Strg+T-->Größe anpassen-->„Ebenenstil“ hinzufügen-->„Verlaufsfüllung“ aktivieren, Parameter „#80aed1, #c9e0f3“- - >Überprüfen Sie die „Schatten“-Parameter: Abstand: 1 Pixel, Größe: 2 Pixel, Deckkraft: 30 %, der Effekt ist wie folgt:

6-5-2: Erstellen Sie ein Textfeld und wählen Sie die Parameter „Distanzwerkzeug“ wie folgt aus

6-5 -3: Zeichnen Sie ein Textfeld, passen Sie die Größe an, passen Sie die Position an und fügen Sie einen „Ebenenstil“ hinzu. Die Parameter lauten wie folgt:

Der Effekt ist wie folgt:

Ein weiteres Textfeld mit Fokus erstellen:

Strg+J zu Kopieren Sie eine Ebene, doppelklicken Sie, um den „Ebenenstil“ zu ändern. Die Parameter lauten wie folgt:

Der Fokuseffekt ist wie folgt :

6-4: Passwortfeld, Bestätigungscode-Eingabefeld, kopieren Sie eines und passen Sie die Position an:

Der Effekt ist wie folgt:

7: Erstellung der Anmeldeschaltfläche.

7-1: Befolgen Sie die Schritte: 6-5-2, um eine abgerundete Eckenform zu zeichnen, die Größe wird angepasst, der abgerundete Eckenradius wird empfohlen: 4px; passen Sie die Position an,

7-2: Öffnen Sie „Ebenenstil“. Die Parameter lauten wie folgt:

Effekt:

7-3: Erstellen Sie eine Schaltfläche, die den Fokus erhält, und ändern Sie den Stil wie gezeigt:

Effekt:

Das Design ist jetzt fertig

Sehen Sie sich die endgültige Dateistruktur an:

Die endgültige Darstellung:

Bitte geben Sie die Quelle für den Nachdruck an: http:// / www.php.cn/

Weitere Artikel zum Thema ps+div+css zum Erstellen eines blauen Hintergrunds – Anmeldeseitendesign finden Sie auf der chinesischen PHP-Website!