How to Parse Text Styles in Photoshop with CEP: A Step-by-Step Guide

Background

In marketing projects, designers need to create many copy images. Traditional workflow requires multiple communications. Using a Photoshop CEP plugin, designers can create templates that expose text styles and background images, allowing operators to edit copy in an online editor, improving efficiency. This article explores how to use a Photoshop plugin to parse text styles and achieve precise design reproduction.

What is Photoshop CEP?

CEP is Adobe’s extension platform for Photoshop and other apps, built with HTML5 and Node.js. It runs a local web app that calls Node.js and Photoshop’s JavaScript API to extend Photoshop’s capabilities. This article shows how to use CEP for text style parsing.

Setting up the CEP development environment

There are two ways to set up quickly: use the official demo as a base, or use the bolt‑cep scaffolding to generate an engineered project (recommended). In both cases you need to install the plugin by placing its folder into Photoshop’s extensions directory. On macOS you can also create a symlink to the folder:

# cep: CSXS parent folder
# /Library/Application\ Support/Adobe/CEP/extensions: PS plugin install path
ln -s cep /Library/Application\ Support/Adobe/CEP/extensions

Text style parsing

Text styles include lineHeight, fontSize, shadow, matrix, stroke, etc. We use Photoshop’s Action Manager API (a JavaScript interface) to read these properties. For example, we select a layer named “Hello, World!” and retrieve its ActionDescriptor.

// create a new action
var ref1 = new ActionReference();
ref1.putName(stringIDToTypeID('layer'), 'Hello, World!');

// set action descriptor
var desc1 = new ActionDescriptor();
desc1.putReference(stringIDToTypeID('null'), ref1);

// execute action
executeAction(stringIDToTypeID('select'), desc1, DialogModes.NO);

See “Action Manager from curiosity to quitting” for an introduction.

We then obtain color, fontSize, and shadow by navigating the ActionDescriptor. The target text is “每天最高多赚 888 元”. The following code fetches the selected layer’s descriptor:

const getSelectedLayerDesc = () => {
  // create ActionReference for target layer
  const layerReference = new ActionReference();
  // create ActionDescriptor for parameters
  const getDescriptor = new ActionDescriptor();
  layerReference.putEnumerated(
    stringIDToTypeID('layer'),
    stringIDToTypeID('ordinal'),
    stringIDToTypeID('targetEnum'),
  );
  getDescriptor.putReference(app.stringIDToTypeID('null'), layerReference);
  return app.executeAction(
    app.charIDToTypeID('getd'),
    getDescriptor,
    DialogModes.NO,
  );
};

To get the color:

const desc = getSelectedLayerDesc();
const textKeyDesc = desc.getObjectValue(app.stringIDToTypeID('textKey'));
const textStyleRanges = textKeyDesc.getList(app.stringIDToTypeID('textStyleRange'));
const styleDesc = textStyleRanges.getObjectValue(0).getObjectValue(app.stringIDToTypeID('textStyle'));
const colorDesc = styleDesc.getObjectValue(app.stringIDToTypeID('color'));
const red = colorDesc.getDouble(app.stringIDToTypeID('red'));
const green = colorDesc.getDouble(app.stringIDToTypeID('grain'));
const blue = colorDesc.getDouble(app.stringIDToTypeID('blue'));
return `rgb(${red},${green},${blue})`;

Font size is obtained similarly (note it is a Double, not an int). The difference between size and impliedFontSize is explained.

Shadow information resides in layerEffects.dropShadow. Example code extracts enabled, blur, offset, opacity, and color, converting them to RGBA.

const desc = getSelectedLayerDesc();
const layerEffects = descriptor.getObjectValue(app.stringIDToTypeID('layerEffects'));
const dropShadowDesc = layerEffects.getObjectValue(app.stringIDToTypeID('dropShadow'));
const enabled = dropShadowDesc.getBoolean(app.stringIDToTypeID('enabled'));
const blur = dropShadowDesc.getDouble(app.stringIDToTypeID('blur'));
const offsetX = dropShadowDesc.getDouble(app.stringIDToTypeID('distance'));
const offsetY = dropShadowDesc.getDouble(app.stringIDToTypeID('distance'));
const opacity = desc.getDouble(app.stringIDToTypeID('opacity'));
const colorDesc = dropShadowDesc.getObjectValue(app.stringIDToTypeID('color'));
const red = colorDesc.getDouble(app.stringIDToTypeID('red'));
const green = colorDesc.getDouble(app.stringIDToTypeID('grain'));
const blue = colorDesc.getDouble(app.stringIDToTypeID('blue'));
const alpha = (opacity ?? 100) / 100 * 255;
const color = `rgb(${red},${green},${blue}),${opacity}`;
return { color, blur, offsetX, offsetY };

Demo

After parsing layer information, we recreate the design using CSS and HTML in a web page.

Conclusion

This article covered basic text parsing: obtain the ActionDescriptor of the current text layer, locate property positions with a script‑assistance tool, and retrieve the properties via the ActionDescriptor API. The approach is still experimental and needs further research.