Creating Web Media
Free download Creating Web Media. This tutorial/course is created by Chris Converse and it has been retrieved from Lynda which you can download for absolutely free. Web, Web Development and Web Graphics skills are covered in this course.
High-quality media is a must for any website. But to keep visitors happy, it has to load fast and look great. Web developers need to be able to balance quality and performance for all types, including graphics, animation, video, and audio. Creating Web Media is a weekly series that will help you create, optimize, and implement media in the most modern way possible. Follow along with Chris Converse to learn new ways to integrate bitmap and vector graphics (including SVG), audio and video, and feeds from social media and streaming video sites into your sites, using CSS, HTML, and JavaScript. Check back each Thursday for a new tip and a free exercise file.
Hi, this is Chris Converse and in this episode, we’ll assemble and style a series of frames that were exported from After Effects into a single sprite sheet graphic using Sketch. In the previous episode, we created the same graphic using Photoshop, and this technique will allow us to create a graphic that’s used in the previous episode to create a HTML5 animation. So if you’d like to follow along, download the exercise files and let’s begin by figuring out the size of the artboard that we’ll need to create inside of Sketch. Now the exercise files contain a folder of exported frames in the png format and each frame is 100 pixels wide by a 170 pixels tall and there are 30 frames.
So we’ll need a width of 3000 pixels and a height 170 pixels for an artboard. Now if we arranged the sprite sheet in a single row or column, we’ll be able to animate this easily with CSS or JavaScript. So now that we know the size of the artboard, let’s continue by creating a new file inside of Sketch and so once you have Sketch launched, let’s create a new document. With our new document created, let’s come up to the insert menu. Let’s come down and choose artboard and now inside of the canvas area, let’s click and drag to create an artboard and once you’ve created an artboard, let’s come over to the inspector panel.
For the size, let’s set the width to 3000 pixels. Hit tab, let’s set the height to 170. We’ll hit tab again. Next let’s select the artboard over in the layers panel. Let’s come up to our view menu. Then let’s come down to layout settings. In the layout settings for total width, let’s set this to 3000 pixels. Let’s hit tab, let’s set the number of columns to 30. Hit a tab again and for the gutter width, let’s set this to zero.
Hit tab one more time, this should set a column width of 100 pixels and finally for visuals, let’s come down and set this to stroke outline. Then choose okay. Now I’ll close my Sketch window back out. So now what we’re going to do is come back to the exercise files inside of the steam loop folder. Let’s grab steam_00000.png. Let’s click and drag this into the artboard. Then I’ll select it again and click and drag it and it should snap to the upper left hand corner and now that we’ve placed frame zero, let’s go back to the exercise files.
Let’s grab frame one, let’s click and drag this and let’s position this in the second position and it should snap into place and then I’ll go back to the exercise files. Let’s grab frame two, let’s drag that into place and let’s position that in the third spot and we’re going to repeat this process for all 30 frames and now before we continue, let’s come up to the file menu. Let’s save our file. On the desktop, we’ll call this spritesheet.sketch Then click save and now at this point, I’ll just fade ahead to where I’m placing the last frame, and remember, since the frame numbers started with zero, they’re going to be placing the 29th frame in the 30th spot, and so now with all 30 frames placed, I’ll extend my document open here a little bit.
Next I’ll come up to the zoom tool and hit the minus tool here to zoom out. So I can see all 30 frames. Next I’ll come over here and select the artboard. I’m going to come in here and change the background color because we’re going to tint these white and I want to be able to see all of the art work. So let’s check background color. Let’s click on the swatch. I’m going to pick sort of a muted medium green here. Press return, let’s uncheck the box that says include in export.
Now let’s come back to this stage. Going to click and drag and marquee select all of the important frames. Then in the inspector panel, let’s open up the fill. And let’s apply white to these, press return. And now with all of these frames colored white, what I want to do is duplicate all of these frames so we can make the art work a little bit stronger. So before we do that, the most efficient thing we can do is to convert all of this to assemble. This way we’re not duplicating all of the individual frames. So with all of the frames selected, let’s come up and choose create symbol.
We’ll name this steam, click okay. Now coming over here to the layers panel, let’s select the steam layer. Hit command+D, we’ll do this two times to create two copies and for the second copy, let’s come over to the inspector panel. Let’s scroll down and let’s set the opacity down to 50%. So now with that in place, let’s come back and select the artboard. Let’s double click and let’s rename this sprite sheet and then with this selected, let’s come down to the lower right hand corner.
Let’s click on make exportable, click on the plus sign. Choose the png format and now what I’m going to do is collapse the document window down a little bit so we can see the desktop and them simply come down and choose export sprite sheet. Choose the desktop, click save for web to make the file size a little bit smaller and then simply hit save and now we have a sprite sheet that’s ready to be animated. Now if you like to explore making the file size of our sprite sheet even smaller, I’d recommend watching Creating Smaller Graphics with PNG-8 and if you’ll like to see my technique for creating a seamlessly looping animation of steam in After Effects, check out Creating an Animated Sprite Sheet with After Effects.
Both courses are available here in the library and so with that, I’ll conclude this episode and as always, thanks for watching.