Lessons

Lesson Info

Incorporating Content from other Adobe Apps

So the last thing I want to talk about as far as AdobeMuse advanced concepts and just taking Muse a little bit further, is being able to bring in Photoshop, Illustrator, and other types of content into Muse by using Creative Cloud libraries. And a couple other methods I will talk to you about as well, but being able to incorporate content you create from an illustrator, or from a Photoshop, and other programs is super beneficial, just because if we are creating logos in Illustrator, for instance, how do we get that content to Muse? We can bring in native Illustrator, and native Photoshop files into Adobe Muse, so we can actually import them directly, but if we want to bring in different pieces, if we want to save colors, all different types of content to be able to work with and use in our sites in Muse, Creative Cloud libraries are a great way to be able to do that. I've got a file here, and what I want to do is just show you an idea of how we work with this, how you can. So I'll open...

up one of the master pages for this really simple site that I've got, and in its simplest, or in their simplest with Creative Cloud libraries, you can actually use them to take content from your Muse website, from your pages, and either use it in other pages in your site, or in other websites you're building. So for instance, if I have a logo here, and I want to take that logo and I want to use it in two other websites that I'm creating, I could copy paste that, of course, but instead of doing that, we can create a collection, or a library, of things that we keep together. That way, if we ever need to use them, we can just drag them in. That's the whole idea behind Creative Cloud libraries. If I look on the right over here, you're gonna see that we have the CC libraries panel, if I open that up. And yours might look different from mine, and don't worry about that. When you work with Creative Cloud libraries, you're actually working with either one or a whole bunch of different libraries. You start with a single Creative Cloud library. Now, as a Creative Cloud member, you have access to this, at least most of us do, depends on your company and how they set things up. But, if you look in this panel, you may see it's totally blank, and it might say "My Library" at the very top up there. That's because it's waiting for you to add content. If you want to, you can set up libraries for different projects or different customers, or however you want to organize content. I have a lot, okay, and what I do is, I actually create these different libraries depending on projects or customers, and all this content, it lives locally, and it also lives up in the Cloud. That way, if I create something in Muse, and I put it in this panel, in this library, it's actually synced with the Creative Cloud. That's how I can then go to Illustrator, Photoshop, just about any Adobe application, even some of the Adobe apps that we have, and you can take them and you can just drag it out, or work with it, or edit it in the default program, like Photoshop, for instance, or Illustrator. So what I'm gonna do, I'm gonna come in here, and you can create a library really simply. If you come to that menu up there, you're gonna see "Create New Library." I'm gonna do this, you don't have to if your library's already empty. But just so I have an empty library, I'll create a new library. I'll call it "CL" for Creative Live. I'll just create it, really simple, just get it done. And this is what you may see, it might say, "Drag and drop assets," okay? Now what I want to do is, I want to take this content and use it again. So, I can take something like this logo, drag it over to the panel, and let go. It's just gonna save a version of that logo right there into the Creative Cloud libraries panel. I can then use it wherever I want. So if I go in and I'm ready to create a new site, I've got an existing website, let me create a new site and I'll just show you. I'm getting ready to gear up, getting ready to start. I need that logo. I can go to my master page, for instance, go over to the Creative Cloud libraries panel, and you're gonna see, there it is. It's there no matter what. So whatever library you choose is gonna show and that content is there. I just take that content, drag it out, and then place it somewhere on the page, and I can work with it. You're gonna see, it's gonna keep some of the properties set, as far as responsive nature, you know, pinning, different things like that. The breakpoints right now are not preserved, if you understand the responsive nature of how Muse works. But there's all kinds of content we can put in there if we want to. Alright, now here's the other thing we can do. I'm gonna go over to another program, like an illustrator, and first of all, let me switch back over to my Muse page here. This is the one we're working with here, and I'm gonna zoom out just a little bit. Now, we're gonna go over to Illustrator or Photoshop, and I'm gonna show you how we can also see the same library, and we can incorporate content. But there's one other quick thing I do want to show you, as far as Muse content. If I have other objects, we can bring images, we can bring vector content, SPG files, things like that, drag them into the library, we're good. They're saved in there, you can use them. You can also click on something like this box right here. If you take a look, you're gonna see that there's a plus down at the bottom of the panel. You can capture color if you want to, as well. You can do different things like that, so down there, you're gonna see it says "Graphic and Fill Color." The graphic is the object, it's the rectangle. If I click "add," it's gonna add both the color, the fill of the object, and the graphic. That way, later on, if I have another object I'm working with, I've got a rectangle I'm getting ready to set up and work and do something with, I can come over and use that color just by clicking on it, and it automatically applies it as a fill. I can right-click on the color, it'd even say, let's set it to the stroke color, if you want to put it as a border around the object. So things that we save, not only just images, or content like that, but things that we save and assets we save, we can use all over, different sites and that type of thing. Alright, I'm gonna get rid of this box, 'cause I don't really need it, and what I want to do now is go to Illustrator and show you how we can kind of work this way. So let me go over to Illustrator. So in Illustrator, I've got a logo, and what I want to do, is I want to take this logo, and I want to swap out the other logo. So I want to replace it. I could copy paste, I could place this right into Muse. There's 50 ways we could do this. But if we're trying to create a library, a place where we have all this content set up where we can reuse it again, I'm gonna go in Illustrator, and like I said, we can do this in all kinds of Adobe applications, I'm gonna go to that libraries panel again, and in this case I'm gonna find the library that I had in Muse chosen. 'Cause you're gonna find that, if you have multiple libraries, you can see them all. And there's all my content. So right now, I could even come in here and say, hey, let's use this color if we want to. That's the great thing about Creative Cloud libraries. It's content and assets that are stored, like I said, puts it up in the Creative Cloud for us, and that way we can use it everywhere. So I'll take this logo, let me select it all, how I'm just gonna, in this case, I want to keep the whole graphic, so I'm just gonna drag it in. So I'll drag it in over there, and we're gonna go in and use it, and I'm gonna just name it. This is a way for me to keep track of this content. So I'll just call this "logo," which really is pretty generic, but there it is. Now the thing about Creative Cloud libraries I'll show you that actually is an added benefit, or bonus, I'll show you when we get back over to Muse. I've got the logo in there. I'm gonna go back to Muse now and use it. So I'll go back over to Muse. There it is. It's automatically showing up because I saved it to Creative Cloud. I'm just gonna drag it out, and when you drag it out here, like I said before, what's gonna happen is, it's gonna create an actual connection. So it's linking to the Creative Cloud library asset. If you don't want it to do that, sometimes I'm looking at this going, well, first of all, what does the link do? Second of all, I only want that graphic out there just in the one place, I don't want to have it change at all if anything else changes. So what we can do is, in the panel over here, you can right-click on a graphic, for instance, and you'll see "Place linked," which is what happens when you drag it out into a page, or "Place copy." If I choose "Place copy," it's actually going to embed that object in the page. And to tell what's going on with a particular object, like a graphic like this, if you come over to the right, to the assets panel, you'll see, we actually have a couple different icons here. We have embed icons, we also have a Creative Cloud library icon. So, if you see a little cloud, it's an actual cloud, that's telling you that it's linked to the actual Creative Cloud library. Now the great thing about this, is if we go in and work with this now, we could go to this image right here, and if I come in here and double-click on that, I did that pretty quickly, sorry, but if, in Muse, I double-click on a graphic, if Illustrator, if that's the vector program that created it, or at least, its vector, it's gonna open that up in vector, I can make a change to it. So I could then go in and say, you know what, I really want to change the color of this, and do something a little different, so I'll go with, like, a yellow-y color, there we go, yellow-y orange, beautiful. The asset, if I save it now, I'm in Illustrator, if I save it, I can close it up if I want to. Look in my Creative Cloud library panel. You'll actually see that it's updated in there. If I had any of this content linked within Muse, it would update in there. Now I embedded that, but if I go back over to Muse and take a look, you're gonna see, there it is. If I drag it out, in this case, you're gonna see I now have an updated version. If these were both updated, or rather, linked, they would update as well. So, that's another, I guess you could say added benefit or added bonus to working with the Creative Cloud libraries panel. That way, we can keep track of our content, have a library of it that we're working with, colors, graphics, assets like that, and be able to use it between all of our different projects. And you can use Creative Cloud library assets for just Muse if you want to, or you can use it as a way, like I said, to work across your different Adobe applications. It really depends on how you're working. I know some teams that will actually set up Creative Cloud libraries within Muse to capture tons of assets. Check this out. I can actually come up here. This was, after just a little bit of exploring on my part, I was like, well, if I can save an image and a color, what else can I save in there? If I can go grab a widget, I've got a menu widget up top here, I can actually take that widget, drag it into the Creative Cloud libraries panel, and it saves it in there. I can then use that, it's still a menu. I can drag that out into another site that I want to work with, in that same menu, and it all works. That's the best part. I could even take an entire, now this is pretty crazy, but I could take an entire page design. I could select all the content, drag it into the Creative Cloud libraries panel and let go, and it's saving it as a single object, but, you can see, there it is right there, and I can even name this, I could say, like, "Home Design" or something like that by double-clicking, and it would probably help to give it some descriptor beyond this, but that'll work. I could go to another page I'm working on, I could just take that content from the Creative Cloud libraries panel, drag it out, and look at my starting point. It's a great way for us to be able to get going, to at least use this as a fake template. Okay, not really, it's just content you're dragging out, but it's all still individual content and assets that I can work with. This is still a rectangle, that's a logo, et cetera, et cetera. So this is a great way to be able to do that. And then one caveat to working with Creative Cloud libraries in Muse, in Muse, we work with Responsive, right? So, what we want to do is, we want to set breakpoints, we want to make it to where, if I have a logo like this, for instance, the Creative logo up top, if I scale, I want that to either scale or not, or move position depending on the screen size that I'm looking at, the breakpoints, if you set them on individual objects, are not saved in the Creative Cloud libraries. At least, that's what I've seen so far. They may change that, or it may have changed already, but that's what I've seen. Another tip here, if you have content that you want to work with, we actually have another panel called "Library," which, not to be confused with Creative Cloud libraries, "Library" are just assets you can save and use just about anywhere you want. It's always there, it's always saved there. You can actually take an object like a menu, and if I come in here to the menu, and I set up, let me come up to a better example here. I'm gonna grab another example. If I have an object, like, let's say this box on a page, and what I do is, I actually set up some different breakpoints, if you notice that. I can take this object and save it in my library panel. I can actually come over here and select it, and then at the bottom of the panel, you're gonna see a little page icon, which means make a new library item, or object. It's gonna save that in there, you can see right there. I'll call this something like, you know, "Background square," or something like that, you know, something "square," and you're gonna notice that it actually has an icon to the right there, it's saving the breakpoints with this. So you can take content above and beyond a Creative Cloud library and save it in your library panel to preserve the breakpoints. Big difference is between these two panels, Creative Cloud libraries, you access anywhere, anywhere that you log in with the same Creative Cloud ID with, in different Adobe applications, in different Adobe apps. In the library panel, only available in Muse, and only available for you essentially, okay? To start with, anyway. That's another great way, just a tip, if you need to save content and preserve all the breakpoints and all that hard work you put into that object, maybe a menu system, that type of thing. But that's actually pretty great to be able to use. So working with Creative Cloud libraries, I wanted to give you an idea of how it all happens. The fact that, if you already use them in Illustrator, if you already use them in Photoshop or other programs, you can use them in here, continue using them. The work flow is very similar, there's a lot of things we can do in here. As a matter of fact, just another tip, I want to throw this out there because I forget about this one all the time, but I use it all the time. If you are creating in here, or maybe in Muse, you're making a website and you're designing on the fly, and you want to pick an, maybe you figure out an image asset to throw in the background of your homepage. Instead of going in, you know, going out to a stock site or trying to find something, in the Creative Cloud libraries panel at the very top, you'll actually see that we can search, if we want to, Adobe Stock. So, Adobe Stock being a service where we can work with assets that we purchase, et cetera. But if I come in here and I say, maybe we're building a coffee shop website, or something like that, I'll type in "coffee shop," or I'll try something else here. Let me go back out, I'll make sure I'm searching Adobe Stock, I'll search "coffee shop," and if I press enter or return, you're gonna see it's gonna go out there and say, what are you looking for? Are you looking for a photo, a raster image, are you looking for an illustration, a vector? Once I kind of figure out what I want to do, I find one I like. This is coming off of the Adobe stock site, essentially, from their assets. I just drag it out here. And I can just start working with it. It's not gonna be perfectly high-resolution when you're working with it, but we're working with low-resolution because it's FPO, for position only. We're just trying to get an idea, we might not even use this. But I can go in here and say, do I like that? I can work with it, I can add shadows, do my different sizing transformations, and later on, if we decide that we actually like that, what we can do, let me actually pull that down, you're gonna see, it's gonna be in our Creative Cloud libraries panel. If you drag it out, or however you do this, I can then come to that object, right-click, and say "License the image." So right from Muse, just to try, we're designing on the fly, maybe trying something out, I can license it. And if I have Adobe Stock portfolio, a login, I paid for different assets, I can just do it right here. If I haven't, it's gonna say, okay, let's go out to the stock site, maybe, and let's purchase it so you can license the image or the asset. I'm not gonna do this, but anyway, but you get the idea, I hope, to just be able to pull down something you're working with, it'll swap out the high-resolution version for the low-resolution version. You don't need to do that, you don't need to take care of that, and just about all of the edits you've created, most of the edits, will be applied. That's a great way to be able to work. That way, you can work on the fly and work a lot faster. So Creative Cloud libraries, dig into them. See what they can do. There's a ton of things to help your workflow.