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
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
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
&$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
Antwort
Leider wird derzeit das Importieren von Layer-Transformationen aus PSD-Dateien in die generierte Basisvorlage nicht unterstützt.
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.
Antwort
Wenn ein Bild einen Beschneidungspfad enthält, wird der Beschneidungspfad im Bedienfeld „Pfade“ von Photoshop angezeigt, wobei der Name in Fettschrift angezeigt wird.
Antwort
Zu den Scene7-Dateiformaten, die Beschneidungspfade unterstützen, gehören:
PSD
EPS (Raster)
TIFF
JPG
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
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.
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.
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.
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:
Ein anderes Bild mit verschiedenen definierten Pfaden:
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.
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.
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
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.