Editing Animation Background Portfolio Previews

[[Category:Animation]] [[Category:Design]] [[Category:Production]]
== Overview ==

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

== Location ==

[https://drive.google.com/folderview?id=0B7mrkY0aCZqrN05wTEg3bGtQbUE&usp=sharing 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.[[file:google-drive-icons.png]]
* '''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.

<syntaxhighlight lang="javascript">
{
	"name": "my-project-name",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "~0.4.5",
	}
}
</syntaxhighlight>

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

<syntaxhighlight lang="powershell">
npm install grunt-contrib-watch --save-dev
npm install grunt-sync --save-dev
</syntaxhighlight>

Create a `gruntfile.js` to define the workflow.

<syntaxhighlight lang="javascript">
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']);
};
</syntaxhighlight>

* 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.