Animation Background Portfolio Previews

Overview

Documentation for animation background portfolio assets, including notes on workflow, delivery options, and locations of publicly accessible assets.

Location

Google Drive (That particular folder has its permissions set to "Accessible to anyone with the link".)

To access the link to share the contents of that directory:

• Open the parent directory in Google Drive.
• Click on backgrounds directory to select it.
• With the backgrounds directory selected, click on the sharing icon at the upper right.
• Sharing Settings > Anyone with the link can view > Copy Link

Other options

• Google+
• Flickr
• Tumblr (It would have set up to be a page within my tumblr dedicated to backgrounds.)

Workflow for creating preview images

• Work in Photoshop with a substantial bleed on the images.
  • document: 4995 x 3105 pixels
  • bleed: 338 pixels (on each of all 4 sides)
  • active area: 4320 x 2430 pixels
  • target dimensions (after cropping & scaling): 1920 x 1080 pixels

• Put all artwork layers in a stand-along layer group in Photoshop.
• Apply a layer mask to that group that knocks out the bleed area of the image.
• File > Generate > Image Assets (checked)
• Name the layer group 1920 x 1080 filename.jpg
• While generate image assets is activated, any changes to the artwork will result in updates to the JPG file matching filename in the directory filename-assets in the same directory as the source PSD file.
• In practice it will be best to turn of the generate image assets option while painting.

Workflow for moving preview images to a publicly accessible location

Use grunt to make copies of the JPG/PNG preview images on Google Drive (or whatever cloud service is used).

Set up

Create a base package.json file in the directory holding the background assets.

{
	"name": "my-project-name",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "~0.4.5",
	}
}

Install the grunt-contrib-watch and grunt-sync packages in the same directory.

npm install grunt-contrib-watch --save-dev
npm install grunt-sync --save-dev

Create a gruntfile.js to define the workflow.

module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		watch: {
			previews: {
				files: ['**/*.jpg', '**/*.png', '**/*.gif'],
				tasks: ['sync:previews'],
			},
		},
		sync: {
			previews: {
				files: [
					{expand: true, src: ['**/*.jpg', '**/*.png', '**/*.gif'], dest: 'd:/cloud/Google Drive/creative/animation/portfolio/backgrounds/', flatten: true},
				],
				updateAndDelete: false
			}
		}
	});

	// load necessary grunt modules
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-sync');

	// Default task(s).
	grunt.registerTask('default', ['watch']);
};

• The watch task triggers the sync task whenever any web images are added or updated.
• The sync task copies the web images to the root of the local cloud directory.
• The cloud service (e.g. Google Drive) syncs the contents of the local directory with the web directory.