wir beginnen mit einem rechteck von 180px x 928px – wie üblich in schwarz – und versehen es mit zwei ebenen-effekten.
zunächst mit einer farbüberlagerung mit dem farbwert #4f4f4f

danach fügen wir einen „schatten nach innen“ hinzu, um der box tiefe zu verleihen. der schatten hat folgende parameter:

• füllmethode: multiplizieren
• farbe: #000000
• deckkraft: 68%
• winkel: 90°, globales licht verwenden
• größe: 21px

um die kante der vertiefung darzustellen, legen wir unter der box eine neue ebene an und zeichnen ein weiteres, etwas größeres rechteck (190px x 938px). dieses füllen es mit der farbe #161616, setzen den mischmodus auf „multiplizieren“ und die ebenendeckkraft auf 27%.

als nächstes zeichnen wir (auf einer neuen ebene über der vertiefung) zentriert ein schwarzes rechteck mit 117px x 889px, das wir mit einem lienaren verlauf füllen:

• füllmethode: normal
• deckkraft: 100%
• art: linear
• an ebene ausgerichtet
• winkel: -90°
• skalierung: 100%

der verlauf hat folgende farbwerte:

1. #575757 ~ 0%
2. #c8c8c8 ~ 50%
3. #575757 ~ 100%

jetzt erscheint das rechteck als ein bogen, der sich zur mitte hin aus der vertiefung erhebt.

je heller der farbwert in der mitte ist, desto gewölbter/höher wirkt der bogen. an dieser stelle deshalb wieder der hinweis aus den ersten tutorials dieser serie: mit größen, positionen, abständen und farben darf gerne experimentiert werden. die hier verwendeten werte sind nur vorschläge.

diese kontur ist eigentlich nur bei einem ausreichend großen maßstab zu sehen, aber wir wollen das ja perfekt machen :-). in dem fall entsteht um den bogen der eindruck einer kleinen, abgeschrägten kante :

• größe: 2px
• position: mitte
• füllmethode: normal
• deckkraft: 57%
• füllart: verlauf
• art: linear, an ebene ausgerichtet
• winkel: -90°
• skalierung: 100%

der verlauf hat folgende farbwerte:

1. #505050 ~ 0%
2. #565656 ~ 100%

3 – raster und kulisse

nun sind die drei vertiefungen dran, in denen sich der schalter bewegen und in die er einrasten soll. auch diese elemente besteht wieder nur aus einem linearen verlauf. zunächst zeichnen wir auf einer neuen ebene oberhalb des bogens, ein waagerechtes, schwarzes rechteck mit der breite der bogenbreite und der höhe von 35px:

• füllmethode: normal
• deckkraft: 100%
• art: linear
• an ebene ausgerichtet
• winkel: -90°
• skalierung: 100%

der verlauf hat folgende farbwerte:

1. #575757 ~ 0%
2. #c8c8c8 ~ 50%
3. #5d5d5d ~ 100%

anschließend legen wir zwei kopien dieses elementes an und verschieben diese mit jeweils 172px innenabstand zum mittleren element, nach oben und nach unten.

jetzt ist die senkrechte kulisse dran, in der sich der schalter bewegen soll. wir zeichnen auf eine neuen ebene über den drei raster-vertiefungen, ein zentriertes schwarzes rechteck mit einer breite von 35px und einer höhe von 762px. der verlauf ist wie folgt:

• füllmethode: normal
• deckkraft: 100%
• art: linear
• an ebene ausgerichtet
• winkel: -90°
• skalierung: 100%

der verlauf hat folgende farbwerte:

1. #575757 ~ 0%
2. #353535 ~ 25%
3. #202020 ~ 50%
4. #353535 ~ 75%
5. #5d5d5d ~ 100%

um der detailverliebtheit willen, bekommt die kulisse den selben kontur-effekt, wie der bogen in schritt 2 (s. links). da die kulisse teil des bogens ist, ist die gesamterscheinung nun stimmig.

am beginn steht ein kreis mit z.b. 200px durchmesser, den wir mit dem kreis-auswahlwerkzeug aufziehen und mit einer farbe (hier weiß) füllen und mit einer verlaufsübelagerung versehen (nicht vergessen: hilfslinien durch den mittelpunkt des kreises anlegen):

• füllmethode: normal.
• deckkraft: 100%
• art: winkel
• an ebene ausgerichtet
• winkel: -85°
• skalierung: 100%

die farbwerte und position sind wie gehabt:

1. #a1a1a1 ~ 0%
2. #c6c6c6 ~ 12%
3. #ffffff ~ 27%
4. #1e1e1e ~ 35%
5. #c6c6c6 ~ 43%
6. #ffffff ~ 46%
7. #a1a1a1 ~ 50%
8. #c6c6c6 ~ 54%
9. #303030 ~ 68%
10. #ffffff ~ 78%
11. #424242 ~ 84%
12. #c6c6c6 ~ 92%
13. #a1a1a1 ~ 100%

sie erinnern sich: nun ziehen wir mit dem kreis-auswahlwerkzeug aus der mitte der beiden hilfslinien einen weiteren, etwas kleineren kreis auf. in diesem beispiel mit 193px. diesen füllen wir wieder mit weiß.

• füllmethode: normal
• deckkraft: 100%
• art: winkel
• an ebene ausgerichtet
• winkel: 90°
• skalierung: 100%

wie man an der anordnung der dunklen und hellen elemente sehen kann, steuern deren positionen die dunklen und hellen reflektionen auf der oberfläche. die spreizung der hellen farben, bestimmt die breite der hellen reflektion:

1. #c7c7c7 ~ 0%
2. #525252 ~ 25%
3. #b2b2b2 ~ 42%
4. #c6c6c6 ~ 44%
5. #b2b2b2 ~ 46%
6. #525252 ~ 75%
7. #c9c9c9 ~ 92%
8. #c6c6c6 ~ 94%
9. #e6e6e6 ~ 96%
10. #c7c7c7 ~ 100%

im schnellverfahren: wir duplizieren die vorherige ebene, löschen den ebenenstil und legen eine neuen wie folgt an:

• füllmethode: ineinanderkopieren*
• deckkraft: 100%
• art: radial
• an ebene ausgerichtet
• winkel: 90°
• skalierung: 100%

* da wir den verlauf mit der füllmethode „ineinanderkopieren“ anwenden, darf die füllfarbe des kreises nicht sichtbar sein. sie würde stören. analog zum dritten arbeitsschritt für die aluminiumfläche, setzen wir im ebenenstil-dialog unter den mischoptionen > erweiterter mischmodus, die flächendeckkraft auf 0%

hier gibt es keine festen farbwerte. wichtig ist, dass die verlaufsart auf „rauschen“ steht. für die „rauheit“ empfehlen sich 24%. als farbmodell wählen wir „HSB“.

mit den reglen der HSB-farbparameter können wir nun farbstich, kontrast und helligkeit der gedrehten struktur festlegen.

beim verschieben der regler unter den parameter-balken werden leider keine werte angezeigt, die man festhalten könne.
hier ist also wiederholt kreativität gefragt.

wir beginnen damit, den „mitte“-ordner innerhalb des „kopf“-ordners zu duplizieren (in „oben“ umzubenennen) und darin die ebenen „kante“, „oberfläche“ und „finish“ auf eine eben zu reduzieren. diese neue ebene verschieben wir ein stück nach oben und stauchen sie mit dem transformationstool in der höhe (z.b. auf 174px).

dann erstellen wir eine neue ebene unter dem gestauchten knopf, und zeichnen dort einen schwarzen kreis (hier als orange kontur dargestellt), der etwas kleine ist, als der knopf.
anschließend erstellen wir eine ebene über dem schwarzen kreis und zeichnen mit dem polygon-lasso-werkzeug ein schwarzes trapez (hier also rote kontur dargestellt). wichtig: die horizontalen linien sollten etwas unterhalb der mitte des schwarzen kreises und des knopfes liegen, damit es an den kreisanschlüssen nicht zu eigenartigen auswüchsen in der kontur kommt.

wenn wir den schwarzen kreis und das schwarze trapez auf eine ebene zusammenziehen, haben wir den korpus fertig gestellt. jetzt geht es an die „tapete“.

die erste lage tapete besteht aus einem verlaufs- und einem glanz-effekt:

der verlauf hat folgende parameter:

• füllmethode: normal
• deckkraft: 100%
• art: linear
• an ebene ausgerichtet
• winkel: -3°
• skalierung: 107%

und diese farbwerte:

1. #2e2e2e ~ 0%
2. #484848 ~ 13%
3. #636363 ~ 33%
4. #d3d3d3 ~ 69%
5. #8a8a8a ~ 87%
6. #161616 ~ 100%

der glanz-effekt hat folgende parameter:

• füllmethode: multiplizieren
• deckkraft: 34%
• winkel: 63°
• abstand: 26px
• größe: 76px
• kontur: gaußsche normalverteilung

special-effekt: wir kopieren ein stück aluminium aus dem hintergrund und legen es über den korpus des schalters. danach stellen wir die ebene auf „ineinanderkopieren“, um das alu-muster auf dem korpus abzubilden.

dann wählen wir aus dem menü „bearbeiten > transformieren“ die option „verformen“, und ziehen die alu-tapete durch das verschieben der punkt so in form, dass sich die struktur der form des korpus anpasst.
ist das erledigt, wählen wir mit gedrückter

• command-taste (mac)
• befehls-taste (win)

auf die darunter liegende ebene, um den umriss des korpus auszuwählen (während die alu-tapete die aktive ebene bleibt) und kehren mit der tastenkombination

• shift command i (mac)
• shift befehl i (win)

die auswahl um. mit

• command x (mac)
• befehl x (win)

entfernen wir alle tapetenteile ausserhalb des korpus und der knopf verfügt über eine schöne alu-struktur.

bleibt noch, unter dem korpus zwei ebenen mit schwarzen kreisen zu zeichnen, die kreise mit dem gaußschen weichzeichner zu behandeln und die ebenen auf „multiplizieren“ zu stellen.
danach passen wir die deckkraft, und wo nötig mit dem transformations-tool die form des so entstandenen schattens an: einer unter dem knopf und einer neben dem knopf.

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