Share
Gute Designs sollten niemals verschwendet werden. Dieses Design wurde ursprünglich für einen Kunden erstellt, der nie bezahlt hat. Da es so überwältigendes positives Feedback gab, entschied ich mich, ein Tutorial dafür zu erstellen. Reichhaltige und cremige Texturen geben diesem Design ein einzigartiges Thema. Ich hoffe du liebst Kaffee!
Wir verschenken nicht nur die Photoshop-Dateien für dieses Design, sondern auch die HTML-Dateien, damit Sie nach der Designphase herausfinden können, wie sie codiert wurden! Sie sollten dieses Lernprogramm von Anfang an durcharbeiten, aber Sie können auch die Quelldateien mitnehmen.
Wie bei jedem Design benötigen wir ein gutes Raster, um loszulegen. Ich beginne immer mit einem Dokument, das 960 Pixel breit ist (was die Breite unserer Seite sein wird). Stellen Sie sicher, dass Ihr Dokument genügend Höhe hat, um alle Elemente zu berücksichtigen, die wir erstellen werden. Ich habe 1100px ausgewählt.
Ziehen Sie Hilfslinien an die Seiten Ihres Dokuments. Diese dienen als Dachrinnen für unseren Designbereich, der 960 Pixel breit sein wird. Ziehen Sie die Hilfslinien bei 10px und 960px in die Horizontale. Diese dienen als Identitätsmerkmal, um alles auf dem richtigen Platz zu halten, wenn wir die Seite nach unten bewegen.
Wenn Sie Ihre Richtlinien festgelegt haben, gehen Sie zu Bild -> Leinwandgröße und ändern Sie den Wert Ihrer Leinwandbreite in 1000px. Dies gibt uns ein wenig mehr Platz für die Arbeit an den Außenseiten und zeigt, wie die Website im Browser erweitert wird.
Die obere linke Ecke Ihres Dokuments sollte folgendermaßen aussehen:
Wir müssen ein paar weitere Richtlinien erstellen, da wir ein paar Spalten haben, die vertikal auf der Seite verlaufen. Erstellen Sie 6 weitere vertikale Hilfslinien bei 330px, 350px, 650px, 670px, 730px und 750px. Diese sollten uns helfen, alles in Ordnung zu bringen.
Als Nächstes füllen wir den Hintergrund aus. Offensichtlich gehen wir auf Braun, weil es reich ist (und die Farbe des Kaffees). Erstellen Sie zunächst eine neue Ebene und füllen Sie das gesamte Dokument mit einer beliebigen Farbe (wir werden es mit Ebenenstilen ändern). Sie können dies schnell tun, indem Sie die Umschalttaste + F5 drücken, um "Füllen" zu aktivieren..
Benennen Sie diese Ebene in "bg" um und klicken Sie in der Ebenen-Palette mit der rechten Maustaste darauf, und wählen Sie "Fülloptionen" aus. Wählen Sie "Verlaufsüberlagerung" und erstellen Sie einen Verlauf von # 67331c bis # 2e1308. Wir wollen das dunkle Braun am oberen Rand der Seite und das hellere Braun am unteren Rand.
Jetzt müssen wir etwas Textur hinzufügen, damit der Verlauf nicht so flach wirkt. Erstellen Sie eine neue Ebene über Ihrer Ebene "bg" und benennen Sie diese Ebene "Muster"..
Das Ergebnis sollte ungefähr so aussehen:
Nachdem wir unseren Hintergrund erstellt haben, beginnen wir mit der Erstellung einiger Elemente auf der Seite - beginnend mit dieser ausgefallenen gelben Navigationsleiste.
Erstellen Sie eine neue Ebenengruppe und benennen Sie diese Gruppe in "Navigation" um. Erstellen Sie in der Gruppe "Navigation" eine Auswahl, die 100 Pixel groß ist und die gesamte Breite Ihres Dokuments aufweist. Erstellen Sie eine neue Ebene und drücken Sie Umschalt + F5, um die Ebene zu füllen. Verwenden Sie als Füllfarbe # edd38d (gelb). Benennen Sie diese Ebene in der Gruppe "Navigation" in "bg" um.
Sie haben jetzt Ihre Navigationsleiste. Es sieht ein wenig flach aus, also fügen wir einige Layer-Styles hinzu, um es etwas mehr hervorzuheben. Klicken Sie mit der rechten Maustaste auf die Ebene "bg" und wählen Sie Mischoptionen aus.
Die "Navigationsleiste" sollte folgendermaßen aussehen:
Wieder brauchen wir etwas Textur - sonst sieht es flach aus. Ich verwendete diese sandartige Textur, die ich herumliegen hatte. Der wichtige Teil hier ist die Farbe. Sie können jede gewünschte Textur verwenden, die Farbe sollte jedoch der zuvor verwendeten Füllfarbe entsprechen. Fügen Sie diese Textur in einer neuen Ebene über der zuvor erstellten Ebene "bg" hinzu, und legen Sie die Deckkraft auf 30% fest. Benennen Sie diese Ebenentextur um und stellen Sie sicher, dass sie exakt die gleichen Abmessungen wie die "bg" -Ebene hat.
Wir möchten dem gelben Balken ein wenig mehr Tiefe verleihen, so dass wir manuell einen dunkleren Schatten am unteren Rand erzeugen. Treffen Sie dazu eine Auswahl unten in der gelben Leiste und erstellen Sie eine neue Ebene.
Füllen Sie diese neue Ebene mit einem Farbverlauf (Umsch + F5) von Transparent zu # 2f1408 (bei 30% Deckkraft).
Das sollte es für die gelbe Leiste tun. Es sollte ungefähr so aussehen:
Erstellen Sie eine neue Gruppe mit dem Namen "Nav" und erstellen Sie den folgenden Text und die darin enthaltenen Ebenen.
Ziemlich einfache Navigation hier, groß und gut lesbar. Die Schrift ist Georgia, 30px. Stellen Sie sicher, dass Ihr Text einen guten Abstand zwischen den einzelnen Wörtern hat (um mögliche aktive Zustände zu ermöglichen). Machen Sie die Textfarbe # 92583f mit dem aktiven Element (in diesem Fall "Home") # 64311b.
Um die "aktive" Unterstreichung für die Navigation zu erstellen, habe ich das Pinselwerkzeug verwendet, um eine etwas betitelte Unterstreichung zu beobachten. Dadurch wird das Logo mit dem Rest der Site verbunden. Machen Sie sich keine Sorgen, wenn Sie es beim ersten Versuch nicht richtig verstehen - ich habe es wahrscheinlich 50 Mal gezeichnet, bevor ich die Linie fand, die ich mochte.
Jetzt brauchen wir den "Anmelden" -Button. Duplizieren Sie den Navigationstext (wählen Sie die Textebene und Befehlstaste + J) und ändern Sie die Wörter in "Anmelden"..
Wählen Sie als Nächstes das abgerundete Rechteckwerkzeug aus und zeichnen Sie ein Rechteck mit Radius 20px. Dies gibt uns die Form um den Sign Up-Text.
Setzen Sie die Füllung dieser Ebene auf 0% und wenden Sie die folgenden Ebenenstile an:
Um das Logo zu erstellen, fand ich eine freie Serviette und schnitt die Kanten ein wenig ab. Sie finden Ihre eigenen auf: iStockPhoto oder anderen kostenlosen Websites.
Ich fügte einen Schlagschatten hinzu, um den Anschein zu erwecken, dass die Serviette über allem anderen saß:
Ich verwendete eine Stammtextur eines Kaffeeflecks (um unserer Kaffeeseite und Serviette etwas mehr Authentizität zu verleihen). Möglicherweise müssen Sie an der Deckkraft basteln, bis sie richtig aussieht. Sie können auch versuchen, den Mischmodus des Flecks auf Multiplizieren zu setzen, um ihn etwas mehr hervorzuheben.
Für den Rest des Logos wählte ich eine Handschrift und zeichnete schnell eine Kaffeetasse. Nichts zu knifflig hier.
Wir erstellen jetzt dieses durchscheinende Suchfeld. Erstellen Sie eine neue Ebenengruppe unter den "gelben Balken", da die Suchleiste wie eine Registerkarte erscheinen soll, die unter der Kopfzeile hervorsteht. Ihr Ebenenstapel sollte ungefähr so aussehen:
Wir beginnen mit dem Erstellen des abgerundeten Rechtecks, in dem sich die Suchleiste befindet. Schnappen Sie sich das abgerundete Rechteckwerkzeug und erstellen Sie ein Rechteck, das 300 Pixel breit und etwa 70 Pixel hoch ist. Stellen Sie sicher, dass das Rechteck in unsere "rechte Spalte" mit den Hilfslinien passt, die wir im ersten Schritt dieses Lernprogramms erstellt haben.
Das Ergebnis sollte so aussehen:
Als Nächstes erstellen wir das Eingabefeld mit dem Werkzeug "Abgerundetes Rechteck". Erstellen Sie ein Rechteck mit Radius 5px, Breite: 280px, Höhe: 30px. Zentrieren Sie dieses neue Rechteck innerhalb des zuvor erstellten "Container" -Rechtecks. Benenne diese Ebene in "Eingabe" um
Schnappen Sie sich das Textwerkzeug und fügen Sie Text mit # af8753 als Farbe hinzu. Wählen Sie Ihr Lieblingssymbol (ich empfehle die Verwendung von IconFinder für Symbole)..
Nachdem wir nun den gesamten Header erstellt haben, können wir uns nun mit dem tatsächlichen Inhalt befassen. Wir werden zuerst diese 3 Hauptbereiche erstellen. Schnappen Sie sich erneut das abgerundete Rechteckwerkzeug mit einem Radius von 20px und erstellen Sie 3 abgerundete Rechtecke in den 3 Spalten, die wir zuvor erstellt haben.
Um diese Felder so aussehen zu lassen, wie ich sie gerade im Screenshot gezeigt habe, wenden Sie die folgenden Ebenenstile an:
Ich habe im Internet einige tolle Kaffee-Icons gefunden, die perfekt zum Design passen, das ich in diesen 3 Abschnitten verwendet habe. Wieder einmal nutzen wir nur unsere Ressourcen - und es macht keinen Sinn, das Rad hier nachzubilden.
Ich habe dann eine Überschrift mit der gleichen Schriftart Georgia und einigem Text mit Aufzählungszeichen hinzugefügt, und dieser Abschnitt ist fertig.
Da das Design im gesamten Design Transparenz verwendet, sollten die Tabellenstile nicht anders sein. Der Tisch ist sauber und schlicht, sodass er sich perfekt in das Design einfügt.
Schnappen Sie sich das Laufschrift-Werkzeug und erstellen Sie eine quadratische Auswahl, wo Sie Ihren Tisch haben möchten. Mein Tisch ist 700px breit (nach den zuvor festgelegten Richtlinien) und 220px groß.
Erstellen Sie eine neue Ebene, und füllen Sie diese Ebene (Umschalt + F5) mit einem dunkleren Braun (Ich wählte # 3c2014). Benennen Sie diese Ebene in "table bg" um und setzen Sie die Deckkraft auf 70%. Mit dem Einzeilenauswahlwerkzeug erstellen wir nun die Trennung zwischen Spalten und Zeilen. Wenn Sie den gewünschten Bereich für Ihre Unterteilungen ausgewählt haben, klicken Sie auf Löschen und entfernen Sie die gefüllten Pixel aus der Ebene "table bg".
Sie sollten jetzt ein schönes Tabellenraster haben:
Ich benutze Georgia, um die Zellen mit Text auszufüllen, und ich überlasse es Ihnen, Farben / Größen auszuwählen. Stellen Sie sicher, dass Sie die Hauptüberschrift und die Tabellenüberschriften hinzufügen.
Jetzt erstellen wir die Bewertungssymbole. Für die "Preis" -Bewertungen wählte ich eine Schrift mit einem starken Dollarzeichen und wendete einige Ebenenstile darauf an. Wenn Sie Ihre Schrift gefunden haben, geben Sie 4 Dollar-Zeichen ein. Duplizieren Sie diese Ebene, verschieben Sie sie nach rechts und geben Sie ein 1-Dollar-Zeichen ein (es werden separate Ebenenstile zugewiesen). Für die "aktiven" gelben Dollarzeichen wenden wir die folgenden Ebenenstile an:
Und für die inaktiven Dollarzeichen möchten wir, dass sie klein aussehen (als ob sie nicht gefüllt wären). Wir werden hier verschiedene Ebenenstile anwenden:
Für die Sternebewertung habe ich das benutzerdefinierte Formwerkzeug von Photoshop verwendet und den Stern ausgewählt. Dieselbe Technik wie bei den Dollarzeichen (einfach Kopieren / Einfügen der Ebenenstile von oben) in diese Sterne.
Ihr Ergebnis sollte in diese Richtung gehen:
Gruppieren Sie diese einzelne Zeile, die Sie erstellt haben, und duplizieren Sie die Gruppe zweimal, und verschieben Sie die Zeile nach unten, um in das zuvor erstellte Raster zu passen. Das Endergebnis sollte so aussehen:
Unser letzter Hauptabschnitt ist die Liste der aktivsten Benutzer. Wir nutzen Georgien weiterhin, aber es ist eine nette Geste für Benutzer, die keine Avatare haben. Sie werden sehen, dass das Muster tatsächlich über das Symbol im Feld "Durchsuchen" oben angezeigt wird - der Dampf, der aus der Tasse kommt. Ein weiteres feines Detail, um den Designer aneinander zu binden. So erstellen Sie es.
Fügen Sie in der rechten Spalte der Spalte die Überschrift hinzu (verwenden Sie das, was Sie für "Recent Reviews" erstellt haben) und füllen Sie einen Rechteckbereich mit 40% Deckkraft (Farbe spielt hier keine Rolle). Nennen Sie diese Ebene "Container", und fügen Sie dann einige Ebenenstile (Farbüberlagerung und Strich) hinzu:
Das Ergebnis sollte eine undurchsichtige Box mit einem schönen äußeren Rand sein, der dunkler als der innere Hintergrund ist:
Verwenden Sie für den Avatar das Markierungswerkzeug, um eine Auswahl von 50 x 50 Pixel zu erstellen. Erstellen Sie eine neue Ebene und füllen Sie Ihre Auswahl mit einer beliebigen Farbe (Umschalt + F5)..
Jetzt fügen wir einige Ebenenstile hinzu, damit dieser Avatar für Benutzer, die keinen Avatar-Satz haben, ein wenig besser aussieht.
Fügen Sie etwas Text für den Namen und das Land des Benutzers sowie den Dampf aus der Kaffeetasse hinzu und duplizieren Sie die Reihe einige Male, um den Platz auszufüllen.
Zum Schluss noch die Fußzeile. Um ein wenig Abstand zu geben, gibt es einen dunkelbraunen bis transparenten Farbverlauf von oben nach unten, um eine visuelle Linie zum Aufteilen der beiden Abschnitte bereitzustellen. Um diese Trennung zu erstellen, verwenden Sie das Auswahlwerkzeug, um eine Auswahl zu treffen, und füllen Sie die Auswahl mit einem Farbverlauf (braun bis transparent). Passen Sie die Deckkraft des Verlaufs an, bis Sie die Muster vom Hintergrund durchscheinen sehen.
Wir werden hier erneut Georgia verwenden, um zusätzliche Links zu der Website zu erstellen. Ich habe 18px für die Links und 14px für den Copyright-Hinweis verwendet. Stellen Sie sicher, dass die linke Seite an den zuvor erstellten Richtlinien ausgerichtet ist.
Der letzte Schliff ist, das Kaffeetasse-Symbol aus dem "Durchsuchen" -Feld oben rechts in der Ecke wiederzuverwenden. Richten Sie noch einmal die rechte Seite an den Richtlinien aus.
Nicht so schwer, richtig? Es ist ziemlich einfach, wenn Sie es in Stücke zerlegen und einige der gleichen Stile und Techniken wiederverwenden können, die Sie immer wieder verwendet haben. Die geschnittenen Dateien sind ebenfalls enthalten, sodass Sie sehen können, wie diese codiert wurden. Seit ich das entworfen und codiert habe, hat sich vieles geändert, und viele der Bilder könnten wahrscheinlich mit CSS3 und Farbverläufen neu erstellt werden, aber vor fast 3 Jahren hatte ich es so gemacht. Sie haben dieses Design möglicherweise auf www.coffeenatic.com gesehen. Jetzt, da die Website nicht mehr verfügbar ist, dachte ich, es wäre eine gute Idee, sie allen mitzuteilen, da ich so positives Feedback darüber erhalten habe. Ich hoffe es hat dir gefallen!
Accentsconagua