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

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

hifi-projekt – #08+ intermezzo

hifi-projekt – #08+ intermezzo

zur entspannung

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

tapedeck-counter led

tapedeck-counter lcd

tapedeck-counter vfd

/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 – #09 schrauben

hifi-projekt – #09 schrauben

hifi-projekt – #09 schrauben

bevor es los geht:

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

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

material zur lektion

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

die schraube(n)

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

1 – inbus & torx

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

1 – kopf

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

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

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

ein bisschen glanz:

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

und zum schluss der schlagschatten:

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

2 – inbus

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

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

zuerst benötigt der antrieb eine kante:

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

danach etwas farbe:

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

und einen schatten nach innen:

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

 

3 – torx

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

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

zuerst benötigen wir wieder eine kante …

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

… die wir mit einer kontur ergänzen:

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

danach wieder etwas farbe:

  • füllmethode: normal
  • farbe: #666666

und den schatten nach innen:

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

 

4 – einbau

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

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

  • füllmethode: normal
  • farbe: #313131

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

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

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

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

noch ein wenig glanz:

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

 

und zum schluss der schlagschatten:

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

 

2 – schlitz

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

1 – kopf

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

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

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

ein bisschen glanz:

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

und zum schluss der schlagschatten:

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

2 – modifikation

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

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

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

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

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

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

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

s

wichtig!

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

3 – schlitz

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

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

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

s

wichtig!

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

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

zuerst benötigen wir wieder eine kante …

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

danach einen verlauf:

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

der verlauf hat folgende farbwerte:

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

und abschließend den schatten nach innen:

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

 

s

auch wichtig!

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

4 – einbau

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

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

  • füllmethode: normal
  • farbe: #313131

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

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

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

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

noch ein wenig glanz:

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

 

s

auch wichtig!

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

3 – pozidriv

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

1 – kopf

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

zuerst der verlauf:

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

der verlauf hat folgende farbwerte:

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

ein bisschen glanz:

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

und zum schluss der schlagschatten:

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

2 – raster, plan & pfad

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

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

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

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

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

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

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

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

tipp!

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

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

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

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

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

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

tipp!

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

s

wichtig!

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

3 – schlitz

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

zu beginn wie immer eine kante …

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

und eine kontur:

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

der verlauf hat folgende farbwerte:

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

danach einen schatten nach innen:

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

 

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

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

 

4 – einbau

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

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

  • füllmethode: normal
  • farbe: #313131

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

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

wir beginnen mit dem verlauf:

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

der verlauf hat folgende farbwerte:

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

noch ein wenig glanz:

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

 

/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