Fan-Art/Fan-Stuff > Fan-Art/Fan-Stuff
HG´s kleine Grafikstunde - Wie bastel ich mir eine Endzeit-Webseite
HumanGrunt:
Entstehung einer Webseite:
Hallo liebe Community. Ich habe mich schon grafisch lange nicht mehr zu Wort gemeldet. Aber da ich jetzt sowieso an einem neuen Projekt arbeite, um genau zu sein, an einer Webseite, dachte ich mir, Mensch Grunt, warum lässt du die Community nicht teilhaben an der Entstehung einer solchen. Und was hätte das Thema hier zu suchen, wenn es sich nicht um eine Endzeit-Website handeln würde. Vielleicht lasse ich mich ja sogar überreden, das fertige Produkt, als Website für unsere nahende Convention zu Nutzen.
Ich werde diesen "Kurs" in 2 grossen Teilen präsentieren. Teil 1, wird der grafische Bereich sein, Teil 2 der Coding-Teil
Und nun möchte ich ohne Umschweife auch gleich mit dem grafischen Teil beginnen:
Schritt 1: Das Konzept
Also, ganz zu Anfang sollte man sich erstmal ein Konzept überlegen. Welches Thema hat die Website. Farbwahl, hell oder dunkel, aufwendig oder schlicht? All diese Überlegungen sollten schon einmal bestehen bevor überhaupt irgendein Programm geöffnet wird. Wenn man einfach Anfängt, drauf los zu bauen kommt meist nichts gescheites dabei rum, oder man verliert das Ziel aus den Augen. Wenn man ein Konzept hat, hat man ein klares Ziel auf welches man hinarbeiten kann.
Schritt 2: Der Rohling
Der Rohling ist der erste und einer der wichtigsten Schritte auf dem Weg zu einer gute Internet-Seite (Das gilt natürlich nur für mich, jeder macht das ein wenig anders). Also ich habe angefangen, indem ich in Adobe Illustrator (jede andere Vektorprogramm tut es auch) das Grundgerüst angefertigt habe. Diese bildet nachher die Basis.
Schritt 3: Farbton und grobe Schatten
Um dem ganzen Gerüst erstmal eine Basis zum Arbeiten zu geben, habe ich das Gerüst in einem hellen Grau gefüllt (je dunkler das Grau, desto dunkler nachher die gesamte Seite). Dann habe ich den Rohren einen groben Schatten hinzugefügt, um ihnen wenigstens schonmal eine gewisse Plastik zu verleihen.
Jedes Objekt das nachher eine wirklich markante Wölbung zeigt soll, sollte jetzt schonmal einen solchen groben Schatten bekommen. Man kann diese zwar auch Nachträglich einfügen, dies wird allerdings wesentlich komplizierter.
Schritt 4: Details und feine Schatten
Dieser Schritt dürfte sich eigentlich von selber erklären. Ich habe einfach ein paar Schatten und Details eingefügt um das Gesamtbild noch Plastischer wirken zu lassen. Mit einem Pinsel, der Farbe Schwarz/Weiss und 25% Deckkraft sollte das kein Problem darstellen, selbst für unerfahrene Grafiker. Eine Auswahl kann helfen die gewünschte Form beizubehalten
Schritt 5: Textur und Farbe
Nun kommen wir zum wichtigsten Schritt, die Texturierung. Man kann natürlich auch nur mit Farben arbeiten, allerdings machen sich Texturen wesentlich besser, besonders auf Seiten die nach einem bestimmten Thema aussehen sollen, z.B. Endzeit, Wald oder Maschinen... Ich habe hier ein altes Backblech Fotografiert und das ganze dementsprechend angepasst. Die Lichter und Schatten, die wir eingefügt hatten, tun ihr übriges.
Schritt 6: Feinschliff
Ja der Feinschliff ist eine Kunst für sich, wenn man dabei nicht aufpasst, kann man die Stimmung des gesamten Bildes völlig ruinieren. Zm Feinschliff zählen unter anderem Reflextionen, Lichaktzente und evtl Details die vorher vergessen wurden oder erst jetzt sinnvoll eingebaut werden können.
Natürlich fehlen da jetzt noch die links, und der gesamte Inhalt. Dieses Tutorial beschäftigt sich auch im wesentlichen mit dem grafischen Aspekt...
So, zum grafischen soll es das erstmal gewesen sein, der Coding-Teil kommt sobald ich den Code stehen habe. Bei Fragen, einfach ne PM an mich, oder direkt in diesen Thread
Hellspawn:
Ja ne Frage hab ich ... was hat Deine Mutter gesagt als sie Ihr Backblech gesucht hat :s000: ;)?
Ne im Ernst sieht gut aus ... wenn Du mal wieder ne Vorlage haben willst hätte ich auch noch ein verwatzes Backblech ;D
HumanGrunt:
Nix, es war mein Backblech ^^
Lexx:
Mach mal dein Backblech bei Gelegenheit wieder sauber. :s000:
HumanGrunt:
grml... es geht hier nicht um mein backblech >:( ;D
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln