wanichanの日記

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

Expression Designでドット背景素材を作ってみよう

Expression Blend MVPのElena Kosinskaさんのブログに、Expression Designでドット背景素材を作成する方法についての記事が掲載されていたので、私も試してみました。

f:id:wanichan:20190405002959p:plain

新規ドキュメントを作成する

まず、800x600ピクセルのドキュメントを作成してみましょう。

  1. [ファイル]メニューの[新規作成]をクリックします。
  2. [新規ドキュメント]ダイアログボックスの[プリセット]ボックス一覧から「800x600」を選択して[OK]ボタンをクリックします。

f:id:wanichan:20190405003028p:plain

グラデーション背景を作成する

次に、ドキュメントサイズと同じサイズの四角形を作成し、#65fef6 と #008a7cのグラデーション背景にします。あらかじめグラデーションを設定してから、四角形を描くと効率的に行えます。

f:id:wanichan:20190405003101p:plain

そのあと、描いた四角形をロックします。[レイヤー]パネルの[レイヤー1]を展開して、[4 ポイント]の[ロックの切り替え]をクリックし固定します。

f:id:wanichan:20190405003138p:plainf:id:wanichan:20190405003157p:plain

ドットを配置する

10x10ピクセルのドットを描きます。ツールボックスから下の図のように楕円を選択し、Shiftキーを押しながら対角線上にドラッグすると正円を描けます。

f:id:wanichan:20190405003231p:plain

下の図のように、上の方には10x10ピクセル、下には20x20ピクセルのドットを配置させます。既に描いたドットをコピーして、貼り付けられたドットのサイズを大きくすればいいでしょう。

f:id:wanichan:20190405003257p:plain

水平方向の中央揃え

続いて、水平方向にこれらを中央に配置します。上のドットと下のドットを複数選択(Shift+クリック)して、[配置]ボックスから[水平方向の中央揃え]をクリックします。

f:id:wanichan:20190405003325p:plain

パスのブレンド

  1. これらの2つのドットオブジェクトを選択したまま、[オブジェクト]メニューの[パスのブレンド]をクリックします。

    f:id:wanichan:20190405003352p:plain

  2. [パスのブレンド]ダイアログボックスが表示されたら、[ステップ]ボックスに20から30の数値を入力します。ここでは「22」と入力しました。

    f:id:wanichan:20190405003416p:plain

  3. [OK]ボタンをクリックすると、下の図のようになりました。

    f:id:wanichan:20190405003431p:plain

  4. すると、[レイヤー]パネルには以下のようになっているはずです。

    f:id:wanichan:20190405003509p:plain

  5. すべてのオブジェクトを選択するために、Ctrl+Aキーを押します。
  6. これらを合算するために、[パス]ボックスから[合算]を選択します。

    f:id:wanichan:20190405003538p:plain

繰り返す

  1. これらを左端と右端に配置します。オブジェクトをコピーして貼り付けるとOKです。ガイドを使うと綺麗に配置できるでしょう。

    f:id:wanichan:20190405003606p:plain

  2. 両端のオブジェクトを選択して、[オブジェクト]メニューの[パスのブレンド]をクリックします。
  3. [パスのブレンド]ダイアログボックスが表示されたら[ステップ]ボックスには「45」と入力して[OK]ボタンをクリックします。

    f:id:wanichan:20190405003623p:plain

すると、以下の図のようになると思います。

f:id:wanichan:20190405003644p:plain

Ctrl+Aキーですべて選択して、アクションバーの[パス]ボックスから[合算]をクリックします。

f:id:wanichan:20190405003702p:plain

不透明処理

オプションで不透明処理にするといいでしょう。グラデーションに切り替えて、下の図のように左側は白色の透明度0%、右側も白色で透明度は100%にします。

f:id:wanichan:20190405003724p:plain

f:id:wanichan:20190405003750p:plain
次に、グラデーションの方向を変更します。ツールボックスから[グラデーションの変換]ボタンをクリックして、上から下にドラッグします。

すると、このようになると思います(残念ながら私のPCでは合算に失敗して綺麗にできませんでした orz)。

f:id:wanichan:20190405003829p:plain