Envato Tuts+ Tutorials

HTML5 Canvas Optimization: A Practical Example

2014-01-20T02:09:19+00:00

If you've been doing JavaScript development long enough, you've most likely crashed your browser a few times. The problem usually turns out to be some JavaScript bug, like an endless while loop; if not, the next suspect is page transformations or animations - the kind that involve adding and removing elements from the webpage or animating CSS style properties. This tutorial focuses on optimising animations produced using JS and the HTML5 <canvas> element.

This tutorial starts and ends with what the HTML5 animation widget you see below:

We will take it with us on a journey, exploring the different emerging canvas optimization tips and techniques and applying them to the widget's JavaScript source code. The goal is to improve on the widget's execution speed and end up with a smoother, more fluid animation widget, powered by leaner, more efficient JavaScript.

The source download contains the HTML and JavaScript from each step in the tutorial, so you can follow along from any point.

Let's take the first step.

Step 1: Play the Movie Trailer

The widget above is based on the movie trailer for Sintel, a 3D animated movie by the Blender Foundation. It's built using two of HTML5's most popular additions: the <canvas> and <video> elements.

The <video> loads and plays the Sintel video file, while the <canvas> generates its own animation sequence by taking snapshots of the playing video and blending it with text and other graphics. When you click to play the video, the canvas springs to life with a dark background that's a larger black and white copy of the playing video. Smaller, colored screen-shots of the video are copied to the scene, and glide across it as part of a film roll illustration.

In the top left corner, we have the title and a few lines of descriptive text that fade in and out as the animation plays. The script's performance speed and related metrics are included as part of the animation, in the small black box at the bottom left corner with a graph and vivid text. We'll be looking at this particular item in more detail later.

Finally, there's a large rotating blade that flies across the scene at the beginning of the animation, whose graphic is loaded from an external PNG image file.

Step 2: View the Source

The source code contains the usual mix of HTML, CSS and Javascript. The HTML is sparse: just the <canvas> and <video> tags, enclosed in a container <div>:

<div id="animationWidget" >
	<canvas width="368" height="208" id="mainCanvas" ></canvas>	
	<video width="184" height="104" id="video" autobuffer="autobuffer" controls="controls" poster="poster.jpg" >
		<source src="sintel.mp4" type="video/mp4" ></source>
		<source src="sintel.webm" type="video/webm" ></source>
	</video>
</div>

The container <div> is given an ID (animationWidget), which acts as a hook for all the CSS rules applied to it and its contents (below).

 
#animationWidget{
	border:1px #222 solid;
	position:relative;
	width: 570px;
	height: 220px;
}
#animationWidget canvas{
	border:1px #222 solid;
	position:absolute;
	top:5px;
	left:5px;			
}
#animationWidget video{
	position:absolute;
	top:110px;
	left:380px;		
}

While HTML and CSS are the marinated spices and seasoning, its the JavaScript that's the meat of the widget.

At the top, we have the main objects that will be used often through the script, including references to the canvas element and its 2D context.
The init() function is called whenever the video starts playing, and sets up all the objects used in the script.
The sampleVideo() function captures the current frame of the playing video, while setBlade() loads an external image required by the animation.
The pace and contents of the canvas animation are controlled by the main() function, which is like the script's heartbeat. Run at regular intervals once the video starts playing, it paints each frame of the animation by first clearing the canvas, then calling each one of the script's five drawing functions:
- drawBackground()
- drawFilm()
- drawTitle()
- drawDescription()
- drawStats()

As the the names suggest, each drawing function is responsible for drawing an item in the animation scene. Structuring the code this way improves flexibility and makes future maintenance easier.

The full script is shown below. Take a moment to assess it, and see if you can spot any changes you would make to speed it up.

(function(){
	if( !document.createElement("canvas").getContext ){ return; } //the canvas tag isn't supported
	
	var mainCanvas = document.getElementById("mainCanvas"); // points to the HTML canvas element above
	var mainContext = mainCanvas.getContext('2d'); //the drawing context of the canvas element
	var video = document.getElementById("video"); // points to the HTML video element
	var frameDuration = 33; // the animation's speed in milliseconds
	video.addEventListener( 'play', init ); // The init() function is called whenever the user presses play & the video starts/continues playing
	video.addEventListener( 'ended', function(){ drawStats(true); } ); //drawStats() is called one last time when the video end, to sum up all the statistics 		
	
	var videoSamples; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used to create the 'film reel'
	var backgrounds; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used as the canvas background
	var blade; //An canvas element to store the image copied from blade.png 
	var bladeSrc = 'blade.png'; //path to the blade's image source file
	
	var lastPaintCount = 0; // stores the last value of mozPaintCount sampled
	var paintCountLog = []; // an array containing all measured values of mozPaintCount over time
	var speedLog = []; // an array containing all the execution speeds of main(), measured in milliseconds
	var fpsLog = []; // an array containing the calculated frames per secong (fps) of the script, measured by counting the calls made to main() per second
	var frameCount = 0; // counts the number of times main() is executed per second.
	var frameStartTime = 0; // the last time main() was called
	
	// Called when the video starts playing. Sets up all the javascript objects required to generate the canvas animation and measure perfomance
	function init(){ 
		if( video.currentTime > 1 ){ return; }		

		bladeSrc = new Image();
		bladeSrc.src = "blade.png";
		bladeSrc.onload = setBlade;
		
		backgrounds = [];			
		videoSamples = [];
		fpsLog = [];
		paintCountLog = [];	
		if( window.mozPaintCount ){ lastPaintCount = window.mozPaintCount; }
		speedLog = [];
		frameCount = 0;	
		frameStartTime = 0;
		main(); 
		setTimeout( getStats, 1000 );
	}
	
	// As the scripts main function, it controls the pace of the animation
	function main(){	
		setTimeout( main, frameDuration );
		if( video.paused || video.ended ){ return; }
		
		var now = new Date().getTime(); 
		if( frameStartTime ){ 
			speedLog.push( now - frameStartTime );
		}
		frameStartTime = now;
		if( video.readyState < 2 ){ return; }
		
		frameCount++;
		mainCanvas.width = mainCanvas.width; //clear the canvas
		drawBackground(); 
		drawFilm();
		drawDescription();
		drawStats();
		drawBlade();
		drawTitle();
	}
	
	// This function is called every second, and it calculates and stores the current frame rate
	function getStats(){
		if( video.readyState >= 2 ){
			if( window.mozPaintCount ){ //this property is specific to firefox, and tracks how many times the browser has rendered the window since the document was loaded
				paintCountLog.push( window.mozPaintCount - lastPaintCount );
				lastPaintCount = window.mozPaintCount;
			}			
			
			fpsLog.push(frameCount);
			frameCount = 0;	
		}
		setTimeout( getStats, 1000 );
	}
	
	// create blade, the ofscreen canavs that will contain the spining animation of the image copied from blade.png
	function setBlade(){
		blade = document.createElement("canvas");
		blade.width = 400;
		blade.height = 400;			
		blade.angle = 0;
		blade.x = -blade.height * 0.5;
		blade.y = mainCanvas.height/2 - blade.height/2; 
	}
			
	// Creates and returns a new image that contains a snapshot of the currently playing video.
	function sampleVideo(){
		var newCanvas = document.createElement("canvas");
		newCanvas.width = video.width;
		newCanvas.height = video.height; 
		newCanvas.getContext("2d").drawImage( video, 0, 0, video.width, video.height );
		return newCanvas;	
	}
	
	// renders the dark background for the whole canvas element. The background features a greyscale sample of the video and a gradient overlay
	function drawBackground(){
		var newCanvas = document.createElement("canvas");
		var newContext = newCanvas.getContext("2d");
		newCanvas.width = mainCanvas.width;
		newCanvas.height = mainCanvas.height; 
		newContext.drawImage(  video, 0, video.height * 0.1, video.width, video.height * 0.5, 0, 0, mainCanvas.width, mainCanvas.height  );
			
		var imageData, data;
		try{
			imageData = newContext.getImageData( 0, 0, mainCanvas.width, mainCanvas.height );
			data = imageData.data;
		} catch(error){ // CORS error (eg when viewed from a local file). Create a solid fill background instead
			newContext.fillStyle = "yellow";
			newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
			imageData = mainContext.createImageData( mainCanvas.width, mainCanvas.height );
			data = imageData.data;
		}
		
		//loop through each pixel, turning its color into a shade of grey
		for( var i = 0; i < data.length; i += 4 ){
			var red = data[i]; 
			var green = data[i + 1]; 
			var blue = data[i + 2]; 
			var grey = Math.max( red, green, blue );
			
			data[i] =  grey;
			data[i+1] = grey;
			data[i+2] = grey;
		}
		newContext.putImageData( imageData, 0, 0 );
		
		//add the gradient overlay
		var gradient = newContext.createLinearGradient( mainCanvas.width/2, 0, mainCanvas.width/2, mainCanvas.height );
		gradient.addColorStop( 0, '#000' );
		gradient.addColorStop( 0.2, '#000' );
		gradient.addColorStop( 1, "rgba(0,0,0,0.5)" );
		newContext.fillStyle = gradient;
		newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
		
		mainContext.save();
		mainContext.drawImage( newCanvas, 0, 0, mainCanvas.width, mainCanvas.height );
		
		mainContext.restore();
	}
	
	// renders the 'film reel' animation that scrolls across the canvas
	function drawFilm(){
		var sampleWidth = 116; // the width of a sampled video frame, when painted on the canvas as part of a 'film reel'
		var sampleHeight = 80; // the height of a sampled video frame, when painted on the canvas as part of a 'film reel'
		var filmSpeed = 20; // determines how fast the 'film reel' scrolls across the generated canvas animation.
		var filmTop = 120; //the y co-ordinate of the 'film reel' animation
		var filmAngle = -10 * Math.PI / 180; //the slant of the 'film reel'
		var filmRight = ( videoSamples.length > 0 )? videoSamples[0].x + videoSamples.length * sampleWidth : mainCanvas.width; //the right edge of the 'film reel' in pixels, relative to the canvas		
		
		//here, we check if the first frame of the 'film reel' has scrolled out of view 
		if( videoSamples.length > 0 ){
			var bottomLeftX = videoSamples[0].x + sampleWidth;
			var bottomLeftY = filmTop + sampleHeight;
			bottomLeftX = Math.floor( Math.cos(filmAngle) * bottomLeftX - Math.sin(filmAngle) * bottomLeftY ); // the final display position after rotation
			
			if( bottomLeftX < 0 ){ //the frame is offscreen, remove it's refference from the film array
				videoSamples.shift();			
			}			
		}			
		
		// add new frames to the reel as required
		while( filmRight <= mainCanvas.width ){
			var newFrame = {};
			newFrame.x = filmRight;
			newFrame.canvas = sampleVideo();
			videoSamples.push(newFrame);			
			filmRight += sampleWidth;			
		}
		
		// create the gradient fill for the reel
		var gradient = mainContext.createLinearGradient( 0, 0, mainCanvas.width, mainCanvas.height );
		gradient.addColorStop( 0, '#0D0D0D' );
		gradient.addColorStop( 0.25, '#300A02' );
		gradient.addColorStop( 0.5, '#AF5A00' );
		gradient.addColorStop( 0.75, '#300A02' );
		gradient.addColorStop( 1, '#0D0D0D' );			
			
		mainContext.save();
		mainContext.globalAlpha = 0.9;
		mainContext.fillStyle = gradient;			
		mainContext.rotate(filmAngle);
		
		// loops through all items of film array, using the stored co-ordinate values of each to draw part of the 'film reel'
		for( var i in videoSamples ){
			var sample = videoSamples[i];				
			var punchX, punchY, punchWidth = 4, punchHeight = 6, punchInterval = 11.5;
			
			//draws the main rectangular box of the sample
			mainContext.beginPath();
			mainContext.moveTo( sample.x, filmTop );
			mainContext.lineTo( sample.x + sampleWidth, filmTop );
			mainContext.lineTo( sample.x + sampleWidth, filmTop + sampleHeight );
			mainContext.lineTo( sample.x, filmTop + sampleHeight );
			mainContext.closePath();				
			
			//adds the small holes lining the top and bottom edges of the 'fim reel'
			for( var j = 0; j < 10; j++ ){
				punchX = sample.x + ( j * punchInterval ) + 5;
				punchY = filmTop + 4;
				mainContext.moveTo( punchX, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY );				
				mainContext.lineTo( punchX, punchY );
				mainContext.closePath();
				punchX = sample.x + ( j * punchInterval ) + 5;
				punchY = filmTop + 70;
				mainContext.moveTo( punchX, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
				mainContext.lineTo( punchX + punchWidth, punchY );				
				mainContext.lineTo( punchX, punchY );
				mainContext.closePath();
			} 
			mainContext.fill();			
		}		
		
		//loop through all items of videoSamples array, update the x co-ordinate values of each item, and draw its stored image onto the canvas
		mainContext.globalCompositeOperation = 'lighter';
		for( var i in videoSamples ){
			var sample = videoSamples[i];
			sample.x -= filmSpeed;	
			mainContext.drawImage( sample.canvas, sample.x + 5, filmTop + 10, 110, 62 );			
		}
		
		mainContext.restore();			
	}
	
	// renders the canvas title
	function drawTitle(){
		mainContext.save();
		mainContext.fillStyle = 'black';
		mainContext.fillRect( 0, 0, 368, 25 ); 
		mainContext.fillStyle = 'white';
		mainContext.font = "bold 21px Georgia";
		mainContext.fillText( "SINTEL", 10, 20 );	
		mainContext.restore();
	}
	
	// renders all the text appearing at the top left corner of the canvas
	function drawDescription(){		
		var text = []; //stores all text items, to be displayed over time. the video is 60 seconds, and each will be visible for 10 seconds.
		text[0] = "Sintel is an independently produced short film, initiated by the Blender Foundation.";
		text[1] = "For over a year an international team of 3D animators and artists worked in the studio of the Amsterdam Blender Institute on the computer-animated short 'Sintel'.";
		text[2] = "It is an epic short film that takes place in a fantasy world, where a girl befriends a baby dragon.";
		text[3] = "After the little dragon is taken from her violently, she undertakes a long journey that leads her to a dramatic confrontation.";
		text[4] = "The script was inspired by a number of story suggestions by Martin Lodewijk around a Cinderella character (Cinder in Dutch is 'Sintel'). ";
		text[5] = "Screenwriter Esther Wouda then worked with director Colin Levy to create a script with multiple layers, with strong characterization and dramatic impact as central goals.";			
		text = text[Math.floor( video.currentTime / 10 )]; //use the videos current time to determine which text item to display.  
		
		mainContext.save();
		var alpha = 1 - ( video.currentTime % 10 ) / 10;
		mainContext.globalAlpha = ( alpha < 5 )? alpha : 1;
		mainContext.fillStyle = '#fff';
		mainContext.font = "normal 12px Georgia";
		
		//break the text up into several lines as required, and write each line on the canvas
		text = text.split(' ');
		var colWidth = mainCanvas.width * .75;
		var line = '';
		var y = 40;
		for(var i in text ){
			line += text[i] + ' ';
			if( mainContext.measureText(line).width > colWidth ){
				mainContext.fillText( line, 10, y ); 
				line = '';
				y += 12;				
			}			
		}
		mainContext.fillText( line, 10, y ); 
		
		mainContext.restore();
	}
	
	//updates the bottom-right potion of the canvas with the latest perfomance statistics
	function drawStats( average ){			
		var x = 245.5, y = 130.5, graphScale = 0.25;
		
		mainContext.save();
		mainContext.font = "normal 10px monospace";
		mainContext.textAlign = 'left';
		mainContext.textBaseLine = 'top';
		mainContext.fillStyle = 'black';
		mainContext.fillRect( x, y, 120, 75 );			
		
		//draw the x and y axis lines of the graph
		y += 30;	
		x += 10;			
		mainContext.beginPath();
		mainContext.strokeStyle = '#888';
		mainContext.lineWidth = 1.5;
		mainContext.moveTo( x, y );
		mainContext.lineTo( x + 100, y );
		mainContext.stroke();
		mainContext.moveTo( x, y );
		mainContext.lineTo( x, y - 25 );
		mainContext.stroke();			
		
		// draw the last 50 speedLog entries on the graph
		mainContext.strokeStyle = '#00ffff';
		mainContext.fillStyle = '#00ffff';
		mainContext.lineWidth = 0.3;
		var imax = speedLog.length;
		var i = ( speedLog.length > 50 )? speedLog.length - 50 : 0
		mainContext.beginPath();				
		for( var j = 0; i < imax; i++, j += 2 ){				
			mainContext.moveTo( x + j, y );
			mainContext.lineTo( x + j, y - speedLog[i] * graphScale );		
			mainContext.stroke();
		}
		
		// the red line, marking the desired maximum rendering time
		mainContext.beginPath();
		mainContext.strokeStyle = '#FF0000';
		mainContext.lineWidth = 1;
		var target = y - frameDuration * graphScale;				
		mainContext.moveTo( x, target );
		mainContext.lineTo( x + 100, target );		
		mainContext.stroke();
		
		// current/average speedLog items
		y += 12;
		if( average ){
			var speed = 0;
			for( i in speedLog ){ speed += speedLog[i]; }
			speed = Math.floor( speed / speedLog.length * 10) / 10;
		}else {
			speed = speedLog[speedLog.length-1];
		}
		mainContext.fillText( 'Render Time: ' + speed, x, y );
		
		// canvas fps
		mainContext.fillStyle = '#00ff00';
		y += 12;
		if( average ){
			fps = 0;
			for( i in fpsLog ){ fps += fpsLog[i]; }
			fps = Math.floor( fps / fpsLog.length * 10) / 10;
		}else {
			fps = fpsLog[fpsLog.length-1];
		}
		mainContext.fillText( ' Canvas FPS: ' + fps, x, y );
		
		// browser frames per second (fps), using window.mozPaintCount (firefox only)
		if( window.mozPaintCount ){ 	
			y += 12;
			if( average ){
				fps = 0;
				for( i in paintCountLog ){ fps += paintCountLog[i]; }
				fps = Math.floor( fps / paintCountLog.length * 10) / 10;
			}else {	
				fps = paintCountLog[paintCountLog.length-1];	
			}
			mainContext.fillText( 'Browser FPS: ' + fps, x, y );
		}
		
		mainContext.restore();
	}
	
	//draw the spining blade that appears in the begining of the animation	
	function drawBlade(){ 
		if( !blade || blade.x > mainCanvas.width ){ return; }
		blade.x += 2.5;
		blade.angle = ( blade.angle - 45 ) % 360;
		
		//update blade, an ofscreen canvas containing the blade's image
		var angle = blade.angle * Math.PI / 180;			
		var bladeContext = blade.getContext('2d');
		blade.width = blade.width; //clear the canvas
		bladeContext.save(); 
		bladeContext.translate( 200, 200 ); 
		bladeContext.rotate(angle); 
		bladeContext.drawImage( bladeSrc, -bladeSrc.width/2, -bladeSrc.height/2 );
		bladeContext.restore();
		
		mainContext.save(); 
		mainContext.globalAlpha = 0.95;
		mainContext.drawImage( blade, blade.x, blade.y + Math.sin(angle) * 50 ); 
		mainContext.restore();
	}	
})();

Step 3: Code Optimization: Know the Rules

The first rule of code performance optimization is: Don't.

The point of this rule is to discourage optimization for optimization's sake, since the process comes at a price.

A highly optimized script will be easier for the browser to parse and process, but usually with a burden for humans who will find it harder to follow and maintain. Whenever you do decide that some optimization is necessary, set some goals beforehand so that you don't get carried away by the process and overdo it.

The goal in optimizing this widget will be to have the main() function run in less than 33 milliseconds as it's supposed to, which will match the frame rate of the playing video files (sintel.mp4 and sintel.webm). These files were encoded at a playback speed of 30fps (thirty frames per second), which translates to about 0.33 seconds or 33 milliseconds per frame ( 1 second ÷ 30 frames ).

Since JavaScript draws a new animation frame to the canvas every time the main() function is called, the goal of our optimization process will be to make this function take 33 milliseconds or less each time it runs. This function repeatedly calls itself using a setTimeout() Javascript timer as shown below.

 
var frameDuration = 33; // set the animation's target speed in milliseconds	
function main(){
	if( video.paused || video.ended ){ return false; }			
	setTimeout( main, frameDuration );

The second rule: Don't yet.

This rule stresses the point that optimization should always be done at the end of the development process when you've already fleshed out some complete, working code. The optimization police will let us go on this one, since the widget's script is a perfect example of complete, working program that's ready for the process.

The third rule: Don't yet, and profile first.

This rule is about understanding your program in terms of runtime performance. Profiling helps you know rather than guess which functions or areas of the script take up the most time or are used most often, so that you can focus on those in the optimization process. It is critical enough to make leading browsers ship with inbuilt JavaScript profilers, or have extensions that provide this service.

I ran the widget under the profiler in Firebug, and below is a screenshot of the results.

Step 4: Set Some Performance Metrics

As you ran the widget, I'm sure you found all the Sintel stuff okay, and were absolutely blown away by the item on the lower right corner of the canvas, the one with a beautiful graph and shiny text.

It's not just a pretty face; that box also delivers some real-time performance statistics on the running program. Its actually a simple, bare-bones Javascript profiler. That's right! Yo, I heard you like profiling, so I put a profiler in your movie, so that you can profile it while you watch.

The graph tracks the Render Time, calculated by measuring how long each run of main() takes in milliseconds. Since this is the function that draws each frame of the animation, it's effectively the animation's frame rate. Each vertical blue line on the graph illustrates the time taken by one frame. The red horizontal line is the target speed, which we set at 33ms to match the video file frame rates. Just below the graph, the speed of the last call to main() is given in milliseconds.

The profiler is also a handy browser rendering speed test. At the moment, the average render time in Firefox is 55ms, 90ms in IE 9, 41ms in Chrome, 148ms in Opera and 63ms in Safari. All the browsers were running on Windows XP, except for IE 9 which was profiled on Windows Vista.

The next metric below that is Canvas FPS (canvas frames per second), obtained by counting how many times main() is called per second. The profiler displays the latest Canvas FPS rate when the video is still playing, and when it ends it shows the average speed of all calls to main().

The last metric is Browser FPS, which measures how many the browser repaints the current window every second. This one is only available if you view the widget in Firefox, as it depends on a feature currently only available in that browser called window.mozPaintCount., a JavaScript property that keeps track of how many times the browser window has been repainted since the webpage first loaded.

The repaints usually occur when an event or action that changes the look of a page occurs, like when you scroll down the page or mouse-over a link. It's effectively the browser's real frame rate, which is determined by how busy the current webpage is.

To gauge what effect the un-optimized canvas animation had on mozPaintCount, I removed the canvas tag and all the JavaScript, so as to track the browser frame rate when playing just the video. My tests were done in Firebug's console, using the function below:

	var lastPaintCount = window.mozPaintCount;
	setInterval( function(){
		console.log( window.mozPaintCount - lastPaintCount );
		lastPaintCount = window.mozPaintCount;
	}, 1000);

The results: The browser frame rate was between 30 and 32 FPS when the video was playing, and dropped to 0-1 FPS when the video ended. This means that Firefox was adjusting its window repaint frequency to match that of the playing video, encoded at 30fps. When the test was run with the un-optimized canvas animation and video playing together, it slowed down to 16fps, as the browser was now struggling to run all the JavaScript and still repaint its window on time, making both the video playback and canvas animations sluggish.

We'll now start tweaking our program, and as we do so, we'll keep track of the Render Time, Canvas FPS and Browser FPS to measure the effects of our changes.

Step 5: Use `requestAnimationFrame()`

The last two JavaScript snippets above make use of the setTimeout() and setInterval() timer functions. To use these functions, you specify a time interval in milliseconds and the callback function you want executed after the time elapses. The difference between the two is that setTimeout() will call your function just once, while setInterval() calls it repeatedly.

While these functions have always been indispensable tools in the JavaScript animator's kit, they do have a few flaws:

First, the time interval set is not always reliable. If the program is still in the middle of executing something else when the interval elapses, the callback function will be executed later than originally set, once the browser is no longer busy. In the main() function, we set the interval to 33 milliseconds - but as the profiler reveals, the function is actually called every 148 milliseconds in Opera.

Second, there's an issue with browser repaints. If we had a callback function that generated 20 animation frames per second while the browser repainted its window only 12 times a second, 8 calls to that function will be wasted as the user will never get to see the results.

Finally, the browser has no way of knowing that the function being called is animating elements in the document. This means that if those elements scroll out of view, or the user clicks on another tab, the callback will still get executed repeatedly, wasting CPU cycles.

Using requestAnimationFrame() solves most of these problems, and it can be used instead of the timer functions in HTML5 animations. Instead of specifying a time interval, requestAnimationFrame() synchronizes the function calls with browser window repaints. This results in more fluid, consistent animation as no frames are dropped, and the browser can make further internal optimizations knowing an animation is in progress.

To replace setTimeout() with requestAnimationFrame in our widget, we first add the following line at the top of our script:

requestAnimationFrame = window.requestAnimationFrame || 
						window.mozRequestAnimationFrame || 
						window.webkitRequestAnimationFrame || 
						window.msRequestAnimationFrame || 
						setTimeout;

As the specification is still quite new, some browsers or browser versions have their own experimental implementations, this line makes sure that the function name points to the right method if it is available, and falls back to setTimeout() if not. Then in the main() function, we change this line:

1
2	setTimeout( main, frameDuration );

...to:

1	requestAnimationFrame( main, canvas );

The first parameter takes the callback function, which in this case is the main() function. The second parameter is optional, and specifies the DOM element that contains the animation. It is supposed to be used by to compute additional optimizations.

Note that the getStats() function also uses a setTimeout(), but we leave that one in place since this particular function has nothing to do with animating the scene. requestAnimationFrame() was created specifically for animations, so if your callback function is not doing animation, you can still use setTimeout() or setInterval().

Step 6: Use the Page Visibility API

In the last step we made requestAnimationFrame power the canvas animation, and now we have a new problem. If we start running the widget, then minimize the browser window or switch to a new tab, the widget's window repaint rate throttles down to save power. This also slows down the canvas animation since it is now synchronized with the repaint rate - which would be perfect if the video did not keep playing on to the end.

We need a way to detect when the page is not being viewed so that we can pause the playing video; this is where the Page Visibility API comes to the rescue.

The API contains a set of properties, functions and events we can use to detect if a webpage is in view or hidden. We can then add code that adjusts our program's behavior accordingly. We will make use of this API to pause the widget's playing video whenever the page is inactive.

We start by adding a new event listener to our script:

1
2	document.addEventListener( 'visibilitychange', onVisibilityChange, false);

Next comes the event handler function:

 
// Adjusts the program behavior, based on whether the webpage is active or hidden
function onVisibilityChange() {
	if( document.hidden && !video.paused ){  
		video.pause();  
	}else  if( video.paused ){  
		video.play();  
	}  
}

Step 7: For Custom Shapes, Draw the Whole Path At Once

Paths are used to create and draw custom shapes and outlines on the <canvas> element, which will at all times have one active path.

A path holds a list of sub-paths, and each sub-path is made up of canvas co-ordinate points linked together by either a line or a curve. All the path making and drawing functions are properties of the canvas's context object, and can be classified into two groups.

There are the subpath-making functions, used to define a subpath and include lineTo(), quadraticCurveTo(), bezierCurveTo(), and arc(). Then we have stroke() and fill(), the path/subpath drawing functions. Using stroke() will produce an outline, while fill() generates a shape filled by either a color, gradient or pattern.

When drawing shapes and outline on the canvas, it is more efficient to create the whole path first, then just stroke() or fill() it once, rather than defining and drawing each supbath at a time. Taking the profiler's graph described in Step 4 as an example, each single vertical blue line is a subpath, while all of them together make up the whole current path.

The stroke() method is currently being called within a loop that defines each subpath:

 
	mainContext.beginPath();				
	for( var j = 0; i < imax; i++, j += 2 ){				
		mainContext.moveTo( x + j, y ); // define the subpaths starting point
		mainContext.lineTo( x + j, y - speedLog[i] * graphScale );	// set the subpath as a line, and define its endpoint	
		mainContext.stroke(); // draw the subpath to the canvas
	}

This graph can be drawn much more efficiently by first defining all the subpaths, then just drawing the whole current path at once, as shown below.

 
	mainContext.beginPath();				
	for( var j = 0; i < imax; i++, j += 2 ){				
		mainContext.moveTo( x + j, y ); // define the subpaths starting point
		mainContext.lineTo( x + j, y - speedLog[i] * graphScale );	// set the subpath as a line, and define its endpoint
	}	
	mainContext.stroke(); // draw the whole current path to the mainCanvas.

Step 8: Use an Off-Screen Canvas To Build the Scene

This optimization technique is related to the one in the previous step, in that they are both based on the same principle of minimizing webpage repaints.

Whenever something happens that changes a document's look or content, the browser has to schedule a repaint operation soon after that to update the interface. Repaints can be an expensive operation in terms of CPU cycles and power, especially for dense pages with a lot of elements and animation going on. If you are building up a complex animation scene by adding up many items one at a time to the <canvas>, every new addition may just trigger a whole repaint.

It is better and much faster to build the scene on an off screen (in memory) <canvas>, and once done, paint the whole scene just once to the onscreen, visible <canvas>.

Just below the code that gets reference to the widget's <canvas> and its context, we'll add five new lines that create an off-screen canvas DOM object and match its dimensions with that of the original, visible <canvas>.

 
	var mainCanvas = document.getElementById("mainCanvas"); // points to the on-screen, original HTML canvas element
	var mainContext = mainCanvas.getContext('2d'); // the drawing context of the on-screen canvas element 
	var osCanvas = document.createElement("canvas"); // creates a new off-screen canvas element
	var osContext = osCanvas.getContext('2d'); //the drawing context of the off-screen canvas element
	osCanvas.width = mainCanvas.width; // match the off-screen canvas dimensions with that of #mainCanvas
	osCanvas.height = mainCanvas.height;

We'll then do as search and replace in all the drawing functions for all references to "mainCanvas" and change that to "osCanvas". References to "mainContext" will be replaced with "osContext". Everything will now be drawn to the new off-screen canvas, instead of the original <canvas>.

Finally, we add one more line to main() that paints what's currently on the off-screen <canvas> into our original <canvas>.

 
// As the scripts main function, it controls the pace of the animation
function main(){
	requestAnimationFrame( main, mainCanvas );
	if( video.paused || video.currentTime > 59  ){ return; }
	
	var now = new Date().getTime(); 
	if( frameStartTime ){ 
		speedLog.push( now - frameStartTime );
	}
	frameStartTime = now;
	if( video.readyState < 2 ){ return; }
	
	frameCount++;
	osCanvas.width = osCanvas.width; //clear the offscreen canvas
	drawBackground(); 
	drawFilm();
	drawDescription();
	drawStats();
	drawBlade();
	drawTitle();
	mainContext.drawImage( osCanvas, 0, 0 ); // copy the off-screen canvas graphics to the on-screen canvas
}

Step 9: Cache Paths As Bitmap Images Whenever Possible

For many kinds of graphics, using drawImage() will be much faster than constructing the same image on canvas using paths. If you find that a large potion of your script is spent repeatedly drawing the same shapes and outlines over and over again, you may save the browser some work by caching the resulting graphic as a bitmap image, then painting it just once to the canvas whenever required using drawImage().

There are two ways of doing this.

The first is by creating an external image file as a JPG, GIF or PNG image, then loading it dynamically using JavaScript and copying it to your canvas. The one drawback of this method is the extra files your program will have to download from the network, but depending on the type of graphic or what your application does, this could actually be a good solution. The animation widget uses this method to load the spinning blade graphic, which would have been impossible to recreate using just the canvas path drawing functions.

The second method involves just drawing the graphic once to an off-screen canvas rather than loading an external image. We will use this method to cache the title of the animation widget. We first create a variable to reference the new off-screen canvas element to be created. Its default value is set to false, so that we can tell whether or not an image cache has been created, and saved once the script starts running:

1
2	var titleCache = false; // points to an off-screen canvas used to cache the animation scene's title

We then edit the drawTitle() function to first check whether the titleCache canvas image has been created. If it hasn't, it creates an off-screen image and stores a reference to it in titleCache:

 
// renders the canvas title
function drawTitle(){
	if( titleCache == false ){ // create and save the title image
		titleCache = document.createElement('canvas');
		titleCache.width = osCanvas.width;
		titleCache.height = 25;
		
		var context = titleCache.getContext('2d');			
		context.fillStyle = 'black';
		context.fillRect( 0, 0, 368, 25 ); 
		context.fillStyle = 'white';
		context.font = "bold 21px Georgia";
		context.fillText( "SINTEL", 10, 20 );		
	}

	osContext.drawImage( titleCache, 0, 0 ); 
}

Step 10: Clear the Canvas With `clearRect()`

The first step in drawing a new animation frame is to clear the canvas of the current one. This can be done by either resetting the width of the canvas element, or using the clearRect() function.

Resetting the width has a side effect of also clearing the current canvas context back to its default state, which can slow things down. Using clearRect() is always the faster and better way to clear the canvas.

In the main() function, we'll change this:

1
2	osCanvas.width = osCanvas.width; //clear the off-screen canvas

...to this:

1
2	osContext.clearRect( 0, 0, osCanvas.width, osCanvas.height ); //clear the offscreen canvas

Step 11: Implement Layers

If you've worked with image or video editing software like Gimp or Photoshop before, then you're already familiar with the concept of layers, where an image is composed by stacking many images on top of one another, and each can be selected and edited separately.

Applied to a canvas animation scene, each layer will be a separate canvas element, placed on top of each other using CSS to create the illusion of a single element. As an optimization technique, it works best when there is a clear distinction between foreground and background elements of a scene, with most of the action taking place in the foreground. The background can then be drawn on a canvas element that does not change much between animation frames, and the foreground on another more dynamic canvas element above it. This way, the whole scene doesn't have to be redrawn again for each animation frame.

Unfortunately, the animation widget is a good example of a scene where we cannot usefully apply this technique, since both the foreground and background elements are highly animated.

Step 12: Update Only The Changing Areas of an Animation Scene

This is another optimization technique that depends heavily on the animation's scene composition. It can be used when the scene animation is concentrated around a particular rectangular region on the canvas. We could then clear and redraw just redraw that region.

For example, the Sintel title remains unchanged throughout most of the animation, so we could leave that area intact when clearing the canvas for the next animation frame.

To implement this technique, we replace the line that calls the title drawing function in main() with the following block:

 
	if( titleCache == false ){ // If titleCache is false, the animation's title hasn't been drawn yet
		drawTitle(); // we draw the title. This function will now be called just once, when the program starts
		osContext.rect( 0, 25, osCanvas.width, osCanvas.height ); // this creates a path covering the area outside by the title
		osContext.clip(); // we use the path to create a clipping region, that ignores the title's region
	}

Step 13: Minimize Sub-Pixel Rendering

Sub-pixel rendering or anti-aliasing happens when the browser automatically applies graphic effects to remove jagged edges. It results in smoother looking images and animations, and is automatically activated whenever you specify fractional co-ordinates rather than whole number when drawing to the canvas.

Right now there is no standard on exactly how it should be done, so subpixel rendering is a bit inconsistent across browsers in terms of the rendered output. It also slows down rendering speeds as the browser has to do some calculations to generate the effect. As canvas anti-aliasing cannot be directly turned off, the only way to get around it is by always using whole numbers in your drawing co-ordinates.

We will use Math.floor() to ensure whole numbers in our script whenever applicable. For example, the following line in drawFilm():

1
2	punchX = sample.x + ( j * punchInterval ) + 5; // the x co-ordinate

...is rewritten as:

1
2	punchX = Math.floor ( sample.x + ( j * punchInterval ) ) + 5; // the x co-ordinate

Step 14: Measure the Results

We've looked at quite a few canvas animation optimization techniques, and it now time to review the results.

This table shows the before and after average Render Times and Canvas FPS. We can see some significant improvements across all the browsers, though it's only Chrome that really comes close to achieving our original goal of a maximum 33ms Render Time. This means there is still much work to be done to get that target.

We could proceed by applying more general JavaScript optimization techniques, and if that still fails, maybe consider toning down the animation by removing some bells and whistles. But we won't be looking at any of those other techniques today, as the focus here was on optimizations for <canvas> animation.

The Canvas API is still quite new and growing every day, so keep experimenting, testing, exploring and sharing. Thanks for reading the tutorial.

How to correct lens distortion in DaVinci Resolve Studio

2024-06-15T00:58:34+00:00

In this tutorial, you’ll learn how to correct lens distortion in DaVinci Resolve Studio. This helps you salvage distorted video footage and make it perfect for use. And it only takes a few clicks.

In this tutorial, I’ll show you how to correct lens distortion in DaVinci Resolve Studio 19.

Picture the scene: you’ve captured video footage out in the field. You’re excited to get to work editing it into an amazing final project. But when you open up your videos in DaVinci Resolve Studio, there’s a problem. Lens distortion has crept in, and the scene doesn’t appear true to life. Can your video be saved? Yes! Let’s learn how to fix lens distortion in DaVinci Resolve Studio.

What is lens distortion? (and why should I remove it?)

Lens distortion is a visual defect that cameras capture. In short, it means that straight lines seem curved. It’s most common with wide-angle photography, and it appears by design when you use a fish-eye lens. Unintended distortion is easy to correct in DaVinci Resolve Studio 19.

Why remove lens distortion? Consider this:

You’ll make videos seem truer to life. Lens distortion makes scenes appear far different from real life. With a quick correction, you’ll portray scenes the way they really looked.
You’ll keep key details in focus. Lens distortion tends to hide critical visual details. Fix it to ensure your audiences are seeing scenes just as you envision them.
Your videos will look more professional. Lens distortion corrections are an element of professional editors’ workflow. Skip this step, and viewers will take notice. Always make sure you’re cleaning up lens distortion as a part of your editing workflow.

The advantages are clear. Now, let’s learn how to correct lens distortion in DaVinci Resolve Studio, step by step.

How to correct lens distortion in DaVinci Resolve Studio step by step

It’s easy to correct lens distortion with DaVinci Resolve Studio. We’ll demonstrate it with this stock video clip. This is fisheye footage where distortion might have been intended, but it's great for demonstrating the power of correction. Download it from Envato Elements if you’d like to follow along.

1. Add a video clip to the timeline

The first step in correcting lens distortion is to add a clip to your DaVinci Resolve Studio Timeline. The Timeline is the panel covering the lower half of Resolve Studio’s screen. It’s where you arrange and organize all multimedia in your project.

Launch DaVinci Resolve Studio, then open the Cut tab. Your screen should look like this.

With Resolve Studio open, make sure that you’re working on the Cut tab. You can access it on the toolbar that runs across the very bottom of Resolve Studio.

On the Cut tab, click the Media Pool button in the upper left corner. Imported project videos will show in the Master preview area.

Drag a clip from the Media Pool onto the Timeline. You’ll see it appear in the preview section.

To add a clip to the Timeline, click and drag on its thumbnail. Move it onto the Timeline, and then drop it into place.

2. Open the Inspector panel

The correction tools for lens distortion in DaVinci Resolve Studio 19 are found on the Inspector panel. Think of the Inspector as the one-stop location for editing video properties. With it, you can make a variety of adjustments and tweaks.

Select your Timeline clip, and then click Inspector in the upper right corner of Resolve Studio 19.

To open the Inspector, be sure your clip is selected in the Timeline. Then, look in the upper right corner of Resolve Studio 19. Click on the Inspector button. You’ll see the Inspector sidebar menu open on the right side of your screen. When it opens, be sure to click on the Video tab at the top.

3. Activate the lens correction tools

On the Inspector > Video sidebar, look at the options listed. You’ll see Transform, Cropping, Dynamic Zoom, and more. Down at the bottom, find Lens Correction. This is where you’ll correct lens distortion.

Click on the radio button to activate the Lens Correction tool. You’ll see it turn red, and a dropdown will open. Thanks to AI tools in Resolve Studio 19, the app can correct lens distortion automatically.

Click Analyze to automatically correct lens distortion.

To do that, click Analyze, and watch what happens. Resolve will flatten out the video, removing lens distortion! No manual editing is required. Notice that the footage now takes on a more natural look.

4. Optional: Make adjustments for the perfect results

As you saw, Resolve Studio 19 will automatically choose the right settings to fix lens distortion. But you don’t have to use them—you can make adjustments to the chosen settings if you want.

Use the Distortion slider to refine your lens distortion corrections.

Simply click and pull on the Distortion slider to amplify or reduce the effects. As you work, you’ll see the changes on the video preview in Resolve.

Learn more great tips and tricks for DaVinci Resolve

Correcting lens distortion is a great skill in DaVinci Resolve Studio, but it’s only one of countless things the app is capable of. If you’re ready to upgrade your skills, you’ve come to the right place. Here on Envato Tuts+, we have many helpful tutorials just for you.

Here are some favorites to help you level up your skills quickly:

Correct lens distortion in DaVinci Resolve today

In this tutorial, you learned how to correct lens distortion in DaVinci Resolve Studio 19. Lens distortion is an unfortunate yet common part of video production. It often finds its way into the footage that you capture.

But luckily, the fix is both quick and easy. Using the powerful Lens Correction tool, you can rapidly remove lens distortion from all of your video clips. It only takes a few clicks.

A history of animation: from hand-drawn to digital techniques

2024-08-13T11:36:31+00:00

Animation has evolved from simple hand-drawn pictures to amazing digital creations. This journey reflects not only technological advancements but also the creativity of countless artists who have shaped animation. From early 20th-century sketches to today’s incredible CGI, animation continues to push the boundaries of visual storytelling, making it a beloved artform worldwide.

Steamboat Willie (1928), the ground breaking animated short film directed by Walt Disney, introducing the world to the iconic character Mickey Mouse. (Image credit: Walt Disney Studios).

This article is for beginners who want to learn about the history of animation. Whether you’re an aspiring animator, a film student, or just a fan, we’ll take you through important moments, key figures, and major techniques in animation. You’ll discover early optical devices, the golden age of hand-drawn cartoons, the rise of TV animation, and the digital changes that have shaped the industry.

We’ll also introduce some of the most famous animators and their works. Join us on this exciting journey through time to discover how animation evolved from simple drawings to a powerhouse of entertainment and artistic expression.

Jump to content in this section:

The early days of animation (1830s-1920s)
The golden age of animation (1928-1960)
The television era (1950s-1980s)
The advent of computer animation (1960s-1990s)
The modern era of animation (1990s-present)

1. The early days of animation (1830s-1920s)

Pioneers and innovations

Magic lanterns and early optical devices

The journey of animation begins with early optical devices that created the illusion of motion. One of the first devices was the magic lantern, invented in the 17th century, which used a light source and hand-painted glass slides to project images.

Other devices like the zoetrope and the phenakistoscope followed. These devices used spinning disks or cylinders with sequential images, creating the appearance of motion when viewed through slits.

Émile Reynaud

Fantasmagorie (1908), a pioneering animated short film by Émile Cohl, celebrated as one of the first examples of traditional hand-drawn animation. (Image credit: Gaumont Film Company).

Émile Reynaud, a French inventor, made significant contributions to early animation with his invention of the praxinoscope in 1877. The praxinoscope improved upon the zoetrope by using mirrors to reflect the images, providing a clearer and brighter display. Reynaud also created the Théâtre Optique in 1892, which projected hand-painted images on a screen, predating modern film projection.

Thomas Edison and W.K.L. Dickson

Thomas A. Edison, W.K.L. Dickson, and others.

In the late 19th century, Thomas Edison and his assistant, W.K.L. Dickson, developed the kinetoscope, a device for viewing moving pictures. Although it was not a projector, the kinetoscope allowed individuals to view films through a peephole. This invention was a precursor to the development of the motion picture industry and laid the groundwork for future animation techniques.

The silent film era

Winsor McCay

Winsor McCay, an American cartoonist and animator, is often considered one of the pioneers of animation. His 1914 film, "Gertie the Dinosaur," is one of the earliest examples of character animation. McCay’s meticulous hand-drawn frames brought Gertie to life, showcasing the potential of animation to tell engaging stories.

J. Stuart Blackton

Humorous Phases of Funny Faces (1906), an early animated short by J. Stuart Blackton, recognized as one of the first films to use stop-motion and hand-drawn animation techniques.

J. Stuart Blackton, another key figure in early animation, created "Humorous Phases of Funny Faces" in 1906. This short film featured chalk drawings that seemed to come to life, using stop-motion techniques. Blackton’s work demonstrated the possibilities of combining drawn images with film, influencing future animators.

James Stuart Blackton and the Vitagraph Company

J. Stuart Blackton in 1912.

James Stuart Blackton, co-founder of the Vitagraph Company, produced several early animated films that experimented with the medium. His contributions helped establish animation as a viable form of entertainment and set the stage for future developments in the industry.

2. The golden age of animation (1928-1960)

Rise of the major studios

Walt Disney

Walt Disney Studio, representing decades of magical storytelling and beloved animated classics. (Image credit: Walt Disney Studios).

The Golden Age of Animation is often associated with the rise of Walt Disney and his creation of Mickey Mouse. In 1928, Disney released "Steamboat Willie," the first synchronized sound cartoon, introducing audiences to the iconic Mickey Mouse. This film marked the beginning of Disney’s dominance in the animation industry.

Disney’s studio went on to create a series of successful animated shorts and, in 1937, released the first full-length animated feature, "Snow White and the Seven Dwarfs." This film was a massive success and demonstrated the potential of animation as a storytelling medium.

Warner Bros.

Warner Bros, a legacy of ground breaking animation and films. (Image credit: Warner Bros.)

Warner Bros. became another significant player in animation during this era. They created beloved characters like Bugs Bunny, Daffy Duck, and Porky Pig. The "Looney Tunes" and "Merrie Melodies" series were known for their witty humour, memorable characters, and innovative animation techniques.

Animators like Tex Avery and Chuck Jones contributed to Warner Bros.’ unique and enduring style.

Fleischer Studios

Boop-oop-a-doop! Betty Boop and friends, iconic characters created by Max Fleischer, charming audiences with their timeless appeal. (Image credit: Fleischer Studios).

Fleischer Studios, founded by brothers Max and Dave Fleischer, also made significant contributions during the Golden Age. They introduced characters like Betty Boop and Popeye the Sailor.

The studio was known for its inventive animation techniques, such as the rotoscope, which allowed for more realistic movement by tracing live-action footage. Fleischer Studios’ work was marked by its surreal and often risqué humour, distinguishing it from its competitors.

Technological advancements

Introduction of cel animation

Animation cel from Disney’s "The Jungle Book" (1967). (Image credit: Walt Disney Studios).

One of the most important advancements during this period was the introduction of cel animation in the 1910s, which became more widely adopted in the 1920s and 1930s. This technique involved drawing characters on transparent celluloid sheets (cels) and layering them over static backgrounds. This innovation allowed for more efficient and detailed animation, as animators could reuse backgrounds and only redraw moving parts.

Use of sound in animation

Steamboat Willie (1928), the ground breaking animated short film directed by Walt Disney, introducing the world to the iconic character Mickey Mouse. (Image credit: Walt Disney Studios).

The integration of sound revolutionized animation. "Steamboat Willie" (1928) was ground breaking for its use of synchronized sound, which added a new dimension to animated films. Soundtracks, dialogue, and sound effects became integral parts of the storytelling process, enhancing the overall experience.

Technicolor and its role in animation

Flowers and Trees (1932), a groundbreaking animated short film by Walt Disney, celebrated as the first commercially released film produced in full Technicolor. (Image credit: Walt Disney Studios)

The introduction of Technicolor brought vibrant color to animated films. Disney’s "Flowers and Trees" (1932) was the first animated short to use three-strip Technicolor, setting a new standard for animated films. Color became a crucial element in animation, allowing for more expressive and visually appealing stories.

3. The television era (1950s-1980s)

Shift from theaters to TV

Rise of television and its impact on animation

In the 1950s, the advent of television revolutionized the entertainment industry, including animation. With more households acquiring TV sets, there was a significant demand for new content. This shift provided animators with a new platform to reach audiences directly in their homes, leading to the creation of many iconic animated TV shows.

Hanna-Barbera Productions

The Flintstones, a beloved animated sitcom created by William Hanna and Joseph Barbera, depicting the comical prehistoric adventures of Fred Flintstone and his family. (Image credit: Hanna-Barbera Productions).

One of the most influential studios during this era was Hanna-Barbera Productions, founded by William Hanna and Joseph Barbera in 1957. The studio pioneered a technique called "limited animation," which reduced the number of frames per second to cut costs while maintaining engaging storytelling.

Hanna-Barbera created many beloved TV shows, including "The Flintstones" (1960), which was the first prime-time animated series, "The Jetsons", and "Scooby-Doo, Where Are You!".

Saturday morning cartoons

The Bugs Bunny Show, a classic animated television series featuring the wisecracking Bugs Bunny and his Looney Tunes friends. (Image credit: Warner Bros. Television).

The concept of Saturday morning cartoons became a cultural phenomenon in the 1960s and 1970s. Networks dedicated Saturday mornings to children’s programming, which included a line up of animated shows.

This period saw the introduction of numerous popular series such as "The Bugs Bunny Show", "Jonny Quest", and "Super Friends". These shows not only entertained but also became an integral part of many children’s routines.

Animation techniques for TV

The Jetsons, a futuristic animated sitcom following the high-tech adventures of George Jetson and his space-age family. (Image credit: Hanna-Barbera Productions).

Limited animation to reduce costs

To meet the high demand for content and reduce production costs, studios like Hanna-Barbera employed limited animation techniques. This method involved using fewer drawings per second and reusing backgrounds and animation cycles.

While this approach sacrificed some fluidity, it allowed for the efficient production of TV shows, making animation more accessible and sustainable for television.

Introduction of simpler, more stylized characters

Television animation during this era also saw the introduction of simpler and more stylized characters. These designs were easier and faster to animate, which was essential for meeting tight production schedules.

Characters like Fred Flintstone, Yogi Bear, and Scooby-Doo became iconic, with their distinctive, easily recognizable designs contributing to their lasting popularity.

4. The advent of computer animation (1960s-1990s)

Early computer animation

Catalog (1961), an experimental animated short film by John Whitney, showcasing innovative computer-generated imagery and abstract visual art.

Experiments with computer graphics in the 1960s and 70s

The roots of computer animation can be traced back to the 1960s and 1970s when early experiments with computer graphics began. Researchers and computer scientists explored the potential of computers to generate images and animations. Notable projects from this period include the 1961 film "A Computer Animated Hand" by Edward E. Zajac at Bell Labs, which demonstrated the potential of digital imagery.

John Whitney

John Whitney, often considered the father of computer animation, made significant contributions during this era. In the 1960s, he used mechanical analog computers to create abstract films, such as "Catalog" (1961). Whitney’s work showcased the artistic possibilities of computer-generated images and inspired future developments in the field.

The digital revolution

Toy Story (1995), a revolutionary animated film by Pixar Animation Studios, introducing audiences to the secret life of toys with ground breaking CGI animation. (Image credit: Pixar Animation Studios)

Pixar and “Toy Story”

The digital revolution in animation began to take shape in the 1980s and 1990s. One of the most significant milestones was the founding of Pixar Animation Studios in 1986.

Pixar, initially a division of Lucasfilm, became an independent company under the leadership of Steve Jobs, Ed Catmull, and John Lasseter. In 1995, Pixar released "Toy Story," the first fully computer-animated feature film. "Toy Story" was a ground breaking success, both commercially and critically, proving that computer animation could produce engaging, high-quality films.

Development of CGI and its integration with traditional animation

The 1990s saw the increasing integration of computer-generated imagery (CGI) with traditional animation. Disney’s "Beauty and the Beast" (1991) and "Aladdin" (1992) used CGI for specific scenes, enhancing the visual depth and complexity of the films. This hybrid approach demonstrated the potential for blending traditional and digital techniques to create visually stunning animations.

DreamWorks animation

DreamWorks Animation, founded in 1994 by Steven Spielberg, Jeffrey Katzenberg, and David Geffen, also played a significant role in advancing computer animation. The studio’s 2001 film "Shrek" was a major success, winning the first-ever Academy Award for Best Animated Feature. DreamWorks continued to produce successful CGI films, contributing to the growing dominance of computer animation in the industry.

Hybrid techniques

Who Framed Roger Rabbit (1988), a groundbreaking film by Robert Zemeckis, blending live-action and animation. (Image credit: Touchstone Pictures)

Combination of live-action and CGI

The combination of live-action and CGI became increasingly popular in the late 20th and early 21st centuries. Films like "Who Framed Roger Rabbit" (1988) and "Jurassic Park" (1993) used CGI to create realistic and fantastical elements within live-action settings.

Motion capture technology

Motion capture technology, which records the movement of live actors to create realistic animations, gained prominence in the 2000s. Films like "The Lord of the Rings" trilogy (2001-2003) and "Avatar" (2009) used motion capture to bring characters to life with unprecedented realism.

5. The modern era of animation (1990s-present)

Diverse styles and global influence

Japanese Anime

Dragon Ball, the iconic anime series created by Akira Toriyama, following the adventurous journey of Goku as he seeks the mystical Dragon Balls. (Image credit: Toei Animation).

Japanese anime has become a global phenomenon, influencing and inspiring animators worldwide. Shows like "Dragon Ball" and "Naruto" introduced audiences to a unique art style and storytelling approach. Anime’s popularity has grown significantly, captivating international audiences and expanding the boundaries of animated storytelling.

Studio Ghibli

Spirited Away (2001), a mesmerizing animated film by Hayao Miyazaki and Studio Ghibli, telling the enchanting story of a young girl who enters a magical world of spirits. (Image credit: Studio Ghibli).

Studio Ghibli, one of the most influential animation studios in the world, was founded in 1985 by directors Hayao Miyazaki and Isao Takahata, along with producer Toshio Suzuki. It is renowned for its distinctive artistic style, characterized by detailed hand-drawn animation, lush backgrounds, and expressive character designs.

Its films such as "Spirited Away" (2001), "My Neighbor Totoro" (1988) and "Princess Mononoke" (1997) have garnered a global fanbase and critical acclaim, inspiring countless animators and filmmakers. The studio’s approach to animation, prioritizing artistic integrity and emotional depth, has set a high standard in the industry.

Rise of independent and experimental animation

Persepolis (2007), a poignant animated film by Marjane Satrapi, depicting her autobiographical account of growing up during and after the Iranian Revolution. (Image credit: Sony Pictures Classics).

The modern era has seen a surge in independent and experimental animation. Digital tools have made it easier for individual artists and small studios to create high-quality animations without the backing of major studios. Films like "Persepolis" (2007) and "Loving Vincent" (2017) showcase the creative potential of independent animation, exploring unique visual styles and complex narratives.

Diverse animation styles

Kubo and the Two Strings (2016), a visually stunning stop-motion animated film by Laika, following the epic journey of a young boy named Kubo in a magical ancient Japan. (Image credit: Laika Studios).

Modern animation encompasses a wide range of styles, from traditional hand-drawn techniques to stop-motion and CGI. Studios like Laika, known for films like "Coraline" (2009) and "Kubo and the Two Strings" (2016), have pushed the boundaries of stop-motion animation.

Spider-Man: Into the Spider-Verse (2018), a ground breaking animated film by Sony Pictures, exploring the multiverse with stunning visuals and diverse Spider-People. (Image credit: Sony Pictures Animation).

Meanwhile, digital tools have allowed for the creation of visually stunning films like "Spider-Man: Into the Spider-Verse" (2018), which blends traditional comic book aesthetics with cutting-edge CGI.

Streaming and digital platforms

BoJack Horseman, an acclaimed animated series by Raphael Bob-Waksberg. (Image credit: Netflix)

Impact of streaming platforms

The rise of streaming platforms such as Netflix, Disney+, and YouTube has transformed the animation industry. These platforms provide animators with new opportunities to reach global audiences and experiment with different formats. Original animated series like "BoJack Horseman" (2014-2020) and "The Dragon Prince" (2018-present) have found success on streaming services, showcasing the versatility and creativity of modern animation.

Conclusion

Batman: The Animated Series, a critically acclaimed show created by Bruce Timm and Eric Radomski, known for its dark, stylish animation and complex storytelling. (Image credit: Warner Bros. Animation).

Animation has evolved from simple hand-drawn illustrations to complex digital creations, shaped studios like Disney and Pixar. Each era brought innovations, from the Golden Age’s iconic characters to the TV era’s beloved shows and the digital revolution’s ground breaking films.

Today, animation thrives with diverse styles, global influences, and new technologies. Creators like Studio Ghibli continue to inspire with their timeless storytelling and as the industry grows, animation remains a powerful form of artistic expression, inspiring audiences worldwide.

How to create ads and promos for social media on CapCut

2024-06-26T09:23:23+00:00

In this tutorial, you’ll learn how to create ads and promos for social media on CapCut. In a few quick steps, you’ll learn the basic workflow for creating ad campaigns. You’ll be producing promos quicker than ever. And you’ll be able to reach a broader audience and inspire them to take action. Let's go!

Getting started with CapCut ads: Exploring the benefits

If you’re not familiar with CapCut, no worries. It’s a newer entrant into the crowded video editing space. Why does CapCut stand out? Largely because it’s mobile-focused. It’s a mobile app that you can download on your Apple or Android device. Plus, there are desktop versions for seamless editing.

CapCut ads like this help you promote your business on your favorite social media channels.

With CapCut, you can create amazing ads and promos on any topic with ease. The benefits are many:

The interface is intuitive and easy to use. CapCut is made for video editors of all skill levels. In other words, you don’t have to be an expert! The interface is clearly designed and simple to navigate. With your touchscreen device, you can easily browse effects, make edits, and more.
You’ll enjoy seamless social media integration. CapCut was created by ByteDance. Who are they? Odds are, you know their popular social media video app, TikTok. With CapCut, you can directly share your ads and promos right to TikTok. Direct sharing also works for Instagram, Facebook, and more. Plus, download your finished product for total freedom.
Mobile means portable. CapCut goes on your phone, and your phone can go in your pocket. I love this because it’s ready for you when creative inspiration strikes. When an idea for an ad or promo hits, you can get to work right away.
The price is right: free! I mentioned already that CapCut is free. But it bears repeating. You can produce fully-featured promo videos completely free of charge. Additional effects and features are available with a Pro upgraded version.

As you can see, CapCut is a good choice for rapid ad and promo design. Without further delay, let’s get to work learning how to use it.

How to create ads and promos with CapCut, step by step

We’ll be using CapCut to create a sample promo video. As you read through the steps, you’ll see a stock video clip in use. It comes from Envato Elements. If you’d like to download the video, you can do so here right away.

I’ll be using CapCut on an iPhone running iOS 17. If you’re using CapCut on a different platform, you might experience a slightly different workflow.

1. Launch CapCut and create a project

Get started by opening CapCut on your device. When you do, you’ll be on the main screen. Five menu options can be found at the bottom. In order, they’re Edit, Templates, Library, Inbox, and Me. To create a promo video in CapCut, tap on the Edit button.

Go to the Edit tab, then choose New project by tapping on the blue box.

When you do, you’ll be in the Project section of CapCut. It’s here that you can browse videos you’ve created in the past. And you can create a brand-new production. Let’s make a new one for our promo video.

Tap on the blue New project icon at the top of your screen. You’re on your way to amazing promo videos in CapCut.

When you choose New project, your device’s Camera Roll will launch. This is where your device stores videos and other multimedia. You may have videos saved or downloaded from other sources. Or, you might have recorded them right on your device. Either way, CapCut lets you browse to them.

When you select New project, you can browse to videos and photos on your device. Tap their thumbnails and choose Add to import them.

At the top, you can choose what folder you want to import videos from. Below, you’ll see thumbnails showing each video in your chosen location. You can also tap on the Photos button if you want to use still images. Although CapCut is a video editor, it’s perfectly capable of working with still images, too. In fact, this is often useful for promotional slideshows and more.

Choose one or more videos or photos by tapping on their thumbnails. When you do, the Add button in the lower right corner will illuminate in blue. Tapping Add causes CapCut to import your chosen multimedia. Keep in mind: it may take a few moments if you’re using a lot of files, or have longer videos.

3. Apply text overlays

When you import your videos and images, you’ll find yourself on the main Edit panel in CapCut. At the top is the video preview area. It’s here that you’ll see edits and changes appear in real time.

Below the preview is the Timeline. Here, you can reorder and rearrange your media clips. And at the bottom is the menu toolbar. It’s there that you’ll access the editing and effects that CapCut is well known for.

An absolutely integral part of a good promo video is text. Having supporting text makes your offer crystal-clear. It lets you produce accessible ads that are still impactful, even without sound.

To add text to your CapCut ad, find the Text button on the menu bar. Tap Text and you’ll see the menu options change. You’ll see Add text, Auto captions, Stickers, and more. For truly custom text overlays, click Add text.

Using the Text menu, you can add and customize a variety of cool text effects - right on your videos.

Once you choose Add text, a text box will appear right on your video. You can replace the contents with your own words, just by typing them in. Once you’ve typed something, tap on the small keyboard icon on the right. This hides the keys and opens up a world of effects and options.

For example, you can choose a new custom font! Or, you can launch the Styles tab and add cool text effects. You can add shadows, make your text glow, and so much more. Spend some time exploring these options. There’s no right or wrong way to blend them together. The key is to always ensure your video remains visible, and the text stays readable.

When you’re finished, tap on the Checkmark icon and return to the main menu using the arrows on the bottom left corner of your CapCut screen.

4. Don’t forget the music

Never underestimate the value of music in a video. That’s never more true than with promo videos for social media. Choose an engaging soundtrack, and you’ll inspire viewers to take action. Don’t rely on visuals alone to grab their attention. Music can help you do exactly that.

Back on the main CapCut menu, find and select the Audio button. Once again, the menu bar transforms into a series of options. This time, they’re focused on audio. To quickly add music, tap Sounds. The Sounds panel opens with an array of choices.

On the Audio > Sounds panel, you’ll find several great ways to add music to your social media promo videos in CapCut.

On the All tab, you can log into your TikTok account to unlock TikTok sounds. Or, you can tap the Folder icon. These options actually allow you to import music that you might have saved. It’s perfect if you want to use your own music or sound effects that you recorded.

CapCut also includes a large library of music that you can use in your videos. Find it by going to the Commercial tab at the top of the Sounds panel. Scroll through the available options.

Tapping a song selects it and plays a preview. Find one you like? Click the blue + icon on the right. CapCut will add the song to your Timeline.

5. Explore animations and other cool effects

Back on the Edit panel once more, spend some time exploring other options in CapCut. In seconds, you’ve built out the framework for a winning ad promo for social media! You’ve added text, music, and video. Often, that’s all you will need. But it’s not all that CapCut can do.

Scroll through the menu bar at the bottom. For example, tap on the Effects button to open it up. With the Video effects, you can transform the visual look of your promo video.

Using Effects, Stickers, Filters, and other edits is a sure way to make your social media promo video stand out. You’ll find them all in CapCut.

Remember: you need a social media video that stands out right away. Attention spans are short, and competition is fierce. Adding eye-catching effects like flickers and ripples helps you grab - and retain - audience attention.

CapCut also offers Stickers and Filters. These are extra visual transformations that you can add. As one example, you can place emojis right onto your videos. And you can apply tints and shades like sepia for timeless retro vibes.

Once again - CapCut leaves the creative control in your hands. You can go as far as your creative vision will take you! It’s how to win customers using a social media promo video in 2024.

You’ve made your first social media promo video on CapCut. Now, all that’s left is to share it! The best videos aren’t worth much if no one sees them.

To share your ad video, tap the Share icon. You’ll find it in the very upper right corner of your CapCut screen. When you select Share, CapCut will export your video. This may take a minute or two.

Tap Share. Your video will be saved - and you can instantly share it across all of your favorite social media platforms.

When it finishes, you’ll have a saved video file right on your device. But you will also see sharing options right inside CapCut. At the touch of a button, you can share directly to TikTok, Instagram, Facebook, and more.

It’s just another way that CapCut streamlines the once-daunting process of creating ads and promos for social media.

Above, you experienced the process of creating ads and promos with CapCut. It’s but one of many things the app can do. And when you use it to create ads and promos, it pays to embrace the latest trends in social media marketing. That way, you’re setting the stage for your own success.

To help you upgrade your skills rapidly, turn to the tutorials below. From the Envato Tuts+ library, these are top guides for 2024 and beyond:

In this tutorial, I showed you the steps for creating promo and ad videos with CapCut. Simply import your videos that you’ve recorded or saved. Apply eye-catching overlays and graphics to spell out your offer. Find a pumping soundtrack that gets people engaged.

And finally, share with the world across your social media channels! With CapCut, it only takes a few moments. Don’t hesitate to upgrade your video promos with CapCut.

How to make a fall pumpkin latte illustration

2024-09-02T18:43:49+00:00

What You'll Be Creating

In this tutorial, we're diving into the cozy world of fall by creating a cute pumpkin latte illustration in a fall color palette in Adobe Illustrator. Whether you're a beginner or someone who has been in the field for longer, you'll love how easy it is to bring this autumn design to life using just a few simple techniques.

We'll use basic shapes, move around anchor points, and add depth and warmth with textures and transparency effects. By the end, you'll have beautiful, seasonal artwork in a warm fall color palette ready to celebrate the spirit of fall!

If you're looking for vector textures and autumn illustrations that are ready to use, don't forget to visit Envato and enjoy some free creative assets as well!

Jump to content in this section:

How to create a background in Illustrator
How to create a cup in Illustrator
How to create cinnamon sticks
How to create the yellow berries
How to create the coral fall leaves
How to create a maple leaf in Illustrator
How to create red berries in Illustrator

What you'll need for the tutorial

You'll need to download the following textures to follow along:

Natural paper textures

Fall color palette hex codes

A good fall color palette can bring warmth and coziness to your designs. The colors evoke the comforting essence of autumn, perfect for creating an inviting and nostalgic atmosphere in your seasonal projects. Here are the fall color palette hex codes that I used in the tutorial.

1. How to create a background in Illustrator

Step 1

After you've opened Adobe Illustrator, create a new document (File > New). Enter 850 px Width and 900 px Height in the dialogue window, and press OK. This will be your new artboard.

We will start to create our fall illustration by making a background. Create a rectangle by using the Rectangle Tool (M). Click on the artboard and enter 850 x 900 px. Press OK, and make its fill color R=249, G=222, B=212. This is the first part of our background.

If you want to place it exactly in the middle of the canvas, go to the Align panel and check Align to: Align to Artboard (bottom-right corner). Now, any elements that you choose to align will be aligned to your artboard. Next, you need to select the object that you want to align. In the Align Objects section, press Horizontal Align Center and Vertical Align Center. This is how you put any object exactly in the middle of your canvas or artboard.

Step 2

Change the fill color to R=249, G=206, B=189, and draw a rectangle with the Rectangle Tool (M).

Now you want to go to View > Show Corner Widget. When you do this, the rectangle gets small circles in every corner which you can use to further modify it. Use the Direct Selection Tool (A) to select the two upper anchor points. You can drag them inwards to give this rectangle rounded corners on top.

This is the second part of our background.

Place this newly created shape on top of the main background, exactly in the middle. The background is now done.

2. How to create a cup in Illustrator

Step 1

To create the cup, start by making a rectangle with the Rectangle Tool (M). Make its fill color R=224, G=123, B=54.

After this, we want to make the two bottom corners of the rectangle rounded, as we did for the second part of the background. Using the Direct Selection Tool (A), drag the two bottom corners to the center until they become rounded.

Step 2

Next, we'll create the cup rim. Make the fill color the stroke color by clicking on the Swap Fill and Stroke (Shift-X) button on the left panel. On the Stroke panel (Window > Stroke), click on the Round Cap button in the Cap section. On the same panel, you can adjust the Weight of this stroke—it should be 20 px. Make its stroke color R=117, G=70, B=70.

Using the Line Segment Tool (\), draw the cup rim.

Step 3

Let’s create a handle for the cup. Keep the same stroke color (R=117, G=70, B=70) and the same weight. Pick the Ellipse Tool (L), hold down the Shift key (to create an even circle), and draw a circle.

Place the cup rim on the side of the cup.

Step 4

To create the pumpkin illustration, we'll start with a yellow ellipse (fill color R=255, G=193, B=125).

Create a copy of it in the back (Control-C, Control-B), change its fill color to R=252, G=175, B=99, and stretch it a little horizontally. This is so that the front part of the pumpkin will be separated from the back parts.

Now, let's create the back parts of the pumpkin illustration. You can copy the front one (Control-C, Control-V), copy it again, and paste both back parts of the pumpkin in the back (Control-X, Control-B). Place the two back parts symmetrically, as shown in the image below.

Make the fill color the stroke color by clicking on the Swap Fill and Stroke (Shift-X) button on the left panel. Change its stroke color to R=173, G=159, B=121. Make sure that you've checked the Round Cap option and made the stroke Weight 4 px on the Stroke panel. Use the Arc Tool to draw a stalk for the pumpkin illustration.

Group the whole pumpkin illustration (right-click > Group).

Put the pumpkin illustration on the cup.

Step 5

Now, place the cup on top of the background.

Step 6

Change the stroke color to white. Make the stroke Weight 40 px on the Stroke panel. Draw three white lines using the Line Segment Tool (\) to create some whipped cream for your drink. You don’t need the black lines—they're just there to make the lines more visible.

Step 7

Let's create the top part of the whipped cream using the Ellipse Tool (L)—the fill color is white. Remember to change the stroke color to the fill color!

Then, go to Effect > Warp > Inflate because we want to add a corresponding shape to it. Enter the options you see below in the image, and please notice that Inflate should be Horizontal. Then press OK.

Expand this shape (Object > Expand Appearance).

Step 8

Put this final piece of whipped cream on top of the rest of the cream.

Make the stroke color R=255, G=235, B=235, decrease the stroke Weight to 4 px, and draw a few lines using the Line Segment Tool (\). By doing this, you're adding texture and dimension to the whipped cream.

Let’s add some sprinkles to the cream. Make the fill color R=255, G=193, B=125, and draw tiny circles here and there. Then change the fill color to R=153, G=90, B=58, and add some more.

Step 9

And now for the last step for our cup—we need to add some texture to it. Choose one of your favorite textures from Natural Paper Textures. I chose number 1. Place it under the cup. You can make the texture smaller or larger depending on what scale of texture you want.

Select the orange part and the texture, and press Object > Clipping Mask > Make (Control-7).

Keep this selection, and go to the Transparency panel (Window > Transparency). In the pop-out menu (labeled as Normal), select the Color Burn option and make the Opacity 40%. Of course, you can make the Opacity any value you want, depending on how you want it to look. Technically, the texture by itself isn’t a vector texture—it’s a raster—but that’s the best way to apply a texture to a vector illustration while preserving its features.

Now you just need to group the whole pumpkin latte (right-click > Group). Your drink illustration is finished!

Here’s how our fall drink looks now.

3. How to create cinnamon sticks in Illustrator

Step 1

Next, our autumn illustration needs a cinnamon stick. Be sure to have the stroke color set to R=153, G=90, B=58. Draw a line using the Line Segment Tool (\). On the Stroke panel, make the Weight 25 px, and check Round Cap.

Delete the stroke color and set the fill color to R=122, G=65, B=39. Draw an ellipse on top.

Step 2

Decrease the stroke Weight to 1 px, and change the stroke color to R=76, G=40, B=26. Using the Spiral Tool, draw a spiral over the ellipse.

Group the whole cinnamon stick so that you can move it easily (right-click > Group).

Step 3

Place it behind the latte drink (Control-X, Control-B). Then, holding the Alt key, move it aside. That’s how you create a copy of the cinnamon stick.

4. How to create the yellow berries in Illustrator

Step 1

First, we'll draw a stalk using the Arc Tool. On the Stroke panel, make the stroke Weight 5 px and check Round Cap. The stroke color should be R=173, G=159, B=121.

Then, draw a long stalk from top to bottom. Add two smaller green arcs that branch out.

Step 2

Using the Ellipse Tool (L) and holding the Shift key, draw a yellow circle. The fill color should be R=242, G=175, B=76.

Add a smaller red ellipse on top with a fill color of R=196, G=70, B=49. This is the first yellow berry.

Step 3

Let’s add some texture, as we did for the cup. First, choose a texture you like, and place it behind the berry. If you want, you can make the texture very big, as I did in the image below.

Select the yellow berry and make a copy in front (Control-C, Control-F). Keep the selection and select the texture while holding the Shift key. Go to Object > Clipping Mask > Make (Control-7).

Keep this selection, and go to the Transparency panel (Window > Transparency). In the pop-out menu, select the Color Burn option. Feel free to play with the Opacity.

Group the whole berry (right-click > Group).

Step 4

Put the yellow berry on the green stalk. Create two more copies of the yellow berry and place them on each stalk. Now, group it so that it’s easier to move around.

Put the branch of yellow berries behind the whipped cream of the fall drink (Control-X, Control-B).

5. How to create the coral fall leaves in Illustrator

Step 1

Now we want a fall leaves illustration.

First, we'll draw a stalk using the Line Segment Tool (\). On the Stroke panel, make the stroke Weight 4 pixels and check the Round Cap. The stroke color should be R=153, G=90, B=58.

Then, draw a long stalk. After that, add a smaller stalk that branches out on the left side. To draw it diagonally at exactly 45 degrees, hold the Shift button while drawing.

Next, add another small diagonal stalk on the right side. Select the two diagonal stalks and move them down the main stalk while holding the Alt key. You just created a new pair of diagonal stalks.

Step 2

Use the Ellipse Tool (L) to draw a coral-colored ellipse. The fill color should be R=242, G=142, B=129.

Take the Anchor Point Tool (Shift-C) and click on the top and bottom anchor points. You should get a shape with sharp points, which will be the leaf.

Step 3

Let’s add a texture, as we did for the cup and the berries. First, choose the texture you like, and then place it behind the coral leaf. If you want, you can make the texture very big, as I did in the image below.

Select the coral leaf and make a copy in front (Control-C, Control-F). Keep the selection and select the texture while holding Shift. Go to Object > Clipping Mask > Make (Control-7).

Keep this selection, and go to the Transparency panel. In the pop-out menu, select Color Burn and play around with the Opacity. Group it.

Step 4

Put the coral leaf behind the brown stalk.

Create a copy of it and rotate it to the left while holding Shift. The Shift key helps you to rotate any shape exactly 45 degrees.

Keep going: create three more copies and place them behind each stalk. Finally, group the whole branch together.

Put the coral leaves behind the fall drink (Control-X, Control-B).

6. How to create a maple leaf in Illustrator

Step 1

First, we'll draw a stalk using the Line Segment Tool (\). On the Stroke panel, make the stroke Weight 3 px and check the Round Cap. The stroke color should be R=196, G=70, B=49. Draw a long stalk.

After that, add a smaller horizontal stalk. Hold the Shift button while drawing—it will help you to draw at exactly 90 degrees. Then, add two new diagonal small stalks.

Step 2

Using the Ellipse Tool (L), draw a yellow ellipse. The fill color should be R=242, G=175, B=76.

Take the Anchor Point Tool (Shift-C) and click on the top and bottom anchor points. You should get a shape with sharp points—this will be our leaf.

Step 3

Choose a texture you like, and place it behind the yellow leaf.

Select the yellow leaf and make a copy in front (Control-C, Control-F). Keep the selection and select the texture while holding the Shift key. Go to Object > Clipping Mask > Make (Control-7).

Keep this selection and go to the Transparency panel. In the pop-out menu, select Color Burn. Group it.

Step 4

Put the yellow leaf behind the vertical stalk. Create a copy of it and rotate it 45 degrees to the left while holding Shift. Put it behind the stalk.

Keep going: create five more copies and place them behind each stalk. Now, group the whole maple leaf.

Put the maple leaf close to the latte cup, on the left side.

7. How to create red berries in Illustrator

Step 1

First, we'll draw a stalk using the Arc Tool. On the Stroke panel, make the stroke Weight 5 px and check Round Cap. The stroke color should be R=173, G=159, B=121.

Draw a long stalk from top to bottom. Then, add two smaller green curves that branch out.

Step 2

While holding the Shift key, draw a red circle. The fill color should be R=196, G=70, B=49. Then add some small brown lines on top, with a stroke color of R=117, G=70, B=70.

Step 3

Choose a texture you like, and place it behind the red berry.

Select the berry and make a copy in front (Control-C, Control-F). Keep the selection and select the texture while holding Shift. Go to Object > Clipping Mask > Make (Control-7).

Keep this selection, and go to the Transparency panel. In the pop-out menu, select Color Burn. Group the whole berry.

Step 4

Put the red berry on the green stalk. Create two more copies of it and place them on each stalk. Now, group it.

Put the red berry branch close to the latte cup, on the right side.

Congratulations!

Now you have a beautiful fall illustration in autumnal colors! In this tutorial, you learned how to use basic shapes to create an illustration and how to move around anchor points to modify these shapes. You also now know how to apply textures to your vector illustrations. You can apply all of this knowledge to your future projects to enhance them and truly make them your own. Happy creating!

Recommended resources from Envato

Envato is a subscription-based service offering a vast library of digital assets, including stock photos, graphics, templates, fonts, and more, created for designers, developers, and content creators. Users pay a monthly or annual fee for unlimited downloads, making it a cost-effective solution for those who need access to a wide range of creative resources. The platform is known for its quality and variety, catering to a wide variety of creative and marketing needs.

1. Watercolor fall pumpkin clipart (PNG)

This product offers a selection of beautiful autumn-themed watercolor clipart that you can easily incorporate into your designs. It’s perfect for creating greeting cards, wedding invitations, stationery, and more. The collection includes eight watercolor pumpkins and 12 botanical elements, all provided as PNG files with a high resolution of 300 DPI. Don't miss out—elevate your creative projects with this beautiful collection today.

2. Autumn leaves, pumpkins, and mushrooms vector (AI, EPS, PNG, SVG)

These autumn graphic assets are perfect for all your design projects, offering versatile vector graphics that can be used in a number of ways. The set includes AI and EPS vector files at 2340 x 1560 px, with the EPS files formatted for EPS 10. You'll also receive 36 individual SVG files, as well as 36 PNG images with a transparent background. The PNG files are high-resolution at 300 ppi in CMYK color.

3. 17 pumpkin spice elements (AI, EPS, PNG)

Enhance your designs with this charming set of 17 hand-drawn pumpkin spice elements, perfect for adding a cozy autumn touch to any project. Featuring seasonal illustrations of pumpkin spices, pies, lattes, and other delicious treats, this collection is ideal for greeting cards, banners, posters, and decorations. This set includes 17 clipart elements available in AI, EPS, and PNG formats, all conveniently downloadable as a ZIP file. Download these delightful autumn elements and use them to bring your fall projects to life.

4. Pumpkin spice design (PNG)

Add a cozy fall vibe to your designs with this adorable Watercolor Pumpkin Spice clipart collection. Perfect for capturing the autumn feel, this set includes cute pumpkin illustrations and autumn leaves, ideal for your seasonal projects. Each illustration comes as a separate PNG file with a transparent background, making it easy to incorporate into your work. On top of that, you'll also receive five beautifully arranged designs, each sized at 6"x6" and at a high resolution of 300 dpi.

5. Halloween pumpkins (EPS, JPG)

Bring a spooky touch to your Halloween projects with this vector collection of decorative orange pumpkins, featuring playful expressions and "Happy Halloween" text. Perfect for greeting cards, posters, websites, and banners, these flat-style designs are ready to enhance your seasonal creations. You'll receive 15 EPS files and 15 high-resolution JPG files (300 dpi, 6000x5000 px). All of the objects are fully expanded and ready to print. Get this spooky and fun collection to make your Halloween designs stand out!

Discover awesome tutorials and resources

Envato Tuts+ offers a wide range of step-by-step guides and video lessons that help creative professionals and beginners improve their skills in design, coding, photography, video, and more.

These tutorials are created by industry experts and cover a variety of tools and techniques, making it easier to learn new skills or enhance existing ones. Whether you're looking to master a software program or explore new creative projects, Envato Tuts+ provides valuable resources to help you succeed in your artistic journey.

25+ Best Event Sponsorship Proposal Templates (Example Downloads for 2025)

2019-09-09T09:47:56+00:00

Have an upcoming event where you need help from sponsors?

It can be challenging to attract sponsors for your events. Start with the right event sponsorship proposal template!

Use a new event sponsorship proposal template from Envato Elements.

Looking for event sponsorship examples? Work with a professional event sponsorship proposal template. It'll help you win the hearts of potential sponsors.

Before writing your own messages, look at event sponsorship examples for inspiration.

The key ingredients of an effective event sponsorship proposal example are:

persuasive content
easy-to-follow structure
visually captivating designs

Don’t know where to begin?

Learn how to write a proposal for an event.

Follow simple steps from real-life practices of some of the best event proposals out there. We'll cover the fundamentals in writing effective event proposals with practical formats.

We've also included some of the best event proposal examples for inspiration.

Edit these event proposal samples to better suit your event needs. Communicate your event as worth sponsoring.

Great Examples of Event Proposal Templates From Envato Elements for 2024

Let's look at some event sponsorship examples.

Here's our latest list of the best event planning request for proposal templates. They're all available on Envato Elements!

1. Modern Sponsorship Proposal Template

See more of this stylish template proposal sponsorship design in the gallery above.

Are you looking for modern template proposal sponsorship designs? This new sponsorship doc is for you.

This template features a unique color scheme and clean typography. No doubt, it's a winning proposal example.

This sponsorship proposal template is fully editable in Adobe InDesign and comes with:

A4 and US Letter sizes
easy customization options
print-ready design
free fonts

2. Square Event Proposal Template

This is a unique, square event proposal template that will catch the eye of everybody in the room. Use that to your advantage to get your point across.

Its features will give you options you need to create a winning proposal:

20 pages
210x210 dimensions
fully layered
help file included

It's a great reference if you're looking for event sponsorship examples.

3. Media Event Sponsorship Example

Be convincing, bold, and straightforward to get what you want! This event sponsorship example will help you get where you need to go. All thanks to its powerful design and the features it comes with:

12 pages
300 dpi resolution
layered file for easy editing
help file

4. Cooking Event Sponsorship Proposal

Are you proposing a cook off? Make your yummy event known with the use of an event proposal template like this one. It has plenty of space to include all the information you need. Add all the pictures you desire.

Its features are pretty tasty, too:

InDesign and PowerPoint files
16 pages
fully and easily customizable
well-organized layers

5. Sponsorship Event Proposal Template - MS Word & InDesign

Don't fuss! Do you need to get your message across? Don't spend time worrying. Download this awesome event sponsorship example and get working!

Not only does it have a professional design, but it also comes with:

Microsoft Word and Adobe InDesign files
20 customizable pages
automatic page numbering
editable texts, colors and objects

6. Minimalist Proposal Sponsorship Template

If you like minimal sponsorship proposal templates, try this one. This sponsorship template is a great option. Play around with the colors and shapes on this sponsorship levels template. Make sure it fits your brand.

The sponsorship proposal template has:

16 fully customizable pages
A4 size
editable text, color, objects
ease-of-use

Don't worry if you don't have InDesign. You can also edit this template sponsorship proposal in MS Word.

7. Event Sponsorship Proposal Template

This professional event sponsorship proposal template will get the right sponsors for your next event. This template sponsorship proposal is editable in InDesign. Also editable MS Word so you can brand it according to your needs.

Is a great event sponsorship proposal to get started:

2 paper sizes (A4 and US Letter)
print-ready design
easily customizable to your needs
free fonts

8. Company Proposal Sponsorship Template

Start working with this sponsorship levels template. It's perfect for design proposal sponsorship projects, as well as other business ventures.

Give this event sponsorship proposal and its features a look:

25 pages
A4 size
ready-to-print sponsorship proposal example
help file included

Start working with this elegant sponsorship template!

9. Clean Event Sponsorship Proposal

This clean sponsorship proposal design fits all kinds of projects. You can customize the colors to match your company's brand.

It's easy to work with this sponsorship levels template thanks to its features:

easily editable in InDesign
A4 and US Letter sizes for the template proposal sponsorship
customizable to fit your brand
free fonts

10. Blue Sponsorship Proposal Template

Here's a bold event sponsorship proposal template that's perfect for 2024. It's customizable on Adobe InDesign.

The event sponsorship example has:

a professional layout
20 pages
print-ready design
documentation

Try it if you want a modern event sponsorship proposal that will help you bring in funding.

11. Web Design Sponsorship Deck Template

This sponsorship proposal example is perfect for your hackathon or dev event. It's fully editable, and that includes premium icons and other artwork. Even though this event sponsorship proposal is for web design, you can customize it to fit other themes.

It comes with:

24 pages
2 sizes (A4 and US Letter)
portrait orientation
free fonts

12. Organizer Square Sponsorship Deck Example

Looking for a sponsorship proposal example? Here's a trendy event sponsorship proposal template for fans of unique designs. This sponsorship deck example features a square page layout with plenty of white space. You can edit this sponsorship proposal with InDesign.

The event sponsorship proposal sample comes with:

24 pages
square 8x8 inch dimensions
well-organized layers
help file

13. Event Proposal Template

Edit this modern event sponsorship proposal template for Keynote. The sponsorship template has a minimalistic color scheme scheme that you can edit to your liking.

The template proposal sponsorship design comes with premium features like:

5 pre-made color themes
16:9 aspect ratio
placement scheme visual
clean layout

14. Project Pro Proposal - Event Sponsorship Deck Template

Do you have a killer idea you can't wait to share? Spread the word with this uncomplicated, clean proposal template. You won't even have to work hard to create the perfect proposal.

The features in this sponsorship deck template will do everything for you:

12 fully customizable pages
A4 size format
organized layers for easy editing
free fonts included

15. Music Event Sponsor Proposal Format

This music event sponsorship proposal template is perfect for event managers and organizers. Send a proposal to a sponsor that really catches their attention. Get the right sponsors by providing a clear sponsorship level template page.

This sponsorship template includes:

16 pages
US Letter paper size
easily customizable elements
well-organized layers

This sponsor proposal format is highly recommended for music events and other celebrations because of its themed visuals.

16. Creative Event Sponsorship Deck Template

Have an upcoming event for creatives? This event proposal format is modern and eye-catching so you can showcase more photographs of your workspaces and collaborations rooms.

This could be the perfect event sponsorship template for your project:

20 pages
A4 page size
300 dpi resolution
free fonts

17. Web Design Sponsorship Business Proposal Template

Secure a big-time sponsor with this event proposal template made for digital and web design events.

Download this event sponsorship proposal template and customize it to your design needs. It's clean design makes it the perfect blank canvass for your sponsorship business proposal.

Check out the features on this sponsorship package template:

InDesign and Word files
A4 and US Letter paper sizes
portrait orientation
8x11 in dimension

18. Marketing Event Sponsorship Proposal

This premium proposal template is ideal for your sponsorship proposal. Change the colors, the dimensions, and the content in this event sponsorship package template. This is a great sponsorship template to fund a content marketing campaign.

Start working with this event sponsorship agreement template:

14 custom pages
A4 and US Letter paper sizes
vector illustrations
free fonts

19. Yoga Flyer Template for Proposal for Sponsorship

This template is for any event where health and wellness are promoted like yoga and other related activities. The sponsorship proposal template uses a minimal and striking design. This stylish event sponsorship proposal template is a great fit for many industries.

Its features speak for themselves:

INDD, IDML, PDF files
three size options (A4, US Letter + bleeds)
portrait format
free fonts

It's one flexible template for proposal for sponsorship you don't want to miss.

20. Clean Bifold Sponsorship Proposal Example

Planning an automobile show or a car dealership event? This event sponsorship example is perfect for events where cars are the stars of the show.

It's a complete event sponsorship proposal template, filled with:

2 side-bifold brochure template
US Letter paper size
300 dpi resolution
well-organized, grouped layers

It also got the versatility to work for as a sponsorship deck template for other industries, too.

21. The New Creative Idea Sponsorship Business Proposal

This is a premium template great for sponsorship package examples in creative industries. This sponsorship proposal template showcases essential information and combined with modern illustrations.

Use its features to get your sponsorship business proposal out there:

A4 and US Letter paper sizes
fully and easily editable
print-ready design
free fonts

22. Business Corporate Sponsorship Deck Example

Get that project secured with this proposal sponsorship deck example for any kind of event or project. Easily change colors and dimensions in this template sponsorship proposal. This stylish sponsorship proposal design has so much potential.

Here are some of its highlights:

20 easily customizable pages
A4 paper size
free fonts
help file

23. Graphic Sponsorship Package Template

If you need visually striking graphics, this event sponsorship template will do the job. This event sponsorship package template comes with:

12 custom pages
A4 paper size
ready-to-print design
CMYK color space

Use this sponsorship proposal design to jump start your projects. This is a great sponsorship proposal example.

24. Sponsorship Proposal Template

This sponsorship proposal template balances the modern and professional looks. This is one of those sponsorship package examples that should be in every entrepreneur's tool kit.

This event sponsorship template has:

INDD and IDML files
12 custom pages
smart layers for easy editing
free fonts

The premium layout is hard to find in free sponsorship proposal examples.

25. IT Services Event Sponsorship Deck Example

Looking for IT sponsorship proposal examples? Anyone in the IT business will want this event proposal template.

This event sponsorship proposal template showcases detailed information on an IT business. There's plenty of room for showing off eye catching graphs and data on the project.

Take a look at its highlights:

16 total pages
3 universal colors per layout (blue, green, red)
automatic page numbering
free fonts and icons

26. Graphic Template for Proposal for Sponsorship

If you're looking for a bolder look, this event sponsorship proposal template is the perfect cut. It’s unique, sleek, and a visual breath taker.

Change up the key colors here to make this event sponsorship proposal match your professional brand. Edit this sponsorship proposal template for your event.

As for its specs, with this template for proposal for sponsorship, you'll get:

12 custom pages
CMYK color
neatly-organized layers
fully and easily editable

27. Sponsorship Proposal Template

This sponsorship proposal template has a versatile look. From business, to sports events, it has everything you need to wow sponsors. It's got a bold, dark color scheme, but you can easily customize it to your liking. Edit it in InDesign.

The template proposal sponsorship design includes:

24 pages
A4 paper size format
ready-to-print design
free fonts

28. Graphic Sponsorship Package Template

This is one of the most interesting sponsorship proposal templates in this round up. It comes with master pages that make it easier to edit. And yes, it's all editable in InDesign.

Use the features in this sponsorship package template. Put together something amazing with:

26 pages
A4 and US Letter size + 5mm bleed
300 dpi resolution
free fonts

It's one of the best sponsorship proposal examples to check out.

29. Elegant Brochure Event Proposal Template

Looking for elegant and modern sponsorship proposal examples? We're wrapping up this list of sponsorship proposal templates with this option.

This event sponsorship proposal comes with:

PPT and PPTX files
40 pages with cool layouts
16:9 widescreen aspect ratio
ten color schemes

Use this event sponsorship proposal template. It's great if you're looking for great graphics and use of white space.

Use any of these templates as a sponsorship proposal example. They all have great design ideas for you to get inspired!

How to Customize a Sponsorship Proposal Template in Adobe InDesign

Have you found the perfect sponsorship proposal design? Not quite sure how to edit it in Adobe InDesign?

Here's some quick tips to help you jump right in and get started.

We'll use this event sponsorship proposal example in this walk through.

Download it today on Envato Elements if you'd like to work along with this demonstration. Or use an Adobe InDesign sponsorship proposal template of your own.

Download this premium sponsorship proposal template today on Envato Elements.

Let's get started:

1. Looking at Rectangular Frames in Adobe InDesign

Open an event sponsorship proposal template doc in Adobe InDesign. You might see all the content in colored boxes.

These boxes are called Rectangular Frames and they're a big part of how InDesign works. All your content is "held" within different frames. You can then resize and move around your layout.

These boxes won't print in your final product. They're visual cues to guide you.

To create a new rectangular frame, use the Rectangular Frame tool, as highlighted in the Tools panel on the left. Simply click and drag to create a new frame.

This is a good idea if you want to add something entirely new to your event sponsorship proposal template.

Want to temporarily hide these boxes? Go to View > Overprint Preview to toggle them off. To turn them back on, go back to View > Overprint Preview.

2. Pages in Adobe InDesign

Most event sponsorship proposal designs are a multi-page document. That's why it's important to understand how pages work in Adobe InDesign. You'll need to be able to navigate through the pages to edit and customize them.

To open up your Pages Panel, go to Window > Pages. You can see what it looks like in the screenshot below.

Here, we can see all our pages at a glance. Double click on a page to jump to it in your work space.

Right click on a page, and you'll see a variety of options. We can move pages, duplicate pages, and delete them from this menu.

Most event sponsorship proposal designs are a multi-page document.

3. Layers in Adobe InDesign

Most InDesign sponsorship deck template files are sorted into layers, for your convenience. Let's look at our Layers Panel by going to Window > Layers.

In this event sponsorship proposal example, the content has been organized into layers.

We can click on the lock icon beside each layer to unlock this content so we can edit it. If we don't, this content will stay locked or protected from edits. Toggle this on and off as often as you'd like.

In this example, let's unlock the layer titled "Page 1 Intro & 2 About Us". It's highlighted in the example screenshot, below. We're going to make some edits on this layer.

In this event sponsorship proposal example, content is organized into layers.

4. Editing Text in Adobe InDesign

Next, let's edit some text in our event sponsorship template. We'll work on the layer that we unlocked in the last step.

Start by selecting the Type Tool in your Tools panel. It's highlighted in the screenshot below.

Then, let's click on some of the existing text on the page. This will activate the text box containing the text.

We can then freely edit this text just as we would in most word processing environments.

Edit text in your event sponsorship proposal template.

5. Changing Colors in Adobe InDesign

Let's also change some colors on this page. There's a large, orange circle on this page, in this sponsorship proposal template. Let's change that.

First, take a look at your Tools panel. At the bottom you'll see the Stroke Color and Fill Color. The Stroke Color looks like an outline, while the Fill Color looks like a solid color.

Strokes are just that—they act like a visual outline around a frame.

Fills are the opposite—this is the color that fills the frame.

So, let's select our Selection tool in our Tools panel. Then select the large, orange circle (frames are typically rectangular, by default, but can also be polygons or ellipses, like this one here).

You'll notice that the Stroke and Fill Color match this circle when it's selected. Click on the Fill Color. This opens the color picker. Choose a new color and click Okay. There you've got it. Our circle is a new color. In this example, the circle has been changed to blue.

Change the colors of your event sponsorship proposal template.

How to Write a Proposal for an Event

You may be wondering how to write a proposal for an event. To save you time, we’ve outlined the right ways to write, design, and format your event proposal.

1. Briefly Introduce Your Organization, Event, & Goals

The first step is to let your potential sponsors know about your organization. No matter if you're a well-known organization. It’s good to start with a bit of introduction about who and what you are as a company.

Tell about the event you’re going to launch. Answer these must-know questions:

What's the event all about?
Why are you doing the event?
What are the goals you want to achieve?
How does this event correlate with your company?

Your potential sponsors must be able to understand why you’re creating an event. This shouldn’t be too long. The more concise and brief you are, the better.

This Project Proposal Contract & Invoice Template has sections to present the company.

2. Explain How Your Potential Sponsors Will Benefit

This part is very crucial. What’s in it for them?

The idea is sponsorship is a two-way relationship. You benefit from their financial or non-financial support. In return, your sponsors get something too. It’s good to note what benefits they can get before, during, and after the event.

What are you offering to them? What makes the event sponsorship so tempting? There are many ways you can present the benefits of sponsoring your event. Here are a few well-rounded justifications:

Get potential leads. They’ll get the opportunity to generate potential customers.
Network with other businesses. Aside from exposure to new audiences and customers, sponsors can also find new business partnerships.
Add to their corporate social responsibility. If your event benefits a charity or for a good cause, potential sponsors will get a positive brand image.

25+ Best Free Construction Proposal Templates to Download Now for 2025

Brenda Barron

10 Mar 2023

3. Offer Sponsorship Levels

In event sponsorship, it’s common that sponsors are offered different sponsorship levels. This leveling often comes with a package where price has already been set. Also promotes the inclusive benefits attached to it.

Use tiering to divide the sponsorship levels. Some use package names such as platinum, gold, silver, or bronze package. You can get creative at this point. Make sure that you clearly define the inclusions and the distinctions for each sponsorship level.

This premium template offers sponsorship leves and media coverage packages.

4. Lay Out Your Terms & Conditions

Every event sponsorship proposal must include the terms and conditions of the partnerships. Ensure that sponsors won't take advantage of you. Define the limitations of the sponsorship clearly.

Also, this section should also include your negotiation terms. Of course, there'll be sponsors who will ask for discounts or extra perks on top of the inclusive benefits. You want to appear as open as possible so that potential sponsors won’t be put off easily.

This example of an event proposal template DOC has terms and conditions of event sponsorship.

5. Close With a Persuasive Call-To-Action

Finally, your event sponsorship proposal must include an action step from your sponsors.

Don’t let them get away easily. Make sure that you’re closing your event proposal with an urgent call-to-action.

One way to do this is to add a deadline to your event proposal. This way, your potential sponsors know when they must decide. But, to make it more effective add a time-sensitive offer to your call to action.

For example, add a huge early bird discount or savings to the first five sponsors.

5 Quick Event Sponsorship Proposal Design Tips for 2024

You may be wondering how to write a proposal for an event.

We’ve outlined the right ways to write, design, and format your event proposal:

1. Follow Your Branding Style

The first tip is to follow your branding style guidelines. This will ensure that your proposal is easily recognizable. It'll also reinforce your brand.

Use your brand colors and fonts and a consistent image and photo style throughout your proposal.

Temply Proposal Template would work well as an event sponsorship proposal example.

2. Keep It Easy to Read

The second tip is to keep your proposal easy to read. Aside from using a legible font, use proper text formatting.

Stick to short paragraphs and use headings and bullet points. This will make the copy easy to skim through.

This premium Project Proposal offers a clean layout and great contrast to showcase your project.

3. Pay Attention to the Cover

Put as much thought into your proposal cover as you do in the rest of the proposal. Use a high-quality photo and make sure to include your company’s logo.

Consider using your main brand color with a shape overlay. Also, add your website address to the bottom of the page.

Event Brief Proposal has an attractive event proposal design.

4. Mind the White Space

White space refers to the space around each individual element.

Leave enough space between your text, images, and other elements. Avoid your proposal looking cluttered.

Use Event Organizer A5 for robust sponsorship proposals that require more detail.

5. Style The Call To Action

Lastly, make sure to include a call to action at the end of the proposal. This should clearly outline what the next step should be. Whether that’s filling out a form, calling you, or emailing you.

Use a contrasting color to make it stand out from the rest of the proposal.

This template proposal would work will for an event sponsorship.

5 Top Event Sponsorship Proposal Design Trends for 2024

Let's look at some of the top trends in sponsorship proposal design. We'll discuss what makes them so appealing.

We'll also look at some noteworthy event sponsorship proposal examples:

1. Keep It Simple

Like so many things in life, less is often more. Avoid cluttering your layouts with too much content.

Find a balance between eye catching elements and supplemental elements.

Check out this event sponsorship proposal example, below. A lot of the space here, in each spread, is "empty."

Use negative space to experiment with balance in your compositions for a sleek look.

Business Corporate Proposal is a premium template with a professional look.

2. Command Attention

Contrast can be a really eye catching in your event sponsorship proposal template.

Take a look at the sponsorship proposal template below. Notice how the white title "Project Proposal" really stands out against the dark navy background.

This concept is pushed much further, in this event proposal design. We see contrasting shapes too. Think about where the focal points are here—where your eyes go first—and the role contrast plays in that emphasis.

Check out this high contrast angular theme in this event proposal design.

3. Memorable Variety

Mix up your pages with color. We can do so in so many ways. In this event sponsorship proposal example, the entire page color varies.

Experiment with color. Notice that the pages here still follow a continuous color scheme and theme. This is how we can use variety within boundaries to keep things consistent but interesting.

Full color is employed on these beautifully designed event proposal design spreads.

4. Visual Consistency

That said, consistency is timeless. A strong event sponsorship template is going to look visually similar from page to page. There should be document wide similarities that act as a visual anchor.

Check out this sponsorship proposal design. Many pages vary, but they still have elements in common. For example, we see block themed elements throughout. We also see consistent use of color—yellow is definitely the theme here.

Key colors and a unified block aesthetic give this event sponsorship template a stylish, professional look.

5. Stand Out

Again, consistency is important. But it doesn't necessarily mean that our sponsorship proposal design has to be boring. Find a balance between variety and consistency.

This event sponsorship proposal is designed in a square format. It works well and makes this template stand out from the crowd.

This stylish sponsorship proposal template utilizes a square layout design.

Find More Consulting Proposal Templates

Aside from event sponsorship proposals, you'll be dealing with other business negotiations.

From making project proposals to closing any type of business deals. You've got to always plan accordingly.

To help you with your business proposal needs, here are some great roundup posts that you can read and win your business proposal any time of the year:

Common Proposal Questions Answered (FAQ)

Are you still wondering what to include in your proposal?

We’ve gathered the most common questions about proposals and our answers to them:

1. What's the Recommended Structure of a Proposal?

A proposal usually consists of the following sections:

an introduction
the main problem outline
proposed solution
qualifications
and an overview of costs and benefits

After that, wrap up the proposal with a conclusion and next steps.

Learn more looking at some of the best business proposal templates:

35 Professional Business Project Proposal Templates 2025

Laura Spencer

03 Apr 2023

2. What Programs Should I Use to Design My Proposal?

Use a professional page layout and publishing program. Some examples include InDesign and Microsoft Word.

Learn more about publishing programs in these tutorials:

3. What Types of Proposals Are There?

There are several different proposal types. The main three types are:

unsolicited
formally solicited
informally solicited

Other types of proposals include:

continuation
renewal
supplemental proposals

Get some ideas on how your proposal can look with this useful roundup:

40+ Best Business Proposal Templates: Ideas For New Client Projects in 2025

Marc Schenker

16 Feb 2024

4. What's a Request for a Proposal?

A Request for a Proposal (RFP) is sent out to possible suppliers or vendors of a desired product or service. The document includes the specific requirements needed.

If interested, potential suppliers or vendors respond with a proposal that addresses the points listed in the RFP. Pricing and timelines are usually also included.

This premium event proposal template is perfect for responding to an RFP.

5. How Long Should My Proposal Be?

The length of the proposal depends on the nature and scope of the project. You need to cover everything the client needs to know. All without overwhelming them with too much information.

Typically, it takes between 10-15 pages to cover everything important, but more complex proposals may need to be longer.

20 Best Free Proposal Templates for Google Docs and Microsoft Word (2025)

Sharon Hurley Hall

23 Nov 2023

Learn More About Making Awesome Proposals in 2024

Creating a great and engaging proposal that wins clients is no small feat. Luckily, we've got plenty of tutorials to help you make an awesome proposal in 2024 and beyond.

Start with these tutorials:

Best Event Proposal Templates on Envato Elements (With Unlimited Use)

Envato Elements curates some of the most effective event proposal templates today. You’ll only need one subscription.

With Elements you won’t just get access to event sponsorship proposal templates.

You’ll also enjoy thousands of digital assets that are included with your subscription.

Get unlimited access to thousands of high quality design assets on Envato Elements.

You may be tempted to download a free sponsorship package template. But a free event sponsorship proposal template might have licensing conditions (especially commercial).

Premium sponsorship proposal examples from Envato Elements offer more advantages. There are more choices and design options. Find more than just sponsorship proposal templates for free.

Envato Elements offers unlimited sponsorship proposal examples with your subscription.

Not yet convinced? Envato Elements understands the importance of branding to winning an event sponsorship proposal. These sponsorship templates are customizable so you can easily make each event proposal unique.

Plus, now Envato Elements has introduced an AI-powered search feature!

Add a description of your project to find the finest human-crafted resources.

Start experimenting with this enhanced search tool! Discover the ideal event sponsorship proposal templates for your yearly reports.

Download the Best Event Sponsorship Proposal Templates Today

As you write your event sponsorship proposal, remember to keep your sponsors in mind. Write your content according to your potential sponsors’ point of view.

This way, they can easily understand what you’re trying to relay. At the end of the day, sponsors want to know what’s in it for them.

Remember: the key to designing a successful event proposal is making sure you’re captivating and benefits-driven.

To design and format your event proposal, get inspired by the best event proposal templates from Envato Elements.

Why not download your favorite event sponsorship proposal template now and get started?

Editorial Note: This post has been updated with contributions from Lex Soto, Daisy Ein, Maria Villanueva, Nathan Umoh and Dacia Egurrola. Lex and Dacia are staff writers with Envato Tuts+. Daisy is a freelance instructor for Envato Tuts+. Maria is an Associate Editor with Envato Tuts+ Design & Illustration. Nathan is a freelance writer for Envato Tuts+.

How to use the Artistic Text Tool in Affinity Designer

2024-09-05T11:01:08+00:00

This Affinity Designer tutorial is a continuation of our free beginner's guide to Affinity Designer. You can watch the whole video on the Envato Tuts+ YouTube channel.

Previously, we learned about the Export Persona in Affinity Designer. In this installment, we'll focus on how to use the Artistic Text Tool. If you'd rather follow the video, here it is:

Watch the lesson: How to use the Artistic Text Tool

Why should you learn to use the Artistic Text Tool in Affinity Designer?

Flat, plain text isn't always aesthetically appealing and doesn't always get the point across effectively. Enter the Artistic Text Tool in Affinity Designer. This one allows you to add style and dynamism to the shorter text in your designs, such as titles, slogans, or logos.

How to use the Artistic Text Tool in Affinity Designer

We've gone through a few of the basic tools in previous tutorials on Affinity Designer tips and tricks. Here, we're creating a text-focused design that's impactful and eye-catching. Let's look at how to use the Artistic Text Tool in Affinity Designer to make it spectacular:

Step 1

To start this Affinity tutorial, find the Artistic Text Tool by clicking on the Text button on the menu to the left (the white square with a 'T' on it). From the options displayed, hit the Affinity Designer Artistic Text Tool. You'll see the button will change to a black square with an 'A'.

Step 2

To add your text, you first need to click and drag the text box until you get the desired font size. Once you have that down, type in your content.

Step 3

Finally, if you want to change the font and unlock other options, click on the Move Tool at the top left (with the cursor on it), and go to the Character panel. There, you'll be able to choose another font and modify the size, weight, and more.

Frequently asked questions about the Artistic Text Tool in Affinity Designer

Next, let's dig into a couple of questions you may have about the Artistic Text Tool in Affinity Designer.

What are the main differences between the Frame Text and Artistic Text Tools?

If you're creating Affinity Designer text effects, you may be wondering if you should use the Frame Text Tool or the Artistic Text Tool. Here are the key differences:

The Frame Text Tool is better suited to longer text since it automatically wraps and frames the text, making it easier to move around. It also has more structured boundaries to give the text a consistent format.
The Artistic Text Tool works well for shorter text (such as single words or simple phrases) as it allows for greater manipulation. This means you can be more free and creative with it.

Can I use the Affinity Designer Artistic Text Tool for paragraphs?

You can! However, as stated above, it's more suitable for shorter pieces of text. If you want to add paragraphs or longer blocks of text, opt for the Frame Text Tool. Or, if you're dealing with larger amounts of text, move to Affinity Publisher.

Do I have to change the text characteristics through the Character panel?

Not necessarily. There's also the text toolbar at the top. There, you can tweak the Font, Alignment, Size, and more. Still, you may find more options through the Character panel.

What are other things you can change through the Character panel?

There are so many things you can modify, from the Font to the Weight, all the way to the Positioning and Decorations. You can even change the Language to get a spelling check and switch the typography language. Play around with the options and go all out with your Affinity Designer text effects!

Can I change between the Frame Text and Artistic Text Tools?

Yes! You're not stuck with your first choice. If you realize you need to change between the two, you can. To do it, make sure you're on the right layer. Then, go to the menu at the top and click the Layer option. From the dropdown menu, go for Convert to Art Text. Now, you can edit your text with the Artistic Text Tool.

If you need to revert back, follow the same process in this short Affinity Designer tutorial, and go for the Frame Text option.

Check out the result!

We've reached the end of this Affinity tutorial! This is how the social media post design is going so far after using the Affinity Designer artistic text tool. It's captivating, bold, and modern. Take a look!

Continue reading these Affinity Designer tutorials to learn even more new skills and elevate your designs!

Learn more about Affinity Designer

If you need premium Affinity Designer graphics, check out Envato for unlimited downloads! Eager to learn more about Affinity Designer? Here are other Envato Tuts+ tutorials for different skill levels:

The best AI image generators of 2025

2025-05-29T16:17:09+00:00

Looking to create your next AI masterpiece? Or do you simply want to discover fantastic assets to use in your next creative project? Finding the best AI tool for graphic design will help you take your ideas to the next level, and many of the latest and best AI image generators are not only easy to use but often free to try out as well.

Here, creative folk can find our edit of the best AI image generators of 2025, from Midjourney to ImageGen, as well as tips for using AI design apps like Adobe Firefly to integrate imagery into your own designs.

Tap into the top 2025 AI design trends with these AI tools for graphic design, photography, and advanced image editing, and see your projects come to life!

You can create images like this using Envato's ImageGen.

The best AI image generators in 2025

Envato ImageGen	Best for social media content, trending styles, and the leading models available!
Chat GPT (GPT-4o)	Best for photorealism and conversational editing.
Adobe Firefly	Best for photography and project integration.
Midjourney	Best for artistic, atmospheric imagery.
DALL·E 3	Best for cartoons and nuanced prompts.
Flux 1.1 Pro Ultra	Best for high-definition portraits.
Recraft	Best for graphic designs and vector images.
Stable Diffusion	Best for uninterrupted creativity.
Reve	Best for fast generation and high detail.
Ideogram	Best for clear text and commercial imagery.

What is an AI image generator?

First, back to basics—maybe you’ve used an AI image generator from photo before and are curious about what else is out there, or perhaps you’re fresh to the AI app scene. Either way, AI image generators are fast becoming an essential tool in a creative’s kit to visualize ideas and experiment with different styles and layouts. And with the advances in the technology, it's now possible to use AI art generators to create unique work as part of a creative project.

In a nutshell, AI image generators transform your AI art prompts into a visual image. The more refined and specific your text prompt, the more likely it is that the resulting image will be in line with what you imagined.

How do AI image generators work?

They're trained on vast amounts of visual data, allowing the generator to build associations between styles, subjects, and patterns. The more advanced image generators will be able to pick up on AI image trends and design trends more widely, creating more relevant and contemporary results. The best AI design apps are capable of generating images that are almost indistinguishable from real-life pictures—although there are a range of tell-tale signs you can use to identify AI-generated imagery.

And yup... human hands are still a sore point for almost all the image generators we tried. So we'll keep you posted on that one!

Image created with Envato's ImageGen.

What are the best AI design apps?

It’s important to know that the best AI design apps enable your creativity, rather than replacing it. They take your ideas and turn them into reality, allowing you to refine your AI image results further to achieve particular angles, styles, colors, and trends.

The most advanced AI design tools might allow you to integrate AI images into your own work, creating a seamless design that blends the best of both worlds. So depending on what you’re looking for—whether mapping out a creative idea or looking for something more sophisticated—these are the best AI design apps by project. Scroll down for the full list of our recommendations to discover even more great AI tools for design, and take a deep dive into the features they offer.

Which AI tool is best for graphic design?

The best AI tool for graphic design? If you’re looking to map out design concepts for a brief, a quick and intuitive app like ImageGen is a great starting point for beginners, and it includes an AI prompt enhancement feature that makes your text even more effective.

For creating logos, typography, and icons, online AI app Ideogram allows graphic designers to pull multiple elements together into a cohesive layout for posters, flyers, or banners.

Recraft places an emphasis on AI images that have an editorial, polished feel, making it a great fit for advertising work or branded campaigns.

Which AI tool is best for... just having fun?

To make a quick start with creating AI images, and have plenty of fun in the process, you could try a simple image generator tool like Google’s Gemini, which gives experimental (and often downright weird) results with just a few words.

Or take Meta AI for a spin, which has been designed with beginners in mind. In the app, tap Ask Meta AI and type in what you’d like to generate, starting with Imagine. Place yourself into different scenarios (however bizarre) and share the results on social media. Just don’t expect anything too advanced!

Which AI tool is best for photography?

Adobe Firefly is one of the best AI tools for advanced image editing, allowing you to create and refine sophisticated prompts, work with the latest generative AI technology, and integrate your imagery into existing photographs. Experiment with different angles, backgrounds, and lighting prompts to get the most from your AI-generated photos. Flexible and natural results: it's a win-win.

Which AI tool is best for advanced creative work?

It really depends on the type of project you're working on, but there are a growing number of AI design apps that cater to advanced graphic design, product design, photography, and brand work. Midjourney is great for experimenting with artistic styles and subtle effects in your images, while content creators and filmmakers will love the advanced capabilities of AI video generation in Runway.

For more control over creative results, DALL·E 3 generates really impressive and accurate results. The app is built around ChatGPT but is fine-tuned to image generation, making your requests more atmospheric, nuanced, and specific.

For more recommended AI design apps, read on to discover our overview of some of the best AI image generators for graphic design and other creative projects in 2025.

The best AI image generators of 2025: 10 apps to use now

Looking for the best AI for graphic design projects? Or something a little more cheap and cheerful? These are our top picks for 2025, with recommended use and price details.

1. Envato ImageGen

At a glance:

Quick and intuitive to use.
Always adding the latest cutting edge tech (the best models—like Imagen 4!)
Tap into trends and make images more precise with built-in AI prompt enhancement.
Continue editing and fine tuning images with ImageEdit.
Turn static images into videos with VideoGen.

If you’re looking for the balance of an intuitive, user-friendly interface with the potential to maximize the creative reach of your AI images, ImageGen is well worth a look. It's easy for beginners to dive in thanks to the ability to enhance your prompts using AI, but this image generator also allows you to get really experimental with aesthetic styles and fun trends. So whether you’re looking for cutesy illustrations or photorealistic portraits, your image results are sure to be experimental, bold, and fun.

Envato's AI tools also have the added benefit of image editing via their ImageEdit tools. You can customise your images even further to get the creation for your project.

You can also find a full suite of complementary creative AI tools to pair with ImageGen, so you can generate videos from static images or refine images further with background removal, erasure, and upscaling.

Best for: Achieving trending image styles, social media content creation, enhanced AI prompts.

Price: ImageGen is included as part of an Individual or Team plan at Envato, which also gives you complete access to Envato’s library of creative assets, plus all its AI tools that includes image editing, video generation, music generation, and voice generation. You can even try ImageGen for free with five image generations. (AI tools are not included with Enterprise plans.)

2. ChatGPT (GPT-4o)

At a glance:

Great for photorealistic images.
Understands sophisticated, precise prompts.
Edit images with the app conversation-style.

ChatGPT’s image generation capabilities have always been one of the strongest on the market, but with GPT-4o, developed by OpenAI, users can create images that not only look amazing but are also imbued with more meaning and relevance.

Create images with sophisticated typography and meaningful text (no more blurry, nonsensical type bunged into your image for no good reason!), as well as ultra-convincing photorealistic effects. OpenAI dubs it the app for "useful image generation," and we have to agree—the accuracy and precision of prompts, as well as the conversational style of interacting with the app, make refining your image results easy and intuitive. So you can go from icon to game character to creating a whole visual world in very little time.

Best for: Photorealism, sophisticated prompts, conversational refinement.

Price: Free for all users, with a limit of three images per day. Plus ($20 per month) or Pro ($200 per month) users can generate unlimited images.

3. Adobe Firefly

At a glance:

Perfect for photographers looking to enhance their own photos.
Best for integrating into your own project workflow.
Benefit from cool features like Generative Fill.

Adobe’s AI powerhouse app has been created with designers in mind. Create images, video, audio, and vector graphics, collaborate with fellow creatives using Firefly Boards, and generate videos from static images.

Creative studios love Firefly for its advanced image-editing features and seamless user experience, making it feel like a part of your creative team rather than a standalone AI design app.

Best for: Advanced photo editing, cool additional features like Generative Fill, integration of imagery into existing projects.

Price: You can start using Firefly for free, with limited generative credits. Upgrade to Firefly Standard ($9.99 per month) or Firefly Pro ($29.99 per month) for unlimited image generation and features.

4. Midjourney

At a glance:

Create highly artistic images.
High level of realism.
Adjust images easily with editing features.

Offering an enticing balance of exceptional ease of use and aesthetically pleasing results, Midjourney is beloved by fans for its ability to create dreamlike landscapes and immersive images that look like something straight out of a fantasy movie, with only a few text prompts.

To use it, you’ll need to sign up for an account with Discord, which is a social messaging platform popular with online gamers. After you've done that, you can use the app simply by typing /imagine in the Discord chat and creating your AI text prompt from there. One advantage of Midjourney is that it offers cool features to adjust your generated image, so you can create different variations, zoom out, or fill parts of the image with contextual imagery.

Best for: Artistic results, atmospheric images, realism.

Price: Start generating 25 images for free. After that, a Basic plan starts from $10 per month (or $8 if paid annually).

5. DALL·E 3

At a glance:

Perfect for creating fun, cartoon-style, and surrealist imagery.
Less suited to photorealism.
Understands nuanced text prompts for greater precision.

As long as you’re not looking for realistic photography (which isn’t its strong point), DALL·E 3, hosted by OpenArt AI, is a good all-round image generator that excels at producing quirky and experimental images. Cartoon and 3D styles can come out really well, but the definition and quality of images can also vary widely.

Improving on its earlier iteration, DALL·E 2, DALL·E 3 is able to better understand complex text descriptions and create more specific images as a result.

A big plus of the generator is its accessibility and price point. Anyone with a ChatGPT account can access DALL·E 3, or you can use it for free through Bing's Image Creator, making it a good-value option.

Best for: Cartoons and comics, nuanced and accurate prompts, atmospheric imagery.

Price: Available through ChatGPT Plus for $20 a month, or use for free via Bing Image Creator.

6. Flux 1.1 Pro Ultra

At a glance:

Generate "look twice" highly photorealistic images.
Export images in high detail and high definition.
Requires patience and experimentation for best results.

Promising photorealism to rival real-life photography, Flux 1.1 Pro Ultra by Black Forest Labs is causing quite a stir in creative circles, and for good reason. Image results are highly detailed, with exceptional lighting and accurate text rendering.

The interface is designed with developers in mind rather than designers, so it's not the most user-friendly AI design app. It also struggles with consistency and prompt refinement, so you have to be patient to get the best results.

Best for: Ultra-photorealistic images, human portraits, high-definition 4K images.

Price: Try Flux 1.1. Pro for free as part of a trial, or create more at $0.06 per image.

7. Recraft

At a glance:

Great for graphic designers, product designers, and branding.
Generate polished, commercial imagery.
Combine typography and mockup imagery seamlessly.

The best AI tool for graphic design specifically might just be Recraft, which has a user-friendly interface for creating vector art, illustrations, and 3D graphics. Color control features allow you to keep your palette consistent across multiple images, making designs easily transferrable to branding projects or logo designs. You can also save your creations in a range of handy image formats, including SVG, JPG, and PNG.

We particularly love the attention to detail in Recraft, which means you can subtly adjust small elements of a design, such as typography, color, or background, and it’s super easy to integrate a design into a range of mockups, making it a useful AI design app for ideation and client pitch work.

Best for: Graphic design, vector graphics, product mockups.

Price: Try the app for free, or upgrade to a Basic plan for $12 a month (or $10 paid annually).

8. Stable Diffusion

At a glance:

Uncensored content gives complete creative flexibility.
Mimics the creative process most accurately out of all the apps we tested.
Free for most individuals, for commercial and personal use.

User-friendly and cost-effective, Stable Diffusion is an open-source AI image generator developed by Stability AI. Unrestricted and uncensored content gives users more freedom and artistic reach than other AI image generators, granting access to a broader library of content.

A vast library of extensions also allows creatives to fine-tune their image results with ease. If you’re looking for an AI design app that feels closest to an actual artistic process, Stable Diffusion is possibly the most creative tool on the market right now.

Best for: Uninterrupted creativity, flexible editing, artistic results.

Price: Free for most users, with larger organizations required to purchase a licence.

9. Reve

At a glance:

Ultra-speedy image generation.
High-quality, detailed results.
Experiment with a wide range of styles.

Fast, free, and super easy to use, Reve is a new kid on the AI block (having been released in March 2025), but it's fast becoming a favorite amongst creatives looking for an all-in-one AI image generator that won’t break the bank.

One of the cool features of Reve is the range of aesthetic styles you can play with, such as watercolor, fantasy, and photorealistic. With a little experimentation, you can create highly detailed, immersive images in just a few seconds, and it almost always responds to AI text prompts with efficiency and precision. Well worth a look, we think!

Best for: Fast image generation, high-quality and detailed imagery, precise text prompts.

Price: Free for all users.

10. Ideogram

At a glance:

Renders text accurately from prompts.
Generate commercial-style imagery.
The best of both worlds with graphic and photo integration.

On the market since 2023, Ideogram is a strong contender for the best AI image generator for graphic design and gaming imagery, and it's particularly notable for its ability to integrate text as part of imagery without distortion or ‘gobbledygook’.

Ideogram uses Magic Prompt, which transforms a basic text prompt into a more complex and specific description, giving you improved art results. We think it’s a great all-round AI design app for graphic designers, artists, and brand designers, letting you create commercial-style imagery that looks polished and professional.

Best for: Clear text on images, branded graphics, commercial imagery.

Price: Start for free, or begin at $7 a month paid annually for more credits and faster generation speeds.

The best AI image generator for your next project is...?

In an increasingly crowded AI app market, it can be tricky to work out which AI image generator is the right choice for you. Hopefully our selection will help you land on the best AI design app for your next creative project. The advantage of having multiple options to choose from is that many AI developers are starting to cater specifically to certain creative tasks and industries.

So, whether you’re a product designer looking to mock up your next range or a graphic designer seeking a quick mood board of ideas for a client, there are now highly effective AI image generators that are tailored to these purposes. Find the AI app to fit your niche, and let your ideas flow. You’ll be creating amazing AI art in no time!

The next step in your AI journey? You’ll need to discover the best AI art prompts to generate jaw-dropping imagery, or why not learn how to create an AI movie poster to test your AI creative skills? And while you’re here, you can dive straight into creating AI photography, illustrations, and artwork in a few clicks with ImageGen.

What you need to know to get a creative job in AI

2024-02-10T16:00:27+00:00

People worry about Artificial Intelligence (AI) taking away jobs. But while AI may be doing some work previously done by humans, it also creates new and exciting opportunities for careers in AI—including for creative professionals.

There are careers in AI beyond the technical fields. (Image source: Envato)

According to an estimate from the World Economic Forum, 170 million new jobs will emerge in the AI industry by 2030. Keep reading if you want to learn about jobs in AI and how to get a job in AI.

In this article, you'll learn more about how AI affects creative opportunities. We'll outline some creative AI roles. Then, we'll explain what you need to know to prepare for AI Jobs.

Jump to content in this section:

Breaking into jobs in artificial intelligence: A guide for creative professionals
Overview of creative jobs in AI
Learn more about AI
Get your job search going with Envato

Breaking into jobs in artificial intelligence: A guide for creative professionals

To break into a creative job in the AI industry, there are a few things you can do to give yourself an edge over other candidates:

1. Practice using AI tools

The best way to get an AI job is to work with the tools that are revolutionizing the field. Envato's AI tools make this possible. You can generate images using ImageGen, and then modify them using ImageEdit to remove objects, alter backgrounds, or rearrange layouts. VoiceGen makes it possible to create realistic voiceovers, which is helpful in trying out ideas in content and advertising.

These are hands-on tools, flexible and intuitive. They're especially worth it if you're figuring out how to get a job in AI without a degree. You'll build real-world skills and a portfolio showing what you can do. Whether you're studying AI marketing tools or preparing for AI careers, Envato gives you space to create, learn, and grow with confidence.

2. Develop the right skills

As you may have noticed, AI jobs for creatives require a unique blend of the artistic and the technical. And since AI is changing and growing fast, you've got to make an effort to stay on top of industry trends and developments. Both free and paid courses are plentiful, so no matter what your budget is, you can pick up the necessary skills.

Invest in continuous growth in your creative field. Use AI tools so you’re familiar with them. And if you've got the interest and aptitude, try to learn one or more AI programming languages. The top ones are:

Python
Java
JavaScript
Prolog
Lisp
Julia
Haskell
C++
R
Scala

Although learning programming isn't always a requirement of creative AI jobs, it's something that can give you an advantage over other creative professionals. It'll also open up more opportunities for you.

3. Create a robust creative portfolio

As a creative professional, you know the drill: You need a stellar portfolio to show off what you’re capable of doing. But to break into an AI job, your portfolio must integrate AI-related projects to show both your creativity and technical skills.

4. Keep updated on emerging AI technologies

You don’t have to be a computer engineer or programmer to keep abreast of AI developments. You can follow any of the tech-oriented websites, podcasts, newsletters, and social media accounts that discuss AI in layperson’s terms. Some podcasts are even dedicated to AI topics for the general audience. Books on AI are also a good reference. If you want to learn how to get a job in AI without a degree, especially in a creative or marketing field, learning tools such as AI marketing tools can give you a practical edge and insight into how the industry is evolving.

5. Network with AI communities

Networking plays an important role in your search for AI careers. (Image Source: Envato)

Networking has always been one of the key elements of finding your ideal job, and it remains true for getting a job in AI. Attend in-person or virtual meetups focused on AI discussions for non-technical people.

Not only will you increase your knowledge and understanding of AI trends, but you’ll also meet AI professionals who tell you what it’s like to work in the AI industry. They may even have job leads for you.

6. Leverage online learning

Because the AI field is always changing and evolving rapidly, you've got to commit to always be learning. Fortunately, there are many opportunities for learning. Many colleges and universities are offering AI-related courses.

If you prefer to learn virtually, you can do so through:

YouTube videos
online courses
virtual events

Even if you've got little—or no—budget for learning, you can find lots of ways to develop and enhance your skills in AI.

Overview of creative jobs in AI

Contrary to popular belief, the AI industry doesn’t only offer opportunities for engineers and computer techies. It opens up an array of opportunities for creatives.

“AI won't replace creative jobs just as the invention of the camera didn't make paintings obsolete,” says Ashley Still, senior vice president of digital media at Adobe.

And while digital cameras have enabled more people to take their own photos, professional photographers continue to be in high demand.

That’s because AI, even generative AI, can't create anything from scratch. It augments human intelligence rather than replacing it. With that in mind, here’s a list of creative AI jobs, also known as “AI creatives”:

1. AI artist

Even artists can find careers in AI. (Image source: Envato)

An AI artist creates AI-generated art. This job requires expertise in creative design as well as computer vision and machine learning. The goal is to create visually stunning artwork and photos generated by AI.

As an AI artist, you’ll be involved in every stage of the creative process:

ideation and brainstorming
experimentation and development
production and exhibition

The key is to create art that would be hard or impossible for humans to make. To succeed as an AI artist, you must be passionate about pushing the boundaries in AI-generated art.

2. AI content writer or trainer

An AI content writer or trainer helps train Generative AI by writing novel conversations. These will be used to train GenAI on how to respond to queries and prompts. You’ll have conversations with GenAI, fact-check its responses, and track its progress.

You’ll need to have strong skills in writing dialogue and conversational text for this AI job. Creatives with experience in screenplay writing would have an edge.

Read: 10 Best AI copywriting tools for business

3. AI copywriter, editor

An AI copywriter or AI editor creates informative content about AI. This may be for various platforms such as:

blogs
newspapers
magazines
news agencies

The job of an AI copywriter or editor usually encompasses keyword research, SEO writing, and market research. That is, you should know how to write engaging articles about AI that will rank highly in search engines.

Aside from good writing skills, you will also require experience in AI technologies as well as passion for its development and application in industries. Familiarity with AI marketing tools can prove to be an extra advantage, especially if you're exploring how to get a job in AI without a degree.

4. AI designer

Not to be confused with techies who design user interfaces for AI, an AI designer is someone who creates designs using AI’s machine learning algorithms. It’s an exciting new field for graphic designers.

This job requires strong graphic design skills. At the same time, you must know how to use GenAI and how to use it in design projects.

Learn more: AI graphic design tools and techniques—how to harness AI for design

5. AI film editor and director

An AI film editor and director uses AI to create videos and films. With the help of AI, you’ll analyze audience preferences to optimize your films and videos for specific audiences, markets, and demographics.

You may also use AI for everything, including:

casting
scriptwriting
visual effects
animation
editing

Aside from knowing the basics of film production, editing, and directing, you must know the latest AI technologies in film and video.

6. AI game developer

The AI game developer role is a combination of creativity and programming know-how. The goal of this job is to create exciting games using AI.

Your role may be more on the creative side of things (designing game worlds and characters), or it may be more technical (writing algorithms and programming the game to bring the designers’ vision to life). Either way, you’ll need to know how to apply AI techniques in all phases of game development to optimize the gameplay experience for users.

7. AI musician

AI can be used to help produce music. (Image source: Envato)

Like the AI artist, an AI musician creates music using AI. With AI streamlining your workflow, you’re expected to produce music for specific genres and themes, which would be almost impossible for humans to create.

The ability to play one or more musical instruments or sing would be an asset, along with knowledge of AI technologies. You’ll also need to be creative and give appropriate prompts to GenAI to produce unique and enthralling pieces of music.

Midjourney vs. Stable Diffusion: AI Image Generators

2024-01-07T20:53:08+00:00

Which of the AI art generators is better: Midjourney or Stable Diffusion? Both these AI art generators are amazing at transforming text prompts into eye-catching art. However, to help you choose the best tool for your artistic needs, we need to analyze factors like pricing models, image sizes, customization, and more.

In this article, we will round up the key features of Stable Diffusion vs. MidJourney and weigh the strengths and weaknesses of these powerful AI image generation models.

Jump to content in this section:

What Is MidJourney?
What Is Stable Diffusion?
What Is the Cost of Midjourney vs. Stable Diffusion?
What Are the Key Features of Midjourney vs. Stable Diffusion?
What Are the Pros and Cons of Midjourney vs. Stable Diffusion for AI Image Generation?
How to Choose the Best AI Generator Model

What You'll Learn

What is Midjourney?
What is Stable Diffusion?
What is the cost of Midjourney vs. Stable Diffusion?
What are the key features of MidJourney vs Stable Diffusion?
What are the pros and cons of Midjourney vs. Stable Diffusion for AI image generation?
How to choose the best AI generator model for your work

1. What Is MidJourney?

Midjourney is an AI art generator founded in San Francisco, California, by David Holz. It entered into open beta in July 2022. Midjourney is a text-to-image AI image generator known for adapting basic art styles and generating remarkably vivid images.

Midjourney is a machine-learning model that allows users to generate images based on text prompts.

1.1 How to Access Midjourney

Step 1

Wondering how to use Midjourney? Currently, Midjourney is only accessible through the Discord chat app. To get started with it, you will need to create a Discord account. Once you've done that, head over to Midjourney's landing page and Sign In with your Discord account.

Step 2

To start generating images, you need to Purchase a subscription plan. After that, click on Community to connect to the Midjourney server.

Step 3

Midjourney has its own Discord server, so once you join the Midjourney Community, you will need to accept the Discord invitation by pressing the Accept Invite tab, to access and connect to the Midjourney server. When you've gained access to the server, you can enter one of the 'newbies' channels to start creating images.

Type in the /imagine command to get started, and enter a text prompt to generate the image you want.

If you'd like to know a little more about the process, you can check out this new article on Envato Tuts+:

What Is Midjourney?

Abbey Esparza

14 Nov 2023

2. What Is Stable Diffusion?

Stable Diffusion is an AI image generator model that was developed and released by Stability AI on 22 August 2022. This tool was built to convert textual prompts into visual outputs, using algorithms based on machine learning, state-of-the-art deep learning, computer vision, and natural language descriptions.

Stable Diffusion can produce a multitude of artistic styles, ranging from anime to photorealistic art, in a matter of seconds.

2.1 How to Access Stable Diffusion

If you're wondering how to access Stable Diffusion, you should know that Stable Diffusion is entirely open-source and free for commercial and non-commercial use. The software allows everyone to access it, modify it, and use it.

There are several ways users can gain access to Stable Diffusion. One is by installing the mobile app Dreamer. Another method is through the web app Stable Diffusion Web, and there are several other ways, both online or offline, by installing the software to a hard drive.

To find out more ways to use Stable Diffusion, check out this article:

What Is Stable Diffusion?

MissChatz

06 Jan 2024

3. What Is the Cost of Midjourney vs. Stable Diffusion?

3.1 What Is the Cost of Midjourney?

Is Midjourney free? Midjourney has moved from offering free trials to being a tiered paid service. A Midjourney subscription offers a limited number of hours for free image generation each month. For example, a Basic Plan subscription is billed annually at $96 ($8/month) and allows 3.3 hours/month. A Mega Plan annual subscription cost is set at $1,152 ($96/month) and offers 60hours/month.

Here's a look at the current Midjourney prices and subscription plans available for Basic, Standard, Pro, and Mega:

3.2 What Is the Cost of Stable Diffusion?

Stable Diffusion is currently free and also offers a paid credit plan for its software, starting at $29. Users can access its free basic features without needing licensing or subscription fees. The free version of Stable Diffusion allows users to perform limited edits and experiment with art styles. On the other hand, if you are looking for advanced image editing or processing, you will need to subscribe to a Premium Plan.

Stable Diffusion offers three pricing plans: Basic, Standard, and Premium. They are different in features, speed, cost, and capabilities.

4. What Are the Key Features of Midjourney vs. Stable Diffusion?

Midjourney and Stable Diffusion are both powerful AI image generators. Let's take a look at the key features and benefits of Stable Diffusion vs. Midjourney by comparing image quality, accessibility, ownership, and customization options.

Image Quality

Midjourney creates high-quality images up to 1024 x 1024 pixels.
Midjourney's generated images have more aesthetics and finer details.
The tool requires minimal effort and a fast rate of one minute of GPU time to produce high-quality images.
By default, Stable Diffusion creates images up to 512 x 512 resolution and can go up to 4096 x 4096.
Stable Diffusion offers an array of artistic styles from photorealistic to pixel art, so users get more creativity and diversity when generating images.
Midjourney image formats are JPEG and PNG.
Stable Diffusion formats are PNG, JPEG, and GIF.

User Interface

Midjourney is accessed through an internet connection and a Discord account.
Stable Diffusion can be accessed through various frameworks, online/offline, on a mobile app, and on your computer's hard drive.

Copyright/Ownership

Both Midjourney and Stable Diffusion allow you ownership of the images you create, with no branding or watermark. However, with Midjourney, it depends on which paid tier you have, as you have more rights with higher tiers.

Stable Diffusion, on the other hand, claims no rights to the images generated and allows users to distribute and sell their AI images. For further information, read their license and terms.

Customization

Stable Diffusion has more flexibility and customization when it comes to art styles, image size, negative prompts, adjusting the prompt parameters, and the number of images generated.

5. What Are the Pros and Cons of Midjourney vs. Stable Diffusion for AI Image Generation?

Both AI art generators have their strengths and weaknesses. Let's take a quick look at the pros and cons and how to use Midjourney and Stable Diffusion.

5.1 Midjourney

Advantages

Has an active community.
Produces high-quality images, with details.
Has a reasonable subscription price.
You can browse other users' generated images.
Use Midjourney when you need high-quality images with intricate details or photorealistic images.
It's a great AI generator for creating stunning backdrops and backgrounds, fantasy-themed images, sci-fi content, powerful scenes, or images with dramatic lighting.
Use Midjourney for video games.

Disadvantages

More complicated to use.
Lots of users on the platform, so your image generations get buried under other generations.
Requires a Discord account.
Paid-only platform.
Midjourney cost based on subscription tiers.
There is no privacy—your creations can be viewed and downloaded by other users on the server.
Offers a few customizable models.
Requires a commercial license.

5.2 Stable Diffusion

Advantages

High image quality.
You have more control over the customization of image parameters.
Offers a broader range of art styles for its users.
Has a user-friendly interface and is an easy-to-use image generator.
Free to experiment with.
Stable Diffusion has thousands of AI models available for download.
Allows users to create their own AI models by training them with their own images, which is not available on Midjourney.
Free for non-commercial use, and commercial licenses are available.
Stable Diffusion is great for industries that are focused on content creation, virtual content, or digital marketing.
Go for Stable Diffusion when you need images for e-commerce, scientific research, product design, or digital art creation.
Use Stable Diffusion to create gaming assets, cover art, backgrounds, characters, etc.
Freelancers or beginners can access the free version, but professionals should get the paid version without limitations.

Disadvantages

Requires more technical knowledge and expertise to achieve fine-grained image results.
Paid versions run out of credit.

6. How to Choose the Best AI Generator Model

When choosing which AI generator is the best for your work, it comes down to your individual preferences and needs. You should consider factors like what type of images you want to create, how much control you want to have over customization, your budget, and your comfort level in using the technology.

For beginners: Midjourney shines with the Discord interface and minimal customization, making it a gentle dip into the AI art pool. Stable Diffusion, while offering deeper control, demands steeper technical learning to obtain finer results.

Cost considerations: Midjourney starts with a paid subscription, while Stable Diffusion boasts a free downloadable version. However, the premium features on both platforms come with additional costs.

Copyright quandaries: Both platforms have evolving copyright guidelines. Midjourney retains commercial rights, while Stable Diffusion allows personal and non-commercial use with proper attribution.

Exploring the depths: Midjourney excels at generating unique, dreamlike compositions, while Stable Diffusion offers precise control over existing images with tools like inpainting and outpainting.

The ultimate test: Consider your needs. Do you value ease and quick bursts of inspiration? Midjourney might be your muse. Do you crave meticulous control and endless tinkering? Stable Diffusion awaits your sculpting touch.

Ultimately, the best AI tool is the one that sparks your creative fire. So dive in, experiment with both, and let your digital dreams take flight!

Learn More About AI Image Generation

Would you like to learn more about Midjourney, Stable Diffusion, and alternative AI image generators? Check out these articles from Envato Tuts+:

10+ Best AI Photo Generators to Make Stock Images Fast in 2025

2023-07-12T10:34:06+00:00

AI generated images seem to be the thing on everyone’s lips at the moment, whether that’s discussing if AI generated visuals can really be ‘photography,’ or how realistic they are. What isn’t in doubt, is how powerful AI stock photos can be when it comes to specific purposes like graphic design, marketing, content creation, and of course, stock photography. In this article, we look at the 10 best AI photo generators to make stock images fast in 2024.

10+ Best AI Image Generators to Make Stock Images Fast in 2025

1. Midjourney

Midjourney has definitely been one of the most talked about AI picture generators. Currently in open beta, users type in a prompt that returns a set of four images. Each of those can then either be upscaled or used as a base to create further, similar images.

Quick Look

Pricing

The pricing here based on paying for a year (with a 20% discount)

Tier	Cost and What you get
Free	No longer exists unfortunately, aside from the occasional promotion.
Basic	$96 – 3.3 hours per month, 3 jobs at once, 10 jobs waiting in the queue.
Standard	$288 – as above but with 15 hours per month and unlimited relax GPU time.
Pro	$576 – as above but with 30 hours per month, 12 fast jobs, and 3 relaxed jobs, and the addition of ‘stealth’ mode.
Mega	$1152 – as above but with 60 hours per month.

Pros and Cons

Pros	It’s very good and getting better with every release, the results are high quality and realistic.
Cons	Currently only available through Discord, no longer any free use.

2. Adobe Express AI Image Generator

Adobe Express AI Image Generator is a powerful tool designed for creating stock-quality images with ease. Part of the Adobe family, this generator is seamlessly integrated into Adobe Express, making it ideal for professionals and beginners alike.

Quick Look

Pricing

Adobe Express AI Image Generator is available as part of Adobe Express plans, starting at $9.99 per month.

Tier	Cost and What you get
Free	Limited access to basic tools, perfect for experimenting with the platform.
Premium	$9.99/month – Includes full access to the AI Image Generator, unlimited downloads, and advanced customization options.

Pros and Cons

Pros	Easy to use, even for beginners. Integration with the Adobe Creative Suite for enhanced functionality. Fast and reliable, with professional-quality results.
Cons	Advanced features are only available with a subscription. Limited free tier access.

3. NVIDIA Canvas

NVIDIA Canvas doesn’t use text prompts. Instead, you paint rough shapes and lines onto a canvas, and the AI generator will fill the screen with realistic interpretations. You can swap out different elements and customise your image with a variety of styles and options available.

Quick Look

Pricing

Tier	Cost and What you get
Free	It’s free! You get everything, but you do need certain things to run it (see ‘cons’).

Pros and Cons

Pros	It’s free and the results look great, you can use pre-designed elements and some very rudimentary artistic skills to get a pretty decent landscape.
Cons	It requires RTX Tensor Cores to function and is supported on GeForce RTX and NVIDIA RTX GPU, it’s not designed to create photographs of people, so its uses are limited.

4. RunwayML

RunwayML is a platform that provides a range of AI models, including AI generated images. It generates high-quality images via text prompts that you can then customise and ‘generate’ from 1 image up to a batch of 500, making it a powerful tool for creating stock images.

Quick Look

Pricing

Tier	Cost and What you get
Basic	Free forever, though that’s a slight misnomer given you can’t buy any more credits once your 125 freebies are gone. It also includes watermarks on your images and you can’t upscale.
Standard	$12 / month. More of everything, basically. You can buy credits, remove watermarks, and have up to 5 users, plus there are extra export options.
Pro	$28 / month. As above, but with full access to everything and up to 10 users.
Enterprise	Contact for a quote. Lots of ‘custom’ options which aren’t listed on the site.

Pros and Cons

Pros	Versatile – you get more than just an AI image generator. High quality, realistic images. Easy to use.
Cons	The free tier is limited and then it gets quite pricey. Although realistic in style, the photos themselves have been described as ‘surreal’ which may make them unsuitable for many stock image requirements.

5. Artbreeder

Artbreeder is an AI picture generator that lets you blend and evolve existing images into new artworks.

Quick Look

Pricing

You can save 20% on the cost if you are billed yearly.

Tier	Cost and What you get
Free	10 credits per month – no extras.
Starter	$8.99 – 100 credits per month and syncs with Google Drive and gives you privacy controls plus custom genes.
Advanced	$18.99/month – as above with 275 credits per month.
Champion	$38.99/month – as above but with 700 credits per month.

Pros and Cons

Pros	A fairly unique way of creating stock images. Wide range of styles to experiment with.
Cons	No privacy controls on the free tier – eek! Results are… unpredictable.

6. DALL-E

Now in its second full release, Dall-E 2 creates images from a written prompt. Dall-E boasts that its images are original and realistic.

Quick Look

Pricing

The pricing for Dall-E AI picture generator is complicated. Here’s their summary:

“Multiple models, each with different capabilities and price points. Prices are per 1,000 tokens. You can think of tokens as pieces of words, where 1,000 tokens is about 750 words. This paragraph is 35 tokens.”

Pros and Cons

Pros	Unique images. Good for stock images that need unusual prompts or unconventional ideas.
Cons	Complicated pricing. You need to get good at prompt writing to have usable results.

7. DreamStudio

DreamStudio boasts ‘effortless image generation for creators with big dreams’. As well as creating images from written prompts, you can expand, add and remove items from them too.

Quick Look

Pricing

DreamStudio works on a credit only system.

Tier	Cost and What you get
Free	You get 25 credits for creating an account, which is 30 images at the default setting and 50 images with the API’s default setting.
Credits	A minimum purchase of 1000 credits for $10 is required.

Pros and Cons

Pros	Credits don’t expire. Style choices are wide and include photo-realistic images.
Cons	It’s still in development so there might be some teething issues using it.

FREE

12 Minutes

How to Write Code With ChatGPT

AI is revolutionizing the way developers write code. Learn how to write code with ChatGPT in this step-by-step tutorial.

8. Dream by Wombo

Dream is a pretty simple prompt-based AI image generator, so a good start for beginners. You can make one image at a time using some references images to indicate preferred style – these are limited unless you pay.

Quick Look

Pricing

Tier	Cost and What you get
Free	Get started for free with limited options. Good for practising prompts.
Premium (subscription)	$9.99/m or $89.99 per year. Full access.
Lifetime (one off payment)	$169.99. Full access.

Pros and Cons

Pros	You can play around for free to get used to it. A lifetime license is unusual – could be great if the software improves.
Cons	The results aren’t brilliant and they take a little while to generate. Free users are limited in which styles they can create.

9. Deep Dream Generator

This AI photo generator works in a number of styles, including photo-realistic images. You need to create an account to even try Deep Dream, but you can see some examples on their home page.

Quick Look

Pricing

Deep Dream call their pricing, ‘energy...’ credits, essentially. You can save 25% with yearly billing. You can also purchase ‘energy packs’ as needed.

Tier	Cost and What you get
Advanced	$19/m - 120 energy, 12 recharging an hour, 20 GB storage, Full HD
Professional	$39/m – 250 energy, 18 recharging an hour, 50 GB storage, Quad HD+
Ultra	$99/m – 750 energy, 60 recharging an hour, 200 GB storage, Quad HD+

Pros and Cons

Pros	The AI generated images in art styles aren’t bad.
Cons	The pointless jargon of energy and recharging is enough to put you off. The pricing tiers are steep considering it doesn’t offer much more than similar competitors. It’s photograph style needs improvement.

10. Generated Photos

Generated Images lets you browse existing images or generate your own AI stock image. This site focuses on people, and you can start with a random face or build your own from scratch.

Quick Look

Pricing

Tier	Cost and What you get
Free	A 3-day trial
Monthly	$19.99 – unlimited generations, 15 hi-res downloads per month, 1024px x 1024px JPEG or PNG.
Yearly	$199 ($16.58/m) – as above

Pros and Cons

Pros	Simple pricing structure. If you have the patience you can build something very realistic. Wide range of existing AI generated images.
Cons	It’s mostly focused on people/models. Very limited trial period. Specific licensing terms for certain things, so you need to read them carefully before you use.

11. Canva AI

Canva is already a one-stop-shop for many people when it comes to creating social media posts, marketing images and much more… and now, it has AI generated images too! Canva’s AI integrates with its other tools, so you can create AI images from pre-sized templates.

Quick Look

Pricing

Tier	Cost and What you get
Free	Right now it’s totally free, though they limited their writing AI eventually, unless you subscribed. I wouldn’t be surprised if that happened here too.

Pros and Cons

Pros	It’s free. You don’t need much in the way of skill to use it. Intuitive interface.
Cons	The results are fairly poor if you’re looking for photo-realism.

Summary – Which is the best AI image generator

There are a lot of very similar offerings when it comes to AI Generated Images, so it makes choosing the best AI image generator a bit tricky.

Realism

If realistic results are important to you then it’s probably going to come with a price tag. Midjourney and DALL-E are renowned for getting realistic images with text prompts, so they’re a good place to start.

For art and landscapes most AI image generators aren’t doing too badly. People are more difficult, so try Generated Photos.

Cost

Cost gets complicated. It’s wise to try something with a free trial so that you can see if you like it first. I won’t tell you that Dream by Wombo has incredible results, but if you’re new to AI picture generating then it’s good practice for prompt writing and seeing what results you get, particularly now that Midjourney doesn’t have a free option. DreamStudio has some free credits too and then offers a PAYG system which you might find more appealing than subscription.

If you already use Canva, then Canva AI is a no-brainer, like Dream by Wombo it’s a good place to practice prompts and get familiar with styles.

Avoiding Prompts

If prompt writing isn’t your thing and you’ve an artistic flair, it might be worth trying the drawing based AI generators, like NVIDIA Canvas, where you can add and remove elements by sketching in simple shapes.

Best AI photo generators to make stock images fast in 2025

AI picture generators are becoming very, very good and already we can see several powerful tools coming to the forefront, like Midjourney and DALL-E.

They offer a wide variety of artistic styles, and many of them are getting the hang of photo-realism too. There are still limitations, though.

Price is a huge factor – right now, subscribing to a decent AI photo generator will cost you quite a lot per month, which means if you’re looking for volume, it’s probably not there for you yet.

If however, you’re looking for something to use now and again for specific projects, particularly ones that require something more artistic or unusual, then you may find them a good place to go for stock photo creation.

Remember to review licensing terms carefully so that you don’t fall foul of any copyright laws or usage rights.

We should remember that AI photo generators are incredible assets that are designed to complement our creativity, rather than replace it.

Envato

Walking alone in the highlands via Envato Elements

If AI picture generators isn’t quite where you want to be yet, don’t worry, we haven’t abandoned traditional stock photography. You can find non AI generated images – or stock photographs(!) as we like to call them. at Envato, and the best bit is you can download as many as you like with your subscription.

About this page

This page was written by Marie Gardiner. Marie is a writer, author, and photographer. It was edited by Gonzalo Angulo. Gonzalo is an editor, writer and illustrator.

The best AI image generators of 2025

2024-02-15T12:12:30+00:00

Here, creative people can find our edit of the best AI image generators of 2025, from Midjourney to ImageGen, as well as tips for using AI design apps like Adobe Firefly or an image generator from photo to integrate imagery into your own designs.

Tap into the top 2025 AI design trends with these AI tools for graphic design, photography, and advanced image editing, and see your projects come to life!

You can create images like this using Envato's ImageGen.

The best AI image generators in 2025

Envato ImageGen	Best for social media content, trending styles, and the leading models available!
Chat GPT (GPT-4o)	Best for photorealism and conversational editing.
Adobe Firefly	Best for photography and project integration.
Midjourney	Best for artistic, atmospheric imagery.
DALL·E 3	Best for cartoons and nuanced prompts.
Flux 1.1 Pro Ultra	Best for high-definition portraits.
Recraft	Best for graphic designs and vector images.
Stable Diffusion	Best for uninterrupted creativity.
Reve	Best for fast generation and high detail.
Ideogram	Best for clear text and commercial imagery.

What is an AI image generator?

First, back to basics—maybe you’ve used an AI image generator before and are curious about what else is out there, or perhaps you’re fresh to the AI app scene. Either way, AI image generators are fast becoming an essential tool in a creative’s kit to visualize ideas and experiment with different styles and layouts. And with the advances in the technology, it's now possible to use AI art generators to create unique work as part of a creative project.

How do AI image generators work?

And yup... human hands are still a sore point for almost all the image generators we tried. So we'll keep you posted on that one!

Image created with Envato's ImageGen.

What are the best AI design apps?

Which AI tool is best for graphic design?

For creating logos, typography, and icons, online AI app Ideogram allows graphic designers to pull multiple elements together into a cohesive layout for posters, flyers, or banners.

Recraft places an emphasis on AI images that have an editorial, polished feel, making it a great fit for advertising work or branded campaigns.

Which AI tool is best for... just having fun?

Which AI tool is best for photography?

Which AI tool is best for advanced creative work?

For more recommended AI design apps, read on to discover our overview of some of the best AI image generators for graphic design and other creative projects in 2025.

The best AI image generators of 2025: 10 apps to use now

Looking for the best AI for graphic design projects? Or something a little more cheap and cheerful? These are our top picks for 2025, with recommended use and price details.

1. Envato ImageGen

At a glance:

Quick and intuitive to use.
Always adding the latest cutting edge tech (the best models—like Imagen 4!)
Tap into trends and make images more precise with built-in AI prompt enhancement.
Continue editing and fine tuning images with ImageEdit.
Turn static images into videos with VideoGen.

Envato's AI tools also have the added benefit of image editing via their ImageEdit tools. You can customise your images even further to get the creation for your project.

You can also find a full suite of complementary creative AI tools to pair with ImageGen, so you can generate videos from static images or refine images further with background removal, erasure, and upscaling.

Best for: Achieving trending image styles, social media content creation, enhanced AI prompts.

2. ChatGPT

At a glance:

Great for photorealistic images.
Understands sophisticated, precise prompts.
Edit images with the app conversation-style.

Best for: Photorealism, sophisticated prompts, conversational refinement.

Price: Free for all users, with a limit of three images per day. Plus ($20 per month) or Pro ($200 per month) users can generate unlimited images.

3. Adobe Firefly

At a glance:

Perfect for photographers looking to enhance their own photos.
Best for integrating into your own project workflow.
Benefit from cool features like Generative Fill.

Creative studios love Firefly for its advanced image-editing features and seamless user experience, making it feel like a part of your creative team rather than a standalone AI design app.

Best for: Advanced photo editing, cool additional features like Generative Fill, integration of imagery into existing projects.

4. Midjourney

At a glance:

Create highly artistic images.
High level of realism.
Adjust images easily with editing features.

Best for: Artistic results, atmospheric images, realism.

Price: Start generating 25 images for free. After that, a Basic plan starts from $10 per month (or $8 if paid annually).

5. DALL-E 3

At a glance:

Perfect for creating fun, cartoon-style, and surrealist imagery.
Less suited to photorealism.
Understands nuanced text prompts for greater precision.

Improving on its earlier iteration, DALL·E 2, DALL·E 3 is able to better understand complex text descriptions and create more specific images as a result.

Best for: Cartoons and comics, nuanced and accurate prompts, atmospheric imagery.

Price: Available through ChatGPT Plus for $20 a month, or use for free via Bing Image Creator.

6. Flux 1.1 Pro Ultra

At a glance:

Generate "look twice" highly photorealistic images.
Export images in high detail and high definition.
Requires patience and experimentation for best results.

Best for: Ultra-photorealistic images, human portraits, high-definition 4K images.

Price: Try Flux 1.1. Pro for free as part of a trial, or create more at $0.06 per image.

7. Recraft

At a glance:

Great for graphic designers, product designers, and branding.
Generate polished, commercial imagery.
Combine typography and mockup imagery seamlessly.

Best for: Graphic design, vector graphics, product mockups.

Price: Try the app for free, or upgrade to a Basic plan for $12 a month (or $10 paid annually).

8. Stable Diffusion

At a glance:

Uncensored content gives complete creative flexibility.
Mimics the creative process most accurately out of all the apps we tested.
Free for most individuals, for commercial and personal use.

Best for: Uninterrupted creativity, flexible editing, artistic results.

Price: Free for most users, with larger organizations required to purchase a licence.

9. Reve

At a glance:

Ultra-speedy image generation.
High-quality, detailed results.
Experiment with a wide range of styles.

Best for: Fast image generation, high-quality and detailed imagery, precise text prompts.

Price: Free for all users.

10. Ideogram

At a glance:

Renders text accurately from prompts.
Generate commercial-style imagery.
The best of both worlds with graphic and photo integration.

Best for: Clear text on images, branded graphics, commercial imagery.

Price: Start for free, or begin at $7 a month paid annually for more credits and faster generation speeds.

1	<div id="animationWidget" >
2	<canvas width="368" height="208" id="mainCanvas" ></canvas>
3	<video width="184" height="104" id="video" autobuffer="autobuffer" controls="controls" poster="poster.jpg" >
4	<source src="sintel.mp4" type="video/mp4" ></source>
5	<source src="sintel.webm" type="video/webm" ></source>
6	</video>
7	</div>

1
2	#animationWidget{
3	border:1px #222 solid;
4	position:relative;
5	width: 570px;
6	height: 220px;
7	}
8	#animationWidget canvas{
9	border:1px #222 solid;
10	position:absolute;
11	top:5px;
12	left:5px;
13	}
14	#animationWidget video{
15	position:absolute;
16	top:110px;
17	left:380px;
18	}

1	(function(){
2	if( !document.createElement("canvas").getContext ){ return; } //the canvas tag isn't supported
3
4	var mainCanvas = document.getElementById("mainCanvas"); // points to the HTML canvas element above
5	var mainContext = mainCanvas.getContext('2d'); //the drawing context of the canvas element
6	var video = document.getElementById("video"); // points to the HTML video element
7	var frameDuration = 33; // the animation's speed in milliseconds
8	video.addEventListener( 'play', init ); // The init() function is called whenever the user presses play & the video starts/continues playing
9	video.addEventListener( 'ended', function(){ drawStats(true); } ); //drawStats() is called one last time when the video end, to sum up all the statistics
10
11	var videoSamples; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used to create the 'film reel'
12	var backgrounds; // this is an array of images, used to store all the snapshots of the playing video taken over time. These images are used as the canvas background
13	var blade; //An canvas element to store the image copied from blade.png
14	var bladeSrc = 'blade.png'; //path to the blade's image source file
15
16	var lastPaintCount = 0; // stores the last value of mozPaintCount sampled
17	var paintCountLog = []; // an array containing all measured values of mozPaintCount over time
18	var speedLog = []; // an array containing all the execution speeds of main(), measured in milliseconds
19	var fpsLog = []; // an array containing the calculated frames per secong (fps) of the script, measured by counting the calls made to main() per second
20	var frameCount = 0; // counts the number of times main() is executed per second.
21	var frameStartTime = 0; // the last time main() was called
22
23	// Called when the video starts playing. Sets up all the javascript objects required to generate the canvas animation and measure perfomance
24	function init(){
25	if( video.currentTime > 1 ){ return; }
26
27	bladeSrc = new Image();
28	bladeSrc.src = "blade.png";
29	bladeSrc.onload = setBlade;
30
31	backgrounds = [];
32	videoSamples = [];
33	fpsLog = [];
34	paintCountLog = [];
35	if( window.mozPaintCount ){ lastPaintCount = window.mozPaintCount; }
36	speedLog = [];
37	frameCount = 0;
38	frameStartTime = 0;
39	main();
40	setTimeout( getStats, 1000 );
41	}
42
43	// As the scripts main function, it controls the pace of the animation
44	function main(){
45	setTimeout( main, frameDuration );
46	if( video.paused \|\| video.ended ){ return; }
47
48	var now = new Date().getTime();
49	if( frameStartTime ){
50	speedLog.push( now - frameStartTime );
51	}
52	frameStartTime = now;
53	if( video.readyState < 2 ){ return; }
54
55	frameCount++;
56	mainCanvas.width = mainCanvas.width; //clear the canvas
57	drawBackground();
58	drawFilm();
59	drawDescription();
60	drawStats();
61	drawBlade();
62	drawTitle();
63	}
64
65	// This function is called every second, and it calculates and stores the current frame rate
66	function getStats(){
67	if( video.readyState >= 2 ){
68	if( window.mozPaintCount ){ //this property is specific to firefox, and tracks how many times the browser has rendered the window since the document was loaded
69	paintCountLog.push( window.mozPaintCount - lastPaintCount );
70	lastPaintCount = window.mozPaintCount;
71	}
72
73	fpsLog.push(frameCount);
74	frameCount = 0;
75	}
76	setTimeout( getStats, 1000 );
77	}
78
79	// create blade, the ofscreen canavs that will contain the spining animation of the image copied from blade.png
80	function setBlade(){
81	blade = document.createElement("canvas");
82	blade.width = 400;
83	blade.height = 400;
84	blade.angle = 0;
85	blade.x = -blade.height * 0.5;
86	blade.y = mainCanvas.height/2 - blade.height/2;
87	}
88
89	// Creates and returns a new image that contains a snapshot of the currently playing video.
90	function sampleVideo(){
91	var newCanvas = document.createElement("canvas");
92	newCanvas.width = video.width;
93	newCanvas.height = video.height;
94	newCanvas.getContext("2d").drawImage( video, 0, 0, video.width, video.height );
95	return newCanvas;
96	}
97
98	// renders the dark background for the whole canvas element. The background features a greyscale sample of the video and a gradient overlay
99	function drawBackground(){
100	var newCanvas = document.createElement("canvas");
101	var newContext = newCanvas.getContext("2d");
102	newCanvas.width = mainCanvas.width;
103	newCanvas.height = mainCanvas.height;
104	newContext.drawImage( video, 0, video.height * 0.1, video.width, video.height * 0.5, 0, 0, mainCanvas.width, mainCanvas.height );
105
106	var imageData, data;
107	try{
108	imageData = newContext.getImageData( 0, 0, mainCanvas.width, mainCanvas.height );
109	data = imageData.data;
110	} catch(error){ // CORS error (eg when viewed from a local file). Create a solid fill background instead
111	newContext.fillStyle = "yellow";
112	newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
113	imageData = mainContext.createImageData( mainCanvas.width, mainCanvas.height );
114	data = imageData.data;
115	}
116
117	//loop through each pixel, turning its color into a shade of grey
118	for( var i = 0; i < data.length; i += 4 ){
119	var red = data[i];
120	var green = data[i + 1];
121	var blue = data[i + 2];
122	var grey = Math.max( red, green, blue );
123
124	data[i] = grey;
125	data[i+1] = grey;
126	data[i+2] = grey;
127	}
128	newContext.putImageData( imageData, 0, 0 );
129
130	//add the gradient overlay
131	var gradient = newContext.createLinearGradient( mainCanvas.width/2, 0, mainCanvas.width/2, mainCanvas.height );
132	gradient.addColorStop( 0, '#000' );
133	gradient.addColorStop( 0.2, '#000' );
134	gradient.addColorStop( 1, "rgba(0,0,0,0.5)" );
135	newContext.fillStyle = gradient;
136	newContext.fillRect( 0, 0, mainCanvas.width, mainCanvas.height );
137
138	mainContext.save();
139	mainContext.drawImage( newCanvas, 0, 0, mainCanvas.width, mainCanvas.height );
140
141	mainContext.restore();
142	}
143
144	// renders the 'film reel' animation that scrolls across the canvas
145	function drawFilm(){
146	var sampleWidth = 116; // the width of a sampled video frame, when painted on the canvas as part of a 'film reel'
147	var sampleHeight = 80; // the height of a sampled video frame, when painted on the canvas as part of a 'film reel'
148	var filmSpeed = 20; // determines how fast the 'film reel' scrolls across the generated canvas animation.
149	var filmTop = 120; //the y co-ordinate of the 'film reel' animation
150	var filmAngle = -10 * Math.PI / 180; //the slant of the 'film reel'
151	var filmRight = ( videoSamples.length > 0 )? videoSamples[0].x + videoSamples.length * sampleWidth : mainCanvas.width; //the right edge of the 'film reel' in pixels, relative to the canvas
152
153	//here, we check if the first frame of the 'film reel' has scrolled out of view
154	if( videoSamples.length > 0 ){
155	var bottomLeftX = videoSamples[0].x + sampleWidth;
156	var bottomLeftY = filmTop + sampleHeight;
157	bottomLeftX = Math.floor( Math.cos(filmAngle) * bottomLeftX - Math.sin(filmAngle) * bottomLeftY ); // the final display position after rotation
158
159	if( bottomLeftX < 0 ){ //the frame is offscreen, remove it's refference from the film array
160	videoSamples.shift();
161	}
162	}
163
164	// add new frames to the reel as required
165	while( filmRight <= mainCanvas.width ){
166	var newFrame = {};
167	newFrame.x = filmRight;
168	newFrame.canvas = sampleVideo();
169	videoSamples.push(newFrame);
170	filmRight += sampleWidth;
171	}
172
173	// create the gradient fill for the reel
174	var gradient = mainContext.createLinearGradient( 0, 0, mainCanvas.width, mainCanvas.height );
175	gradient.addColorStop( 0, '#0D0D0D' );
176	gradient.addColorStop( 0.25, '#300A02' );
177	gradient.addColorStop( 0.5, '#AF5A00' );
178	gradient.addColorStop( 0.75, '#300A02' );
179	gradient.addColorStop( 1, '#0D0D0D' );
180
181	mainContext.save();
182	mainContext.globalAlpha = 0.9;
183	mainContext.fillStyle = gradient;
184	mainContext.rotate(filmAngle);
185
186	// loops through all items of film array, using the stored co-ordinate values of each to draw part of the 'film reel'
187	for( var i in videoSamples ){
188	var sample = videoSamples[i];
189	var punchX, punchY, punchWidth = 4, punchHeight = 6, punchInterval = 11.5;
190
191	//draws the main rectangular box of the sample
192	mainContext.beginPath();
193	mainContext.moveTo( sample.x, filmTop );
194	mainContext.lineTo( sample.x + sampleWidth, filmTop );
195	mainContext.lineTo( sample.x + sampleWidth, filmTop + sampleHeight );
196	mainContext.lineTo( sample.x, filmTop + sampleHeight );
197	mainContext.closePath();
198
199	//adds the small holes lining the top and bottom edges of the 'fim reel'
200	for( var j = 0; j < 10; j++ ){
201	punchX = sample.x + ( j * punchInterval ) + 5;
202	punchY = filmTop + 4;
203	mainContext.moveTo( punchX, punchY + punchHeight );
204	mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
205	mainContext.lineTo( punchX + punchWidth, punchY );
206	mainContext.lineTo( punchX, punchY );
207	mainContext.closePath();
208	punchX = sample.x + ( j * punchInterval ) + 5;
209	punchY = filmTop + 70;
210	mainContext.moveTo( punchX, punchY + punchHeight );
211	mainContext.lineTo( punchX + punchWidth, punchY + punchHeight );
212	mainContext.lineTo( punchX + punchWidth, punchY );
213	mainContext.lineTo( punchX, punchY );
214	mainContext.closePath();
215	}
216	mainContext.fill();
217	}
218
219	//loop through all items of videoSamples array, update the x co-ordinate values of each item, and draw its stored image onto the canvas
220	mainContext.globalCompositeOperation = 'lighter';
221	for( var i in videoSamples ){
222	var sample = videoSamples[i];
223	sample.x -= filmSpeed;
224	mainContext.drawImage( sample.canvas, sample.x + 5, filmTop + 10, 110, 62 );
225	}
226
227	mainContext.restore();
228	}
229
230	// renders the canvas title
231	function drawTitle(){
232	mainContext.save();
233	mainContext.fillStyle = 'black';
234	mainContext.fillRect( 0, 0, 368, 25 );
235	mainContext.fillStyle = 'white';
236	mainContext.font = "bold 21px Georgia";
237	mainContext.fillText( "SINTEL", 10, 20 );
238	mainContext.restore();
239	}
240
241	// renders all the text appearing at the top left corner of the canvas
242	function drawDescription(){
243	var text = []; //stores all text items, to be displayed over time. the video is 60 seconds, and each will be visible for 10 seconds.
244	text[0] = "Sintel is an independently produced short film, initiated by the Blender Foundation.";
245	text[1] = "For over a year an international team of 3D animators and artists worked in the studio of the Amsterdam Blender Institute on the computer-animated short 'Sintel'.";
246	text[2] = "It is an epic short film that takes place in a fantasy world, where a girl befriends a baby dragon.";
247	text[3] = "After the little dragon is taken from her violently, she undertakes a long journey that leads her to a dramatic confrontation.";
248	text[4] = "The script was inspired by a number of story suggestions by Martin Lodewijk around a Cinderella character (Cinder in Dutch is 'Sintel'). ";
249	text[5] = "Screenwriter Esther Wouda then worked with director Colin Levy to create a script with multiple layers, with strong characterization and dramatic impact as central goals.";
250	text = text[Math.floor( video.currentTime / 10 )]; //use the videos current time to determine which text item to display.
251
252	mainContext.save();
253	var alpha = 1 - ( video.currentTime % 10 ) / 10;
254	mainContext.globalAlpha = ( alpha < 5 )? alpha : 1;
255	mainContext.fillStyle = '#fff';
256	mainContext.font = "normal 12px Georgia";
257
258	//break the text up into several lines as required, and write each line on the canvas
259	text = text.split(' ');
260	var colWidth = mainCanvas.width * .75;
261	var line = '';
262	var y = 40;
263	for(var i in text ){
264	line += text[i] + ' ';
265	if( mainContext.measureText(line).width > colWidth ){
266	mainContext.fillText( line, 10, y );
267	line = '';
268	y += 12;
269	}
270	}
271	mainContext.fillText( line, 10, y );
272
273	mainContext.restore();
274	}
275
276	//updates the bottom-right potion of the canvas with the latest perfomance statistics
277	function drawStats( average ){
278	var x = 245.5, y = 130.5, graphScale = 0.25;
279
280	mainContext.save();
281	mainContext.font = "normal 10px monospace";
282	mainContext.textAlign = 'left';
283	mainContext.textBaseLine = 'top';
284	mainContext.fillStyle = 'black';
285	mainContext.fillRect( x, y, 120, 75 );
286
287	//draw the x and y axis lines of the graph
288	y += 30;
289	x += 10;
290	mainContext.beginPath();
291	mainContext.strokeStyle = '#888';
292	mainContext.lineWidth = 1.5;
293	mainContext.moveTo( x, y );
294	mainContext.lineTo( x + 100, y );
295	mainContext.stroke();
296	mainContext.moveTo( x, y );
297	mainContext.lineTo( x, y - 25 );
298	mainContext.stroke();
299
300	// draw the last 50 speedLog entries on the graph
301	mainContext.strokeStyle = '#00ffff';
302	mainContext.fillStyle = '#00ffff';
303	mainContext.lineWidth = 0.3;
304	var imax = speedLog.length;
305	var i = ( speedLog.length > 50 )? speedLog.length - 50 : 0
306	mainContext.beginPath();
307	for( var j = 0; i < imax; i++, j += 2 ){
308	mainContext.moveTo( x + j, y );
309	mainContext.lineTo( x + j, y - speedLog[i] * graphScale );
310	mainContext.stroke();
311	}
312
313	// the red line, marking the desired maximum rendering time
314	mainContext.beginPath();
315	mainContext.strokeStyle = '#FF0000';
316	mainContext.lineWidth = 1;
317	var target = y - frameDuration * graphScale;
318	mainContext.moveTo( x, target );
319	mainContext.lineTo( x + 100, target );
320	mainContext.stroke();
321
322	// current/average speedLog items
323	y += 12;
324	if( average ){
325	var speed = 0;
326	for( i in speedLog ){ speed += speedLog[i]; }
327	speed = Math.floor( speed / speedLog.length * 10) / 10;
328	}else {
329	speed = speedLog[speedLog.length-1];
330	}
331	mainContext.fillText( 'Render Time: ' + speed, x, y );
332
333	// canvas fps
334	mainContext.fillStyle = '#00ff00';
335	y += 12;
336	if( average ){
337	fps = 0;
338	for( i in fpsLog ){ fps += fpsLog[i]; }
339	fps = Math.floor( fps / fpsLog.length * 10) / 10;
340	}else {
341	fps = fpsLog[fpsLog.length-1];
342	}
343	mainContext.fillText( ' Canvas FPS: ' + fps, x, y );
344
345	// browser frames per second (fps), using window.mozPaintCount (firefox only)
346	if( window.mozPaintCount ){
347	y += 12;
348	if( average ){
349	fps = 0;
350	for( i in paintCountLog ){ fps += paintCountLog[i]; }
351	fps = Math.floor( fps / paintCountLog.length * 10) / 10;
352	}else {
353	fps = paintCountLog[paintCountLog.length-1];
354	}
355	mainContext.fillText( 'Browser FPS: ' + fps, x, y );
356	}
357
358	mainContext.restore();
359	}
360
361	//draw the spining blade that appears in the begining of the animation
362	function drawBlade(){
363	if( !blade \|\| blade.x > mainCanvas.width ){ return; }
364	blade.x += 2.5;
365	blade.angle = ( blade.angle - 45 ) % 360;
366
367	//update blade, an ofscreen canvas containing the blade's image
368	var angle = blade.angle * Math.PI / 180;
369	var bladeContext = blade.getContext('2d');
370	blade.width = blade.width; //clear the canvas
371	bladeContext.save();
372	bladeContext.translate( 200, 200 );
373	bladeContext.rotate(angle);
374	bladeContext.drawImage( bladeSrc, -bladeSrc.width/2, -bladeSrc.height/2 );
375	bladeContext.restore();
376
377	mainContext.save();
378	mainContext.globalAlpha = 0.95;
379	mainContext.drawImage( blade, blade.x, blade.y + Math.sin(angle) * 50 );
380	mainContext.restore();
381	}
382	})();

1
2	var frameDuration = 33; // set the animation's target speed in milliseconds
3	function main(){
4	if( video.paused \|\| video.ended ){ return false; }
5	setTimeout( main, frameDuration );

1	var lastPaintCount = window.mozPaintCount;
2	setInterval( function(){
3	console.log( window.mozPaintCount - lastPaintCount );
4	lastPaintCount = window.mozPaintCount;
5	}, 1000);

1	requestAnimationFrame = window.requestAnimationFrame \|\|
2	window.mozRequestAnimationFrame \|\|
3	window.webkitRequestAnimationFrame \|\|
4	window.msRequestAnimationFrame \|\|
5	setTimeout;

1
2	// Adjusts the program behavior, based on whether the webpage is active or hidden
3	function onVisibilityChange() {
4	if( document.hidden && !video.paused ){
5	video.pause();
6	}else if( video.paused ){
7	video.play();
8	}
9	}

1
2	mainContext.beginPath();
3	for( var j = 0; i < imax; i++, j += 2 ){
4	mainContext.moveTo( x + j, y ); // define the subpaths starting point
5	mainContext.lineTo( x + j, y - speedLog[i] * graphScale ); // set the subpath as a line, and define its endpoint
6	mainContext.stroke(); // draw the subpath to the canvas
7	}

1
2	var mainCanvas = document.getElementById("mainCanvas"); // points to the on-screen, original HTML canvas element
3	var mainContext = mainCanvas.getContext('2d'); // the drawing context of the on-screen canvas element
4	var osCanvas = document.createElement("canvas"); // creates a new off-screen canvas element
5	var osContext = osCanvas.getContext('2d'); //the drawing context of the off-screen canvas element
6	osCanvas.width = mainCanvas.width; // match the off-screen canvas dimensions with that of #mainCanvas
7	osCanvas.height = mainCanvas.height;

1
2	// As the scripts main function, it controls the pace of the animation
3	function main(){
4	requestAnimationFrame( main, mainCanvas );
5	if( video.paused \|\| video.currentTime > 59 ){ return; }
6
7	var now = new Date().getTime();
8	if( frameStartTime ){
9	speedLog.push( now - frameStartTime );
10	}
11	frameStartTime = now;
12	if( video.readyState < 2 ){ return; }
13
14	frameCount++;
15	osCanvas.width = osCanvas.width; //clear the offscreen canvas
16	drawBackground();
17	drawFilm();
18	drawDescription();
19	drawStats();
20	drawBlade();
21	drawTitle();
22	mainContext.drawImage( osCanvas, 0, 0 ); // copy the off-screen canvas graphics to the on-screen canvas
23	}

1
2	// renders the canvas title
3	function drawTitle(){
4	if( titleCache == false ){ // create and save the title image
5	titleCache = document.createElement('canvas');
6	titleCache.width = osCanvas.width;
7	titleCache.height = 25;
8
9	var context = titleCache.getContext('2d');
10	context.fillStyle = 'black';
11	context.fillRect( 0, 0, 368, 25 );
12	context.fillStyle = 'white';
13	context.font = "bold 21px Georgia";
14	context.fillText( "SINTEL", 10, 20 );
15	}
16
17	osContext.drawImage( titleCache, 0, 0 );
18	}

1
2	if( titleCache == false ){ // If titleCache is false, the animation's title hasn't been drawn yet
3	drawTitle(); // we draw the title. This function will now be called just once, when the program starts
4	osContext.rect( 0, 25, osCanvas.width, osCanvas.height ); // this creates a path covering the area outside by the title
5	osContext.clip(); // we use the path to create a clipping region, that ignores the title's region
6	}

Envato Tuts+ Tutorials

HTML5 Canvas Optimization: A Practical Example

Step 1: Play the Movie Trailer

Step 2: View the Source

Step 3: Code Optimization: Know the Rules

The first rule of code performance optimization is: Don't.

The second rule: Don't yet.

The third rule: Don't yet, and profile first.

Step 4: Set Some Performance Metrics

Step 5: Use requestAnimationFrame()

Step 6: Use the Page Visibility API

Step 7: For Custom Shapes, Draw the Whole Path At Once

Step 8: Use an Off-Screen Canvas To Build the Scene

Step 9: Cache Paths As Bitmap Images Whenever Possible

Step 10: Clear the Canvas With clearRect()

Step 11: Implement Layers

Step 12: Update Only The Changing Areas of an Animation Scene

Step 13: Minimize Sub-Pixel Rendering

Step 14: Measure the Results

How to correct lens distortion in DaVinci Resolve Studio

What is lens distortion? (and why should I remove it?)

How to correct lens distortion in DaVinci Resolve Studio step by step

1. Add a video clip to the timeline

2. Open the Inspector panel

3. Activate the lens correction tools

4. Optional: Make adjustments for the perfect results

Learn more great tips and tricks for DaVinci Resolve

Correct lens distortion in DaVinci Resolve today

A history of animation: from hand-drawn to digital techniques

1. The early days of animation (1830s-1920s)

Pioneers and innovations

Magic lanterns and early optical devices

Émile Reynaud

Thomas Edison and W.K.L. Dickson

The silent film era

Winsor McCay

J. Stuart Blackton

James Stuart Blackton and the Vitagraph Company

2. The golden age of animation (1928-1960)

Rise of the major studios

Walt Disney

Warner Bros.

Fleischer Studios

Technological advancements

Introduction of cel animation

Use of sound in animation

Technicolor and its role in animation

3. The television era (1950s-1980s)

Shift from theaters to TV

Rise of television and its impact on animation

Hanna-Barbera Productions

Saturday morning cartoons

Animation techniques for TV

Limited animation to reduce costs

Introduction of simpler, more stylized characters

4. The advent of computer animation (1960s-1990s)

Early computer animation

Experiments with computer graphics in the 1960s and 70s

John Whitney

The digital revolution

Pixar and “Toy Story”

Development of CGI and its integration with traditional animation

DreamWorks animation

Hybrid techniques

Combination of live-action and CGI

Motion capture technology

5. The modern era of animation (1990s-present)

Diverse styles and global influence

Japanese Anime

Studio Ghibli

Rise of independent and experimental animation

Diverse animation styles

Streaming and digital platforms

Impact of streaming platforms

Conclusion

How to create ads and promos for social media on CapCut

Getting started with CapCut ads: Exploring the benefits

How to create ads and promos with CapCut, step by step

1. Launch CapCut and create a project

2. Import video footage for a promo

Step 5: Use `requestAnimationFrame()`

Step 10: Clear the Canvas With `clearRect()`