Fan-Website-Design Schritt für Schritt

Dieser Beitrag ist schon lange in der Mache. Ursprünglich sollte er als Fortsetzung der Artikelreihe "Erstellung einer Fanseite" (eins und zwei) erscheinen. Warum also findet sich dieser Artikel im Blog von Fable 3? Die Antwort ist einfach: Bei Design ohne ein ganz konkretes Beispiel ist es schwierig, etwas zu erklären. Es gibt kein sphärisches Design im Vakuum. Daher, als vor einiger Zeit beschlossen wurde, eine unserer Fanseiten, die der Spieleserie Fable gewidmet ist, neu zu starten, wusste ich, dass dies das Beispiel sein würde, mit dem ich meine "Weisheiten" teilen würde.

Tatsächlich habe ich natürlich nicht vor, die große Geheimnis des Universums zu enthüllen oder mit einem einzigen Artikel zu lehren, wie man ein einzigartiges Design für Ihre Fanseite erstellt. Das Thema Design ist so umfangreich und facettenreich, dass es für einen einzelnen Designer unmöglich ist, dies anhand eines einzigen Projekts vollständig zu erklären... Ich möchte auch gleich klarstellen, dass dies kein Photoshop-Tutorial ist. Davon gibt es genug ohne mich, Google hilft. Ich gehe davon aus, dass Sie schon mit den Grundlagen von Photoshop vertraut sind, und daher sollten Sie keine schrittweisen Anweisungen wie "drücken Sie hier" oder "gehen Sie dorthin" erwarten. Dies ist kein Photoshop-Kurs, sondern ein Meisterkurs in Design. Ich werde erzählen, wie ich arbeite und einige Tricks und Geheimnisse ansprechen, die keine Geheimnisse sind, aber aus irgendeinem Grund oft vergessen werden. Lass uns anfangen :)

Bereiten Sie die Staffelei und die Leinwand vor

In unserem Fall wird die Staffelei, wie Sie wahrscheinlich bereits erraten haben, Photoshop CS4 sein, und die Leinwand unsere ursprüngliche, noch leere neue Datei. Neben "Photoshop" gibt es auch andere Programme, wie zum Beispiel Gimp. Einige schaffen es, in Corel Draw zu arbeiten. Aber dennoch haben die Menschen noch kein besseres Programm für Webdesign erfunden als Photoshop. Dies ist das Hauptwerkzeug für Webdesigner. Das gleiche gilt für Corel Draw oder Adobe Illustrator, die zur Erstellung einzelner Elemente Ihres Designs verwendet werden können, aber das "Zusammenstellen" des Layouts funktioniert am bequemsten in Photoshop.

Nachdem wir über die "Staffelei" gesprochen haben, ist es Zeit für die Leinwand. Hier sollten wir die Bildschirmauflösungen erwähnen. Vor etwa fünf Jahren dominierte überall und immer die Auflösung 1024x768, während 1280x960 gerade erst anfing, die Köpfe der Menschen zu erobern. Vor ein paar Jahren galten 1680x1050 und 1600x1200 als hohe Auflösung. Heute sind Full HD-Bildschirme jedoch zunehmend zur Norm geworden, d.h. wir sollten uns an einer maximalen Auflösung von 1920x1080 orientieren. Dennoch hat sich 1024x768 noch nicht endgültig verabschiedet, was bedeutet, dass dies unsere Untergrenze ist. In der Tat ist es mehr die Breite, die entscheidend ist, da unsere Website in der Höhe sehr lang sein wird, wie 90% aller Websites im Netzwerk.

Früher war es modern, "dehnbare" Websites zu erstellen. D.h. einzelne Designelemente bestanden aus wiederholenden Elementen, wodurch die Webseite in ihrer Breite an die Auflösung des Benutzers angepasst wurde. Aber mit der Einführung von Full HD wurde diese Methode zur Anpassung der Website an die Benutzerauflösung unästhetisch. Das menschliche Auge ist so beschaffen, dass Informationen, die in Greifweite angeordnet sind, am besten auf einer Breite wahrgenommen werden, die ungefähr einem A4-Blatt entspricht. Alles, was breiter ist, ist bereits nicht mehr im Fokus. Daher wird der Inhaltsbereich in letzter Zeit häufig schmaler gestaltet, während der verbleibende Raum links und rechts mit irgendeiner Hintergrunddekoration gefüllt wird. So sind sowohl die Schafe satt als auch die Wölfe wohlauf :) Der Inhaltsbereich wird also 1000 Pixel betragen (vergessen Sie nicht, dass es im Browser rechts eine Scrollleiste gibt, die genau diese 24 Pixel aus 1024 "frisst"). Folglich wird unser Bereich für "Ränder" mit schönen Hintergründen (1920-1000)/2=460 Pixeln links und rechts. Um versehentlich nicht über diesen Bereich hinaus zu springen, verwende ich Hilfslinien. Im Modus mit aktiven Linealen ziehe ich einfach mit der Maus und "ziehe" die Hilfslinien an die gewünschten Stellen. Man kann auch gleich die Mitte unserer Leinwand markieren. Ich habe auch grob den Platz markiert, den ich für die Kopfzeile der Website vorgesehen habe. Sie wird sich in Zukunft bewegen, aber ich habe mir eine "Einkerbung" gesetzt. Das war's, die vorbereitende Arbeit ist abgeschlossen. Lassen Sie uns zur vorbereitenden Arbeit übergehen :)

Die Vorbereitungen sind abgeschlossen

Inspiration schöpfen

Diese Phase ist gleichzeitig die einfachste und die schwierigste. Sie müssen Material sammeln, aus dem wir unser Design formen werden. Wenn Sie ein professioneller Künstler sind, können Sie natürlich alle erforderlichen Grafiken und Interface-Elemente selbst anfertigen oder Ihr Team damit beauftragen... Auf der anderen Seite, was machen Sie, Artemiy Tatjanovich Andrejevich, in diesem Artikel? :) Dieser Artikel ist für Anfänger. Wir benötigen thematische Grafiken und Elemente für unsere Benutzerschnittstelle oder zumindest das, woraus wir diese Elemente erstellen können. Wahrscheinlich werden Sie beim ersten Mal nicht alles Nötige für Ihre Arbeit sammeln, was bedeutet, dass Sie oft auf die Suche nach Grafiken und Inspiration zurückkehren müssen. Ich fange normalerweise auf der offiziellen Website an, gehe dann zu großen Fanseiten, falls vorhanden. Und danach wechsle ich zu Google- und Yandex-Bildern. Dabei nutze ich beide Suchmaschinen, da die Suchergebnisse stark variieren. Wo eine Suchmaschine scheitert, findet die andere tonnenweise Material. Gut, wenn es viel Art gibt, große Screenshots der Benutzeroberfläche des Spiels vorhanden sind, der Entwickler viele Wallpapers veröffentlicht... aber oft wird Ihnen trotzdem etwas fehlen.

In meinen Suchanstrengungen habe ich viele Grafiken zu Fable und mehr gefunden, für verschiedene Teile des Spiels. Aber zu dritten Teil sind schöne Grafiken rar. Aber sammeln Sie alles: Wallpapers, Konzepte, Screenshots... Man weiß nie, was nützlich sein könnte. Ich werde Sie nicht mit der vollständigen Sammlung des gefundenen Materials überfordern. Im Spoiler finden Sie die Elemente, die schließlich die Grundlage des Designs bildeten.

Dieser Rahmen wurde am Ende in eine ganze Reihe von einzelnen Benutzerschnittstellenelementen zerlegt


Die erste brauchbare Grafik, die zum dritten Teil gefunden wurde

Und das ist die zweite Grafik. Mehr in diesem Stil wurde nicht gefunden

Und dieses Kunstwerk wurde sofort für den Hintergrund verwendet. Es ist nicht perfekt, aber besser wurde nicht gefunden.

Kunst für den zweiten Teil kam am Ende der Arbeit nützlich

Wo wären wir ohne das Logo?

Arbeit beginnen

Jetzt können wir mit der Arbeit beginnen. Ich möchte gleich einen kleinen Trick verraten: Ich speichere regelmäßig die Arbeitsergebnisse unter einem neuen Namen, um die Versionshistorie zu wahren. In der Regel ist das erste Ergebnis die Version 0_1, dann folgen 0_2, 0_3 usw. Die Version 1_0 tritt ein, wenn Sie der Meinung sind, dass Sie alles gemacht haben, was Sie wollten, und es Zeit ist, die Arbeit den Gutachtern/Freunden/Kunden zu zeigen. Wahrscheinlich wird das Design Änderungen benötigen. Dann erscheinen die Versionen 1_1, 1_2 usw. Das ist praktisch, um den eigenen Fortschritt zu verfolgen. Außerdem gibt es die Möglichkeit, bei Bedarf zu älteren Versionen zurückzukehren oder ein Element wiederherzustellen, das Sie in der aktuellen Version entfernt oder unkenntlich gemacht haben.

Und noch ein Rat: In Photoshop werden alle Ihre Elemente auf separaten Ebenen gespeichert. Scheuen Sie sich nicht, ihnen sofort sinnvolle Namen zu geben und sämtliche Schichten eines bestimmten Elements mithilfe von Strg+B zu gruppieren. Wenn Ihr Dokument mehr als 100 Ebenen enthält, wird es ohne Beschriftungen und Gruppierungen sehr schwierig, den Überblick zu behalten.

Aber genug geredet, schauen wir uns das erste Ergebnis an. Obwohl es keineswegs das erste ist, ist es fast das Null:

In dieser Phase ist der Bereich für den Inhalt grob umrissen, die Grafiken liegen ungefähr an den Stellen, an denen sie sein könnten. Überall sind bereits Elemente sichtbar, die in Zukunft ins Design integriert werden müssen oder auch nicht. Gehen wir voran. In dieser Phase wurden übrigens zwei wichtige technische Arbeiten durchgeführt. Unser Charakter wurde sehr sorgfältig vom Hintergrund ausgeschnitten und der Rahmen in kleine Teile zerlegt.

Für das Ausschneiden verwende ich bevorzugt keine Radiergummis, sondern Ebenen-Masken. Ich male mit der schwarzen Farbe über die Bereiche, die verborgen werden müssen, und lasse die sichtbaren Teile weiß. Graustufen sind für Bereiche von Halbdurchlässigkeit. Dank dessen kann ich, wenn ich etwas überflüssiges lösche, es leicht wieder an seinen Platz bringen. Den ausgeschnittenen Charakter habe ich in maximaler Auflösung separat gespeichert, damit er nicht verloren geht.

Der Rahmen wurde in Teile zerschnitten, indem kleine Stücke abgeschnitten und in Texturen umgewandelt wurden. Die Ecken sind dreimal spiegelnde obere linke Ecke. Dies verschafft mir Symmetrie.

Ursprünglich war das Design als düster geplant, stilistisch nah an unseren beiden Hauptgrafiken. Mit weichen Pinseln und verschiedenen Mischmodi gelang es mir, ein recht helles Hintergrundbild in ein ziemlich dunkles Gemälde zu verwandeln. Den Inhaltsbereich wollte ich als dreifach gefaltetes Pergament darstellen, das von einem goldenen Rahmen umgeben sein sollte, den Sie kennen sollten. Die Krone, eines der Schlüsselmotive, blieb im Design enthalten. Ich begann langsam, eine Schriftart für das Menü zu suchen.

Mit schönen kyrillischen Schriftarten gibt es einige Probleme. Oftmals existieren sie einfach nicht. D.h. es gibt englische Buchstaben, aber keine russischen. Oder sie kosten in der russischen Version viel Geld, oder die russische Version wurde von Amateuren ungeschickt und unordentlich erstellt. Oder es ist alles in Ordnung, aber die Schrift ist schwer lesbar :) Die Schrift auf dem Bild heißt bonzai. Wer sie braucht, kann mich kontaktieren. Ich teile sie gerne. Lass uns weitermachen.

Nach einigen Mühen begann sich allmählich etwas Sinnvolles herauszukristallisieren. Die erste Version des Hauptmenüs wurde erstellt (es wird später geändert, aber die Vorlage wird uns oft nützlich sein). Aufmerksame Leser werden bemerken, dass die linke und die rechte Seite dieses Menüs unsere Krone in Kombination mit dem Verzieher des Rahmens sind. Scheuen Sie sich nicht, verschiedene Interface-Elemente zu kombinieren. Zusammen ergeben sie häufig unerwartete, aber angenehme Ergebnisse. Außerdem änderte sich das Konzept des Hauptinhaltsbereichs. Ich versuchte, etwas Ähnliches wie einen königlichen Umhang darzustellen, aber das Ergebnis gefiel mir ganz und gar nicht. Daher kam es zu einem bewussten Entscheid, das Konzept zu ändern.

Dies ist noch nicht eine neue Iteration, es ist im Grunde einfach ein Versuch, wie es in einer hellen Variante und ohne "Mantel" aussehen wird? - Offensichtlich besser, aber ich muss weiter nachdenken. Übrigens, die Elemente in der oberen linken Ecke sind "Buchstaben" der Schriftart fleur. Eine großartige Sache zur Erstellung von Interface-Elementen. Eine Menge Verzierungen und Blumen in einer Flasche.

Und hier ist etwas Neues. Ich experimentierte mit der Positionierung unseres Helden im Header der Website, aber das Wichtigste ist nicht das. Ich habe das horizontale Menü abgelehnt und versucht, ein vertikales zu machen. Warum nicht, sieht ganz gut aus. Und das zentrale Menü ist in den Footer gewandert.

Eine weitere Zwischeniteration, in der ich das horizontale Menü mit dem vertikalen verglich, während ich darüber nachdachte, die Seitenblöcke auf Klick beweglich zu machen.

Hier ist der Fall, in dem Ihnen die gespeicherten vorherigen Versionen einen Dienst erweisen. Das Design ist in eine völlig falsche Richtung geraten. Das Pergament über die gesamte Breite des Inhalts zusammen mit dem Rahmen in der Mitte und den verkleinerten Rahmen für die Seitenblöcke sehen schrecklich aus. Ich habe diese Variante verworfen, bin einen Schritt zurückgegangen und habe einen anderen Weg eingeschlagen.

Und hier ist der Moment der Wahrheit! Nachdem ich einen Schritt zurück gegangen bin und mit unseren Elementen experimentiert habe, entstand schließlich ein Layout, das bereits sehr nah am endgültigen ist. Alle wesentlichen Elemente sind an ihren Plätzen: Hauptmenü, Seitenblöcke, Inhalt, Header und Footer. Wenn Sie genau hinsehen, werden Sie bemerken, dass ich doch etwas aus der vorherigen misslungenen Iteration verwendet habe. Die Textanordnung wurde eher willkürlich von einer Seite über Dragon Age übernommen, nur um die Position des Textes zu schätzen. Als Hauptschrift wurde Palatino Linotype gewählt. Das ist eine schöne Standardschrift, was sehr wichtig ist. In diesem Fall wird Ihre Website problemlos auf allen Windows-Nutzern angezeigt. Natürlich gibt es Möglichkeiten, eigene Schriften zu verwenden, die die Website im Cache des Benutzers laden wird, aber dies verursacht zusätzlichen Traffic und Probleme mit der Schriftanzeige in verschiedenen Browsern. Ich empfehle, sich damit nicht zu sehr zu beschäftigen. Im Internet gibt es eine großartige Tabelle der Standard-Schriftarten von Windows. Ich benutze sie selbst und empfehle Ihnen das gleiche. Im Header hingegen kann und sollte man dekorative Schriftarten verwenden. Für den Namen der Website habe ich in diesem Stadium eine großartige Schriftart gefunden, die Algerius Caps heißt. Fühlen Sie den Unterschied zu dem, was vorher war!

Eine sehr interessante Phase, die deutlich zeigt, dass selbst im fast abgeschlossenen Design immer Verbesserungen möglich sind. Erstens habe ich das untere Menü schließlich aufgegeben und es endgültig in den Footer verwandelt. Erinnern Sie sich, ich sagte, dass uns das horizontale Menü noch nützlich sein würde? - Es war nützlich. Das Layout wurde von bereits nicht mehr benötigten Elementen befreit, damit diese unser Design nicht überfrachten. Aber das Wichtigste ist, dass die Krone im Design ihren endgültigen Platz gefunden hat. Weg mit dem Schwert aus der Scheide! Wir nehmen eines unserer Grafiken und schneiden die Hand mit dem Schwert und der Krone heraus. Die Arbeit zur Abdeckung des Logos, das über den Handschuh hing, war einfach filigran. Dies ist der Fall, in dem eine Vergrößerung von über 1000 % nicht überflüssig ist. Außerdem begann ich, mit der Farbkorrektur unseres Hintergrunds zu arbeiten. Er war zu gelb-grünlich. Ich habe ihn abgeschwächt. Dazu verwende ich normalerweise eine zusätzliche Ebene, die mit der benötigten Farbe gefüllt ist, mit dem Mischtyp soft light (weiches Licht), aber je nach Bedarf kann man auch andere Mischtypen ausprobieren. In diesem Fall wurde die Gamma mit einer blauen Ebene korrigiert.

Ich setzte die Feinabstimmung des Designs fort. Ich korrigierte die Platzierung der Grafik im Hintergrund, passte erneut die Farbpalette an. Ich beseitigte fast allen verbliebenen Müll von der vorherigen Bereinigung, nur ein Verzieher blieb übrig. Ich bemerkte jedoch auch, dass der Name der Website auf dem Hintergrund des Himmels blass aussieht. Deshalb korrigierte ich den Stil und machte ihn kontrastierend zum Hintergrund, aber dennoch unter Verwendung der Hauptfarben der Website.

Die Zielgerade

Tatataaa! Hier ist die Version 1_0. In Wirklichkeit ist sie nicht endgültig, aber in diesem Stadium entschied ich mich, das Layout meinen Freunden zu zeigen und ihre Kritik zu hören. Hier gibt es keinen Müll mehr, der Hintergrund wurde erneut koloriert. Aber was noch wichtig ist, ein kleines Menü mit Suchfunktion und Schaltflächen für soziale Netzwerke wurde hinzugefügt. Zunächst wird nur RSS funktionieren, aber bald wird ein Twitter, ein YouTube-Kanal und eine Facebook-Seite eröffnet.

Die erste wichtige Anmerkung ist, dass unser Held offensichtlich einsam im Header der Website ist. Er braucht Gesellschaft. Leider wurden keine schönen weiblichen Illustrationen zum dritten Teil gefunden, aber die Zigeunerin aus dem Artwork zum zweiten Teil kam zur Rettung. Das ist passend. Die Seite handelt ja schließlich nicht nur vom dritten Teil. Anstelle der Dame musste wir unseren Helden von seiner Pistole befreien, sie war offensichtlich überflüssig.

Aber damit endete die Sache nicht, es traf eine neue Charge Anmerkungen ein. Die Website war wirklich zu grell golden, und der goldene Rahmen um den zentralen Inhaltsblock nahm zu viel Platz ein. Nun, ich habe den Farbton mit den Ebenen-Effekten gedämpft und den Rahmen verkleinert. Die Ketten, die das Design schweren und die Codierung komplizierten, wurden ebenfalls entfernt. Der Moment der Wahrheit ist gekommen. Die endgültige Version:

www.Fable-game.ru

Nachwort

Tatsächlich stand uns noch die Codierung bevor, die ebenfalls einige kleine Anpassungen mit sich brachte. Zum Beispiel die Position des Hintergrunds und der Helden relativ dazu. Es gab noch Anpassungen von Stilen, die Suche nach Bugs und Patzern. Aber das ist schon eine technische Angelegenheit. Das Schwierigste liegt hinter uns. Wenn Sie bis zu diesem Punkt gekommen sind, können Sie sich entspannen, sich selbst loben und das neue Werk stolz in Ihr Portfolio aufnehmen. Und dann mit dem Füllen und Nachfüllen der Website mit Materialien beginnen, die optimale Struktur durchdenken... aber das ist eine ganz andere Geschichte :)

Ich hoffe aufrichtig, dass meine "Geschichte mit Bildern und über Bilder" Ihnen gefallen hat und, was am wichtigsten ist, dass sie Ihnen hilft, Ihre eigenen schönen, einzigartigen, erstaunlichen Designs für Ihre Websites zu erstellen. Ich freue mich auf Ihre Fragen, Vorschläge oder Anmerkungen in den Kommentaren.

*Der Autor von Design und Text bin ich, Ksandr\_Warfire

Das Material wurde speziell für GAMER.ru vorbereitet