This is under construction!
In this simple website I am going to explain a new feature in Adobe Photoshop CC (Creative Cloud, both CS6 CC and CC 2013). Photoshop now can export and import CSS.
Let me first introduce myself.
I am a Dutchman dedicated to two things: writing courses on the various Adobe Creative Cloud apps for the Dutch company Laudius, and cooking and writing about that. I have been producing courses since three years now, dedicating the years before on working with Photoshop and Illustrator, and working as a web developer (mainly design and SEO work).
I shall start my story by telling something about CSS, because many photoshoppers don't know it. It has to do with web design. And if you, as a photoshopper, are not involved in web design then please remember two things. First of all the various apps in Adobe Creative Cloud are getting so to say more "connected" with each other every month. For example just before I wrote this, september 2013, Photoshop got an Adobe plug-in to connect it with Adobe Edge Reflow, just as Edge Reflow got a button for importing Photoshop stuff. (Edge Reflow: for producing responsive websites.) And what I write here can be considered as a link between Photoshop and Adobe Dreamweaver.
Second: you as a photoshopper might get a job offer to produce Photoshop CSS.
For web developers this blog is also interesting, because you might get Photoshop CSS to work with, and you can instruct a Photoshop expert how to import CSS color codes from a web page (from the CSS document that is), as to be able to work with the same colors as you use for a certain website.
I shall soon make another site, on the CSS exported from Adobe Illustrator CC (as for Illustrator: this does not apply to Illustrator CS6 CC). As soon as that is ready you shall see a link under the archive top right.
And after that yet another site, on the interaction between Adobe Photoshop and Adobe Edge Reflow.
And one on the interaction between Photoshop and SketchUp.
See the company I work for here (all links here open in a new window or tab).
See for CSS Wikipedia here.
See for Adobe Creative Cloud here.
See for Adobe Edge Reflow here.
See for my Dutch blog on cooking here. Find my @ddress there.
This is a website made by a student. It was not ready yet, links are not very clear for example, but that is not the point now.
See the border with the rounded corners. That had to be done with CSS (Cascading Style Sheets) and for this student that was a hell of a job.
But working with CSS exported from Adobe Photoshop CC, its a very simple thing.
Let us first have a look at another website.
This is a website I made some 12 years ago.
See the HTML (the source code) here. I have left out things that we do not need here, like a JavaScript that made the three paintings change form black and white to color in about two seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Lineke Muller aquarellen en expositieruimte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body bgcolor="#E3F7CE" link="#660000" vlink="#666600">
<center><p> </p>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Welkom op de site van</strong></font></p>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Lineke
Muller<br />
</strong></font></p>
<table width="700" height="300">
<tr>
<td align="center" valign="middle"><img src="1.jpg" alt="expositie aquarellen Groote Kampen Lineke Muller" width="700" height="300" title="" /></td>
</tr>
</table>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong><a href="home.htm">Enter</a></strong></font>
</p>
<p> </p>
</center>
</body>
</html>
Everything that is red refers to the lay-out of the page. bgcolor: background color.
There is a table too, used to position the three paintings.
Now what does a search engine robot find here? It finds for example (translated)
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Welcome at the site of</strong></font></p><p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Lineke Muller<br /></strong></font></p>
And what is the interesting part for this robot? Just Welcome at the site of Lineke Muller, nothing else. Just the content. Everything else, stuff concerning the lay-out, nowadays goes to the CSS. Even, or should I say above all, the table. This makes a website friendlier for these robots.
Apart from that the advantages of using CSS is that it enables me to manage the lay-out of the whole website, of all the pages, from one or two CSS documents. I can change the backgroundcolor of all the pages with just one click.
Also using CSS makes the maintenance of the site much easier.
Tip
Do a search on validate html and on validate css.
Do a search on deprecated elements.
The above website was made as should be: the whole lay-out is managed in the CSS document.
See part of the HTML here.
<head>
<title>Go for Nature natuur-reizen</title>
<style type="text/css">
<!--
@import url(go-for-nature.css);
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<img src="Puttertjes.jpg" alt="reizen in de natuur, reizen voor de natuur" width="750" height="147" title="" /></div>
<div id="subTop"></div>
<div id="menuL">
<p><a href="nieuws.htm">Nieuws</a></p>
<p><a href="polen/polen.htm">Polen</a></p>
<p><a href="slowakije/slow.htm">Slowakije</a></p>
<p><a href="italie/italie.htm">Italië</a></p>
<p><a href="zweden/zweden.htm">Zweden</a></p>
<p><a href="finland/finland.htm">Finland</a></p>
<p><a href="bulgarije/bulgarije.htm">Bulgarije</a></p>
<p><a href="sitemap.htm">Reis-zoeker</a></p>
</div>
<div id="main_column">
<div id="main_content">
<h1>Welkom</h1>
<p>Ontdek de wereld die jou dichter brengt bij natuur en cultuur in de wilde natuurgebieden van Europa.<br />
Avontuurlijke natuur- en cultuurreizen naar de meest wonderschone en ongerepte natuurgebieden van Europa.</p>
<p> Reizen die je uitdagen, veranderen en inspireren.</p>
<p><img src="Wandelen-in-de-natuur.jpg" alt="Wandeltochten in de natuur" title="" width="412" height="138" /></p>
<p>Met lokale gidsen natuur beleven en voelen... Maar ook een steentje bijdrage aan het behoud van natuur. </p>
<p> Natuurlijk duurzaam reizen, zo kunnen ook andere in de toekomst blijven genieten van de ongerepte natuur.</p>
<p> Reizen ín de Natuur?<br />
Reizen vóór de Natuur?<br />
Go for Nature! </p>
<p><img src="Ingang.jpg" alt="Lynx" width="412" height="138" title="" /></p>
<p><strong>Kijk vlug verder!<br />
</strong><img src="valid.gif" alt="Valid XHTML and CSS" title="" width="186" height="56" /></p>
</div>
</div>
<div id="menuR">
<p><a href="formule.htm">Formule</a></p>
<p><a href="zwaarte.htm">Zwaarte van de reizen</a></p>
<p><a href="boeken.htm">Hoe boeken</a></p>
<p><a href="reizen.htm">Individuele en groepsreizen</a></p>
<p><a href="maat.htm">Maatwerk</a></p>
<p><a href="stichting.htm">De Stichting</a></p>
<p><a href="duurzaam.htm">Duurzaam!</a></p>
<p><a href="contact.htm">Contact</a></p>
<p><a href="disclaimer.htm">Disclaimer</a></p>
<p><a href="nieuwsbrief.htm">Nieuwsbrief</a></p>
</div>
</body>
(I am not saying this is great web scripting, but it is as good as I can.)
The part that is red refers to the CSS document.
You can see several pieces of code like <div id="...">. Div stands for division, a part of the web page, while id is the name under which the lay-out in the CSS for that part of the page is described.
(MenuL: menu left side; MenuR: menu right side.)
Here you see the page as it looks like in the HTML editor Adobe Dreamweaver. The dotted lines contain the various div's. 1 is the div
main_column, in which 2, main_content, is nested.
See this part of the code now:
</div>
</div>
<div id="menuR">
The first </div> is where main_column ends, while the second indicates where main_content ends.
Find the texts Welkom (welcome) and Ontdek de wereld (discover the world) in both screendumps and in the HTML. In the screendumps you can see they are different fonts.
Now have a look at the CSS:
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;
}
#menuL
{
padding-top: 20px;
float: left;
width: 104px;
background-color: #d5edb3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: bold;
text-align: right;
line-height: 16px;
letter-spacing: .1em;
}
#menuL p
{
margin: 0;
padding: 5px 10px;
color: #d5edb3;
}
#menuL a
{
padding-right: 3px;
padding-bottom: 2px;
display: block;
text-decoration: none;
border-style: none solid solid none;
border-width: 0px 3px 3px 0px;
border-color: #5e9542;
}
#menuL a:link
{
color: #336600;
text-decoration: none;
}
#menuL a:visited
{
color: #336600;
text-decoration: none;
}
#menuL a:hover
{
border-color: #666666;
color: #000000;
text-decoration: none;
}
#main_column
{
background-color:#ffffff;
float: left;
width: 450px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
text-align: left;
line-height: 16px;
letter-spacing: .1em;
}
#main_content
{
margin: 0px;
width: 450px;
}
********************************************
Now find in this CSS
}
#main_column
{
and
}
#main_content
{
Both are followed by the instructions for the lay-out of these div's. main_content inherits anything indicated under main_column because it is nested in that div.
margin: 0px; width: 450px; is the exception on that for main_content.
In the HTML you saw <p>Ontdek de wereld. <p> stands for paragraph, and the font is described in the CSS as font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em;" under "main_column.
The text Welkom is preceded in the HTML by <h1> which stands for header 1, or the largest header. It is described in the CSS under h1 {.
Adobe Photoshop CC exports CSS as CSS3. For what I am telling here, that is not important.
Tip
Search for CSS3.
We shall now draw a rectangle with rounded corners in Photoshop. See the screendump above.
A is the tool. Choose Shape at B. C: no filling. D: red border. Choose a width at E and a normal line at F. Choose any value for G.
Draw the rectangle. Make sure its layer (see H) is selected.
Right click on that layer (or open the layer palette menu, of choose in the main menu Layer) and choose Copy CSS. See below.
* The selected layer cannot be locked!
* Would you like to export the CSS of a shape layer and of a text layer together, then forst put both layers in a new group, and use that new layer.
* Writing a text, you automatically get a text layer. When drawing an object like a rectangle f.e. you only get a shape layer if you have selected Shape at B. If not then exporting the CSS fails.
Open Notepad and do Edit > Paste.
Or open Word or choose an OpenOffice text document (in that case do that before exporting the CSS) and do Edit > Past.
Or open a new CSS file in Dreamweaver and also do Edit > Paste.
This is the Photoshop CSS:
.Rounded_rectangle_1
{
border-width: 17.85px;
border-color: rgb( 255, 0, 0 );
border-style: solid;
border-radius: 30px;
position: absolute;
left: 293px;
top: 189px;
width: 398.3px;
height: 374.3px;
z-index: 2;
}
See it in Dreamweaver under this line:
Next I add a text. See the next screendump:
As you can see, now I have a background layer, a shape layer and a text layer. To be able to export the CSS of both, I have as I said before to put the shape layer and the text layer in a new group layer, and choose that layer for the CSS export.
See the CSS here:
.Group_1
{
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 800px;
z-index: 5;
}
.Text
{
font-size: 72px;
font-family: "Garamond";
color: rgb( 44, 234, 241 );
font-weight: bold;
text-align: left;
position: absolute;
left: 224.929px;
top: 99.997px;
width: 167px;
height: 50px;
z-index: 4;
}
.Rounded_rectangle_1
{
border-width: 25px;
border-color: rgb( 255, 0, 0 );
border-style: solid;
border-radius: 30px;
position: absolute;
left: 194px;
top: 212px;
width: 191px;
height: 269px;
z-index: 3;
}
.Layer_0
{
background-image: url("images/Laag 0.png");
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 800px;
z-index: 2;
}
* As you might know, you can turn a Photoshop layer into a Smart Object, for working with it in other Adobe applications. But you can not export CSS from a Smart Object.
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.
