free hit counter

Automate Text Change or Translation on Banner Images in Photoshop

2

If you own a large website that needs frequent text changes on banners or if you are simply trying to create a banner with multiple text variation on it, then you can use this automated process to ease your work. Also, many large websites that uses multiple languages for different geo locations can use this method to translate the text on banner images.

To explain the process, we will create a 300 x 250 banner image with Title text and a Sub title text. The focus is on the automated process and not the design, so i have created a very simple image, sorry about that. The basic image will look like this.

300x250 Automate Text Change or Translation on Banner Images in Photoshop

Basic Image

Please note that there are only three layers on this PSD file. The first one is the background that also contains thin black border. The other two are text, that is Title and Sub title. And it is very important to give a name to these Text Layers, you will need to use it ahead in the process. Here is the screen for the layers.

Layers Automate Text Change or Translation on Banner Images in Photoshop

Give names to each text layer on image.

Now that your basic banner with text is ready, you need to create a CSV file in Excel that will contain all the different variations of the text or simply translations of the default language into another languages. We will take different variations of the text for this example.

When you create a CSV file, all the variations should be listed vertically and each column should have a relevant column name. This column name is used to identify the data in photoshop ahead.

I have created 5 variations of the text and here is the screen shot of CSV file. Column names are Title and Subtitle that indicates respective data for our text on PSD file.

CSV Automate Text Change or Translation on Banner Images in Photoshop

CSV file with Data

Now comes the main part:-

In Photoshop, Click on the Image on Menu Bar, then -> Variables -> Define

A window will pop up that looks like this,

variables Automate Text Change or Translation on Banner Images in Photoshop

Layer Combo box contains, two text layer names on PSD

If you click on the Layer Combobox, then you will basically find all the layers on your PSD file including other graphics layer. We only need to work with Text layer to automate their changes.

Select one of the Text Layers from the Combobox, Then check the Text Replacement check box right below it. And enter the respective Column name from our CSV file.

Variables2 Automate Text Change or Translation on Banner Images in Photoshop

Text Replacement should contain respective Column Name for the Layer

You can see the CSV screen above, it has the exact same Column name as that in Text Replacement Name. You need to be careful here so that you don’t get any errors ahead.

Similarly, do this for all the Text Layers on your PSD files and respective Column Names for each. Then simply click on the Next button on the right side to move ahead.

Next Automate Text Change or Translation on Banner Images in Photoshop

This is the window you get after clicking Next button

Click on the Import button on right side and select the CSV file to import the Data Set. If you have a CSV file opened, then close it before selecting or else it will give you an error. The CSV file must be saved and closed before importing.

Import Data Set Automate Text Change or Translation on Banner Images in Photoshop

Click on Import and Select CSV file.

Once you import the CSV file, you will see extra values added back on your Variables window. This will display the Colum Name from CSV, the value from CSV column and the name of the Layer on your PSD file.

After importing CSV Automate Text Change or Translation on Banner Images in Photoshop

After importing CSV file

On the above image, if you click on small arrow in Data Sets frame, you will find all the details and records from the CSV file. Click on OK to finish the process and close the window.

Now all you need to do is to process the creation of PSD files.

So in Photoshop, Click on File -> Export -> Data Sets as Files…

Export Data Sets Automate Text Change or Translation on Banner Images in Photoshop

Export Data Sets as Files...

On the above image, in Save Options frame, just select the folder where you want to save all the PSD files with different text variations.

In File Naming frame, you can select the file naming structure for automated PSD files creation. This naming can totally depend on you. We will select the Document Name + Underscore + Data Set Number for naming our series of PSD files. You can see the Name Example right above.

Simply Click on OK button and Magic, All the PSD files with different text variations are created in the folder you selected.

PSDs Automate Text Change or Translation on Banner Images in Photoshop

PSD Files Created and Saved in Selected Folder

Open all the PSD files and you will find different text variations or language translations automatically added on the Text Layers with the same Text Size and Color.

This method can be great if you have a huge list of text variations or simply to automate language translations in photoshop.

Try it, let me know your thought or if any errors.

Related Posts

2 Responses

  1. brem says:

    Cool stuff! Well with
    your permission let me to grab your RSS feed to keep
    updated with forthcoming post. Thanks a million and
    please keep up the gratifying work.

  2. Mano says:

    seems to be what I’m looking for

    but trying it out, I get a variables-failure while importing the CSV-file:
    Could not parse the file contents as a data set. There were not enough variable names in the first line of the text file.

    layers in PS:
    customernumber
    customername

    in excel:
    in A1 ‘name’
    in B1 ‘number’
    in A2 ‘john’
    in A3 ‘frank’ etc.
    in B2 ’1234′
    in B3 ’5678′

    saved the file as test.csv [separated by devorcesigns]
    [there are also the possibillities to save as CSV [Mac] or CSV [DOS][tried the last one, didn't made a difference]
    Or should I try some of the *.txt? [also tried, and didn't made a difference either]

    getting an issue saving as *.csv also as *.txt:
    file possible contains functions not compatible with CSV

    can use some help over here

Leave a Reply

CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

 
© 2012 ing-Base. All rights reserved.