Tutorial: Website-Vorlage basteln

Motivation / Intro

Schon fast jeder hat mittlerweile eine Website, doch die meisten sind billig gemacht und schlecht durchdacht. Es ist einfacher in einem Grafikprogramm ein Layout zu überlegen und nachzubauen bevor man mit dem Umsetzen in HTML beginnt. Hinweis: Das Video ist im Zuge eines Seminars entstanden, ist jedoch ohne Audiospur. Es ist keine Vorlage wie man eine Website selbst bastelt, nur wie man sich eine Vorlage in GIMP baut, die man im Nachhinein zerlegen und in HTML umsetzen kann.

Tutorial details

  • Kategorie: Buttons, Icons & Web
  • Verfasst von
  • Erstellt am 14 Aug. 2006, zuletzt bearbeitet vor etwa einem Jahr
  • Benötigte Zeit: ≈45 Minuten Skill_2
  • Getestet mit GIMP 2.2
Creative Commons License
Dieses Werk von Bernhard Stockmann ist urheberrechtlich geschützt und wird unter den Bedingungen der Attribution-NonCommercial 3.0 Unported-Lizenz zur Verfügung gestellt.
  1. 1

    In diesem Video-Tutorial (ohne Audiospur) seht ihr wie man das unten angezeigte Website-Layout in Gimp bauen kann. Die Umsetzung der Vorlage zu einer Website in HTML ist nicht inkludiert und muß noch selbst vorgenommen werden.

  2. 2 website_layout.avi

    Auf unserer Video-Tutorials-Seite (im Menü) findet ihr ein Video dazu.

  3. 3

    Viel Spaß!

Kommentare

Hier kannst du Kommentare, Fragen und Anregungen loswerden. Der Autor und die anderen Benutzer können deinen Beitrag sehen und darauf antworten.

Natürlich kannst du auch im Chat fragen.

Abo-Verwaltung

Diese Funktion steht nur angemeldeten Benutzern zur Verfügung.

*

Als registrierter Benutzer kannst du Artikel und Kommentare bewerten, Bilder zu Kommentaren anhängen, dich bei Neuigkeiten benachrichten lassen usw... Außerdem werden keine CAPTCHAs mehr angezeigt.

*…optional

..
vor 7 Monaten

hey devvv,

großes kompliment an dich...finde deine tut´s alles super hab die meisten nachgebaut und begeistert was man mit gimp alles zu stande bringen kann..
innerhalb 3 tagen(seitedem kenne ich diese homepage)bin ich ein riesen fan von dir geworden. dieses layout gefällt mir besonders, es ist verspielt dennoch seriös und spricht surfer an..

ich würde mich freuen wenn du noch andere sachen posten könntest

gruß tim

Oned
vor 10 Monaten

dddd

devvv devvv Mitglied seit mehr als 5 Jahren
vor etwa 2 Jahren

vuze unterstützt leider diese torrents nicht mehr. wir lassen uns da etwas einfallen um die videos wieder zu hosten...

Akuba
vor etwa 2 Jahren

ich kann das video nicht herunterladen, ich werd nur zur vuze hauptseite geleitet :/

Carla
vor etwa 2 Jahren

Bei mir klappt das überhaubt nicht mit dem Video! Kann das nicht jemand bei Youtube reinstellen oder so? Bei mir muss ich da immer so was downloaden und als ich das dann gemacht habe, kam da nur Werbung für andere Videos!

Tuxibunti
vor mehr als 2 Jahren

Cooles Vid.

JSB JSB Mitglied seit etwa 4 Jahren
vor mehr als 3 Jahren

Scheinbar seid ihr alle zu blöd^^
Funktioniert mit Ubuntu, Transmission und Totem (alle Codecs) wunderbar. Gutes Tutorial, danke!

Mondmann Mondmann Mitglied seit mehr als 3 Jahren
vor mehr als 3 Jahren

Also was auch immer dieser komische vuze Teil da sein soll: Es funktioniert nicht!
Habs nun von 3 Verschiedenen Rechnern aus geladen und sehe immer nur nen schwarzen Screen.
Der Player läuft zwar,aber nur schwarz.
Schade, wäre sonst bestimmt ein gutes Tutorial.

Quigi Quigi Mitglied seit fast 4 Jahren
vor fast 4 Jahren

Ich kann das VIdeo nicht mit VLc Player und auch nicht mit dem Media Player apspielen! Ich brauche das TUT unbedingt!

devvv devvv Mitglied seit mehr als 5 Jahren
vor fast 4 Jahren

habe es gerade mit torrent getestet - hatte keine probleme

jogr
vor fast 4 Jahren

Läßt sich wohl nicht mehr "ordentlich" herunterladen.
Laut Downloadseite ist es auch nicht mehr 45 sondern nur noch 25 Minuten lang und läßt sich (auch mit installiertem XVid / DivX Codec) nicht abspielen

korny
vor mehr als 4 Jahren

Hey leider bekomme ich zu dem Video im Bittorrent und im Azureus keine Connection mehr :( Wäre irgendjmd. so lieb es mir irgendwie zu schicken? meine email adresse ist folgende: wizzard-hg@gmx.de
Vielen Dank schonmal im Voraus :)
MfG korny

Michael Michael Mitglied seit fast 5 Jahren
vor mehr als 4 Jahren

Ja sieht schon besser aus danke xD.
Kann man denn das nicht noch anders feiner machen??? So der untere Teil des Bildes so aussieht wie der oberer Teil des Bildes???

MFG Michael

devvv devvv Mitglied seit mehr als 5 Jahren
vor mehr als 4 Jahren

Um das zu lösen würde ich die Ebene einfach über Filter / Weichzeichnen / Gaußscher Weichzeichner Wert: 1px weichzeichnen. Das sieht man kaum.

Michael Michael Mitglied seit fast 5 Jahren
vor mehr als 4 Jahren

Hallo Leute,
Also ich wollte auch mal eine HP machen dazu habe ich eine Problem, wie bekomme ich Balken wie im Bild gezeigt hin?? Wenn ich die mahce verpixel die immer, inkl Schrift.
Könnt ihr mir sagen wie ich das richtig machen könnte.

Danke im vorraus

nw42
vor fast 5 Jahren

Hi Hubi!

Nvu ist prinzipiell ein guter Einstieg. Ich persönlich habe aber die Erfahrung gemacht, das Nvu schnell ein "Eigenleben" entwicklelt und man probleme bekommt sein Layout so umzusetzten, wie man das gerne möchte.

Ich bin eigentlich Grafiker, arbeite aber ab und zu unter "professionellen" Bedinungen zusammen mit Softwareentwicklern an Web-Projekten. Dabei habe ich diese OpenSource Tools sehr schätzen gelernt:

FireFox mit Plugin: "Web Developer" + "Firebug" + "Color Zilla" (sehr mächtige Umgebung zum Testen von Web-Sites - Sobald du die Sachen im Internet Explorer checken willst bekommst Du massive Probelme, denn vergleichbar gute Tools findest Du sonst nur in teuren Kommerziellen WEB Entwickler Tools)

Texteditor: jEdit (Das ist ein extrem gutes Teil - und ja ich schreibe alles im Texteditor ;-) ich bin wie gesagt Grafiker, aber zusammen mit Firefox und den Plugins arbeitet sich das sehr angenehm)

Referenz: immer noch "Self HTML" da steht das wichtigste übersichtlich an einer Stelle...

Zur Arbeitsweise:

HTML-Code: zur Seitenstrukturierung
CSS-Code: zur Formatierung
Java-Script: für die Funktionalität

Ich baue einen HTML-Rahmen und Formatiere den mit CSS-Classen und ID's. Dann esretlle ich eine extra CSS-Datei und in der experimetiere ich dann mit der Formatierung, bis mir alles gefällt. Zum Schluß kann man, wenn es wirklich erforderlich ist mittels Java-Script noch Funktionen hinzufügen.

Hoffe, das Hilft etwas weiter? Am anfang habe ich mit Nvu kleine Einzelelemente erzeugt, und mir dann den Quellcode angeschaut - das Hilft sehr - und dann merkt man auch, das man die kelinen Einzelteile am besten selber im Texteditor zu einer Seite zusammenfügt - da hat man mehr Kontrolle und es geht nicht so schnell was schief...

viele Grüße

nw42

Hubi
vor fast 5 Jahren

Nachdem ich jetzt schon fast alle Tuts auf dieser wirklich guten Seite durchhabe, habe ich mich jetzt an dieses gemacht. Alles hat super geklappt. Vielen Dank!

Aber eine Frage habe ich noch: Welche Programme (Auch Open-Source? Was haltet ihr von Nvu etc.?) benutzt ihr für die Umsetzung in HTML etc. Ich habe zwar einige grundlegende HTML-Kenntnisse und ein gewisses Verständnis für die Funktionsweise, würde mich aber dennoch eher als Einsteiger bezeichnen. Wie hauche ich meinem schönen Web-Seiten-Bild Leben ein? Ich erwarte keine Einführung sondern nur ein paar Tipps für meinen autodidaktischen Einstieg...

Vielen Dank im Voraus!

nw42
vor fast 5 Jahren

Hi devvv!

Danke für den Tipp! Ein dynamisches Nachladen der Buttons aus extern referenzierten Files wäre schon sehr cool ;-) - vor allem, weil man dadurch alle Buttons eines Layouts auf einmal anpassen könnte, indem man nur die Source Datei ändert. (instancing)

Ich mache in der Praxis immer wieder die Erfahrung, das man niemals etwas endgültig mergen darf, da sich ständig und immer und last minute noch was auf Kundenwunsch hin ändert. Und dann muß man schnell reagieren können...

viele Grüße

nw42

ps: beim PSD import werden noch keine Textobjekte unterstützt - bekomme öfter mal Photoshop Templates mit denen ich weiterarbeiten muß - aber ansonsten klappt der PSD import mittlerweile ganz gut...

devvv devvv Mitglied seit mehr als 5 Jahren
vor fast 5 Jahren

Hi, also ich mache es meistens so dass ich - sobald ich einen Button in einem komplexen Layout fertig habe - eine Auswahl um ihn lege, dann auf Bild / Zuschneiden gehe und dieses File dann separat als xcf speichere (für später). Dann Mach ich den Beschneiden-Schritt rückgängig. Als nächstes blende ich alle Ebenen bis auf die Button-Teile aus und drücke STRG+M, dadurch wird der Button zusammengefügt. (Layer-Sets gibt es leider (noch) nicht. Jetzt kann man den Button einfach kopieren, man muss ggf nur die Textebene neu erstellen.

Ein solches Script kenne ich leider nicht, was aber nicht heißen muss, dass es keines gibt :-/ Ich verwende eigentlich nie externe Scripts ;)

mfg,
devvv

nw42
vor fast 5 Jahren

Hi!

Sehr schön - ich suche derzeit genau solche Tutorials, um abschätzen zu können, ob ich bestimme Aufgaben mit Gimp umsetzen kann...

Dazu eine Frage an erfahrene Gimp User (ich weis, das ich den Finger in die Wunde lege ;-)

--> Was passiert, wenn bei einem Komplexen WEB-Layout ein einzelner Button bereits aus 10 Layern besteht? Wie kann man dann solche Buttons selektieren, duplizieren und verschieben? Wie oranisiert man solche Layouts ohne Gruppen??

--> Gibt es ev. ein Script, das es erlaubt komplexe Einzelobjekte in externe Files auszulagern und diese im "Master-Dokument" per Klick zu verlinken, um so wieder etwas übersichtlichkeit ins Layout zu bekommen?

viele Grüße

nw42

Piet
vor mehr als 5 Jahren

Das Video ist an und für sich super Klasse ! Besser wäre es entweder mit Ton oder was noch beser wäre, ein Tutorial dazu. Da die einzelnen Schritte doch recht zügig von staten gehen. Hut ab, dickes Lob, super gemacht.

Bullermann
vor mehr als 5 Jahren

Hi,
nein, den Codec hatte ich nicht installiert (bin kein Fernsehgucker...). Nach Download (http://www.wintotal.de/softw/index.php?rb=60&id=1777) gehts jetzt aber.

Super + Danke + Grüsse,
Michael

devvv devvv Mitglied seit mehr als 5 Jahren
vor mehr als 5 Jahren

Hi, soweit ich mich erinnern kann sollte es mit dem XVid / DivX-Codec einwandfrei funktionieren. Hast du diesen installiert?

Bullermann Bullermann Mitglied seit mehr als 5 Jahren
vor mehr als 5 Jahren

...welche Version vom Windows Media Player brauche ich, um das Video sehen zu können?

Bei mir startet die Wiedergabe leider nicht, sondern es kommt eine Fehlermeldung (Codec nicht gefunden, oder ähnliches..)

Für Hilfe wäre ich dankbar...
Grüsse
Michael

CSS pur! 3 komplette Websites im Detail erklärt, Workflow von Webdesignern, großer Ausblick auf CSS3 3 in der Download-Version ab Juni.

Willkommen!


Passwort vergessen?

Noch kein Mitglied? Hier registrieren!

Aktuelle Wettbewerbe

Destruction 3.0 – zerstört ein beliebiges Objekt
Status: Einsendungen werden angenommen
Zu den Einsendungen

Zufällige Tutorials | Neueste tutorials

  1. Das PNG-Format: Ein Überblick Das PNG-Format: Ein Überblick 11
  2. Ölgemälde aus einem Foto erzeugen Ölgemälde aus einem Foto erzeugen 12
  3. Eine schnelle abstrakte Chaos-Explosion erzeugen Eine schnelle abstrakte Chaos-Explosion erzeugen 30
  4. Moderner geometrischer Retro-Linien-Stil Moderner geometrischer Retro-Linien-Stil 12

Gerade kommentiert

Tschuldigung, abraess. Meine Antwort ist an zapp gerichtet. (vor etwa 19 Stunden zu Letzter GIMP 2.6-Stable-Release)

Nein. (vor etwa 19 Stunden zu Letzter GIMP 2.6-Stable-Release)

Hallo, dann wünsche mir das diese Bugfixe auch so schnelle wie mö... (vor etwa 22 Stunden zu Letzter GIMP 2.6-Stable-Release)

Umfrage

Ist GIMP für euch ein Mittel um Print-Grafiken / Flyer / Werbungen zu gestalten?

Mailing-Listen / Foren (englisch)

Fakten & Zahlen

gimpusers.de RSS-Feed

16 identi.ca-Abonnenten
160 Twitter-Abonnenten

powered by bitfire it services