Share
Dieses Tutorial führt Sie durch den Prozess und die Ideen bei der Gestaltung einer professionellen Website mit einem unkonventionellen Flair in Photoshop. Das Tutorial liest sich fast wie ein Roman "Choose your own adventure" in der Hoffnung, dass es Kreativität und Einzigartigkeit in Ihrem Design mit ein wenig Rat und Anleitung auf dem Weg fördert. Abenteuer-Zeit!
Wenn Sie dieses Lernprogramm durchgehen, werden Sie feststellen, wie einfach diese Website in ein Blog über Design, die Homepage eines Softwarehauses oder eine Open Source-Community umgewandelt werden kann. Alle Module in der rechten und linken Seitenleiste konnten problemlos ausgetauscht und verschoben werden, und der Inhalt ist flexibel gestaltet.
In diesem Tutorial werden Sie die Konstruktionsprinzipien und nützliche Photoshop-Methoden zur Verbesserung Ihres Arbeitsflusses und des Designs von Websites in den Vordergrund stellen. Diese Website hat zwar ihren eigenen Stil, das Hauptziel dieses Tutorials ist jedoch nicht, diesen Stil genau zu replizieren. Vielmehr besteht die Hoffnung, dass Sie in Photoshop eine bessere Perspektive des Webdesigns erhalten, die Ihren Ansatz verbessern und Ihre Produktion beschleunigen kann.
Schauen Sie sich das Bild an, das wir erstellen werden.
Wenn Sie dies nicht bereits tun, fahren Sie mit 960.gs fort und machen Sie sich mit dem 960-Rastersystem und der Frage vertraut, warum es für dieses Tutorial so nützlich sein wird. Während Sie dort sind, stellen Sie sicher, dass Sie die Vorlage herunterladen.
Nachdem Sie die Datei heruntergeladen haben, entpacken Sie sie und öffnen Sie "960_grid_12_col.psd", die Sie unter 960_download> Vorlagen> Photoshop finden. Wenn Sie die Datei öffnen, wird ersichtlich, wie schnell Sie in diesem Webdesign eine Struktur erstellen und verwalten können. Beachten Sie besonders die Hilfslinien, damit Sie Objekte erstellen können, die perfekt am Raster ausgerichtet sind.
Wenn Sie den Hilfslinien bis zum Lineal folgen, können Sie die genauen Pixelabmessungen des Rasters deutlich erkennen - mit 60px breiten Spalten und 10px auf jeder Seite (20px zwischen den einzelnen Spalten). Wenn Sie das Lineal nicht sehen oder es loswerden möchten, können Sie es mit Befehl + R umschalten.
Die Führer überwältigen fast; Wenn Sie erst einmal mit dem Design beginnen, werden sie wirklich in die Quere kommen. Sie können sie umschalten, indem Sie auf Ansicht> Extras klicken oder einfach die Tastenkombination Befehlstaste + H verwenden.
Für dieses Tutorial benötigen Sie mehr Platz auf Ihrer Leinwand. Erweitern Sie die Leinwand (Befehl + Alt + C) um 1340px auf 1400px. Sie können alles außer der Hintergrundebene löschen. Doppelklicken Sie auf Ihre Hintergrundebene und drücken Sie OK, um sie zu entsperren. Benennen Sie es in "BG" um.
Speichern (Befehl + S) dieser Datei als "my_web_tut01.psd" in einem eigenen Ordner mit dem Namen "my web tut" Nach jedem Schritt in diesem Lernprogramm sollten Sie Command + S und alle paar Schritte Command + Shift + S drücken und eine neue Kopie "my_web_tut02.psd", "my_web_tut03.psd" usw. usw. Das Speichern ist für viele Designer ein Kinderspiel, aber ich habe festgestellt, dass viele Profis trotzdem nicht davon abgehalten werden.
OK, Sie haben die Leinwand vorbereitet, jetzt müssen Sie im Hintergrund und im oberen Bereich zeichnen. Ziehen Sie auf dem oberen Lineal, um eine neue Hilfslinie zu erstellen. Reduziere es auf 120px. Dies ist die untere Grenze des Kopfbereichs. Bringen Sie zwei weitere Hilfslinien zu 130px und 140px herunter. Jetzt ist zwischen dem Header und dem Inhalt die gleiche Breite wie zwischen den Spalten. Es fängt an, wie ein richtiges Gitter auszusehen!
Verwenden Sie das Rechteckwerkzeug (U), um ein schwarzes Rechteck über den Kopfbereich zu zeichnen. Dies setzt voraus, dass Sie die Standardfarbe Schwarz als Vordergrundfarbe festgelegt haben. Andernfalls können Sie einfach D drücken, um sie zurückzusetzen. Beginnen Sie Ihr Rechteck außerhalb der Leinwand entlang der Hilfslinie und beenden Sie es auch auf der anderen Seite. Der Vorteil der Erweiterung dieses Elements besteht darin, dass Sie keinen der Effekte sehen, die auf den Umfang angewendet werden, den Sie möglicherweise auf die untere Kante Ihres Rechtecks anwenden möchten, z. B. einen Strich, ein inneres Glühen usw. Benennen Sie Ihr Rechteck "Header BG. "
Es ist an der Zeit, dein Raster auszublenden. Dieses Design besteht aus drei Inhaltsspalten - die linke Seitenleiste wird sich über drei Spalten erstrecken, der mittlere Inhalt / Hauptinhalt wird sich über sieben Spalten erstrecken, und die rechte Seitenleiste wird sich über zwei Spalten erstrecken.
Während es für die Kopfzeile gut funktioniert, Richtlinien festzulegen, ist der Rest des Entwurfs ein flüssigerer Prozess, so dass Sie keine horizontalen Hilfslinien zwischen den einzelnen Abschnitten zeichnen. Verzweifle nicht! Sie können immer noch einen perfekten Pixelabstand erzielen, indem Sie die Umschalttaste + die Pfeiltasten drücken, während Sie das Verschiebungswerkzeug (V) ausgewählt haben. Jedes Mal, wenn Sie dies tun, wird die ausgewählte Ebene um 10 Pixel verschoben.
Sie werden abgerundete Ecken für dieses Design erstellen. Abgerundete Ecken sorgen dafür, dass Ihr Inhalt sehr sichtbar in Abschnitte unterteilt wird. Schaue zurück zum endgültigen Bild. fällt Ihnen auf, dass sich auf dem "Twitter Feed" -Modul viele Boxen in einer Box mit abgerundeten Ecken befinden? Überlegen Sie nun, ob die Ecken alle scharf sind - der "Twitter-Feed" fühlt sich weniger als ein einzelnes Modul an.
Sie müssen auch berücksichtigen, dass Farben, Farbverläufe und Schriftarten dazu beitragen, dass diese Einheit zu einem definierten Element wird. Die abgerundeten Ecken sind jedoch definitiv hilfreich. Beachten Sie außerdem, dass es nur abgerundete Ecken für dieses Design gibt. Es gibt Tausende von schönen Websites, die keine abgerundeten Ecken verwenden. Schauen Sie sich Psdtuts + an - jede Ecke ist scharf; Es werden jedoch andere Strategien wie Kontrast und Konturen verwendet, um das Layout klar zu halten. Weitere Informationen finden Sie hier und hier
Genug Design-Gespräch! Wählen Sie das abgerundete Eckenwerkzeug aus und setzen Sie den Eckenradius auf 8 Pixel. Zeichnen Sie oben in der linken und rechten Spalte ein Kästchen. gönnen Sie sich etwas Platz, um später Inhalte hinzuzufügen.
Erstellen Sie zunächst einen Textbereich im mittleren / Hauptinhaltsbereich und füllen Sie ihn wie im endgültigen Bild mit einem eingängigen Liner aus. Verwenden Sie bei 40pt mit 48pt Leading (Zeilenhöhe) die Schriftart Rockwell oder eine andere Slab-Serife. Rockwell kann hier heruntergeladen werden.
Fügen Sie als nächstes einen Dummy-Text hinzu und setzen Sie ihn in Verdana auf 12pt mit 20pt Leading. Fügen Sie außerdem ein paar Sub-Header hinzu, die bei 17pt mit 30pt Leading Verdana Bold sind.
Nun, da Sie die Besonderheiten haben, sprechen wir über Typografie. Eine allgemeine Regel, die Sie in der gesamten Webdesign-Community immer wieder finden, lautet, dass eine Website nur zwei Schriftarten verwenden sollte. In diesem Layout habe ich mich für die Schriften Rockwell und Verdana entschieden. Verdana ist eine websichere Schrift, während Rockwell dies nicht tut. Aus diesem Grund müssen alle Instanzen von Rockwell Bilder sein, wenn dieses Design in XHTML / CSS konvertiert wird.
Dies bedeutet zwei Dinge für Sie. Um die Ladezeit niedrig zu halten, sollten Sie zunächst einen minimalen Einsatz von nicht webfesten Schriftarten in Betracht ziehen. Das endgültige Bild enthält weniger als zehn Instanzen von Rockwell. Die meisten von ihnen sitzen über einem grafischen Element wie eine Schaltfläche, die beim Codieren bereits ein Bild ist. Zweitens können Sie dem Text Effekte wie Schlagschatten und Farbverläufe hinzufügen. Diese beiden Gründe verbinden sich mit der Einbeziehung von Rockwell, die sich am besten für die traditionell dekorierten Elemente eines Designs eignet, z. B. Kopfzeilen, Titel und Schaltflächen.
Es gibt noch eine letzte Überlegung, die möglicherweise für Ihr Design gilt und möglicherweise zukünftige Suchmaschinenoptimierungsarbeiten (SEO) berücksichtigt. Der gesamte bildbasierte Text - alle Instanzen von Rockwell für dieses Webdesign - wird von den Google-Bots nicht gecrawlt und analysiert. Dies bedeutet, dass Sie so gestalten müssen, dass es viele webgeschützte Schriftarten gibt, in denen Keywords von Google abgerufen werden können.
Der nächste Punkt zur Typografie und zum Webdesign im Allgemeinen ist Konsistenz, Konsistenz, Konsistenz! Wenn Sie Rockwell für eine Schaltfläche verwenden, verwenden Sie sie für alle Tasten! Wenn Sie einige Links rosa machen, machen Sie alle Links rosa! Wenn Sie konsistent sind, kann Ihr Design scharf und zusammenhängend aussehen.
Zum Schluss noch ein Wort zu Usability und Typografie. Ihre Kopie braucht Platz zum Atmen, eine anständige Linienhöhe, und Sie werden einen Unterschied feststellen. Die Website ilovetypography.com schlägt vor, dass Ihre Zeilenhöhe mindestens 140% Ihrer Schriftgröße betragen sollte. Sie sollten auch wissen, dass ein Textbereich, der breiter als 600 Pixel ist, eine Belastung für die Augen darstellt. Wenn Sie jedoch breiter werden, empfiehlt es sich, die Zeilenhöhe proportional zu vergrößern. Es gibt immer mehr zu Typografie zu lernen - hier ist ein guter Anfang.
Schwarz und Weiß ist langweilig, Zeit für etwas Farbe! Die Farben dieses Designs wurden vom Hash One Wordpress-Thema inspiriert
Ich könnte Ihnen zeigen, wie Sie ein benutzerdefiniertes Farbfeld erstellen, das mit den Farben Ihrer Website geladen wird, aber ich verwende es nicht selbst. Stattdessen können Sie mit dem Rechteckwerkzeug einfach ein Raster aus großen Quadraten an den Rändern Ihrer Leinwand zeichnen und sie mit den Farben füllen, die Sie verwenden werden. Ich finde diese Methode schneller und zugänglicher.
Die ausgewählten Farben bieten einen großartigen Kontrast, um der Website Tiefe zu verleihen. Fühlen Sie sich frei, jede Kombination zu verwenden, die Sie möchten, aber berücksichtigen Sie bei der Auswahl Ihrer Farben bitte Kontrast, Lesbarkeit und Harmonie. Wenn Sie Probleme mit Ihren Farben haben, versuchen Sie es mit dem Color Scheme Designer.
Die Farben dieses Tutorials sind (von links nach rechts, von oben nach unten):
Fügen Sie alle diese Rechtecke einem Ordner hinzu und nennen Sie ihn "SWATCHES". Die Verwendung aller Großbuchstaben für Ordnernamen erleichtert das Auffinden von Ordnerebenen, wenn die Ebenen durcheinander geraten. Jetzt wäre auch ein guter Zeitpunkt, um die Ordner "HEADER", "LEFT SIDEBAR", "MAIN CONTENT" und "RIGHT SIDEBAR" zu starten. Eine weitere bewährte Vorgehensweise ist das Einfärben der Ebenen, um den Arbeitsablauf zu verbessern. Klicken Sie einfach mit der rechten Maustaste auf das Augensymbol neben jeder Ebene, um eine Farbe auszuwählen.
Farbverläufe können Ihr Design wirklich verbessern. Wenn Sie jedoch nicht aufpassen, können Farbverläufe Ihr Design wirklich deaktivieren. Hier ist mein Vorschlag: Verrückt mit deinen Farbverläufen, mache sie alle sehr subtil.
Doppelklicken Sie auf die Ebene "Kopfzeile" und wählen Sie "Verlaufsüberlagerung". Klicken Sie auf den angezeigten Verlauf, um den Verlaufseditor zu öffnen. Löschen Sie alle Farbfelder außer den ersten beiden - Vordergrund zu Hintergrund und Vordergrund zu Transparent. Erstellen Sie nun einen Farbverlauf vom dunkelsten Grau zum mittleren Grau und drücken Sie Neu, um ihn den Voreinstellungen hinzuzufügen. Wiederholen Sie dies, bis Sie acht neue Farbverläufe haben - vier dunkle Mitten und vier Mitten bis dunkle. Klicken Sie auf "Speichern", um diese in einem neuen Ordner mit dem Namen "Assets" zu speichern. Legen Sie es dann im Stammordner für dieses Projekt ab. Nun, wann immer Sie zu diesem Projekt zurückkehren, oder Sie haben alle Gradienten genau dort.
Verwenden Sie für Ihre Ebene "Kopfzeilen" den mittleren bis hellen Farbverlauf der dunkelgrauen Farbfelder.
Für Ihren Verlauf auf der "BG" -Schicht möchten Sie einen etwas komplexeren Verlauf erstellen. Es gibt tatsächlich zwei Gradienten im Gradienten "BG". Wenn es an der Zeit zum Code kommt, werden sie separate Bilddateien sein, aber für uns müssen wir nur einen komplexen Farbverlauf erstellen.
Beachten Sie, dass es einen kleinen Abschnitt des Farbverlaufs gibt, der dieselbe Farbe haben wird. Dies ist die Hintergrundfarbe Ihrer HTML-Datei und lässt die Webseite wachsen, aber der Farbverlauf oben bleibt oben und der Farbverlauf unten bleibt unten.
Photoshop ist ein tolles Programm, aber wenn ich herausfinde, dass Sie Logos in Photoshop erstellen, werde ich Sie Adobe melden. Logos sollten in einem Vektorprogramm erstellt werden - für dieses Tutorial verwenden wir Illustrator.
Öffnen Sie eine neue Datei in Illustrator und erstellen Sie Ihr Logo (Hinweis: In realen Projekten sollten Sie Ihr Webdesign nie starten, bevor Sie ein Logo haben). Während das Logo in diesem Beispiel Rockwell verwendet, ist es nicht besonders wichtig, eine dritte Schriftart für Ihr Logo zu haben. Speichern Sie Ihr Logo im Ordner "Assets", in dem Sie die Verlaufsdatei ablegen.
Sobald Sie dieses Logo haben, müssen wir es für ein wenig Styling wieder in Photoshop einfügen. Rufen Sie einfach Illustrator und Photoshop nebeneinander auf und ziehen Sie die Logo-Teile in Photoshop. Da jedes Stück ein einzigartiges Design hat, kann es hilfreich sein, wenn Sie es einzeln und nicht als Ganzes ziehen.
Um die einzelnen Teile auszurichten, bringen Sie eine Version des gesamten Logos ein. Verringern Sie die Transparenz und verwenden Sie sie als Orientierungshilfe. Löschen Sie es, wenn Sie fertig sind. Klicken Sie bei gedrückter Umschalttaste auf alle Ebenen des Logos und drücken Sie Befehlstaste + G, um sie in einem neuen Ordner zu gruppieren. Benennen Sie diesen Ordner in "LOGO" um und legen Sie ihn im Ordner "HEADERS" ab.
Jedes Stück wird automatisch in ein Smart-Objekt umgewandelt. Dies bedeutet, dass sie wie in Illustrator als Vektorobjekt fungieren. Sie können das Transformationswerkzeug (Befehlstaste + T) ohne Qualitätsverlust verwenden.
Nachdem Sie Ihr Logo angepasst und platziert haben, müssen Sie es formatieren. Verwenden Sie die zuvor erstellten Farbverläufe, um dem Logo mehr Tiefe zu verleihen. Mischen Sie die Farben auf, aber behalten Sie die dunklere Farbe der Farbverläufe unten für beide Wörter.
Als nächstes fügen Sie einen Schlagschatten zu einem der Teile hinzu. Stellen Sie den Mischmodus auf 100% multiplizieren. Vergewissern Sie sich, dass "Globales Licht verwenden" ausgewählt ist, und setzen Sie es auf 120 Grad, 1px-Abstand, 0% Streuung und 1px-Größe. Durch Aktivieren von Global Light können Sie alle Effekte mit Schatten auf den gleichen Grad einstellen - erinnere dich an Konsistenz, Konsistenz, Konsistenz!
Ich habe bei Leuten gelesen, die zeigen, wie der Stil einer Ebene kopiert und eingefügt wird. Dies ist eine gute Methode für sehr weit voneinander entfernte Ebenen. Im Folgenden finden Sie einige schnelle Möglichkeiten, Effekte zu verschieben und zu duplizieren. Genauso wie Sie eine Ebene auf der Leinwand und in der Ebenenpalette multiplizieren möchten, indem Sie die Alt-Taste gedrückt halten und eine neue Kopie dieser Ebene ziehen. Sie können Effekte mit derselben Methode duplizieren.
Ziehen Sie bei gedrückter Alt-Taste fx Symbol in der Ausgangsebene auf die neue Ebene, und Sie werden die neue Ebene durch alle Effekte der ersten Ebene ersetzen. Wenn Sie nur den Schlagschatten kopieren möchten, anstatt den fx Symbol, ziehen Sie den einzelnen Effekt bei gedrückter Alt-Taste auf eine neue Ebene, und Sie werden nur diesen einen Effekt ersetzen oder ihn hinzufügen, wenn die neue Ebene nicht aktiviert ist. Verwenden Sie diese Methode, um sicherzustellen, dass alle Ebenen des Logos den gleichen Schatten haben.
Wählen Sie den Layer "Header BG" aus. Öffnen Sie die Effekte und fügen Sie einen schwarzen Rand ein, wobei die Position auf Innen eingestellt ist. Als nächstes geben Sie einen äußeren Schein, der den Mischmodus hat: Multiplizieren, Deckkraft bei 40%, Farbe von Schwarz und Größe von 9 Pixeln.
Gehen Sie zurück zu Illustrator und erstellen Sie einige interessante und kreative Formen, die als heller Hintergrund für den Kopfbereich verwendet werden. Färben Sie die Formen weiß, ziehen Sie sie zu Photoshop, stellen Sie den Mischmodus auf Bildschirm und ihre Deckkraft in unterschiedlichen Mengen von 2 bis 10% ein. Werfen Sie einen Blick auf das endgültige Bild. Sie werden feststellen, dass viele Kreise und Kreise verwendet werden. Diese wurden alle in Photoshop erstellt. Bei den komplexeren Formen ist Illustrator zwar schneller, aber bei Kreisen sparen Sie tatsächlich Zeit, wenn Sie sie in Photoshop erstellen.
Jetzt machen wir einen Kreis mit nur dem weißen Strich in Photoshop. Erstellen Sie mit dem Ellipse-Werkzeug einen schwarzen Kreis, öffnen Sie die Effekte für diese Ebene und geben Sie ihr einen weißen Strich. Schließen Sie die Effekte und setzen Sie den Mischmodus auf "Bildschirm". Sie werden alles außer dem weißen Strich sehen. Der größte Vorteil dabei ist die Möglichkeit, die Breite des Strichs zu ändern, indem die Effekte einfach geöffnet und bearbeitet werden.
Verbringen Sie etwas Zeit damit, herumzuspielen, experimentieren Sie mit verschiedenen Opazitäten und Kompositionen - erstellen Sie einige funky Formen, die Ihnen helfen, dieses Design zu individualisieren. Machen Sie sich keine Sorgen, wenn einige Ihrer Formen unterhalb der Kopfzeile sichtbar sind. Wir kümmern uns darum im nächsten Schritt.
Wählen Sie alle Formen aus und legen Sie sie in einem Ordner über der Ebene "Kopfzeilen" ab. Klicken Sie mit der rechten Maustaste auf die Vektormaske (das graue Kästchen) von "Header BG", um die gesamte auf der Leinwand ausgewählte Kopfzeile anzuzeigen. Wählen Sie nun den gerade erstellten Ordner aus und klicken Sie auf die kleine Schaltfläche "Ebenenmaske hinzufügen" unten im Ebenenfenster.
Maskieren ist etwas, von dem ich in meiner beruflichen Praxis wirklich nicht genug sehe, es ist sehr nützlich und schnell und das Beste ist, dass es sich um eine zerstörungsfreie Methode handelt. Bedenken Sie, dass Sie die Formen möglicherweise auf eine Ebene reduziert und den hervorstehenden Bereich gelöscht haben könnten. Aber dann wollten Sie einen Teil der Komposition oder den Strich in einem der Kreise ändern. Durch das Maskieren gehen Sie zurück und machen Änderungen schneller.
Unter der Kopfzeile werden einige Grafiken angezeigt, die auf dem Kopf stehenden Hügeln ähneln. Wenn Sie Ihre Farbfelder verwenden und mit der Transparenz spielen, können Sie diesen Look erzielen. Eventuell müssen diese angepasst werden, um sie horizontal zu kacheln.
Lassen Sie uns diese und den Rest der nicht funktionalen Elemente des Designs für eine Sekunde betrachten. Es gibt eine anständige Menge an gut zufälligen Grafiken. Welchen Beitrag leisten diese zum Design? Erstens sind Grafiken wie diese eine großartige Möglichkeit, um das Gefühl und die Stimmung einer Website zu bestimmen, eine großartige Möglichkeit, die Verbreitung einer Marke zu fördern.
Ich habe zwar nicht annähernd das Know-how, um Branding zu erklären, aber ich werde versuchen, Ihnen einen kurzen Überblick zu geben, damit Sie dies alles in die richtige Perspektive bringen können. Eine Marke ist alles über ein Unternehmen, das ein Verbraucher empfindet - Emotionen, Erinnerungen, Klänge, Farben, Erlebnisse usw. Marty Neumeier erklärt in seinem Buch The Brand Gap sehr deutlich, dass "eine Marke nicht das ist, was Sie sagen." was sie sagen, ist es. " Was hat das alles mit der Grafik zu tun? Obwohl Sie keine Marke erstellen können, können Sie ihr dabei helfen, in den Köpfen der Kunden zu wachsen, indem Sie fortlaufend visuelle Darstellungen bereitstellen, die an die Essenz Ihres Unternehmens erinnern.
OK, schauen Sie sich das endgültige Bild an. Was sagt Ihnen das über dieses Unternehmen aus? Mein Fokus war es, die Farben und Formen in ein Gefühl von Spaß und Funkelität zu übersetzen, aber die Struktur und das strenge Rasterlayout vermitteln ein Gefühl von Professionalität und Seriosität. Ist das genau die Marke, die jedes Unternehmen aufbauen will? Sicherlich nicht, jedes Unternehmen sollte einzigartig sein und jede Website hat eine differenzierte Ausstrahlung.
Verstecken Sie alles außer der "BG" -Schicht. Der Hintergrund dieses Designs wird von einem großen abgerundeten Rechteck eingerahmt. Dies verleiht Ihrem Design etwas mehr Struktur und Tiefe. Da Sie dem Hauptinhalt nicht eine eigene Box wie die Seitenleisten geben, ist dies ein guter Ansatz, um die Hintergrundgrafiken auszuspülen und die Lesbarkeit zu verbessern. Das weiße abgerundete Rechteck hat einen Radius von 8 Pixeln, derselbe wie der Rahmen - ein weiteres Detail der Konsistenz. Weitere Effektdetails finden Sie im Bild unten.
Verwenden Sie die gleiche Methode wie bei der Kopfzeile, um einige Formen aus Illustrator einzufügen und sie zu verschieben, um kleine Grafiken zu erstellen. Wenn Sie mit dem Design fortfahren, werden Sie wahrscheinlich mit ihnen herumtollen, um eine Komposition zu finden, die gut funktioniert. Mischen Sie dunkle Farben und Transparenz.
Möglicherweise stellen Sie fest, dass das Symbol aus dem Logo häufig verwendet wird, eine Art unterschwellige Erinnerung. Ich hatte einen Filmprofessor am College, der mir beigebracht hat, dass ein Bild, eine Farbe usw. mindestens dreimal in einem Film wiederholt werden muss, damit ein Benutzer sich daran erinnern und daraus eine Bedeutung gewinnen kann. Ich versuche, dieses Prinzip bei meinem Design anzuwenden - das Logo wurde mehrmals wiederholt (geschmackvoll und im Rahmen der Vernunft) mit der Hoffnung, dass sich der Benutzer mit dem Unternehmen vertraut macht und sich an das Symbol erinnert.
Die Navigation dieses Designs ist stark von meiner aktuellen Lieblingswebseite - aviary.com - beeinflusst.
Die kleine Heimgrafik und das Wort Zuhause sind etwas heller und dahinter ist ein hellerer grauer Hintergrund, um die Benutzerfreundlichkeit zu verbessern. Denken Sie wie der Benutzer! Lassen Sie sie leicht wissen, auf welcher Seite sie sich befinden. Häufig werden dazu Registerkarten, Farben, Unterstreichungen, Hervorhebungen und zusätzliche Grafiken verwendet. Denken Sie über diese Optionen nach und seien Sie kreativ mit Ihrem Ansatz.
Bei Links und Schaltflächen ist der Hover-Status eine erhebliche Verbesserung für Ihre Benutzerfreundlichkeit. Schauen Sie sich noch einmal das endgültige Bild an und schauen Sie sich einige Links an. Ein durchdachtes Design wird prüfen, wie diese aussehen und wie sie funktionieren werden. Wenn Sie Ihre eigenen Sites nicht codieren, verwenden Sie ein kleines Bild eines Link-Cursors, um den Programmierern mitzuteilen, was los ist. Versteckte Funktionen wie ein Dropdown-Menü (Bild unten) müssen berücksichtigt und vollständig gestaltet werden. Warten auf Ihr schönes Design, gepaart mit einigen abscheulichen Dropdown-Menüs, werden Sie verrückt machen. Wenn Sie der Designer sind, müssen Sie alle diese Aspekte berücksichtigen.
Das Link-Cursor-Image kann als PNG zusammen mit weiteren kostenlosen Designressourcen hier gefunden werden.
Hast du das bemerkt? NEU! Abzeichen? Ich habe gerade eine meiner ersten Regeln gebrochen! Nun, wir machen eine kleine Ausnahme für Pixel-Schriften! Pixel-Schriftarten haben kein Anti-Aliasing, daher sind sie sehr scharf. Diese Schärfe kann für eine Schrift mit normaler Größe oft unansehnlich sein, Pixel-Schriftarten funktionieren jedoch wunderbar bei kleinen Größen. Schauen Sie sich an, wie unleserlich Verdana und Georgia bei 8pt im Vergleich zu den Pixel-Schriftarten sind. Ein großer Unterschied, ja?
Pixel-Schriftarten sind in Flash sehr beliebt, sie werden schneller geladen und behalten ihre Schärfe, funktionieren jedoch auch im Webdesign! OK, nun, da Sie die Freuden der Pixel-Schriftarten kennen, sollten Sie sie nur sparsam einsetzen. Für Anwendungen wie diese klein NEU! badge funktioniert prima, aber für die meisten anderen Anwendungen sollte man sie nicht verwenden - niemand möchte mehr als ein paar Wörter in einer Pixelschrift lesen. Die in diesem Beispiel verwendete Schriftart heißt Uni 5063 und kann kostenlos von Miniml heruntergeladen werden.
Untersuchen Sie nun die abgerundeten Ecken des Dropdown-Menüs. Der weiße Hintergrund ist eigentlich aus drei Rechtecken mit abgerundeten Ecken aufgebaut. Das dritte wurde mit dem Direktauswahl-Werkzeug nach außen gedreht, um eine abgerundete innere Ecke zu erhalten.
Machen Sie Ihre Seitenleisten weiß und erstellen Sie Hilfslinien, die jeder Seitenleiste eine Auffüllung von zehn Pixeln geben. Fügen Sie allen Dummy-Text hinzu, den Sie verwenden, und duplizieren Sie die Seitenleisten nach Bedarf. Um sie vertikal auszudehnen oder zu kontrahieren, verwenden Sie das Direktauswahl-Werkzeug, um die unteren vier Ankerpunkte auszuwählen und diese mit der Tastatur nach unten oder nach oben zu verschieben. Der nächste Schritt ist die Feinabstimmung des Textstils.
Der gesamte Text wurde in einer Hierarchie von Wichtigkeit und Fokus angeordnet und dies wird durch die Gestaltung dieses Textes signalisiert. Die größte Schriftgröße und die dunkelste Farbe (gelesen: höchster Kontrast) ist für die Schlagzeile des Hauptinhalts reserviert. Die Untertitelzeile ist größer und dunkler als der Hauptkörper, und der Hauptkörper ist größer als der Inhalt der Seitenleiste und so weiter. Beachten Sie, dass alle Farben aus den Farbfeldern stammen - Konsistenz, Konsistenz, Konsistenz!
Nachdem Sie nun alle Sidebar-Boxen angeordnet haben und der Text entsprechend farbig ist, können Sie die Boxen gestalten. Gib jedem Eintrag einen sehr hellen Hintergrundverlauf und zeichnen Sie mit dem Linien-Werkzeug eine horizontale Linie am oberen Rand des Verlaufs. Diese trennen sich visuell Eintrag. Geben Sie der Sidebar-Box einen leichten Schatten.
Zeichnen Sie für den Hintergrund des Titelbereichs von Seitenleistenabschnitten ein Rechteck unter den anderen Formaten und fügen Sie eine Verlaufsüberlagerung aus Rosa und einen 1px-Strich hinzu, der mit einem horizontal reflektierten Farbverlauf von Rosa zu Weiß gefüllt ist. Geben Sie der Titelhintergrundebene dann eine Ebenenmaske in der Form des Seitenleistenfelds.
Wiederholen Sie diese Schritte für alle Sidebar-Boxen Ihres Designs. Wenn Sie daran interessiert sind, die Newsletter-Anmeldebox zu erstellen, lassen Sie Platz für sie und wir werden in den nächsten Schritten darauf eingehen.
Wenn Sie diese kleine Grafik unten in jedem Seitenleistenfeld erstellen möchten, ist es viel schneller, wenn Sie mit Illustrator etwas mehr arbeiten. Illustrator ist häufig so eingestellt, dass er sich im Farbmodus CMYK befindet. Da Sie jedoch für den Bildschirm entwerfen, muss der Farbmodus in RGB geändert werden. Wechseln Sie zu Illustrator und wählen Sie Datei> Dokumentfarbmodus> RGB-Farbe. Als nächstes müssen Sie die gewünschte Fußzeilengrafik zeichnen.
Wechseln Sie nun zurück zu Photoshop, wählen Sie die drei mittleren Farbfelder aus Dunkelgrau, Pink und Cyan aus und ziehen Sie sie zu Illustrator. Verwenden Sie das Pipettenwerkzeug (I) in Illustrator, um die Grafik wie gewünscht zu färben. Ziehen Sie die Grafik in Photoshop, und passen Sie sie an. Sie können auch einige Effekte hinzufügen, ich habe mich mit einem leichten Schlagschatten und einer subtilen Verlaufsüberlagerung (Schwarz zu Weiß, Mischmodus von Multiplizieren und Opazität von 10%) entschieden.
Der Vorteil dieses Verfahrens besteht darin, dass ein intelligentes Objekt bereits farbig ist. Wenn Sie dies in Photoshop ziehen und versuchen, die einzelnen Teile einzufärben, wäre dies ein längerer Prozess, für den Sie das Smart-Objekt rastern und mehrere Ebenen erstellen müssen.
Ich werde nicht zu verrückt in die Ideen hinter den Grafiken und dem Branding wie zuvor, aber ich möchte auf einige der Vordergrundgrafiken der Website eingehen. Im endgültigen Bild gibt es eine Reihe von Grafiken, die der in Schritt 18 ähneln, aber sie sind etwas komplexer. Nachdem Sie die Formen Ihrer Grafik gezeichnet haben, öffnen Sie die Effekte und fügen Sie eine Verlaufsüberlagerung hinzu.
Sie können sehen, wie die Farben im Farbverlauf angeordnet sind, um eine scharfe Trennung zwischen den helleren und den dunkleren Schattierungen zu erzeugen. Beachten Sie, dass dies auf verschiedene Weise möglich ist, beispielsweise die Verwendung von weißen Rechtecken und Ebenenmasken.
Diese Grafiken eignen sich hervorragend zum Umschließen und Personalisieren von Symbolen. Wie das Fragezeichen im Hauptteil Wusstest du… Jedes Symbol oder Symbol kann dort platziert werden. In den folgenden Beispielen werden Symbole aus dem kostenlosen Simplicio-Paket verwendet. Viele weitere kostenlose Icon-Packs finden Sie im Icon Pot.
Überraschenderweise ist es für mich eines der schwierigsten Teile des Webdesigns, benutzerdefinierte Schaltflächen zu erstellen. Diese Schaltflächen folgen dem, was von der Webdesign-Community als "Web 2.0 Design" bezeichnet wurde.
Lassen Sie uns zunächst einige Schaltflächen im endgültigen Bild untersuchen. Aus Gründen der Konsistenz ist der Text auf jeder Schaltfläche Rockwell-fett, mit Ausnahme der Anmeldeschaltfläche, da sie klein ist - Rockwell funktioniert bei solchen kleinen Größen nicht gut. Darüber hinaus sind alle Textstile und die Hintergrundschaltflächen gleich.
Wenn Sie als nächstes den vergrößerten But
Accentsconagua