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

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

Nipun Tomar[著], わにちゃん@ExpressionTech.jp[訳・編集]
2011年2月14日 from C# Corner > Expression Studio

はじめに

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

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

ドキュメントの新規作成

  1. Microsoft Expression Design 4を開き、[ファイル]メニューの[新規作成]をクリックします。
  2. [新規ドキュメント]ダイアログボックスの[名前]ボックスには「PhotoFrame」と入力し、幅と高さを同じく480ピクセルにして[OK]ボタンをクリックします。
  3. ツールバーのなかから四角形を選択して、ドキュメントと同じ大きさに描きます。

四角形のプロパティの変更

  1. プロパティパネルの[外観]では[塗りつぶし]タブが選択されていることを確認します。
  2. 色パレットの(他の見本)をクリックすると、さまざまな塗りつぶしパターン一覧が表示されます。
  3. そのなかから、[カテゴリ]の[カラー塗りつぶし]欄にある「緑の樹皮 : GRNPARK.png」を選択します。
  4. すると、四角形がこのようになるはずです。
    4.gif
  5. では、ストロークに切り替えて、[カテゴリ]のなかから[デザイン要素2]を展開し「リボン」を選択します。
  6. リボンの幅を30pxにセットします。
  7. すると、ウィンドウのデザインが以下のようになります。
    6.gif
  8. その四角形をコピー&ペーストして、前のより少し小さくします。最初のと同様に2番目の四角形も同じ手順で適用します。一番手っ取り早い方法として、ステータスバーの左端の[変換オプション]をクリックして、[パーセンテージで拡大縮小]をクリックし、コピペを行ってから幅と高さを70%にするとよいでしょう。
  9. 手前に貼り付けられた四角形の塗りつぶしデザインを変更します。[外観]から色パレットの(他の見本)をクリックし、[カテゴリ]の[カラー塗りつぶし]の一覧から「ビーズ細工 : misc99.png」を選択します。
  10. 任意で、そのストロークをお好みに変更することもできます。たとえば
    8.gif
  11. では、[編集]メニューの[XAMLのコピー]をクリックしてExpression Blendに貼り付けます。


  12. Blend 画面はこのようになるはずです。
    10.gif
  13. また、私がしたように、あなたはそれにイメージを加えることができます。

    Running Window:

    11.gif

記事元ソース:C# Corner > Expression Studio > PhotoFrame Using Expression Design 4

Expression Design 最新記事

コメント

▲このページのトップへ