Vectornator、カラーピッカーで色を指定。

〽️ カラーピッカーを開いてみよう。 〽️ カラーピッカー本体。 〽️ フィールドとスライダー。 〽️ 色を選択してみよう。 〽️ 色のエディットは他にも沢山。







⬆︎Vectornator使い方についてのまとめページはこちら。

カラーピッカーを開いてみよう。


こんにちは、「ふ」です。 今回はVectornatorのカラーピッカーを使った色の指定方法について紹介します。なかなか奥が深いので、1ページを割いてお伝えすることにしました。

オブジェクトを選択し、インスペクターツールのスタイルタブを開きます。

塗り/線/影、それぞれにおいて現在指定している色が表示されています。
影のところで、「目」のマークに斜線が引かれているのは現在未指定という意味です。

カラーピッカーを開くには、左側の色の部分をタップしましょう。

ピッカーが開きました。機能がいっぱいありそうですね。

全体を見てみると、4つのセクションに分かれています。


① カラーピッカー本体

② パレット

③ カラーブレンド

④ カラー調整

タブ内の他の部分をタップするとピッカーが閉じられます。

今回は①のカラーピッカー本体の使い方について、探っていきたいと思います。





 

カラーピッカー本体。


カラーピッカー本体部分を見ていきます。

① 塗り潰しモード

塗り潰しモードは、fill(塗り)を選択した時のみエディットすることができます。 ベタ塗り、線形グラデーション、円形グラデーションの3種類。

② カラープレビュー

その下にあるカラープレビュー。右側に前回(オブジェクトを選択した時点)に指定されていた色が表示され、左には現在ピックしている色が表示されます。

③ 色の選択エリア

ここで実際の色の選択を行います。次の章で詳細について触れていきます。

④ リセントカラー

色を選択する場合、何通りか試すこともあると思いますが、 カラーピッカーで色をピックする度にここに色が登録されていきます。
色が登録されているマスをタップすると、オブジェクトもその色に変化します。

⑤ Hexコード

色をHexコード(16進数表記)で指定することもできる。





 

フィールドとスライダー。


色の選択エリア。フィールドから選ぶ方法と、スライダー表示で選ぶことができます。

カラーピッカーの1番下にある2つのボタン。これで切り替えることができます。

◼︎ 長方形フィールド

切り替えボタンの丸が3つ重なったほうを選ぶと、長方形フィールドが出現。

①フィールド

ここをドラッグすることで、彩度と明度を決定します。


②Hue(色相)スライダー

元となる色相を選びます。


③不透明度スライダー

右端に寄せると不透明度100%、左端に寄せると完全な透明に成増。

スライダー

切り替えボタンのこっちをタップすると、スライダーが出現。

ここをタップすることで、2種類のスライダーに切り替えることができます。

RGB+A。 red(赤)、green(緑)、blue(青)の3要素にalpha(不透明度)を加えたもの。

HSB+A。 hue(色相)、saturation(彩度)、brightness(明度)の3要素にalpha(不透明度)を加えたもの。

各スライダーの右にある数値ボタンを押すと、テンキーが出現します。
値を入力しての指定も可能。「↩︎」キーでオブジェクトに反映されます。





 

色を選択してみよう。


では実際に色を指定してみましょう。
線は黒、影なしのシンプルな長方形にエディットしていきます。選択ツールでオブジェクトを選んでおいてください。

スタイルタブの「塗り」のカラーパレットを開きます。

今回はグラデーションは施さず、ベタ塗りモードにしました。

色の指定は長方形フィールドで行うこととします。色相スライダーで、青っぽくしてみましょう。

フィールド上をドラッグして、明るさや色の濃さを調整しましょう。

このときカラープレビューのところには、エディットをする前の状態(オレンジ)が右側に、現在ピックしている色が左側に表示されます。

オレンジの方をタップすると、オブジェクトの色もそれに反映されます。 色を変更しようとしていて、「やっぱり元のまんまがいいや。」という時には便利ですね。

色をピックするたびにリセントカラーの部分に選んだものが登録されていきます。何パターンか試してみるという時には使えそうです。もちろんそれぞれのカラーをタップすると、その色がオブジェクトに反映されます。

ここで右下のhexコードの部分を見てみましょう。 色をピックするたびにそのhexコードが表示されます。

hex自体をタップすると16進数のキーボードが出現します。ここにコードを入力しての色指定も可能。
外部から拾ってきた色情報を適用する際には便利ですね。

alpha(不透明度)スライダーも使ってみましょう。

色の違うオブジェクトを重ねて、前面のalpha値を下げてみました。
オブジェクトが透過されて、気分はCGデザイナー。





 

色のエディットは他にも沢山。

今回はカラーピッカー本体の使い方について紹介しました。長くなってしまうのでこの辺で一旦、ページを閉じさせていただきます。
カラーピッカーの下にはまだパレットやカラーブレンドなどの機能があり、その他にもグラデーションの指定方法についてもお伝えしなければ、と思っています。

Vectornatorの色のエディット方法、まだまだ盛り沢山な内容となっていますので、次回以降をお楽しみに。











関連記事











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧