Share
Ich bin ein großer Fan von Foto-zentrierten Site-Designs? Daher freue ich mich heute, ein neues "Complete Site" -Tutorial zu starten, das sich an Fotografen, Illustratoren und andere visuelle Kreative richtet. An Tag 1 werde ich die Vorlage in Photoshop mit speziellen Tricks und Techniken entwerfen. Am zweiten Tag gehen wir durch die Vorbereitungsphase für die Codierungsphase, die wir am dritten Tag ausführlich besprechen werden. Am vierten Tag zeigen wir Ihnen, wie Sie drei völlig unterschiedliche Standorte mit derselben erstellen Rohes HTML. Bereit anzufangen? Lass uns das machen!
Wie bei jedem Webdesign-Projekt ist es wichtig, die Ziele eines Projekts zu ermitteln. Bevor wir eintauchen, lassen Sie uns ein paar Worte zu unseren möglichen Zielen sagen:
Das letzte, was ich erwähne, ist vielleicht das Wichtigste: Es muss sein 100% anpassbar mit so wenig arbeit wie möglich! Was bedeutet das für uns?? Ich möchte, dass jeder in der Lage ist, das gesamte Layout umzubenennen und neu zu gestalten, ohne dass man jemals mit dem Kern-HTML-Code etwas anfangen muss. Das bedeutet im Idealfall, dass durch das Austauschen einiger Bilder (das Logo und ein benutzerdefiniertes Hintergrundbild) und einige CSS-Dateien ein völlig anderes Ergebnis erzielt werden kann. Deshalb werden wir uns am letzten Tag dieser Serie ganz auf die Erstellung von Anpassungen konzentrieren!
Ok, mit unseren jetzt klar definierten Zielen beginnen wir!
Das Video-Tutorial soll ein Begleiter des unten beschriebenen schriftlichen Tuts sein. Betrachten Sie es als "ergänzendes" Material - ich werde nicht alles, was im schriftlichen Teil enthalten ist, behandeln, aber manchmal ist es einfach schön zu sehen, wie jemand anderes in Photoshop arbeitet, um andere Tricks, Effizienz-Tipps und andere Techniken aufzugreifen, die Sie sonst vielleicht nicht kennen vertraut sein mit.
Die vollständige Schritt-für-Schritt-Anleitung befindet sich unten. Wir beginnen mit einem leeren Photoshop-Dokument, aber Sie können auch die Demo-PSD herunterladen, um Ihre Arbeit mit meiner zu vergleichen.
Beginnen Sie mit der Erstellung eines neuen Dokuments mit einer Größe von 1280 x 800 Pixeln. Warum? Denn das gibt uns eine schöne große Leinwand zum Spielen. Die Breite unseres endgültigen Designs ist nicht wirklich 1280 Pixel, aber wir möchten eine Hintergrundfarbe sehen, wie wir sie normalerweise in einem großen Browserfenster sehen würden.
Das erste praktische Dilemma bei jedem Webprojekt besteht darin, die Größe des Dokuments festzulegen, mit dem Sie arbeiten werden. In unserem Fall möchte ich, dass das Design vorne und in der Mitte auf dem Bildschirm sitzt, so viel Platz wie möglich auf einem kleineren Monitor ausfüllt - und auf einem riesigen Monitor nicht zu klein aussehen.
Breite Überlegungen: Ich entscheide mich für die Verwendung 994px als Gesamtbreite. Diese Nummer ist etwas beliebig - es könnte ein paar Pixel breiter oder ein paar Pixel kleiner sein, aber letztendlich wird es die Aufgabe erfüllen. Warum? Weil es in die "sichere Zone" des 1003px für die gängigsten Browser passt, die gerade verwendet werden, mit etwas Polsterung auf beiden Seiten, um sicher zu sein.
Überlegungen zur Höhe: Ich werde mit der Höhe von arbeiten 644px in Photoshop Die Höhe ist bei diesem Design eine andere beliebige Zahl. Warum? Weil 1) es vom CSS aus anpassbar sein wird, 2) lassen wir dieses "Flex" auf den Inhalt passen, den wir hineinwerfen, und 3) ich bin weniger besorgt über die Faltenhöhe als ich es vielleicht für eine bin größeres Projekt.
Das Wichtigste dabei ist, dass dies alles zu 100% vom CSS aus einstellbar ist, sobald wir fertig sind. Wenn Sie also ein breiteres Layout mit einer flacheren Höhe bevorzugen, können Sie dies innerhalb von Sekunden nach der Wahl Ihrer Präferenz erfahren. Die Idee hier ist, die Dinge flüssig zu halten, obwohl wir eine Vorlage mit fester Größe verwenden. Lassen Sie sich jetzt nicht zu sehr auf die genauen Zahlen ein.
Vorbehalt: Dieser Ansatz "Halten Sie es flüssig" ist eigentlich nur für diese bestimmte Vorlage einzigartig? Normalerweise beginne ich mit jedem Projekt mit einer verfeinerten Analyse, um die perfekte Größe zu finden, die wir in anderen Tut-Serien durchgehen werden.
Die Verwendung eines vorgefertigten Rastersystems (z. B. 960 oder 978 g) bietet viele Vorteile. Ich habe jedoch eine ziemlich klare Vorstellung davon, was ich bauen möchte, und nicht ein Rastersystem finden, das sofort meinem Design entspricht Ich habe mich entschieden, dieses Layout freestyle zu machen.
Welche Auswirkungen hat das Freestyleing eines Layouts?? Zum einen müssen wir viel genauer auf die Abmessungen jedes von uns erstellten Inhaltsmoduls achten, da uns keine Leitfäden geben, die uns sagen, wohin die Dinge gehen sollen. Um eine wirklich einheitlich aussehende Vorlage zu erstellen, müssen wir uns bei der Erstellung unseres eigenen Rastersystems, das in dieser Vorlage enthalten ist, umso mehr anstrengen.
Zeichnen Sie das abgerundete Rechteck: Jetzt haben wir uns entschieden 994px von 644px Zeichnen Sie als unsere Containergröße ein abgerundetes Rechteck dieser Größe (mit einem 12px Radius). Öffnen Sie das Infopanel (Fenster> Info oder F8), um die Größe Ihres Rechtecks beim Zeichnen anzuzeigen.
Beachten Sie, dass die Farbe des Rechtecks an dieser Stelle keine Rolle spielt. Während wir es irgendwann weiß werden lassen, wollen wir es jetzt aus dem Hintergrund hervorheben.
Erstellen des Schatteneffekts: Ich werde dieselbe Methode verwenden, die wir im Tutorial "Erstellen Sie Ihr eigenes saftiges Tabbed-Schieberegler" verwendet haben, da dies der einfachste Weg ist, einen Schatten zu erhalten, der leicht zu schneiden ist und sich in ein transparentes PNG-Format verwandelt, wenn es Zeit für das Codieren ist.
Um diesen Schatten zu erstellen, schnappen Sie sich einfach Ihr Pinselwerkzeug und stellen Sie es auf 60px Größe und 0% Härte ein.
Dann, Erstellen Sie eine neue leere Ebene halten Sie die Verschiebung Taste, um eine gerade Linie zu zeichnen, und ziehen Sie einfach den Cursor über Hälfte des Behälterrechtecks.
Zum Schluss verwenden wir die Free Transform Werkzeug (Cntrl + T) um es sehr leicht zu neigen, um einen Verbeugungseffekt zu erzeugen 2,5 für den Winkel). Warum sollte man das überhaupt anwinkeln? Weil es dabei helfen wird, ein bisschen mehr Dimension zu schaffen, wenn die Lichtquelle sich etwas zu verbiegen scheint.
Lassen Sie uns nun die gebürstete Ebene duplizieren (Cntrl + J während Sie auf der Ebene ausgewählt sind) und drehen Sie sie horizontal (Bearbeiten> Transformieren> Horizontal spiegeln). Schieben Sie die neue umgedrehte Pinselebene so weit, dass sie ungefähr mit der anderen Seite des Containerrechtecks übereinstimmt. Das Ergebnis sollte ein Schatten sein, der dem ersten entgegengesetzt ist.
Bewegen Sie beide Schattenebenen hinter dem? Rahmen? Layer und skalieren Sie sie (wählen Sie beide Layer aus und drücken Sie Strg + T), so dass sie genau in die Gesamtbreite des Rahmenrechtecks passen.
Füge schließlich beide Schattenebenen zusammen (Strg + E) und schieben Sie die Schattenebene an die richtige Stelle (verwenden Sie das grundlegende Auswahlwerkzeug [V] und benutze die Tastatur, um Sie können auch die Deckkraft der Schattenebene an Ihre persönlichen Vorlieben anpassen. Ich habe ungefähr benutzt 60%, Sie können mehr oder weniger tun, je nachdem, was Sie wollen.
Bonusschritt: Um noch mehr Tiefe hinzuzufügen, verwenden Sie die Perspektivische Transformation auf dem Schatten, um es so erscheinen zu lassen, als ob es wieder im Weltraum wäre. Wenden Sie einfach ein kleines an Gaußscher Weichzeichner Sobald Sie die Ebene transformiert haben, um Pixel-Artefakte zu entfernen.
Hier ist noch ein Bonusschritt, wenn Sie nach noch mehr Drama suchen: Versuchen Sie, eine doppelte Schattenebene zu erstellen, die um 70% kleiner ist (verwenden Sie die freie Transformation und die prozentuale Skalierung, um dies anzupassen), mehr verschwommen und mit einer anderen Deckkraft (70) %), um einen "Kernschatten" auf der Innenseite des primären zu erstellen.
Benennen Sie Ihre Schattenebenen (sobald Sie mit ihnen fertig sind) und fügen Sie sie in eine neue ein Ebenenordner genannt Schatten. Die Organisation wird die Anpassung erheblich vereinfachen, wenn wir bereit sind, dies aufzuschlüsseln!
Den Hintergrund erstellen:
Der Hintergrund, den wir erstellen werden, ist ein subtiles hellblaues "Rauschmuster". Ich werde das schnell durchgehen, aber um mehr über das Erstellen dieser Muster zu erfahren, schauen Sie sich unser ausführliches Tutorial an.
Beginnen Sie mit dem Erstellen eines neue leere Ebene und mit füllen Weiß (Umschalt + F5).
Nun fügen wir ein paar Geräusche hinzu Filter> Noise> Add Noise. Sie können dies an Ihre eigenen Vorlieben anpassen, aber ich habe es verwendet 14% für den Betrag.
Setzen Sie die neue "Rauschebene" unter "Mischmodus" auf "Mehrere" und zeichnen Sie ein Rechteck (Füllfarbe) # e1ebef) hinter dieser Schicht.
Als letztes fügen wir eine neue Einstellungsebene hinzu (Ebene> Neue Einstellungsebene> Farbton / Sättigung) über diesen beiden anderen Schichten, damit unser Rauschen nicht langweilig wird.
Im Anpassungsbereich unserer Einstellungsebene (Fenster> Einstellungen), Habe ich die Einstellungen von (Farbton: 200, Sat: 100 und Helligkeit: +60) mit dem Kontrollkästchen "Colorize". Sie können so lange herumspielen, bis Sie Ihren gewünschten Effekt erzielen.
Fahren Sie fort und platzieren Sie diese drei neuen Ebenen (die benachbarte Ebene, die Rauschebene und die Hintergrundfarbenebene) in einer neuen Ebene Ebenenordner "Hintergrundfarben" genannt.
Zum Schluss machen wir weiter und machen die Farbe unserer Container-Box weiß, nachdem wir nun einige Hintergrundfarbe hinzugefügt haben. Ich habe auch ein Licht hinzugefügt 1px Schlaganfall um unsere Containerbox (# d8d8d8 in Farbe), damit er sich vom Hintergrund abhebt.
Zu diesem Zeitpunkt sollte Ihr Dokument ungefähr so aussehen:
Ihre Ebenen sollten auch so organisiert sein:
Nachdem wir nun unseren grundlegenden Inhaltscontainer erstellt und gestaltet haben, ist es an der Zeit, ihn mit Inhalten zu füllen. Wir beginnen mit der Navigations-Sidebar, da hier festgelegt wird, wie viel Speicherplatz wir später für Inhalte haben.
Wie breit sollte es sein? Die Breite der Seitenleiste hängt von Ihnen ab. Ich habe mich für 235px als Breite entschieden, weil es mehr oder weniger genau zu dem passt, was ich dort haben möchte (viel Platz für lange Seitentitel, das Social Media-Widget und eine Suchleiste). Sie können dies jedoch an Ihre eigenen Bedürfnisse anpassen. Und wie ich schon immer gesagt habe, wird dies später im CSS einstellbar sein.
Um zu beginnen, zeichnen Sie einfach eine 1px-Linie mit derselben Farbe, die wir für den Rand unseres Containers verwendet haben (# d8d8d8) entlang der vertikalen Achse des Behälters. Platziere es ungefähr 285px von links von der Kante.
Als nächstes kann es hilfreich sein, an dieser Stelle eine Richtlinie zu zeichnen - etwa 20 Pixel vom Rand der Containerrandgrenze entfernt. Wir werden dies als Leitfaden verwenden, um all unsere Inhalte so zu platzieren, dass die Dinge einheitlich und gut ausgerichtet aussehen.
Ich werde hier nicht zu tief gehen, weil Sie wahrscheinlich Ihr eigenes Logo verwenden werden;). Kurz gesagt, ich habe mit einem einfachen Rahmensymbol (aus dem Edelsatz von Symbolen) begonnen und mein eigenes Foto zum Rahmen hinzugefügt. Dann habe ich die Schrift Museo bei 26pt verwendet; Ich verwende 2 verschiedene Farben und Gewichte, um eine visuelle Vielfalt zu schaffen. Ich lege den Titel unserer Vorlage "ShutterPress" schön neben das Symbol.
Wahrscheinlich möchten Sie zu diesem Zeitpunkt wahrscheinlich Ihr eigenes Logo (oder eines Kunden) verwenden? Ich werde also die Ebenenstile und andere Anpassungen überspringen. Fühlen Sie sich frei, sie in der Demo-PSD zu überprüfen!
Platzieren Sie das Logo einfach in der Seitenleiste. Beachten Sie, dass wir ungefähr dieselbe Menge an Top-Polsterung und Rechts-Polsterung verwenden, die wir für die Polsterung auf der linken Seite verwendet haben.
Kleine Tricks, wie den Raum um ein Objekt so wichtig zu halten, da das Logo einheitlich ist, ist eines der Dinge, die den Unterschied zwischen gutem Design und großartigem Design ausmachen.
Die Akkordeonnavigation ist das erste funktionale Element, das wir verspotten. Als solches ist es erwähnenswert, dass wir hier eine Grauzone betreten werden. Wir wollen das verspotten, als ob es benutzt würde? Hauptsächlich, damit wir, wenn wir dies jemandem zeigen (wie einem Entwickler), verstehen, wie es bei allen möglichen interaktiven Zuständen aussehen sollte.
Als solches wollen wir ein zeigen aktiver Link, sowie mindestens eine offenes Akkordeon und ein geschlossenes Akkordeon.
Ich verwende dafür eine einfache Schrift - Lucida Sans beim 12pt mit dem führenden Satz auf 36pt mit der schwarzen Farbe von # 252525. Ich benutze lieber die Scharf Anti-Alias-Einstellung für Webfonts in Photoshop-Mockups. Sie können jedoch nach Belieben verwenden.
Ich verwende auch eine kleine Variante für den aktiven Link: Fett gedruckt mit der Farbe auf # 0285da, was das Logo und den Hintergrundton nachahmt.
Verwenden Sie einige einfache Tastatur-Leerzeichen, um die Links einzurücken, die schließlich zu unseren verschachtelten Akkordeon-Links werden.
Beachten Sie, dass wir dieselbe vertikale Richtlinie verwenden, um den Text so zu hängen, dass er gut zum Logo passt.
Die 36 Punkte des Leading sind groß genug, um eine einfache horizontale Linie zwischen den einzelnen Links festzulegen. Lassen Sie uns dies an dieser Stelle tun. Verwenden Sie die Farbe #EAEAEA für diese horizontalen Linien, die etwas heller als unsere primäre Randfarbe ist. Warum? Dies hilft festzustellen, dass diese Regeln etwas weniger fixiert sind als die anderen.
Jetzt fügen wir die Akkordeonknöpfe hinzu. Beginnen Sie mit der Erstellung eines abgerundeten Rechtecks mit einem Radius von 2px, der mit 11px mal 11px bemessen ist. Fügen Sie die folgenden Ebenenstile hinzu:
Ein hellgrauer Farbverlauf (# E6E6E6 zu Weiß) von unten nach oben.
EIN 1px Außenhub von #bfbfbf.
Duplizieren Sie diese Schaltflächenebene und fügen Sie einen einfachen Text "+" und "-" hinzu, um die Schaltflächen zu finalisieren. Platzieren Sie sie wie gezeigt:
Von jetzt an werden wir für alle neuen Elemente dieselben grundlegenden Gestaltungsregeln verwenden. Die Rahmen sollten mit den gleichen Greys übereinstimmen, die wir zuvor verwendet haben. Die Auffüllung sollte ungefähr so sein, wie wir sie für vorherige Elemente verwendet haben. Schriftarten und -farben werden ebenfalls funktionieren. Als solches werde ich Sie nicht langweilen, wenn Sie diese Notizen neu schreiben. Denken Sie daran!
Für das Social Media Widget sollten Sie sich das Icon-Set Ihrer Wahl aussuchen (oder sehen Sie sich unsere große Sammlung von Icons hier an). Wir werden verwenden 16px um 16px Versionen des gewählten Symbolsatzes. Die Demo verwendet dieses Set, aber Sie können alles verwenden, was Sie möchten.
Ich habe mich auch für die Desaturierung der sozialen Symbole entschieden (Bild> Anpassungen> Entsättigen), damit sie nicht vom Kerninhaltsbereich ablenken. Fügen Sie die Symbole oder Ihre Auswahl hinzu (um einige Pixel voneinander entfernt), und fügen Sie in Ihrem Text "Social:" einen Titel hinzu.
Fügen Sie unsere horizontalen Linienränder für die Trennung hinzu und lassen Sie etwas Platz für unsere Suchleiste.
Das Such-Widget ist sehr einfach zu erstellen. Zeichne einfach ein 25px hohes abgerundetes Rechteck (8px-Radius) mit einer 1px Schlaganfall von # e0e0e0 und ein Lupensymbol ein. Ich habe eines aus dem Fugesatz von Icons verwendet (es ist kostenlos), aber Sie können Ihre eigenen verwenden, um einen Stil oder Flare hinzuzufügen.
Whallah! Unsere Sidebar ist jetzt fertig. Sie können Ihre eigenen benutzerdefinierten Widgets hinzufügen oder belassen. Es ist an der Zeit, unseren Inhaltsbereich mit gut gefülltem Inhalt zu füllen!
Ich werde in den nächsten beiden Schritten etwas rückwärts gehen. Normalerweise würden Sie ein Web-Design mit dem Homepage-Design beginnen? die Seite, auf der die Leute zuerst ankommen. Dies ist jedoch ein seltener Fall, in dem die Unterseite (dh die Galerie-Vorlage) wichtiger ist als die eigentliche Zielseite.
Da ich jedoch weiß, dass ich immer ein schickes Homepage-Design erstellen kann, werde ich unser Content-Design mit der Galerie-Vorlage beginnen, da dies mehr Probleme für uns darstellt. Hauptprobleme dieser Probleme sind:
Das Komische ist, dass wir die Homepage nach dem Lösen dieser Probleme ziemlich schnell erstellen können. Wenn Sie hier beginnen, erlauben wir uns die Erstellung einer Killer-Miniaturansichtsgalerie, ohne zu versuchen, Einschränkungen zu erfüllen, die wir aus Versehen auf die Startseite setzen könnten.
Ok, lass uns anfangen!
Ich beginne damit, eine Grundmenge an Füllungen festzulegen, die ich immer im Inhaltsbereich behalten möchte. In unserem Fall habe ich 32px als Betrag ausgewählt. Es ist etwas kleiner als die Zeilenhöhe der Navigation, aber nicht so klein, dass sich die Dinge angespannt oder eingeschränkt fühlen.
Das gibt mir einen aktiven Bereich von ungefähr 696px von 586px (Auch hier ist die Höhe flexibel, darum sind wir nicht sehr besorgt).
Nachdem wir unseren aktiven Inhaltsbereich definiert haben, möchten wir nun die ideale Größe und Größe der Miniaturansicht auswählen. Das herauszufinden, ist keine Raketenwissenschaft? Ich habe im Wesentlichen nur mit mehreren Arrangements von grob gezeichneten Rechtecken herumgespielt, bis ich etwas gefunden habe, das aussah harmonisch.
Nun, ich weiß, dass das Wort harmonisch nicht sehr konkret ist? also was soll ich sagen Da ich wusste, dass ich etwa 15 bis 20 Bilder pro Seite einfügen möchte, probierte ich unsere verschiedenen Kombinationen aus Miniaturbildgröße und -raum aus, bis ich eine gefunden habe, die eine gute Balance zwischen positivem und negativem Raum sowie ein verfeinertes Hierarchiegefühl widerspiegelte. Dinge wie der Goldene Ratio spielen hier eine Rolle, aber ich bin ehrlich und gebe nur zu, dass ich in diesem speziellen Fall einen Blick darauf hatte. Hier ist keine Magie los? nur viel experimentieren.
Also, wie lautet die endgültige Formel? EIN 155px breit bei 125px groß Miniaturbild, in 4 Spalten (und in unserem Fall auch 4 Zeilen, die unsere Höhe ausfüllen).
Die Polsterung: Es gibt ungefähr 21px horizontale Trennung zwischen jedem Miniaturbild und ungefähr 18px vertikale Trennung. Warum der Unterschied??
Da es sich um ein "Querformat" -Layout handelt (was bedeutet, dass es breiter als schmal ist), fühlt es sich einfach richtig an, das gleiche Formverhältnis in unserem gesamten Design beizubehalten.
Beachten Sie, dass die endgültige Miniaturansicht dieses Landschaftsverhältnis auch widerspiegelt. Es macht also Sinn, dass wir zwischen Zeilen etwas weniger Abstand lassen als zwischen Spalten.
Hier ist das Endergebnis:
Beachten Sie, dass ich am unteren Rand etwa 50 Pixel Platz gelassen habe, um eine Art Paginierung einzufügen (die Art und Weise, wie Benutzer von einer Seite mit Miniaturansichten zur nächsten navigieren). Wenn es nicht genügend Thumbnails gibt, um die Paginierung auszulösen, schneiden wir das Layout natürlich unten genauer ein.
Das visuelle Styling der Thumbnails ist ebenfalls wichtig. Weil wir uns sehr darum kümmern, viel zu schaffen Polieren Details über unser gesamtes Design hinweg: Das Sehen alter alter Miniaturansichten mit harten Kanten wirkt grob.
Wir werden ein wenig subtileres Styling hinzufügen, um dies aufzuhellen und unserem Galerie-Raster ein Gefühl von Raffinesse zu verleihen. Wenden Sie den folgenden Ebenenstil auf jedes Ihrer Miniaturbilder an:
Ein 2px Inner Stroke (in CSS ausgedrückt, wird dies zu Polsterung#EAEAEA
Ein 1px-Schlagschatten (in CSS ausgedrückt wird dies der Rand) # F2F2F2
Ich werde hier auf 100% zoomen, um den endgültigen Stil zu zeigen:
Nachdem wir unser Raster erstellt haben, fügen wir einige reale Bilder hinzu, um dieses Layout lebendiger zu gestalten:
Wir sind fast fertig mit dieser Seite? Jetzt brauchen wir nur noch eine Möglichkeit, mit der Benutzer von einer Miniaturseite zur nächsten navigieren können. Dies wird als Paginierung bezeichnet. Es gibt viele Möglichkeiten, dies zu tun (einige komplexer als andere). In unserem Fall wollen wir eine einfache Paginierungsmethode? also entscheide ich mich für einen einfachen Pfeil nach links | Rechtspfeilansatz - dh: (). Dies ist eine der intuitiveren Methoden der Paginierung, also für unsere Situation sinnvoll.
Machen wir weiter und erstellen Sie zwei Kreise mit 18 Pixeln Durchmesser:
Beachten Sie, dass ich das einfach kopiert / eingefügt habe Ebenenstil von den zuvor verwendeten Akkordeonknöpfen. Warum? Weil visuelle Stile dupliziert werden, um sicherzustellen, dass sich unser Layout einheitlich anfühlt? und es gibt wirklich keinen Grund, sich die Mühe zu nehmen, einen völlig neuen Stil zu entwerfen. Die konsistente Verwendung des Ebenenstils wird die Benutzerfreundlichkeit unserer Website verbessern.
Wenn Sie Ihre Kreise gezeichnet haben, fügen Sie die Pfeile hinzu (dies ist bereits oben gezeigt). In meinem Fall habe ich in Photoshop eine benutzerdefinierte Form> verwendet, Sie können jedoch auch ein benutzerdefiniertes Textsymbol ">" verwenden. Da dies kein Anfänger-Tut ist, gehe ich davon aus, dass Sie irgendwie herausfinden können, wie Sie diese Form irgendwie hineinbekommen können;)
Flosse! Damit ist diese Inhaltsseite tatsächlich abgeschlossen. Mit den gleichen Grundstilen und Füllungsregeln, die wir aufgestellt haben, können wir dies auch leicht in andere Rasterlayouts umwandeln (z. B. ein 2x2-Gitter oder ein 3x3-Gitter)..
Alles klar - Auf zur letzten Stufe der Design-Session! Wir können wahrscheinlich herausfinden, wie verschiedene andere Support-Seiten erstellt werden, aber was wir jetzt wirklich brauchen, ist das Design der Homepage. Da es sich hierbei um eine auf Fotografen gerichtete Vorlage handelt, sollte ein Foto offensichtlich im Mittelpunkt stehen. Wir brauchen aber auch einen beschreibenden Text (damit ein Fotograf erklärt, wer er ist, welche Art von Dienstleistungen er anbietet usw.).
Breite Überlegungen: In den meisten Fällen würden wir nur den aktiven Inhaltsbereich kopieren, den wir in der Galerievorlage verwendet haben. Ich werde die Dinge ein wenig ändern, indem ich die Polsterung von 32px auf umstelle 20px. Warum? Dies gibt uns nur ein wenig mehr Platz, um ein Bild in "Voller Größe" zu verwenden. Es ist eine sehr subtile Verschiebung im Gesamtlayout, aber die Auswirkungen sollten enorm sein, da wir ein riesiges Bild in den Raum einfügen können.
Überlegungen zur Höhe: Wie wir schon immer gesagt haben, ist die Höhe wirklich variabel und wird letztendlich den einzelnen Benutzern / Designern / Kunden überlassen, um zu bestimmen, wie viel Inhalt Sie auf dieser Seite wünschen. In meinem Fall werde ich versuchen, die Abmessungen dieser Seite genauso zu gestalten wie unsere Galerieseite.
Das Ergebnis dieser Überlegungen ist ein aktiver Bereich, der etwas größer ist als der, den wir in der Galerievorlage verwendet haben: 720px von 604px.
Dies ist aus einigen Gründen für uns sinnvoll: 1) Es gibt uns viel Platz zum Gestalten und 2) es passt in den "fold" -Raum der meisten gängigen Browser. Solange wir keine entscheidenden Informationen in den unteren Bereich dieses Bereichs legen, sollten wir diesen Raum auf jede Art und Weise nutzen, die wir uns vorstellen können.
Das Bild zeichnen: Beginnen Sie mit dem Zeichnen von a 716px breit und 438px groß Rechteck mit abgerundeten Ecken (Radius: 10px).
Wenden Sie die folgenden Ebenenstile an, beginnend mit a 2px Schlaganfall:
Fügen Sie außerdem einen inneren Schatten hinzu (der dazu beiträgt, dass unser Bild auf der Seite mehr "Pop" wird):
Der endgültige visuelle Stil sollte in etwa so aussehen:
Erstellen der Registerkarten:
Auf den Registerkarten können Benutzer Bilder auf der Startseite durchblättern. Dies ist im Wesentlichen nur ein grundlegendes jQuery-Karussell, wenn Sie es in Bezug auf die Codierung sehen. Es gibt jedoch keinen Grund, uns auf die visuellen Stile zu beschränken, die die meisten vorgefertigten Schieberegler standardmäßig verwenden.
Lassen Sie uns mit den linken / rechten Registerkarten etwas kreativer werden, indem Sie visuell interessante innere Kreise erstellen.
Beginnen Sie mit einem 92px Durchmesserkreis gestalten. Benutzen Schwarz für die Füllfarbe und stellen Sie das ein Deckkraft bis 57%.
Verwenden Sie das Rechteck-Auswahlwerkzeug, um eine Auswahl zu treffen, die entlang unseres "Bildcontainers" läuft, und verwenden Sie diese Auswahl, um eine Ebenenmaske zu erstellen.
Fügen Sie nun das "
Accentsconagua