sani: Schrift in pixel- Buttons häßlich

Guten Abend!

Ich habe eigentlich immer das Problem ds bei der Erstellung von Menübuttons, in denen Text steht, die Ergbnisse nicht zufriedenstellend sind. Irgendwie unscharf.

Ich frage mich wie man eine solch tolle Quali wie auf dieser Seite --->

http://www.fischerstahl.de/

hinbekommt. Gibt es bestimmte Schriften,  wie geht der Profi vor?

Ich erstelle den gesammten Button in Photoshop, schreibe also auch den Text dort rein und speichere das ganze dann als jpg.

Kann jemand bei mir Licht ins Dunkle bringen??

LG sani

  1. Hallo sani.

    Ich habe eigentlich immer das Problem ds bei der Erstellung von Menübuttons, in denen Text steht, die Ergbnisse nicht zufriedenstellend sind. Irgendwie unscharf.

    Verwendest du das passende Grafikformat?

    hinbekommt. Gibt es bestimmte Schriften,  wie geht der Profi vor?

    Definiere „Profi“.

    Ich erstelle den gesammten Button in Photoshop, schreibe also auch den Text dort rein und speichere das ganze dann als jpg.

    Für solche Grafiken dürften sich wohl eher PNG oder GIF anbieten, da diese mit filigralen Linien besser zurecht kommen.

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
    Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Hallo Ashura

      Verwendest du das passende Grafikformat?

      Er verwendet es nicht :-)

      Ich erstelle den gesammten Button in Photoshop, schreibe also auch den Text dort rein und speichere das ganze dann als jpg.

      Für solche Grafiken dürften sich wohl eher PNG oder GIF anbieten,

      Stimmt, die von ihm angegebene Referenzseite verwendet GIFs *g*

      da diese mit filigralen Linien besser zurecht kommen.

      "Gif her", sagte Parzival. Päng, da war das Gefäß weg? *scnr*

      Freundliche Grüße

      Vinzenz

      1. Danke, Ihr zwei. Bin eine SIE!

        Ich habe es auch mit gifs probiert, sieht auch irgendwie scheiße aus. Zumindest nicht gestochen scharf wie bei der obigen Site. Also bevorzugte Schriften gibt es nicht? Nur was eben gut leserlich ist etc.?
        Hm. Dachte es gäbe noch einen Trick...

        1. Hallo sani.

          Danke, Ihr zwei. Bin eine SIE!

          Ja, aber das können wir nicht riechen.

          Ich habe es auch mit gifs probiert, sieht auch irgendwie scheiße aus.

          Dann solltest du den Umgang mit deinem bevorzugten Grafikprogramm verbessern oder ein anderes wählen.

          Zumindest nicht gestochen scharf wie bei der obigen Site.

          Anti-Aliasing deaktiviert? ([Wikipedia: Anti-Aliasing])

          Also bevorzugte Schriften gibt es nicht? Nur was eben gut leserlich ist etc.?

          Nimm' die, die zu deinem Layout passt.

          Hm. Dachte es gäbe noch einen Trick...

          Du brauchst ein gutes Auge und etwas Gespür für das Gesamtbild.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
          30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
          Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
          [Deshalb frei! - Argumente pro freie Software]
          1. Hallo,

            Ich habe es auch mit gifs probiert, sieht auch irgendwie scheiße aus.

            Dann solltest du den Umgang mit deinem bevorzugten Grafikprogramm verbessern oder ein anderes wählen.

            da ich eh keinen Photoshop habe, mache ich sowas mit Gimp und Inkscape -> http://www.inkscape.org.
            Ist zwar erst bei Version 0.42, aber schon recht vielversprechend, vor allem in Bezug auf Schriften. Gimp kann die SVGs importieren.

            cu,
            Michael

            1. Hallo ziegenmelker.

              da ich eh keinen Photoshop habe, mache ich sowas mit Gimp und Inkscape -> http://www.inkscape.org.
              Ist zwar erst bei Version 0.42, aber schon recht vielversprechend, vor allem in Bezug auf Schriften. Gimp kann die SVGs importieren.

              Ja, Inkscape kann ich als plattformübergreifendes Grafik-/Vektorprogramm nur empfehlen. Ich habe damit gute Erfahrungen sammeln können und ausführliche Tutorials sind ebenfalls schon dabei.

              SVG ist seit einiger Zeit neben PNG mein Lieblingsformat für Grafiken und dergleichen.

              Einen schönen Donnerstag noch.

              Gruß, Ashura

              --
              Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
              30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
              Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
              [Deshalb frei! - Argumente pro freie Software]
        2. Hallo sani,

          Danke, Ihr zwei. Bin eine SIE!

          meine falschen Pronomina tun mir leid. Ich werde mich bessern!

          Ich habe es auch mit gifs probiert, sieht auch irgendwie scheiße aus. Zumindest nicht gestochen scharf wie bei der obigen Site.

          Eine kleine Nachtlektüre zu den Grafikformaten für Webseiten, falls Du nicht doch lieber eine Gralslegende lesen willst.

          Also bevorzugte Schriften gibt es nicht? Nur was eben gut leserlich ist etc.?

          Ja doch, Du solltest eine serifenlose Schrift nehmen. Im Linkverzeichnis von SELFHTML findest Du einen Artikel über Typographie, in dem erläutert ist, was Serifen sind. Und wie Ashura geschrieben hat, eine, die zu den Schriften Deiner Seite passt.

          Freundliche Grüße

          Vinzenz

  2. Hi sani,

    Ich erstelle den gesammten Button in Photoshop, schreibe also auch den Text dort rein und speichere das ganze dann als jpg.

    Dass Du als Format .gif oder .png wählen solltest, hat man schon gesagt.

    Weitere Faktoren für die Schärfe der Buchstaben, mit denen Du experimentieren kannst, sind:

    1. Die Einstellung beim Einfügen der Schrift im Photoshop (scharf, stark, abrunden).

    2. Die Auflösung der Originalgrafik. (nicht zu niedrig, eventuell ganzzahliges Vielfaches der Ausgabeauflösung)

    3. Die Farbenanzahl beim .gif, da sie die Darstellung der Buchstabenränder beeinflusst.

    4. Die Schriftart. Manche Schriftarten eignen sind für die Darstellung am Bildschirm, manche kommen eher im Druck gut rüber. Tahoma und Verdana sind solche Bildschirmschriften, weniger fein ziselierte kommen bei der geringen Bildschirmauflösung oft besser, als fein strukturierte Schriften.

    Viele Grüße
    Mathias Bigge

  3. Tachchen!

    Kann jemand bei mir Licht ins Dunkle bringen??

    1. Das richtige Grafikformat nutzen.

    2. Die richtige Schrift benutzen.
    Viele gerade Linien und wenig Bögen sind hilfreich.

    3. Wenn es sehr klein wird, dann Anti-Aliasing deaktivieren.

    4. Wenn es sehr klein wird, dann Buttons sofort in Originalgröße herstellen.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    Smartbytes Webdesign in Oberhausen