Image Color Sorter [Photoshop Script & Web Js]

---

This project was made for a web app on a Landmark fansite I’m working on. The result can be seen here on my [WorkInProgress] Landmark fansite.

Landmark is a game where players can build anything using different kind of resources. Working on a database tool listing all the resources and their render when used to build, I felt like it would be useful to have a separate tab showing all the textures colors so that players that don’t know all the resources could find what they need for their building.

The tool is a simple AJAX database displayer, but the swatches part needed a few more work.

I made a photoshop script that renames all the layers of a file with the hexadecimal code of the average color of the image. Using a specific naming convention, I could get my texture images named with their average color.

//By Helari, have fun and love
/*
@@@BUILDINFO@@@ ColorPickerNameLayerClean.jsx 2.2.9
*/
var doc = app.activeDocument;
var theSampler = app.activeDocument.colorSamplers.add([10,10]); //Place a color picker at coordinates 10,10
var originalStem = doc.layers[0]; //Get the first layer of the PSD
for(i=1; i < doc.layers.length+1;) //Loop through the layers
{
  if(i != 0) { //If we're not at the first layer
    originalStem = app.activeDocument.activeLayer; //The current edited layer is the document active one
  }
  var originalStemCop = originalStem.duplicate(); //Duplicate the layer
  originalStemCop.applyAverage(); //Apply Average Filter on the copy
  var csColor2 = theSampler.color; //Get the color resulting of the average
  var hexaStr = csColor2.rgb.hexValue; //Convert it to hexadecimal value
  originalStem.name = originalStem.name.substr(0, 4)+"["+hexaStr+"]_"+originalStem.name.substr(4); //Rename the original layer
  originalStem.visible = false; //Hide the original layer
  i++;
  if(i < doc.layers.length) { //If there are still layers to edit     nextLayer = doc.layers[i]; //Get the next layer     doc.activeLayer = nextLayer; //Set it active     nextLayer.visible = true; //Make it visible   }   originalStemCop.remove(); //Remove the averaged copy layer }

This script takes all the layers of the PSD and rename them one by one, adding the average hexadecimal value of the image. When it's done, you only need to use the classic "Export layers to files" photoshop script.

When the page is loading, some javascript is running to sort all the colors names depending on the hue/saturation/lightning values of the images.

This way, I could bought together all the textures of the game separated by main colors. The result is sometimes not perfect as the image average color is not always the best way to get a color, but it's efficient enough to get a kind of logic sorting of all the textures. Moreover, this is dynamic so I can add new textures easily.