Photoshop Question posted in
The official user guide can be found here.

Modify & Export a PNG – Photoshop

A while ago I had created a small system that would allow one to select various images to use in a forum signature that were all designed to fit together (see example image below). This is currently done by having a series of images that get referenced by their names, which folder they’re in, and suffixes in the image names.

I would like to create a system where one could modify these all they wanted. I tried looking up a few different ways to do it, however was unsuccessful in finding any way that would be able to do what I’m aiming to do here.

The original images are made in Photoshop and separated into individual layers based on the type of banner. Ideally I’d love to make a system that would allow one to modify the colours (RGB, slider, something like that), change the icon either by a set of preset icons or uploading their own, and the ability to modify the text on the images.

After all is said and done, I’d like the image pieces to be downloadable so they’re not stored server-side. In addition I’d like to do this without having to export every variation possible, since that’s already a nuisance with the current way it’s doing things.

TL;DR:
Is there any way a user could modify a set of parameters to change colours, icons, or text, then download the result as a PNG? Code type does not matter, I’m willing to learn, just want to know the right direction.

Here’s a download of the current code for anyone interested.

https://dl.dropboxusercontent.com/u/90098446/website.zip

Example Image (ignore the white lines):

Old Layout

Tags:

2

Answers


  1. 0

    Seems like each banner has four layers: banner, icon, text, and optional tears.

    Save the individual layers and assemble them via javascript on the front-end. Arranging the parts as sprite sheets may make this more convenient both for editing in Photoshop and for assembling programmatically.

    When the user wants to download the results, send a description of the assembly to the back-end, have the back-end assemble the parts into an image, and offer the image for download.

    Rather than manually assembling each possibility in Photoshop, you instead let the system assemble it on demand.

    Login or Signup to reply.
  2. 0

    I have actually done something like this. You need to use a canvas in your HTML and to have a finite number of possible images or possibly some Javascript functions to draw the thing the user wants. Those images/functions should be put together in your canvas to enable the user to preview what is his picture and a control set to change things.

    This SO post shows you how you can get a png from a canvas. I suggest that you should have a save button, where the user finalizes the picture and this should send the picture to the server, where it will be stored. The download feature should download that picture.

    I have done this differently. I have used canvas as a preview and when the user finalized the settings, those were sent to the server as JSON where the final picture was put together.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search