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. whoah this weblog is wonderful i love studying your articles.
    Stay up the great work! You understand, many persons are hunting around
    for this info, you can help them greatly.

  2. Whats up very nice website!! Guy .. Excellent .. Superb ..
    I’ll bookmark your website and take the feeds
    additionally? I am happy to search out a
    lot of helpful info here in the publish, we want
    work out extra strategies on this regard, thanks for sharing.
    . . . . .

  3. Excellent goods from you, man. I’ve understand your stuff previous to and
    you are just too wonderful. I actually like what you’ve acquired here,
    really like what you are saying and the way
    in which you say it. You make it entertaining and you still care for to
    keep it wise. I cant wait to read much more from you. This is really a great site.

  4. Good day I am so happy I found your site, I really found you by accident, while I was
    browsing on Bing for something else, Nonetheless I am here now and would
    just like to say thank you for a remarkable
    post and a all round enjoyable blog (I also love the theme/design), I don’t have time
    to read it all at the moment but I have book-marked it and also added in your
    RSS feeds, so when I have time I will be back to
    read more, Please do keep up the awesome work.

  5. For newest information you have to visit the web and on internet
    I found this website as a best web site for most up-to-date updates.

  6. You’ve made some really good points there. I checked on the net to
    learn more about the issue and found most individuals will go along with your views on this site.

  7. Hi there i am kavin, its my first occasion to commenting anyplace, when i
    read this paragraph i thought i could also make comment due to this
    sensible piece of writing.

  8. Hello, I think your site might be having browser compatibility issues.
    When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up!
    Other then that, awesome blog!

  9. This article gives clear idea in support of the new visitors of blogging, that in fact how to do blogging.

  10. I am actually delighted to read this weblog posts which includes plenty
    of useful facts, thanks for providing such information.

  11. Hi would you mind stating which blog platform you’re using?
    I’m planning to start my own blog in the near future but I’m having a hard time
    choosing between BlogEngine/Wordpress/B2evolution and
    Drupal. The reason I ask is because your design seems
    different then most blogs and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

  12. Hi there I am so delighted I found your web site, I really found you by error,
    while I was researching on Google for something else, Anyways I am here
    now and would just like to say thanks a lot for a marvelous post and a all round thrilling blog (I
    also love the theme/design), I don’t have time to look over it all at the moment but I have book-marked it and also added your RSS feeds, so when I have time
    I will be back to read a lot more, Please do keep up the awesome jo.

  13. I’m gone to say to my little brother, that he
    should also visit this web site on regular basis to take updated from latest news update.

  14. What a data of un-ambiguity and preserveness of precious experience regarding unexpected emotions.

  15. We’re a gaggle of volunteers and opening a new scheme in our community.
    Your website offered us with valuable info to
    work on. You’ve done a formidable activity and our entire neighborhood shall be thankful to
    you.

  16. Hello! Do you know if they make any plugins to safeguard
    against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any
    tips?

  17. Currently it appears like BlogEngine is the top blogging platform out there right
    now. (from what I’ve read) Is that what you’re using on your
    blog?

  18. Hello there! I could have sworn I’ve been to this website before but after going through a few of the posts I realized it’s new to me.
    Anyways, I’m definitely pleased I found it and I’ll be bookmarking it and checking back often!

  19. I will immediately clutch your rss feed as I can not in finding your
    e-mail subscription link or e-newsletter service.
    Do you have any? Please allow me understand so that I may subscribe.

    Thanks.

  20. I’m curious to find out what blog system you are utilizing?
    I’m experiencing some small security issues with my latest blog and I would like to
    find something more safe. Do you have any solutions?

Leave a Comment