kramann.info
© Guido Kramann

Login: Passwort:










kramann.info
© Guido Kramann

Login: Passwort:




Icon überarbeiten

(EN google-translate)

(PL google-translate)

Nach einem Test mit dem zuvor entwickelten Icon wurde folgendes festgestellt:

  • Die Elemente Mikrofon und Lautsprecher sind im Icon auf dem mobilen Gerät zu klein, als dass sie erkannt werden könnten.
  • Der transparente Hintergrund bewirkt, dass bei dem üblichen schwarzen Desktop des mobilen Gerätes es weiter erschwert wird, die schwarzen Elemente Mikrofon und Lautsprecher zu erkennen.
  • Der Schriftzug kramann.ino ist auch wesentlich zu klein.
  • Der Schriftzug tape echo ist unnötig, da unter dem Icon immer der Name der App steht. Zudem behindert die Transparenz die Lesbarkeit.

Abhilfe

  • Es wird nur ein Ausschnitt des bisherigen Icons genommen.
  • Mikrofon und Lautsprecher werden hellgrau eingefärbt.
  • Alle Schriftzüge entfallen.
  • Ecken abrunden.

Rezept zum Abrunden der Ecken

  • Quadratische 512x512 Pixel Icon-Version erstellen (Icon).
  • Form des Icons in Schwarz vor weissem Hintergrund erstellen (Rahmen, auch 512x512Pixel).
  • Beides in Gimp laden.
  • Beim Rahmen schwarz als transparente Farbe wählen.
  • Rahmen als neuen Layer auf Icon kopieren.
  • Layer verbinden.
  • Weiss als transparete Farbe.
  • Ergebnis als png exportieren.
Auswahlwerkzeug zum transparent machen einer bestimmten Farbe.

Bild 0-1: Auswahlwerkzeug zum transparent machen einer bestimmten Farbe.

Rahmen als Layer auf Icon kopieren.

Bild 0-2: Rahmen als Layer auf Icon kopieren.

Ordner mit Icon-Varianten im Eclipse-Projekt

  • res/drawable/icon.png 48x48-Pixel-Version
  • res/drawable-hdpi/icon.png 72x72-Pixel-Version
  • res/drawable-ldpi/icon.png 36x36-Pixel-Version
  • res/drawable-mdpi/icon.png 48x48-Pixel-Version
  • res/drawable-xhdpi/icon.png 96x96-Pixel-Version

  • Weitere Hinweise:

http://developer.android.com/guide/topics/resources/providing-resources.html#Compatibility

http://www.drupalgap.org/node/185

Evolutionsschritte bei der Erstellung eines Icons.

Bild 0-3: Evolutionsschritte bei der Erstellung eines Icons.


Endversion in verschiedenen Auflösungen in Originalgröße.

Bild 0-4: Endversion in verschiedenen Auflösungen in Originalgröße.


icon_erstellen.zip - Sammlung der Processing-Varianten zum Erstellen eines Icons.