Erstaunlich, was den scheinbar professionellen Designern ständig passiert. Da schaffen es echt böse Fehler ins Endprodukt. Am häufigsten sind es Fehler bei Spiegelungen oder Körperteile, die beim Wegretuschieren übrig geblieben sind. Stimmt einen schon nachdenklich, wenn man bedenkt wie oft die Wirklichkeit verzerrt wird, um so eine hohe Anzahl an missglückten Wegretuschierungen zu bekommen. Eine schöne Übersicht der lustigsten Fehler gibt es hier und hier.
Und wer noch nicht genug hat, kann sich den Photoshop Disasters Feed abonnieren, es lohnt sich.
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.
Hier poste ich all das, was in meinem Feedreader geflaggt wird und für mich interessant war
Photoshop bietet ja schon eine ganz gute Zusatzmodulverwaltung. Alles von Verläufen, Aktionen, Stile, Fonteigenschaften hin zu Pinselspitzen lässt sich abspeichern.
Ich persönlich hatte immer das Problem, das ich eine geschätzte Million Pinselspitzen herumfliegen habe, die sich sehr schwer verwalten lassen, weil man sie sich nur in Photoshop selbst ansehen kann. Ich würde sie aber gerne vor dem hinzuladen schon betrachtet können.
Für Windows hatte ich damals ein sehr gutes Tool namens „ABR Viewer“. Damit kann man sich Pinselspitzen anschauen, Vorschau-Bilddateien erzeugen und sie Ordnen. Für Mac war man lange Zeit aufgeschmissen.
Vor einigen Wochen habe ich dann einen ABR Viewer für Mac gefunden. Er basiert auf Java und kann somit nativ unter Mac OS X ausgeführt werden, Java im System sei dank. Zusätzlich kann man noch sagen, dass man dieses Programm somit auch unter Linux ausführen kann, warum man das auch immer tun sollte, so ohne Photoshop.
So. Fehlt nur noch eines, was mir unter Mac noch gefehlt hatte: Ein Quicklook ABR Plugin.
Quicklook ist eine Funktion von Mac OS X, mit der Leertaste im Dateibrowser kann man sich die gewählte Datei schnell anschauen, ohne das nötige Programm dafür zu starten. Und das geht seeeehr schnell. Funktioniert für Bilder, Video, Office Datei, PDFs und so weiter. Diese Funktionen lassen sich durch Plugins erweitern.
Und nun hat sich jemand erbarmt, endlich ein Quicklook Plugin für Photoshop Brushes zu programmieren (dank an Apfelquak für den Hinweis). Das Plugin findet man hier. Und die Installation ist wirklich ein Kinderspiel, einfach nur die Datei in /Library/Quicklook schieben.
Und schon sieht man Photoshop Brushes in der Vorschau:
Sowie in der Quicklook Ansicht:
Danke dafür !
Auf der Seite sixrevisions.com gibts eine großartige Zusammenstellung von Übersichtstabellen für den (Web)Designer. Angefangen über Tastenkürzel von Photoshop und Illustrator, bis hin zu Webfarben, Typographie, HTML Sonderzeichen und noch vieles Mehr. Speziell für Front-End Web Developer ist eine weitere Liste empfehlenswert. Das dürfte einiges an Zeit sparen und man ärgert sich, dass die Wand im Büro zu klein für die ganzen Dinger ist 
12. September 2008
Kategorien
CSS,
Design,
Photoshop,
Printdesign,
Typografie,
Webdesign
Tags
Cheat Sheets, Design, HTML, Illustrator, Photoshop, Shortcut, Tastenkürzel, Übersichtstabellen, Webdesign
PSHero zeigt euch wie man schöne realistische Anhängekarten (Tags) erstellt
Eine riesige Sammlung von “Tiles and Patterns“, also Hintergrundmuster und Hintergründe zeigt euch Smashing Magazine, inklusive einer großen Übersicht von Webseiten die diese verwenden
Zwei schöne Texteffekte: Einmal etwas mit Ranken von abduzeedo und ein wirkungsvoller metallic Effekt von GrandmasterB
