Adobe Photoshop ファイルを Microsoft Expression Blend プロジェクトにインポートすれば、静的なアートワークを魅力溢れる対話型コンテンツに一新できます。
[Adobe Photoshop ファイルのインポート] ダイアログ ボックスのレイヤー オプションを理解しておくと、Photoshop ファイルを Expression Blend プロジェクトにすばやく効率的に統合できます。
レイヤー オプションとサポートされる機能の詳細については、「互換イメージ」、「レイヤー オプションとツール」、「サポートされる Photoshop 機能」を参照してください。
Photoshop ファイルをインポートするには
[ファイル] メニューで、[Adobe Photoshop ファイルのインポート] をクリックします。
[Adobe Photoshop ファイルのインポート] ダイアログ ボックスで、インポートするファイルを見つけて [開く] をクリックします。
[Adobe Photoshop ファイルのインポート] ダイアログ ボックスの左側に、PSD ファイルがプレビュー表示されます。右側には、ファイル内の個々のレイヤーの一覧と、各レイヤーの重要な情報や互換イメージが表示されます。
![[Adobe Photoshop ファイルのインポート] ダイアログ ボックス](images/hh134795.f31f093f-396a-4a94-9fa3-8419ed33f764(ja-jp,expression.40).png "[Adobe Photoshop ファイルのインポート] ダイアログ ボックス")
[Adobe Photoshop (.psd) ファイルのインポート] ダイアログ ボックスで、次の操作を行います。
インポートするレイヤーを選択します。または、[互換イメージ] を選択して、1 つに結合されたイメージをインポートします。
互換イメージの詳細については、「互換イメージ」を参照してください。
レイヤーの横に情報アイコン
.png "情報アイコン")
が表示される場合は、ポインターを情報アイコン の上に置いて情報を確認し、次のいずれかの操作を行います。レイヤーを編集可能なコンテンツとしてインポートする場合は、レイヤーを結合または平面化しないでください。[レイヤーをインポートする形式] では [編集可能なコンテンツ] が既定で選択されています。
.gif "important note")
重要 :レイヤーを編集可能なコンテンツとして Expression Blend にインポートすると、レイヤーの外観が Photoshop での外観と異なる場合があります。詳細については、「情報アイコン」の「編集可能なコンテンツ」を参照してください。
.gif "Note")
メモ :Windows Phone でサポートされる Photoshop の機能には限りがあるため、PSD ファイルを Windows Phone プロジェクトにインポートしたときに、一部のレイヤーで [平面化されたビットマップ] が既定で選択されます。
レイヤーの外観を維持するには、レイヤーの結合または平面化を行います。
レイヤーを結合するには、結合するレイヤーを選択して右クリックして、[マージ用グループ] を選択します。
レイヤーを平面化するには、[レイヤーをインポートする形式] で [平面化されたビットマップ] を選択します。
重要 :結合または平面化したレイヤーは、ラスタライズされた 1 つのイメージとしてインポートされます。結合または平面化したレイヤーは Expression Blend で編集できません。詳細については、「情報アイコン」の「平面化されたビットマップ」および「レイヤーの結合」を参照してください。
左側のパネルに表示されるイメージのプレビューが、希望どおりの外観であることを確認します。
[OK] をクリックします。
インポートしたファイルと同名の新しい Canvas オブジェクトがドキュメントに追加されます。[オブジェクトとタイムライン] パネルで、Canvas オブジェクト (この例では Photoshop_Layout という名前のオブジェクト) の下に、オブジェクトとしてインポートされたレイヤーがすべて表示されます。フォルダーを指定しなかった場合は、[プロジェクト] パネルのルート フォルダー内に、関連する PNG ファイルがすべて入った新しいフォルダー (この例では Photoshop_Layout_Images という名前のフォルダー) が作成されます。
.png "Adobe Photoshop ファイルのインポート プロジェクト パネル")
互換イメージ
互換イメージとは、元の PSD ファイルに含まれているすべての可視レイヤーを 1 つのスナップショットにしたものです。互換イメージは、Photoshop で PSD ファイルを保存するときに [互換性を優先] オプションを選択すると作成されます。可視レイヤーをすべて含む平面化された 1 つのイメージ ファイルが自動的に生成、保存され、保存した PSD ファイル内で参照されます。
[互換イメージ] を選択すると、PSD ファイルを 1 つの結合されたイメージとして迅速かつ簡単にインポートできます。このオプションは、PSD ファイルのレイヤーを Expression Blend で編集する必要がなく、平面化した 1 つのビットマップとして使用する場合に便利です。
互換レイヤーをプレビューするには、右側のパネルで互換レイヤーのサムネイルの上にポインターを置きます。
互換イメージをインポートするには
- [Adobe Photoshop ファイルのインポート] ダイアログ ボックスで、[互換イメージ] チェック ボックスをオンにします。[OK] をクリックします。
| メモ : |
|---|
互換レイヤーをインポートする場合は、その他のレイヤーはインポートされません。 |
レイヤー オプションとツール
Expression Blend では、PSD ファイルに含まれている各レイヤーの名前が維持され、各レイヤーが個々のオブジェクトとレイアウト コンテナーとしてインポートされるため、これらのレイヤーを簡単に操作できます。Photoshop ファイルをインポートする場合は、レイヤーを表示し、名前を変更した上で、インポートするレイヤーを選択します。
レイヤーの選択
インポートするレイヤーを選択するには、各レイヤーの左側に表示されるチェック ボックスをオンまたはオフにします。
ずべてのレイヤーをインポートする場合は、パネル上部の [インポートするすべてのレイヤーを選択] チェック ボックスをオンにします。
すべてのレイヤーの選択を解除するには、[インポートするすべてのレイヤーを選択] チェック ボックスをオフにします。
一部のレイヤーをインポートする場合は、右側のパネルで各レイヤーのチェック ボックスをオンまたはオフにします。
レイヤーの選択を変更するたびに、左側のプレビューが更新されます。
レイヤー名
Photoshop で使用していたレイヤー名は維持され、各レイヤーのサムネイルの右側に表示されます。レイヤー名を変更するには、レイヤーを右クリックして [名前の変更] をクリックするか、レイヤーをダブルクリックして、レイヤー名フィールドに名前を直接入力します。
サムネイル
右側のパネルでレイヤーのサムネイルの上にポインターを置くと、Photoshop のレイヤーの拡大版を表示できます。
.png "Adobe Photoshop ファイルのインポートのサムネイルのプレビュー")
レイヤー構造とグループ
Photoshop で作成したレイヤー構造とグループは維持されます。グループには、[展開] 矢印 .png "Hh134795.6375953d-074c-421a-bbb3-6f5055b67b64(ja-jp,Expression.40).png")
と [折りたたみ] 矢印 .png "折りたたみ")
が表示されるため、簡単に識別できます。レイヤー構造を表示するには、[展開] をクリックします。グループを折りたたむには、[折りたたみ] をクリックします。
レイヤーの種類
レイヤーの種類には、イメージ、ベクトル、テキストがあり、各レイヤーにその種類を示すアイコンが表示されます。ポインターを種類アイコンの上に置くと、そのレイヤーの種類が表示されます。
.png "Adobe Photoshop ファイルのイメージ レイヤーのインポート")
テキスト オブジェクトとベクトル オブジェクトは、編集可能なコンテンツまたは平面化されたビットマップとしてインポートできます。テキスト オブジェクトとベクトル オブジェクトのインポート オプションを変更するには、レイヤーをクリックし、[レイヤーをインポートする形式] で [編集可能なコンテンツ] または [平面化されたビットマップ] をクリックします。
オブジェクトを編集可能なコンテンツとしてインポートする方法の詳細については、「情報アイコン」の「編集可能なコンテンツ」を参照してください。
オブジェクトを平面化したビットマップとしてインポートする方法の詳細については、「情報アイコン」の「平面化されたビットマップ」を参照してください。
| メモ : |
|---|
編集可能なコンテンツまたは平面化されたビットマップとしてインポート可能なコンテンツが含まれているレイヤーを選択すると、互換イメージの下にインポート オプションが表示されます。 |
イメージ レイヤーも、編集可能なコンテンツまたは平面化されたビットマップとしてインポートできます。
たとえば、イメージ レイヤーには不透明度マスク、ベクトル マスク、およびドロップ シャドウ レイヤー スタイルが設定されている場合があります。このレイヤーを編集可能なコンテンツとして Expression Blend にインポートした場合は、次のコンテンツがプロジェクトに追加されます。
PNG 形式のイメージ ファイル
PNG 形式の不透明度マスク
ベクトル マスクの Clip プロパティ
ドロップ シャドウ レイヤー スタイルの DropShadowEffect
イメージ レイヤーを平面化したビットマップとしてインポートした場合は、複数のレイヤーからラスタライズされた 1 つのイメージが作成され、その PNG ファイルが Expression Blend にインポートされます。
情報アイコン
情報アイコン が表示される場合は、このアイコンの上にポインターを置くと詳細情報が表示されます。PSD ファイルで使用されているが、Expression Blend ではサポートされていない機能に関する補足情報が示されます。
.png "Adobe Photoshop ファイルの InformationTooltip のインポート")
| メモ : |
|---|
Expression Blend ではサポートされない機能を含むレイヤーがグループに含まれている場合は、そのグループのコンテナー レイヤーに情報アイコンが表示されます。詳細については、グループのリストを展開して、情報アイコンが表示されているレイヤーを確認してください。 |
編集可能なコンテンツ
レイヤーを編集可能なコンテンツとして Expression Blend にインポートすると、レイヤーの外観が Photoshop での外観と異なる場合があります。その場合は、オブジェクトのプロパティを変更して、Expression Blend でのコンテンツの外観を変更できます。
次に、Expression Blend で編集できる Photoshop の要素について説明します。Expression Blend でオブジェクトのプロパティを変更する場合は、「説明」列で該当するプロパティを確認してください。
Photoshop の要素 |
Expression Blend の要素 (XAML) |
説明 |
テキスト レイヤー |
TextBlock |
Photoshop のテキスト レイヤーは TextBlock メモ :
WPF プロジェクトと Silverlight プロジェクトでの TextBlock オブジェクトの取り扱いについては、「テキスト フローへのオブジェクトの追加」を参照してください。
|
シェイプ レイヤー |
Path |
Photoshop のシェイプ レイヤーは Path としてインポートされます。元のベクトル マスクのプロパティは、Expression Blend の Data プロパティに割り当てられます。Data プロパティは、[プロパティ] パネルの [外観] カテゴリの [データ] フィールドに表示されます。 |
べた塗り |
Path |
Photoshop のべた塗りは、Path としてインポートされます。元の Fill プロパティは、Expression Blend では [単色ブラシ] |
線形グラデーション塗り |
Path |
Photoshop の線形グラデーション塗りは Path としてインポートされます。元の Fill プロパティは、Expression Blend では [グラデーション ブラシ] |
円形グラデーション塗り |
Path |
Photoshop の円形グラデーション塗りは Path としてインポートされます。元の Fill プロパティは、Expression Blend では [グラデーション ブラシ] |
パターン塗りまたはサポート対象外のグラデーション塗り (菱形、円錐、反射) |
Path |
Photoshop のパターン塗り、または Expression Blend でサポートされない塗りは、Path としてインポートされます。元の Fill プロパティは、Expression Blend では ImageBrush に適用されている Fill プロパティに割り当てられます。ImageBrush プロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。 |
グループ |
Canvas |
Photoshop のグループは Canvas |
イメージ レイヤー |
Image |
Photoshop のイメージ レイヤーは Image オブジェクトとしてインポートされます。また、PNG ファイルがプロジェクトに追加されます。この PNG ファイルが、Image オブジェクトのソースとなります。各レイヤーは、対応する PNG ファイルと一緒に Image オブジェクトとしてインポートされます。 |
ドロップ シャドウ レイヤー スタイル |
DropShadowEffect |
ドロップ シャドウ レイヤー スタイルをインポートすると、インポートしたオブジェクトに DropShadowEffect が適用されます。ドロップシャドウ効果を編集するには、[オブジェクトとタイムライン] パネルで、適用された DropShadowEffect を選択し、[プロパティ] パネルで直接そのプロパティを編集します。 メモ :
DropShadowEffect は Windows Phone プロジェクトではサポートされません。
|
レイヤー マスク |
OpacityMask (ImageBrush に適用) |
Photoshop のレイヤー マスクは、ImageBrush に適用された OpacityMask としてインポートされます。OpacityMask プロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。また、PNG ファイルがプロジェクトに追加されます。この PNG ファイルが、ImageBrush のソースとなります。 メモ :
レイヤー マスクは Windows Phone プロジェクトでサポートされますが、使用しないことをお勧めします。
|
イメージ レイヤーまたはテキスト レイヤー上のベクトル マスク |
Image または TextBlock の Clip プロパティ |
イメージ レイヤーまたはテキスト レイヤー上の Photoshop ベクトル マスクは、Image または TextBlock に適用された Clip プロパティとしてインポートされます。Clip プロパティは、[プロパティ] パネルの [その他] カテゴリに表示されます。 メモ :
Clip プロパティは、Windows Phone プロジェクトでサポートされますが、一部機能に制限があります。
|
.png "Hh134795.343296b4-5c7d-4145-84cc-91b08ba67a1b(ja-jp,Expression.40).png")
としてインポートされます。元の Photoshop の Text プロパティは、Expression Blend の Text プロパティに割り当てられます。Text プロパティは、[プロパティ] パネルの [テキスト] カテゴリに表示されます。.png "Hh134795.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.40).png")
に適用されている Color プロパティと OpacityMask プロパティに割り当てられます。[Solid color brush] のプロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。.png "Hh134795.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(ja-jp,Expression.40).png")
に適用されている [線状グラデーション] ブラシ .png "Hh134795.4279aa9a-15c2-4435-9937-6848afc38618(ja-jp,Expression.40).png")
のプロパティに割り当てられます。[放射状グラデーション] ブラシのプロパティは、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。.png "Hh134795.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(ja-jp,Expression.40).png")
としてインポートされます。個々のレイヤーは Canvas の子としてインポートされます。レイヤーを編集可能なコンテンツとしてインポートするには
レイヤーを編集可能なコンテンツとしてインポートする場合は、レイヤーを結合または平面化しないでください。[レイヤーをインポートする形式] では [編集可能なコンテンツ] が既定で選択されています。
メモ :Windows Phone でサポートされる Photoshop の機能には限りがあるため、Photoshop ファイルを Windows Phone プロジェクトにインポートしたときに、一部のレイヤーで [平面化されたビットマップ] が既定で選択されます。
平面化されたビットマップ
レイヤーを平面化されたビットマップとしてインポートすると、そのレイヤーのラスタライズされたイメージ (PNG 形式) が作成されます。ビットマップを平面化すると、レイヤーに関連付けられているレイヤー スタイルがすべてラスタライズされます。その PNG ファイルが Image オブジェクトのソースとして使用されます。
レイヤーを平面化されたビットマップとしてインポートするには
- 平面化されたビットマップとしてインポートするレイヤーを選択し、[Adobe Photoshop ファイルのインポート] ダイアログ ボックスの下部の [レイヤーをインポートする形式] で [平面化されたビットマップ] を選択します。
レイヤーの結合
複数のレイヤーを結合してインポートすると、ラスタライズされた 1 つの PNG 形式のイメージが作成されます。その PNG ファイルが Image オブジェクトのソースとして使用されます。
レイヤーを結合するには
- Ctrl キーを押しながら、結合に適したレイヤーをクリックして選択します。選択したレイヤーを右クリックして、[マージ用グループ] をクリックします。
| メモ : |
|---|
結合を解除するには、結合されたレイヤーを選択して、[レイヤーのグループ化解除] をクリックします。 |
レイヤー スタイル
レイヤーにレイヤー スタイルが適用されている場合は、レイヤーの横にレイヤー効果アイコン .png "効果アイコン")
が表示されます。レイヤー スタイルは、[平面化されたビットマップ] インポート オプションを選択するか、レイヤーを他のレイヤーと結合することでインポートできます。
レイヤーの平面化または結合の詳細については、「情報アイコン」を参照してください。
.png "Adobe Photoshop ファイルのレイヤー効果のインポート")
.gif "tip note") ヒント : |
|---|
情報アイコン |
マスク
レイヤー マスクとベクトル マスクは、関連付けられているレイヤーにそれぞれサムネイルとして表示されます。レイヤー マスクとベクトル マスクは両方とも、関連付けられているレイヤーを選択するとインポートされます。
レイヤー マスクは不透明度マスクとしてインポートされ、[プロパティ] パネルの [ブラシ] カテゴリに表示されます。
ベクトル マスクはパスとしてインポートされるか、インポート後のオブジェクトにクリッピング パスとして適用されます。たとえば、ベクトル マスク付きのべた塗りは、マスクのジオメトリと塗りを使用するベクトル オブジェクトとしてインポートされます。ベクトル マスク付きのイメージは、ベクトル マスクのジオメトリを使用するクリッピング マスク付きのイメージ オブジェクトとしてインポートされます。
.png "Adobe Photoshop ファイルのベクトル マスクのインポート")
レイヤー マスクとベクトル マスクのインポートの詳細については、「情報アイコン」の「編集可能なコンテンツ」を参照してください。
レイヤーにクリッピング マスクが適用されている場合は、レイヤーの横に [クリッピング マスク] アイコンが表示されます。クリッピング マスクをインポートするには、クリッピング マスク レイヤーとその参照先のレイヤーをすべて選択し、これらを結合します。
.png "Adobe Photoshop ファイルのクリッピング マスクのインポート")
レイヤーの結合の詳細については、「情報アイコン」を参照してください。
情報アイコン の上にポインターを置くと、クリッピング マスクのインポート方法に関するヒントが表示されます。
Expression Blend でサポートされる Photoshop 機能
Expression Blend では、次の Photoshop 機能をサポートしています。Expression Blend で編集できる機能については、その旨を記載しています。
テキスト スタイル
Photoshop のテキスト スタイルは、Expression Blend では TextBox に適用された Text プロパティに割り当てられます。
次のテキスト スタイルは Photoshop からインポートして、Expression Blend で編集できます。
FontFamily
FontSize
Foreground
Underline
Subscript (WPF のみ)
Superscript (WPF のみ)
StrikeThrough (WPF のみ)
FauxBold
FauxItalic
Text
AllCaps
Left Align Text
Center Text
Right Align Text
AuthoHyphenate (WPF のみ)
RenderTransform (拡大縮小のみ)
Expression Blend で編集可能なコンテンツの詳細については、「情報アイコン」の「編集可能なコンテンツ」を参照してください。
ブレンド モード
ブレンド モードの外観を維持するには、関連レイヤーを結合します。関連レイヤーを結合すると、そのグループ用にインポートされているラスタライズされたイメージにブレンドが適用されます。
レイヤーの結合の詳細については、前述の「情報アイコン」の「レイヤーの結合」を参照してください。
調整レイヤー
次の調整レイヤーを Photoshop からインポートできます。
明るさ・コントラスト
白黒
チャンネル ミキサー
カラー バランス
トーンカーブ
露光量
階調の反転
レベル補正
ポスタリゼーション
レンズ フィルター
2 階調化
グラデーション マップ
色相・彩度
特定色域の選択
自然な彩度
サポートされている調整レイヤーの外観を維持するには、関連レイヤーを結合します。関連レイヤーを結合すると、そのグループ用にインポートされているラスタライズされたイメージに調整レイヤーが適用されます。
| ヒント : |
|---|
サムネイルの上にポインターを置くと、調整レイヤーが適用された元のイメージの拡大版を表示できます。Expression Blend にインポートした場合のイメージをプレビューするには、適用されている関連調整レイヤーを選択または選択解除して、そのイメージを [Adobe Photoshop ファイルのインポート] で確認します。 |
レイヤーの結合の詳細については、前述の「情報アイコン」の「レイヤーの結合」を参照してください。
レイヤー スタイル
Expression Blend では、ドロップ シャドウ レイヤー スタイルをインポートして編集できます。
ドロップ シャドウ レイヤー スタイルをインポートすると、インポートしたオブジェクトに DropShadowEffect が適用されます。ドロップシャドウ効果を編集するには、[オブジェクトとタイムライン] パネルで、適用された DropShadowEffect を選択し、[プロパティ] パネルで直接そのプロパティを編集します。
| メモ : |
|---|
ドロップ シャドウ レイヤー スタイルを編集可能なコンテンツとしてインポートした場合は、レンダリング結果が Photoshop での外観と異なる場合があります。ドロップ シャドウ レイヤー スタイルを平面化または結合した場合は、Photoshop での外観と同じレンダリング結果になりますが、編集はできなくなります。 Expression Blend のドロップ シャドウ レイヤー スタイルの詳細については、前述の「情報アイコン」の「編集可能なコンテンツ」を参照してください。 |
サポートされているレイヤー スタイルの外観を維持するには、関連レイヤーを結合します。関連レイヤーを結合すると、そのグループ用にインポートされているラスタライズされたイメージにレイヤー スタイルが適用されます。
次のレイヤー スタイルは、Expression Blend でサポートされますが、編集はできません。
シャドウ (内側)
光彩 (外側)
光彩 (内側)
ベベルとエンボス
サテン
カラー オーバーレイ
グラデーション オーバーレイ
レイヤーの結合の詳細については、前述の「情報アイコン」の「レイヤーの結合」を参照してください。
次のレイヤー スタイルはサポートされていません。
パターン オーバーレイ
境界線
グラデーション
Expression Blend では、線形グラデーションと円形グラデーションをインポートして編集できます。その他の種類のグラデーションはすべてインポート時にラスタライズされ、Expression Blend では編集できなくなります。カラーの分岐点はグラデーション ブラシとしてインポートされ、Expression Blend ではグラデーションの適用先オブジェクトの Fill プロパティになります。透明度の分岐点もグラデーション ブラシとしてインポートされ、OpacityMask プロパティに設定されます。
| メモ : |
|---|
線状または放射状のグラデーションを編集可能なコンテンツとしてインポートした場合は、レンダリング結果が Photoshop での外観と異なる場合があります。線状または放射状のグラデーションを平面化または結合した場合は、Photoshop での外観と同じレンダリング結果になりますが、編集はできなくなります。 |
パターン
パターンは Path としてインポートされ、元の Fill プロパティは、Expression Blend では ImageBrush に適用されている Fill プロパティに割り当てられます。
パターンの詳細については、「情報アイコン」の「編集可能なコンテンツ」を参照してください。
関連項目
概念
イメージとアートの挿入
Adobe Photoshop ファイルのインポート
その他のリソース
Copyright ©2011 by Microsoft Corporation. All rights reserved.