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デザイナーの面接には必ずポートフォリオが必要です。     ですが、   ポートフォリオに何を載せたらいいのか分からない… どんな形式で作成すればいいの…?   と悩 …

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

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

転職活動、応募先の選び方。私が大切にしていた4つのポイント。

  みなさんはWebデザイナーとして応募先の企業を決めるとき、何を基準に決めますか?   お給料? 会社の規模? 通勤時間?     人それぞれ選ぶポイントは様々だと思いますが、 私は4つのことを大切 …

デザイナー必見!使える写真素材サイト

前回に引き続き、素材サイトをご紹介したいと思います。今回は写真編です! いつも素材探しに苦労している私が見つけた、オススメのフリー素材サイトをいくつかピックアップしていきますね〜!   写真 …

【Webデザインおすすめ書籍】10倍ラクするIllustrator仕事術 【増強改訂版】

今までイラレの本は買ったことがなくほぼ自己流で操作していたのですが、今回評判のよいこちらの本を購入してみたので、ご紹介します。 10倍ラクするIllustrator仕事術 【増強改訂版】CS5/CS6 …