RSS-/Atom-Feed Twitter
Site is read-only, email is disabled
  1. GIMP-DVD
  2. Chat
  3. Nützliche Links
  4. Umfragen

Aktuelle Inhalte

Tutorial: Website-Vorlage basteln

Verfasst von · Erstellt am 14 Aug 2006, zuletzt bearbeitet vor mehr als 13 Jahren CC BY-NC-Lizenz
Website-Vorlage basteln

GIMP-Datei (.xcfbz2) herunterladen (9 KB)

Motivation

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

  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.

New comments are disabled because of spam.

Hartmut
vor etwa 11 Jahren

Nachtrag

Ausserdem ist nur die Hälfte der Menüs zu sehen, man sieht nicht wo du hinklickst. somit ist für mich das Video leider unbrauchbar

Hartmut
vor etwa 11 Jahren

Deine arbeit in Ehren für dieses Webtut, aber es ruckt zu Stark beim Gucken, deswegen sieht man nicht wo du hinklickst, es geht auch alles viel zu schnell.
Kannst du das Video nicht noch andersweitig zum DL anbieten ?
Mit dem JD Downloaden klappt das ja leider nciht, da hat man nur ein Standbild

Nugorra
vor mehr als 11 Jahren

also das einzige Video das ich bekommen habe zeigt 24:35 nur das gleiche Bild ohne irgendwelche veränderungen oder irgend einem Ton

..
vor mehr als 12 Jahren

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 etwa 13 Jahren

dddd

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor mehr als 14 Jahren

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

Akuba
vor mehr als 14 Jahren

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

Carla
vor mehr als 14 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 fast 15 Jahren

Cooles Vid.

JSB Mitglied seit mehr als 16 Jahren JSB 1 Kommentar
vor fast 16 Jahren

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

Mondmann Mitglied seit fast 16 Jahren Mondmann 1 Kommentar
vor fast 16 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 Mitglied seit etwa 16 Jahren Quigi 6 Kommentare
vor etwa 16 Jahren

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

devvv Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor etwa 16 Jahren

habe es gerade mit torrent getestet - hatte keine probleme

jogr
vor etwa 16 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 16 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 Mitglied seit etwa 17 Jahren Michael 5 Kommentare
vor fast 17 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 Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor fast 17 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 Mitglied seit etwa 17 Jahren Michael 5 Kommentare
vor fast 17 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 etwa 17 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 etwa 17 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 etwa 17 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 Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor etwa 17 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 etwa 17 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 17 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 17 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 Mitglied seit mehr als 17 Jahren devvv 1475 Kommentare
vor mehr als 17 Jahren

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

Bullermann Mitglied seit mehr als 17 Jahren Bullermann 1 Kommentar
vor mehr als 17 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