SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [Gimp] Wir bauen uns ein Favicon

    24. Juli 2010 0 Grafik gimp | tutorial

    Ein Favicon auf seiner Webseite ist heute Standard. Aber wie erstellt man diese Dinger? Hier ein Tutorial für die Erstellung einer Grafik zum Gebrauch als Favicon. Wie du aus dieser Grafik dann ein Favicon machst und auf deiner Webseite einbaust, habe ich in diesem Artikel beschrieben.

    Nun aber zur Grafik. Natürlich kommt das kostenlose Programm Gimp zum Einsatz.

    Ein Favicon ist quadratisch und so erstellen wir auch ein neues Bild. Wählt etwa 64×64 oder 128×128 Pixel und achtet darauf, dass unter Erweiterte Einstellungen die Füllung auf ‚Transparenz‘ eingestellt ist.

    Erste Entscheidung für euch: farbiger Hintergrund oder soll dieser transparent sein und beispielsweise nur ein Logo enthalten? Gehen wir mal davon aus, dass ihr einen farbigen Hintergrund wählt, geht’s wie folgt weiter.

    Wählt im Menü Auswahl den Menüpunkt Alles auswählen oder drückt die Tastenkombination ‚STRG‘ und gleichzeitig ‚A‘ um die Vorlage vollständig zu markieren. Jetzt müsst ihr euch entscheiden, ob ihr ein Favicon mit Ecken im 90 Grad-Winkel oder lieber mit abgerundeten Ecken erstellen möchtet.

    Oder wie wär’s hiermit?

    Nehmen wir an, dass ihr euch für abgerundete Ecken entscheidet, wählt im Menü Auswahl den Menüpunkt Abgerundetes Rechteck …. Im folgenden Dialog wählt ihr dann einen Radius. Hier empfehle ich 25 oder 30 Prozent zu wählen.

    Nachdem das Bild nun markiert ist, entweder mit runden Ecken oder 90 Grad Ecken, können wir den Hintergrund einfärben.

    Nehmt dazu eine Volltonfarbe oder einen Farbverlauf, ein Muster, einen Pinsel oder was euch auch immer einfällt. Gefällt euch die Farbe? Für unser Beispiel nehme ich die Volltonfarbe #d55959.

    Und nun? Ja jetzt könnt ihr eurer Kreativität freien Lauf lassen. Soll euer Favicon Buchstaben, beispielsweise eure Initialen, enthalten? Oder etwa ein Logo? Was ihr auch immer wählt, denkt daran, dass das Favicon im Browser lediglich eine Größe von 16×16 Pixeln einnimmt. Der Inhalt sollte also möglichst groß dargestellt werden.

    Wie ihr an meinem Favicon seht, stehen dort meine Initialen auf schwarzem Hintergrund mit abgerundeten Ecken.

    Und so soll unser Beispiel hier auch weitergehen. Wählt euch nun eine Schriftart und eine entsprechende Schriftgröße und schreibt nun eure Initialen in das Bild und zentriert diese. Wie gesagt, achtet darauf, den Text entsprechend groß einzustellen, ansonsten wird man später nicht viel davon erkennen.

    Das war es eigentlich auch schon. Wollt ihr die Initialen auch transparent durchscheinen lassen? Dann klickt ihr im Ebenen-Menü die Text-Ebene mit rechts an und wählt Auswahl aus Alphakanal.

    Wie ihr seht, ist der Text nun markiert. Wechselt nun im Ebenen-Menü auf die Ebene Hintergrund und drückt dort die ‚Entfernen‘-Taste. Anschließend löscht ihr aus dem Ebenen-Menü die Text-Ebene, hier im Beispiel die Ebene OG. Im Ebenen-Menü erscheint nun lediglich noch die Ebene Hintergrund. Euer fertiges Bild sollte nun wie folgt aussehen:

    Speichert das Bild nun als PNG ab, damit die Hintergrundtransparenz auch genutzt werden kann.

    Wer ein wenig Inspiration benötigt, hier gibt es eine umfangreiche Favicon Galerie.

    Und weiter geht’s dann in diesem Artikel.

    Diese Artikel könnten dich ebenfalls interessieren
    • 0
      7. Mai 2012
      [Gimp] Version 2.8 released
    • 1
      25. März 2011
      [Gimp] Bunt machen und Themes nutzen
    • 0
      25. August 2010
      [Gimp] Schattenspielchen: Abgehobene Ecke erstellen
    • 0
      11. August 2010
      [Gimp] Zerrissenes Papier erstellen

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast