Create custom images using URL variables with Photoshop Images

No comments

By using a Photoshop Image to personalize your images, you give yourself a variety of advanced options over our Personalized Images. The big difference is that we recognize all of the layers you use, which allow you to update each individual layer via our API.

But now we allow you to modify those layers in the Image URL as well. Simply state the layer in the Image URL, follow by the action you wish to take.

Below is the image we will be using as an example today, you can also download the Blog Example.

 

Base Image.png

 

Notice that we have made all layers visible when uploading it to NiftyImages. This gives us full control over these layers, if they are hidden upon upload then we will not be able to control them.

Upload this image to your account and save it, it will alert you that there are no variables, which is okay. Then click on the Edit > Default View for this image. This will let you hide the 12 Raster Layers (0, 75, 100, 125, etc.) and save your Default View.

 

Default View.png

 

Here are the options for each layer type in your PSD file:

Layer Customizing Options.png

 

And here is how you do that in the Image URL for each layer type and option:

Text Layers:
LayerName.text=Value
LayerName.show=True/False
LayerName.color=FFFFFF

Shape Layers:
LayerName.show=True/False
LayerName.color=FFFFFF

Raster Layers:
LayerName.show=True/False

SmartObject Layers:
LayerName.show=True/False
LayerName.image=ImageURL

 

Here is our first example defining the points in the Text Layer and showing the Raster Layer 125 to match that point total in the URL.

https://img1.niftyimages.com/7/j_c/b_c?Points.text=125&125.show=True

125.png

 

Now we will also change the Shape Layer’s color to red in the URL.

https://img1.niftyimages.com/7/j_c/b_c?Points.text=125&125.show=True&Bottom.color=FF0000

 

Color Change.png

 

Now let’s change the SmartObject Layer’s image by pointing to an image URL.

https://img1.niftyimages.com/7/j_c/b_c?Points.text=125&125.show=True&Bottom.color=FF0000
&icon.image=http://www.stickpng.com/assets/thumbs/580b585b2edbce24c47b2af3.png

 

Smart Object Change.png

To modify multiple layers at a time with the same action, you can use the following format to list the layers:

Layers.PROPERTY=VALUE:x1,x2,x3,x4,x5,x6

Example to Hide All:

https://img1.niftyimages.com/7/j_c/b_c?Layers.Hide=true:0,75,100,125,150,175,200,225,250,275,300,325

 

b_c.png

Example to Hide All, then show one:

https://img1.niftyimages.com/7/j_c/b_c?Layers.Hide=true:0,75,100,125,150,175,200,225,250,275,300,325&300.show=true

 

b_c.png

 

You can use any combination of these layer variables to show each subscriber a customize image.  This way you can have specific product image/logo showing for each user, show text specific to them and modify colors/layers.

 

Keep your PSD files under 2 MB. 

The basics of keeping the file size small:

– Crop oversized layers to document bounds
– Merge/flatten as much layers as possible
– Delete unnecessary working paths and alpha-channels
Photoshop automatically saves a high quality file preview in the PSD. It’s a weighty snapshot of the contents of the PSD. To get rid of the preview, add a solid white visible layer on top of the document, then us Views to hide the layer within NiftyImages.

6 Simple steps:

– Create a solid white layer as top layer in the PSD, name it ‘White’
– Save the PSD, the file size should be reduced dramatically after saving
– Upload the PSD to NiftyImages
– After the PSD is uploaded and the default text, min length and max length are set, choose “Edit > Configure Views”
– Select the White layer from the layers overview in the left panel
– In the right panel, check the “hide layer” property
– Click “Save Changes” in the left panel

If you have any questions, please contact us for help.