Frage: Wie kann ich Schaltflächen dynamisch erstellen?

Antwort

Dynamische Schaltflächen

Mit Scene7 Image Serving können dynamisch skalierte Schaltflächen erstellt werden. Im Folgenden finden Sie einige Vorlagen, die eine Grundlage für die Entwicklung von Schaltflächen auf Benutzeroberflächen, die ihre Größe selbst anpassen, mithilfe von IS bereitstellen. Die Beispiele verwenden die Standardschriftart, mit der IS ausgeliefert wird. Die abgeleitete Grafik muss breit genug sein, um die längste zu erwartende Text-Beschriftung unterzubringen. Eine tatsächliche Implementierung würde wahrscheinlich eine Grafik mit höherer Auflösung, eine andere Schriftart und verschiedene RTF- und IS-Befehle verwenden, um das Erscheinungsbild und die Position der Text-Beschriftung genau einzustellen.

Das folgende Beispiel hat einen einfarbigen Hintergrund. Der Text muss sich in der Ebene 0 befinden, sodass die Größe der Schaltfläche von der Zeichenfolge des Texts bestimmt wird. Die Grafik der Schaltfläche muss in der Mitte transparent sein, um die Beschriftung und die Füllung sichtbar zu machen:

Link: http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa

Hinweis:

http://sample.scene7.com/is/image?fmt=gif&layer=0&text=$text$&extend=10,1,10,1&bgColor=$color$&layer=1&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&$text=button%20with%20solid%20color%20fill&$color=aaffaa

In diesem Beispiel enthält die Schaltflächengrafik die Füllung. Sie müssen den Text zweimal ausgeben. einmal in Ebene 0, um die Gesamtgröße bereitzustellen, und dann noch einmal oben auf der Grafik. In diesem Fall wäre die Grafik undurchsichtig:

Link: http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-comp&originN=-.5,0&posN=-.5,0&layer=2&src=TechSupport/b-comp&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=3&text=$text$&$text=button%20with%20image%20fill

Hinweis:

http://sample.scene7.com/is/image?fmt=gif&text=$text$&extend=10,1,10,1&layer=1&src=TechSupport/b-fill&op_colorize=$color$,off&layer=2&src=TechSupport/b-frame&originN=-.5,0&posN=-.5,0&layer=3&src=TechSupport/b-frame&originN=0.5,0&posN=.5,0&extendN=-.9,0,0,0&layer=4&text=$text$&$text=colorized%20gradient&$color=6666ff

Hier ein Beispiel von einem unserer Kunden. Der Hauptunterschied und die erhöhte Komplexität sind darauf zurückzuführen, dass dieser Aufruf transparente PNG-Schaltflächen generiert. Dies erfordert verschachtelte Aufrufe auf Ebene 1 und Ebene 2. Zum Erstellen der Vorlage wird der Entwicklermodus im SPS benötigt.

http://sample.scene7.com/is/image/TechSupport/button_small_default?$txt=Put+your+text+here

Vorlage button_small_default

Hinweis:

&$txt=Details%20here&layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=-0.5,0&posN=-0.5,0}&clipPath=M0,0L20,0L20,20L0,20Z&layer=2&src=is{TechSupport?layer=0&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,norm&extend=25,3,25,1&originN=0,0&hide=1&layer=1&src=TechSupport/background_button&originN=0.5,0&posN=0.5,0}&clipPath=M20,0L800,0L800,20L20,20Z&layer=4&textPs={{\fonttbl{\f0\fcharset0%20Arial;}}{\colortbl;\red0\green38\blue117;}\f0\cf1\fs12\b%20%C2%BB%20$txt$}&textAttr=150,crisp&extend=25,3,25,1&originN=0,0&effect=-1&pos=1,1&color=0xEDD2A8&op_blur=1&op_grow=1&fmt=png-alpha

Frage: Ich habe die Textebene in meiner PSD-Datei mit einer Drehung erstellt, aber wenn ich das in SPS importiere, wird diese Umwandlung nicht in der erstellten Vorlage angewendet. Muss ich etwas anders machen? ODER Unterstützen Sie Ebenen-Transformationen beim Importieren von PSD-Dateien für Basisvorlagen?

Antwort

Leider wird derzeit das Importieren von Layer-Transformationen aus PSD-Dateien in die generierte Basisvorlage nicht unterstützt.

Frage: Was ist ein Beschneidungspfad?

Antwort

Ein Beschneidungspfad ist ein geschlossener Vektorpfad oder eine Form, die zum Ausschneiden eines 2D-Bildes in Bildbearbeitungssoftware verwendet wird. Alles, was sich innerhalb des Pfades befindet, wird eingefügt, nachdem der Beschneidungspfad angewendet wurde. Alles außerhalb des Pfades wird in der Ausgabe weggelassen.

Mit Beschneidungspfaden können Sie transparente Bereiche in Bildern definieren, die in Seitenlayoutprogrammen platziert werden. Darüber hinaus können OS X-Benutzer Photoshop-Bilder in viele Textverarbeitungsdateien einbetten.

Wenn Sie ein Photoshop-Bild drucken oder in einer anderen Anwendung platzieren, benötigen Sie u. U. nur einen bestimmten Teil des Bildes. Es kann z. B. sein, dass Sie nur ein Vordergrundobjekt drucken oder anzeigen und den Hintergrund ausschließen möchten. Mit einem Bildbeschneidungspfad können Sie das Vordergrundobjekt isolieren und alles andere transparent machen, wenn das Bild gedruckt oder in einer anderen Anwendung platziert wird.

Hinweis: Pfade sind vektor-basiert, daher haben sie harte Ränder. Weiche Kanten, z. B. bei einem Schatten, werden beim Erstellen eines Beschneidungspfades nicht erhalten.

Weitere Informationen finden Sie unter http://help.adobe.com/de_DE/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7715a.html#WSfd1234e1c4b69f30ea53e41001031ab64-7711a.

Frage: Wie kann man feststellen, ob es sich in Photoshop CS6 bei einem Pfad um einen Beschneidungspfad handelt?

Antwort

Wenn ein Bild einen Beschneidungspfad enthält, wird der Beschneidungspfad im Bedienfeld „Pfade“ von Photoshop angezeigt, wobei der Name in Fettschrift angezeigt wird.

Frage: Welche Scene7-Dateiformate unterstützen Beschneidungspfade?

Antwort

Zu den Scene7-Dateiformaten, die Beschneidungspfade unterstützen, gehören:

PSD

EPS (Raster)

TIFF

JPG

Frage: Wie können Beschneidungspfade verwendet werden, um ein transparentes Bild in Scene7 zu erstellen?

Antwort

Eine der Bildbearbeitungsoptionen in SPS unter den Optionen für Upload-Aufträge besteht darin, eine Maske aus einem Beschneidungspfad zu erstellen. Diese Hilfeseite enthält eine kurze Beschreibung dieser Option:

http://help.adobe.com/de_DE/scene7/using/WS1C6180F2-3FB5-4222-BB0F-08C53AB21188.html

Wenn diese Option ausgewählt ist und das hochgeladene Bild einen Pfad enthält, der als Beschneidungspfad bezeichnet wird (Dateien können nur einen Beschneidungspfad haben), wird die Maske der Asset-ID für die hochgeladene Datei zugeordnet. Insbesondere ist ein MaskPath, der auf ein 8-Bit-Graustufenmaskenbild verweist, an das Asset gebunden. Der Alphakanal für den Bereich außerhalb des Beschneidungspfads auf dem Maskenbild ist vollständig transparent und der Alphakanal ist für den Bereich innerhalb des Beschneidungspfads vollständig undurchsichtig. Weitere Informationen zu MaskPath finden Sie in der Dokumentation zu Image Serving:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-image_catalog-MaskPath

Der „catalog::MaskPath“ überschreibt den Alphakanal im Hauptbild (catalog::Path), falls vorhanden, und wenn der Alphakanal nicht zugeordnet ist (d.h. nicht vormultipliziert). Wenn der Alpha-Kanal des Bildes vor-multipliziert ist, wird catalog::MaskPath ignoriert und der Alpha-Kanal des Hauptbildes wird immer verwendet.

Das Ergebnis ist, dass der Bereich außerhalb des Beschneidungspfads transparent ist, wenn vom Bildserver durch die Asset-ID auf ihn verwiesen wird. Es ist möglich, die Maske zu ignorieren, indem Sie in der Image-Serving-URL maskuse=off verwenden, wodurch die durch den Beschneidungspfad erstellte Transparenz effektiv entfernt wird. Weitere Informationen zu maskUse finden Sie in der Dokumentation zum Image Serving.

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-maskUse

Im Folgenden sehen Sie ein Beispiel für die Transparenz, die aus der Maske erstellt wird:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100

Und wie Sie die Maske ignorieren können und somit die Transparenz verlieren:

http://testvipd9.scene7.com/is/image/TechSupport/grill1?wid=400&bgcolor=200,100,100&maskUse=off

Hinweis:

Glossar der Begriffe

nicht zugeordneter Alphakanal

RGB-Bilder mit Alpha-Transparenz können auf zwei verschiedene Arten gespeichert werden. Eine Möglichkeit besteht darin, Roh-RGB-Werte und Alpha-Werte als getrennte und unabhängige Kanäle zu speichern; dies wird „nicht zugeordnetes Alpha“ genannt. PNG ist standardisiert auf „nicht zugeordnetes“ („nicht-multipliziertes“) Alpha, so dass Bilder mit separaten Transparenzmasken verlustfrei gespeichert werden können. Die meisten Bildbearbeitungsprogramme speichern Bilder mit nicht zugeordnetem Alpha, um RGB und Alpha unabhängig voneinander manipulieren zu können und keine RGB-Daten zu verlieren, wenn Alpha ausgenullt wird.

vor-multiplizierter Alphakanal

Eine andere Möglichkeit besteht darin, RGB-Werte nicht als Rohwerte zu speichern, sondern vorab mit entsprechenden Alpha-Werten zu multiplizieren, die dann als „zugeordnetes Alpha“ bezeichnet werden.
Wenn ein Alpha-Kanal in einem Bild verwendet wird, ist es üblich, die Farbe auch mit dem Alpha-Wert zu multiplizieren. Dies wird in der Regel als vor-multipliziertes Alpha bezeichnet. „Vor-multipliziertes Alpha“ speichert Pixelwerte, die durch die Alpha-Fraktion vormultipliziert sind. Die Alpha-Information eines Pixels wird nicht nur im Alphakanal selbst gespeichert, sondern bereits in den Rot-, Grün- und Blaukanal „multipliziert“. Die Rendering-Software bevorzugt zugeordnetes Alpha, da mit RGB-Werten, die bereits mit Alpha multipliziert wurden, weniger Arbeit in Echtzeit erledigt werden muss, wenn Alpha-Blending durchgeführt wird. TIFF unterstützt beide Alphatypen, ist jedoch häufig falsch gekennzeichnet.

Frage: Was sind Pfade?

Antwort

Pfade sind vektorbasierte Zeichnungen, die sich dehnen und neu gestalten können und keine Details verlieren. In Photoshop können Sie einen Pfad als Vektormaske für eine Ebene verwenden. Vektormasken können wie Pfade auch ohne Detailverlust skaliert werden. Sie können einen Pfad als Beschneidungspfad angeben und damit transparente Bereiche in Bildern definieren. Auf diese Weise können Sie den Vordergrund isolieren und alles andere transparent machen.

Mit Scene7 haben Sie die Möglichkeit, beim Upload ins SPS basierend auf dem Beschneidungspfad eine Vektormaske zu erstellen. Außerdem können alle Pfadinformationen, einschließlich Beschneidungspfade, optional als Teil einer dynamisch generierten Bildantwort zurückgegeben werden. Es ist auch möglich, Pfadinformationen zu verwenden, um transparente Bereiche einer Ebene oder eines Bilds dynamisch zu definieren.

In einer zukünftigen Version von Scene7 ist es vielleicht auch möglich, eine Ebene oder ein Bild basierend auf einem Pfad dynamisch zu beschneiden.

Frage: Kann eine Maske basierend auf einem bestimmten Pfadnamen erstellt werden?

Antwort

Nach dem Upload in Scene7 kann nur der Beschneidungspfad zum automatischen Erstellen einer Maske verwendet werden. Wir unterstützen jedoch die Referenzierung eines benannten Pfades, der in dem angeforderten Bild enthalten ist und der den gesamten Bildbereich ausblendet, der außerhalb der Pfaddefinition liegt. Dies erfordert nicht, in SPS den Pfad zu einer Maske zu extrahieren, da der Pfad über standardmäßige Scene7-Image-Serving-Anforderungen verwendet werden kann.

Frage: Ist es möglich, alles von einem Bildbereich, das außerhalb einer Pfaddefinition liegt, dynamisch auszublenden?

Antwort

Scene7 unterstützt tatsächlich die Referenzierung eines im angeforderten Bild enthaltenen benannten Pfads, der den gesamten Bildbereich ausblendet, der sich außerhalb der Pfaddefinition befindet. Dazu muss in SPS der Pfad nicht zu einer Maske extrahiert werden, da der Pfad mit standardmäßigen Scene7-Image-Serving-Anforderungen verwendet werden kann.

Der Image-Serving-Befehl heißt „clipPathE“ und Sie finden hier eine Dokumentation zu diesem Befehl:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-clipPath

Im Folgenden finden Sie einige Beispiele für die Verwendung von clipPathE:

Kein Pfad aufgerufen, keine Transparenz:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100

Pfad aufgerufen, zeigt Transparenz an:

http://s7d4.scene7.com/is/image/ajhco/kidchair_clippingpath?wid=400&bgcolor=200,100,100&clipPathE=Path%201

Ein anderes Bild mit verschiedenen definierten Pfaden:

http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=Path%201 http://s7d9.scene7.com/is/image/TechSupport/grilltest?wid=400&bgcolor=200,100,100&clipPathE=work%20brown

Frage: Ist es möglich, ein Bild dynamisch basierend auf einem Pfad oder einem Beschneidungspfad zu beschneiden?

Antwort

Diese Funktionalität wurde in unserer Version vom Frühjahr 2014 hinzugefügt.

Es gibt alternative Ansätze: Die IPS-API bietet getPhotoshopPath und getPhotoshopPathNames. Der Bildserver kann basierend auf dem Pfadnamen beschneiden und maskieren.

Frage: Wofür ist der Entwicklermodus?

Antwort

Der Entwicklermodus wird verwendet, wenn Sie eine Vorlage erstellen möchten, ohne die Designtools für Benutzeroberflächen zu verwenden. Eine Vorlage wird in den Entwicklermodus versetzt, wenn in der Vorlage devmode=true ist oder wenn der Parser die Vorlage nicht analysieren kann.

Frage: Wie verwende ich den Befehl zur Anforderung von Vorlagen?

Antwort

Die Image-Serving-Dokumentation enthält einige Informationen zum Befehl zur Anforderung von Vorlagen:

http://microsite.omniture.com/t2/help/en_US/s7/is_ir_api/index.html#is_api-http_ref-template

Aus der Dokumentation:
Wenn template= vorhanden ist, wird das im Anforderungspfad angegebene Objekt nicht als Quelle für Ebene 0 verwendet, sondern kann als ein src= oder mask= durch Verwendung der vordefinierten Pfadvariable $object$ als ein src= Wert an beliebiger Stelle in der Vorlage referenziert werden. catalog::Modifikator des im Anforderungspfad angegebenen Objekts wird nur in Verbindung mit der Ersetzung von $object$ innerhalb der Vorlage angewendet, während catalog: PostModifier immer angewendet wird.

Beispiel:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$

http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

Ursprüngliche URL:

http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&src=ajhco/redjacket&layer=1&src=ajhco/ni_360_270_redborder&wid=360

Fügen Sie eine neue Ebene 0 hinzu, um das Problem zu beheben, dass feine Linien nicht richtig angezeigt werden. Ebene 0 wird auf 270 x 270 verkleinert, da das Bild quadratisch ist und Ebene 1 daher auf 270 x 270 zugeschnitten ist:

http://testvipd4.scene7.com/is/image/ajhco?layer=0&size=360,270&layer=1&size=360,270&src=ajhco/redjacket&layer=2&src=ajhco/ni_360_270_redborder&wid=360

Verwenden Sie die Vorlagenfunktion, damit die Vorlage in einer Vorgabe verwendet werden kann:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?template=jbsimpletemplate&wid=360

so:

http://testvipd4.scene7.com/is/image/ajhco/redjacket?$jbpreset$ http://testvipd4.scene7.com/is/image/ajhco/depot?$jbpreset$

Hier ist die Vorlage (jbsimpletemplate):

devmode=true&layer=0&size=360,270&layer=1&src=$object$&size=360,270&layer=2&src=ajhco/ni_360_270_redborder&size=360,270

Und die Vorgabe (jbpreset):

wid=360&fmt=jpeg&qlt=85,1&op_sharpen=0&resMode=sharp2&op_usm=1,1,6,0&iccEmbed=0&template=jbsimpletemplate

Frage: Warum erstellt SPS keine Vorlage für mein PSD mit einer Ebene?

Antwort

Standardmäßig können nur PSDs mit mehreren Ebenen in eine Vorlage konvertiert werden. Eine Vorlage mit einer Ebene hat keinen Vorteil als Vorlage und dient lediglich dazu, die Anzahl der Assets für das Unternehmen, für das Bild und die Vorlage zu duplizieren.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie