PhotoshopCS5で色をHTMLとしてコピーする方法

PhotoshopとWebデザインは密接に関連していることが多く、この共存の最も重要な要素の1つは、2つの場所の間の色を正確に表現する機能です。ただし、Webページで使用したい色が画像に含まれている場合があります。これがフォントの色、背景色、ホバー効果のいずれであっても、Webページで同じ色または補色を効果的に使用すると大きな影響を与える可能性があります。 PhotoshopでWebページで使用できる形式で色を見つけるための回りくどい方法があるかもしれませんが、実際には色情報をHTMLとして出力する簡単な方法があります。

以下のガイドでは、Photoshopのスポイトツールを使用して色をHTMLとしてコピーし、HTML要素に直接貼り付ける方法を示します。

Photoshopファイルから色のHTMLコードを取得する

この記事の手順では、Photoshopファイルに色があり、Webページで使用できるようにその色のHTMLコードを取得することを前提としています。 Photoshopでこの情報を取得するためのツールと方法を示し、次にコピーされた情報の出力を示します。

ステップ1:PhotoshopCS5でファイルを開きます。

ステップ2:をクリックします スポイトツール ツールボックスで。

ステップ3:の先端を配置します スポイトツール HTMLコードが必要な色を選択し、それを右クリックして、 色をHTMLとしてコピー オプション。

次に情報を貼り付けると、下の図に示す形式で貼り付けられます。

Photoshopファイルのどのレイヤーにどのオブジェクトが含まれているかを判断するのが難しくなっていますか?この記事(//www.solveyourtech.com/rename-layer-photoshop-cs5/)では、レイヤーの名前を変更して識別しやすくする方法を説明します。