ホーム > Expression Design > Expression Designで雲を描いてみよう

Expression Designで雲を描いてみよう

わにちゃん@ExpressionTech.jp[著]
2010年12月24日 from Expression Web & FrontPage blog

はじめに

Expression Blend MVPのElenaさんのブログに魅力的な記事を見つけました。
Helen > Drawing the cloud button

そこで、以下のようなクラウドボタンをExpression Designで作っていきましょう!

cloud

雲を形成する

  1. [ファイル]メニューの[新規作成]をクリックします。
  2. [新規ドキュメント]ダイアログボックスで[OK]ボタンをクリックします。
  3. ツールボックスから楕円を選択します。
    四角形ボタンしかない場合は、その[四角形]ボタンを右クリックして、[楕円]をクリックします。
    [四角形]ボタンを右クリックして、[楕円]をクリック
  4. ドキュメントの中央に楕円を描きます。
  5. 楕円を選択して、50ピクセルの正方形に整えます。もし縦横比のリンクを解除していない場合は1222-1をクリックして下の図のように 解除し、縦と横のサイズをそれぞれ50pxに設定します。
  6. 続いて、座標を指定します。Xボックスに 300px、Yボックスに200pxと入力します。
    1
  7. [プロパティ]パネルにおいて、色コード #0096FF 指定します。
  8. 下の図のように、ストロークなしにします。
    1224-3
  9. 作成したオブジェクトをいくつか複製します。[編集]メニューの[コピー]をクリックして、[編集]メニューの[貼り付け]をクリックすることで、元のオブジェクトの前面に貼り付けられます。いくつかの丸を組み合わせてください。
    2
  10. 次に、これらのオブジェクトをすべて選択し、ステータスバーの右端にある[パス]のボックスの▼をクリックして[合算]を選択します。
    1224-4

グラデーション効果を付ける

  1. [プロパティ]パネルの[外観]カテゴリにて、ボタンをクリックしてグラデーションにします。
  2. グラデーション境界の開始バーを選択して、スポイトアイコンの右側の色コードを黒の#000000から#00B6FF に変更します。
    1224-5
  3. 続いて、最後の白(#FFFFFF)に設定されたグラデーション境界の色を#B6EAFFに設定します。
    1224-6

グラデーションの方向を変える

  1. ツールボックスから[グラデーションの変換]ボタンをクリックします。
    1224-7
  2. 縦方向に上から下までドラッグします。
    1224-8
  3. Ctrl+Cキーでコピーをします。Ctrl+Fキーでオブジェクトをコピーをするために検索します。
  4. ステータスバーの左端の[変換オプション]をクリックして、[パーセンテージで拡大縮小]をクリックします。
    1224-9
  5. 幅と高さを90%にセットすることで、より小さくなります。
    1224-10
  6. [プロパティ]パネルのグラデーション境界の左端のバーをクリックします。
    1224-11
  7. Altキーを押しながらパレット色一覧から白色をクリックします。
    1224-12
  8. 右端のグラデーションの境界バーをクリックして、[アルファの停止]ボックスに「5%」と入力します。
    1224-13

影をつける

  1. ツールボックスから[楕円]を選択し、ドキュメントの中央に描きます。
  2. ステータスバーの[変換オプション]にて[パーセンテージで拡大縮小]のチェックをはずします。
  3. 幅150、高さ130ピクセル、X座標は355、Y座標は265と指定します。
    1224-14
  4. Shiftキーを押しながら両方のオブジェクトを選択し、[パス]ボックスの▼をクリックして[背面マイナス前面]を選択します。
    1224-15
    すると、以下の図のようになるはずです。
    1224-16
  5. 次に、グラデーションの方向を変更します。ツールボックスから[グラデーションの変換]ボタンをクリックして、上から下にドラッグします。
    1224-17
  6. 背面の雲を選択してCtrl+Cでコピーし、そのあとCtrl+Fキーを押して選択します。
  7. ステータスバーの[変換オプション]にて[パーセンテージで拡大縮小]のチェックを付けます。
  8. 幅80%、高さ10%、Y座標を270にします。
    1224-18
  9. 色を#2B5574にして、[ストロークの不透明度]では30%にします。
    1224-19
  10. すべて選択します。
  11. [整列]メニューの[グループ化]もしくはCtrlキーを押しながらGキーでグループ化します。
  12. [レイヤー]パネルの[レイヤー1]を展開すると、[グループ化]が表示されます。ここでダブルクリックして名前を変更することも可能です。
    1224-20
    1224-21

Expression Design 最新記事

コメント

▲このページのトップへ