どうも上かるびです。
グラデーションの要素というのは頻繁に出てくると思うのですが、とあるデザインカンプのオブジェクトから色情報を取得するのに苦戦したので、その解決方法を共有します。
ネコーダー
コーダーだけでなく、デザイナーも知っておいてくれ！
Contents
困ったときはAdobe Colorを使おう
まずは結論。
方法１
グラデーションの要素を一旦画像として書き出して、Adobe Colorの「グラデーションを抽出」にぶち込みましょう。
グラデーションに角度がついている場合はイラレで情報を取得します。
方法２
画像として書きだして、スポイトツールで端っこの色を目押しで取得する。
ネコーダー
この方法も人為的処理が入るので、100%再現はできないですね。
オブジェクトからグラデーションがはみ出ている場合、なぜコーダーが困るか
下記のようなグラデーションの場合、色情報がすぐに取得できないのがお分かりでしょうか。
グラデーションツールの丸の部分で色を取得すると、当然はみ出ている部分の色しか取れません。
試しにそのはみ出ている部分の色を取得して、オンラインでグラデーションCSSを生成してみます。↓
上かるび
全然違いますね！
CSSプロパティでも取得できない
Twitterのフォロワーさんに教えていただいたのですが、
イラレに「CSSプロパティ」というツールがあるとのことで、試してみました。
この取得情報を元にグラデーションを生成してみます。↓
上かるび
デジャヴ！！！
はい、ダメみたいです。
Adobe XDでもダメ
イラレデータをXDで読み込んでみました。
はみ出しグラデーションがそのまま適用されてます。（当たり前か）
デザイナーに知っておいてほしいこと
私はデザイナーではないので、今回のようにはみ出して設定しないと思い通りのグラデーションにならないのかどうかは分かりません。
ただ、もし↓のように端と端でグラデーションを生成できるのであれば、こちらの方がCSS情報は取得しやすい、ということは知っておいてほしいです。
というかwebデザインはFigmaかXD使ってください。
コメント