Hands on im Responsive Web-Design

3. Mai 2016 at 14:55
Ab 15. Juni 2015 tolle Features in Photoshop CC 2015

Ab 15. Juni 2015 tolle Features in Photoshop CC 2015

Kleine Schocks aus dem Screendesign-Universum: Was auf den beiden brillianten 4K-Panels des Designers noch richtig knackig ausgesehen hat, wirkt auf den kleineren Endgeräten in den Dimensionen verschoben. Ein Mobile-Layout auf einem großen Monitor zu beurteilen oder dem Kunden gar auf einem Projektor vorzuführen ist letztendlich nicht viel sinnvoller, als das Screendesign auszudrucken. Das „Device-Preview“-Feature in „Photoshop CC 2015“ gepaart mit der Begleit-App „Preview CC“, die nun auch in der deutschen Version verfügbar ist, schafft hier willkommene Abhilfe, vor allem im Mobile-First Kontext.

Mit dem Einsatz von mehreren Zeichenflächen können innerhalb einer Photoshop-Datei nicht nur verschiedene Auflösungen parallel gestaltet werden, mithilfe der Gerätevorschau werden diese auch gleich auf den per WLAN oder Kabel gekoppelten Endgeräten ausgegeben. Photoshop erkennt dabei die jeweilige Auflösung des Geräts und gibt das dafür vorgesehene Layout aus. Die Designs von morgen werden also direkt auf den jeweiligen Endgeräten gestaltet – in einer Photoshop Datei.
Das bringt nicht nur eine gewaltige Qualitätssteigerung durch die direkte Kontrolle auf den Endgeräten mit sich, sondern auch einen schnelleren und effizienteren Workflow. Seit einiger Zeit arbeiten wir nach diesem Modell in unserer Agentur und haben uns nun ein Urteil erlaubt.

 

Webdesign in Photoshop CC 2015

Beim Dokumenttyp «Zeichenfläche» steht eine große Auswahl an Devices bzw. Bildschirmgrößen zur Verfügung.

Beim Dokumenttyp «Zeichenfläche» steht eine große Auswahl an Devices bzw. Bildschirmgrößen zur Verfügung.

Photoshop CC 2015 bietet die langersehnten Zeichenflächen, die mehrfach in einem Dokument gesetzt werden können. Somit kann zwischen verschiedenen Status im Responsive Design oder einer App gewechselt werden. Diese Zeichenflächen kann man sich wie spezielle Ebenen-Ordner für verschiedene Displays vorstellen, in denen die Design-Elemente durch kopieren und Drag & Drop korrekt positioniert werden. Mit Hilfe des neuen Werkzeuges, bei dem eine große Auswahl an Devices/Bildschirmgrößen bereits vordefiniert ist, können Zeichenflächen eigenständig gesetzt werden. So setzt man beispielsweise direkt zu Beginn – im Sinne des „Mobile First“ Gedankens – eine Zeichenfläche „iPhone 5“ neben „iPad“ und „Mac Book Pro“ und hat somit den direkten Vergleich, ohne in Dateien springen zu müssen. Aber auch im Nachhinein können Ebenen-Ordner in Zeichenflächen umgewandelt werden.
Die Design-Elemente können als verlinkte Objekte lokal oder über die Creative Cloud hinweg konsistent gehalten werden. So können verschiedene Screen-Zustände oder Screen-Größen angelegt und miteinander verglichen werden. Die Ausgabe und Darstellung der gesamten oder einzelnen Zeichenflächen erfolgt dann über den neuen Schnell-Export.

 

Die Echtzeit-Vorschau auf mobilen Endgeräten

Adobe Preview CC

Adobe Preview CC

Für das Testing und die Gerätevorschau direkt auf den Endgeräten, wie Smartphone oder Tablet, kommt die Begleit-App „Adobe Preview CC“ zum Einsatz. Die App ist für iOS-Geräte kostenlos im iTunes App-Store erhältlich (zurzeit leider nicht für Android verfügbar). Nach dem Öffnen und der Anmeldung mit der Adobe ID erkennt die App via WLAN (eingeloggt im gleichen Netzwerk) oder USB-Kabel die Zeichenflächen. Adobe CC gibt automatisch für das jeweilige Endgerät das angepasste Design auf dem Endgerät aus. Es ist unfassbar praktisch, die verschiedenen Photoshop-Designs direkt und in Echtzeit während des Arbeitens zu „testen“, denn die Änderungen werden in der Gerätevorschau direkt übernommen.
Damit kann sichergestellt werden, dass das Design auf den jeweiligen Geräten wie gewünscht aussieht.

In Photoshop über das Menü Fenster die Device Preview auswählen, die Devices laden und dann auswählen.

In Photoshop über das Menü Fenster die Device Preview auswählen, die Devices laden und dann auswählen.

Nicht nur für Designer

Um bei Präsentationen einen bleibenden Eindruck zu hinterlassen, lässt sich die neue Funktion fantastisch als Präsentations-Tool einsetzen. Hierzu einfach mehrere Endgeräte mit zum Termin nehmen und die Zeichenflächen, die durch Abgleich der Größe und Position mit der Größe der angeschlossenen iOS-Geräte dargestellt werden, präsentieren. Wir können von dieser sehr dynamischen Präsentationsmöglichkeit nur positiv berichten. So können Kunden begeistert werden, indem sie selbstständig durch die ersten Designs ihrer neuen Responsive Website scrollen können und das Look-and-Feel ihrer neuen Website erleben. Der Vorteil gegenüber einem Klickdummy besteht darin, dass der Kunde gezielt durch die Designs moderiert werden kann, da außer Scrolling keine Interaktionsmöglichkeiten zum Weiterklicken bestehen – was zentral von Photoshop aus gesteuert wird.

Tipp: Um die Performance zu steigern, kann man die Screens in einer separaten Datei komprimiert als JPG auf die Zeichenflächen setzen.

Fazit
Das man neben Illustrator nun auch in Photoshop mit mehreren Zeichenflächen arbeiten kann, bringt unseren Interaction-/UX-Designer Freude und Erleichterung im täglichen Doing. Für das Testen des Webdesigns sind diese Features ein großer Schritt in die richtige Richtung.

Neben den vielen erwähnten Vorteilen für Webdesigner muss auch der Nachteil genannt werden, dass die Datei mit mehrfach duplizierten Smartobjects sehr groß werden kann und somit die Ladezeiten von Vorschau und auch Exporten verzögert stattfinden. Hier ist ein leistungsstarker Rechner von Vorteil. Ebenso gibt es zu bemängeln, dass es aktuell gelegentlich zu Ausfällen der App während der Echtzeit-Vorschau kommt.

Sehnsüchtig warten wir auf die Android Version der App. Wir sind uns sicher, dass die Features von vielen Designern genutzt werden, sobald diese in der Branche bekannter werden. Auf die zukünftigen Neuerungen freuen wir uns schon, die (hoffentlich) neben der Layout-Vorschau auch eine Technologie-Vorschau ermöglichen.