Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
デスクトップやWeb上の画面から色を簡単に抽出する方法 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

デスクトップやWeb上の画面から色を簡単に抽出する方法

投稿日:

デザイン制作時に参考サイトから色を抽出したい時、皆さんはいつもどうしていますか?

私は初めの頃、参考をキャプチャ→保存→Illustrator・Photoshopで開いて色を抽出、という流れでやっていました。

わざわざキャプチャしてソフトで開くこの作業、地味に面倒なんですよね…。

でも、そんなことをしなくてもスポイトツールを使って簡単にデスクトップやWeb上の色を抽出できる方法があるんです!

ご存知の方も多いとは思いますが、とても便利なテクニックなのでご紹介しますね。

 

Illustratorの場合

1.選択ツールで色を変えたいオブジェクトを選択したあと、スポイトツール(ショートカット:I)をクリック。

2.オブジェクトが選択された状態のまま、スポイトツールで色を拾いたいところまでドラッグ。

3.ドラッグした手を離して、色を抽出。

 

Photoshopの場合

1.Illustratorと同じように、スポイトツールを選択。

2.ドキュメント内を一度クリックしてから、色を拾いたいところまでドラッグ。

3.ドラッグした手を離して、色を抽出。

 

まとめ

IllustratorもPhotoshopも、やり方はほぼ変わりませんね。

この方法を使えば、簡単に画面上のどこからでも色を抽出することができて、手軽にいろんな色を試すことができます。

スクリーンショットをわざわざ撮っていたときと比べて、作業効率が断然上がったのでぜひ参考にしてみてください!

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Webデザイナー必須!ブルーライトカットメガネを着用しよう!

Webデザインのお仕事をしていると、長時間のパソコン作業で、目の疲れが酷くありませんか? 目がしょぼしょぼして、酷いときには頭痛までしたり…。   私も、1日8時間とか長い時間パソコンと睨 …

かわいいデザインのサイトが集まったギャラリーサイト

一口に“かわいい系のサイト”と言っても、子供向けのポップな感じなのか、女性向けの柔らかい感じなのか…など、様々ですよね。 なので、WEBデザインでかわいいを表現するのはなかなか難しいなあとよく思います …

【Illustrator】文字を斜体にする方法

Illustratorのテキストを斜体にして配置したい場合、英字フォントであれば「Italic指定」ですぐに斜体に変換できるものが多いですが、日本語フォントの場合は「Italic」がないですよね。 じ …

ロゴ制作の際に参考にるサイト【アイディア編】

前回の記事では、ロゴ制作の「ヒアリング内容〜制作の流れ」について、参考になる記事を2つご紹介しました。 そこで今回は、実際にどのようなロゴにするかアイディアを出していく時に参考になるサイトを3つご紹介 …

商用利用無料の動画素材サイト「Pexels Videos」

よく背景いっぱいに動画を配置したサイトがありますが、肝心の動画素材を探すのってけっこう大変だと思います。 そこで今回は、そんな時に使える商用利用無料の動画素材サイトをご紹介します。   商用 …