hifi-projekt – #08 tasten

die 5 ebenen, die mit „alt“ gekennzeichnet sind, beherbergen das ergebnis unseres knopf-tutorials – exclusive des schattens, den wir hier aber nicht brauchen werden. das zeichnen des knopfes wird, wie bereits erwähnt, als bekannt vorausgesetzt. haben wir diesen ja auch beim schalter und der buchse als ausgangsobjekt verwendet.

die drei ausgegrauten ebenen darüber werden in den folgenden schritten im mittelpunkt unseres interesses stehen, weil wir damit die beleuchtung der taste realisieren werden.

um diese taste zu beleuchten, werden wir drei ringe übereinander anordnen, und diese mit verschiedenen ebenen-effekten füllen. wir beginnen mit der kante des lichtringes:

wir erstellen also zunächst mit dem ellipsen-werkzeug einen kreis. wie aus vergangenen tutorials schon bekannt, sollte der  werkzeug-modus auf „form“ stehen. entscheidend sind nun die formdetails, entsprechend den beiden parameter-zeilen der oben stehenden grafik:

• obere reihe:
  • flächefarbe: transparent.
  • konturfarbe: #000000
  • konturdicke: 34px
  • konturart: durchgezogen
• untere reihe:
  • konturausrichtung: zentriert
  • konturende: abgeflacht
  • konturverbindung: gehrungsecken

die konturdicke ist hier der wert, der die „größe“ der ringe bestimmt.

damit später der eindruck einer kante entsteht, setzen wir diese ebene auf „multiplizieren“ und reduzieren die deckkraft – zb. auf 39%.

über der kante des lichtringes kommt nun die ebene mit dem eigentlichen lichtring zu liegen:

wie bereits ausgeführt, hat dieser ring die selben dimensionen, wie der vorherige:

• obere reihe:
  • flächefarbe: transparent.
  • konturfarbe: #000000
  • konturdicke: 24px
  • konturart: durchgezogen
• untere reihe:
  • konturausrichtung: zentriert
  • konturende: abgeflacht
  • konturverbindung: gehrungsecken

der ring für das licht hat also eine kleinere kontrudicke (hier um 10px reduziert). der ebenenmodus bleibt auf normal und die deckkraft auf 100%.
nun entsteht der eindruck eines schwarzen ringes, mit abgeschrägten kanten.

so sieht die taste aus, wenn die beleuchtung aus ist. fehlt nur noch ein dritter schritt mit einer ebene, die das licht simuliert, das man durch ein- und ausblenden jener ebne ein- und ausschalten kann.

wir beginnen mit dem werkzeug für abgerundete rechtecke und zeichnen ein solches:

das quadrat erhält keine füllung, eine konturdicke von 0px und einen eckradius von 4px. alles weitere regeln wir mit ebeneneffekten.

da wäre zunächst eine kontur mit folgenden werten:

• größe: 8px
• position: mitte
• füllmethode: ineinanderkopieren
• deckkraft: 69%
• füllart: verlauf
  1. #363636 ~ 0%
  2. #9d9d9d ~ 100%
• art: linear, an ebene ausrichten
• winkel: -49°
• skalieren: 100%

und ein verlauf mit den werten:

• füllmethode: multiplizieren
• deckkraft: 100%
• verlauf:
  1. #2d2d2d ~ 0%
  2. #171717 ~ 100%
• art: linear, an ebene ausrichten
• winkel: 140°
• skalieren: 100%

die taste besteht ebenfalls aus einem rechteck ohne weitere eigenschaften:

abgesehen von einer kleineren kantenlänge, ist es identisch mit dem des rahmens. das weitere erscheinungsbild regeln wir wieder mit diversen ebeneneffekten.

wir beginnen mit einer abgeflachten kante:

• struktur:
  • stil: abgeflachte kante innen
  • technik: hart meißeln
  • tiefe: 448%
  • richtung: nach oben
  • größe: 5px
  • weichzeichnen: 0px
• schattierung
  • winkel: 90°, höhe 30°
  • globales licht verwenden
  • lichtermodus: negativ multiplizieren, 56%
  • tiefenmodus: multiplizieren, 32%

und ein verlauf mit den werten:

• füllmethode: normal
• deckkraft: 100%
• verlauf: *
  1. #757575 ~ 0%
  2. #a3a2a2 ~ 50%
  3. #757575 ~ 100%
• art: linear, an ebene ausrichten
• winkel: -90°
• skalieren: 84%

der abschließende schlagschatten ist im ausgeschalteten zustand noch nicht zu sehen, entfaltet aber seine wirkung, wenn das licht unter der taste eingeschaltet wird:

• füllmethode: multiplizieren
• deckkraft: 47%
• winkel: 90°, kein globales licht
• abstand: 0px
• überfüllen: 52%
• größe: 32px

die verteilung der lichtes ist eine frage persönlicher präferenzen. die hier gezeigte variante ist nur ein vorschlag. wie immer darf/soll mit den werten experimentiert werden.

und wieder zeichen wir ein abgerundetes rechteck, dessen aussekanten da enden sollten, wo der rand des rahmens beginnt

wir beginnen mit einer verlaufsüberlagerung:

• füllmethode: farbig abwedeln
• deckkraft: 51%
• verlauf:
  1. #185100 ~ 0%
  2. #27ff00 ~ 56%
  3. #134500 ~ 100%
• art: raute, an ebene ausrichten
• winkel: -137°
• skalieren: 150%

mit dem [+]-button neben der gerade erstellen verlaufsüberlagerung, erstellen wir eine weitere darunter:

• füllmethode: normal
• deckkraft: 100%
• verlauf:
  1. #185100 ~ 0%
  2. #27ff00 ~ 56%
  3. #134500 ~ 100%
• art: raute, an ebene ausrichten
• winkel: -90°
• skalieren: 150%

jetzt noch einen schein nach aussen:

• struktur:
  • füllmethode: negativ multiplizieren
  • deckkraft: 11%
  • farbe: #24ff00
• elemente
  • technik: präzise
  • überfüllen: 0%
  • größe: 38px

… und einen schatten nach innen, für etwas räumliche tiefe:

• füllmethode: multiplizieren
• deckkraft: 17%
• winkel: 143°, globales licht verwenden
• abstand: 0px
• überfüllen: 0%
• größe: 46px
• kontur: halbrund, glätten

wir beginnen wieder mit dem werkzeug für abgerundete rechtecke und zeichnen:

das rechteck erhält keine füllung, eine konturendicke von 0px und einen radius von 4px. die gesamtgröße sollte für die taste, die led und ein wenig platz drum herum ausreichend sein. danach sind wieder die ebeneneffekten an der reihe:

zuerst wieder die kontur mit folgenden werten:

• größe: 8px
• position: mitte
• füllmethode: ineinanderkopieren
• deckkraft: 49%
• füllart: verlauf
  1. #363636 ~ 0%
  2. #9d9d9d ~ 100%
• art: linear, an ebene ausrichten
• winkel: -46°
• skalieren: 100%

dann ein verlauf:

• füllmethode: multiplizieren
• deckkraft: 100%
• verlauf:
  1. #2d2d2d ~ 0%
  2. #171717 ~ 100%
• art: linear, an ebene ausrichten
• winkel: -90°
• skalieren: 100%

die taste besteht, wie bei der quadrat-version, aus einem rechteck ohne weitere eigenschaften:

auch hier ist die form – bis auf die kleinere kantenlänge, identisch mit der des rahmens.

wir beginnen mit einer abgeflachten kante:

• struktur:
  • stil: abgeflachte kante innen
  • technik: hart meißeln
  • tiefe: 448%
  • richtung: nach oben
  • größe: 5px
  • weichzeichnen: 0px
• schattierung
  • winkel: 90°, höhe 30°
  • globales licht verwenden
  • lichtermodus: negativ multiplizieren, 56%
  • tiefenmodus: multiplizieren, 32%

und ein verlauf mit den werten:

• füllmethode: normal
• deckkraft: 100%
• verlauf: *
  1. #929292 ~ 0%
  2. #8b8b8b ~ 50%
  3. #787878 ~ 100%
• art: linear, an ebene ausrichten
• winkel: -90°
• skalieren: 84%

der abschließende schlagschatten ist (im gegensatz zur quadratischen taste) hier zu sehen, da die tastenkante viel näher am rahmen liegt:

• füllmethode: multiplizieren
• deckkraft: 78%
• winkel: 90°, kein globales licht
• abstand: 0px
• überfüllen: 15%
• größe: 21px

die ausgeschaltete led zeigt schon mal ein wenig von der zu erwartenden farbe. ausserdem ist es reizvoll, die im led-tutorial konstruierte technik wieder mit einzubauen:

auch hier ist die form kleiner als der rahmen und hat keine(!) ecken-radien.

wir beginnen auch jetzt mit einer abgeflachten kante:

• struktur:
  • stil: abgeflachte kante innen
  • technik: abrunden
  • tiefe: 70%
  • richtung: nach oben
  • größe: 5px
  • weichzeichnen: 0px
• schattierung
  • winkel: 90°, höhe 30°
  • globales licht verwenden
  • lichtermodus: negativ multiplizieren, 45%
  • tiefenmodus: multiplizieren, 50%

dann folgt eine  kontur mit folgenden werten:

• größe: 6px
• position: innen
• füllmethode: normal
• deckkraft: 23%
• überdrucken
• füllart: verlauf
  1. #000000 ~ 0%
  2. #ffffff ~ 100%
• art: linear, an ebene ausrichten
• winkel: 130°
• skalieren: 100%

des weiteren ein schatten nach innen:

• füllmethode: multiplizieren
• deckkraft: 19%
• winkel: 90°, globales licht verwenden
• abstand: 0px
• überfüllen: 0%
• größe: 81px
• kontur: runde stufen, glätten

eine farbüberlagerung:

• füllmethode: negativ multiplizieren
• farbe #6a8f9c
• deckkraft: 100%

und zu guter letzt eine musterüberlagerung:

• füllmethode: multiplizieren
• deckkraft: 77%
• muster: rechts-diagonale linie 1
• skalieren: 81%
• mit ebene verbinden