gimpusers.de-Logo
Deutsche Version Englische Version

Nicht angemeldet

Registrieren! | Passwort vergessen?

GIMP: Fotos korrigieren, retuschieren und raffiniert präsentieren

Gestaltet ein cooles Werbeplakat!

7. Gewinnspiel — Einsendungen von 8.Juli bis 2. August 2010.
Mehr Infos (News)
Übersicht und Details
Uploadet hier ab 8.Juli

Aktuelle Diskussionen (gimpforum.de)

  1. gimpforum.de | gestern 18:55
    Puppet warp für Gimp?
  2. gimpforum.de | gestern 18:23
    Bild als Formvorlage??
  3. gimpforum.de | gestern 12:52
    Kann Gimp aus 2 Bildern eine Animation(die Zwischenbilder berechnen) ertsellen?
  4. gimpforum.de | 30. Jul 2010 21:45
    Gesuch Free Grafiker gesucht -> Herrausforderung
  5. gimpforum.de | 30. Jul 2010 00:58
    Bild mit Farbmaske versehen

Aktuelle Forumsbeiträge (englisch)

Die Beiträge stammen aus den englischen Foren. Ihr könnt jederzeit zurück zur deutschen Version, indem ihr auf die deutsche Flagge ganz oben klickt.

  1. gimp-developer | gestern 23:40
    Plugged-in tools
  2. gimp-developer | gestern 23:22
    html layers
  3. gimp-developer | gestern 21:26
    Please fix Color and/or Value transfer mode
  4. gimp-user | gestern 15:15
    PDF editing in Gimp
  5. gimp-docs | gestern 15:12
    Where does the HTML documentation

Neuigkeiten von Dritten

Umfrage

Was haltet ihr von der Einbindung sozialer Netzwerke in Webseiten?

Finde ich sehr gut, es bringt die Nutzer zusammen

Für Communities macht es Sinn (Nachrichten über Twitter, Facebook-Gruppen usw), für andere Seiten nicht

Ein Hype, der bald wieder aufhören wird

Sowas macht mir Angst (Datenschutz, Privatsphäre, ...)

Anderes (bitte posten)

Ergebnisse ansehen

Zahlen

gimpusers.de RSS-Feed

RSS-Feed Retweet this!

14. Aug 2006 18:14, von devvv (Bernhard Stockmann)

Website-Vorlage basteln

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.

Verwendete GIMP-Version: 2.2. Das Tutorial ist in 3 Schritte unterteilt; ein durchschnittlicher Benutzer benötigt dafür ca. 45 min. Bisher 56896 Mal gelesen. Kategorie: Buttons, Icons & Web, Schwierigkeit: 2 von 5

22 Kommentare wurden bisher geschrieben.

  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.
    Screenshot of step 1
    Zum Vergrößern klicken
  2. 2
    Auf unserer Video-Tutorials-Seite (im Menü) findet ihr ein Video dazu.
  3. 3
    Viel Spaß!

Dieses Werk unterliegt folgender Lizenz: Namensnennung-Keine kommerzielle Nutzung 3.0 Österreich

Kommentare

Hier können Sie Ihre Kommentare, Frage und Anregungen loswerden. Der Autor und die anderen Benutzer können Ihren Beitrag sehen und darauf antworten. Natürlich können Sie auch im Chat fragen.

Die Kommentare sind chronologisch geordnet.

  1. http://www.gimpusers.de/tutorials/website-layout.html Thu Oct 5 21:21:33 2006 Bullermann, 05. Oct 2006 21:21

    ...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

  2. http://www.gimpusers.de/tutorials/website-layout.html Thu Oct 5 21:35:22 2006 devvv, 05. Oct 2006 21:35

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

  3. http://www.gimpusers.de/tutorials/website-layout.html Fri Oct 6 07:58:41 2006 Bullermann, 06. Oct 2006 07:58

    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

  4. http://www.gimpusers.de/tutorials/website-layout.html Thu Oct 12 15:49:00 2006 Piet, 12. Oct 2006 15:49

    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.

  5. http://www.gimpusers.de/tutorials/website-layout.html Wed Feb 28 10:38:03 2007 nw42, 28. Feb 2007 10:38

    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

  6. http://www.gimpusers.de/tutorials/website-layout.html Wed Feb 28 12:17:47 2007 devvv, 28. Feb 2007 12:17

    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

  7. http://www.gimpusers.de/tutorials/website-layout.html Thu Mar 1 11:25:36 2007 nw42, 01. Mar 2007 11:25

    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...

  8. http://www.gimpusers.de/tutorials/website-layout.html Tue Mar 6 08:00:02 2007 Hubi, 06. Mar 2007 08:00

    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!

  9. http://www.gimpusers.de/tutorials/website-layout.html Tue Mar 6 10:56:46 2007 nw42, 06. Mar 2007 10:56

    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

  10. http://www.gimpusers.de/tutorials/website-layout.html Wed Jun 20 17:53:16 2007 Michael, 20. Jun 2007 17:53

    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


    Zum Vergrößern klicken

  11. http://www.gimpusers.de/tutorials/website-layout.html Wed Jun 20 18:03:28 2007 devvv, 20. Jun 2007 18:03

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

  12. http://www.gimpusers.de/tutorials/website-layout.html Wed Jun 20 19:54:12 2007 Michael, 20. Jun 2007 19:54

    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

  13. http://www.gimpusers.de/tutorials/website-layout.html Wed Oct 3 16:56:00 2007 korny, 03. Oct 2007 16:56

    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

  14. http://www.gimpusers.de/tutorials/website-layout.html Tue Feb 12 14:31:44 2008 jogr, 12. Feb 2008 14:31

    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

  15. http://www.gimpusers.de/tutorials/website-layout.html Thu Feb 14 12:58:37 2008 devvv, 14. Feb 2008 12:58

    habe es gerade mit torrent getestet - hatte keine probleme

  16. http://www.gimpusers.de/tutorials/website-layout.html Sun Apr 13 11:18:37 2008 Quigi, 13. Apr 2008 11:18

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

  17. http://www.gimpusers.de/tutorials/website-layout.html Thu Jun 5 15:51:58 2008 Mondmann, 05. Jun 2008 15:51

    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.

  18. http://www.gimpusers.de/tutorials/website-layout.html Fri Jul 18 17:18:51 2008 JSB, 18. Jul 2008 17:18

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

  19. http://www.gimpusers.de/tutorials/website-layout.html Mon Jun 29 21:11:13 2009 Tuxibunti, 29. Jun 2009 21:11

    Cooles Vid.

  20. http://www.gimpusers.de/tutorials/website-layout.html Tue Dec 22 22:06:58 2009 Carla, 22. Dec 2009 22:06

    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!

  21. http://www.gimpusers.de/tutorials/website-layout.html Sat Jan 2 22:26:03 2010 Akuba, 02. Jan 2010 22:26

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

  22. http://www.gimpusers.de/tutorials/website-layout.html Sun Jan 3 15:49:48 2010 devvv, 03. Jan 2010 15:49

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

Registrierte Benutzer können sich (rechts oben) anmelden und ihren geschützten Profilnamen verwenden, um Kommentare zu schreiben, sich bei Antworten benachrichtigen zu lassen und Bilder (z.B. ihre Version eines Effekts) an die Antworten anzuhängen.

Sind Sie Mensch oder Maschine?

Adobe® Photoshop® ist ein eingetragenes Warenzeichen der Adobe Systems, Inc. Linux ist ein Warenzeichen von Linus Torvalds. Ubuntu und Canonical sind eingetragene Warenzeichen der Canonical Ltd. | Uhrzeiten werden als CET / CEST angegeben | Impressum / Datenschutz | betrieben von bitfire it services (Mitglied der Echoplus ARGE)