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

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

関連記事

Pinterestのボードを他の人と共有する方法

たくさんのアイディアの中から、良いと思ったものを作成したボードに保存・管理することができるPinterest。 これだけでも便利すぎて、デザイナーにとってなくてはならないWebサービスですが、更にその …

デザイナー必見!使えるイラスト素材サイト

デザインを制作する際に、いい素材がなかなか見つからない…なんてことはありませんか? そんな時に必見な、イラストの素材サイトをいくつかご紹介します! ぜひ、以下の素材サイトをブックマークして …

参考にしたい!斜めのラインが印象的なサイト3選

こんにちは、ぶちこです。 私は今斜めグリッドのサイトのデザインに挑戦しているのですが、斜めの角度や、コンテンツ間の余白の取り方など、レイアウトがなかなか難しく苦戦中です。 そこで、斜めグリットの参考サ …

ボタンを自動で生成してくれる「Button Maker」

今回は 「Button Maker」という、ボタンを自動生成してくれるウェブサービスをご紹介します。 文字やサイズ、色などを指定するだけで、簡単にそれっぽい綺麗なボタンを作ってくれるので、時間がない時 …

【Illustrator】ドキュメントをPDF化する時は「複製を保存」で行うのが安心

IllustratorドキュメントをPDF化する時、私は以下のようなミスをよくやってしまいます。 Illustratorで作ったものを、一旦クライアントに送ったりするために別名保存でPDF化 ↓ PD …