Brushes sind in Photoshop ein mächtiges und vielseitiges Tool. In diesem Tutorial zeige ich wie man selber Photoshop Brushes erstellt und welche Verwendungszwecke diese bei der digitalen Bearbeitung und Illustration haben können.

Der eigene Phtotoshop Pinsel

Um einen Photoshop Brush oder besser gesagt Pinsel zu erstellen, geht man wie folgt vor:

1. Nachdem man sich seine Überlegungen gemacht hat, welch Pinsel man genau benötigt, erstellt man ein neues Dokument in Photoshop. In diesem Fall habe ich ein 250px x 250px Dokument für Web und Screen erstellt (72 dpi). Gründsätzlich können die Brushes in Photoshop jede grösse haben.

2. In dem neuen Dokument erstellt man dann die Form oder Fläche die man gerne als Pinselvorgabe speichern möchte, auch Bilder etc. kann man als Pinselvorgabe speichern, sofern sie vorher in Graufstufen umgewandelt worden sind.

3. Um nun eine neue Pinselvorgabe zu erstellen, markiert man den benötigten Bereich mit dem Auswahl Tool (Erstellte Formen und Pfade müssen vorher gerastert werden!) und geht dann auf Bearbeiten -> Pinselvorgabe erstellen.

4. Als nächstes erscheint ein Dialogfeld, in welches man einen Namen für den erstellten Pinsel eingeben muss, in diesem Fall nenne ich ihn Pinsel1.

5. Der erstellte Pinsel ist dann gespeichert und kann genutzt werden.

Phtotoshop Brushes einstellen und benutzen

In einem neuen Dokument kann man mit dem Pinselwerkzeug dann auf diese Pinselvorgaben zugreifen. Dazu klickt man entweder mit dem Pinselwerkzeug rechtsklick in das Dokument oder nimmt direkt die Pinseleinstellungen (F5 Shortcut). In der Liste befindet sich dann an letzter Stelle der zuletzt erstellte Pinsel. Wählt man diesen an kann man mit weiteren Einstellungen den Pinsel noch weiter anpassen und Einstellen.

In weiteren Photoshop Tutorials zu Brushes in Photoshop werde ich dann genauer die Möglichkeiten und Einstellungen aufzeigen.

The post Photoshop brushes selber erstellen – Tutorial appeared first on Lichtreiter.

Immer überladener, mehr realistische Grafiken und Designs. Eine Textur hier, nochmal eine Textur da. In den letzen Jahren hatte man immer mehr das Gefühl, die Welt des Gestaltens von Webseiten und Apps verkommt mehr und mehr zu einer Nachahmung und Annäherung der echten Welt.

Back to the ROOTS!

Dies scheint nun immer mehr zu brechen, back to the roots. Minimalistisch und anpassbar auf nahezu jedes mögliche Format und Auflösung eines Displays ist die Devise. Dies ist auch nötig, wenn man beachtet wie rasant die Entwicklung neuer Tablets, wie dem Ipad von Apple oder Galaxy Tab von Samsung voranschreitet.
Es wird in Zukunft in unserer Gesellschaft immer mehr unterschiedliche Displays mit allen möglichen Auflösungen geben, insofern ist es auch immer wichtiger und nachvollziehbar mit wenig Texturen oder Grafiken Webseiten oder Apps zu gestalten. HTML5 und CSS3 bieten in Zukunft zwar mehr und mehr Möglichkeiten, Grafiken gegen direkte Befehle auszutauschen, jedoch sollte man eine Seite immer so minimalistisch gestalten wie es geht.

Das minimalistische im Design und der Gestaltung betrifft nicht nur Webseiten, auch Microsoft zeigt wo der Weg hingehen wird. Das an Tablets orientierte neue Betriebsystem Windows 8 zeigt sich in einem minimalistischen Design. Wenn man die Vorgänger des aktuellsten Systems von Microsoft betrachtet, ein echter Fortschritt in der Gestaltung. Meines erachtens waren Vista und Windows 7 in total überladen, mit Aero effekt etc. pp….

Bei Google ist schon lange zu beobachten, das gutes Design nicht aus zahlreichen Grafiken und Texturen bestehen muss. Youtube etc. waren meist sehr abgespekt, mit viel Weißraum. Im Hintergrund eine dezente Noise Textur, von vielen Seiten im Stil kopiert oder übernommen.
Nun gibt es wieder ein neues Design für Youtube, besser, minimalistischer, aufgeräumter. Die Videos im Blickpunkt, der dreckige, nervige schwarze Balken weg. Auffallend ist die Entfernung von Texturen und Verläufen die vorher genutzt wurden, man merkt das Google alle Seine Dienste mehr und mehr aufeinander abstimmt und anpasst.

Responsive IST die Zukunft

Responsive Webdesign IST schon die Zukunft, Seiten die sich je nach Fenstergröße anpassen und Skalieren. Erreicht werden solche Designs durch sogenannte Breaktpoints im Stylesheet mithilfe von CSS3. Wie genau das möglich ist, werde ich in einem Tutorial noch spezifisch erklären.

The post Minimalismus? Bitte! appeared first on Lichtreiter.

Vorab sei gesagt, dass das Ergebnis auch mit Illustrator besser zu realisieren ist, da es die elegantere Methode ist, Icons oder auch Logos zu erstellen. Da die Icons in diesem Fall vorrangig im Web genutzt werden sollen, reicht uns hier Photoshop. Zudem besitzt nicht jeder gleich alle möglichen Programme von Adobe.

Schritt eins – Die Idee und Skizzen

Wie sooft bei der Gestaltung besteht der erste Schritt darin, einige Skizzen anzufertigen und sich Gedanken zu machen, was genau gebraucht wird. Dies kann man wie ich es meist tue, auf die alte analoge Art machen, aber auch Digital mit einem Tablet. Hierbei ist es nur wichtig, dass man sich vorher genug Überlegungen gemacht hat.

Startschuss – Anfang in Photoshop

Zunächst wird in Photoshop die Silhouette der Skizze mit dem Pfadwerkzeug nachgezeichnet.

Details und Objekte

Nach der groben Umrisszeichnung wird dann mit dem Zeichnen der Details und Objekte angefangen. Die Genauigkeit spielt zunächst noch keine Rolle, da wir nach dem nachzeichnen mit dem Pfadwerkzeug ohnehin noch einmal mit dem Pfadkorrekturwerkzeug überprüfen, ob alles genau passt.

Farbauswahl

Hat man die Pfade erstellt geht es darum geeignete Farben auszuwählen. Da wir hier mit verschiedenen Ebenen so arbeiten, dass immer alles änderbar ist, kann man die Farben auch immer später noch an seine Wünsche anpassen.

Effekte zum Schluss

Welche Effekte man zum Schluss hinzufügen möchte, hängt natürlich von den eigenen Vorlieben und dem Verwendungszweck ab. In diesem Photoshop Tutorial habe ich einige Verlaufe und schatten hinzugefügt, sowie einen Glanzeffekt um mehr Plastizität zu erzeugen.

The post Photoshop Tutorial – Icons erstellen appeared first on Lichtreiter.

Immer schneller. Immer mehr. Die Gesellschaft entwickelt sich, alles was vorher war muss in Zukunft schneller und besser funktionieren. Die Menschheit agiert dabei schon immer wie ein Kompressor. Informationen und Wissen einer vorangegangenen Generation werden schneller verarbeitet, aufbereitet und sollen zu einen schnelleren Ziel führen. Diese Prozedur wiederholt sich stetig, so entwickelt sich die Menschheit immer schneller immer weiter.

Druck und Zwänge

Aus dieser Entwicklung entstehen nicht nur neue Produkte, sondern auch mehr Druck und mehr Zwänge, Dinge zu machen die man nicht machen möchte. Aus diesen Überlegung entstanden die Zeichnungen in dem Buch ZWANG. Nur mit Bleistift auf Papier sind viele unterschiedliche Motive zu sehen, bei dem der Betrachter nicht immer genau weis, was genau er sieht. Auch geht es darum den Charakter eines Kompressors in den Zeichnungen zu verdeutlichen. Das Gefährliche, das Fiese und auch Dynamische. Ein Kompressor zieht Luft an und gibt sie mit hoher Geschwindigkeit wieder frei.

The post ZWANG appeared first on Lichtreiter.

Die Änderung bewirkt eine einfachere Struktur innerhalb des Quellcodes. Das bedeutet, dass Text in einer section steht und eine Navigation im nav Element. Der Vorteil dieser neuen Methode besteht in der besseren Übersichtlichkeit, da die Struktur der Webseite nun nicht mehr wie gehabt mit teilweise vielen DIV Elementen erzeugt werden muss.

Folgend die Übersicht der Elemente:

section – Textelement
<section>Inhalt</section>

nav – Das Element für Navigationen
<nav>Navigation</nav>

article – Ein Artikel
<article>Arrtikelinhalt</article>

aside – Ergänzender Inhalt für einen Artikel (article)
<aside>Autor: Max Mustermann</section>

hgroup – Inhalt für eine Gruppierung von Titeln (mind. 2 h- elemente)
<aside>Hier H1 bis H6</section>

header – Seitenkopf
<header>Informationen in der Kopfzeile</header>

footer – Seitenfuss
<footer>Impressum etc.</footer>

Die neuen Elemente bringen also eine gute Strukturierung mit sich. Das erzeugen oder schreiben des Codes für die Webseite wird somit einfacher und übersichtlicher. Möchte man zum Beispiel zu einem Artikel ergänzende Informationen wie Autor oder andere Inhaltliche Angaben hinzufügen, benötigt man lediglich aside als Element.

Soweit zu den neuen Strukturierungselementen in HTML5, im nächsten HTML5 Tutorial wird es um die direkte Einbindung von Audio und Video gehen. Zudem wird es noch einige genauere Tutorials zu den Tags geben.

The post HTML5 Tutorial – Die Abschnitte appeared first on Lichtreiter.

Was macht dieses Element?

Canvas bietet einen bearbeitbaren Bereich im HTML5, bei dem es direkt möglich ist mit Javascript Grafiken innerhalb diesen Bereiches oder Elements zu Zeichnen und editieren.

So benutzt man das Grafik Element

Quellcode für Tag:

 <!DOCTYPE html >
 <html >
 <body >

 <canvas > </canvas >

 </body >
 </html >

Quellcode Beispiel für ein simples Javascript zum erstellen einer Form:

Erst Variable für das Element erstellen, um die ID aus zu lesen:

var canvas=document.getElementByID('->Hier ID<-');

Dann Variable für den Inhalt des Elements:

var canvas-content=canvasgetContext('2d');

Füllfarbe für die Form:

canvas-content.fillStyle='#000000';

Grösse des Rechtecks, bzw Koordinaten füllen:

canvas-content.fillRect(0,0,200,500);

Weitere Möglichkeiten

Nicht nur 2D Formen sind möglich, auch 3D Objekte lassen sich damit realisieren. In einem späteren Tutorial werde ich genauer darauf eingehen.
Durch HTML 5 gibt es nun auch direkt möglichkeiten der Animation. Ein tolles Beispiel für eine solche ANimation in HTML 5 mit canvas kann man sich hier-> anschauen

Unterstütze Browser

• Mozilla Firefox
• Opera
• Google Chrome
• Internet Explorer ab Version 9
• Safari

realisierte Beispiele:

Zum Abschluss des zweiten HTML5 Tutorials noch einige gute Seiten im Netz mit dem neuen Element

Hier eine tolle Seite mit Animationen ->

Das wär es erstmal zu diesem Thema, demnächst gibt es dann weitere Anleitungen zu weiteren HTML5 Neuerungen

The post HTML5 Tutorial – Canvas Element appeared first on Lichtreiter.

In der neuen HTML5 Tutorial Serie wird gezeigt, wie man eine valide HTML5 Seite mit CSS3 erstellt. Zudem gibt es einen Überblick der Neuerungen und Änderungen mit HTML5 sowie bei CSS3.

Der Anfang

Hier erst einmal die wichtigsten Tags, die bei HTML5 dazu kommen:

Das Canvas Element

Dieses Element dient zur erstellung von Grafiken durch z.B. Javascript. Es bietet also einen Container für Grafiken die “gezeichnet” oder erstellt werden sollen.

Das Tutorial zu Canvas gibt es hier

Video und Audio

Es ist nun möglich Videos und Audio direkt mit HTML zu laden, dadruch entfällt praktisch die Nutzung von Javascript oder Flash um Videos abzuspielen.

Gliederung in Abschnitte

Neu ist auch die Gliederung in Abschnitte, getrennt nach ihren Inhalten.
Folgend die Elemente der Gliederungen:

• Header
• Artikel
• Navigation
• Abschnitt(section)
• Footer

Mehr zu den Abschnitten in einem eigenen Tutorial

Form Kontrolle

Neue Möglichkeiten im Umgang mit Formularen

CSS3

Viele wichtige Neuerungen gibt es mit beim CSS3. Hierzu gehe ich in einem speziellen Abschnitt der Serie noch einmal genau ein.

Soweit der Überblick der HTML5 Änderungen. In den nächsten Teilen der Tutorial Serie werde ich dann spezifisch auf Quellcode und Beispiele zu HTML5 eingehen.

The post HTML5 Tutorial Serie Teil 1 appeared first on Lichtreiter.

The post Wallpaper August appeared first on Lichtreiter.

In diesem Photoshop Tutorial möchte ich zeigen, wie man mit Photoshop in weniger als 30 Minuten ein schönes Hintergrundbild erstellen kann.

1. Skizzen

Wie immer sind Skizzen und Sketche vorab sehr wichtig. Durch die Skizzen bekommt man eine genauere Vorstellung davon was genau man später am Computer mit Photoshop erstellen möchte.

Hier einige meiner Skizzen die ich während des nachdenkens gemacht habe:

Heruaskommen soll eine Abstrakte Typografie als Hintergrundbild, mit einer passenden Farbgebung für August.

2. Der Hintergrund

Der Hintergrund ist bei diesem Tutorial mit Photoshop leicht gemacht.
Eine neue Farbebene erstellt, mit der Farbe #f2c029 und die Deckkraft der Ebene auf 40% reduziert.

Danach eine Papiertextur benutzt, die man hier Downloaden kann. Diese Textur mit dem Modus Multiplizieren über die Farbebene gestellt.

3. Grundformen der Typografie

Die Skizzen mit dem Tool für Formen in Photoshop nachgebaut. Die Ebenen auf Multiplizieren gesetzt, und geschaut dass eine gute Ästhetik entsteht.

4. Hinzufügen zusätzlicher Textur

Zum Abschluss noch eine eigene textur erstellt. Dazu eine neue Ebene erstellen,mit schwarz füllen. Dann Filter->Rauschen->Rauschen hinzufügen. Bei den Einstellungen Monochromatisch anklicken. Diese Ebene dann auf Aufhellen stellen und die Deckkraft auf ca 50% runterstellen.

Das Endergebnis

Hier gibt es das Ergebnis des Photoshop Tutorials als Download

The post Photoshop Tutorial 2 appeared first on Lichtreiter.

Man benötigt im Webdesign oder auch im UI-Design immer wieder verschiedene Buttons, die auch zum Corperate Design der Seite passen sollen.
So kann man einen schicken Button in Photoshop erstellen:

1: Grundform wählen

Wer gerne abgerundete ecken mag, kann diese in Zukunft mit CSS 3 auch direkt erstellen, ohne ein Hintergrundbild einbinden zu müssen.

2: Farbe oder auch Farbverlauf wählen

Bei Buttons spielt die Farbe eine wichtige Rolle. Bei Call to Action Buttons sollte man Orange oder Grüne Farben und Verläufe wählen, da diese den Besucher eher zu einer Aktion aufrufen als zum Beispiel ein Rot.

3: Hintergrundschatten einstellen

Ein weicher und nicht auffäliger Hintergrundschatten gibt dem Button eine tiefe, dadruch wirkt dieser plastischer.

4:Glanz auf dem Button

Auch ein Glanz wirkt wunder bei Buttons. Die Ebene duplizieren, alle Effekte löschen und weisse Farbe nutzen. Dann die ebene auf ca. 20% reduzieren.
Wenn man dann noch die untere hälfte der Ebene löscht, wirkt das ganze wie ein Glanz.

5: Verlauf als Rand

Ein Rand setzt den Button noch mehr in Szene. Hier einen Verlauf für den Rand gewählt, der von der Grundfarbe des Buttons in ein weiß verläuft.

6: Finish am Button

Zuletzt noch ein paar Einstellungen nach persönlichen Vorlieben geändert. Hier wurde der glanz noch ein wenig modifiziert.

7: bei Text auf Button

Dem Text einen hohen Kontrast im gegensatz zum Button geben, leicht lesbar. Zusätzlich auch hier einen Schatten hinzufügen, damit auch hier wieder eine Tiefe entsteht.

Ich hoffe dieses Photoshop Tutorial hat geholfen

The post Photoshop Tutorial 1 appeared first on Lichtreiter.