Before we start using the Photoshop CSS let me tell you something about importing CSS into Adobe Photoshop.
Say you are a web designer, and you want a Photoshop expert to design things, using the main colors of the website you are working on. Or you are the Photoshop expert and a web designer asks you to...
Have a look at the first picture in the third chapter here, called CSS. A part of its CSS, a part in which various colors are defined, follows here. See the color definitions in red.
/* CSS Document */
body
{
background: #ffffff url(bg.jpg) repeat-y fixed top;
text-align: center;
padding: 0;
padding-top: 20px;
margin: 0;
}
h1
{
font-size: 1.6em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336600;
line-height: 1.5em;
text-align: center;
}
h2
{
font-size: 1.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
h3
{
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336600;
text-align: center;
}
#container
{
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
margin: auto; /* for non IE browsers */
}
#top
{
height: 147px;
background: #ffffff;
}
#subTop
{
height: 50px;
background-color: #d5edb3;
background-image: url(PAN.gif);
background-repeat: no-repeat;
background-position: right top;
}
(See for the HTML color values here.)
Paste the CSS in a new Dreamweaver CSS document and save it. Or paste it in Notepad, and save it as a .css document, the same way as you saved one as a .html file earlier.
In Photoshop do Window > Swatches. Save your swatches, or make a screendump.
In the swatches palette menu choose Load swatches. Choose your Notepad or Dreamweaver CSS document. See how your Swatches palette looks now; compare it with the original one.
See below. The new swatches are indeed the colors used in the first image in chapter 3 ("CSS") here. Very handy indeed.
(To restore your original swatches do, in the swatches palette menu, Restore swatches.)
You can export the swatches (Save swatches in the menu) and use them in other Adobe applications like InDesign, Illustrator or Muse. Search on "adobe share swatches between applications".
At the moment I wrote this, it is not possible to use these swatches in Adobe Edge Animate. The Animate team wrote me We're still a really new product, and color swatches was a new feature for us in our last release and was specifically for in-composition reuse. I've added your suggestion for integration with Photoshop swatches for consideration for a future release.
