14. Getting The Exact Color Of An Element From Photoshop



When you create the CSS styles for the texts or when you want to set the background color you have to use the exact color of that element as that in the Photoshop layout because you don't want the final html file to be different from the original design.

Fortunately every color has its unique code and you can have the exact colors from your Photoshop layout in the final html file.

So open in Photoshop the index.psd file from template/psd and index.html file (template/html/html_version) in Dreamweaver.

In Photoshop go on and with the Type tool selected click inside a block of text to edit it.

Now go to the tools options and click one on the color picker preview.

The color picker window will pop up. In this window you'll see the color of the text and its unique code:

Go on and select the code of the that color and copy it (Ctrl+C) and close the Color Picker window.

Now go to Dreamweaver and place your mouse pointer inside the exact text as in the Photoshop file. Notice the CSS style of that text:

As you can see the Style is "text1" and the color is that from the Photoshop file. To change the color of the text don't edit it directly from the Properties palette because this will result in new styles in your html file. To edit a text style go to CSS Styles palette and click on the desired style to view its properties then edit its properties:

Note that when you change the properties of a css style this will modify all the elements that have that style applied.