hifi-projekt – #06 kippschalter

hifi-projekt – #06 kippschalter

hifi-projekt – #06 kippschalter

bevor es los geht:

vorweg: grundkenntnisse in photoshop (cc) werden vorausgesetzt: hier das erstellen einer datei, das anlegen und handhaben von ebenen und von ebenen-stilen.

die hier besprochenen elemente (knöpfe, schalter, led, buchsen, anzeigen, schrauben, ect.), werden alle in einer größe dargestellt, die eine adäquate abbildungsqualität garantiert. da leds in der regel nicht die größe von volume-reglern haben, müssen diese elemente beim anordnen in einem projekt, natürlich im maßstab angepasst werden. 
von einem nachträglichen vergrößern rate ich ab, da das ergebnis unscharf wird. verkleinern bringt in einem begrenzten rahmen brauchbare ergebnisse. das direkte erstellen in der gewünschten größe ist im zweifelsfalle der richtige weg. die tutorials sind so angelegt, dass man die elemente auch in anderen größen nachvollziehen kann.

material zur lektion

‘schalter.psd.zip’ enthält das fertige photoshop-cc-kompatible dokument zum experimentieren.

der kippschalter

… erlaubt die auswahl verschiedener optionen. zb. zwischen rauschunterdrückungen, bandarten oder verschiedenen signal-eingängen. wir konstruieren uns einen schalter mit drei verschiedenen stellungen.

1 – die box

wir beginnen mit der aussparung und der aufnahmevorrichtung für den kippschalter. das ist mit ein paar verläufen und schatten ganz einfach umzusetzen: 

1 – vertiefung

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

wichtig!

nicht vergessen: hilfslinien anlegen hilft, nachfolgende objekte auszurichten. in dem fall bieten sich wieder je eine horizontale und eine vertikale hilfslinie durch die mitte der box an.

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%.

2 – bogen

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.

wichtig!

da der schatten unter dem bogen nur links und rechts zu sehen sein darf, können wir das nicht mit einem ebenen-effekt lösen. stattdessen gehen wir wie folgt vor: wie zeichnen eine eben unter dem bogen ein schwarzes rechteck in der größe des bogens und wenden auf dieses den gaußschen weichzeichner in der stärke 8 an. danach verschieben wir mit dem transformations-tool bei gedrückter umschalt- (shift)-taste den oberen und den unteren rand des schattens unter den bogen, so dass nur noch der schattenwurf links und rechts zu sehen ist.

4 – öffnung

der letzte arbeitsschritt an der box ist die öffnung ins innere des gehäuses, um dem schalter zugang zur platine im gerät zu verschaffen. auf einer neuen ebene über der kulisse, zeichnen wir ein zentriertes schwarzes rechteckt mit der breite von 15px und der höhe von 605px. zunächst erhält das rechteck folgenden verlauf:

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

der verlauf hat folgende farbwerte:

  1. #515151 ~ 0%
  2. #000000 ~ 50%
  3. #515151 ~ 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.

danach fügen wir einen “schatten nach innen” hinzu, um auch hier tiefe darzustellen. der schatten hat folgende parameter:

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

und so könnte unsere ebenen-struktur bis jetzt aussehen.

2 – der knopf

und wieder begegenen wir dem knopf-konstrukt aus dem zweiten tutorial..

1 – kante

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%

2 – gedrehte oberfläche

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%

3 – finish

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.

4 – schatten

fehlt noch der schatten unter dem knopf: dazu zeichen wir auf einer neuen ebene unter dem knopf einen schwarzen kreis in kopfdurchmesser und bearbeiten ihm mit dem gaußschen weichzeichner (stärke 23).
anschließend stellen wir die ebene auf “multiplizieren” und reduzieren die deckkraft auf zb. 56%.
jetzt müssen wir nur noch mit hilfe des transformations-tools den schatten in eine passende perspektive bringen.

und so könnten die ebenen für den knopf aussehen. zwei dinge sind hier erwähnenswert:

  • die elemente des knopfes liegen zunächst in dem ordner “mitte”. im nächstenm abschnitt werden wir die ordner “oben” und “unten” ergänzen, in denen sich dann die entsprechenden schalterstellungen finden.
  • der ordner “knopf” befindet sich über dem ordner “ausschnitt”, in dem sich die box aus dem letzten arbeitsschritt befindet.

3 – oben, mitte, unten

in diesem teil verlassen wir die übliche arbeitsweise für einen moment und arbeiten weniger pixelgenau, als eher ein wenig intuitiv:

1 – nach oben – konstrukt

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”.

2 – nach oben – tapezieren, teil 1

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

3 – nach oben – tapezieren, teil 2

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.

4 – … und nach unten

den schalter nach unten zu verlegen ist keine große sache. hierfür sind lediglich 4 einfache schritte nötig.

zuerst duplizieren wir den “oben”-ordner und benennen ihn der übersicht wegen mit “unten”.

dann markieren wir den “unten”-ordner in der ebenen-übersicht und drehen ihn mit dem menübefehl “bearbeiten > transformieren > um 180° drehen” in die richtige lage.
anschließend schieben wir ihn an die endgültige position.

dass das jetzt noch komisch aussieht, liegt an den schatten und am verlauf auf dem korpus. deshalb bewegen wir zuerst die beiden schatten an die richtige stelle.

dann öffnen wir den ebenen-effekt des korpus und drehen den winkel des verlaufes auf die andere seite. in dem fall habe ich einen wert von 170° gewählt.

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity

hifi-projekt – #06+ intermezzo

hifi-projekt – #06+ intermezzo

hifi-projekt – #06+ intermezzo

zur entspannung

nach den letzten, etwas umfangreicheren tutorials, hier wieder eine anregung zur kombinaton verschiedener elemente (regler, led, buchse, schalter und einer preview zum nächsten tutorial) probieren sie es selbst, lassen sie ihrer phantasie freien lauf…

input mic

input line

input optical

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity

hifi-projekt – #07 display

hifi-projekt – #07 display

hifi-projekt – #07 display

bevor es los geht:

vorweg: grundkenntnisse in photoshop (cc) werden vorausgesetzt: hier das erstellen einer datei, das anlegen und handhaben von ebenen und von ebenen-stilen.

die hier besprochenen elemente (knöpfe, schalter, led, buchsen, anzeigen, schrauben, ect.), werden alle in einer größe dargestellt, die eine adäquate abbildungsqualität garantiert. da leds in der regel nicht die größe von volume-reglern haben, müssen diese elemente beim anordnen in einem projekt, natürlich im maßstab angepasst werden. 
von einem nachträglichen vergrößern rate ich ab, da das ergebnis unscharf wird. verkleinern bringt in einem begrenzten rahmen brauchbare ergebnisse. das direkte erstellen in der gewünschten größe ist im zweifelsfalle der richtige weg. die tutorials sind so angelegt, dass man die elemente auch in anderen größen nachvollziehen kann.

material zur lektion

‘display.psd.zip’ enthält neben dem fertigen photoshop-cc-kompatible dokument zum experimentieren ein wabenmuster und einen nicht-proportionalen ldc-font.

das display

dieses tutorial wird etwas umfangreicher und erfordert vorarbeit, was die typografie angeht. ausserdem erkunden wir hier die möglichkeit, in photoshop eigene muster anzulegen.
besprochen werden drei gängige display-typen, die bis heute anwendung finden: die anzeige aus led-segmenten, das lcd-display und das zeichnerisch aufwendige vfd (vacuum fluorescent display).

zur typografie

in diesem tutorial stellen wir einen einfachen, vierstelligen zähler (z.b. für ein tapedeck) nach. in dem wissen, dass mit lcd- und vfd-displays auch beliebige andere elemente darstellbar sind (dazu in einem späteren tutorial-intermezzo mehr), beschränken wir uns hier – ganz old-school – auf ziffern, die aus einzelnen segmenten zusammengebaut werden.
für gewöhnlich besteht eine display-ziffer aus allen verfügbaren, aber inaktiven segementen. soll eine ziffer angezeigt werden, bringt man die entsprechenden segmente zum leuchten, bzw. ändert deren lichtdurchlässigkeit (lcd). wir werden das umsetzen, in dem wir die inaktiven elemente als text auf eine eben legen und die aktiven elemente ebenfalls als text auf einer darüberliegenden ebene platzieren. um solches mit möglichst wenig aufwand umzusetzen, benötigen wir einen sogenannten “lcd-font” mit nicht-proportionalen zeichen. das heißt: alle zeichen haben die selbe breite. ein proportionaler font würde zur folge haben, dass wir jede ziffer einzeln platzieren und ausrichten müssten. zur verdeutlichung zwei beispiele:

nicht-proportionaler font

proportionaler font

nicht-proportionale lcd-fonts sind nicht leicht zu finden, da sie sich für fließtext überhaupt nicht eignen. einen ganz besonders ausgefallenen nicht-proportionalen lcd-font, fanden ich auf der website des “museum of hp-calculators”. er empfindet den display-font der hp-41 taschencomputer-serie nach.
luiz c. viera, der designer des hier verwendeten fonts, ist mitglied des museum of hp-calculator und lehrer an der unipac (uiversidade presidente antônio carlos) in basilien. von ihm habe ich freundlicherweise die genehmigung erhalten, den font für diesen zweick zu verwenden und leicht zu modifizieren.

1 – led

dieses display ist am einfachsten zu realisieren. wir brauchen dazu nur eine display-fläche, eine ebene mit den generell vorhandenen segmenten und eine ebene mit dem eigentlichen inhalt. da wir noch platz für einen vierten arbeitsschritt haben, leisten wir uns den spaß einer optionalen spiegelung auf dem display.

1 – gehäuse

wir starten paradoxerweise mit dem gehäuse und legen dann alle bestandteile, die sich eigentlich dahinter befinden, oben drauf. diverse mischmodi und ebenen-deckkräfte regeln alles weitere.

mit dem vektorgrafik-werkzeug für abgerundete rechtecke ziehen wir ein rechteck auf und geben den kanten einen radius von z.b. 24px. mit einem ebeneffekt weisen wir der fläche die farbe schwarz zu.

der schlagschatten ist optional. wird er weg gelassen, schließen die kanten des displays bündig mit dem aluminium-gehäuse ab. ist er vorhanden, entsteht der eindruck, dass das gehäuse ein wenig über die aluminium-oberfläche übersteht.

2 – segmente

jetzt geht es darum, die hardwareseitig vorhandenen elemente der anzeige zur verfügung zu stellen. in diesem fall müssen wir ein wenig kreativ vorgehen:
unser display soll die ziffern 0-9 darstellen können. der zeichensatz verwendet in der 0 einen schrägstrich, um diese so von dem großbuchstaben O unterscheidbar zu machen.
das hier, ist der zeichenvorrat, der uns zur verfügung steht:

wie eingangs erwähnt, verfügt der beiliegende font bereits über ein von mir hinzugefügtes symbol. sollten sie einen anderen lcd-font verwenden, erstellen sie das symbol, in dem sie zwei textebenen übereinander legen, die eine mit der “8” und die andere mit dem “/” auffüllen.

die textebene erhält via ebeneneffekt eine farbrüberlagerung. ich habe mich für ein sehr dunkles grau mit einem leichten rot-stich entschieden. wie immer, ist das nur ein vorschlag. eigene experimente sind erwünscht.

3 – content

eine weitere textebene, nimmt nun den content auf, den wir darstellen wollen. dieser bekommt (in diesem beispiel) die farbe #c90500. eigentlich könnte das schon reichen.

für eine realistischere darstellung, erhält der content nun noch einen schein nach aussen:

  • füllmethode: negativ multiplizieren
  • deckkraft: 24%
  • farbe: #c40202
  • technik: weicher
  • größe: 68px
  • bereich: 50%

ein dezenter glanzeffekt vermittelt dein eindruck einer nicht ganz gleichmässig leuchtenden segement-oberfläche:

  • füllmethode: multiplizieren
  • deckkraft: 51%
  • farbe: #000000
  • winkel: 90°
  • abstand: 45px
  • größe: 81px
  • glätten: kontur kegel

4 –spiegelung (add-on)

da noch platz ist, hier eine kleine luxus-option: der fotograf spiegelt sich im display ….
hierzu habe ich ein foto aus den 70gern bemüht, bei dem ich in einen spiegel fotografiert habe – die seitliche orientierung ist also schon mal korrekt.

nachdem der richtige ausschnitt platziert und das motiv auf displaygröße zugeschnitten ist, fügen wir dem foto eine ebenenmaske zu:

die ebenenmaske fungiert als leinwand, auf der sie die teile des fotos – unter berücksichtigung der deckkraft – “übermalen” können, die sie ausblenden wollen – ohne dabei das foto selbst zu verändern. versehentlich übermaltes lässt sich mit dem radiergummi wieder freilegen.
wichtig: in der foto-ebene muss die maske ausgewählt sein, um sie bearbeiten zu können!

bleibt am ende noch, die foto-ebene auf “negativ multiplizieren” zu stellen und die deckkraft zu reduzieren (hier 12%)

2 – lcd

auch dieses display ist einfach zu bauen. es verfügt über die selben ebenen wie das led-display. lediglich der rahmen und die fläche sind ein kleines bisschen aufwendiger.

1 – display

auch hier starten wir wieder mit dem gehäuse, das diesmal aus zwei elementen besteht.

mit dem vektorgrafik-werkzeug für abgerundete rechtecke zeichnen wir wieder ein rechteck und geben den kanten den bekannten radius von z.b. 24px. mit einem ebeneffekt weisen wir der fläche die farbe schwarz zu.
den mischmodus dieser fläche setzen wir auf multiplizieren und die deckkraft auf 21%

nun folgt das eigentliche display, das auf einer neuen ebene über dem vorherigen rechteck platziert wird. es bekommt den selben eckradius, wird aber etwas kleiner.
mit zwei ebenen-effekten versehen wir es mit der farbe #8ac078 und einem schatten nach innen, so dass es räumliche tiefe erhält. der schatten bekommt hier folgende parameter:

  • mischmodus: multiplizieren
  • farbe: #000000
  • deckkraft: 73%
  • winkel: 90°, globales licht verwenden
  • größe: 21px

 

2 – segmente

jetzt geht es wieder darum, die hardwareseitig vorhandenen elemente der anzeige zur verfügung zu stellen. für das lcd-display verwende ich die hardwarevorgabe des hp41-taschencomputers, die pro zeichen über 14 segmente verfügt.
zur erinnerung: der zeichenvorrat, der uns zur verfügung steht:

in diesem fall verwenden wir das zweite, von mir zu diesem font hinzugefügte sonderzeichen . sollten sie einen anderen lcd-font verwenden, haben sie evtl. eine andere anzahl segmente zur verfügung. bei der verwendung eines alternativen hp41-displayfonts, erstellen sie das symbol, in dem sie zwei textebenen übereinander legen. die eine mit der “0” und die andere mit dem “*” (multiplikations-operator) auffüllen.

schaut man von der seite auf ein lcd-display, kann man die segmente erkennen. wichtig ist, dass sich diese in farbe/helligkeit nur ein bisschen vom display-hintergrund unterscheiden.
in diesem beispiel habe ich einen etwas dunkleren farbton gewählt. eine hellere farbe ist ebenso denkbar, wie ein geringerer unterschied zur display-farbe.
variieren sie die werten, bis sie etwas finden, was ihnen zusagt. 

tipp!

sobald der content (s. schritt 3) im display liegt, wirkt die farbe der segmente noch einmal anders. es kann durchaus vorkommen, dass sie nach schritt 3 das bedürfnis verspüren, die segement-farbe noch einmal anzupassen.

3 – content

wie schon beim led-display, nimmt eine weitere textebene nun den content auf, den wir darstellen wollen.

für die farbe des contents empfiehlt es sich, kein triviales schwarz zu verwenden; der kontrast wäre viel zu hart. statt dessen passt eine sehr dunkle variante der display-farbe viel besser und ergibt ein stimmiges gesamtbild.

für eine realistischere darstellung, erhält der content nun noch einen dezenten schlagschatten:

  • füllmethode: multiplizieren
  • farbe: #c000000
  • deckkraft: 65%
  • winkel: 90°, globales licht verwenden
  • größe: 8px

denkbar wäre hier auch, den schatten in der farbe des contents anzulegen. lassen sie ihrer phantasie freien lauf…

4 –spiegelung (add-on)

da noch platz ist, hier eine kleine luxus-option: der fotograf spiegelt sich im display ….
hierzu habe ich ein foto aus den 70gern bemüht, bei dem ich in einen spiegel fotografiert habe – die seitliche orientierung ist also schon mal korrekt.

nachdem der richtige ausschnitt platziert und das motiv auf displaygröße zugeschnitten ist, fügen wir dem foto eine ebenenmaske zu:

die ebenenmaske fungiert als leinwand, auf der sie die teile des fotos – unter berücksichtigung der deckkraft – “übermalen” können, die sie ausblenden wollen – ohne dabei das foto selbst zu verändern. versehentlich übermaltes lässt sich mit dem radiergummi wieder freilegen.
wichtig: in der foto-ebene muss die maske ausgewählt sein, um sie bearbeiten zu können!

bleibt am ende noch, die foto-ebene auf “negativ multiplizieren” zu stellen und die deckkraft zu reduzieren (hier 12%)

3 – vfd

das vfd (oder vacuum flourescent display) ist sehr viel aufweniger als die beiden varianten zuvor. prinzipiell verfügt es auch über eine displayfläche, eine ebene mit dem träger für die vorhandenen segmente und einer ebene mit dem eigentlichen content. aber dann sind da noch die vielen einzelnen element, die von aussen auch sichtbar, und ursächlich für diese technik sind:
in einem glasgehäuse, in dem sich ein vakuum befindet, liegen unten die anoden, die mit phosphor beschichtet sind. oben sind dünne, mit oxiden beschichtete wolframdrähte gespannt, die mit einer wechselspannung erhitzt werden, und die kathoden darstellen. zwischen den anoden und den kathoden liegt ein dünnes, wabenförmiges steuergitter (s. triode). die von den heizdrähten emmitierten thermischen elektronen, werden auf dem weg zur anode von der angelegten spannung im steuergitter entweder angezogen, oder abgestoßen. die segment leuchten, wenn sowohl das gitter als auch die anode elektrisch positiv gegenüber der kathode sind.

da wir bei den beiden displays zuvor schon die grundlagen für das gehäuse, die segmente und den content erarbeitet haben, können wir diese schritte hier straffen und haben genug platz und zeit für die besonderheiten dieses displays: 

1 – die technik & muster

ausschnitt, © Atlant/wikipedia cc by 2.5

auf diesem foto kann man die einzelnen elemente des vfd gut erkennen.

über der anode mit den phosphor-elementen, liegt das steuergitter, das an eine wabenstruktur erinnert. über dem steuergitter kann man die horizontalen heizdrähte erkennen, die die rolle der kathoden übernehmen.

die heizdrähte enden rechts in kleinen aufnahmen, die ihrerseits mit einem gebogenen draht verbindung mit einer leiste haben.

um später das steuergitter nicht aus unzähligen waben zusammenbauen zu müssen, fertigen wir ein füllmuster in der gewünschten form. dazu legen wir eine neue datei mit transparentem hintergrund an und bemühen das polygon-werkzeug:

in dem fall reicht eine kantenlänge von 100px. das polygon vervielfältigen wir, bis wir über genug elemente verfügen, um ein endlosmuster erzeugen zu können.

wenn die nötigen 7 waben bündig liegen, bietet es sich an, diese in einen ordner zu verpacken und eine kopie des ordners anzulegen. das original soll als backup für evtl. änderungen herhalten.

der arbeitsordner kann danach auf eine ebene reduziert werden. beim ausschneiden des musters ist darauf zu achten, dass die horizontalen linien am oberen und unteren ende nur in der halben dicke übernommen werden, damit sie beim zusammenfügen als muster, wieder die korrekte dicke erhalten.

das ausgeschnittene muster sollte jetzt eine breite von 150px und eine höhe von 200px haben. mit dem menübefehl “bearbeiten > muster festlegen”, können wir es mit einem namen versehen und der musterpalette zuführen.

2 – gehäuse, segmente & content (anoden)

wie eingangs erwähnt, haben wir in sachen gehäuse, segmente und content schon etwas übung und können diesen part straffen. die grundlage ist wieder mit dem vektorgrafik-werkzeug für abgerundete rechtecke erstellt, der eckenradius beträgt 24px – wie gehabt.
im gegensatz zum led-display verzichten wir hier auf den schlagschatten, so dass das displaygehäuse bündig mit dem aluminium-hintergrund abschließt.

es folgen die üblichen glyphen für die hardwareseitig vorhandenen elemente. gemäß dem vorbild in einem helleren grau (#2e2e2e).

der content erhält die farbe #00ffff und nachfolgend einen “schein nach aussen” im selben farbton:

  • füllmethode: negativ multiplizieren
  • farbe: #00eaff
  • deckkraft: 29%
  • technik: weicher
  • größe: 62px
  • bereich: 50%
s

wichtig!

links und rechts der ziffern brauchen wir platz für die elektronik – rechts etwas mehr als link. ggf. können die zeichen ja nachträglich noch in der größe angepasst werden.

3 – steuergitter & kathoden

jetzt kommt der erste schritt, der dieses display optisch aussergewöhnlich macht: das steuergitter. dazu ziehen wir auf einer neuen ebene über den segementen und dem content ein rechteck auf, das genug luft um die ziffern lässt.
wir erinnern uns: die flächendeckkraft der eben wird auf 0 gesetzt, so dass in folge nur die verwendeten effekte sichtbar sind.

zunächst bekommt das gitter eine 13px große kontur (position: innen) in der farbe #181818. irgendwo müssen die waben ja befestigt werden, die wir nun mit dem zuvor erstellten füllmuster in die kontur zaubern. die musterüberlagerung hat folgende werte:

  • füllmethode: differenz
  • muster: {unser wabenmuster}
  • an ursprung ausrichten
  • skalieren: 13%
  • mit ebene verbinden

die elemente der elektronik kann man entweder als vektorgrafiken anlegen (wenn man sie öfter verwenden und verlustfrei skalieren möchte), oder einfach als pixelgrafiken für den einmal-gebrauch bei nur minimalen größenänderungen.
in diesem beispiel wurden, ausser den gebogenen drähten, alle elemente als pixelflächen angelegt und mit ebeneneffenkten eingefärbt.
im prinzip müssen alle markanten elemente nur einemal erstellt werden und können im anschluss beliebig oft kopiert, gespiegelt und gruppiert werden. die elemente sind (von links nach rechts):

  • heizdraht-aufnahme links: ein rechteck und ein leicht gedrehtes, t-förmiges objekt in der farbe #1f1f1f
  • ein rechteck mit aussparungen, das aus mehreren identischen segmenten besteht, die vertikal aneinander gereiht werden. farbe: #1a1a1a
  • ein rechteck mit der farbe #2b2b2b
  • die gebogenen drähte in der farbe #484848
  • und abschließend die horizontalen heizdrähte (kathoden) mit 1px dicke und ebenfalls der farbe #484848
  • die heizdraht-aufnahme recht ist eine horizontal gespiegelte kopie der linken heizdraht-aufnahme.

4 – abdeckung, räumliche tiefe

so sieht unser konstrukt jetzt aus, wenn der gehäuseboden aus schritt 2 zur hälfte ausgeblendet wird. was hier fehlt, ist räumliche tiefe.

die erzeugen wir, in dem wir ganz oben eine neue ebene anlegen (flächendeckkraft: 0%) und einen schatten nach innen anlegen:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: 90°, globales licht verwenden
  • abstand: 4px
  • unterfüllen: 27px
  • größe: 32px

eine dezente verlaufsüberlagerung sorgt nun noch dafür, dass das display am oberen und unteren rand etwas dunkler wird.

  • füllmethode: multiplizieren
  • deckkraft 39%
  • art: linear, an ebene ausrichten
  • winkel: -90°
  • skalieren: 100%

der verlauf hat folgede farbwerte:

  • #2e2e2e ~ 0%
  • #d2d2d2 ~ 56%
  • #242424 ~ 100%

selbstredend ist jetzt noch platz für eine reflektion (s. led- und lcd-display)

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity

hifi-projekt – #08 tasten

hifi-projekt – #08 tasten

hifi-projekt – #08 tasten

bevor es los geht:

vorweg: grundkenntnisse in photoshop (cc) werden vorausgesetzt: hier das erstellen einer datei, das anlegen und handhaben von ebenen und von ebenen-stilen.

die hier besprochenen elemente (knöpfe, schalter, led, buchsen, anzeigen, schrauben, ect.), werden alle in einer größe dargestellt, die eine adäquate abbildungsqualität garantiert. da leds in der regel nicht die größe von volume-reglern haben, müssen diese elemente beim anordnen in einem projekt, natürlich im maßstab angepasst werden. 
von einem nachträglichen vergrößern rate ich ab, da das ergebnis unscharf wird. verkleinern bringt in einem begrenzten rahmen brauchbare ergebnisse. das direkte erstellen in der gewünschten größe ist im zweifelsfalle der richtige weg. die tutorials sind so angelegt, dass man die elemente auch in anderen größen nachvollziehen kann.

material zur lektion

‘tasten.psd.zip’ enthält das fertige photoshop-cc-kompatible dokument zum experimentieren.

die taste

… wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen. statt des schlagschattens, der die positionen “drinnen” oder “draußen” visualisiert, sollen unsere tasten mit einer eingebauten beleuchtung auf den schaltzustand aufmerksam machen: rund, quadratisch und rechteckig.

1 – rund

und da ist er wieder, unser altbekannter knopf. wie beim drehregler und der buchse wird hier davon ausgegangen, dass die technik des “knopf-zeichnens” soweit bekannt ist. andernfalls kann diese hier nachgeschlagen werden.

1 – ist-zustand

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.

2 – lichtring-kante

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:

s

wichtig!

wir zeichnen mit dem ellipsen-werkzeug (vektor-grafik), weshalb es hier nicht auf den durchmesser der drei ringe ankommt. zunächst einmal haben alle drei ringe die selbe breite und höhe (in diesem tutorial: 300px) und liegen mit ihren mittelpunkten übereinander. die endgültige breite regeln wir über den die “formkontur-breite” in den formdetails (s. grafik oben)

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%.

3 – lichtring

ü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.

4 – licht

dieser letzte schritt ist ein wenig komplexer, erfordert er doch 4 verschiedene ebenen-effekte:

wir beginnen mit einer verlaufsüberlagerung:

  • füllmethode: ineinanderkopieren
  • deckkraft: 47%
  • art: reflektiert, an ebene ausrichten
  • winkel: 50°
  • skalieren: 129%

der verlauf selbst hat folgende parameter:

  1. #000000 ~ 0%
  2. #ffffff ~ 19%
  3. #373737 ~ 38%
  4. #ffffff ~ 56%
  5. #696969 ~ 69%
  6. #fffffff ~ 85%
  7. #000000 ~ 100%

 

mit dem [+]-symbol neben der gerade erstellen verlaufsüberlagerung, fügen wir direkt darunter eine weitere verlaufsüberlagerung hinzu:

  • füllmethode: normal
  • deckkraft: 100%
  • art: linear, an ebene ausrichten
  • winkel: -90°
  • skalieren: 100%

der verlauf hat hier folgende parameter:

  1. #510000 ~ 0%
  2. #ff2a00 ~ 56%
  3. #450000 ~ 100%

beachten!

der hell-/dunkel-verlauf des lichtringes hat nicht die selbe orientierung, wie der hell-/dunkel-verlauf der taste. warum?
das licht in der taste wird nicht vom licht von aussen beeinflusst, sondern von der lichtquelle im inneren.
da der (angenommen) plexigläserne einsatz innerhalb der taste befestigt sein muss (ich habe mal eine zwei-punkt-befestigung angenommen), ist das licht an diesen punkten nicht so stark. diese stellen sind aber unabhängig von dem äußeren licht.

jetzt noch ein bisschen “schein nach aussen” …

  • füllmethode: negativ multiplizieren
  • deckkraft: 81%
  • farbe: #ff0000
  • technik: weicher
  • größe: 60%
  • bereich: 50%

… und ein wenig “schatten nach innen”:

  • füllmethode: multiplizieren
  • deckkraft: 36%
  • farbe: #ff0000
  • winkel: 132°, globales licht verwenden
  • abstand: 4px
  • größe: 18px

2 – quadratisch

diese taste eignet sich besonders gut, um auf ihr beliebige symbole anzubringen. z.b. für die steuerung eines bandlaufwerkes:

1 – rahmen

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%

2 – taste

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%
s

*wichtig!

die werte für den verlauf sollten sie mit der pipette von der umgebenden aluminium-platte abgreifen, damit sich die taste nahtlos in den helligkeitsverlauf des umgebenden gehäuses einfügt.

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

tipp!

um die taste noch etwas besser mit dem umgebenden aluminium zu “verbinden”, bietet es sich an, aus der alu-fläche (ohne den darüberliegenden helligkeitsverlauf s. tutorial aluminium) ein stück material zu entnehmen, auf tastengröße zu beschneiden und mit dem ebenenmodus “ineinanderkopieren” und eine reduzierten deckkraft auf die taste zu legen.

3 – licht

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.

s

wichtig!

die ebene mit dem lichteffekt muss(!) zwischen dem rahmen und der taste zu liegen kommen:

  • taste
  • licht
  • rahmen

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

 

4 –symbol

eigentlich wäre die taste damit gebrauchsfertig. wie eingangs erwähnt, bietet sich dieses format an, ein beleuchtetes symbol zu tragen. das wollen wir an dieser stelle nachreichen.
um den aufwand beim ein- und ausschalten gering zu halten, werden wir nur ein symbol anlegen und die ebenen-effekte so gestalten, dass das aktivieren/deaktivieren einer farbüberlagerung ausreicht, den gewünschten effekt zu erzielen.

ein dreieck erstellt sich am einfachsten mit dem polygonwerkzeug: werkzeug auswählen, modus auf pixel(!) stellen, auf die arbeitsfläche klicken und ungefähre werte eingeben. den rest erledigen wir wie gewohnt mit den ebeneneffekten:

 

zuerst bekommt das dreieck eine kontur:

  • größe: 7px
  • position: innen
  • füllmethode: ineinanderkopieren
  • deckkraft: 84%
  • füllart: verlauf:
    1. #000000 ~ 0%
    2. #828282 ~ 100%
  • art: linear, an ebene ausrichten
  • winkel: -60°
  • skalieren: 100%

 

… und einen schatten nach innen:

  • füllmethode: multiplizieren
  • deckkraft: 48%
  • winkel: 132°, kein globales licht
  • abstand: 9px
  • überfüllen: 0%
  • größe: 14px
  • kontur: halbrund, glätten

 

diese farbübelagerung ist für “licht an” zuständig:

  • füllmethode: multiplizieren
  • farbe: #15b300
  • deckkraft: 100%

 

und diese für “licht aus”. es ist übrigens egal, in welcher reihenfolge diese beiden farbüberlagerungen zu liegen kommen 😉

  • füllmethode: normal
  • farbe: #1b1b1b
  • deckkraft: 100%

 

ganz unten kommt ein verlauf zu liegen, der die basis für das licht bietet:

  • füllmethode: normal
  • deckkraft: 100%
  • verlauf: *
    1. #ffffff ~ 0%
    2. #b8b8b8 ~ 74%
    3. #ffffff ~ 100%
  • art: radial, an ebene ausrichten
  • winkel: 0°
  • skalieren: 150%

3 – rechteck

… oder quadrat – wie es beliebt. diese taste gebietet über eine externe led. aber nicht daneben, wie in den vergangenen lektionen gezeigt, sondern als “anbau” an die taste:

1 – rahmen

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%

2 – taste

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%
s

*wichtig!

die werte für den verlauf sollten sie mit der pipette von der umgebenden aluminium-platte abgreifen, damit sich die taste nahtlos in den helligkeitsverlauf des umgebenden gehäuses einfügt.

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

tipp!

um die taste noch etwas besser mit dem umgebenden aluminium zu “verbinden”, bietet es sich an, aus der alu-fläche (ohne den darüberliegenden helligkeitsverlauf s. tutorial aluminium) ein stück material zu entnehmen, auf tastengröße zu beschneiden und mit dem ebenenmodus “ineinanderkopieren” und eine reduzierten deckkraft auf die taste zu legen.

3 – led abdeckung, licht aus

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

tipp!

an dieser stelle können wir uns den ordner mit der klassischen technik aus dem led-tutorial holen, und mit einer reduzierten deckkraft eine ebene über das led-gehäuse legen.

4 – led abdeckung, licht an

s

wichtig!

ein hinweis zur organisation: die unterste ebene ist der rahmen, die nächste darüber die taste. über der taste liegen die ebene mit dem led-gehäuse und der ordner mit dem inhalt der klassischen led-technik. die letzten beiden objekte (das led-gehäuse und der ordner mit der led-technik) werden am sinnvollsten in einen weiteren ordner verpackt.

ist das erledigt, müssen nur a) dieser ordner dupliziert, und b) die ebenen-effekte der abdeckung durch neue ersetzt werden.
so sieht die struktur im tutorial (s. download) aus: der ordner “led” enthält die led-abdeckung mit der led-technik, der darüber liegende ordner “licht”, das duplikat für das licht. beim späteren gebraucht muss nur der ordner “licht” ein- oder ausgeblendet werden.

nachdem wir das duplikat hergestellt haben, verpassen wir der abdeckung folgende eben-effekte:

wir starten mit einer kontur:

  • größe: 6px
  • position: innen
  • füllmethode: ineinanderkopieren
  • deckkraft: 31%
  • überdrucken
  • füllart: verlauf
    1. #1a405e ~ 0%
    2. #5ecafa ~ 28%
    3. #193e5e ~ 55%
    4. #64d5fb ~ 63%
    5. #193e5e ~ 83%
    6. #5bc4fa ~ 93%
    7. #102329 ~ 100%
  • art: reflektiert, an ebene ausrichten
  • winkel: 144°
  • skalieren: 71%

 

unter der eben erstellten kontur, legen wir eine weitere an:

  • größe: 6px
  • position: innen
  • füllmethode: hartes licht
  • deckkraft: 55%
  • überdrucken
  • füllart: verlauf
    1. #1b1b1b ~ 0%
    2. #ffffff ~ 100%
  • art: linear, an ebene ausrichten
  • winkel: 117°
  • skalieren: 83%

 

jetzt folgen ein schein nach innen …

  • füllmethode: negativ multiplizieren
  • deckkraft: 100%
  • farbe: #5cc5f4
  • technik: weicher
  • quelle: mitte
  • unterfüllen: 19%
  • größe: 103px

… und ein verlauf:

  • füllmethode: normal
  • deckkraft: 77%
  • verlauf:
    1. #52b3f9 ~ 0%
    2. #204d6b ~ 62%
    3. #203440 ~ 100%
  • art: radial, an ebene ausrichten
  • winkel: 155°
  • skalieren: 95%

 

eine musterüberlagerung …

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

und zum schluss noch einen schein nach aussen:

  • struktur:
    • füllmethode: normal
    • deckkraft: 18%
    • farbe: #67dbfb
  • elemente
    • technik: weicher
    • überfüllen: 0%
    • größe: 84px
  • qualität
    • kontur: gaußsche normalverteilung
    • glätten
    • bereich: 59%

 

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity

hifi-projekt – #08+ intermezzo

hifi-projekt – #08+ intermezzo

hifi-projekt – #08+ intermezzo

zur entspannung

es ist mal wieder an der zeit, eine kleine pause einzulegen und zu schauen, was mit tasten und displays schönes gebaut werden kann. sicher finden sie hier weitere anregungen, die zuvor besprochenen elemente zu variieren.

tapedeck-counter led

tapedeck-counter lcd

tapedeck-counter vfd

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity

hifi-projekt – #09 schrauben

hifi-projekt – #09 schrauben

hifi-projekt – #09 schrauben

bevor es los geht:

vorweg: grundkenntnisse in photoshop (cc) werden vorausgesetzt: hier das erstellen einer datei, das anlegen und handhaben von ebenen und von ebenen-stilen.

die hier besprochenen elemente (knöpfe, schalter, led, buchsen, anzeigen, schrauben, ect.), werden alle in einer größe dargestellt, die eine adäquate abbildungsqualität garantiert. da leds in der regel nicht die größe von volume-reglern haben, müssen diese elemente beim anordnen in einem projekt, natürlich im maßstab angepasst werden. 
von einem nachträglichen vergrößern rate ich ab, da das ergebnis unscharf wird. verkleinern bringt in einem begrenzten rahmen brauchbare ergebnisse. das direkte erstellen in der gewünschten größe ist im zweifelsfalle der richtige weg. die tutorials sind so angelegt, dass man die elemente auch in anderen größen nachvollziehen kann.

material zur lektion

‘schrauben.psd.zip’ enthält das fertige photoshop-cc-kompatible dokument zum experimentieren.

die schraube(n)

back to the roots. für das auf dieses folgende tutorial benötigen wir etwas ganz banales: schrauben. hier also wieder eine etwas einfachere lektion. gemeinsam haben alle schrauben den kopf und eine von zwei montagearten (versenkt, oder mit dem kopf auf der oberfläche). die schrauben unterscheiden sich in der art des sogenannten “antriebes”. sinnigerweise beginnen wir mit dem einfachsten antrieb, dem innensechskant (inbus, allen, hex), gefolgt vom torx-antrieb, der nur minimal schwieriger nachzubauen ist. der schlitz-antrieb ist in der konstruktion aufwendiger, als innsechskant und torx. für den schluss behalten wir uns den kreuzschlitz- (bzw. phillips-) antrieb in seiner sonderform “pozidirv” oder kurz “pz” vor. 

1 – inbus & torx

inbus und torx sind deshalb realativ einfach umzusetzen, weil die formen das antriebes von photoshop bereits fertig zur verfügung gestellt werden:

1 – kopf

der schraubenkopf besteht lediglich aus einem verlauf, ein bisschen glanz und einem schlagschatten.

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

  1. #c7c7c7 ~ 0%
  2. #757575 ~ 52%
  3. #c7c7c7 ~ 100%

ein bisschen glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 31%
  • winkel: -157°
  • abstand: 97px
  • größe: 38px
  • kontur: linear, glätten & umkehren 

und zum schluss der schlagschatten:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: 128°
  • abstand: 8px
  • größe: 16px

2 – inbus

den inbus-antrieb erstellen wir in einem arbeitsgang mit dem polygon-werkzeug. danach folgen die üblichen ebenen-effekte. zuvor legen wir eine neue ebene über dem schraubenkopf an.

weil es besser aussieht, wählen wir etwas mehr breite als höhe und legen die anzahl der seiten sinnigerweise auf 6 fest.

zuerst benötigt der antrieb eine kante:

  • struktur
    • stil: abgeflachte kante innen
    • technik: abrunden
    • tiefe: 709%, nach oben
    • größe: 8px
    • weichzeichnen: 10px
  • schattierung
    • winkel: -46°
    • höhe: -45°
    • kein globales licht
    • lichtermodus: 32%
    • tiefenmodus: 84%

danach etwas farbe:

  • füllmethode: normal
  • farbe: #5c5c5c

und einen schatten nach innen:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: -54°, kein globales licht
  • unterfüllen: 43px
  • größe: 49px

 

3 – torx

der torx-antrieb entsteht, in dem wir dem polygon-werkzeug zwei weitere paramter hinzufügen.

auch hier wählen wir das polygon etwas breiter als höher. zusätzlich wählen wir die option “stern” und runden dessen ecken ab. mit dem einziehen der seiten um 20% und dem glätten der einzüge entsteht ein respektabler torx-antrieb.

zuerst benötigen wir wieder eine kante …

  • struktur
    • stil: abgeflachte kante innen
    • technik: abrunden
    • tiefe: 261%, nach oben
    • größe: 9px
    • weichzeichnen: 14px
  • schattierung
    • winkel: -37°
    • höhe: -11°
    • kein globales licht
    • lichtermodus: 57%
    • tiefenmodus: 67%

… die wir mit einer kontur ergänzen:

  • größe: 4px
  • position: innen
  • füllmethode: normal
  • deckkraft: 25%, überdrucken
  • füllart: verlauf
    • #0b0b0b ~ 0%
    • #ffffff ~ 100%
  • art: linear, an ebene ausrichten
  • winkel: 126°
  • skalieren: 100% 

danach wieder etwas farbe:

  • füllmethode: normal
  • farbe: #666666

und den schatten nach innen:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: -54°, kein globales licht
  • unterfüllen: 43px
  • größe: 49px

 

4 – einbau

bisher haben wir einen flachen schraubenkopf, mit einem schlagschatten, den wir mit einem etwas größeren dunklen ring unter dem kopf in das gehäuse versenken.

die farbe wählen wir etwas heller, damit der schlagschatten der schraube noch erahnt werden kann.

  • füllmethode: normal
  • farbe: #313131

damit ist die schraube versenkt und die eine art des einbauens erledigt.

um die schraube mit einem halbrunden kopf auf der oberfläche zu haben, müssen wir den farbverlauf des schraubenkopfes ändern und die dunkle fläche unter dem kopf durch einen zentrierten schlagschatten ersetzen.

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

  1. #bababa ~ 67%
  2. #464646 ~ 100%

noch ein wenig glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 24%
  • winkel: 31°
  • abstand: 147px
  • größe: 62px
  • kontur: linear, glätten & umkehren 

 

und zum schluss der schlagschatten:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: 90°, globales licht verwenden
  • abstand: 0px
  • überfüllen: 9px
  • größe: 11px

 

2 – schlitz

auch wenn es auf den ersten blick nicht ersichtlich ist: der schlitz ist aufwendiger zu erstellen, als der inbus- oder torx-antrieb. das hat zwei ursachen: zum einen ist der schlitz naturgemäß ein rechteck, endet also nicht deckunsgleich mit dem schraubenkopf. zum anderen steht der schraubenkopf über, wenn der schlitz – optisch korrekt – mit einer kleinen kurve nach innen endet. es gilt also, sowohl den kopf, als auch den schlitz am ende nachzuarbeiten. 

1 – kopf

der schraubenkopf besteht wie bereits bekannt aus einem verlauf, ein bisschen glanz und einem schlagschatten.

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

  1. #c7c7c7 ~ 0%
  2. #757575 ~ 52%
  3. #c7c7c7 ~ 100%

ein bisschen glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 31%
  • winkel: -157°
  • abstand: 97px
  • größe: 38px
  • kontur: linear, glätten & umkehren 

und zum schluss der schlagschatten:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: 128°
  • abstand: 8px
  • größe: 16px

2 – modifikation

der besseren erkennbarkeit wegen der folgenden maßnahmen, verfügt dieser schraubenkopf bereits einen abgesenkten gehäuserand.

jetzt folgt die eingangs erwähnte anpassung des schraubenkopfes an den schlitzantrieb.
nachdem wir uns links und rechts der mitte eine hilfslinie für die breite des schlitzes angelegt haben, erzeugen wir mit dem “ankerpunkt-hinzufügen-werkzeug” an den markierten stellen jeweils einen ankerpunkt.

anschließend verschieben wie den mittleren ankerpunkt ein stück nach innen.

dann bewegen wir den kürzeren der beiden anfasser des neuen, linken ankerpunktes bei gedrückter …

  • wahl-taste (mac)
  • alt-taste (win)

… nach unten, so dass er auf der senkrechten hilfslinie zu liegen kommt. durch das zusätzliche drücken der wahl-/alt-tast hat sich nur der angeklickte anfasser bewegt. der andere anfasser hat seine position, und der schraubenkopf seine form beibehalten! 

das selbe erledigen wir anschließend mit dem neuen rechten ankerpunkt.

s

wichtig!

die selben 4 arbeitsschritte müssen nun noch am gegenüberliegenden ende des schraubenkopfes vorgenommen werden!

3 – schlitz

auf einer neuen ebene und mittig über dem schraubenkopf, legen wir ein schwarzes rechteck an.

mit dem “ankerpunkt-hinzufügen-werkzeug” erzeugen wir in der mitte der horizontalen einen weiteren – ankerpunkt. genau.

diesen müssen wir nun nur noch etwas nach unten ziehen (in diesem fall 4px), und schon haben wir die gewünschte rundung des schlitzes nach innen.

s

wichtig!

die selben 2 arbeitsschritte müssen nun noch am gegenüberliegenden ende des schlitzes vorgenommen werden!

mit den üblichen ebenen-effekten verpassen wir dem schlitz-antrieb die gewünschte optik:

zuerst benötigen wir wieder eine kante …

  • struktur
    • stil: abgeflachte kante innen
    • technik: abrunden
    • tiefe: 261%, nach oben
    • größe: 9px
    • weichzeichnen: 14px
  • schattierung
    • winkel: -37°
    • höhe: -11°
    • kein globales licht
    • lichtermodus: 70%
    • tiefenmodus: 67%

danach einen verlauf:

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

der verlauf hat folgende farbwerte:

  1. #525252 ~ 67%
  2. #c7c7c7 ~ 100%

und abschließend den schatten nach innen:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: -54°, kein globales licht
  • unterfüllen: 43px
  • größe: 49px

 

s

auch wichtig!

da der schraubenkopf seit arbeitsschritt 2 (modifikation) nicht mehr rund ist, können wir den allfälligen schatten nicht mit dem ebeneneffekt “schlagschatten” bewerkstelligen. sondern müssen unterhalb des schraubenkopfes eine neue ebene anlegen, dort einen schwarzen kreis mit schraubenkopf-durchmesser anlegen und diesen mit dem “gaußschen weichzeichner” bearbeiten. für dieses tutorial habe ich einen radius von 5px gewählt.

4 – einbau

bisher haben wir einen flachen schraubenkopf, den wir mit einem etwas größeren dunklen ring unter dem kopf in das gehäuse versenken.

die farbe wählen wir etwas heller, damit der schlagschatten der schraube noch erahnt werden kann.

  • füllmethode: normal
  • farbe: #313131

damit ist die schraube versenkt und die eine art des einbauens erledigt.

um die schraube mit einem halbrunden kopf auf der oberfläche zu haben, müssen wir den farbverlauf des schraubenkopfes ändern und die dunkle fläche unter dem kopf durch einen zentrierten schlagschatten ersetzen.

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

  1. #bababa ~ 67%
  2. #464646 ~ 100%

noch ein wenig glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 24%
  • winkel: 31°
  • abstand: 147px
  • größe: 62px
  • kontur: linear, glätten & umkehren 

 

s

auch wichtig!

da der schraubenkopf seit arbeitsschritt 2 (modifikation) nicht mehr rund ist, können wir den allfälligen schatten nicht mit dem ebeneneffekt “schlagschatten” bewerkstelligen. sondern müssen unterhalb des schraubenkopfes eine neue ebene anlegen, dort einen schwarzen kreis mit schraubenkopf-durchmesser anlegen und diesen mit dem “gaußschen weichzeichner” bearbeiten. für dieses tutorial habe ich einen radius von 5px gewählt.

3 – pozidriv

der nachbau des pozidriv ist zwar der aufwendigste der vier besprochenen varianten, gelingt aber bei entsprechender vorbereitung problemlos:

1 – kopf

der schraubenkopf besteht auch hier wieder aus einem verlauf, ein bisschen glanz und einem schlagschatten.

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

  1. #c7c7c7 ~ 0%
  2. #757575 ~ 52%
  3. #c7c7c7 ~ 100%

ein bisschen glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 31%
  • winkel: -157°
  • abstand: 97px
  • größe: 38px
  • kontur: linear, glätten & umkehren 

und zum schluss der schlagschatten:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: 128°
  • abstand: 8px
  • größe: 16px

2 – raster, plan & pfad

zuerst fertigen wir uns ein raster aus 5 x 5 feldern zu je 48px kantenlänge an. die unterschiedlichen farben dienen hier nur zur abgrenzung der späteren elemente (kreuzschlitz und dreieckprofil).
der pz-antrieb zeichnet sich erheblich einfacher, wenn wir zuerst die kreuzschlitz-komponente erstellen und dann die dreicksprofile ergänzen. nachdem wir die dreiecksprofile ergänzt haben, werden sie sehen, warum 🙂 

und das ist unser plan: mit dem “zeichenstift-werkzeug” werden wir – bei gedrückter shift- (bzw. umschalt)-taste alle 16 punkte ablaufen.  bei vier punkten (3, 7, 11 & 15), werden wir einen bogen anlegen. das alles ist einfacher, als es sich liest:

also dann: zeichenstift-werkzeug auswählen, shifttaste festhalten und an den folgenden 16 punkten mit der linken maustaste wie folgt verfahren:

  1. klicken
  2. klicken
  3. klicken, gedrückt halten und bis 4 ziehen.
  4. klicken
  5. klicken
  6. klicken
  7. klicken, gedrückt halten und bis 8 ziehen.
  8. klicken
  9. klicken
  10. klicken
  11. klicken, gedrückt halten und bis 12 ziehen.
  12. klicken
  13. klicken
  14. klicken
  15. klicken, gedrückt halten und bis 16 ziehen.
  16. klicken

mit einem letzten klick auf punkt 1, schließen wir den pfad. wenn sich der mauszeiger korrekt über punkt 1 befindet, wird an dessen spitze ein kleiner kreis sichbar.

der kreuzschlitz-antrieb ist damit schon einmal geschafft. wer es dabei belassen will, kann mit den ebenen-effekten für den antrieb fortfahren.
für die dreiecksprofile müssen wir unser raster um 6 elemente ergänzen und den pfad erweitern:

zuerst legen wir zwei kreise an: einen etwas größer als das mittlere feld und einen, der diagonal durch die vier äußersten felder läuft.

dann zeichnen wir die position des ersten dreiecksprofils an, kopieren es vier mal und transponieren die drei kopien jeweils vertikal und horizontal, um die restlichen profile zu erhalten.

tipp!

mit der breite der basis des dreieckes (auf dem inneren kreis), legen sie die größe dreiecksprofils fest. passen sie die positionen ihrem persönlichen geschmack an.

nun ist die vorlage fertig, um den vorhin erstellen pfad um die dreiecksprofile zu erweitern. beginnen wir bei dem ersten:

die linke hälfte der grafik zeigt die drei stellen, an denen wir mit dem “ankerpunkt-hinzufügen-werkzeug” neue ankerpunkte setzen werden.
die rechte hälfte zeigt den fertig erweiterten pfad mit den drei neuen punkten an. der mittlere punkt ist markiert und ziel der folgenden aktion:

den eben erwähnten mittleren punkt ziehen wir mittig zum äußeren kreis (linke bildhälfte) und verschieben die beiden kurzen anfasser (runde rote kreise) auf dem viertelkreis mit gedrückter

  • wahl-taste (mac)
  • alt-taste (win)

richtung zugehörigem ankerpunkt (rechte bildhälfte). so erhalten wir einen schönen übergang vom kreis in das dreieck.

tipp!

mit der höhe des dreieckes legen sie die länge des dreiecksprofils fest. passen sie auch hier die größe ihrem persönlichen geschmack an.

s

wichtig!

die letzten drei schritte (drei zusätzliche punkte einfügen, spitze herausziehen und winkel auf der kurve anpassen), müssen nun noch für die drei anderen viertelkreise durchgeführt werden, dann ist der pfad für den pz-antrieb fertig.

3 – schlitz

in diesem arbeitsschritt werden wir aus dem pz-pfad den fertigen antrieb erstellen. hierzu legen wir den pfad (oder besser noch: eine kopie des pfades) eine ebene über den schraubenkopf, setzen die pfadstärke auf 0px und die farben für kontur und fläche auf transparent.
anschließend füllen wir den entkernten pfad mit folgenden vier ebenen-effekten:

zu beginn wie immer eine kante …

  • struktur
    • stil: abgeflachte kante innen
    • technik: abrunden
    • tiefe: 261%, nach oben
    • größe: 9px
    • weichzeichnen: 14px
  • schattierung
    • winkel: -37°
    • höhe: -11°
    • kein globales licht
    • lichtermodus: 70%
    • tiefenmodus: 67%

und eine kontur:

  • größe: 4px
  • position: außen
  • füllmethode: normal
  • deckkraft: 25%, überdrucken
  • füllart: verlauf, an ebene ausrichten
  • winkel: 126°
  • skalierung: 100%

der verlauf hat folgende farbwerte:

  1. #0b0b0b ~ 0%
  2. #ffffff ~ 100%

danach einen schatten nach innen:

  • füllmethode: multiplizieren
  • farbe: #000000
  • deckkraft: 100%
  • winkel: -54°, kein globales licht
  • unterfüllen: 43px
  • größe: 49px

 

und etwas farbe, damit der verlauf des schraubenkopfes nicht durchscheint:

  • füllmethode: normal
  • farbe: #474747
  • deckkraft: 100%

 

4 – einbau

bisher haben wir einen flachen schraubenkopf, den wir mit einem etwas größeren dunklen ring unter dem kopf in das gehäuse versenken.

die farbe wählen wir etwas heller, damit der schlagschatten der schraube noch erahnt werden kann.

  • füllmethode: normal
  • farbe: #313131

damit ist die schraube versenkt und die eine art des einbauens erledigt.

um die schraube mit einem halbrunden kopf auf der oberfläche zu haben, müssen wir den farbverlauf des schraubenkopfes ändern und die dunkle fläche unter dem kopf durch einen zentrierten schlagschatten ersetzen.

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

  1. #bababa ~ 67%
  2. #464646 ~ 100%

noch ein wenig glanz:

  • füllmethode: negativ multiplizieren
  • farbe: #ffffff
  • deckkraft: 24%
  • winkel: 31°
  • abstand: 147px
  • größe: 62px
  • kontur: linear, glätten & umkehren 

 

/001 finden & folgen

be-sign.net
mainstraße 2
64390 erzhausen

telefon: +49 (0)6150 865902
mobil: +49 (0)151 50411034

info@be-sign.net
www.be-sign.net

         

/003 lernen

'spektrum-akademie' ist ein neues projekt der partner dr. erkens consulting, aurum-research & be-sign.net. es richtet sich an professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin sowie mit übergeordneten angeboten an mitarbeiter von unternehmen und dienstleistern anderer branchen. weitere infos folgen.

/004 wir sind hier ...

Title Address Description
be-sign.net
Mainstraße 2, 64390 Erzhausen, Deutschland

/006 kooperationen

/007 blog-posts

hifi-projekt – #01 aluminium

in dieser reihe wird es darum gehen, verschiedene elemente aus der welt der hifi-geräte in photoshop nachzustellen. der erste schritt ist das erstellen einer gebürsteten aluminium-platte, auf der wir später alle weiteren elemente anordnen können.

hifi-projekt – #02 knopf

der knopf … ein ganz grundlegendes bedienelement. zum beispiel um ein gerät ein- und auszuschalten. und so wird er gezeichnet:

hifi-projekt – #03 regler

der regler … ist etwas komplexer. in diesem projekt sitzen zwei drehregler übereinander, um das eingangssignal (links / rechts) für ein tapedeck aussteuern zu können. selbstredend beinhaltet das auch eine skala …

hifi-projekt – #04 leuchtdiode

die leuchtdiode … erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led mit zwei verschiedene einbauweisen und technologien erstellen.

hifi-projekt – #04+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente.

hifi-projekt – #05 buchse

die buchse – in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres.

hifi-projekt – #06 kippschalter

der kippschalter … erlaubt die auswahl verschiedener optionen. wir konstruieren uns eine exemplar mit drei verschiedenen stellungen.

hifi-projekt – #06+ intermezzo

nach den letzten, etwas umfangreicheren tutorials, hier wieder anregung zur kombinaton verschiedener elemente – mit preview zu einem kommenden tutorial.

hifi-projekt – #07 display

in diesem tutorial werden drei gängige display-typen besprochen: led-, lcd- und vf- (vacuum fluorescent) display.

hifi-projekt – #08 tasten

die taste … wird im gegensatz zum knopf nicht in das gehäuse hinein gedrückt oder herausgeholt, sondern nur angetippt, um einen schaltvorgang auszulösen.

/008 externe news aus design & it

© by be-sign.net – 'til the end of eternity