Tutorialbeschreibung

LED Anzeige für einfache Anwendungen

LED Anzeige für einfache Anwendungen

Ein einfaches Beispiel, wie man ein LED Matrix Display auf seine Homepage oder auf beispielsweise einen Flyer malen kann.

Das ganze ist mit wenigen Ebenen bereits realisiert. Eine Hintergrundebene mit 2 Rahmenebenen dienen als Grössendefinition. Anschliessend müssen 4 Ebenen erstellt werden um die Matrix der Punkte zu definieren. Die Stärke dieses Beispieles ist es, den Text einfach per Textwerkzeug von Photoshop zu ändern, ohne grafisch Hand anzulegen an den anderen Ebnen.

Um die Matix zu erstellen, habe ich einfach einen simplen Punkt gemalt und diesen mit dem Musterwerkzeug gespeichert. Anschliessend muss die Ebene nur mit dem Muster gefüllt werden und natürlich mit der Maske auf den LED Bereich begrenzt werden.

Mittels Multiplikation (bei schwarzem Hintergrund) können kann nun der Text als Matrix angezeigt werden. Das ganze geht auch mit hellen Hintergründen, Mustern, Farbverläufen, etc.

Ein schöner Effekt sind die Beleuchtungslämpchen, welche oben und unten ganz leicht in das Display glimmen.


LED Anzeige

Gern möchte ich Euch hier vorstellen, wie man mit sehr einfachen Mitteln und schnell einen LED Effekt für Homepages oder Flyer erstellen kann. LED's sind im Alltagsbereich kleine Lämpchen, die durch elektronische Ansteuerung Texte oder Grafiken anzeigen können.

Schritt 1:
Als erstes brauchen wir einen Hintergrund. Eine weisse Ebene wird erstellt. Mit einem einfachen Farbübergang.

HintergrundBilder

Schritt 2:
Damit der Hintergrund etwas metallischen Style bekommt, habe ich eine weitere Ebene erzeugt und mit dem Buntstift mit 1Pixel Breite einige Linien darauf gemalt. Diese Linien werden dann mit dem Filter: Weichzeichnen --> Bewegungsunschärfe --> 0° Horizontal verzerrt.

HintergrundeffektBilder


Schritt3:

Dies kann wahlweise wiederholt werden mit unterschiedlichen Distanzen.

MetalleffektBilder

Schritt 4:
Nun wird mit dem Auswahlwerkzeug auf einer neuen Ebene ein Rechteck erstellt. Es wird dann schwarz gefüllt. Dies wird der Bereich, in dem die Matrix sichtbar sein wird.

Schwarzes RechteckBilder

 

Schritt 5:
Nun kann über die Ebeneneigenschaften (Rechte Maustaste auf die Ebene) ein 3D Effekt hinzugefügt werden mit "Abgeflachte Kanten und Relief". Dort "Struktur" --> "Relief an allen Kanten" auswählen.

3D HintergrundBilder

Schritt 6:
Damit unsere Anzeige vertieft wirkt, kopiere ich die Ebene ein zweites Mal. Nun entferne ich den Ebneneffekt durch Drag & Drop des Effektes in den Papierkorb.

Schwarzer HintergrundBilder

Schritt 7:
Jetzt kommt der eigentliche Teil für die Matrix. Ich erstelle eine neue, weisse Ebene und male mit einem schwarzen Buntstift ein Pixel in die Mitte. Nun nehme ich das Auswahlwerkzeug und markiere das Pixel mit einem Abstand von rundherum 1 Pixel. Unter "Bearbeiten" --> "Muster festlegen" kann das Muster nun gespeichert werden.

MusterBilder

Schritt 8:
Eine neue Ebene wird erstellt. Das Füllwerkzeug auswählen. Oben anstelle "Füllung: Vordergrundfarbe" muss "Füllung: Füllen mit" eigestellt werden und das Muster ausgewählt werden, dass wir gerade erstellt haben. Damit wird nun die neue Ebene gefüllt.

Muster verwendenBilder
 

Schritt 9:
Mit gedrückter Ctrl Taste und Klick auf die schwarze Ebene aus Schritt 6 kann nun eine Auswahl festgelegt werden. Wahlweise auch etwas kleiner. Nun wird der unwichtige Teil mit dem Maskensymbol ausgeblendet.

AuswahlBilder

Schritt 10:
Eine neue Ebene erstellen. Genau gleich verfahren wie in Schritt 9, nur mit "Füllung: Vordergrundfarbe". Ich habe ein dunkles Grün gewählt für die inaktiven Punkte der Matrix. Die Ebene muss auf "Multiplizieren" gestellt werden.
Hinzu kommt eine Textebene mit vorzugsweise Schriftarten wie "Fixedsys" oder "Courier New". Dies in der Farbe für die aktiven Punkte der Matrix.

Text erstellenBilder

Schritt 11:
Die Ebene aus Schritt 9 wird nochmal kopiert. Jedoch nun mit der Ebeneneigenschaft "Multiplizieren". 

Aktive LED'sBilder

Schritt 12:
Nun können noch viele Effekte eingebunden werden. Ich werde hier einen Beleuchtungseffekt einbinden, der die ungleichmässige Hintergrundbeleuchtung simuliert. Hierzu erstelle ich 8 kleine, schwarze Kreise und füge ihnen im Ebnenstil einen "Schein nach aussen" hinzu. Ich verändere die gelbliche Farbe noch etwas ins Weiss.

Lampen erstellenBilder

Schritt 13
Dass gibt dem Hintergrund schon einen schönen Effekt. Die Ebene wird noch beschnitten mit der Maske und negativ Multipliziert. Wir können die aktuellen Ebenen alle sichtbar machen. Das Ergebnis für den Hintergrund sieht dann so aus:

HintergrundBilder

Schritt 14:
Wenn die Textebenen nun aktiviert werden, sieht man die LED Anzeige im Endstatus.

LED MatrixBilder

Ich habe nun verschiedene Text eingegeben und die Bilder jeweils im Gif Format gespeichert. Mit ImageReady ist es ein Kinderspiel die Bilder nun als Animation zusammenzufügen.

Das ganze kann man nun wunderschön ausschmücken. Alternativ mit anderen Hintergrundfarben, Effekten und Varianten.
Einige Beispiele:

HomeBilder
KontaktBilder
DownloadBilder

Viel Spass

Timo 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von rauchschwein
  • 10.06.2009 - 16:06

schönes tut,leider nicht ganz schlüssig

Portrait von APu700
  • 03.06.2009 - 11:54

Du hast nur ein Problem in dem Tut. Du verwendest ein anderes Muster als du aufnimmst. Deshalb klappt das auch bei einigen Leuten auch nicht.

Ich hatte mich strickt an die Anweisungen gehalten. Dann hatte ich allerdings schwarze Punkte auf einem weißen Hintergrund. Nach deinen Bildern sollte es aber umgekehrt sein.

Ich musste die LED Ebene noch einmal umkehren, damit es funktionierte

Auch waren einige Eben bei dir zu viel erstellt und nicht genutzt bzw. Störten. Du hättest vielleicht noch erwähnen sollen, dass man einige wieder löschen kann.

Der effekt ist allerdings toll und sonst recht gut erklärt;-)

Portrait von FamousStar
  • 10.05.2009 - 23:14

Das mit den Mustern versteh ich nicht ... bei mir sieht das erstellte Muster in Schritt 7 genauso aus wie bei dir und dann in Schritt 8 ist das ganz anders ...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.05.2009 - 16:25

perfekt, ^^, gut erklärt, hat auch super geklappt

Portrait von Schnubbel
  • 25.04.2009 - 10:24

Hallo, soweit recht gut erklärt, danke fürs Tutorial!
Lieben Gruß, Hilde

Portrait von CaroCat
  • 21.04.2009 - 10:07

Hallo
ich habe es versucht und hat sofort geklappt, sehr gute Beschreibenug ich baste erst seit 3 Wochen mit PS und war erstaunt das ich das hinbekommen habe, Danke für das Tut
CaroCat

Portrait von londix1
  • 13.04.2009 - 14:53

Funktioniert alles. Sehr gut erklärt.

Portrait von Gobbo
  • 29.03.2009 - 10:33

ich finde das Tut ganz ok.....danke

Portrait von Starkillaz
  • 27.03.2009 - 14:47

Kam mit dem Muster nicht so ganz klar. Wäre besser gewesen, wenn du die Schritte ein bisschen mehr erklären würdest. Sonst alles okay.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.03.2009 - 13:34

WIRKLICH KLASSE GEMACHT AUCH WEN MANCHMAL HIER UND DA EIN PAR FEILE MEHR GUT GETAN HETTEN

MFG

DR

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.03.2009 - 20:47

ich finde die ganze seite gut aber ich komme leider nicht mehr weiter



können sie mir bitte mailen ich würde mic sehr freuen wenns sie mir erklären wie man eine animation macht




v.erdem@hotmail.de

Portrait von GabyR
  • 22.02.2009 - 08:45

Hallo Timo,
ich habs mal nachgebastelt, mit dem muster kam ich nicht so ganz hin,
aber es hat prima geklappt, schade das ich es dir nicht zeigen kann.
aber super tut, werde ich bestimmt noch oft in anderen Varianten
machen.
liebe gruesse Gaby

Portrait von mausschieber
  • 16.02.2009 - 19:11

Super tut gut erklärt kann man gut ausbauen

Portrait von Badboy84
  • 07.02.2009 - 07:07

Wow einfach nur hammer

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.01.2009 - 19:27

schönes tut
funzt auch mit CS3

Portrait von tokyodrift199
  • 13.12.2008 - 20:19

0DANKE echt nicht schlecht und gut erklärt!!!
geil

Portrait von chritti_strom
  • 02.12.2008 - 17:23

den effekt find ich dufte. danke für das tut. ist eine idee, die ich ausbauen könnte...

Portrait von ligretto
  • 24.11.2008 - 15:03

ich stimme oakland vollkommen zu..
hatte mich zu beginn des tuts auf die ANIMATION gefreut

Portrait von KillerWolf
  • 23.11.2008 - 04:06

sehr schöne idee richtig gut d:-)

MFG

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2008 - 22:27

man hätte das ganz mit image ready ruhig ausführlicher beschreiben können denn so wird ein allgemeines verständnis für animationen gut vermittelt
also unter animation hätte ihc dieses tut icht gespeichert eher unter webdesign da es ja wirklich nur ums erstllen einer led anzeige geht, wobei auf die bewegung nich eingegangen wird

Mehr anzeigen

x
×
×