How to export font information from a PSD file for css use

I am into front end development from several years, I am always getting this questions from a lot of peoples and developers. When I receive a .psd file, usually we manually go through each font in the design, click on it, then use the character panel to get the font, color, size etc. Sometimes, we get PSD design that uses several kind of fonts and styles, with many variations of the same font (size, color, weight, etc.). This is pretty time consuming work, to find out the styles of each fonts like the example.

Arial bold 16px black
Verdana regular 14px black
Arial regular 14px blue
Oswald 32px rgb(13,74,56).

After several research I got the solution form net. By using ExtendScript Tool kit we can achieve this thing quickly. Using Photoshop script we can get the information about the font. Here is the link for Photoshop scripting guideline, Will help you regarding this.

Based on the script in this article, I picked script. For every text layer in a PSD file, it will print the font, font-size, and fill-color to the JavaScript console:
Download the Photoshop Scripting Guide and Scripting Listener plugin.


function run(){
var layerSets = app.activeDocument.layerSets;
dumpLayerSets(layerSets);
$.writeln("Top-level layers:");
dumpLayers(app.activeDocument.layers);
}
function dumpLayerSets(layerSets){
$.writeln("--- Processing...");
var len = layerSets.length;
for(var i=0;i<len;i++){
var layerSet = layerSets[i];
//$.writeln(layerSet.name);
dumpLayers(layerSet.artLayers);
}
}
function dumpLayers(layers){
var len = layers.length;
for(var i=0;i<len;i++){
var layer = layers[i];
if(layer.kind==undefined){
continue;
}
if(layer.kind == LayerKind.TEXT){
$.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
}
}
}
run();

To test, open a document with text layers in Photoshop. Open the ExtendScript Toolkit and link it to your Photoshop instance. Paste the code above into the workspace and hit the run button.

Screen-Shot-2013-04-29-at-7.49.36-PM

 

And you will get this type of result.


--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined

Comments

  1. great points altogether, you simply received a emblem new reader.
    What would you suggest about your post that you made a few days
    ago? Any positive?

  2. Hello to every one, the contents present at this web
    site are genuinely remarkable for people experience, well, keep up the nice
    work fellows.

  3. The other day, while I was at work, my sister stole my apple ipad and tested to see
    if it can survive a 40 foot drop, just so she
    can be a youtube sensation. My iPad is now broken and she has 83 views.
    I know this is totally off topic but I had to share it with someone!

  4. Hey there are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and create my own.
    Do you require any html coding expertise to make your own blog?
    Any help would be greatly appreciated!

  5. I have read so many content on the topic of the blogger lovers except this article is
    really a nice article, keep it up.

  6. Woah! I’m really digging the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between user friendliness and visual appeal.
    I must say you’ve done a very good job with this. Also, the blog loads extremely fast for me on Chrome.
    Superb Blog!

  7. I just like the helpful information you supply in your articles.

    I’ll bookmark your blog and take a look at again right here regularly.
    I’m relatively sure I will be told lots of new stuff proper here!

    Good luck for the following!

  8. Thanks in favor of sharing such a pleasant idea, article is good,
    thats why i have read it completely

  9. Wonderful work! This is the kind of info that are meant to be shared across the web.

    Disgrace on Google for no longer positioning this put up higher!
    Come on over and consult with my site . Thanks =)

  10. Hi there I am so thrilled I found your website, I really found
    you by error, while I was looking on Digg for something else, Anyhow I am here now
    and would just like to say thanks for a marvelous post and a
    all round interesting blog (I also love the theme/design), I don’t have time to read it all at the minute but I have bookmarked
    it and also included your RSS feeds, so
    when I have time I will be back to read much more, Please do keep up the great work.

Leave a Comment