Tritium-Design

Wer für mobile Geräte Designs entwirft, wird früher oder später vor dem Problem stehen, dass man auf seinem heimatlichen 20+ Zoll Monitor keine einfache 1:1 Vorschau von Zielbildschirmen hinbekommt. Des Rätsels Lösung sind die unterschiedliche Anzahl an dargestellten Punkte pro Zoll (dpi) auf dem Arbeitsmonitor im Vergleich zum Zielgerät. (Dass dies selbst für manche Professionels ein Problem darstellt sieht man an diesem Artikel)
Während ein Standardmonitor mit einer Diagonalen von 20 Zoll und einer Auflösung von 1280×1024 Pixeln 81,96 dpi darstellt, sind es beispielsweise bei einem Display von 320×480 Pixeln und einer Diagonalen von 3,5 Zoll (iPhone Display) ganze 164,83 dpi.

Um dieser Diskrepanz Herr zu werden, kann man in Photoshop die Druckansicht entsprechend konfigurieren, so dass die Ausgabe in der tatsächlichen Größe am Monitor erfolgt.
Hierfür habe ich gerade ein sehr schönes online Tool gefunden, welches einem die Berechnung für den Abgleich von Photoshop->Arbeitsmonitor->mobiles Endgerät samt verlinktem HowTo abnimmt. http://www.pxcalc.com/.

        

Es war mal wieder Zeit für ein kleines Javascript-Experiment. In Anlehnung an die 3D-Coke von Roman Cortes, wollte ich einmal versuchen, mehrere Hintergrundbilder übereinander zu legen und durch Verschiebung eine gewisse Räumlichkeit zu erzeugen, wie man es früher gerne in Pseudo-3D-Spielen getan hat oder es auch heute noch beim Bühnenbau am Theater durchaus gebräuchlich ist.

Das Ganze ist zwar völlig nutzlos, sieht aber nett aus.
Gesteuert wird der Viewpoint über das graue Quadrat, welches sich in der linken oberen Ecke der Szenerie befindet.
Wer sich für den Code interessiert, kann sich das zip hier herunterladen: depthLayer.zip

        

…lautet die goldene Regel gegen Datenverlust.
Nachdem gestern mein Server aufgrund eines mehrfachen Festplattencrashs insgesamt ca. 12 Stunden nicht erreichbar war, stellte ich heute fest, dass die Admins meines Providers eine Nachtschicht eingelegt haben und das System gegen 5:30 Uhr wieder betriebsbereit war. Super Arbeit Jungs! Administratoren sind echt nicht zu beneiden. Leider ist der Haken der, dass der Datenbestand dem von vor 4 Wochen entspricht. Ausgerechnet in dieser Zeit hatte ich einige Änderungen am System vorgenommen, Ein Blogeintrag zu RunRev ist hinüber, ein WordPress-Plugin, das ich installiert hatte, kann ich nicht mehr finden und die Mails der letzten 30 Tage sind auch futsch. Was lernt man daraus? Auch auf ein RAID1-Verbund kann man sich nicht hundertprozentig verlassen.
Ich werde das als Anlass nehmen, mir eine zusätzliche Backupstrategie zu überlegen. Wie diese aussehen wird weiss ich noch nicht – ich weiss nur, dass ich nun irgendwie die Arbeit manuell rekonstruieren muss.

        

Neulich habe ich mir ein Bamboo Pen & Touch von Wacom gegönnt.
Das letzte mal, dass ich mit einem Tablet am PC gezeichnet habe, liegt gut 15 Jahre zurück. Damals war der Stift noch kabelgebunden und konnte keine Druckstufen unterscheiden. Dementsprechend schlecht war das Handling.
Wacom verspricht mit seinen aktuellen Tablets ein Zeichengefühl wie auf Papier – meine Erwartungen waren also entsprechend hoch.
Am Wochenende konnte ich das Teil endlich mal ausgiebig testen und tatsächlich, ein Gefühl als würde man mit einem Fineliner oder einem harten Bleistift auf Zeichenkarton zeichnen! Kein Kabel am Stift, keine Batterien.
Die Touch-Funktionen fand ich zunächst vielversprechend, da sie Gesten unterstützen, wie man sie von aktuellen MacBooks kennt, jedoch war der erste Eindruck, dass die Touchfläche zu empfindlich reagierte. So öffnete sich viel zu oft das Kontextmenü unbeabsichtigter weise bei Drag&Drop Operationen der beim Scrollen sowie beim Rotieren.
Egal – die Touchfunktion kann man abschalten und in erster Linie will ich es ja zum Zeichnen mit dem Stift verwenden.
Hier nun meine erste Zeichenübung:

Vorskizze

Farbskizze

Final

Zugegeben – der Weg zum Fotorealismus eines Nico di Mattia ist noch sehr weit , aber als erste Übung schon nicht so schlecht – oder?
Wer also überlegt sich so ein Teil zuzulegen, dem kann ich das Bamboo wärmstens empfehlen.

        

Super Effekt und dazu noch genial einfach: http://www.romancortes.com/blog/pure-css-coke-can/
Roman Cortes schafft den Eindruck einer sich beim Scrollen drehenden Cola Dose – ohne zusätzliche Skripte nur mit reinem CSS!
Die Technik dahinter ist eigentlich so alt, wie die Filmtechnik: Der Betrachter schaut durch einen Sehschlitz hinter dem sich Momentaufnahmen einer Bewegung befinden. Wird der Suchschlitz nun in schneller Folge über diese Aufnahmen bewegt, entsteht der Eindruck einer Bewegung.
Bei der Lösung von Cortes, setzt sich das Bild aus mehreren eben solcher “Sehschlitze” zusammen, die als Background-Image die Oberflächentextur der Dose erhalten – zusätzlich ist das Attribut Background-Attachment: fixed gesetzt. Scrollt der Nutzer nun den umgebenden DIV-Container, so bewegen sich diese Sehschlitze über die fest verankerte Textur und der Eindruck einer Bewegung entsteht. Die Dreidimensionalität entsteht dabei durch die verwendete Textur (einer auf 2D gestreckten/aufgeschnittenen Cola Dose ) im Zusammenspiel mit den nebeneinander liegenden Sehschlitzen, welche immer den für die aktuelle Scrollposition entsprechenden sichtbaren Ausschnitt der Projektion darstellen. Dabei sind die Sehschlitze zu den Rändern hin schmaler als in der Mitte (1-2px am Rand, 55px in der Mitte – siehe Abbildung).
Um dem Ganzen noch den letzten Schliff zu geben, hat Cortes ein png über de Sehschlitze gelegt, welches nicht nur für die Lichtreflexion sondern auch für die Rundung der Dose sorgt – dadurch ist die Illusion nahezu perfekt.

Wenn man vom IE6 absieht (der das Attribut Background-attachment: fixed nicht auswertet), funktioniert das in allen gängigen Browsern.
Ich bin gespannt, wann wir Nachahmer davon finden und welche neuen Ideen sich daraus ergeben.