Warum man in Photoshop immer unscharfe Ränder und Kanten erzeugt

Gerade beim Webdesign kommt es drauf an, auf den Pixel genau zu arbeiten. Doch jahrelang habe ich mich darüber geärgert und mich gefragt, warum bei Photoshop Formen die Ränder oft unscharf sind (rote Pfeile)

und nicht wie sie sein sollten auf dem oberen Bild. Die Lösung habe ich irgendwann nach ca. 10 Jahren Photoshop durch Zufall herausgefunden:

In Photoshop kann man Pfade (woraus die Formen halt bestehen) und Hilflinien auch “zwischen” die Pixel ziehen. Man kann einer Form so z.B. eine Breite von 30,3 Pixel geben. Da entweder nur 30 oder 31 möglich sind, werden nun die Pixel dazwischen mittels Anti-Aliasing dargestellt. Das ist eben jener Effekt dieser unscharfen Ränder.

Hier sieht man, wie bei einem Pixelraster Hilfslinien zwischen den Pixeln liegen können.

Um dies zu umgehen, muss man ein Gestaltungsraster anlegen. Dafür gehen wir in Photoshop unter die  Voreinstellungen und „Hilfslinien, Raster, Slices …“ und dort wählen wir Rasterlinie 10 und Unterteilungen 10 (andere sind auch möglich, Hauptsache ist, dass die kleinste Einheit 1 ist).

Jetzt aktivieren wir das Raster unter Ansicht -> Einblenden -> Raster (am besten merkt ihr euch den Shortcut). Jetzt müssen wir sehr weit in das Bild zoomen, um das kleinste Raster darzustellen. Wichtig ist jetzt, das unter „Ansicht“ das Ausrichten an Raster aktiviert ist.

Wenn das Raster sichtbar ist, werden nun alle neuen  Objekte, welcher Art auch immer, direkt am Raster ausgerichtet und somit auf exakte Pixelwerte. Diese unsauberen Ränder können nicht mehr auftreten und pixelgenaues Webdesign ist problemlos möglich.

Ich hoffe euch geholfen zu haben. Wenns euch was gebracht hat hinterlasst doch einen Kommtar.

[Webseiten Tuning] #2 Sauberer Code

Hier nun der Beginn meiner kleinen Zusammenfassung über das Tuning von Webseiten.

Am wichtigsten an Webseiten ist sauberer Code und intelligentes Design. Nur durch eine saubere Arbeit ist der Grundstein gelegt, für weniger Serverbelastung, schnellere Ladezeiten und schnelleren Aufbau. Ich spreche hier nicht über die Programmierung, PHP oder andere Programmiersprachen. Diese Anleitung ist für Leute die zumindest Codetechnisch ihr Glück in die Hände der Entwickler von Systemen wie Wordpress legen und nur ihr Template perfektionieren wollen

Must-Have-Tools

Zu den Must-Have-Tools zählt zu allererst der Firefox Browser. Mit seinem Reichtum an Plugins ist er zu einem mächtigen Tool für Webentwickler geworden. Da wundert es nicht, dass die meisten Profis mit Firefox entwickeln, obwohl der Großteil der Kunden noch den Internet Explorer nutzt.

Zunächst bestücken wir unseren Browser mit den Plugins Web Developer Toolbar, Firebug und HTML Validator. Dann ein Browserneustart. Wir sehen nun oben die Toolbar die man sich in Ruhe mal ansehen sollte. Sie bietet viele nützliche Funktionen wie z.B. verbotenes inline-css oder Bilder abzuschalten.

Im Browserfuß sehen wir nun einen kleinen gelben Käfer, dies ist der Firebug. Daneben die Anzeige vom HTML Validator, der anzeigt, ob die Seite HTML Fehler enthält.

Nun sollte man Schritt für Schritt die Fehler des Validators durchgehen und die Fehler bereinigen, wo es geht. Perfekte Webseiten gibt es kaum und ist bei dynamischen Seiten selten lange Zeit perfekt. Aber ein gewisses Maß kann man erreichen.
weiterlesen

Foto bei Tag in ein Foto bei Nacht umwandeln

Wie man Tageslicht-Fotos in düstere Nacht umwandelt, dazu gibts hunderte Tutorials. Bei PSDTuts.com gibts ein aktuelles und wie ich finde besonders gelungenes. Klickt euch mal rein!

Weitere Inspirationen: toptut.com, photoshoptalent.com oder bei google