Pre-staging Area

If you paste in a bunch of image links/urls (ending in .png or .jpg) the images will be placed here when you click the button below.


To make it easy to get them from a POD page, you'll need this bookmarklet: imgGrab If you haven't already, drag and drop it onto your bookmarks toolbar.

A bookmarklet is a normal bookmark that does some magic instead of taking you to a web address. When you click or tap the bookmarklet, it will perform its magic on the page you're looking at instead of loading a different page, as most bookmarks do.

The magic that the imgGrab bookmarklet does for you is to let you grab image locations (urls) from almost any POD webpage so you can copy and paste them here.

To use it:

  • first make sure your bookmark toolbar is showing at the top of your browser.
    If it's not showing, here's a handy place to find out how to show your bookmarks toolbar on your browser
  • Once you can see it, just drag the bookmarklet above to your toolbar and drop it where you want.
  • Next, go to pretty much any POD site, get to your own store and navigate to a page of products you want to use
  • Now's the time to click the imgGrab bookmarklet
  • Scroll to where the images are showing and, as you move your mouse, watch for the dotted lines appearing around each section where they're showm
  • Once the right section is highlighted click in that area and after a short pause a new window will open with the image locations (urls) showing ready for you to copy and paste here

It might take a bit of practice to get just what you want. If you need to try again just click the bookmarklet again to reactivate it properly - and make sure the results window doesn't get accidently hidden by your main browser window!

Here's a series of images showing you how

If you want your store link automatically added to templates that support it, put it here
Same goes for your store's name

Select more objects for the stage

Note for designers at Zazzle and Society6

If you're a Zazzler or a Society6er, there's more! You can start this stager pre-populated with products pulled from those places.

Visit the Zazzle Nifty Promo Control Panel or the S6 Nifty Promo Control Panel
and in Step 1 set up the products you want to use in the stager. When you've done that, in Step 2, choose the Share a product grid page section and then click the button for the flexible product stager for screenshots

That's all there is to it! :)

(The stage starts at the very top of this browser window - scroll up to see it)

In this pre-staging area section you set-up the various objects and then put them on the stage as part of your design. You can drag objects around the stage to wherever you want. If you click one to select it, you'll see handles appear that let you resize, squish and rotate it. When rotating there's a snap point every 30 degrees.

Use the buttons at the top left of the stage to rearrange the layer order of the selected object or delete it. Finally, when you've got things just as you want, take a screenshot of your finished graphic ready for use on social media or your website / blog.

Add your own images

Any images added using this route will be saved if you make a template. This makes it supremely easy to brand all your social media posts.

Getting an image's link

Here's how to get an image's link using the Zazzle banner images as an example

Once you've got that link copied, just paste it into the Your image link box
This applies to any webpage - as long as what you're right-clicking is a jpg or png image. You probably don't need to be reminded to respect other's copyright ;)

If you don't have anywhere online to store your own images and make them available publicly, one place we've found that seems ok is imgbb. We've used them in the past and found no issues.

For this, your images need to be hosted somewhere that's publicly accessible. Just paste a link (url) to one below and then add it to the working layer. Add as many as you want.

Image link ending in png/jpg: at a size of: px wide

Add Stickers

Stickers are animated gifs and any added using this route will be included with your template, if you save one.

Getting a gif image

Here's how to get an animated gif image for the stage using a search of stickers over at Giphy

Once you've got that link copied, just paste it into the Image link box and click the button to add it to the foreground layer on the stage.

Sharing your graphic

When you want to share a graphic with animation, you'll need to record it first - but don't worry, there are easy to use tools that make it a cinch. For Mac, there's a desktop app that has everything you need called Giphy Capture. If this is you, we'd recommend saving it as a video (mp4 is the format used) to get manageable file sizes for your shares.

If you're on Windows, Chrome has an extension called Chrome Capture that works really well. To fine tune things with this tool, save as a web movie (WebM) and upload to EZGif to trim the start and end so you don't get a stutter in the animation. You can also speed it up there to give a smoother animation.

Whichever you use, just make sure you capture the entire image - no more, no less - so that it displays best on the social media your chosen template was designed for.

For an over-the-top-example, see this Chrismassy one It uses 5 animated gifs and so is a bit jerky and also has a largish file size (11MB) - not really suitable for social sharing.

Stickers are animated gifs and are always added to your foreground layer. A great resource for finding good ones to add to your graphic is Giphy. Find what you like, get its link and then paste it in the box below. Add as many as you want but ususally one or two is best for a smooth animation and small file size.

Image link ending in gif: at a size of: px wide

Add a simple colour frame

About simple frames

If you're not using a themed image frame, these are great for giving your staged products somewhere to "sit". You can even use two or more with different coloured / thickness borders if it suits you / your design imperative.

They're perfect for adding small text panels if you use a thin border and a fill colour set to transparent. An opacity of 50-80% works well for this. For Pinterest pins at the recommended 600x900px, a frame width of 400px or so is good.

Fill colour:
- use transparent fill instead with opacity of % (0=fully transparent)
Border colour:
Border width: px
Width (incl border): px
Height (incl border): px
Corner radius: px

Add stage text

About stage text

When you add your text to the stage, it will be flowed to fit within the paragraph width you give. You can break up text by using your enter key as normal.

There's no bold, italic or other text enhancements that you can set for individual words in the text, unfortunately. If you need something like that you'll need to set up different stage texts for them.

If you're going to use stage text with a frame as a panel for it, make sure you set the paragraph width appropriately, taking into account any borders set on the frame and leaving a bit for 'breathing space'.

Fonts you can use for stage text:
  • Acme
  • Kanit
  • Cinzel
  • IM Fell English SC
  • Neuton
  • Playfair Display
  • ZCOOL XiaoWei
  • Aclonica
  • Anton
  • Englebert
  • Jockey One
  • Orbitron
  • Pathway Gothic One
  • Roboto
  • Russo One
  • Saira Extra Condensed
  • Syncopate
  • Architects Daughter
  • Audiowide
  • Barriecito
  • Berkshire Swash
  • Bubblegum Sans
  • Bungee Shade
  • Cherry Cream Soda
  • Creepster
  • Emilys Candy
  • Fascinate Inline
  • Faster One
  • Fontdiner Swanky
  • Gochi Hand
  • Henny Penny
  • Indie Flower
  • Italianno
  • Lakki Reddy
  • Luckiest Guy
  • Mansalva
  • Mountains of Christmas
  • Nosifer
  • Pacifico
  • Patrick Hand
  • Petit Formal Script
  • Rancho
  • Rye
  • Sedgwick Ave Display
  • Shadows Into Light
  • Slackey
  • Snowburst One
  • Special Elite
  • Spirax
  • Sunshiney
  • Vast Shadow
  • Yeon Sung
  • Yeseva One

Font size: px
Font:
Font Colour:
Text para width: px
Text alignment:

Assets and images

Click the image to add it to the working layer.

  • Ruler trnsp:
  • Ruler white:
  • Get Zazzle Banners at this link (opens in new tab)

Pre-staging Clipart Area

If you paste in a bunch of image links/urls (ending in .png or .jpg) the images will be placed here when you click the button below.


To make it easy to get them from a clipart website, you'll need this bookmarklet: imgGrab
If you haven't already, drag and drop it onto your bookmarks toolbar.

A bookmarklet is a normal bookmark that does some magic instead of taking you to a web address. When you click or tap the bookmarklet, it will perform its magic on the page you're looking at instead of loading a different page, as most bookmarks do.

The magic that the imgGrab bookmarklet does for you is to let you grab image locations (urls) from almost any clipart website so you can copy and paste them here. Pixabay is a great place, with plenty of clipart you can use for free. Do check the licensing terms for yourself, though!

To use the bookmarklet:

  • first make sure your bookmark toolbar is showing at the top of your browser.
    If it's not showing, here's a handy place to find out how to show your bookmarks toolbar on your browser
  • once you can see it, just drag the bookmarklet above to your toolbar and drop it where you want.
  • next, go to pretty much any clipart site, navigate to the clipart you want to use
  • now's the time to click the imgGrab bookmarklet
  • scroll to where the images are showing and, as you move your mouse, watch for the dotted lines appearing around each section where they're showm
  • once the right section is highlighted click in that area and after a short pause a new window will open with the image locations (urls) showing ready for you to copy and paste here

It might take a bit of practice to get just what you want. If you need to try again just click the bookmarklet again to reactivate it properly - and make sure the results window doesn't get accidently hidden by your main browser window!

Here's a series of images showing you how

Clipart compilations

Click any of these compilations to load their images into the Pre-staging Clipart Area

Christmas compilation 68 festive images Party compilation 30 fun images Valentine compilation 56 images of love

Terms of use: These all come from Pixabay and to the best of our knowledge their licensing terms allow them to be used in graphics you create and share on social media. It is your responsibility to ensure your use conforms to their licensing terms and the owners of NiftyToolZ cannot be held liable for any breach.

Save / Load Template

About saving and loading templates

When you save, everything on the Background and Foreground layers are saved. Frames, text and non-product images on the Image layer are also saved but not product images. Instead, these become placeholders with their locations, rotations and sizes saved in the template, used next time you load it. You can see what we mean by using one of the templates in the Library. When you do, see those red squares? Those are the placeholders.

The file you load must be one previously saved by the product stager to ensure the format is right.

To save your frames, text and image-as-placeholders as a template, first click the create template to save button to generate the template ready for downloading. You'll then be given a link to click to actually download it. The filename used is nifty-product-stager-template.txt

Save:
Load:
Don't center template on stage, use as created

Tips

  • Watch a 4 1/2 minute video showing how to make a Pinterest pin for a Redbubble shop
  • Get help on each object that you can add to the stage by using its green help button. Click once to reveal the help and again to hide it
  • Click an image on the stage to reveal the transform handles so you can rotate and resize it
  • The buttons on the stager only work when an image is showing the transform handles
  • You can't "click through" the transparent parts of an image frame to what's underneath :(
  • ...so send your image frame to the back or slide it off to the side to let you easily work on things
  • ...when you're done, bring the frame back ready for taking a screenshot
  • Read all about the Product Stager on its page on NiftyToolZ

About Layers

There are three named layers for you to work with - they're the Background layer, Image Layer and Foreground Layer. The Product Stager always starts with the image layer active, as indicated by the blue background to the button.

Their intended purpose is to help you work efficiently on your design and to allow you to save and re-use your own templates (see below).

Your product and other images always go on the Image Layer, while you can place text and / or frames on both the Foreground and Background Layers.

The order of the layers is Foreground Layer->Image Layer->Background Layer. Having layers like this makes it much easier to get the results you want.

The reason that it's easier is because you can only work with shapes on the currently active layer and that way you don't accidentally grab things from other layers. To help with this, the non-active layers are faded out a little so you can see what's what.

In the example, a simple image frame with dark fill is on the background layer and the images are on the image layer above it. The foreground layer is used for three things: a purple-bordered, transparent-fill frame comes first, then a round-cornered, semi-transparent highlighting panel on top of that for the text and, finally, the text which sits on top of that.

When you're ready for a screenshot or you just want to see properly what your in-progress design looks like, use the Show all layers button.

About Templates

There are lots of library templates you can use - see the panel on the left for more.

You can also make your own templates, either starting from scratch or starting with one of the library templates. Any Product images loaded via the pre-staging area become placeholders for you to use next time you load that template. You can see what we mean by using one of the templates in the Library.

Any images you load via the "Assets and images" or "Add your own images" panels and place on the stage will be saved as part of your template.

Loading fonts spinner
  • Acme
  • Kanit
  • Cinzel
  • IM Fell English SC
  • Neuton
  • Playfair Display
  • ZCOOL XiaoWei
  • Aclonica
  • Anton
  • Englebert
  • Jockey One
  • Orbitron
  • Pathway Gothic One
  • Roboto
  • Russo One
  • Saira Extra Condensed
  • Syncopate
  • Architects Daughter
  • Audiowide
  • Barriecito
  • Berkshire Swash
  • Bubblegum Sans
  • Bungee Shade
  • Cherry Cream Soda
  • Creepster
  • Emilys Candy
  • Fascinate Inline
  • Faster One
  • Fontdiner Swanky
  • Gochi Hand
  • Henny Penny
  • Indie Flower
  • Italianno
  • Lakki Reddy
  • Luckiest Guy
  • Mansalva
  • Mountains of Christmas
  • Nosifer
  • Pacifico
  • Patrick Hand
  • Petit Formal Script
  • Rancho
  • Rye
  • Sedgwick Ave Display
  • Shadows Into Light
  • Slackey
  • Snowburst One
  • Special Elite
  • Spirax
  • Sunshiney
  • Vast Shadow
  • Yeon Sung
  • Yeseva One

Edit stage text

Editing text

You can edit / copy any of the elements of the text on the stage with the controls below. First, select the text you want to change / copy. Once it's showing the selection / transform handles, you're good to go.

If you change the words, they'll be re-flowed to fit within the paragraph width.

Put a check mark next to the things you want applied and remove the check from those you don't.


Font size: px apply on change
Font: apply on change
Font Colour: colour lock enabled
Text para width: px
Text alignment:



Stroke:

Edit stage frame

Editing frames

You can edit or copy any of the elements of a frame on the stage with the controls below. First, select the frame you want to change / copy. Once it's showing the selection / transform handles, you're good to go.

Put a check mark next to the things you want applied and remove the check from those you don't.

Fill colour: colour lock enabled
- use transparent fill instead with opacity of %
(0=fully transparent)

Border colour: colour lock enabled
Border width: px
Width (incl border): px
Height (incl border): px
Corner radius: px

Make best fit placeholders

What are best fit placeholders?

They're a set of placeholders that automatically fit into the space you allocate for them.

It can be a right royal pain to design a template starting from scratch so that's why this mini-tool exists - to take away the pain.

When you're ready, hit the button to generate your frame and placeholders - it may take a few seconds as there's a lot going on behind the scenes.

Then just fill your placeholders with images, change the background layer frame to suit, add anything else you need and save your lovely new template!

If you want to start again, don't forget to clear the stage!

Choose the social media you are making this graphic for:

Set Colour Theme

Setting Colour Theme - immediate effect

Easily get a colour theme that works with your products by choosing the colours that you want to base it on. Dark and light shades of the same-ish hue work well, as do adjacent colours on the colour wheel. But you choose what works for you.

The colour theme is regenerated and applied right away each time you change the defining colours.

The number of colours in the theme takes account of how many stage frames and texts you have, to make sure that the borders, fills and text colours are all different but related. If a frame uses a transparent fill, it'll be preserved.

Apply any final tweaks using the other editing panes to get exactly what you want.

Define range of colours used in the theme:

Product Image Borders

None Thin Medium Thick

Colour for border: colour lock enabled

Give all Product Images a border

You can give all your product images a border with a colour you choose. Put them on the stage first and then use the controls above to get the look you want.

Cheat Sheet

Useful things to know:

News

About News

Every time there's a change to this Nifty tool we'll announce it here. Whenever there's a new announcement, the previous one you saw will be shifted into the history.

If we need to, we'll update the current announcement instead of making a new one.

If you've hidden the news until there's a new announcement, you won't see updates. If you want to check for updates to the existing announcement from time to time, start the tool with this ?shownews=yes (and nothing else) immediately after the .html up in the address bar.

If you don't use the tool for a while, you may miss some announcements entirely and they won't be in your history - but that's ok, just visit the Facebook group linked below if there's a new feature you need help with :)

The buttons give you full control over what's displayed in this panel or whether the panel itself is displayed at all, with an option to keep it hidden until there's a new announcement.

One final point: we'll also show you here if there's a general announcement about Nifty that we think you need to see - but it won't be added to your history for this tool.

If you need help about any announcement made, visit the NiftyToolZTips and Support Facebook group and ask there. To see an explanation of this tool, visit the Nifty Product Stager page on our site.