Ich habe schon lange vor meine Fähigkeiten in Illustrator zu verbessern. Daher arbeite ich mich von Zeit zu Zeit durch diverse Tutorial um besser die Trick und Kniffe hinter der Vektorbearbeitung von Adobe Illustrator zu verstehen.

Aktuell habe ich nach Studium dieses Tutorials von veerle mit dem Angleichen-Werkzeug experimentiert. Damit kann man  auf schnelle Weise Objekte vervielfältigen und in Farbe und Form angleichen. Ähnlich einem nicht zeitbasiertem Morphing-Effekt.

Angleichen-Werkzeug (W) in Illustrator CS3

Hier die ersten Ergebnisse meiner versuche:

Erster linearer Versuch mit dem Angleichenwerkzeug (klicken für Originalgröße)

Und hier habe ich das Beispiel von oben genommen, aber die lineare Ebene verlassen:

Zweiter Versuch (klicken für Originalgröße)

Ich bin begeistern von diesem Werkzeug. So einfach hätte ich beispielsweise mit Photoshop nicht solch einen pixelartigen Effekt hinbekommen.

Bei Six Revisisons werden 20 der schönsten Vintage Photoshop Pinsel vorgestellt.

Ich habe mir gleich einige davon runter geladen und etwas gespielt:

20 Vintage Pinsel gibt's bei Six Revisions

Hier gehts zum Artikel: http://sixrevisions.com/resources/20-beautiful-vintage-photoshop-brush-sets/

Genau das was ich und sicher viele von euch sehr gut gebrauchen können:

1stwebdesigner listet knapp 60 kostenlose JavaScript, Ajax, CSS, jQuery, und Flash basierte Bildergalerien.

[via Pixelgangster]

Nachdem jetzt schon die Adobe Creative Suite CS4 auf dem Markt ist, kam nun auch ich endlich einmal dazu die seit CS3 neuen 3D Features von Photoshop CS3 Extended (die 3D-Engine ist leider nicht in der Standardversion enthalten) zu testen.

Dazu habe ich mir hier testweise ein 3Ds max Model einer Cola-Dose runter geladen und eine schnell zurechtgebastelte Textur darauf gelegt.

Ein Video-Tutorial über das Ändern von Texturen in Photoshop gibt es im Adobe Video Workshop. Hier findet ihr auch Anleitungen, um in Photoshop mit dem Fluchtpunktwerkzeug einfache Pseudo 3D-Modelle zu erzeugen. Dazu kann ich auch dieses Tutorial empfehlen.

3D Test in Photoshop CS3. Eigene Texturen auf einer Getränkedose.

Hier mein erstes, schnelles Testergebnis. Nicht perfekt, aber um mal schnell einen Packshot zu simulieren eine wirklich zeitsparende Alternative zu den sonst sehr mühseligen Techniken auf Basis von verzerrten 2D Ebenen.

[Fluchtpunkt-Tutorial via Smashing Magazine]

PDF-Präsentationen verdrängen immer mehr die klassischen Tools wie PowerPoint oder Apples KeyNote.

Nahezu jede PDF-Datei lässt sich im Acrobat Reader mit der simplen Tastenkombination Strg+L schnell im Fullscreen-Modus anzeigen. Acrobat füllt dann den restlichen Bildschirm standardmäßig mit schwarzer Hintergrundfarbe auf. Das genügt meist auch für Bilder oder ähnliches.

PDF in Fullscreen mit schwarzem Hintergrund

Es gibt jedoch auch Anwendungsbereiche, bei denen man diese Hintergrundfarbe ändern möchte. Zum Beispiel, wenn das zu präsentierende Dokument einen weißen Hintergrund hat, den man auch gerne auf dem restlichen Bildschirm fortsetzen möchte. Hierfür bietet Acrobat leider keine Unterstützung über die Menüs. Man kann zwar auf dem eigenen Rechner die Standardfarbe für den Fullscreenmode über Bearbeiten->Grundeinstellungen den eigenen Wünschen anpassen, jedoch wird diese Einstellung nicht im Dokument gespeichert, sodass auf anderen Rechnern die gewünschte Backgroundfarbe für diese Dokument nicht angezeigt wird.

Bearbeiten -> Grundeinstellungen

In den Grundeinstellungen von Acrobat wechseln wir in die Kategorie “Vollbild” und können hier bei Vollbildanzeige die Hintergrundfarbe ändern.

Standardhintergrundfarbe für Vollbildmodus ändern

Um dieses Problem zu lösen muss man sich der in Acrobat Pro integrierten Funktion zur Einbettung von JavaScripts bemühen. Bei Adobe findet man die dafür nötigen Referenzen. Damit sich aber nun nicht jeder die ganzen Dokumentationen selbst durchlesen muss, habe ich hier eine kleine Anleitung verfasst um ein PDF automatisch im Fullscreenmodus zu öffnen und die Hintergrundfarbe auf jedem Rechner einheitlich darstellen zu lassen:

PDFs automatisch im Vollbildmodus anzeigen

Ein PDF beim öffnen automatisch in den Fullscreenmode zu versetzen geht am einfachsten über Datei->Eigenschaften

Datei -> Eigenschafte

Im geöffneten Dialogfeld “Dokumenteigenschaften”, im Reiter “Ansicht beim Öffnen”, setzen wir den Häkchen bei “Im Vollbildmodus öffnen”

Ansicht beim Öffnen anpassen

Hintergrundfarbe für das Dokument festlegen

Um die Hintergrundfarbe anzupassen müssen wir zunächst den Editor im Acrobat Pro über Erweitert->Dokumentverarbeitung->Dokument-JavaScripts aufrufen und hier im Editor ein neues Script anlegen.

Erweitert -> Dokumentverarbeitung -> Dokument-JavaScripts

Dieses Script nenen wir z.B. “fullscreencolor”.

javaSacript anlegen

In diese Script tragen wir folgenden Code ein, um die Hintergrundfarbe auf Weiß zu ändern: app.fs.backgroundColor = color.white;

Code für Script eingeben

Weitere Standardfarben können auf folgende Art eingetragen werden:

Schwarz: color.black
Weiß: color.white
Rot: color.red
Grün: color.green
Blau: color.blue
Cyan: color.cyan

Andere Farben können über RGB festgelegt werden. Dies kann man dieser Dokumentation entnehmen.

Nun muss man nur noch das PDF Dokument speichern und das wars auch schon. Das fertige Dokument öffnete sich nun auf jedem Rechner automatisch im Fullscreenmode mit weißer Hintergrundfarbe.

Geänderte PDF-Datei mit weißem Hintergrund in Fullscreen

Die Menschen unter euch, die sich mit Webdesign beschäftigen kennen sich das Problem. Man hat eine freigestellte Grafik und möchte diese auf einen Hintergrund setzten. Früher hat man dafür einfach ein GIF genommen. Das kann ja Transparenzen abspeichern. Dumm nur wenn man weiche Kanten braucht und der Hintergrund vielleicht nicht nur einfarbig Weiß, sondern vielleicht sogar ein Foto ist. Dann hat man nämlich bei GIFs so hässliche Ecken und Risse an den Kanten der Transparenz. Dafür gibt es PNGs mit 24Bit Auflösung. Die unterstützen nämlich gleich einen ganzen Alphakanal, der Vergleichbar mit dem Alpha aus Photoshop ist. Alphakanäle sind in der Lage weiche Verläufe beim Ãœbergang in die Transparenz darzustellen. So kann man eine beliebig weiche Grafik auf Hintergründer jeder Art setzten (Ja – auch auf Verläufe liebe Web 2.0 Fuzzies). Da gibt es nur ein klitzekleine Problem: Alle aktuellen Browser, Also Opera, Safari, Firefox und IE7.0 können mit dem Alphakanal prima umgehen. Nur der doofe alte Internet Explorer 6.0 stellt statt der Transparenz einen hässlich hellblau-gräulichen Kasten rund um das PNG dar. Wäre ja nicht so schlimm, wenn der IE6.0 nicht nach wie vor der meist verbreitete Browser überhaupt wäre. Nachdem ich mich lange damit rumgeschlagen habe und mich in der Zwischenzeit auch schon damit abfinden musste, habe ich nun die perfekte Lösung für das Problem gefunden. Hier findet Ihr eine säuberliche Erklärung wie man den IE6 dazu bekommt PNG-Grafiken korrekt darzustellen. Alles was man dafür tun muss ist ein sehr kleine JavaScript in die Seite einzubinden, die die PNG-Files anzeigen soll. Mehr ist nicht zu tun. Unglaublich, aber war.

Hier ein Beispiel um das Problem zu verdeutlichen (Ich habe das mit Photoshop simuliert, damit auch diejenigen unter euch, die nicht mit dem Internet Explorer 6 surfen, sehen wo das Problem liegt)

Links: das Logo als GIF Mitte: So stellt der IE6 ein PNG mit Alphakanal dar Rechts: Soll soll das Logo eigentlich vor dem Hintergrund erscheinen

Das ganze basiert auf einem Versuch von Microsoft das PNG Problem in den Griff zu bekommen. Die Lösung war es einen speziellen CSS-Befehl zu integireren, den nur der IE versteht. Der Befehl lautet filter:progid:DXImageTransform.Microsoft.AlphaImageLoader und sollte eigentlich in Klassen eingesetzt werden, die dann den jeweiligen PNGs zugewiesen werden sollten. Diese mühselige Code-getippe kann man sich mit dem JavaScript aber sparen, da es quasi diese Arbeit automatisch für jedes PNG-File übernimmt. Ich habe das Script schon bei einigen Projekten im Einsatz und bin fasziniert wie einfach und zuverlässig es seinen Zweck erfüllt. Hier noch einige weiterführende Infos zu Alphakanälen und dem Dateiformat PNG(Portable Network Graphic). Hier nochmal der Link zur JavaScript Lösung Und hier eine reine CSS-Lösung ohne das JavaScript (leider sehr umständlich, wie ich finde) Abschließend findet ihr hier die Dokumentation von Microsoft (MSDN) über den zugrunde liegenden AlphaImageLoader Filter