質問:ボタンを動的に作成するには、どうすればよいですか?

回答

ダイナミックボタン

Scene7 Image Serving を使用して動的にサイズ変更されたボタンを作成することができます。以下に、IS を使用してセルフサイジング UI ボタンを開発するための基本的なテンプレートを示します。例では、IS で配布されるデフォルトフォントを使用しています。派生アートは、長いテキストラベルを予測できるだけの広さにする必要があります。実際の実装では、高解像度アート、別のフォント、様々な RTF および IS コマンドを使用して、テキストラベルの外観と位置を微調整します。

下の例には、無色の背景があります。テキストは、ボタンサイズがテキスト文字列で操作されるためレイヤー 0 にする必要があります。ラベルと塗りつぶしを表示するには、ボタンアートを中心に透明にする必要があります。

リンク: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

この例には、塗りつぶしを示すボタンアートがあります。テキストを 2 回レンダリングする必要があります。全体的なサイズを示すためにレイヤー 0 で行った後、アート上でもう一度行います。この場合、アートは不透明になります。

リンク: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

ここに、いずれかのお客様の使用例を示します。主な違いと増大した複雑さの原因は、この呼び出しによって透明な PNG ボタンが生成されるという事実にあります。これには、レイヤー 1 およびレイヤー 2 でのネストされた呼び出しが必要です。テンプレートを作成するには、SPS の開発者モードが必要です。

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

テンプレートボタン_小さい_デフォルト

注意:

&$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

質問:PSD ファイルにテキストレイヤーを少し回転を加えて作成しましたが、これを SPS に読み込むと、生成されたテンプレートにこの変換が適用されません。何か別の方法で行う必要ですか?または基本テンプレートの PSD ファイルを読み込む場合、レイヤー変換をサポートしていますか?

回答

残念ながら、PSD ファイルから生成された基本テンプレートへのレイヤー変換の読み込みはサポートしていません。

質問:クリッピングパスとは何ですか?

回答

クリッピングパスは、画像編集ソフトウェアで 2D 画像のカットアウトに使用される、閉じられたベクトルパスまたはシェイプです。クリッピングパスが適用された後にパス内のすべてが含まれます。パス外のすべての部分は出力から除外されます。

画像のクリッピングパスを使用して、DTP アプリケーションに配置する画像内に透明部分を定義できます。さらに、OS X ユーザーは多くのワードプロセッサーファイルに Photoshop 画像を埋め込むことができます。

Photoshop 画像の一部だけが別のアプリケーションでプリントまたは配置されるようにしなければならないこともあります。例えば、描画オブジェクトだけを使用し、背景は除外するような場合です。画像のクリッピングパスを使用すると、前景オブジェクトを分離し、画像を別のアプリケーションでプリントまたは配置するときに他のすべてを透明にすることができます。

注意:パスはベクトルベースなので、ハードエッジがあります。画像クリッピングパスを作成するとき、シャドウ部分などにあるぼかしたエッジの不鮮明さを維持することはできません。

詳しくは、http://help.adobe.com/ja_JP/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7715a.html#WSfd1234e1c4b69f30ea53e41001031ab64-7711a を参照してください。

質問:パスが Photoshop CS6 のクリッピングパスであるかどうかを確認しますか?

回答

画像にクリッピングパスが含まれている場合は、Photoshop の「パス」パネルにクリッピングパスが表示され、その名前が太字で表示されます。

質問:どの Scene7 ファイル形式がクリッピングパスをサポートしていますか?

回答

クリッピングパスをサポートする Scene7 のファイル形式には、以下が含まれます。

PSD

EPS(ラスター)

TIFF

JPG

質問:Scene7 で透明画像を作成するためにクリッピングパスをどのように使用できますか?

回答

アップロードジョブオプションの下にある SPS の画像編集オプションの 1 つは、クリッピングパスからマスクを作成することです。このヘルプページには、このオプションの簡単な説明があります。

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

このオプションを選択し、アップロードされた画像にクリッピングパス(1 つのクリッピングパスだけを持つことができるファイル)として示されるパスが含まれている場合、マスクはアップロードされたファイルのアセット ID に関連付けられます。具体的には、8 ビットのグレースケールマスク画像を参照するマスクパスは、アセットに関連付けられています。マスク画像のクリッピングパスの外側にある領域のアルファチャンネルは完全に透明になり、アルファチャンネルはクリッピングパスの内側にある領域で完全に不透明になります。マスクパスについて詳しくは、Image Serving のドキュメントを参照してください。

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

catalog::MaskPath は、存在する場合、およびアルファチャンネルが関連していない(つまり、プリマルチプライされていない)場合、メイン画像(catalog::Path)のアルファチャンネルを上書きします。画像のアルファがプリマルチプライされている場合、catalog::MaskPath は無視され、メイン画像のアルファチャンネルが常に使用されます。

その結果、Image Server からアセット ID を参照すると、クリッピングパスの外側の領域が透明になります。Image Serving URL で maskuse = off を使用してマスクを無視することもできます。これは、クリッピングパスによって作成された透明部分を効果的に削除します。maskUse について詳しくは、Image Serving のドキュメントを参照してください。

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

マスクから作成された透明部分を表示する例はここにあります。

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

また、マスクを無視して透明部分をなくす方法はここにあります。

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

注意:

用語集

非関連のアルファチャンネル

アルファ透明度を持つ RGB 画像は、2 つの異なる方法で保存できます。1 つは、生の RGB 値とアルファ値を別個の独立したチャンネルとして保存する方法です。これは「非関連」と呼ばれます。「非関連」(「非プリマルチプライ」)のアルファで標準化された PNG は、別個の透明度マスクを持つ画像を劣化なしに保存できます。ほとんどの画像処理プログラムには、RGB とアルファを互いに独立して操作し、アルファをゼロ設定するときに RGB データを失わないようにするための、非関連のアルファがある画像が格納されています。

プリマルチプライアルファチャンネル

もう 1 つは、生でない RGB 値を格納しますが、対応するアルファ値(「関連付けられたアルファ」と呼びます)でプリマルチプライする方法です。
アルファチャンネルが画像で使用されている場合は、アルファ値でカラーをマルチプライすることも共通です。通常、これはプリマルチプライアルファと呼ばれます。「プリマルチプライアルファ」は、アルファ分割でプリマルチプライされたピクセル値を保存します。ピクセルのアルファ情報は、アルファチャンネル自体にのみ保存されるだけでなく、レッド、グリーン、およびブルーのチャンネルに既に「マルチプライ」されています。ソフトウェアのレンダリングは関連付けられたアルファを優先します。これは、RGB 値が既にアルファでマルチプライされているため、アルファ混合を実行する際、より少ない作業がリアルタイムで行われたままになるからです。TIFF は両方の種類のアルファをサポートしますが、多くの場合、ラベルが正しく添付されません。

質問:パスとは何ですか?

回答

パスは、ストレッチと再シェイプが可能で、詳細が失われないベクトルベースの描画です。Photoshop では、パスをレイヤーのベクトルマスクとして使用できます。パスのようなベクトルマスクは、詳細を失わずにサイズを変更できます。1 つのパスをクリッピングパスにし、それを使用して画像内の透明な領域を定義できます。これにより、前景領域を分離し、他のすべてを透明にすることができます。

Scene7 を使用して、クリッピングパスをベースにした SPS にアップロードするベクトルマスクを作成するオプションを使用できます。さらに、クリッピングパスを含むすべてのパス情報を、動的に生成された画像応答の一部として返すこともできます。また、パス情報を使用して、レイヤーまたは画像の透明部分を動的に定義することもできます。

Scene7 の今後のバージョンでは、パスに基づいてレイヤーまたは画像を動的にクロップすることもできます。

質問:特定のパス名に基づいてマスクを作成できますか?

回答

Scene7 にアップロードされた状態で、自動的にマスクを作成するには、クリッピングパスのみを使用できます。ただし、リクエストされた画像に含まれる名前付きパスを参照することはサポートされており、パス定義に入らないすべての画像領域がマスクアウトされます。これにより、パスは標準の Scene7 Image Serving リクエストを介して使用できるため、SPS 内のマスクへのパスを抽出する必要がありません。

質問:パス定義に入らないすべての画像領域を動的にマスクアウトすることは可能ですか?

回答

Scene7 では、パス定義に入らないすべての画像領域をマスクアウトするリクエストされた画像に含まれる名前付きパスを参照するサポートを行います。これにより、パスは標準の Scene7 Image Serving リクエストを介して使用できるため、SPS 内のマスクへのパスを抽出する必要がありません。

画像配信コマンドは clipPathE と呼ばれており、このコマンドについては、ここにあるドキュメントを参照してください。

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

clipPathE のいくつかの使用例は、ここにあります。

呼び出しパスがない、透明度がない:

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

呼び出しパス、透明度が表示される:

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

別のパスが定義された別の画像:

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

質問:パスまたはクリッピングパスに基づいて画像を動的にクロップすることはできますか?

回答

これは、2014 年春リリースで追加された機能です。

代替アプローチがあります。IPS API には、getPhotoshopPath と getPhotoshopPathNames があります。Image Server は、パス名に基づいてクロップおよびマスクできます。

質問:開発者モードは何のためにあるのですか?

回答

開発者モードは、ユーザーインターフェイス(UI)デザインツールを使用せずにテンプレートを作成する場合に使用します。devmode=true がテンプレートにある場合、またはパーサーがテンプレートを解析できない場合、テンプレートは開発者モードに進みます。

質問:テンプレートリクエストコマンドを使用するにはどうすればよいですか?

回答

画像配信ドキュメントには、テンプレートリクエストコマンドに関する一部の情報が含まれています。

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

ドキュメントから:
When template= is present, the object specified in the request path will not be applied as the source for layer 0, but can be referenced as a src= or mask= anywhere in the template by using the predefined path variable $object$ as a src= value.catalog::Modifier of the object specified in the request path is only applied in connection with the substitution of $object$ within the template, while catalog::PostModifier is always applied.

次に例を示します。

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

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

元の 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

ヘアラインが正しく表示されない問題を修正するための新しいレイヤー 0 を追加します。レイヤー 0 は 270x270 にダウンサイズされます。これは、画像が正方形であることにより、レイヤー 1 が 270x270 にクロップされるためです。

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

テンプレート機能を使用して、プリセットでテンプレートを使用できるようにします。

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

次に例を示します。

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

次にテンプレート(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

次にプリセット(jbpreset)を示します。

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

質問:SPS では、単一レイヤーの PSD 用のテンプレートが作成されませんか?

回答

デザインでは、複数のレイヤー PSD だけをテンプレートに変換できます。1 つのテンプレートではテンプレートとして機能しないため、画像およびテンプレートの会社のアセット数を複製することはできません。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー