Wie erstellt man ein grafisches Layout für eine Website?

[X-män]

Guten Abend,

ich möchte demnächst eine Homepage für einen Bekannten erstellen und möchte diese nicht so langweilig aussehen lassen (also hauptsächlich Text und ein paar Bilder/Links etc.), sondern die Website vom Layout her grafisch aufbauen. Jetzt stelle ich mir allerdings die Frage, wie geht man beim Erstellen eines Layout vor?
Ein Design habe ich bereits im Kopf und als Grafikprogramm (ich nehme an, dass man das braucht, um eine solche Website zu erstellen) habe ich Gimp. Muss ich jetzt alle Homepage Elemente einzeln erstellen und diese dann entsprechend mit CSS positionieren, oder erstellt man das Design komplett im Grafikprogramm und schneidet dann einzelne Elemente der Seite raus und macht diese zu Bildern, so dass man sie dann nur noch einfügt?!
Könnt ihr mir vielleicht ein Tutorial zu dem Thema empfehlen?
Wäre echt klasse wenn ihr mir weiterhelfen könntet :)

Gruß,
X-män

PS: Ich kann HTML und auch CSS (also relativ viele Befehle) ;)

[mrjerk]

Hallo,

Ein Design habe ich bereits im Kopf und als Grafikprogramm (ich nehme an, dass man das braucht, um eine solche Website zu erstellen) habe ich Gimp. Muss ich jetzt alle Homepage Elemente einzeln erstellen und diese dann entsprechend mit CSS positionieren, oder erstellt man das Design komplett im Grafikprogramm und schneidet dann einzelne Elemente der Seite raus und macht diese zu Bildern, so dass man sie dann nur noch einfügt?!

Also, ich halte mich immer an der letztere Vorgehen. Wobei ich kein Grafiker bin, somit bin ich da auch kein Profi sondern mach sowas eher zum Spass.
Aber mit GIMP geht das eigentlich schon ganz nett.

Empfehlenswert ist es (ob in GIMP oder Photoshop), viel mit Ebenen zu arbeiten, also möglichst alle Einzelelemente, von denen man weiß, dass man sie irgendwann ausschneiden muss, in eigene Ebenen packen - diese nach Möglichkeit auch noch sinnhaft bennennen. Sonst wirst Du beim Ausschneiden komplett wahnsinnig :)
Ausserdem macht es die Verwaltung Deines Layouts im Grafikprogramm einfacher.

Weitere Tipps müssen Dir aber wohl "echte" Grafiker geben.

Viele Grüße,
Jörg

[X-män]

Empfehlenswert ist es (ob in GIMP oder Photoshop), viel mit Ebenen zu arbeiten, also möglichst alle Einzelelemente, von denen man weiß, dass man sie irgendwann ausschneiden muss, in eigene Ebenen packen - diese nach Möglichkeit auch noch sinnhaft bennennen. Sonst wirst Du beim Ausschneiden komplett wahnsinnig :)
Ausserdem macht es die Verwaltung Deines Layouts im Grafikprogramm einfacher.

Weitere Tipps müssen Dir aber wohl "echte" Grafiker geben.

Danke, da bin ich ja froh, dass ich mich zum Glück einigermaßen mit Ebenen auskenne. Ich hoffe einfach mal, dass mir noch mehr Leute irgendwelche Tipps zu dem Thema oder vielleicht doch einmal ein Tutorial vorschlagen, bzw. mir eine kleine Anleitung geben können :)

[bleicher]

Grüße,
vor langer zeit habe ich evrsucht eine webseite mit PaintShopPro zu erstellebn - was rauskamm, war sehr nett. so wäre es auch - nett, wie rinderwahn, die seuche der 90er, denn so wird es aussehen. layouts mit grafikeditoren sind fix, und die sehen NUR gut aus wenn ALLE bedingungen getroffen wurden. wird die seite NUR von DEINEM rechenr, mit deinem browser, deinem bildschirm und deinem betriebssystem ebsucht? wenn nicht - pass auf. CSS3 beitet schon mehr spielzeuge als alle sexshops der bahnhofviertel münchens - was soll da noch gimp? es ist ein tolles Grafikeditor - aber kein webdesign werkzeug.
MFG
bleicher

[Steel]

Ruhig Brauner, ruhig!

Fuer eine grafisch etwas anspruchsvollere Geschichte braucht man auch einen Grafikeditor. Woher sollen sonst die Grafiken kommen? Da spricht auch ncihts dagegen, dass man die Seite schonmal vorzeichnet. Man muss halt nur dran denken, dass der Kram spaeter auch mal sinnvoll eingesetzt werden soll.

Spricht doch ncihts dagegen, eine Fantasyseite wie ein Buch, Pergament oder aehnliches aussehen zu lassen. Nur sollte man halt mal Brain 1.0 anwerfen. Flexibilitaet laesst sich aber nicht einfach so erklaeren. Das muss man lernen. Dazu gehoert Try & Error.

[Multi]

oder erstellt man das Design komplett im Grafikprogramm und schneidet dann einzelne Elemente der Seite raus und macht diese zu Bildern, so dass man sie dann nur noch einfügt?!

Grundsätzlich macht man alles mit CSS was möglich/sinnvoll ist.Wenn Grafiken/Bilder gewünscht sind, dann ist dein Vorhaben die übliche Praxis.

Grundsätzlich entstehen Desgns erstmal komplett in einem Grafikprogramm. Das liegt daran, dass ca. 90% aller Designer kaum Ahnung von CSS und HTML haben. Die Umsetzung in HTML und CSS macht dann meist ein Layouter oder der Programmierer, der sich um den Rest der Seite kümmert. Reine HTML-Schreiber dürfte es kaum noch geben, deshalb wird das meist ein Programmierer machen.

Das kommt natürlich auch auf die Grösse des Projektes an und dessen Budget. ;)

[bleicher]

Grüße,
1)inhalt
2)inhalt
3)inhalt
4)inhaltstruktur
5)layout

ich habe anfangs auch versucht vom layout anzugehen - was dann rauskamm war bunte scheiße. webseite ist kein gemälde - es soll informationen vermitteln. und egal wie stolz du auf dein blinkendes kakhaufen sein kannst - besucher der seite wird es nerven und die hauen ab. interessantes aussehen soll den gut lesbaren inhalt umschließen, nicht verdecken.

du bist natürlich nur an deinem künstlerischen ausleben interessiert - da sind wir alle so ;) aber denk an die seite - ohne inhalt ist die nur noch eine der Sorte
MFG
bleicher

[Joachim]

Hi,

Jetzt stelle ich mir allerdings die Frage, wie geht man beim Erstellen eines Layout vor?

- Screendesign in Photoshop, ggf. auch Gimp oder andere Alternativen.
 - Clickdummy: echtes html auf Grundlage des Layouts, um das Verhalten im Browser zu testen.
 - Erstellung von Templates etc. wie auch immer Du Deine Website erstellen willst.

Was Du mit "erstellt man das Design komplett im Grafikprogramm und schneidet dann einzelne Elemente der Seite raus" meinst, kann ich nicht nachvollziehen.

Erstelle ein Html Gerüst mit den Inhalten und sorge per Css dafür, dass es so aussieht wie Dein Layout. Natürlich legt man Bilder, Icons, spezielle Backgrounds als Grafiken an, ggf auch als sogenannte Sprites, also _eine_ Grafik, die alle Icons enthält, und als Hintergrundbild dann für jedes Icon entsprechend positioniert wird. Das vermindert die Requests, die der Browser ausführen muss.

Flächen, Spalten, Linien etc. lassen sich aber meist genausogut als Border oder Hintergrundfarbe definieren, da brauchts dann keine Grafiken. Setzt man auf Css3 kann man z.B. auch Schatten und runde Ecken mit Css definieren.

PS: Ich kann HTML und auch CSS (also relativ viele Befehle) ;)

Wenn Du noch glaubst, dass html "Befehle" kennt, kannst Du es definitiv _nicht_.

Gruesse, Joachim

[X-män]

PS: Ich kann HTML und auch CSS (also relativ viele Befehle) ;)
Wenn Du noch glaubst, dass html "Befehle" kennt, kannst Du es definitiv _nicht_.

Also in HTML kann ich alle befehle, das war auf CSS bezogen, da es für diese Programmiersprache ja extrem viele Befehle gibt, die man sicher nicht alle auswenidg wissen kann.

Ok jetzt weiß ich, wie man sich ein Layout erstellt, allerdings stell ich mir nun noch die Frage, wie ich das im Quellcode schreibe, dass sich das Design variable an den Text anpasst, also, dass es automatisch länger wird etc. :)

Viele Grüße :)

[Novi]

Hallo,

PS: Ich kann HTML und auch CSS (also relativ viele Befehle) ;)
Wenn Du noch glaubst, dass html "Befehle" kennt, kannst Du es definitiv _nicht_.

Also in HTML kann ich alle befehle, das war auf CSS bezogen, da es für diese Programmiersprache ja extrem viele Befehle gibt, die man sicher nicht alle auswenidg wissen kann.

Naja es gibt einige Selektoren und viele Eigenschaften in CSS, aber Befehle sind mir auch da noch nicht untergekommen. Und das CSS Programmiersprache ist, wäre mir auch neu. ;-)

[Der Martin]

Hi,

Also in HTML kann ich alle befehle, das war auf CSS bezogen, da es für diese Programmiersprache ja extrem viele Befehle gibt, die man sicher nicht alle auswenidg wissen kann.
Naja es gibt einige Selektoren und viele Eigenschaften in CSS, aber Befehle sind mir auch da noch nicht untergekommen. Und das CSS Programmiersprache ist, wäre mir auch neu. ;-)

richtig, und für HTML gilt dasselbe.
Auch HTML ist keine Programmiersprache, Befehle gibt es da auch nicht.

Ciao,
 Martin

[X-män]

Naja es gibt einige Selektoren und viele Eigenschaften in CSS, aber Befehle sind mir auch da noch nicht untergekommen. Und das CSS Programmiersprache ist, wäre mir auch neu. ;-)

richtig, und für HTML gilt dasselbe.
Auch HTML ist keine Programmiersprache, Befehle gibt es da auch nicht.

Ja sry, dass ich "Befehle" geschrieben habe und ihr deshalb auch nicht mein Problem versteht. -.-
Hatte gehofft, dass mir noch jemand vernünftig weiterhelfen kann, aber so werde ich das wohl vergessen können :/

Übrigens, hast du das Komma falsch gesetzt, Martin. ;)
Und das "dass" schreibt man mit zwei "s", Novi. ;)

[Der Martin]

Hallo,

richtig, und für HTML gilt dasselbe.
Auch HTML ist keine Programmiersprache, Befehle gibt es da auch nicht.

Übrigens, hast du das Komma falsch gesetzt, Martin. ;)

na, wenn du dich da mal nicht in die Nesseln setzt.
Da bin ich jetzt aber sehr gespannt auf den Korrekturvorschlag.

Dafür ist in deinem Satz ein Komma zuviel.
Entweder: "Übrigens hast du das Komma falsch gesetzt."
Oder:     "Übrigens, du hast das Komma falsch gesetzt."

Ciao,
 Martin

[Steel]

Hi!

Hatte gehofft, dass mir noch jemand vernünftig weiterhelfen kann, aber so werde ich das wohl vergessen können :/

Du hast doch gesagt, Du koenntest HTML und CSS. Also erstelle die Seite semantisch korrekt und haesslich und dann mach dich an die grafische Umsetzung.

Du hast keine spezielle Fragen gestellt. Du hast gesagt, du kannst HTML. Also schreibst Du HTML. Du hast gesagt du Kannst CSS. Also wende es aufs HTML an. Du hast gesagt, du kannst mit GIMP die noetige Optik erstellen. Also tu das.

Welche Informationen brauchst Du noch? Soll man dir jetzt sagen, dass die coolen 3D Buttons der Links im Menue per CSS in die Links eingefuegt werden sollen? Das solltest Du doch auch wissen. Der Rest is doch nur etwas Logik und gepuzzle.

Falls Du dabei eine konkrete Frage hast, stell sie. Z.B. "Ich habe im HTML als Seitenheader eine h1 Ueberschrift mit dem Seitennamen. Jetzt will ich aber mein cooles Logo im Header. Wenn ich das in den Hintergrund des h1 tue, sieht das ja auch gut aus, aber die Schrift ist halt noch davor. Wie bekomm ich die Schrift weg, ohne sie zu loeschen, damit Suchmaschienen, Screenreader und Leute die mit ausgeschalteter Grafik unterwegs sind trotzdem noch was lesen koennen?"

Das waere eine gute Frage, zu der Du hier auch diverse Antworten bekommen haettest. Das ist aber scheinbar nicht Dein Problem, denn sonst haettest Du ja danach gefragt.

Was Du hier schreibst kann man halt nicht richtig nachvollziehen, da Du bei jedem relevantem Punkt behauptest, dass Du ihn beherrscht. Wo Deine Luecken sind, die gibts sonst wuerdest Du ja nciht fragen, laesst Du uns raten. Wenn man Dir allerdings offensichtliche Luecken aufzeigt (Du sagst, Du beherrscht HTML und CSS, spricht aber gleichzeitig von Befehlen - das widerspricht sich), und DIr nahelegt, dass Du mit deinen HTML und CSS Kentnissen beginnen sollst, reagierst Du abwehrend und beleidigt.

Wie kann man Dir also helfen? Ich weiss es grad nicht.

[zehbaeh]

Ich erstelle Layouts eher mit Programmen wie InkScape/Freehand/Illustrator/Vektorgraphik-Programm.
Pixelelemente (wie Fotos/Illustrationen) platziere ich dort in hoher Auflösung in Beschneidungs/Operations-Pfaden. Dadurch ist so ein Layout i.d.R. auch "Druckbar".
Der Export einzelner Element in passender Auflösung ist recht einfach.