Setup Workflow Experience from Design

Setup Workflow Experience from your Design

You are able to set up any design you like in Spiff from any Photoshop or Illustrator design. No matter how many colors, text steps or photo uploads you need. We can do it!

Example

This example will show you how to set up a simple design from a PSD (Photoshop) file.

  1. Open your PSD file

  1. Turn off the visibilty on any layers you don't want to export

  1. Go to File > Export As > and export your design

  1. Make sure your PNG/JPG is not too large. Try to keep everything under 1MB otherwise things can load slowly.

  1. Open your newly exported PNG/JPG in Illustrator and ensure it is set to the print size. When you have the Properties tab open, ensure your anchor point is set to the top left and the X/Y coordinates are set to 0, 0. This needs to be on 0, 0 because our editor reads from the top left point.

  1. Now you have your design in Illustrator you can draw a box around the areas you want to add text. This will be the regions of the text step. Select one of the boxes you have drawn and in the Properties tab you can see the measurements for the Region. Make sure these meaurements are in pixels.

  1. Now, go to Spiff Assets and upload your png/jpg you exported from PSD into the Images tab.

  1. Now go to Workflows in the Content tab and create your workflow. Select the model you want to use.

  1. Enter in the workflow details, and panel size.

  1. Start by creating a Silent Illustration step to put your jpg/png on. Select your asset and put in your regions and keep your layer low as possible because you want this image to sit behind the text. 0 works best.

  1. Now it's time to add your text. Do this by adding a Text step. Fill in your desired information and in the bottom tab enter in your regions from Illustrator. We round up the pixels to make the process cleaner. Make sure the layer is higher then what you set your Silent Illustration to. In your Options tab you can choose as many fonts as you like to be used.

  1. Do the same with your second text step.

  1. This should be a basic set up of your workflow. You can now go to the product you created, attach your workflow. This is really easy you just need to search for the name of your workflow, select it and save.

  1. You can now test out your magic!

Remember

  • Get all your regions from Illustrator in pixels
  • In Illustrator your x and y need to be on 0, 0,

  • Once you have selceted the area of the region it will display as below image which shows you the X, W, Y, H

Troubleshooting

  • If you can't see something you have put into the workflow, check your layers. Often you have put it behind something and it is hiding. To check this go to regions and make sure the layer is not the same as the previous layer.
  • If you have multiple Options on a Text step, make sure you have one set as a default.