The Supreme Logo Generator is a project built for fun. It serves to generate Supreme Box Logos from the data stored on a CSV file and export these logos to PNG image files.
Note: This program has only been tested on Adobe Photoshop CS6.
Prior to the installation of the script, other programs and files need to be installed onto the user's local machine for the script to work correctly.
Since this is a script for Adobe Photoshop, the user must have a copy of Adobe Photoshop installed. Adobe Photoshop can be purchased and downloaded from Adobe's official website here.
The font used for Supreme Box Logos is Futura Std Heavy Oblique. The user should have this font downloaded and installed on their local machine if they want the logos to come out looking correctly. Running the script without downloading the font before will cause Adobe Photoshop to select a default font and generate the logos with that font rather than Futura.
The download for Futura Std Heavy Oblique can be found on Fontsgeek.com.
Instructions for installing font on local machine (courtesy of Fontspring):
To install a copy of the project, navigate to the top of the page for the Supreme Logo Generator GitHub repository and click on the green button on the right side for Clone or download and then click on Download ZIP.
Once the .zip file has been downloaded, unzip the file, and now there should be a folder called "Supreme-Logo-Generator-master". Feel free to move this folder to any directory as long as it can be easily found.
Once the user has installed Adobe Photoshop, Futura, and unzipped a copy of this repository on their local machine, they should be set to run the script and begin generating Supreme Box Logos.
The way the program works is that the script prompts the user to select a CSV file to generate images from. The CSV file must be formatted in a certain way in order for the script to parse the data correctly.
In the unzipped Supreme Logo Generator folder is a folder called source-csv-files. Within this folder are CSV files that can be edited and modified to add data to create logos. The program uses three different ways to represent colors in a CSV file:
- HEX (ex. #FF0000 is red)
- Shorthand HEX (ex. shorthand hex equivalent of #FF0000 is #F00)
- RGB (ex. (255, 0, 0) is red)
Likewise, there are three different CSV files that utilize these different ways to represent color. Select one that you may find most suitable. The following example will be done in regular HEX on the Source-Hex.csv file.
Source-Hex.csv:
| FILE_NAME | TITLE | TITLE_COLOR | BACKGROUND_COLOR |
|---|---|---|---|
| Supreme-Red | Supreme | #FFFFFF | #E42621 |
| Supreme-Green | Supreme | #FFFFFF | #00FF00 |
| Supreme-Blue | Supreme | #FFFFFF | #0000FF |
From left to right:
- FILE_NAME - The name of the file once it has been generated. No need to add the .PNG extension at the end, the program will take care of this.
- TITLE - The foreground text of the logo.
- TITLE_COLOR - The color of the foreground text.
- BACKGROUND_COLOR - The color of the background.
To generate a new logo, all that is needed is to add a new row to the CSV file with the corresponding information in its appropriate locations.
For example, say that we wish to create a new logo with the text "John Smith", white text (#FFFFFF) over a blue background (#0000FF). All that would need to be done is to add the following row to the CSV file:
| FILE_NAME | TITLE | TITLE_COLOR | BACKGROUND_COLOR |
|---|---|---|---|
| John | John Smith | #FFFFFF | #0000FF |
If we wish to do the same thing but using RGB, open up Source-RGB.csv and we enter this row to the CSV file:
| FILE_NAME | TITLE | TITLE_RED | TITLE_GREEN | TITLE_BLUE | BACKGROUND_RED | BACKGROUND_GREEN | BACKGROUND_BLUE |
|---|---|---|---|---|---|---|---|
| John | John Smith | 255 | 255 | 255 | 0 | 0 | 255 |
Continue to do this until the CSV file contains all of the data for all of the logos that will be generated.
Launch Adobe Photoshop. There is a .psd file within the unzipped folder titled Supreme Box Logo Template.psd. This file contains only two layers: Title and Background. Open this file.
Note: Do NOT change the names of these layers in Photoshop, it will cause the script to fail.
Navigate to the top menu bar and select File > Scripts > Browse....
After clicking on Browse..., Adobe Photoshop will prompt you to select a JavaScript file within your local machine. Navigate to where you placed the "Supreme-Logo-Generator-master" folder. Select Supreme Logo Generator.js to launch the script.
Upon launching the script, Adobe Photoshop will prompt you to select a CSV file that contains data to generate logos from. Here we navigate over to the source-csv-files folder and select the Source-Hex.csv file that we added the "John Smith" row to.
After selecting the CSV file to generate logos from, the program will read the CSV file to determine which rows are valid. Invalid rows will not be used to generate logos (ex. headers, empty rows, etc.). The program will keep count of the valid rows and then prompt the user to enter a range of which rows to generate logos from. [start, end)
So for example, if we use the Source-Hex.csv, we have four valid rows to generate logos from. If we only want to generate the first three of the four logos, our range will be: [0, 3), so we enter it as such:
Now that we have selected which logos will be generated, the program will ask to select the directory/folder to output the generated logo .png files to. For this program, we output the logos to the folder generated-logos.
Now that we have completed generating logos, check the folder where they were output to and make sure that they look fine:
The Supreme Logo Generator is built using JavaScript on Adobe Photoshop Scripting. The Adobe Photoshop CS6 JavaScript reference can be found here.
- Hans Bas
- Markdown Tables from TablesGenerator.com – used to create the markdown tables for this README.