- View Offline
Skill Level Intermediate
- [Instructor] Welcome to Drawing Vector Graphics Laboratory. In this movie I want to go over creating Smart Objects. This is, in my opinion, one of the coolest features between working with Illustrator that allows you to create resolution independent illustrations or graphics, because it's vector-based, and also partners up with the flexibility and power of Photoshop to simplify what could be a complex project. So I first learned about Smart Objects back in 2009 when another firm contacted me who was developing an iPhone game and asked me to develop a level of the game, and I was like, yeah, that would be fun, let's go for it, send me your template that I can work from and I'll get started.
Well, what they sent me was just one single PSD file and I contact them and I go, I think you forgot an attachment or something. They said, "No, that has everything in it." And I open up the PSD file and my mind was blown. From that point forward it really made me understand the power of using Smart Objects to simplify what could be a complex workflow. So if I was hired to create an iPad game, for example, and I had to create all the assets and I didn't use Smart Objects it might look like this when I deliver a folder of all the artwork needed to pull it off.
I'd have the Background with everything needed for that, I'd have all the characters with all the pieces, Body, Eye, Mouth, so on and so forth. And you can see that all of this adds up to 50 items. Now that's a lot of assets to manage and keep track of and I think there's a better way of doing this using Smart Objects along with Photoshop to pull it off well. And by the way, I should point out that original iPhone game I've included the PSD file for the level I created in the Exercise Files, so you can check it out.
Just keep in mind it's a smaller iteration of the iPhone, so the resolution's a bit smaller screen size wise, but that will give you everything you can check that out with and it reinforces what I'm going to show you here. Now it all starts in Illustrator, I create all my assets in Illustration, so we're going to go ahead and open up Illustrator and I'll show you how I create all the assets that I'll then bring into Photoshop. So inside Illustrator I've created all the visual assets, all the graphics that animators and the developers can use to create this game.
So this game's called Big Fish, it's about a bully fish that goes around eating smaller fishes. And this is the main character here, so you can see I have all of the layers organized on primary layers. By the way, I never use sub-layers. They automatically are created, of course, when you're using Illustrator, but I never go into them. I call sub-layers the scary basement. You really don't need to go into them if you organize your primary layers. That, you'll just get lost in sub-layers.
Engineers I'm sure love it, but not so much creative people. It's just kind of overkill in my opinion. But if you organize your primary layers well you never have to manage those or go into them or deal with them. But in this case I have this character, and of course you can blink his eye, and you can control other aspects for not just him, but everything. The background, all the various characters, all the various components that make up those characters, and it's everything an animator could use and a developer can use to work out a game.
Now what I want to do is I want to take all of these into Photoshop, so when I deliver my final art to a developer, to my client, it's all one single file. I give them one PSD file, they have access to everything, including all of my vector artwork. So let's go ahead and close this and move over to Photoshop. So we're in Photoshop now and you can see, if you look at my layers in Photoshop I have the same character here, all the components that make him up are within the folder for Big Fish, so I have his eyes, his mouth and head, different iterations of his mouth and head by the way, so maybe this is his normal mode, and then when he starts to get aggressive he can open up his mouth, maybe his eye gets angry, so on and so forth.
So an animator can access any of these and animate them. Now one thing about this is all of this is vector-based still. You can see, if you look at a layer, like the Big Fish Body, it has this tagged icon on this layer of a little document, and that denotes that it's a Smart Object, that denotes that it's still vector-based. If I double-click on this it's going to open up in Illustrator, like this, and you can see, if I select it it's vector-based.
Now this allows me the flexibility to easily edit my vector art, save it, close this document, and go back to Photoshop. In this case we're not going to change anything, so I'm just going to close it and go back to Photoshop. Now I'm going to show you how I brought in all of the elements in the build file that I showed you in Illustrator and brought them into Photoshop. And the first thing we're going to do is we're going to add another character. So I'm going to click on this layer of the Puffer Fish and we want to add that character into our layers as a Smart Object, so I'm going to go to File, I'm going to go down to Place Embedded, and I'm going to select Puffer Fish, you can see him show up here, and we'll go Place.
I want to make sure under Options to check Trim. This goes off of the dimensions of the original source file we built in, so it's going to register in place when we place it into Photoshop, and I'm going to click OK. Now we'll go ahead and commit to the place by selecting Place. And now I can turn on the other layer behind it, which is a Glow. But now he doesn't have an eye. We need to give him some eyesight, so we're going to go back up to Place and this is how I import all the various aspects for all the various characters and components.
So we're going to go to Place Embedded again, and we're going to select one called Open Eye. When I click on this notice in this preview it shows you here it's everything. And this what I did for each element, I just used a copy of the build file, and in this case I'm going to go Place again, and I'm going to make sure we have Trim selected, and I'm going to go OK, and then we'll commit to this place by clicking Place. You can see all this artwork. I don't want all this artwork on this Open Eye layer, I just want the eye. So this is when I'll go back to Illustrator by double-clicking this Smart object icon, it'll open up Illustrator, you can just click OK here.
And now I'm going to go to the layers within Illustrator, 'cause this is still an Illustrator vector-based file, it's just embedded within Photoshop. And so we're going to go to where the character is, here's our Puffer Fish, I'm just going to select everything above it, above the Open Eye in the layers here, and click the trash to delete those layers, select everything below the eye, and delete those layers, until all I have left is just that asset.
All I have to do now is go Command + S to save. We'll close this file and go back to Photoshop. And now back in Photoshop you can see our character now has an eye. And of course within the same folder for the Puffer Fish the animator can blink it if he wants to. So that's how I brought in all of my elements, whether it's these Small Fish here, he Medium Fish, a Shrimp. Actually before I show the Medium Fish and the Small Fish I did try to get this in, they're going, no, that's going to scare small children, so nope, no boat accident.
But we'll bring in the Shrimp, the Small Fish, and the Medium Fish. And this is kind of about a bully fish that eats other fish and every bully there's always somebody bigger, so here's the fish that stands up against him. So that's how I brought in all of these vector-based images into Photoshop and retained their vector qualities, so I can edit, adapt, change, and it doesn't degrade the artwork, because they're all vector-based, they're all Smart Objects embedded into Photoshop.
That's really important. So now what I want to do is I decided at this point I wanted to experiment with the background to see if maybe a photo element would look nice, so we're going to go here and turn off the Ocean Floor and I'm just going to embed another image here. So we're going to go to File, we're going to go Place Embedded, and I'm going to select in this case another PSD file. It can be both vector or PSD. And we'll go Place, and we'll commit to this place like this, and you can see that it brings in another photographic element.
And this looks pretty cool, but now you can see it also has a Smart Object, it's not vector-based, but if I double-click on this it's going to open up that PSD file. And within this PSD file I have a Coral Reef I can use, or maybe it's a Sunken Ship that I want to be a background, in which case I can just leave the Sunken Ship or maybe we want to go with like a Kelp Bed. Let's say we wanted to go with this, I'd go Command + S and save it. I can switch back to our PSD file and it automatically changes the background.
This is the power of using Smart Objects. It's really great. If we go back to that background file again notice within even this background file, and this is where the Inception aspect of using Smart Objects comes in, because I have another layer within this other PSD file that has its own embedded Smart Object vector file in it, which is this little character. So you can go really deep back and forth embedding to pull off and give yourself the widest amount of possibility if you're creating and you want a lot of different options to go through.
But in this case we're going to stick with the Coral Reef here and we can close this and that's going to be used in our background now. But I thought that was really cool how you could use both, whether it's a vector-based image, or in that case a PSD file, and embed it. Now another thing we can do is we can also create a nice aspect of turning on an effect, and in this case I thought this background looked good, but I thought it was too flat in the background, even though it's a photo I thought it needed more interest, so we're going to embed another image here.
So I'm going to go to File, I'm going to go Place Embed, and I'm going to go Surface Light.psd, another PSD file. I'm going to place it, and then we'll commit to this place, and I'll go OK, and I go, that looks really cool, it adds a lot more dimension to everything. I think it looks really, really good. I think it's a little too opaque, so I'm going to go up here and reduce it down to like 70. I think that looks better. Now once again, it came in as a Smart Object.
I'm going to click into this, it'll open up another file, and this was the source image, I just turned it to a black and white, inversed it, and made it just a white image, and this just kind of shows you how it looks. So all it is is this transparent image that is the only part turned on within this PSD file, but if I ever want to go back and make changes I have the Source Photo I can go back to. Once again, it's all embedded in one file, so it's very Inception like, if you're familiar with that movie, and it's at this point you're kind of sitting in a chair and you're falling backwards into the bathtub full of ice, because you can get really embedded with this and it's actually a lot of fun, the flexibility creative-wise is incredible.
So we're going to just save this and we'll close it and it adds that nice aspect to it. In this case I don't want to keep the background image with the photo in it, so I'm going to turn that off, and then we'll turn on the foreground again. I want to keep it more animated, but I do like that touch of photography, but we don't need these wavy lines in our Ocean Water, so this is, once again, the flexibility of Smart Objects, I can click this, take us into Illustrator, turn off our Wave Flow, save this file, close it, and go back to Photoshop, and now we have a really nice visual narrative for the game, it's clean, we didn't need those wavy lines with the wave effect at the top.
So the flexibility to do this is really great and works really, really well. Now I want to show you one other aspect of embedding a Smart Object, 'cause it works really well as well. And we're going to go in, we'll turn off some of these characters here, like this, and I want to add another character. So I'm going to go up to File, I'm going to go to Embed, and we're going to take a Fishing Lure, and we'll go ahead and place this.
In this case I want it a little larger, so we'll go, I don't want it too large, let's just do 110, and make sure it's proportionate, click that. And I think that looks pretty good. We'll put him right about there, and we'll go ahead and place it. So what I've placed here, if you look at the layer, is another Smart Object. And this Smart Object, if I click into it, is another PSD file, and within this PSD file I have this Worm artwork on its own layer, and that's vector-based.
So I just took a photograph, cut out the background, illustrated this Worm, and this Worm, once again, is a vector-based graphic. Now if I zoom in on this Worm I think he looks OK, but I think he can look better. Meaning I think it needs a little more texture to it, so we're going to double-click this and it's going to take us into Illustrator, and what we're going to do here is I want to add some nice texturing to this character himself.
So what I'm going to do is I'm going to add a layer right above this, and I always like changing my layer Color to a blue, and we'll call this Texture. And now on my character here, we're just going to do this pretty crudely, I'm going to copy all of this base art here, and Command + C, Command + F, we'll move it to this layer here, and I'll turn off the other items at this point. And now it's at this point that we want to go to our Pathfinder, unite all of these into one shape, like this.
We'll go to Graphic Styles, and I just want to turn it into an outline, so I can see it. Now I can turn on some of those elements I turned off. Now what I want to do is I want to place something into this file, and this is where I can place a bitmap TIF, so I'm going to go here down to Place, and I'm going to select a Surface Texture here, I'm going to place it, and we'll place it right about there, move it over, and let's zoom in, so you can see what I'm doing.
You can see what that looks like. And we're going to colorize this white, but I don't want this texture to be really opaque, I want it to be pretty faint, so we're going to go to 20, just to add a nice little texturing. We'll select this path we originally placed, which is on top of it, and we'll mask it. And to mask you go to Object, you pull down to Clipping Mask, and Make, but notice I have F1, so I just hit F1 if I have keyboard shortcuts set up. And that masks it into place, we have this nice texture.
We can go Command + S to save it, go up here, close it, and now back in Photoshop you can see it's saved that within this PSD file. So I'm going to save this PSD file. And once again, this is that Inception aspect of these features of Smart Objects, so we'll go Command + S, I'll close this, and you can see how it's now inside the final context of our game. So it's a great way to use Smart Objects in a game like this, in any kind of context like this, design, game, or otherwise.
It could be just a print layout, for example. Now one other quick thing is, it's included in the Exercise Files, we're going to go to the Brush Presets and you have to actually be on the Brush, and we want to have white selected. I have these little bubble brushes I created and I'm pretty happy with how these turned out, because I can select the layer I want to paint on and just put these really cool bubbles in here. Now obviously that's getting in the way of the artwork, but you could do it in such a way that it wouldn't.
But I thought those are pretty cool. Let's try another size, because that's pretty small. Since it's the foreground I would probably make them a little bigger, or actually I wouldn't make them bigger, I'd just make them not get in the way of the artwork here. So we could go over here and put them here, whatever. But it's like, it's a nice way of using brushes in Photoshop, so if you want to check that out just check out the assets within the Exercise Files and you can see how those are pulled off.
So Smart Objects are a fun way to use the power of both applications within the context of creativity. So I encourage you to try it yourself, put it to use for yourself, and I think you're going to be surprised at how powerful these features are. They really, really are great. And once you get the hang of this process it's not hard at all and it encapsulates everything into one simple PSD file. As always, thank you for watching DVG Lab, and until next time never stop drawing.