hifi-projekt – #05 buchse

hifi-projekt – #05 buchse

hifi-projekt – #05 buchse

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.

auch dieses tutorial basiert auf dem „knopf“-tutorial auf. dieses mal können wir auf fast das komplette tutorial zurück greifen – lediglich der schatten entfällt.
ausserdem werden wir in diesem tutorial nicht nur mit pixeln arbeiten, sondern auch einige arbeitsschritte mit vektor-zeichenwerkzeugen absolvieren.

material zur lektion

‚buchse.psd.zip‘ enthält zwei fertige photoshop-cc-kompatible dokumente zum experimentieren. zum einen das dokument mit der buchse und den weiteren elementen, zum anderen die vektor-grafik für den kopfhörer.

die buchse

– in diesem fall eine 6,5mm stereo-klinkenbuchse. nach dem umfangreichen leuchtdioden-tutorial mal wieder etwas einfacheres. dafür kombinieren wir das gleich mit einem alten bekannten: dem regler.

1 – back to the roots

sie werden es ahnen, wir beginnen wieder mit dem erstellen eines „knopfes“. anschließend bohren wir ein loch in den knopf und erhalten – eine buchse: 

1 – kante

am beginn steht ein kreis mit z.b. 400px 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 386px. 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 – bohrungen

unter dem knopf legen wir eine neue eben an und ziehen mit den gedrückten tasten

  • shift + option (mac)
  • shift + alt (win)

und dem kreis-auswahlwerkzeug, wieder aus der mitte der beiden hilfslinien einen größeren kreis auf (460px). diesen füllen wir mit schwarz.
im ebenenstil-dialog können wir nun noch die füllmethode auf „multiplizieren“ und die deckkraft auf z.b. 86% stellen. jetzt scheint das aluminium ein ganz klein wenig durch und macht die bohrung etwas realistischer

abschließend legen wir eine kopie der „bohrnung“ unter die selbe, vergrößern sie mit o.g. tasten auf 473px durchmesser und reduzieren die deckkraft auf 60%. jetzt hat die bohrung eine kleine absenkung und vermittelt materialtiefe.

nun haben wir wieder den kompf aus dem zweiten tutorial vor uns. um daraus ein buchse herzustellen, müssen wir die beiden schritte für die bohrung mit kleineren durchmessern und auf neuen ebenen überhalb des knopfes wiederholen:

die bohrung selbst bekommt einen durchmesser von 301px. im ebenenstil-dialog stellen wir die füllmethode wieder auf „multiplizieren“ und die deckkraft diesmal auf 100%.
abschließend legen wir eine kopie der „bohrnung“ unter die selbe, vergrößern sie mit o.g. tasten auf 318px durchmesser und reduzieren die deckkraft auf 62%. jetzt hat auch diese bohrung eine kleine absenkung und vermittelt materialtiefe.

die buchse ist nun fertig. im nächsten schritt folgende die elemente drum herum.

2 – das kopfhörer-symbol

an dieser stelle werden wir eine zweite datei anlegen, umgenug platz für den entwurf des kopfhörer-icons zu haben. bei der gelegenheit werden wir uns mit den vektor-zeichenwerkzeugen in photoshop beschäftigen. diese sind zwar nicht so ausgefeilt, wie in illustrator oder indesign, reichen aber für die wichtigsten arbeiten aus.

1 – arbeitsfläche & hilfslinien

unsere neue arbeitsfläche misst 1048 x 1048 px, auf der wir folgende hilfslinien anlegen:

  • horizontal durch die mitte der arbeitsfläche
  • vertikal durch die mitte der arbeitsfläche
  • horizontal 380px über der mittleren hilfslinie
  • horizontal 430px unter der mittleren hilfslinie
  • vertikal 380px links von der mittleren hilfslinie
  • vertikal 380px rechts von der mittleren hilfslinie

liegen alle hilfslinien korrekt, hat das feld …

  • a: 144 x 144 px
  • b: 380 x 380px und
  • c: 380 x 430px

im oberen bereich (a) wird der bügel des kopfhörers platz finden, im unteren bereich (b) die lautsprecher.

2 – bügel

bevor wir mit dem zeichnen beginnen, müssen wir das zeichenstift-werkzeug konfigurieren:

  • fläche: transparent
  • kontur: schwarz
  • dicke: 112px
  • linien-einstellungen:
    • stil: durchgehende linie
    • ausrichtung: mitte
    • enden: abgeflacht
    • ecken: gehrung

zeichnen werden wir mit durchgehend gedrückter umschalt (shift)-taste. das hat den vorteil, dass der zeichenstift auf ein vielfaches von 45° beschränkt wird. somit liegen die positionen 1und 2 & 4 und 5 exakt auf der selben vertikalen position. man hat sich schnell mal um ein oder zwei pixel verklickt und das sieht dann nicht schön aus, bzw. muss korrigiert werden.

also: umschalttaste drücken und festhalten. danach mit dem zeichenstift-werkzeug wie folgt verfahren:
mit der liniken maustaste …

  • … an position 1 klicken und loslassen
  • … an position 2 klicken und loslassen
  • … an position 3 klicken und bei weiterhin gedrückt gehaltender maustaste die maus horizontal nach rechts bewegen, bis die rote „grifflinie“ auf die rechte vertikale hilfsline trifft. danach kann die maustaste wieder losgelassen werden.
  • … an position 4 klicken und loslassen
  • … an position 5 klicken und loslassen
  • … umschalttaste loslassen

fertig ist der kopfhörer-bügel.

3 – lautsprecher

dieses mal konfigurieren wir das „abgeundetes-rechteck-werkzeug“ wie folgt:

  • fläche: schwarz
  • kontur: transparent
  • dicke: 0px
  • raduis: 92px

und zeichnen damit eine „pille“ mit einer breite von 165px und einer höhe von 430px. diese positionieren wir dann so, dass deren vertikale mitte deckungsgleich mit der linken aussenkante des bügels, und deren unteres ende parallel zum unteren ende des bügels verläuft.

in der beispielgrafik (ganz oben in der spalte) ist der bügel transparenter dargestellt, um die lage des kopfhörer-elementes besser sichtbar machen zu können.

ist das linke kopfhörer-element soweit fertig, können wir die ebene duplizieren und am rechten ende des bügels ebenfalls positionieren.

4 – ohrpolster

ebenfalls mit dem „abgerundetes-rechteck-werkzeug“ zeichnen wir eine weitere „pille“ mit einer breite von 78px und einer höhe von 430px. diese positionieren wir dann frei nach innen versetzt neben dem linken kopfhörer, mit dem unteren ende parallel zum unteren ende des bügels.

im beispielbeträgt der abstand zwischen bügel und polster 40px.

das linke polster verdoppeln wir dan wie gewohnt, und positionieren es passend auf der rechten seite des kopfhörers.

fertig ist der kopfhörer.

3 – endmontage

hier kommen alle teile zusammen: die buchse, das kopfhörer-symbol, ein regler und eine linie:

1 – kopfhörer vorbereiten …

so könnten die ebenen unserer kopfhörer-datei aussehen (bzw. so sehen die ebenen der kopfhörer-datei im download dieses tutorials aus).

um den kopfhörer zu übernehmen, ist ein wenig vorarbeit nötig: bevor wir die einzelnen ebenen zu einer verbinden, müssen diese „gerastert“ (also in eine pixelgrafik umgerechnet) werden, weil photoshop sonst die einzelnen vektor-elemente zu einem neuen element verbindet, das keinerlei ähnlichkeit mit dem kopfhörer mehr hat.

dazu wählen wir (wie in der grafik oben) die benötigten ebenen aus (hintergrund-ebenen bitte aussen vor lassen) und holen mit der rechten maustaste das kontextmenü auf den bildschirm. aus diesem wählen wir dann die option „ebenen rastern“ aus.

mit der tastenkombination

  • command e (mac)
  • befehls e (win)

reduzieren wir dann die gerasterten ebenen auf eine und mit den tastenkombinationen für alles auswählen und kopieren

  • command a, command c (mac)
  • befehl a, befehl c (win)

wählen wir das so entstandene kopfhörer-symbol für die weiterverarbeitung aus.

2 – … und einbauen

mit der tastenkombination

  • command v (mac)
  • befehls v (win)

platzieren wir den kopfhörer auf der arbeitsfläche der buchse und parken ihn mit hilfe des transformationstools

  • command t (mac)
  • befehls t (win)

in der gewünschten größe an eine passende stelle.

3 – regler vorbereiten …

um den regler zu übernehmen, öffnen wir die tutorial-datei zum regler und nehmen folgende ebenen-auswahl vor:

  • im ordner „legende“ alle ebenen ausser der grad-einteilung und dem ordner „beschriftung skala“ ausblenden
  • im ordner „schatten“, den schatten des unteren reglers ausblenden. wir verwenden zwar den unteren regler, übernehmen aber den schatten des kleineren reglers, weil dieser regler auch deutlich kleiner ausfallen soll, als zb. der signal-eingangsregler.
  • den ordner „oben (R)“ ausblenden

nun wählen wir die ordner „unten (L)“, „schatten“ und „legende“ aus und reduzieren diese mit der tastenkombination

  • command e (mac)
  • befehls e (win)

auf eine ebene. mit den tastenkombinationen für alles auswählen und kopieren

  • command a, command c (mac)
  • befehl a, befehl c (win)

wählen wir den fertigen regler für die weiterverarbeitung aus.

4 – … und einbauen

mit der tastenkombination

  • command v (mac)
  • befehls v (win)

platzieren wir auch den regler auf der arbeitsfläche der buchse und parken ihn mit hilfe des transformationstools

  • command t (mac)
  • befehls t (win)

in der gewünschten größe an eine passende stelle.

abschließend bringen wir noch eine linie an, die die verbindung zwischen dem regler und der buchse visualisiert. fertig ist unsere kopfhörerbuchse.

/000 be-sign.net-newsticker

partner

  • die illustratorin marina jansohn bereichert das partner-netzwerk von be-sign.net, wenn es um arbeiten jenseits von fotobearbeitung und layout geht.
  • ebenfalls neu im partner-netzwerk ist stefan klose (m.sc. informatik). kurze reaktionszeiten und flexibel einsetzbare individuelle lösungen für ihre websites, zeichnen seine arbeit aus.
  • art director & animator philip von borries, ist der richtige partner für klares und charaktervolles, animiertes kommunikationsdesign.

mitteilungen

  • spektrum akademie: be-sign.net ist gründungsmitglied der spektrum akademie, einem fort- und weiterbildungsangebot für professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin (pressemitteilung).
  • marketing-design-strategie: be-sign.net setzt in kooperation mit der dr. erkens consulting group erfolgreich individuelle web- & print-basierte kommunikationsstrategien für unternehmen und organisationen aus den bereichen medizin, pharma, medizintechnik und naturwissenschaften um (pressemitteilung).

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

/006 kooperationen

/007 blog-posts

id-color – schwarz

schwarz ist nicht gleich schwarz – und schon garnicht, wenn gedruckt werden soll. warum das so ist und welche herausforderungen und kreativen möglichkeiten sich hier beiten, erklärt dieses tutorial.

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.

/008 externe news aus design & it

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

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.

/000 be-sign.net-newsticker

partner

  • die illustratorin marina jansohn bereichert das partner-netzwerk von be-sign.net, wenn es um arbeiten jenseits von fotobearbeitung und layout geht.
  • ebenfalls neu im partner-netzwerk ist stefan klose (m.sc. informatik). kurze reaktionszeiten und flexibel einsetzbare individuelle lösungen für ihre websites, zeichnen seine arbeit aus.
  • art director & animator philip von borries, ist der richtige partner für klares und charaktervolles, animiertes kommunikationsdesign.

mitteilungen

  • spektrum akademie: be-sign.net ist gründungsmitglied der spektrum akademie, einem fort- und weiterbildungsangebot für professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin (pressemitteilung).
  • marketing-design-strategie: be-sign.net setzt in kooperation mit der dr. erkens consulting group erfolgreich individuelle web- & print-basierte kommunikationsstrategien für unternehmen und organisationen aus den bereichen medizin, pharma, medizintechnik und naturwissenschaften um (pressemitteilung).

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

/006 kooperationen

/007 blog-posts

id-color – schwarz

schwarz ist nicht gleich schwarz – und schon garnicht, wenn gedruckt werden soll. warum das so ist und welche herausforderungen und kreativen möglichkeiten sich hier beiten, erklärt dieses tutorial.

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.

/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

/000 be-sign.net-newsticker

partner

  • die illustratorin marina jansohn bereichert das partner-netzwerk von be-sign.net, wenn es um arbeiten jenseits von fotobearbeitung und layout geht.
  • ebenfalls neu im partner-netzwerk ist stefan klose (m.sc. informatik). kurze reaktionszeiten und flexibel einsetzbare individuelle lösungen für ihre websites, zeichnen seine arbeit aus.
  • art director & animator philip von borries, ist der richtige partner für klares und charaktervolles, animiertes kommunikationsdesign.

mitteilungen

  • spektrum akademie: be-sign.net ist gründungsmitglied der spektrum akademie, einem fort- und weiterbildungsangebot für professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin (pressemitteilung).
  • marketing-design-strategie: be-sign.net setzt in kooperation mit der dr. erkens consulting group erfolgreich individuelle web- & print-basierte kommunikationsstrategien für unternehmen und organisationen aus den bereichen medizin, pharma, medizintechnik und naturwissenschaften um (pressemitteilung).

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

/006 kooperationen

/007 blog-posts

id-color – schwarz

schwarz ist nicht gleich schwarz – und schon garnicht, wenn gedruckt werden soll. warum das so ist und welche herausforderungen und kreativen möglichkeiten sich hier beiten, erklärt dieses tutorial.

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.

/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 lcd-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 zweck 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 70ern 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 70ern 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 segmente 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 links. 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)

/000 be-sign.net-newsticker

partner

  • die illustratorin marina jansohn bereichert das partner-netzwerk von be-sign.net, wenn es um arbeiten jenseits von fotobearbeitung und layout geht.
  • ebenfalls neu im partner-netzwerk ist stefan klose (m.sc. informatik). kurze reaktionszeiten und flexibel einsetzbare individuelle lösungen für ihre websites, zeichnen seine arbeit aus.
  • art director & animator philip von borries, ist der richtige partner für klares und charaktervolles, animiertes kommunikationsdesign.

mitteilungen

  • spektrum akademie: be-sign.net ist gründungsmitglied der spektrum akademie, einem fort- und weiterbildungsangebot für professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin (pressemitteilung).
  • marketing-design-strategie: be-sign.net setzt in kooperation mit der dr. erkens consulting group erfolgreich individuelle web- & print-basierte kommunikationsstrategien für unternehmen und organisationen aus den bereichen medizin, pharma, medizintechnik und naturwissenschaften um (pressemitteilung).

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

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

id-color – schwarz

schwarz ist nicht gleich schwarz – und schon garnicht, wenn gedruckt werden soll. warum das so ist und welche herausforderungen und kreativen möglichkeiten sich hier beiten, erklärt dieses tutorial.

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.

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

 

/000 be-sign.net-newsticker

partner

  • die illustratorin marina jansohn bereichert das partner-netzwerk von be-sign.net, wenn es um arbeiten jenseits von fotobearbeitung und layout geht.
  • ebenfalls neu im partner-netzwerk ist stefan klose (m.sc. informatik). kurze reaktionszeiten und flexibel einsetzbare individuelle lösungen für ihre websites, zeichnen seine arbeit aus.
  • art director & animator philip von borries, ist der richtige partner für klares und charaktervolles, animiertes kommunikationsdesign.

mitteilungen

  • spektrum akademie: be-sign.net ist gründungsmitglied der spektrum akademie, einem fort- und weiterbildungsangebot für professionals aus pharma, otc, medizintechnik, nahrungsergänzung, healthcare, life sciences und medizin (pressemitteilung).
  • marketing-design-strategie: be-sign.net setzt in kooperation mit der dr. erkens consulting group erfolgreich individuelle web- & print-basierte kommunikationsstrategien für unternehmen und organisationen aus den bereichen medizin, pharma, medizintechnik und naturwissenschaften um (pressemitteilung).

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

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

id-color – schwarz

schwarz ist nicht gleich schwarz – und schon garnicht, wenn gedruckt werden soll. warum das so ist und welche herausforderungen und kreativen möglichkeiten sich hier beiten, erklärt dieses tutorial.

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.

/008 externe news aus design & it

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