Comprehensive Guide to Working With Video in Photoshop - 3D Animations

hello and welcome to Todd's plus my name is Martin / Haney ACK in this video I'm going to show you a very interesting workflow of first of all creating a 3d object from this coin image and then turn it around in 3d and animate that rotation so we will create everything directly in photoshop and at the end we will be able to save out our animation as a gf5 format which can be used on a website so let's get started first of all I need to make a selection to be able to separate these two coins onto two separate layers and get rid of the background I will use the magic wand click on the white background shift-click a couple of times until I have everything selected then I turn this selection into a mask but because I would like to hide what I selected I'm going to hold down alt while I click on the mask icon that will invert the mask while it's going to be applied to my layer then I'm going to make a selection using the rectangle selection tool and I'm going to put this on a new layer I'm just going to go to layer new layer via cut and then I'm going to hold down alt drag that mask onto this new version and then I right click and apply the mask and also apply the mask on the other layer so now all we need to do is to rename these layers so that's going to be the tail and this is going to be the head of the coin perfect now we can also go to image trim to get rid of all transparent pixels in this document and we can save this onto my desktop I'm going to save it as coin that's it now the next thing is to create a new document so I'm going to go to file new and create a new document with these settings it can be smaller but we can always change that later when we create the final gif animation I'm just going to keep a high resolution document I'm going to click on OK so now that we have this ready we can bring in one of our images I'm going to use the head image and drag and drop it on to this new document notice that I use the tabs to drag one layer onto another document I'm going to create a smaller version of this so I using the free transform tool holding down alt and shift with sizing it and keep it in proportions so we have this here in the document and now we can use the 3d new 3d extrusion from selected layer option so that will turn this into a 3d object and if we have the object selected and move that around we can see that it's actually added a very deep extrusion which we can reduce in the properties panel so when you work with 3d objects you should have the 3d panel and properties panel open is these are the two most important ones that you need I'm just going to reduce the extrusion depth do something around this maybe I set it to 20 that looks good now what we can do is to put this object back to the center of the 3d space so clicking on the coordinates option I can choose reset coordinates and then move to ground so that's now facing us it's exactly how I would like to see it and if I have the object still selected I can hold down shift and turn it around and see that on the other side we have again the head material or texture but it's flipped so we have to fix that but first of all I'm going to check which material is which here in the 3d panel I can turn materials on and off and be able to tell which one is the one that I need so that one is definitely the head so I'm just going to rename it head then I'm going to turn the object around on the night shift again and I'm going to check which one is the back it's probably this one here the head back inflation material now if I double click on that I can rename that tail okay so we have head and tail let's have a look at again the head and tail perfect now if I select the tail I can change the diffuse material by clicking on this little drop down here and choose edit texture so once it's open I will be able to replace this image here all I need to do is to make sure I check the UV overlays so the you overly is an important option make sure you check that to be able to see where you are going to place your layers and then if I go back to my coin document and select the tail layer I can drag and drop it into this material once again I have to resize this just like we did it with the other one and I'm going to try to match it to the other document that looks good if I turn it off as below the other one which we can now delete and just keep this one the tail image and just try to fill in the UV overlay as close as possible so if I perceive this and go back to my animation or 3d document here I can see that it's in place but unfortunately it's flipped still so for that I just need to go back to the 3d panel choose tail again I'm going to diffuse and choose edit texture and make sure I flip the layer so edit transform flip horizontal save it go back and now it's fixed so if we have the coin object selected which we can actually call coin instead of call it head we can again turn it around and see now it's replaced but because we use the same texture for the head it unfortunately changed it on both sides and that's a very important thing to remember so what you need to do to make sure whenever you add a new texture is to choose new texture in case of extrusion the front and back texture will be the same so they will be linked to each other so in this case I'm going to choose new texture create a new document and I'm going to edit that document so edit the document wedeck's texture and I have to place in the other layer so the head place it in resize it make sure it matches I wanted to make sure that I show this to you because a lot of people run into the same problem and if I don't mention it then you will probably run into the same problem so it's good to know it so now I'm going to save this go back and in my coin I should have everything perfect now so if I turn this around both sides look great for the ribbing the side I'm going to again find the material so that's probably this one here the head extrusion material which I'm going to call ribbing and I am going to create a new texture for this as well or we can actually use the texture we have for it because it's not affecting the front and back of the coin so I'm going to edit the texture and for this first of all I would like to create a pattern so I'm going to make a selection turn of UV overlay and with the rectangular selection tool I change the style to fix the size and I'm going to just click on my image and then I am going to create a new layer with this selection so my layer 1 I'm going to fill this in with white so I just press common backspace because I have white as my background color and what I need is another selection which gold is going to select half of this so I just changed the width to 32 pixels and click and then align it here in my selection something like that and I press shift backspace to fill this in with 50% gray now again I command click on all control click on the thumbnail and save this as a pattern so edit define pattern and call this ribbing save and now we can actually fill in the whole layer with white and zoom back because now I'm going to double click on the layer and choose pattern overlay and choose the one we just saved and I can reduce the scale to fit to the coin itself probably something very low will be good around 20% and if I click on OK and save this material we can go back to our document and see it update there already I can again move the object around so I just select the coin and we can see how it looks the only problem now is that we need that color from the coin so I have to make sure that color is saved and I'm going to just save it with my brush tool' old click on it and save it as a swatch so I just click on swatch and call it ribbing so as the color which I'm going to use and then I am going back to the material and here what I need is to change the color of the layer so by holding down alt backspace if you have that color selected you can feel in any color to a layer quickly but now my color doesn't really show because the pattern overlay is on top of it but what I can do is to double click on the pattern overlay and change the blend mode to multiply that way I will see both the ribbing and the color of my layer so now I can save this go back and if I have my 3d object selected and using the move tool I can see it looks perfect now the only thing left to do is to probably add a bit of depth to each of these sides or simulaid apt by using bump maps so if I select the head and click on the bump option here in the properties panel and choose the same option that we have for the head which is called head diffuse then it will add that depth so let me just select my current view and I zoom a little bit closer so you can actually see what's happening there and if I show you without the bump it looks like this without the bump if I increase it it will start adding that depth and this depth is most visible when I start moving my object around because it will mainly affect it or it will be affected by the light source so it will have highlights and shadows on it based on the movements of the objects itself or the light source and I'm going to do the same thing with the other side so the tail I just select that and for the bump I use the same texture which is in this case is called head even though is the tail it didn't follow the changes so I'm just going to choose the same option there and for the ribbing again I'm just going to rotate my object and have a look at the ribbing and I select that I choose bump I can choose the head extrusion material and that will add the 3d effect also on the side I can increase or decrease it depending what I would like to achieve I'm going to increase it a bit on that so the bump I used around 10 on the sides and around 30 on the ribbing so if I turn it around now you can see how it looks so that's great and we can decide actually how to view this coin in a perspective view or in an orthographic view so we can change our camera properties when I have the current view selected I can change these options here perspective or orthographic I'm going to choose orthographic because that's the best for these kind of rotations so it won't have perspective on it at all it's like filming something from at the distance and I just want to zoom a bit closer so reducing the scale I will be able to zoom a bit closer something like that I believe it further away and I can move this down a bit something like that now if I have the object selected I can make sure that it's a we can reset it so reset coordinates and move to ground so everything is set up now in my document I have my 3d object I have my materials I have the bump map so I can now start creating the animation but before we do that let me just save this document so I'm just going to use file save as and save it on the desktop I'm going to call it coin animation animation save perfect now we can zoom a little further out because I'm going to need some more space for the timeline I can just close the other document we don't need that anymore and choose timeline and click on create video timeline so that's what we need and you will see that this layer has loads of attributes that we can animate and most of them are actually the 3d attributes so from 3d scene camera render and cross-section options we can also animate 3d lights materials and meshes and even for meshes each the mesh elements can be animated separately if you want but for now what I would like to do is to have the coin animated so I'm just going to scroll the hair down and see the image as well click on the stopwatch to start the animation by adding the first keyframe and there's a couple of limitations with 3d animation first of all that might be fixed later in an update for the Creative Cloud version of Photoshop but currently the limit is ten seconds so you have to make sure you fit your animation into that and the other thing is that whenever you rotate objects and you want to animate that rotation you have to make sure each time you rotate between two keyframes you shouldn't go above 180 degrees otherwise Photoshop will always go in the shortest and angle so it might do the rotation in another direction that you want to use so what I prefer to do is when I want to keep something in place so for the first two seconds I just move my object slightly in an angle holding down shift I'm going to move it slightly really ever so slightly or to the left something like that so I'm going to turn it that way and that automatically added a keyframe here at the bottom now the next second I would like this to rotate around and show the other side so holding down shift I rotate it around and I make sure it's not 180 degrees because otherwise then it will go the other way so I rotate it in the correct way and now I go again two seconds ahead and I start rotating continuing the same angle and that's saved onto this keyframe go to the next second and I rotate it back again holding that shift rotate it back and making sure that I don't go over 180 degrees now if I did everything properly it will turn in the same direction so it will follow the rotation so let's just check this I space to see the animation so it turns that way then it stays in place and then it will turn the same direction and if I want to loop this animation I can trim my timeline to the last keyframe and in that case if I save this out I will be able to use it as a gif animation for example and set it to loop so if I save this and if I go to file save for web that I will be able to setup all the options I need first of all I would probably change the image size because at the moment it would take ages to load so I will probably need only around 600 pixels so with these current settings with 600 pixel I have around seven megabytes file size for this gif animation which again can be reduced if I save a smaller version or if I reduce the colors in here but if you want to learn more about optimizing gif files I have a whole separate video on this topic here on tots plus so if I want to loot this animation I just choose forever and we can check how it looks in our browser if we click on preview which will show us the end result so there's a nice rotating coin created from a simple image turned into a 3d object and then animated with the timeline panel in Photoshop cc that's all I wanted to show you in this tutorial I hope you liked it and remember if you want to learn more make sure you come back and check out my other videos here on tots plus thanks a lot for your attention and see you next time

Channel: Tuts+ Design

Views: 15,694

Keywords: Photoshop, tutorial

Id: GaofeAXRjY4

Length: 17min 15sec (1035 seconds)

Published: Tue Feb 04 2014