Icon Schritt für Schritt - Legende: Grauer Text

Icon Schritt für Schritt
Legende:
Grauer Text    = wird nicht animiert

Roter Text     = Interaktion des Users

Blauer Text    = Reaktion der Software

Ablauf
Programm öffnen

   -   Programm öffnet sich
   -   Ein Startscreen erscheint

   -

Neue Icon-Datei erstellen

   -   Auf ‚System (Windows, Mac)‘ klicken
   -   Fenster mit Einstellungsmöglichkeiten öffnet sich

   -
   -   Dateiname eingeben
   -   System ‚Windows‘ wählen
   -   Farbtiefe ‚RGB / Alphakanal‘ wählen

-   Häkchen bei folgenden Größen setzen: 256, 96, 64
   -   Häkchen bei ‚PNG komprimiertes Format‘ Setzen
   -   Mit ‚OK‘ bestätigen
       - Einstellungsfenster verschwindet
       - Dokument ist geöffnet

       -
       -    Baukasten auf Grundformen
       -    leeres Dokument mit Icon-Leiste
       -    Bildformatleiste
       -    Ebenen-Palette mit Hintergrundebene
       -    Paletten-Register (Farbe offen auf Farbwähler)

Grundform

   -   Quadrat auf Arbeitsfläche ziehen
       - Maus wird über dem Objekt zur offenen Hand
       - Bei Klick wird Maus zu geschlossener Hand
       - Quadrat wird mittig auf der Arbeitsfläche platziert
       - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
       - Quadrat erscheint mittig in allen Bildformaten
       - Neue Ebene für Grundform erscheint

Grundform färben

   -   Ebene ist noch ausgewählt
   -   In den Verlauf klicken und eine Farbe wählen
        - Farbe erscheint in Vorschauquadrat in der Farbpalette
        - Farbfeld erscheint in den aktuellen Farben
        - Grundform wird gefärbt
        - HTML-Farbe anzeigen
        - RGB-Farbe anzeigen
        - Unter dem Verlauf erscheint eine Detailansicht des Verlaufs (Zoom mit ähnlichen
            Farben)

-  Darunter erscheinen Farbharmoniene zu der gewählten Farbe (durch das Programm
           vorgeschlagen oder aus dem Internet bezogen)
       - Bildformate werde gefärbt
       - Vorschau der Ebene wird gefärbt
   -   Über die Detailansicht (Zoom) Farbwahl verfeinern (ähnliche hellere Farbe wählen)
       - Detailansicht fährt nach links, so dass neue Wahl in der Mitte ist
       - Farbe erscheint in Vorschauquadrat in der Farbpalette
       - Farbfeld erscheint in den aktuellen Farben
       - Grundform wird gefärbt
       - HTML-Farbe anzeigen
       - RGB-Farbe anzeigen
       - Neue Farbharmonien
       - Bildformate werde gefärbt
       - Vorschau der Ebene wird gefärbt

Farbfeld löschen

   -   Erste Farbe in aktuelle Farben nach links rausziehen und loslassen
       - Farbfeld verpufft und wird aus aktuelle Farben gelöscht

Ecken der Grundform abrunden

   -   Auf Reiter der Anpassen-Palette klicken
       - Palette wird angezeigt
       - Es erscheint ein Bearbeitungsrahmen um die Grundform
       - In der Vorschau bei Ecken abrunden sind alle Ecken ausgewählt
   -   2 gegenüber liegende Ecken durch anklicken abwählen
       - Quadrat der Ecken nicht mehr gefüllt, sondern Rahmen
   -   Regler verschieben um Ecken abzurunden
       - Ecken werden rund dargestellt (runden sich animiert mit der Bewegung des Reglers)
       - Vorschau in der Ebene wird angepasst
       - Ansicht der Bildformate werden angepasst

Grundform drehen

   -   Regler auf bis ca. 45° im Uhrzeigersinn verschieben
       - Grundform dreht sich mit Regler
       - Im Wertefeld verändert sich der Wert
       - Formen in den Bildformaten drehen sich nach loslassen der Maustaste (wenn Drehung
           abgeschlossen ist)
       - Vorschau in der Ebene wird gedreht
   -   Auf 90° klicken
       - Regler springt zu 90° und rastet automatisch ein
       - Grundform ist auf 90° ohne sichtbare Drehbewegung
       - Wertefeld zeigt 90°
       - Formen in den Bildformaten sind ebenfalls um 90° gedreht
       - Vorschau in der Ebene wird gedreht

Rahmen hinzufügen

   -   Auf Rahmen im ‚Baukasten‘ klicken
       - Feld verschiebt sich nach links  verdeckt links nach und nach die Formen, zeigt rechts
           nach und nach die Rahmen mit Vorschau
   -   Rahmen packen und auf Grundform ziehen
       - Maus wird über dem Objekt zur offenen Hand
       - Bei Klick wird Maus zu geschlossener Hand
       - Rahmen erscheint mittig auf der Arbeitsfläche genau über der Grundform
       - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
       - Rahmen erscheint in den Bildformaten
       - Neue Ebene erscheint für Rahmen und ist markiert
       - Grundformebene nicht mehr markiert
       - Rahmen erscheint in den Bildformaten

Rahmen färben

   -   Auf die Farbpalette klicken
       - Farbpalette öffnet sich
       - Es ist noch keine Farbe ausgewählt, in der Vorschau ist das Grau des Rahmens
       - Keine Detailansicht oder Farbharmonien zu sehen
   -   Auf Farbe der Grundform in aktuelle Farben klicken
       - Rahmen wird gefärbt
       - Farbe erscheint in Vorschau in Farbpalette
       - Detailansicht des Farbverlaufs erscheint
       - Harmonien erscheinen wieder
       - HTML-Farbe anzeigen
       - RGB-Farbe anzeigen
       - Rahmen in den Bildformaten wird gefärbt
       - Vorschau in der Ebene wird gefärbt
   -   Eine dunklere Farbe im Zoom anklicken
       - Rahmen wird gefärbt
       - Farbe erscheint in Vorschau in Farbpalette
       - Farbfeld erscheint in den aktuellen Farben
       - HTML-Farbe anzeigen
       - RGB-Farbe anzeigen
       - Rahmen in den Bildformaten wird gefärbt
       - Vorschau in der Ebene wird gefärbt

Schatten einfügen

   -   Auf Schatten im ‚Baukasten‘ klicken
        - Feld verschiebt sich nach links  verdeckt links nach und nach die Rahmen, zeigt rechts
            nach und nach die Schatten mit Vorschau
   -   Schatten packen und auf Grundform ziehen
        - Maus wird über dem Objekt zur offenen Hand
        - Bei Klick wird Maus zu geschlossener Hand
        - Schatten erscheint mittig auf der Arbeitsfläche

-   Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
        -   Schatten erscheint in den Bildformaten
        -   Neue Ebene erscheint für Schatten und ist markiert
        -   Rahmen nicht mehr markiert
        -   Schatten erscheint in den Bildformaten

Licht1 hinzufügen

   -   Auf Lichter im ‚Baukasten‘ klicken
       - Feld verschiebt sich nach links  verdeckt links nach und nach die Schatten, zeigt rechts
            nach und nach die Lichter mit Vorschau
   -   Erstes Licht auf Grundform ziehen
       - Maus wird über dem Objekt zur offenen Hand
       - Bei Klick wird Maus zu geschlossener Hand
       - Licht erscheint mittig genau auf der Arbeitsfläche
       - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
       - Licht erscheint in den Bildformaten
       - Neue Ebene erscheint für Licht und ist markiert
       - Schatten nicht mehr markiert
       - Licht1 erscheint in den Bildformaten

Licht1 färben

   -   Auf Farbe der Grundform in aktuelle Farben klicken
       - Rahmen wird gefärbt
       - Farbe erscheint in Vorschau in Farbpalette
       - Detailansicht des Farbverlaufs erscheint
       - Harmonien erscheinen wieder
       - HTML-Farbe anzeigen
       - RGB-Farbe anzeigen
   -   Einen Gelbton in den Harmonien anklicken
       - Licht wird gefärbt
       - Farbe erscheint in Vorschau in Farbpalette
       - Farbfeld erscheint in den aktuellen Farben
       - HTML-Farbe anzeigen
       - RGB-Farbe anzeigen

Licht 2 hinzufügen

   -   Zweites Licht auf Grundform ziehen
        - Maus wird über dem Objekt zur offenen Hand
        - Bei Klick wird Maus zu geschlossener Hand
        - Licht erscheint mittig genau auf der Arbeitsfläche
        - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
        - Licht erscheint in den Bildformaten
        - Neue Ebene erscheint für Licht und ist markiert
        - Licht1 nicht mehr markiert
        - Licht2 erscheint in den Bildformaten

Symbole öffnen und suchen

   -   Auf Symbole Klicken
        - Feld verschiebt sich nach links  verdeckt links nach und nach die Lichter, zeigt rechts
            nach und nach die Symbole mit Vorschau
   -   Ins Feld mit den Symbolen klicken und es nach links ‚anschieben‘
        - Eine Reihe von Symbolen bewegt sich erst schnell, dann immer langsamer nach links und
            bleibt dann stehen

Symbole downloaden

   -   Auf Download-Button klicken
       - Fenster fährt unter Baukasten runter
       - Es erscheint ein Hinweis, dass sich das Programm mit dem Internet verbindet
       - Die neusten Symbolpakete mit Name werden angezeigt

        -
   -   Gesuchte Symbole sind nicht dabei
   -   In das Suchfeld klicken und den Suchbegriff System eingeben
   -   Auf die Lupe klicken, um Suche zu starten
        - Ergebnisse der Suche werden angezeigt, wo vorher die neusten Symbole zu sehen waren
   -   Bei gedrückter Maustaste das gewünschte Paket in den Baukasten ziehen und loslassen
        - Symbol des Paketes bewegt sich in den Baukasten
        - Nach loslassen wird es kleiner und verschwindet
        - Daraufhin wird es wieder größer und erscheint im Baukasten im Stil der anderen
            Symbolpakete
        - Symbol für Unterkategorie erscheint
        - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
   -   Downloadfenster über ‚X‘ schließen
        - Fenster fährt wieder hoch

Symbol hinzufügen

   -   Auf das Symbol des neuen Paketes klicken
       - Oberkategorie fährt nach oben weg
       - Unterkategorie fährt gleichzeitig von unten her hoch und stoppt
       - Alle Symbole des Paketes in werden angezeigt
       - Button ‚zurück zur Oberkategorie erscheint

-   Symbol packen und auf die Arbeitsfläche ziehen
        - Maus wird über dem Objekt zur offenen Hand
        - Bei Klick wird Maus zu geschlossener Hand
        - Symbol erscheint mittig auf der Arbeitsfläche
        - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
        - Symbol erscheint in den Bildformaten
        - Neue Ebene erscheint für Symbol und ist markiert
        - Licht2 nicht mehr markiert
        - Symbol erscheint in den Bildformaten

Effekt auf Symbol anwenden

   -   Auf Reiter Effekte klicken und Effektpalette öffnen
       - Es sind einige Effekte zu sehen, die als Vorschau des aktuellen Icon dargestellt werden
   -   Auf den gewünschten Effekt klicken
       - Effekt wird auf Symbol in der Arbeitsfläche angewendet
       - Bildformate werden angepasst
       - Ebenenvorschau wird angepasst
       - Es erscheint ein Regler
       - Das Zeichen ‚fx‘ erscheint am rechten Rand der Ebene
   -   Den Regler bei gedrückter Maustaste nach links bewegen um Effekt abzuschwächen
       - Effekt wird mit Bewegung des Reglers schwächer
       - Bildformate werden angepasst
       - Ebenenvorschau wird angepasst
       - Effekt wird in Feld aktuelle Effekte angezeigt
   -   Maus bewegt sich von Effekte weg
       - Regler verschwindet langsam nach kurzer Zeit

Ebenenreihenfolge ändern

   -   Auf Symbolebene klicken und bei gedrückter Maustaste nach unten ziehen
       - Bei Klick wird Maus zu geschlossener Hand
       - Ebenen mit Licht1 rutscht hoch
       - Licht1 auf Arbeitsfläche über dem Symbol
       - Ebene mit Licht 2 rutscht hoch
       - Licht2 auf Arbeitsfläche über dem Symbol
       - Ansicht in den Bildformaten wird aktualisiert
   -   Unter Licht 2 Maustaste loslassen
       - Nach Loslassen der Maustaste ist Mauszeiger wieder Pfeil
       - Ebene wird automatisch an die richtige Stelle gerückt

Neues Projekt anlegen

   -   Auf Reiter Projektpalette klicken
       - Projektpalette erscheint
       - Ist leer bis auf die 3 Buttons und Hinweis ‚es ist kein Projekt geöffnet.‘
   -   Auf Button ‚Neues Projekt‘ klicken
       - Da wo vorher Hinweis stand, steht jetzt ein leeres Textfeld

-   Projektname eingeben
       - Nach Eingabe und Bestätigung wieder normaler Text ohne Textfeld

Icon zu Projekt hinzufügen

   -   Auf Button zu Projekt hinzufügen klicken
       - Vorschau des Icons erscheint unter dem Projektname
       - Darunter steht der Dateiname

Gesamtes Icon Färben

   -   In der Ebenenpalette auf Button ‚alle Ebenen auswählen‘ klicken
        - Alle Ebenen sind markiert
        - Button ist aktiv und eingedrückt
   -   Auf die Farbpalette klicken
        - Farbpalette öffnet sich
   -   Auf den Button ‚Farbfilter‘ klicken
        - Farbfilter öffnet sich
   -   Auf die Checkbox unter Färben klicken
        - Icon auf der Arbeitsfläche wird blau gefärbt
        - Ansicht der Bildformate wird angepasst
        - Ebenenvorschau wird angepasst
        - Vorschau der Objekte im Baukasten wird angepasst
   -   Bei gedrückter Maustaste den Regler nach links bewegen und loslassen
        - Icon auf der Arbeitsfläche wird langsam Richtung grün gefärbt
        - Ansicht der Bildformate wird angepasst
        - Ebenenvorschau wird angepasst
        - Vorschau der Objekte im Baukasten wird angepasst

Neues Icon zu aktuellem Projekt hinzufügen

   -   Auf Projektpalette klicken
       - Projektpalette öffnet sich
   -   Auf Button ‚zu Projekt hinzufügen‘ klicken
       - Thumbnail erscheint neben dem ersten roten Icon
       - Dateiname is jedoch markiert, da es eine neue Datei ist und nicht gleich heißten kann
   -   Neuen Dateinamen eingeben und bestätigen

Zwischen 2 offenen Dokumenten wechseln

   -   Erstes rotes Icon durch Doppelklick auf das Symbol öffnen
   -   Rechte Maustaste drücken
        - Es erscheint ein kleines Fenster neben der Maus, mit Vorschaubild und Name der beiden
            offenen Dateien
   -   Auf das Vorschaubild des grünen Icons klicken, um zu diesem zu wechseln