Product Designer – Creating Designs

Pre-made designs allows users to pick a graphic from a library.

[
  {
    "source": "images/designs/swirl.png",
    "title": "Swirl",
    "parameters": {
      "zChangeable": true,
      "left": 215,
      "top": 200,
      "colors": "#000000",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "boundingBox": "Base",
      "autoCenter": true
    }
  },
  {
    "source": "images/designs/swirl2.png",
    "title": "Swirl 2",
    "parameters": {
      "left": 215,
      "top": 200,
      "colors": "#000000",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "boundingBox": "Base",
      "autoCenter": true
    }
  },
  {
    "source": "images/designs/swirl3.png",
    "title": "Swirl 3",
    "parameters": {
      "left": 215,
      "top": 200,
      "colors": "#000000",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "autoCenter": true
    }
  },
  {
    "source": "images/designs/heart_blur.png",
    "title": "Heart Blur",
    "parameters": {
      "left": 215,
      "top": 200,
      "colors": "#bf0200",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "boundingBox": "Base",
      "autoCenter": true
    }
  },
  {
    "source": "images/designs/converse.png",
    "title": "Converse",
    "parameters": {
      "left": 215,
      "top": 200,
      "colors": "#000000",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "autoCenter": true
    }
  },
  {
    "source": "images/designs/crown.png",
    "title": "Crown",
    "parameters": {
      "left": 215,
      "top": 200,
      "colors": "#000000",
      "removable": true,
      "draggable": true,
      "rotatable": true,
      "resizable": true,
      "autoCenter": true
    }
  }
]

Instructions:

  • Wrap everything inside square brackets set [].
  • Each curly bracket set {} directly under square bracket set [] represent a design.
  • Each product layer has 2 main properties. Each property and its value will be inside quotes “” and separated by colon. There are 2 main properties for each layer;
    • “source”: Image path for design.
    • “title”: Title to identify the design.
  • Each layer will need some “parameters”. The parameters will be inside their own curly brackets. Here are the available parameters.
    • “left”: Distance from left in pixels.
    • “top”: Distance from top in pixels.
    • “colors”: Available colors for the layer.
    • “removable”: Should the layer be removable.
    • “rotatable”: Should the layer be rotatable.
    • “resizable”: Should the layer be resizable.
    • “autoCenter”: Should the layer auto center itself in canvas.
X