べた塗りとグラデーションを設定する - Adobe XDのチュートリアル

このレッスンでは、 べた塗りとグラデーションについて 説明します。 教材として、 エクササイズファイルのフォルダにある 「04」フォルダの中の、 「04_03.xd」を使います。 まず、１つ目のアートボードで、 ボタンの角丸長方形の 塗りの色を変更しましょう。 角丸長方形を選択し、 プロパティインスペクターの 「塗り」の左にある長方形をクリックして、 カラーピッカーを表示します。 今回は、 ff 6c 4c と入力して Return キーを押して、 ボタンのベースの色を オレンジに変更しました。 あとでまたこの色を使用したい というような場合には、 左下の「カラースウォッチを保存」を クリックして、 登録しておくと、便利です。 スウォッチは、ドラッグして 順番を入れ替えたり、 要らなくなったら、 カラーピッカーの外にドラッグして、 削除することもできます。 続いて、べた塗りカラー、 グラデーションに変更します。 カラーピッカーの上部にある、 ドロップダウンリストから、 「線形グラデーション」を 選択しましょう。 開始点から、終了点に向かって、 直線的に色が変わる グラデーションが作成されます。 初期設定では、 元々使用していたオレンジ色と、 それを暗くした色で グラデーションが作成されました。 カラーピッカー上の この横長のグラデーションエディタでは、 グラデーションのカラー分岐点が、 小さい円で表示されています。 この右のカラー分岐点をクリックし、 色を変更しましょう。 カラースウォッチのピンク色、 FE3A7C と表示されていますが、 このピンク色をクリックします。 そうすると、オレンジから ピンク色に色が変化する グラデーションに変わりました。 カンバス上のグラデーションエディタを ドラッグすることで、 グラデーションの位置や、 方向を変更することができます。 ２枚目のアートボードに行きます。 このアートボード上には、 楕円が用意されていて、 塗りをクリックすると、 すでに線形グラデーションが 作られています。 カラーピッカーの上部で、 ドロップダウンリストから、 円形グラデーションを選択しましょう。 円形グラデーションは、 開始点から、終了点に向かって、 このように放射状の グラデーションが作成されます。 ハンドルをドラッグして、 位置や…