Textparser Photoshop script
More than a hack, here’s a script I wrote for Photoshop that generates the css styles for each text layers in a Photoshop document.
What it does not do
Before going through how handy this little Photoshop script is (at least to me) I’ll just start by what it doesn’t do just to make things clear.
- Use layer names or whatever to generate ready-to-use stylesheet
- Require you to heavily change your psd file to work well with the script
- Do some advanced CSS3 styles
- Do all the work for you
What it actually does
Like I said in the intro, it helps you working with text layers by exporting their styles in CSS. Here is the list of what is taken into account when creating the css declaration :
- letter-spacing (more informations about em or px)
- shorthand declaration
How to use it
After installing the script (information later) open a .psd file and run it with “File > Scripts > TextParser”. Set the base size (in pixel) and and let it run. After up to ten minutes with a big .psd and a slow computer, a css file will be created (in your psd’s directory) with .css added to the filename and a pop-up wil tell you the script is done.
When it’s done open this new css file and use the generated styles as you see fit, be it by calling the classes as mixings with LESS or by copy-pasting the generated code in your stylesheet.
Download and Installation
First of all, download the following file and save it in the Presets > Scripts folder of your Photoshop installation. Restart your Photoshop and the script should not be available at File > Scripts > TextParser.
This script suits my daily workflow, might not suit yours and that’s fine (at least for me). If you want to improve it to make it work for you feel free to contact me, send me your code, I’ll happily link it (with due credits obviously) but I’m not planning on doing heavy changes to it.
I’m hoping to find a way to support text-shadow which seems to be difficult with the scripting API but might be possible, when I have time to dig it, I will.