Share
Was Sie erstellen werdenIn diesem Lernprogramm werde ich Sie durch den Prozess der Erstellung komplexer Web-Elemente in Photoshop führen, ohne jedoch eine einzelne Bilddatei in Ihrer fertigen Website zu verwenden. Wenn Sie fertig sind, haben Sie ein einziges Seitenlayout mit allen UI-Elementen, die Sie im Vorschaubild oben sehen. Es werden nur CSS3-, Base64-Code- und -Symbolsymbole verwendet.
Wenn Sie ein Design ohne Bild erstellen, können Sie die Ladezeit und die Anzahl der HTTP-Anforderungen auf ein absolutes Minimum beschränken und gleichzeitig die höchstmögliche Flexibilität Ihrer UI-Elemente erreichen. Pure-Code-Elemente der Benutzeroberfläche lassen sich schnell und einfach über CSS so anpassen, dass statische Bilder nicht manuell bearbeitet und erneut exportiert werden können.
Damit dies alles möglich wird, verwenden wir vier Schlüsselressourcen:
* Sie können einen anderen Präprozessor verwenden, wenn Sie möchten.
Durch das Zusammenführen dieser Elemente ist es möglich, ein reines Code-Design zu generieren, das mit dem ursprünglichen PSD nahezu identisch ist:
Die PSD
Das reine Code-Ergebnis (in Firefox angezeigt)Dieses Tutorial besteht aus zwei Teilen:
In diesem ersten Teil werden wir die Techniken demonstrieren, die Sie beim Erstellen eines CSS3- und Base64-freundlichen Designs in Photoshop verwenden können. Während wir heutzutage mit reinem Code viel erreichen können, können wir noch nicht alles übersetzen, was Sie in Photoshop finden. Daher ist es wichtig, die "Dos" und "Don'ts" im Auge zu behalten, wenn Sie losfahren.
Beginnen wir mit einem kurzen Überblick über CSSHat und PNGHat, die Photoshop-Plugins, mit denen wir unseren CSS3- und Base64-Code generieren.
Wenn das CSSHat-Plugin installiert ist, können Sie auf eine beliebige Ebene in Ihrem Photoshop-Dokument klicken. Das CSSHat-Fenster gibt sofort produktionsbereiten Code für Sie aus.
CSSHat wird in erster Linie von den Ebenenstileinstellungen aus interpretiert. Sie sollten also Ihre Farbverläufe und Ränder über Ebenenstile anstatt über eine der alternativen Methoden von Photoshop hinzufügen.
Accentsconagua
px (wahlweise)Schriftfamilie, Schriftgröße, Schriftgewicht (fett / normal), Schriftstil PNGHat kann viele Dinge tun. Weitere Informationen zum Exportieren von Photoshop-Assets für das Web mit PNGHat erhalten Sie einen vollständigen Überblick über das Plugin.
In diesem Tutorial verwenden wir es, um Base64-Code zu generieren, der das Hintergrundbild des Designs bildet. Sie werden in Kürze sehen, wie das in der Praxis funktioniert.
Wenn ein Bild in Base64 konvertiert wird, erhalten Sie eine Textzeichenfolge, die direkt in CSS integriert werden kann. Je mehr Daten sich im Bild befinden, desto länger ist die Zeichenfolge. Daher eignet sich Base64 am besten für das einfache Kacheln von Bildern mit wenigen Farben.
Um den Ball ins Rollen zu bringen, brauchst du ein paar Dinge.
Zunächst sollten Sie die Plugins CSSHat und PNGHat installiert haben.
Wenn Sie keine Kopie von CSSHat erwerben können, können Sie weiterhin die integrierte "CSS-Funktion" von Photoshop verwenden und verwenden, die aus dem Kontextmenü ausgewählt werden kann, nachdem Sie mit der rechten Maustaste auf eine beliebige Ebene geklickt haben.
In diesem Fall müssen Sie jedoch unerwünschten Standardcode für Dinge wie absolute Positionierung, Z-Index, Dimensionen und Klassennamen manuell entfernen. Es behandelt auch nicht die Erzeugung mehrerer Schatten und Verläufe sowie CSSHat und kann keinen LESS-, Sass / SCSS- oder Stylus-Ready-Code erzeugen.
Wenn Sie PNGHat nicht kaufen können, können Sie das Hintergrundbild manuell exportieren und dann über einen Online-Konverter wie http://webcodertools.com/imagetobase64converter übertragen
Ich empfehle außerdem ein drittes Plugin mit dem Namen Subtle Patterns. Dieses hinzugefügte Plugin fügt Photoshop eine Bibliothek mit Hunderten von Mustern hinzu, die sofort als Musterüberlagerung auf eine beliebige Ebene angewendet werden können.
Als Alternative zur Verwendung des Subtle Patterns-Plugins können Sie die Muster einfach durchsuchen und kostenlos herunterladen.
Hinweis: Ich weiß, was Sie sich fragen - Das ist eine Menge Zeug von Source, ist dies ein gesponserter Beitrag? Nein. Die Wahrheit ist, ich habe die gesamte Produktpalette von Source gekauft, lange bevor ich mit Tuts + begann, und ich liebe jeden von ihnen, weil er so viele Stunden in meinen Tag zurückgelegt hat. Ich empfehle diese Plugins, weil mich meine eigene Erfahrung mit der gesamten Suite so beeindruckt hat.
Wir fügen einige Symbole in Ihr Design über Font Awesome ein. Sie müssen also die Schriftart herunterladen und auf Ihrem System installieren.
Die Schriftart des regulären Textes ist Roboto, daher müssen Sie diesen auch installieren. Sie können es von Google Webfonts beziehen.
Erstellen Sie ein neues Photoshop-Dokument mit einer Größe von 1600px x 2180px. Doppelklicken Sie auf die Standardebene "Background", um sie zu entsperren, und speichern Sie dann Ihre PSD.
In dem Subtile Muster Fenster (oder Website), suchen nach Satinbindung. Wenn Sie es finden, mit Ihrem Hintergrund Klicken Sie auf die Kachel des Musters, um es automatisch als Musterüberlagerung anzuwenden.
Sie sollten jetzt einige subtile vertikale Graustufenlinien auf Ihrer Leinwand sehen. Wir haben dieses Muster als geeignet für die Konvertierung in Base64 ausgewählt, da es nur wenige Farben verwendet und nur 24 x 12 Pixel groß ist. Dies bedeutet, dass eine relativ kleine Code-Zeichenfolge erzeugt wird.
Erstellen Sie zum Erstellen eines Rahmens auf der Seite ein Rechteck am oberen Rand Ihrer Leinwand, wobei die gesamte Breite und durchlaufen wird 8px in der Höhe. Vergeben Sie diese Eigenschaften:
Füllfarbe: #dddddd
Opazität: 50%
Ebenenstil> Inner Shadow:
Normal # c8c8c8 100% -90 2 4 Ebenenstil> Schlagschatten:
Normal #ffffff 100% 90 2 1 Ihr "oberer Besatz" sollte so aussehen:
Wenn Sie dieses Menü erstellen, sehen Sie einige der Effekte, die mit Farbverläufen, Schatten und Konturen erstellt werden können. Wir wollen ein sauberes, erhöhtes Menü, das sich in einem Inset-Wrapper befindet.
Zunächst erstellen wir den Inset-Wrapper, der das Menü enthalten wird. Erstellen Sie ein zentriertes, abgerundetes Eckenrechteck auf Ihrer Leinwand bei 1200px breit durch 61px hoch. Legen Sie die folgenden Eigenschaften fest:
Füllfarbe: # f9f9f9 - Beachten Sie, dass in diesem Rechteck zwar ein Farbverlauf vorhanden ist, Sie jedoch eine Füllfarbe als Fallback festlegen möchten.
Eigenschaften> Live-Shape-Eigenschaften> Eckenradius: 12px
Ebenenstil> Inner Shadow:
Normal # 000000 fünfzehn% 90 1 10 Ebenenstil> Verlaufsüberlagerung:
#ffffff # f3f3f3 Linear Ebenenstil> Schlagschatten:
Normal #ffffff 100% 90 1 2 Ihr Menü-Wrapper sollte jetzt so aussehen:
Erstellen Sie ein zweites Rechteck mit abgerundeten Ecken über Ihrem Menü-Wrapper, um 1190px breit durch 50px hoch, mit der oberen linken Ecke 5px weiter rechts und unten als die obere linke Ecke des Menü-Wrappers. Fügen Sie diese Eigenschaften hinzu:
Füllfarbe: #ffffff
Eigenschaften> Live-Shape-Eigenschaften> Eckenradius: 10px
Ebenenstil> Strich:
1 draußen # e4e4e4 Ebenenstil> Verlaufsüberlagerung:
# e5e5e5 #ffffff Linear Ebenenstil> Schlagschatten:
Normal # c1c1c1 100% 90 3 4 Sie sollten jetzt haben:
Erstellen Sie ein weiteres Rechteck, diesmal um 130px breit durch 51px hoch, direkt über dem "menühintergrund" -Balken. Geben Sie diese Verlaufsüberlagerung ein:
Ebenenstil> Verlaufsüberlagerung:
#efefef # e4e4e4 #fcfcfc Linear Fügen Sie nun Platzhaltertext hinzu: Geben Sie das Wort "Page" ein und positionieren Sie es mit den folgenden Einstellungen in der Mitte Ihrer Menüelemente:
Zeichen> Schrift: Roboto, regelmäßig
Zeichen> Schriftgröße: 18px
Zeichen> Farbe: # 5c5c5c
Ebenenstil> Schlagschatten:
Normal #ffffff 100% 90 1 0 Ihr Menüpunkt sollte so aussehen:
Erstellen Sie ein Duplikat des Rechtecks und des Texts des Menüelements und verschieben Sie ihn nach rechts, sodass er direkt neben dem Original liegt. Bearbeiten Sie den Text, um "Aktuell" zu lesen.
Legen Sie die Ebenenstileigenschaften des Rechtecks fest auf:
Ebenenstil> Strich:
1 draußen # e62d4ee4e4e4 Ebenenstil> Inner Shadow:
Normal # faabb9 60% 90 3 5 Ebenenstil> Verlaufsüberlagerung:
# ef3d5d # dc2345 # fc6c86 Linear Ebenenstil> Schlagschatten:
Normal # cc2241 100% 90 1 0 Ändern Sie dann die Einstellungen für Textfarbe und Schlagschatten in:
Zeichen> Farbe: #ffffff
Ebenenstil> Schlagschatten:
Normal # b50020 100% 90 1 0 Wenn Sie mit dem obigen Schritt fertig sind, machen Sie noch einige Duplikate des ursprünglichen "Menüelements" und platzieren Sie diese rechts neben dem "aktuellen Menüelement". Wir machen dies, um zu sehen, wie die Menüelementstile aussehen, wenn sie bündig aneinander sitzen, um sicherzustellen, dass eine angemessene visuelle Trennung von einem Element zum nächsten besteht.
Leider gibt es in Photoshop keine Möglichkeit, etwas wie "Rahmen links" festzulegen. Daher können wir links und rechts nicht direkt an den Rechtecken des Menüelements festlegen. Wir müssen den Effekt jedoch noch simulieren, um eine Trennung zwischen den einzelnen Elementen zu erreichen. Verwenden Sie das Linien-Werkzeug von Photoshop, um einige zu zeichnen 1px breite vertikale Linien zwischen den Menüelementen und setzen deren Füllfarbe auf #dddddd
Mit all diesen Elementen sollten Sie Folgendes haben:
Wenn Sie dieses Layout für einen Client verwenden, ist dies der Bereich, in dem Sie den Hauptinteressenspunkt oder den Aufruf zur Aktion hinzufügen würden. Für dieses Tutorial fügen Sie die folgenden vier Zeilen hinzu, die alle auf der Seite zentriert sind:
Geben Sie der ersten und dritten Zeile die folgenden Einstellungen an:
Zeichen> Schrift: Roboto, dünn
Zeichen> Schriftgröße: 48px
Zeichen> Farbe: # 6b6b6b
Geben Sie dann der zweiten und vierten Zeile diese Einstellungen an:
Zeichen> Schrift: Roboto, Fett
Zeichen> Schriftgröße: 80px
Zeichen> Farbe: # ef3d5d
Ihr Text sollte jetzt so aussehen:
Erstellen Sie unter dem Haupttext ein abgerundetes Rechteck 1200px breit durch 665px hoch. Geben Sie diese Einstellungen an:
Füllfarbe: #ffffff
Eigenschaften> Live-Shape-Eigenschaften> Eckenradius: 15px
Ebenenstil> Strich:
1 Innerhalb # d8d8d8 Ebenenstil> Schlagschatten:
Normal # c1c1c1 27% 90 3 4 Dann, 60px Erstellen Sie unterhalb des Bedienfeldhintergrunds ein weiteres Rechteck mit abgerundeten Ecken. Es sollte sein 1230px breit und 70px hoch. Zentrieren Sie es auf der Leinwand, damit es durchsteht 15px auf beiden Seiten des Bedienfeldhintergrunds. Vergeben Sie diese Eigenschaften:
Füllfarbe: # ef3d5d
Eigenschaften> Live-Shape-Eigenschaften> Eckenradius: 10px
Ebenenstil> Inner Shadow:
Normal # de2a4a 60% 90 0 5 Ebenenstil> Verlaufsüberlagerung:
# ef2c4f # dc2345 # fc6c86 Linear Ebenenstil> Schlagschatten:
Normal # cc2241 100% 90 3 0 Wir haben bereits einen Schlagschatten auf das gerade erstellte Rechteck gesetzt, wodurch es einen subtilen 3D-Effekt erhält. Wir möchten aber auch einen zweiten Schatten, der wie ein Schatten aussieht, der von einem Downlight geworfen wird. Da wir die Schlagschatteneigenschaft des vorhandenen Rechtecks bereits "verbraucht" haben, müssen wir ein zweites Rechteck erstellen, auf das ein zweiter Schatten angewendet wird.
Duplizieren Sie das Rechteck des Bedienfeldhintergrunds, ziehen Sie es im Ebenenbedienfeld unter das Original, und löschen Sie den vorhandenen Ebenenstil. Nennen Sie es "Panelheadershadow", damit Sie die beiden Ebenen leicht voneinander unterscheiden können. Geben Sie diese Schlagschatteneinstellungen an:
Ebenenstil> Schlagschatten:
Normal # 000000 27% 90 5 3 Direkt über der Mitte des Hintergrunds der Panel-Kopfzeile geben Sie "IN DIESES TUTORIAL:" ein und geben dem Text folgende Einstellungen:
Zeichen> Schrift: Roboto, regelmäßig
Zeichen> Schriftgröße: 24px
Zeichen> Farbe: #ffffff
Ebenenstil> Schlagschatten:
Normal # b50020 100% 90 1 0 Fügen Sie abschließend folgende Textzeilen hinzu:
Setze die erste Menge Text auf:
Zeichen> Schrift: Roboto, dünn
Zeichen> Schriftgröße: 36px
Zeichen> Farbe: # 6b6b6b
Und die zweite Menge Text an:
Zeichen> Schrift: Roboto, Schwarz
Zeichen> Schriftgröße: 48px
Zeichen> Farbe: # 6b6b6b
Markieren Sie dann jedes der "+" - Symbole und stellen Sie deren Farbe auf: # ef3d5d
Sie sollten jetzt ein Infopanel haben, das folgendermaßen aussieht:
Hier setzen wir Font Awesome ein. Wir werden das Symbol "fa-down-arrow" platzieren und dieses anstelle eines Bildes verwenden.
Der einfachste Weg, dies zu tun, besteht darin, den entsprechenden "Buchstaben" in den Cache zu bekommen, indem Sie das Cheatsheet Font Awesome aufrufen. Suchen Sie das Symbol "fa-down-arrow", markieren Sie die kleine Bildvorschau und drücken Sie STRG / CMD + C
Markieren und kopieren Sie den kleinen Pfeil nach untenGehen Sie zurück zu Ihrer Leinwand, setzen Sie einen Cursor mit dem Textwerkzeug und fügen Sie den gerade kopierten Buchstaben ein. Zuerst sehen Sie nur ein lustiges kleines Rechteck mit einem Kreuz. Ändern Sie Ihre Einstellungen also folgendermaßen:
Zeichen> Schrift: FontAwesome
Zeichen> Schriftgröße: 200px
Zeichen> Farbe: # 6b6b6b
Stellen Sie sicher, dass der Pfeil auf der Leinwand zentriert ist, und setzen Sie die Deckkraft der Ebene auf 30%. Sie sollten jetzt diesen cool aussehenden Pfeil haben:
Erstellen Sie ein neues Rechteck mit abgerundeten Ecken, 420px breit durch 105px hoch. Die Schaltfläche verwendet genau die gleichen Layer-Stileigenschaften wie der Hintergrund des Panel-Headers, sodass Sie diese Layer-Stile einfach kopieren können. Klicken Sie mit der rechten Maustaste auf die Ebene des Hintergrunds der Bedienfeldkopfzeile und wählen Sie "Ebenenstil kopieren". Klicken Sie dann mit der rechten Maustaste auf Ihre neue Schaltflächenebene und wählen Sie "Ebenenstil einfügen"..
Wie beim Hintergrund des Bedienfeld-Headers möchten wir für diese Schaltfläche ein zweites Rechteck erstellen, auf das ein zweiter Schatten angewendet werden kann. Duplizieren Sie Ihre Schaltflächenebene und ziehen Sie sie in der Ebenenpalette unter das Original". Kopieren Sie den Ebenenstil aus der Ebene "panelheadershadow", die Sie zuvor erstellt haben, und fügen Sie ihn in Ihren neuen Schatten ein" Schicht.
Wir fügen der Schaltfläche einen kleinen Kreis hinzu, der wie eine kleine Vertiefung aussehen wird, und setzen dann einen nach rechts zeigenden weißen Pfeil darauf.
Erstellen Sie einen Kreis (Ellipse) über der Schaltfläche um 47px durch 47px. Positionieren Sie es so, dass es den gleichen Abstand von der oberen, linken und unteren Kante des Schaltflächenhintergrunds hat, und weisen Sie ihm die Verlaufsüberlagerung zu:
Ebenenstil> Verlaufsüberlagerung:
# f04f6c # e32d4f Linear Um den Pfeil nach rechts zu erstellen, verwenden wir wieder FontAwesome. Gehe zurück zum Cheatsheet und kopiere diesmal die fa-caret-right Symbol. Verwenden Sie auf Ihrer Leinwand das Textwerkzeug, um den Cursor über dem soeben erstellten Kreis zu positionieren und in das Symbol / das Zeichen "Fantastische Schrift" einzufügen. Vergeben Sie diese Eigenschaften:
Zeichen> Schrift: FontAwesome
Zeichen> Schriftgröße: 36px
Zeichen> Farbe: #ffffff
Positionieren Sie den neu erstellten weißen Pfeil in der Mitte des darüber befindlichen Kreises.
Geben Sie über der Schaltfläche rechts neben dem Kreis und dem Pfeil "Start the Tutorial" ein und geben Sie dem Text folgende Einstellungen:
Zeichen> Schrift: Roboto, regelmäßig
Zeichen> Schriftgröße: 36px
Zeichen> Farbe: #ffffff
Dieser Text verwendet denselben Schlagschatten wie der "Panel-Kopfzeilentext", sodass Sie den Stil aus diesem Text kopieren und in diese Ebene einfügen können.
Sie sollten jetzt eine Schaltfläche haben, die folgendermaßen aussieht:
Wir werden jetzt das letzte Element des Designs hinzufügen, ein paar Beschneidungen an der Unterseite, um den Rahmen abzuschließen. Wenn dieses Element verschlüsselt ist, verwenden wir separate Einstellungen für den oberen und den unteren Rand. Da Photoshop dies jedoch nicht erleichtern kann, werden stattdessen wieder Formwerkzeuge verwendet, damit wir die richtigen Farben einsetzen können.
Erstellen Sie unter der Startschaltfläche ein Rechteck mit einer Füllfarbe von #dddddd das ist 5px hoch und erstreckt sich über die gesamte Seitenbreite. Duplizieren Sie das neue Rechteck und verschieben Sie es nach unten 10px also gibt es eine 5px Lücke zwischen den beiden Rechtecken.
Zeichnen Sie in der Mitte Ihrer Leinwand und über den beiden grauen Linien / Rechtecken einen Kreis 40px durch 40px und gib diese Eigenschaften:
Füllfarbe: # f2f2f2
Ebenenstil> Strich:
5 Innerhalb #dddddd Ebenenstil> Verlaufsüberlagerung:
#dddddd # f2f2f2 Radial Achten Sie besonders auf die Einstellungen der Verlaufsüberlagerung, da sie sich von den zuvor verwendeten unterscheiden. Die Farbstopps werden bei 40% und 45% anstatt bei 0% und 100% platziert, und wir verwenden einen radialen Farbverlauf anstelle eines linearen Verlaufs. Zusammen mit dem Rand / Strich ergibt dies die Wirkung eines kleinen grauen Kreises, der von einem größeren Kreis umgeben ist.
Ihre untere Leiste sollte so aussehen:
Sie sollten jetzt ein komplettes PSD-Design haben, das zu 100% in reinen CSS3- und Base64-Code übersetzt werden kann:
Im folgenden Teil dieses Tutorials:
wir sehen uns später!
