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. What’s Happening i am new to this, I stumbled upon this I have discovered It positively
    helpful and it has aided me out loads. I hope to contribute & aid different customers like its helped me.
    Great job.

  2. When some one searches for his required thing, so he/she
    wishes to be available that in detail, therefore
    that thing is maintained over here.

Leave a Comment