wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

Expression Design 4を使ったフォトフレーム

※このエントリーは、ExpressionTech.jpに掲載されていたC# Corner翻訳記事です。

記事元ソース:PhotoFrame Using Expression Design 4  by Nipun Tomar

はじめに

デジタル革命ウェブサイトの時代では、世界で新しい顧客をつなげるビジネスを充実させるのに重大な役割を果たしています。Microsoft Expression Designにおいては、モダンで標準に準拠したWebサイトや、ストリーミングビデオ、そしてWebグラフィックを作るのにとても簡単です。それは、写真を最適化して、イメージがウェブサイトと他の創造活動の一助となるのに使用されます。

ここに私はExpression Designを使ったフォトフレームを作成し、あなたに役に立つ記事を提供しましょう。

ドキュメントの新規作成

  1. Microsoft Expression Design 4を開き、[ファイル]メニューの[新規作成]をクリックします。

    f:id:wanichan:20190527095100p:plain

  2. [新規ドキュメント]ダイアログボックスの[名前]ボックスには「PhotoFrame」と入力し、幅と高さを同じく480ピクセルにして[OK]ボタンをクリックします。

    f:id:wanichan:20190527095120p:plain

  3. ツールバーのなかから四角形を選択して、ドキュメントと同じ大きさに描きます。

    f:id:wanichan:20190527095136p:plain

フレーム画像の作成

  1. プロパティパネルの[外観]では[塗りつぶし]タブが選択されていることを確認します。
  2. 色パレットのf:id:wanichan:20190527095254g:plain(他の見本)をクリックすると、さまざまな塗りつぶしパターン一覧が表示されます。

    f:id:wanichan:20190527095327p:plain

  3. そのなかから、[カテゴリ]の[カラー塗りつぶし]欄にある「緑の樹皮 : GRNPARK.png」を選択します。

    f:id:wanichan:20190527095443p:plain

  4. すると、四角形がこのようになるはずです。

    f:id:wanichan:20190527095506g:plain

  5. では、ストロークに切り替えて、[カテゴリ]のなかから[デザイン要素2]を展開し「リボン」を選択します。

    f:id:wanichan:20190527095546p:plainf:id:wanichan:20190527095600p:plain

  6. リボンの幅を30pxにセットします。

    f:id:wanichan:20190527095632p:plain

  7. すると、ウィンドウのデザインが以下のようになります。

    f:id:wanichan:20190527095658g:plain

フレームウィンドウの作成

  1. その四角形をコピー&ペーストして、前のより少し小さくします。最初のと同様に2番目の四角形も同じ手順で適用します。一番手っ取り早い方法として、ステータスバーの左端の[変換オプション]をクリックして、[パーセンテージで拡大縮小]をクリックし、コピペを行ってから幅と高さを70%にするとよいでしょう。

    f:id:wanichan:20190527095748p:plain

  2. 手前に貼り付けられた四角形の塗りつぶしデザインを変更します。[外観]から色パレットのf:id:wanichan:20190527095254g:plain(他の見本)をクリックし、[カテゴリ]の[カラー塗りつぶし]の一覧から「ビーズ細工 : misc99.png」を選択します。

    f:id:wanichan:20190527095818p:plain

  3. 任意で、そのストロークをお好みに変更することもできます。たとえば

    f:id:wanichan:20190527095909g:plain

Expression Blendに貼り付け

  1. では、[編集]メニューの[XAMLのコピー]をクリックしてExpression Blendに貼り付けます。

    f:id:wanichan:20190527095934p:plain

  2. Blend 画面はこのようになるはずです。

    f:id:wanichan:20190527095956g:plain

  3. イメージを加えた場合の動作ウィンドウは以下の通りです。

    f:id:wanichan:20190527100221g:plain