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  ?
Ne im Ernst sieht gut aus ... wenn Du mal wieder ne Vorlage haben willst hätte ich auch noch ein verwatzes Backblech 

[HumanGrunt]

Nix, es war mein Backblech ^^

[Lexx]

Mach mal dein Backblech bei Gelegenheit wieder sauber. 

[HumanGrunt]

grml... es geht hier nicht um mein backblech 

[Tyler]

Kannst du mir dein Backblech auch mal leihen?   

Nee, jetzt mal im Ernst...mach mal weiter.

[Lexx]

Wo bleibt'n jetzt eigentlich die Seite mit HTML-Code? Hab bock, n' bisken rumzutätscheln. 


 


 

[HumanGrunt]

<html>
<head>
<title>Fallout Convention Testseite</title>
</head>
<body bgcolor="000000">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3"><img src="Grafiken/de_01.jpg" alt="bild1"></td>
</tr>
<tr>
<td rowspan=2><img src="Grafiken/de_02.jpg" alt="bild2"></td>
<td><img src="hier frameset oder grafik deiner wahl einsetzten" alt="bild3"></td>
<td rowspan=2><img src="Grafiken/de_04.jpg" alt="bild4"></td>
</tr>
<tr>
<td><img src="Grafiken/de_05.jpg" alt="bild5"></td>
</tr>
</body>
</html>


Da hst du... und jetzt komm mir nicht mir "das ist laut CSS nicht valide..." ich denke nicht das ich für nen dermassen einfachen code CSS brauche 

[Lexx]

Scherzkeks. Ich hab aber trotzdem was zu kritisieren. 

Für eine solch einfach Webseite ist es ein Verbrechen, Tabellen zu benutzen, zumal ich nicht ansatzweise tabellarische Inhalte auf der Seite sehen kann. Desweiteren werden img-Tags mit einem /> abgeschlossen und ja, die Seite ist laut CSS nicht valide, weil sie nach W3C valide sein muss! 


Wuhu, der Tag ist gerettet, ich fühl mich wieder gut! *g*   





Badautz, da fällt mir ein, ich sollte an meiner Webseite auch mal weiter bauen... verdammt.

[HumanGrunt]

lol... ich meine das ich sich hire für mich der aufwand nicht lohnt noch mit stylesheets rumzuhantieren... reines html ist einfach schneller geschrieben...

[Lexx]

Also wenn du mit reines HTML = <html> <head> </head> <body> </body> </html> meinst, dann ja, ich stimme dir zu. Aber CSS ist dennoch viel sauberer, viel übersichtlicher und wenn man die Seite in irgend einer Weise wieder ändern will, schafft man das dank CSS in kürzerer Zeit, als wenn man jede Seite neu schreiben muss.

Ich arbeite nur noch mit Style Sheets... egal wie groß oder klein die Seite ist. Empfinde ich einfach komfortabler.


Aber weißt du was! Mir ist noch was tolles aufgefallen! 

Du packst in einer Zeile das Bild "de_01.jpg" in eine Zelle (eigentlich packst du alle diese Design-Bilder in eine entsprechende Zelle), obwohl du das auch als Hintergrundbild in eine div-Box hättest packen können. Generell gilt eigentlich immer, dass Bilder, die _nichts_ mit dem Seiteninhalt zu tun haben, als Hintergrundbild gesetzt werden sollten. Ist einfach besser für z.B. Screen Reader, usw. usf.

Barrierefreiheit und so.

[Hellspawn]

Um vielleicht mal beim Topic zu bleiben solltet Ihr uns und vor allem mir Blödhammel mal erklären was Ihr da faselt 
Ich verstehe nämlich nur Bahnhof ... und es sollte doch ne kleine Grafikstunde/-kunde werden ... oder 

[HumanGrunt]

ja... aber net mehr heute... ich werde das noch erläutern... bin einfach fertig heute