- Designed and created the entire auto card generator system by using Photoshop Scripting to reduce the total working times and human efforts.
- Be able to produce gaming cards in both psd and jpg format.
- Generated 200+ cards within 15 mins which is 20 times faster than the traditional way.
Leveraged Knowledge
in JavaScript, OOD, Photoshop, Independent Project
Overall
Use several javascript to let photoshop execute an order to generate a few psd files. The process includes create a new doc, put image and text layers overlap to each other, crop the unused black border, translated it to an png or a psd file.
Photoshop Scripting - javascript
A document object model (DOM) is an application programming interface (API), which allows you to programmaticlaly access various components of a document
The photoshop DOM consists of a hierarchical representation of the Photoshop application.
The Photoshop object model is a containment hierarchy, which means that objects in the model are identified partially by the objects that contain them.
Application (DOM) - Photoshop, Illustrator - is the root of the Photoshop object model hierarchy;
|Documents Collection
|Document Objects - make modifications to the document image. - crop, rotate, flip the canvas
activeObject: property of parent object to set the active object front-most
|ArtLayers collection - Image contents
|TextItem (Object)
|HistoryStates collection - keep track changes made to the document
|Layers collection
|Layersets collection - zero or more art layers, an image is composed by multiple layers
|Channels collection - store pixel information about image’s color
Project Structure
Image is composed by a set of layers.
1 | var docRef = app.documents.add(4,4) //4 inches, 4 inches |
Main
+——| CreateACard
+———-| Helper: labels HEADER and DIR
+——————–|InsertBGImage
+——————–|InsertText
+——————–|Utility
+——————–|SmallIcon
+——————–|CreateNewDoc
+——————–|UncagedInfo
Helper - split words with different font component
1 | function splitToFonted(sentence) { |
Question I Asked For Development
How to set multi fonts in one textItem?
How can I get different fonts in textItem object?
Can a script determine number of lines in a paragraph?
Problem I Met
How to merge a text with icon?
Step1. Create a new font for the icons and import it into Photoshop.
Step2. Think about how to merge text with different fonts.
- by looking at the problem “How can I get different fonts in textItem object”
- Action Manager code (as recorded by ScriptingListener.plugin) can be used to create type layers with different text properties like font for different letters.
Step 3. In order to set up the text box width, just find the actived textitem after step 2 and set up the width in a general way.
Some Cards Were Showing Weird Words + Layout Were Wrong
Due to some of cards written in excel were having multiples lines (Some item requires a single line, while it’s finished in 2 lines). So I wrote a Python script to help me calculate the total lines of each cards in csv format. Generally speaking, a card will have 7 lines, and if a card has 8 lines or 6 lines, I will need to take a look.