ホーム > Expression Design > Expression DesignでVista "Chrome" スタイルボタンを作るには

Expression DesignでVista "Chrome" スタイルボタンを作るには

Sam Paye[著], わにちゃん@ExpressionTech.jp[訳・編集]
2010年12月23日 from Expression Blend and Design

はじめに

このブログ投稿では、私は、Expression Designを使って編集や使いこなしやすくするためのあなた自身の"chrome"風のボタンテンプレートを作成する方法を紹介します。この投稿では、Expression Designを今まで使ったことのない超初心者をターゲットとしています。この投稿でもってそれに親しんでいただけることでしょう。最終的に以下のようなボタン作成練習を行います。

Slice 6

それでは始めましょう!

ベースを作る

横150ピクセル、高さ50ピクセルに設定された長方形の基板を作成しましょう。

Slice 1

大きさを調整するために、代わりに下の操作バーの幅と高さの調整をすることで、より正確に設定できます。
ヒント:これらの 2 つのフィールドの間にある 縦横比固定なしアイコンをクリックすると、縦横比固定リンクのオンとオフを切り替えることができます。

action

最後のボタンは角が丸まっています。つまり、四角形の角に丸みももたせる必要があります。四角形を選択し、[プロパティ]パネルにある[四角形の編集]カテゴリの[角の半径]ボックスに 10 px と入力します。

角の半径を10ピクセルに設定

この変更を加えることによって、以下のように四角形に丸みが追加されます。

Slice 2

さあ、このボタンにグラデーション効果を追加しましょう。これを簡単に行うには、[外観]カテゴリのシルバーのグレースケールの[グラデーションの色]ボタンをクリックします。

[グラデーションの色]ボタンをクリック

グラデーションを適用すると、以下のようになります。
Slice 8

枠線をなしにするとより見栄えが良くなりますよね。まず、[外観]カテゴリの[塗りつぶし:グラデーションの色]ボタンの右側にある[ストローク]ボタンをクリックしてストロークの色選択モードに切り替えて、[なし]ボタンをクリックすることによって、ストローク(枠線)を削除します。
ストロークに切り替えて「なし」にする

ストロークをなしにした状態では以下のようになりますが、塗りつぶしのこのグラデーションは左から右になっていますよね。

Slice 3

これを上から下に方向を変更するには、グラデーションの回転角度のツールを使用します。、[外観]カテゴリの右下の小さな[オブジェクト塗りつぶしの移動、拡大縮小、回転、または傾斜]ボタンをクリックして、次に示すように [回転の角度]ボックスにて270 度または-90 度に回転角度を変更します。

1222-4

1222-5

グラデーションの方向を回転させることによって、以下の図のように表示されます。

Slice 4

光沢を追加する

滑らかなグラデーションをしたところで、次のステップに移動する準備ができました。輝きです!またはより明るいレイヤーとも呼ばれるかもしれません。それとも私がそれを「Bing」と呼びたいです。

もう一つのコピーを上部に配置するには、作成したボタンをクリップボードにコピーして、[編集]メニューの[貼り付け]機能を利用します。その後、いくつか調整する必要があります。

新しいボタンを選択して、以下の手順に従って微調整を行います。

  1. 操作バーに戻って、新しいオブジェクトの幅と高さを変更します(146x25)。二つ目のボタンオブジェクトはオリジナルボタンの前面に配置されます。そして上の辺に沿ってそのオブジェクトを配置します。
  2. そして、新しいシェイプの角の半径を8pxに変更することによって、より小さな丸みができます。
  3. 基のオブジェクトを4ピクセル分上方向に移動します。ズーム機能を利用して表示を拡大することによって調整しやすくなります。
  4. グラデーションの角度を90度に変更します。それはあらかじめ基のオブジェクトからコピーと貼り付けを行ったものが-90度に設定されている必要があります。
  5. プロパティパネルに戻ります。グラデーション境界色を黒から白に変更することによって、グラデーションの開始と終了の両方が白に置き換わります。(カラーパレットの白を選択するには、Altキーを押しながら白色をクリックします)。

この時点では、なんだか全然違うように見えます。

Slice 5

同じグラデーション境界にて、[アルファの停止]を0%に変更します。

これで、ボタンがこのように完成しました!

Slice 6

ここに仕掛けがあります。.下のオブジェクトをクリックし、その黒の境界色をあなたの好きな色に変更してみてください。カラーの配色が変えた色に変化します。また、二つ以上のグラデーション境界色を利用することも可能です。

ヒント:クリックすることでグラデーション境界に中間色を追加できます。

ここにいくつかのExpression DesignのChromeスタイルボタンのアセットがあります: Download Chrome Style Button Design File

楽しんでください!

Sam Paye

記事元ソース:Expression Blend and Design > Creating your Own Vista "Chrome" Style Button

Expression Design 最新記事

コメント

コメント

▲このページのトップへ