hifi-projekt – #01 aluminium

hifi-projekt – #01 aluminium

hifi-projekt – #01 aluminium

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

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

aluminium-oberfläche

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. das folgende bild zeigt das fertige ergebnis:

1 – arbeitsfläche

der erste schritt besteht im festlegen der arbeitsfläche und dem erstellen eines grau-verlaufes, der links oben eine linchtquelle simuliert. das ergebnis des ersten schrittes sehen sie rechts. die einzelnen schritte können sie unterhalb ein- und ausblenden.

1 – arbeitsfläche

die größe der arbeitsfläche hängt selbstredend davon ab, was später darauf untergebracht werden soll. auch die auflösung muss nicht zwingend so hoch sein. in dem fall diente diese fläche der darstellung z.b. eines kompletten tapedecks.

in diesem dokument legen wir eine erste ebene an und versehen sie mit einem ebenenstil

2 – ebenenstil verlaufsüberlagerung

meine vorgaben lauten:

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

es darf experimentiert werden 🙂

3 – verlauf

der farbwert für links lautet #ffffff (hexadezimal), bzw. 255, 255, 255 (rgb). der farbwert für rechts folgt in bild 4

4 – farbe

die farbe für ‘rechts unten’ soll ein mittleres grau sein. die farbwerte lauten: #808080 (hexadezimal), oder 128, 128, 128 (rgb).

auch hier kann/darf/soll experimentiert werden.

2 – aluminium-struktur

jetzt folgt die typische struktur einer gebürsteten aluminium-oberfläche. hierzu werden wir uns u.a. eines simplen rauschens und einer bewegungsunschärfe bedienen:

1 – neue ebene & rauschen

wir legen über dem verlauf eine neue ebene an und füllen diese mit der farbe #808080 (hexadezimal), bzw. 128, 128, 128 (rgb).
anschließend wählen wir unter den rauschfiltern den filter “rauschen hinzufügen” mit den optionen:

  • verteilung: gleichmäßig
  • option: monochromatisch

2 – bewegungsunschärfe

aus dem monochromatischen rauschen werden jetzt die typischen horizontalen strukturen einer hifi-frontplatte, wenn wir eine horizontale unschärfe bemühen:

  • winkel: 0° (= horizontal)
  • abstand: 65 pixel

auch hier gilt: mit anderen werten entstehen ergebnisse, die ihnen evtl. mehr zusagen. fühlen sie sich frei …

3 – kante

es liegt in der natur der bewegungsunschärfe, dass der effekt an den kanten um den gewählten abstand (s. bild 2) “ausläuft”. das korrigieren wir mit dem transformations-tool:

  • command + t (mac)
  • strg + t (win)

wichtig! wenn sie am rechten anfasser ziehen, wird die fläche proportional vergrößert. das zusätzliche drücken von shift, begrenzt die bewegung auf die horizontale.

4 – deckkraft

am ende dieses schrittes legen wir noch fest, wie stark der “alu-effekt” zu sehen sein soll. das regeln wir über die deckkraft der fläche.

dazu muss die fläche mit der alu-struktur ausgewählt sein. anzupassen ist dann der wert der box “Fläche”. in diesem beispiel habe ich 64% gewählt.

ein höherer wert macht den effekt stärker, ein niedrigere wert schwächer.

3 – finish

dieser letzte schritt ist optional und legt einen verlauf von oben (hell) nach unten (dunkel) über die frontplatte:

1 – leere ebene

hier müssen wir ein wenig tricksen. ein verlauf als ebenen-effekt kann nur angewendet werden, wenn die ebene einen inhalt ausweist.

also legen wir eine neue eben über die der alu-struktur und nennen sei zb. “finish”. anschließend öffnen wir den ebenen-effekt-dialog und dort den reiter “mischoptionen”. nachdem wir im erweiterten mischmodus den regler für die “flächendeckkraft” auf 0% gestellt haben, ist der inhalt der fläche verschwunden.
alle, in diesem dialog hinzugefügten ebenen-effekte, bleiben aber sichtbar.

2 – ebenenstil verlaufsüberlagerung

meine vorgaben lauten:

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

es darf experimentiert werden 🙂

3 – verlauf

der farbwert für links lautet #ffffff (hexadezimal), bzw. 255, 255, 255 (rgb). der farbwert für rechts folgt in bild 4

4 – farbe

die farbe für ‘rechts unten’ soll ein mittleres grau sein. die farbwerte lauten: #808080 (hexadezimal), oder 128, 128, 128 (rgb).

auch hier kann/darf/soll experimentiert werden.

/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 – #02 knopf

hifi-projekt – #02 knopf

hifi-projekt – #02 knopf

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

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

der knopf

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

1 – kreis macht kante

der erste schritt ist hier ein kreis, in dem wir mit einem winkel-verlauf die leicht abgeschrägte kante des knopfes nachstellen.

1 – basis

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.
da wir für den knopf mehrere ebenen übereinander legen werden, ist es hilfreich, die mitte des kreises mit hilfslinien zu markieren. dazu wählen wir die eben des kreieses aus und blenden mit:

  • command + t (mac)
  • strg + t (win)

das transformations-tool ein und ziehen eine horizontale und eine vertikale hilfslinie auf dessen seiten-mittelpunkte. mit der taste

  • esc (mac / win)

verlassen wir das transformations-tool wieder.

2 – ebenenstil verlaufsüberlagerung

meine vorgaben lauten:

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

auch hier darf experimentiert werden 🙂

3 – verlauf

dieser verlauf ist ein wenig komplexer. in meinem beispiel besteht er aus 13 positionen unterschiedlicher graustufen.
unter bild 4 habe ich meine farben aufgelistet, die ich der einfachheit halber nur in hexadezimalen werten angebe.

wer keinen nerv hat, den verlauf nachzubauen, kann auch das .zip-file zu beginn der lektion laden, und mit den werten experimentieren.

4 – farben und positionen

  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 – oberfläche

jetzt folgt die oberfläche des knopfes: ein weiterer winkelverlauf, um die dunklen und hellen verläufe zu zeigen und ein radialer verlauf, um eine gedrehte oberfläche zu simulieren:

1 – neue ebene mit verlaufsüberlagerung

etwas vorarbeit: mit den gedrückten tasten

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

und dem kreis-auswahlwerkzeug, ziehen wir aus der mitte der beiden hilfslinien (s. oben) 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%

auch hier darf experimentiert werden 🙂

2 – farben und positionen

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 – neue ebene mit verlaufsüberlagerung

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%

4 – farbe, helligkeit & kontrast

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.

3 – bohren und bewegen

um den schalter in die frontplatte drücken zu können, ist selbstredend noch eine bohrung nötig, die wir mit einem schwarzen kreis unter dem knopf andeuten. und da wir die leuchtdiode (led) erst später kennen lernen, benötigen wir einen hinweis, ob der schalter gedrückt ist, oder nicht:

1 – loch bohren

unter der eben des ersten kreises 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.

2 – off / on – zum ersten

zum letzten mal legen wir eine neue eben an. und zwar unter allen anderen ebenen. mit gehaltener

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

klicken wir mit der linken maustaste auf die zuerst erstelle ebene, um eine auswahl in jener größe zu erhalten. diese auswahl verschieben wir etwas nach rechts unten und füllen sie (auf der brandneuen untersten ebene) mit schwarz.

3 – off / on – zum zweiten

der schwarze verschobene kreis auf der untersten ebene wird nun vermittelst des “gausschen weichzeichners” mit einem radius von 28px zu einem schönen weichen schatten.

mit der mischoption “multiplizieren” und einer deckkraft von 75% liegt der schatten nun ganz natürlich auf der aluminium-front. wir erinnern uns: das licht kommt von links oben – das suggeriert jedenfalls der helligkeitsverlauf der aluminium-front.

4 – off / on – zum dritten

für eine letzte optische korrektur rufen wir nun noch einmal das transformations-tool auf und ziehen mit gehaltener

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

den schatten in eine “längliche” form.

die länge des schattens lässt auf die höhe des knopfes rückschließen.

ist der knopf gedrückt, wirft er keinen schatten. im ausgeschalteten zustand ragt der knopf aus dem gehäuse und wirft naturgemäß einen schatten.

/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 – #03 regler

hifi-projekt – #03 regler

hifi-projekt – #03 regler

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.

dieses tutorial baut auf dem vorhergehenden “knopf”-tutorial auf. kenntnisse über dessen ersten beiden arbeitsschritte werden der einfachheit halber als vorhanden vorausgesetzt.

material zur lektion

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

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: 

1 – das maß aller dinge

wir beginnen damit, eine reihe von hilfslinien anzulegen. eine kopie der hilfslinien für die grad-einteilung werden wir auch für die skala verwenden. es empfiehlt sich deshalb, den aufbau der beispiel-datei (s. oben) anzuschauen, um die folgenden schritte besser verstehen zu können:

1 – die 5°-einteilung

das anlegen der grad-einteilung ist einfacher, als es aussieht: zuerst zeichnen wir mit dem linienzeichner-werkzeug eine senkrechte linie durch den mittelpunkt des knopfes (hier sind die hilfslinien vom erstellen des knopfes aus der letzten lektion hilfreich).
anschließend duplizieren wir die ebene und drehen diese um 5° nach rechts. dazu verwenden wir die tasten:

  • command + t (mac)
  • strg + t (win)

geben in der optionsleiste am oberen rand

den wert 5° ein und bestätigen mit der eingabetaste. jetzt ist das erst gedrehte element angelegt und photoshop hat sich diese aktion gemerkt. im weiteren müssen wir diese aktion 32 mal mit folgender tastenkombination wiederholen:

  • shift + option +command + t (mac)
  • shift + alt + strg + t (win)

danach fassen wir die grad-linien in einer ebene zusammen.

2 – radiale hilfslinien planen

jetzt geht es an die radialen hilfslinien, derer wir vier benötigen:

  • a: ausrichtung der skalen-beschriftung
  • b: höhe der langen skalenstriche
  • c: höhe der kurzen skalenstriche
  • d: der innere startpunkt der skalenstriche

wie bereits beim erstellen der knopf-ebenen ziehen wir mit den gedrückten tasten

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

aus der mitte die kreise auf die gewünschten größen. jeder dieser kreise wird auf einer eigenen ebene angelegt. mit jedem der kreise wird wir folgt verfahren:

3 – radiale hilfslinien umsetzen

wie bereits beim erstellen der knopf-ebenen ziehen wir mit den gedrückten tasten

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

aus der mitte heraus die kreise auf die gewünschten größen. jeder dieser kreise wird auf einer eigenen ebene angelegt; mit jedem der kreise wird wir folgt verfahren:

(wir erinnern uns): ebenen-effekte kommen nur zur wirkung, wenn die ebene über inhalt verfügt. deshalb füllen wir die kreise mit eine farbe, stellen im ebenenstil-dialog den erweiterten mischmodus in den mischoptionen auf 0, so dass nur der folgende kontur-effekt sichtbar bleibt:

  • größe: 3px
  • position: innen
  • füllmethode: normal
  • deckkraft: 100%
  • farbe: schwarz

4 – aufräumen

unsere ebenen könnten nun z.b. wie folgt aussehen:

a: in diesem ordner befinden sich alle elemente für den eingangs vorausgesetzten knopf, den wir im letzten tutorial dieser reihe erstellt haben.

b: hier findet sich eine kopie unserer 5°-einteilung, die wir uns im nächsten kapitel “zurecht schnitzen” werden.

c: ganz unten liegt die eingangs erstellte 5°-einteilung und die vier radialen hilfslinien, die wir in den letzten beiden schritten erstellt haben.
den gesamten ordner (hier: ‘hilfslinien’ benannt) habe ich auf eine deckkraft von 10% reduziert, so dass die linien auch nur ganz schwach zu sehen sind.

2 – aus eins mach zwei

erst mal genug der hilfslinien. wechseln wir zur entspannung mal den schauplatz und kümmern uns um die drehknöpfe und deren markierungen:

1 – marker für regler L

vorausgesetzt, die ebenen des knopfes, den wir für L vorgesehen haben, befinden sich ordentlich in einem ordner verpackt, legen wir über den bestehenden ebenen eine neue an und nennen sie zb. marker.
ansclhießend markieren wir mit dem auswahlrechteck-werkzeug auf 12 uhr ein (genau) rechteck und füllen es mit einer farbe.

anschließend richten wir mit dem transformations-tool das rechteck auf die gewünschte position aus. in unserem beispiel auf die position der späteren “4”.

mit den ebenenstilen “schatten nach innen”

  • füllmethode: multiplizieren
  • deckkraft: 53%
  • winkel: -81%, globales licht: aus
  • abstand: 11
  • größe: 10

… und styling

und “verlaufsüberlagerung”

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

stellen wir den optischen eindruck her, die für einen lichteinfall von oben rechts entsteht.

2 – marker für regler R

für den kleineren regler R, duplizieren wir lediglich den ordner des aktuellen knopfes und achten darauf, dass er über dem bisherigen knopf-ordner liegt.
dann wählen wir den neuen ordner in der ebenen-liste aus und reduzieren die größe auf das gewünschte maß.

anschließend richten wir mit dem transformations-tool das marker-rechteck auf die gewünschte position aus. in unserem beispiel auf die position der späteren “6”.

auch hier mit den ebenenstilen “schatten nach innen”

  • füllmethode: multiplizieren
  • deckkraft: 59%
  • winkel: -48%, globales licht: aus
  • abstand: 6
  • größe: 10

… und styling

und “verlaufsüberlagerung”

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

stellen wir den optischen eindruck her, die für einen lichteinfall von oben rechts entsteht.

3 – hübsch machen

letzte runde: die skala wird zurechtgeschnitten und eine sinnstiftende beschriftung angebracht:

1 – skala innen beschneiden

folgende ebenen sollten jetzt im zugriff sein (s. 1.arbeitsschritt, 4. bild):

  • die ebene mit der kopie der skala in 100% deckkraft
  • die ebenen mit den radialen hilfslinien in 10% deckkraft

um die innenseite der skala zu beschneiden, wählen wir die ebene mit der skala aus und klicken mit gedrückter

  • command (mac)
  • strg (win)

-taste auf die innerste radiale hilfslinie, so dass diese mit einer gestrichelten linie markiert ist (s. bild oben). mit der tastenkombination

  • command + x (mac)
  • strg + x (win)

entfernen wir alles innerhalb der markierung.

2 – skala aussen beschneiden

aussen ist wie innen – nur anders:

analog zum letzten schritt, wählen wir wieder die ebene mit der skala aus und klicken mit gedrückter

  • command (mac)
  • strg (win)

-taste auf die äußerste radiale hilfslinie, so dass diese mit einer gestrichelten linie markiert ist. würden wir jetzt wie gehabt schneiden, wäre alles innerhalb der runden markierung verschwunden. um das zu verhindern, drehen wir die auswahl um, so dass dann alles ausserhalb(!) des kreises markiert ist (s. bild oben). das erreichen wir mit der tastenkombination

  • shift + command + i (mac)
  • shift + strg + i (win)

anschließend können wir – wie gehabt – mit den tasten

  • command + x (mac)
  • strg + x (win)
  • die äußeren teile der skala entfernen.

    3 – kurze skalenstriche

    erneut wählen wir die ebene mit der skala aus und klicken mit gedrückter

    • command (mac)
    • strg (win)

    -taste auf zweite radiale hilfslinie von innen. anschließend kehren wir die auswahl um

    • shift + command + i (mac)
    • shift + strg + i (win)

    und entfernen mit dem radiergummi bei all den linien, die wir kürzen wollen, die pixel ausserhalb der runden markierung. eleganterweise wirkt der radiergummi nur auf die pixel innerhalb der auswahl.

    die härte des radiergummes habe ich auf 92% festgelegt, um keine zu harte, bröselige kante zu erhalten:

    4 – schatten & beschriftung

    die schatten (für jeden regler einen), lege ich zwischen die knöpfe und über(!) die beschriftung, da wir die schatten in alter tradition auf “multiplizieren” stellen, würden sie unter der beschriftung für eine veränderung der schriftfarbe führen.
    größe, form und deckkraft der schatten ist eine frage des persönlichen geschmacks.

    auch bei der beschriftung sind der phanatsie keine grenzen gesetzt: “input”, “record level”, oder vielleicht einen “source-selector” mit nur drei optionen auf der skala (line, mic, aux) und dafür mit nur einem drehknopf?

    was die beschriftung angeht, habe ich mich hier für die schrift “Andalé Mono” von steve matteson entschieden. sie gehört zu den systemschriften von mac os x, ist aber auch sonst frei erhältlich.

    /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 – #04 leuchtdiode

    hifi-projekt – #04 leuchtdiode

    hifi-projekt – #04 leuchtdiode

    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

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

    die leuchtdiode

    sie erledigt seit jahrzehnten darstellende aufgaben als signalpegel-anzeige, indikator für schalterpositionen oder als tastenbeleuchtung. in diesem tutorial werden wir eine led konstruieren, die zwei verschiedene einbauweisen kennt, über zwei verschiedene technologien verfügt und verschiedene oberflächen zur verfügung stellt. nach dem tutorial dürfte es für sie ein leichtes sein, die farben zu ändern.

    1 – die technik

    wir beginnen mit dem aufbau der lichtspendenden technik. wie erwähnt, werden wir zwei unterschiedliche technologien bedienen, die über ordner/ebenen nach bedarf gewechselt werden können. zuerst wird es um die klassische led gehen, die aus zwei kontakten, einem led-kristall, einem reflektor und zwei drähten besteht. danach werden wir einen led-chip konstruieren, der platine, diverse kontakte, steuer-chip, led-kristall und diverse drähte beinhaltet. beide versionen sind in unserem modell von oben sichtbar, was die darstellung stark vereinfacht. an dieser stelle sei noch einmal darauf hingewiesen, dass vorausgesetzt wird, dass das anlegen von ebenen und das zeichnen und füllen einfacher formen in photoshop beherrscht wird.

    1 – klassisch – umsetzung

    ausschnitt, © grapetonix/wikipedia cc by 3.0

    die klassische led besteht aus zwei kontakten, wobei der eine kontakt eine kleine reflektor-schüssel enthält, in dem der led-kristall befestigt ist. zwischen dem led-kristall und den beiden kontakten besteht eine verbindung mit zwei bond-drähten.
    da wir die led in der draufsicht erstellen, ist die umsetzung realtiv simpel:

    von unten nach oben:

    • zwei rechtecke, das linke nit kreis (kontakte)
    • ein kreis mir einem verlaufsraster (reflektor)
    • ein schwarzes rechteck (kristall)
    • zwei schmale rechtecke (bond-drähte)

    2 – klassisch – struktur

    dieses bild zeigt die ebenen, die ich für die klassische technik angelegt habe. diese ebenen liegen in dem ordner “klassisch”, der seinerseits in einem ordner “technik” liegt. (s. download-link zu beginn des tutorials).

    die elemente sind entweder schwarz oder weiss angelegt. für die bond-drähte wurde ein dunkler gold-ton gewählt. schlussendlich sollen ja nur die konturen durchscheinen.

    was uns zu dem abschließenden punkt führt, den kompletten “klassik”-ordner in der deckkraft zu reduzieren. probieren sie einfach einen betrag aus, der ihnen realistisch erscheint.

    in diesem tutorial habe ich die deckkraft auf 20% gestellt.

    3 – modern – umsetzng

    produktabbildung, © adafruit.com

    diese version ist etwas komplexer, besteht aber letztendlich auch nur aus vier ebenen, die von unten nach oben wie folgt angelegt sind

    • ein kreis (platine)
    • elemente für die kontakte
    • zwei rechtekce für die cpu (groß) und den kristall (klein)
    • ein paar linien (bond-drähte)

    4 – modern – struktur

    dieses bild zeigt die ebenen, die ich für die chip-technik angelegt habe. der einfachheit halber, wurden alle elemente in schwarz erstellt und mit einer farb-überlagerung der original-abbildung angepasst. auch hier geht es letztendlich nur um die durchscheinenden konturen.

    alle ebenen des led-chips liegen im ordner “modern”, der sich ebenfalls im ordner “technik” befindet.
    nun kann bei bedarf zwischen beiden technologien umgeschaltet werden, in dem man den gewünschten ordner ein- und den jeweils anderen ausblendet.

    auch hier ist abschließend die deckkraft zu reduzieren. z.b. auf 20%

    abschließend bleibt zu erwähnen, dass der abgebildete chip sicher nicht in ein handelsübliches led-gehäuse passt – aber die optik macht mächtig was her!

    2 – das gehäuse

    nach dem die technik nun bereit steht, wird es darum gehen, ein gehäuse drum herum zu gestalten.
    heute gibt es leds in den unterschiedlichsten gehäuseformen. in diesem tutorial beschränken wir uns auf die klassische gehäuseform, wie sie im 1. abeitsschritt der vorhergehenden punktes zu sehen war.

    1 – boden

    zunächst legen wir den gehäuseboden unter die technik, damit die aluminium-struktur nicht mehr durchscheint.

    wir erinnern uns: die beiden lichtquellen stecken jeweils in den ordnern “klassisch” und “modern”, die zusammen wiederum in dem ordner “technik” liegen.

    unterhalb dieses ordners “technik”, legen wir nun mit dem “auswahlellipse-werkzeug” einen schwarzen kreis mit 200px durchmesser an und versehen diesen via ebeneneffekt mit der farbe #810000.

    s

    wichtig!

    an dieser stelle ein wichtiges detail: wie sie bei diesem (und den folgenden) arbeitsschritten bemerken werden, legen wir die objekte grundsätzlich schwarz an und lassen farben und verläufe mit ebeneneffekten entstehen.

    dabei ist darauf zu achten, dass die flächendeckkraft im erweiterten mischmodus unbedingt auf 0 zu setzen ist!

    das hat den praktischen grund, später ganz einfach die farben ändern zu können, ohne alle teile neu zeichnen zu müssen.

    2 – gehäuse

    für das eigentliche gehäuse legen wir oberhalb des “technik”-ordners eine neue eben an und zeichnen dort einen schwarzen kreis mit dem selben durchmesser, wie dem boden. dieser kreis bekommt einen radialen verlauf mit folgenden parametern:

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

    der verlauf enthält folgende farben:

    1. #ff5d4d ~ 0%
    2. #750000 ~ 12%
    3. #330101 ~ 27%
    4. #170000 ~ 35%

    der gesamte verlauf hat links eine deckkraft von 54% und rechts von 100%.

    in diesem schritt fügen wir noch einen schlagschatten hinzu, der sich nach dem einbau unter der fasssung zeigt:

    • füllmethode: multiplizieren
    • deckkraft: 56%
    • winkel: 140°, globales licht
    • abstand: 5
    • größe: 4

     

    3 – reflektion & optionale patina

    auf einer weiteren ebene oberhalb des gehäuses, erstellen wir erneut einen schwarzen kreis (mit boden-durchmesser) und versehen ihn mit einem verlauf, durch den das gehäuse mit ein wenig glanz versehen wird:

    • füllmethode: farbig abwedeln
    • deckkraft: 66%
    • linear, an ebene ausgerichtet
    • winkel: -45°
    • skalierung: 36%

    die farbwerte für den verlauf sind #ffffff (links) und #000000 (rechts). die deckkraft des verlaufes beträgt am linken ende 54% und am rechten ende 100%.

    dieser verlauf ist optional – eine spielerei – und verleiht dem gehäuse ein mattes finish.

    sie werden es sicher schon bemerkt haben: bis auf die folgenden zwei parameter, sind dieser verlauf und das zugrundliegende objekt, identisch mit dem vorhergehenden. es genügt also, die vorhergehende ebene zu duplizieren (der übersicht wegen umzubenennen) und folgende werte zu ändern:

    • füllmethode: aufhellen
    • deckkraft: 42%

    4 – aufräumen

    nun sollten wir folgende anordnung haben:

    • eine ebene mit einem (optionalen) matten finish
    • eine ebene mit einem glanz-verlauf
    • eine ebene mit der kunststoffkapsel
    • einen ordner “technik”, in dem sich wiederum die ordner “klassisch” und “modern” befinden
    • eine ebene mit dem boden

    diese 5 ebenen können wir nun in einen neuen ordner (z.b. gehäuse) packen und haben nun die led selbst komplett.

    die abgedunkelten bereiche sind nun gegenstand der letzten arbeitsschritte …

    3 – aufräumen, einbauen und einschalten!

    zuerst verschaffen wir uns einen überblick über die ordnerstruktur, dann entwerfen wir zwei verschiedene einbau-varianten (ein einfache angesenkte bohrung und ein verchromter rand) und schlußendlich nehmen wir die led in betrieb:

    1 – abgesenkte bohrung …

    unterhalb der jetzt fertigen led erstellen wir eine neue ebene und zeichnen einen schwarzen kreis, der etwas größer als der boden der led ist. in diesem fall 279px durchmesser. den nachfolgenden ebeneneffekt kennen sie schon vom ersten arbeitsschritt zum erstellen eines knopfes. recyceling!

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

    zur erinnerung noch einmal die farbfolge:
    #a1a1a1 (0%), #c6c6c6 (12%),
    #ffffff (27%), #1e1e1e (35%),
    #c6c6c6 (43%), #ffffff (46%),
    #a1a1a1 (50%), #c6c6c6 (54%),
    #303030 (68%), #ffffff (78%),
    #424242 (84%), #c6c6c6 (92%),
    #a1a1a1 (100%)

    über der ebene von eben, legen wir eine neue ebene an und zeichnen einen weiteren schwarzen kreis, der ein wenig kleiner ist, als der vorhergehende. in dem fall 265px durchmesser. dieser erhält einen einfachen, linearen verlauf:

    • füllmethode: negativ multiplizieren.
    • deckkraft: 66%
    • art: linear, an ebene ausgerichtet
    • winkel: -47°
    • skalierung: 100%

    2 – … oder chromring

    auch wenn das ergebnis komplett anders aussieht, basiert der chromring prinzipiell auf den selben elementen, wie die abgesenkte bohrung. lediglich die durchmesser und füllmethoden weichen ab:
    unterhalb der jetzt fertigen led, erstellen wir wieder eine neue ebene und zeichnen einen schwarzen kreis, der deutlich größer als der boden der led ist. in diesem fall 292px durchmesser.

    die werte für den verlauf und die farben entnehmen wir einfach dem unteren element der abgesenkten bohrung.

    dieses element enthält zusätzlich einen schlagschatten mit folgenden werten

    • füllmethode: multiplizieren
    • deckkraft: 32%
    • winkel: -90°, kein globales licht
    • größe: 8px

    erneut zeichnen wir über der ebene von eben, einen weiteren schwarzen kreis, der deutlich kleiner ist, als der vorhergehende. in dem fall 228px durchmesser. dieser erhält – wie bei der abgesenkten bohrung – einen einfachen, linearen verlauf:

    • füllmethode: ineinanderkopieren.
    • deckkraft: 100%
    • art: linear, an ebene ausgerichtet
    • winkel: -39°
    • skalierung: 26%

    3 – licht an!

    es beginnt wieder mit einem schwarzen kreis in bodendurchmesser, der über dem led-gehäuse liegt. der nachfolgende farbverlauf hat folgende werte:

    • deckkraft: 100%
    • art: radial, nicht (!) an ebene ausgerichtet
    • winkel: 90°
    • skalierung: 26%

    der farbverlauf ersteckt sich von #ff857c auf der linken seite, bis zu #ff0000 auf der rechten seite.

    das objekt bekommt einen weiteren effekt “schein nach außen”, mit folgenden werten::

    • füllmethode: negativ multiplizieren
    • deckkraft: 33%. farbe: #ff0000
    • technik: weicher, größe: 29px
    • kontur: vorgabe kegel, geglättet
    • bereich: 80, zufallswert: 71

    wir erstellen eine neue ebene über der vorhergehenden und legen einen kleinen schwarzen kreis mit einen durchmesser von 84px und dem effekt “schein nach innen”, mit folgenden werten an:

    • füllmethode: negativ multiplizieren
    • deckkraft: 63%. farbe: #ff0000
    • technik: weicher, größe: 213px
    • kontur: vorgabe runde stufen, geglättet
    • bereich: 50, zufallswert: 0

    jetzt fehlt nur noch ein “schein nach aussen”, mit folgenden werten:

    • füllmethode: negativ multiplizieren
    • deckkraft: 100%. farbe: #ff0000
    • technik: weicher, größe: 150px
    • kontur: vorgabe kegel, geglättet
    • bereich: 80, zufallswert: 71

     

    4 – andere farben

    um der led eine andere farbe zu geben, müssen nur die farbwerte in den effektebenen der oben markierten 4 elemente angepasst werden. zum beispiel nach blau:

    /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 – #04+ intermezzo

    hifi-projekt – #04+ intermezzo

    hifi-projekt – #04+ intermezzo

    zur entspannung

    nach den letzten, etwas umfangreicheren tutorials, hier eine anregung zur kombinaton verschiedener elemente. zb. könnten wir unseren power-knopf nun mit einer led versehen, um den schaltzustand noch besser sichtbar zu machen, als mit dem schlagschatten. der phantasie sind keine grenzen gesetzt.

    power off

    power on

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

    /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