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

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

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

投稿日:

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

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

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

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

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

 

Illustratorの場合

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

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

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

 

Photoshopの場合

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

タイピング練習におすすめのサービス3選

いきなりですが、みなさんはブラインドタッチ(タッチタイピング)はできますか?  お恥ずかしい話、私は今まで独自のタイピングできてしまったので、ある程度早く打つことはできますが、たまにキーボードを見ない …

色彩感覚をチェックできる「KOLOR」 のご紹介

今回は、色彩感覚をゲーム感覚でチェックできるサイト、「KOLOR」をご紹介します。   「KOLOR」の使い方 http://kolor.moro.es/ 使い方は簡単で、画面に表示されたも …

柔らかな形状のまる模様を作成できる「Blobmaker」

Pinterestやギャラリーサイトなどを見ていると、スライム?のような、柔らかい形状の模様を取り入れたサイトを多く見かけますよね。 そんなサイトを真似しようと、同じような素材を探したり、自分で作って …

WebデザイナーがFeedlyに登録しておくべきブログ一覧

こんにちは、ぶちこです。突然ですがみなさんはFeedlyを使っていますか? まず、「Feedlyとは何?」という人のために簡単に説明すると、自動的にお気に入りのブログやWebサイトの最新情報を収集して …

新米デザイナーが入社2ヶ月目で学んだこと

制作会社に入社して2ヶ月が経ち、徐々に仕事に慣れつつも、まだまだ奮闘中のぶちこです。 今日は2ヶ月目に学んだことを忘れないように、ここに書き留めていこうと思います。 自分の学習メモといった感じになりま …