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

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

関連記事

CSSをゲーム感覚で学べる「CSSバトル」が面白い!

こんにちは、ぶちこです。 先日、CSSをゲーム感覚で楽しみながら学べる面白いサイトを見つけたのでご紹介したいと思います。   CSSバトルのご紹介 その名も「CSSBattle」という海外の …

【Illustrator】バウンディングボックスが表示されなくなった時の対処法

みなさんは、選択ツールで「バウンディングボックス(四角い選択マーク)」が表示されず、オブジェクトの拡大縮小が出来なくなったことはありませんか? 私はこの現象、定期的に起こしてしまうのですが、いつも解決 …

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

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

ウェブサイトの配色を解析してくれる「Web Colour Data」

ウェブサイトを作る時、配色をどうするかも悩みどころの1つですよね。 そんな時は、ウェブサイトで使われている色を解析してくれるサイト「Web Colour Data」が便利です! 制作するサイトの同業他 …

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

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