kramann.info
© Guido Kramann

Login: Passwort:










kramann.info
© Guido Kramann

Login: Passwort:




Icon für TapeEcho und der Name

(EN google-translate)

(PL google-translate)

Hinweis: Icons können im Processing-Ordner in der Größe 36x36, 48x48 und 72x72 Pixel abgelegt werden.
  • Namenskontion für die Icons: icon-36.png, icon-48.png, icon-72.png
  • D.h. man sollte noch in Processing die Icons einführen und dann nach Eclipse übergehen!

Das Icon und die Namensgebung der App sind ziemlich wichtig, da sie dasjenige sind, was auf Google-Play nach außen hin sichtbar ist. Die meisten Besucher der Website werden sich Apps nicht näher anschauen, wo berits das Icon uninterssant oder unprofessionell wirkt.

Grundsätzlich hat man als Einzelkämpfer zunächst einmal schlechte Karten, sowohl weil man eine sehr geringe Manpower für die eigentliche Entwicklung besitzt, als auch dass man wenig Erfahrung und Kapazität für gezielte Werbung hat.

Eine Strategie mit dieser Grundsituation umzugehen, wäre, einfache Dinge zu machen, aber für diese originelle und gute Lösungen zu finden.

Der Entwurf des Layouts dieser App ist sicher nicht besonders ambitioniert. Aber da Schlichtheit hier eine Anforderung ist, passend.

Der Naturforscher Jakob von Uexküll hat die Feststellung getroffen, dass Tiere typischerweise an ihre Umwelt perfekt angepaßt sind. Ein Reh ist nicht besser als ein Pantoffeltier, aber komplexer. In diesem Sinne kann man auch bei der App-Entwicklung mit einer einfachen, aber passenden Lösung punkten.

Der Name TapeEcho

Nach einer kurzen Recherche kam heraus, dass es eine Musikgruppe gibt, die Echotape heißt. Andersherum gäbe es also Konfusion.

TapeEcho gibt einfach wieder, um was es sich handelt: um eine Software-Umsetzung eines Echo Tapes. Der Name ist also weniger ein gefälliger markenname, als eine Suchhilfe.

Das Icon

Alles vorab Gesagte gilt auch für das Icon. Da ich keine Werbefirma und ein Marktforschungsinstitut damit beauftragen kann, das bestmögliche Icon für mich zu entwickeln, muss das Icon auf irgendeine schlichte Weise passend werden.

Die Benutzung von Tools birgt die Gefahr, dass man zwar ein professionelles Aussehen hinbekommt, jedoch das Ergebnis nicht verbergen kann, dass es mit einem Standardtool erzeugt wurde. Das Ergebnis hat damit kein Alleinstellungsmerkmal.

Auf Dinge wie 3D- und Licht-Effekte möchte ich auch verzichten. Auch hier gilt: Das können andere besser. Es wird immer unprofessionell aussehen.

Statt dessen möchte ich mich bewußt für schlichte zweidimensionale Formen entscheiden. Statt eines weit verbreiteten Tools werden die Formen mit Hilfe von Processing erzeugt, als PDF exportiert, dann in Gimp nachbearbeitet, um insbesondere eine Farbe als transparent zu definieren und verschiedene Auflösungen des Icons zu erzeugen.

Eine Besonderheit bei processing ist die Möglichkeit, als vierten Parameter bei der Farbe den Transparenzgrad anzugeben. Dies ermöglicht die Realisierung einiger netter Effekte, die durch die sich ein damit erstelltes Icon von anderen abheben könnte.

Inhalt des Icons für TapeEcho

Auch hier sollte sich visuell wiederspiegeln, um was es sich bei der App handelt.

Grundidee wäre ein Tonbandgerät abstrahiert darzustellen und einen Aufnahmekopf verbunden mit einem Mikrofon darzustellen und dahinter zwei Abspielköpfe verbunden mit jeweils einem Lautsprecher.

Die Farbgebung kann aus dem Layout-Entwurf übernommen werden:

Element      ROT  GRÜN BLAU
Blaue Kästen 114  159  207
rot2         255  102  102
grün2        102  255  102
orange2      255  153    0
Nav hellgrün 153  255   51
Nav darkgrn    0  204    0
Nav hellgrau 178  178  178
Nav mittgrau 128  128  128 
Nav darkgrau  51   51   51

Code 0-1: Elemente im Layout und deren Farbwerte.

Es wird versucht im Icon nur diese Farben zu verwenden, die sich dann auch in der App wiederfinden.

import  processing.pdf.*;

    size(512,512);
    stroke(0);
    fill(0);


beginRecord(PDF, "echotape.pdf"); 
    background(255,255,255);
    
    noStroke();
//Hintergrundkreis    
    fill(114,  159,  207);
    ellipse(256.5f,256.5f,512,512);

//Band
    fill(51,   51,   51);
    rect(128,128,256,10);
//Rolle 1 
    //rotate(2.5f);
    translate(256.5f+128.0f,256.5f);
    fill(178,  178,  178);
    ellipse(0,0,256,256);
    
    fill(51,   51,   51);
    ellipse(0,0,64,64);
    
    fill(51,   51,   51);
    rect(250-256.5f,140-256.5f,12,64);
    rect(250-256.5f,512-140-64-256.5f,12,64);
    rect(140-256.5f,250-256.5f,64,12);
    rect(512-140-64-256.5f,250-256.5f,64,12);
    translate(-256.5f-128.0f,-256.5f);
    
//Rolle 2    
    translate(256.5f-128.0f,256.5f);
    fill(178,  178,  178);
    ellipse(0,0,256,256);
    
    fill(51,   51,   51);
    ellipse(0,0,64,64);
    
    fill(51,   51,   51);
    rect(250-256.5f,140-256.5f,12,64);
    rect(250-256.5f,512-140-64-256.5f,12,64);
    rect(140-256.5f,250-256.5f,64,12);
    rect(512-140-64-256.5f,250-256.5f,64,12);
    translate(-256.5f+128.0f,-256.5f);
    
//Mikrofon
    fill(51,   51,   51);
    rect(64,32,100,64);
    fill(51,   51,   51);
    rect(128+64-28,48,16,32);
//    fill(51,   51,   51);
    fill(255,  153,    0);
    rect(128+64-28+16,48+8,16,16);
    rect(128+64-28+16+16,48+8,16,48);
    int x = 128+64-28+16+16+8;
    int y = 48+8+48;
    fill(255,  153,    0);
    triangle(x-16,y,x+16,y,x,y+32);

    x+=48;
    fill(255,  102,  102);
    rect(x-16,y,32,32);
    rect(x-8,y-48-32,16,48+32);
    rect(x-8,y-48-32,48+32,16);
    fill(51,   51,   51);
    rect(x-8+48+32,y-40-32-24+8,24,32);
    int xx = x-8+48+32+8-8;
    int yy = y-40-32-24+8+16;
    triangle(xx,yy,xx+48,yy-32,xx+48,yy+32);
    
    
    x+=48;
    fill(102,  255,  102);
    rect(x-16,y,32,32);
    rect(x-8,y-24,16,24);
    rect(x-8,y-48-32+32+16,48+32+32,16);

    fill(51,   51,   51);
    rect(x-8+48+32+16,y-40-32-24+8+32+16,24,32);
    xx = x-8+48+32+8-8+16;
    yy = y-40-32-24+8+16+32+16;
    triangle(xx,yy,xx+48,yy-32,xx+48,yy+32);
    
    
    fill(51,   51,   51);
    ellipse(64,64,96,96);
    
    //Einen Monospace Font festlegen, der dann auch
    //in der App verwendet wird und in diese eingebettet wird.
    
    ///usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf
    fill(255,  153,    0, 120);
    PFont p_font = createFont("DejaVuSansMono",96,true);
    textFont(p_font);
    text("tape",24,512-32);
    
    fill(102,  255,  102,120);
    text("echo",24+256-8,512-32);

    fill(51,   51,   51);
    rotate(-0.75);
    PFont p_font2 = createFont("DejaVuSansMono",20,true);
    textFont(p_font2);
    text("kramann.info",45,540);

endRecord();

Code 0-2: echotapeicon003.pde - Erstellt ein Icon als pdf-Datei.

Import des pdf-Icons nach Gimp.

Bild 0-1: Import des pdf-Icons nach Gimp.

tapeecho-Icon.

Bild 0-2: tapeecho-Icon.