wanichanの日記

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

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

はじめに

前記事に引き続き、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