personalisierte 3 dimensionale DirectSmile Sets

Heute möchte ich Euch zeigen wie man recht einfach aus einem vorhandenem DirectSmile Set ein 3D Set zaubern kann. Zwar ist das keine professionelle Lösung aber zumindest ein Ansatz für eine neue Marketing Idee die sich sehen lassen kann.

Bei der Auswahl der Sets sollte darauf geachtet werden, dass sich in dem Motiv Objekte befinden, die sich vom eigentlichen Hintergrund abheben und leichte Perspektiven vorhanden sind. Ich habe mir für unser Beispiel das SnowLetters Set ausgesucht. Zur Veranschaulichung könnt ihr euch auf der folgenden Seite eine kleine Slide-Show mit meinen bisherigen Ergebnissen ansehen.

zum Beispiel

Was wir brauchen:

– ein DirectSmile Set
– ein Bildbearbeitungsprogramm (Photoshop)
– eine 3D Brille

Los geht’s …

Als erstes rufe ich im Windows-Explorer das Verzeichnis des Sets auf und lege eine Sicherungskopie des Hintergrundbildes an. Danach öffne ich das kopierte Hintergrundbild in Photoshop und ändere den Zustand des Bildes von ‘Background’ in ‘Layer0’. Dafür klicke ich unter ‘Layers’ doppelt auf das Bild und bestätige mit ‘OK’.
image

 

Da wir zwei Bilder für ein 3D Set benötigen kopiere ich den ‘Layer 0’. Dafür ziehen ich den ‘Layer 0’, mit gedrückter linker Maustaste, auf das Icon ‘Create new Layer’ image.
image

 

Per Doppelklick auf den kopierten Layer, mit der Bezeichnung ‘Layer 0 copy’, gelange ich in den ‘Layer Style’ und entferne den roten Kanal des Bildes und bestätige mit ‘OK’.
image

 

Jetzt verändere ich die Perspektive der beiden Layer. Ich selektiere den ‘Layer 0’ und wähle im Menü ‘Edit’ – ‘Transform’ – ‘Perspective’ aus. Ich halte mit der linken Maustaste die rechte obere Ecke des Bildes und ziehe diese vorsichtig aus dem Bild, so dass sich der Wert H: in der Menüleiste von 100% auf 100,8% verändert und bestätige die Änderung durch zweimaliges drücken der Enter-Taste.
image

 

Den Vorgang wiederhole ich mit dem ‘Layer 0 copy’, nur dass ich die Perspektive jetzt auf der linken Seite des Bildes anpasse und zwar ebenfalls auf 100,8%.

Natürlich ist das Anpassen der Perspektive reine Übungssache. Man kann den Wert zwar höher stellen, jedoch muss man daran denken, dass der Zuschauer keine Kopfschmerzen beim Betrachten des Bildes bekommen soll.
Jetzt speichere ich das Bild als JPG und lade danach das Set SnowLetters im DirectSmile SetEditor und tausche das Hintergrundbild gegen unser neu erstelltes 3D Bild aus, fertig.
image

Advertisements

Erstellen einer Slide Show mit personalisierten Bildern

Auf unserer Webseite gibt es nun eine neue Anzeige von personalisierten Vorschau-Bildern welche ausschließlich mit Hilfe des Cross Media Designers erstellt wurde. Die Vorschau der Bilder ist jetzt viel größer, ohne Wasserzeichen und man kann sich nach der Eingabe seines Namens zurücklehnen und in Ruhe die Slide-Show genießen. Es ist eine sehr schöne Idee seinem Kunden die neuesten Sets auf der Firmen-Webseite zu präsentieren. Ein riesiger Vorteil gegenüber der alten Vorschau ist die Pflege der DirectSmile Motive. Durch Drag&Drop können die Sets für die Vorschau einfach ausgetauscht werden. Wie der Aufbau einer solchen Seite funktioniert werde ich Euch heute in diesem Artikel zeigen.
Wie unsere Slide-Show später in etwa aussehen soll, ist hier zu sehen: http://www.imagepersonalization.com/

Was brauchen wir?

Wir benötigen zwei HTML-Seiten für die Slide-Show. Eine ‘Static Home Page’, auf die der Besucher beim Aufruf der Seite seinen Namen eintragen kann und eine ‘Personal Home Page’, welche nur die Aufgabe hat den soeben angelegten Eintrag in der Datenbank zu überschreiben. Weiterhin benötigen wir eine Auswahl an Sets die in unserer Slide-Show platziert werden sollen und eine Datenbank mit nur einer Spalte für den Namen. Mehr ist nicht notwendig.

Nützliche Hinweise vorab

  • Damit alle Preview-Bilder mit der gleichen Auflösung angezeigt werden, sollten Gruppen und platzierte Sets eine feste Höhe und Weite eingestellt haben. Für eine optimale Anzeige habe ich 600px für die Weite und 450px für die Höhe gewählt.
  • Wähle für das erste Bild-Set ein schnelles Motiv, das macht die Slide-Show flüssiger und garantiert dass alle Sets auf dem Server bereits gerendert wurden.
  • Ich empfehle für die Anzeige der Vorschau-Bilder auf hochaufgelösten Sets zu verzichten. Es macht keinen Sinn extrem große Sets in einer Preview-Slide-Show zu verwenden. Es würde unter Umständen das Produktions-system ausbremsen. Abhilfe schafft entweder die DSMI-Autoskalierung oder man lässt die Slide-Show unter einem neu angelegten Designer-Account laufen und transferiert skalierte Sets auf diesen Account. Dabei sollte darauf geachtet werden, dass die Sets nicht kleiner skaliert werden, als die definierte Höhe und Weite der Slide-Show. Es gilt: so groß wie nötig und so klein wie möglich.

Aufbau der Static Home Page

Auf der ‘Static Home Page’ platzieren wir eine Gruppe, richten diese nach unseren Wünschen aus und platzieren darin das Slide-Show Item. In dem Slide-Show-Item befinden sich standardmäßig drei Gruppen in denen sich jeweils ein Text-Item befindet. Diese Gruppen können wir alle mit Strg selektieren und mit der Entf-Taste löschen. Die jetzt leere Slide-Show kann nun per drag&drop mit Sets gefüllt werden.

Als nächstes platzieren wir außerhalb der Slide-Show ein Text-Eingabefeld für die Eingabe des Namen und direkt daneben ein Button oder ein Bild zum Bestätigen der Eingabe. Damit das Eingabe-Menü für die Slide-Show einheitlich aussieht habe ich die Caption für das Eingabefeld gelöscht und ein Text-Item davor platziert in dem ich das Eingabefeld beschreibe.

Bevor wir zu den Zuweisungen der einzelnen Items kommen kopieren wir uns die komplette Page und fügen sie als ‘Personal Home Page’ wieder ein. Damit haben wir beide Seiten für unsere Slide-Show.
image

Definieren aller Item-Zuweisungen

Wir arbeiten uns von oben nach unten durch beide Seiten und beginnen mit der ‘Static-Home-Page’.
Das Textfeld-Item hat die Funktion ‘DataInput’ und soll in das Datenbank-Feld ‘name’ unserer Datenbank schreiben. Die Validation sollte auf ‘NotEmpty’ stehen um zu vermeiden, dass die Eingabe leer ist. Die Message wird bei Fehleingabe dem Benutzer angezeigt und sollte daher aussagekräftig formuliert werden (z.B.: ‘Bitte geben Sie Ihren Namen ein!’).
image

 

Beim Klick auf das platzierte Bild soll ein ‘Submit’ ausgelöst und der eingegebene Name, mit der Funktion ‘Register new user’, in die Datenbankspalte ‘name’ geschrieben werden. Weiterhin löst der Klick ein Seitenwechsel auf die ‘Personal Home Page’ aus, damit die Slide-Show die angezeigten Bilder mit dem übergebenen Namen anzeigt.
image

 

Die Sets die sich auf der ‘Static Home Page’ befinden müssen einen festen Text enthalten, da zu dem Zeitpunkt für den neuen Besucher noch kein Datenbankfeldeintrag in ‘name’ existiert. Ich belasse es bei ‘Smile’.
image

 

Nachdem wir die ‘Static Home Page’ definiert haben können wir uns nun der Personal Home Page widmen. Da sich am Design der Seite nichts ändern soll, müssen wir nur noch ein paar Einstellungen anpassen.
Als erstes entfernen wir die Aktion ‘New User’ von den Items Textfeld und Bild in dem wir im Textfeld Item auf das kleine Männchen image klicken, so dass wir ein Männchen ohne dem ‘New’ erhalten image.
Das Bild soll jetzt ein ‘Submit data’ ausführen um den Datenbankeintrag ‘name’ zu aktualisieren und auf sich selbst verlinken.
image

 

Den Sets weisen wir die Datenbankspalte ‘name’ zu, damit die Bilder mit dem eingegebenen Namen angezeigt werden können.
image

 

Um die Slide-Show testen zu können, speichern wir alles und lassen uns die Vorschau anzeigen. Wenn alle Einstellungen richtig sind sollte die Slide-Show ohne Probleme funktionieren.
http://dsmx2.directsmile.de/WordPress_SlideShow

image