Lessons

Lesson Info

Adding Images and Working with the Asset Panel

I wanna talk more about images, because that's gonna be sort of the backbone of your site, right? That's gonna be one of those things that you're gonna use a lot of, now images include, graphics, which are things like SVG and Illustrator files. We'll talk a little bit more about SVG as we go on, what it si, how you save it, you know, that type of thing. We also have raster image formats, which are JPEG, ping, GIF, you know, all those types of things, even PSD, or Photoshop files. So I wanna show you a few ways to add images, just in different ways I guess you could say. So we're gonna start out on another page, not the master page, so what I wanna do, is I'm gonna go back to plan mode. And wow, these images are bigger, let me move these back here. You're gonna see that, remember I said in the beginning, we could actually take this little slider, the side slider up there, if you wanna make your thumbnails bigger or smaller, that in plan mode, you can do that. Alright now, we're gonna go...

into one of the pages here, let's go to, let's go to the team page. We've got some team members to add photos for. And then we'll go over to the homepage and do a couple other things as well. So I'll open up the page for team by double-clicking, and I wanna see the whole thing here, so you're gonna find in Muse we have a lot of zooming and view commands just like we do in other programs, so come under view, and you'll see zoom in, zoom out, and if you know those shortcuts, you've probably used them in Illustrator, Photoshop, or InDesign, they're the same thing, and that's to me one of the best parts about Muse, is that, yeah, it's relatively easy to use, once you understand some of the inner workings, but the shortcuts are the same, so you can kinda bounce back and forth between them and it works pretty seamlessly. So choose fit page in window, I wanna see the whole page here. And what we're gonna do is we're gonna add a couple of images, and I wanna show ya, like I said, a few ways to do this. Because, depending on your workflow and what you're doing, you may, you know, need to use certain methods. So the first thing we can do is like the logo we placed in the header, we could just straight up place an image or a bunch of images. So we'll do that to start. So come under file, and come to place, and you'll see that we've got, I have a series of assets here that I'm gonna use, if you wanna pull an image in you can. Remember, I told you earlier, that when you place images, they are placed at 100%, we can scale them down, but we wanna try not to scale up raster image file formats. Things like JPEG, GIF, ping, PSD, that type of thing. Depending on Photoshop files, what it is has in it, but. Alright, I'm gonna open up a file, just place a ping, for instance, and if you want, like we saw earlier, you can just click, or you can click and drag. I'm just gonna click to place the image. Now that's gonna put it out there for me. Now, with these select tools selected here, this is the selection tool, you can drag it around, put it where you want it, you'll see the smart guides are kinda kicking in out there, they're showing, as you can move things around, and align things. When we want to scale images, I wanna show you a good and bad, okay? Just grab a corner, I told you this before. Just grab a corner, drag it, bam, you're gonna actually see a percentage in the lower right corner there telling you what size it is now, okay? So in my case it's gonna be half the size it was 50%, right? Now here's what I want you to do. Drag your image, make your image bigger than 100%. Okay, I'm just gonna do like 120, whatever. Just make it bigger than that 100%. Now what we just did was something bad, okay? Now it may work, it may be okay, but Muse wants you not to scale your raster images larger than 100%. Here's how it's gonna tell you about that. If you look on the right we said we have the assets panel, click on the assets panel, and the assets panel will show you all of your images, all of your graphics, everything you've brought in or placed, and linked inside of this file. You'll also see, and this is for every page as well, you'll see that the middle row here, or the middle column rather, this actually has a series of icons, which can tell you what's up. Like is it missing, is it, you know, broken, what's going on with it. If you look in here you'll see now with the employee one, there's actually a yellow yield sign, with a weird little icon beneath it, okay? Hover over that and you'll see it's gonna say, original asset size is some pixel dimension, the resampled is some pixel dimension, the page item size is what the size is on the page. Mine is larger than the actual original asset size. So it's been scaled up, I've made it bigger. Look right here, it says, asset may have been sized larger, and may look pixelated. Resize it smaller or link to a larger asset. What you can do in this case, sometimes there's just, you have no recourse, you just, you gotta take that picture in Photoshop and make it bigger somehow, okay, and make it look good. Or, you could actually link to a larger image that's either different or the same one that's just bigger in scale, right? And to do that you can right click, and this is interesting, but this is where you're gonna find most of the options for the links panel, or the assets panel rather. You'll find that in a lot of programs, Adobe applications, Illustrator, InDesign, that type of thing, they have some kind of assets or links panel and if you want to do things like upload or update rather, an image, if you wanna relink it to something else, there are a bunch of buttons at the bottom or somewhere. In here, it's all about right click, or control click. So if you right click on something you will see relink. That just means let's pick another image, another graphic, swap this one out, it's gonna use roughly the same dimensions, et cetera. You can also go out and say let's collect the asset, which means collect it into a folder, that's actually pretty cool, I never talk about this, when I show Muse but you could grab all your images over there and collect them altogether in a single folder type thing, copies of them. We can actually go, we can embed the link. If you want to take this image and make sure that it doesn't update, if somebody updates it in Photoshop for instance, you can embed it, that way the image is in the file. So you don't have to worry about that. You can also, one of my favorite things here, you can edit original. If I choose edit original, I just wanna show you what happens here, you don't have to do this, it's gonna go to the program that it thinks made this. So the associated program. In other words, for me, ping opens in Photoshop, that's just what happens. I could now go and make a change, I could save it, wow, that's something, if I go back over to Muse, you're gonna see it's gonna update. So, it's a great workflow, it's a really quick asset workflow you can work on. Now I'm gonna, wow, I'm gonna put that back. So I'm gonna go back to Photoshop, I just did a quick inverse. I'll just reverse it, save it, and I'm just gonna close that image, and go back over, and you'll see, it's going to hopefully update, and it's not, because this is not the first time of done this. When you open files for Muse, you might see a message that says you have modified files. That means somebody's updated 'em outside of Muse, and you need to relink that, basically update them. If you look in here you'll see a yellow yield sign means, or this yield sign rather, means, you gotta update this thing. So I'm gonna right click on it, and you're gonna see update asset, and it should bring in the correct asset. Okay, now it's still too big, it's telling me you still got problems, but I'm gonna make it smaller, and as soon as I make it small enough, notice that icon in the assets panel goes away. I'll make it something like that. Alright. Now the assets panel is important, we'll talk a little more about it. But I wanna talk about other ways to bring in images, and how you can work with them. So what we're gonna do, is we can also, like I mentioned before, draw place holders for images. If you're working on a design and I've got the picture of me there, that's great, but I have another coworker, or another team member that I don't have their image yet, but I wanna put it out here to start designing it. Well, here's what you could do, you could actually take this image, and just copy it and then later replace it. So to do that, I can copy, paste, you can right click, edit copy, edit paste, or option on Mac, hold down option on Mac, alt on Windows, drag it, and you'll see the smart guide's kicking in, it's gonna align it just about perfectly. Release the mouse, and then the key, and you got yourself a copy. Great part about this, is if we have another kinda asset, something else we wanna bring in, image, whatever, I go up to file place, let's suppose we finally have the image now, I go to file place. I'll find employee two ping, there it is right there. I'll go ahead and open it up. And what you're gonna find is that it's not gonna replace whatever's selected. InDesign does that, a couple programs do that, but in this case what we do is we actually hover over whatever image you wanna replace, and you'll see like a blue border show up. As soon as I click, you got it replaced, it's gonna swap it out. It's basically you're gonna kinda fit it in there and work with it. Now, there's, like I said, there's a lot of other ways work here. If we wanted to draw a box, you could try this, you could just go over and draw a box. Now I'm tellin' ya, you want it to be the one with the X, just because it accepts images, and it also makes it so that if you see the X, you usually indicate or think to yourself, well, that's where an image goes, okay? So you could do that. You could actually draw a box and do the same thing. Just drop the image right on top of it to put it in there later on. Well, I wanna do is we've got a couple images out here, I wanna show you another way or another type of image we can bring in. We can actually bring in Illustrator and Photoshop files. If you're bringing in an Illustrator file, it's gonna bring everything in as is. It's gonna keep it back there, keep it text, keep it image, whatever it happens to be, and it's gonna bring it in here, and it's gonna treat it as what's called SVG, or scalable vector graphics. When it exports it, a lot of times that's what's it'll do, it'll create content for us. Now I wanna bring in a Photoshop file, and just give you an idea of how that works. But I also wanna open the file in Photoshop just to show what it looks like. What kind of layering I have and that type of thing. So I'm gonna go over to Photoshop, and I'll open an image. So I think I already have it here, there we go. So I've got this picture of myself, and I've got some stuff on it, you know, I've got text. And if you look at the, let me make this a little bit bigger. If you look at the layers panel, you'll actually see that I have a rectangle, a black rectangle, I've got a black and white, which is just a way to kinda, you know, change the color of the image overall, and I've got the image layer itself. And what I wanna do, I'm gonna name that layer, call it Brian, there we go. Now, if I want to, and I also have the text above, but if I want to, I can bring this file, or just about any Photoshop file into Muse, and when we bring it in there we can actually choose what part of it or all of it we wanna bring in. It's pretty cool if you think about it. If you had, let's say you had part of a design you created in Photoshop, and then you wanted to take and bring all of the assets over to Muse, you could just place or import the Photoshop file, and I'll show you what you can do with the layers. It's gonna deal with the layers themselves. I'll save this, 'cause I made a quick change. I'm gonna go back over to Muse. And I'll, once again, go up to file, then go to place, and I'll go grab that one right there. That's actually a Photoshop file, if you have a Photoshop file you can try and bring it in and you'll see, I'll click open, and you can see the import options, Photoshop. Now this is pretty cool. The only caveat to this is if you have a PSD file, that's great, you open it up, if it doesn't have any discernible layers, if there aren't any layers in that thing, it's not really gonna give you any options, okay? So we can do two things here. We can import the composite which is a flattened version of that image, if we wanna do that, or we can import a layer or two, or three. So when you choose import layer, you're gonna see we have like, the text, we've got the rectangle, and we've got that Brian layer. Now notice that it's not looking at or showing any of those adjustment layers. Like the levels or the things like that. That's because it's not really an object, it's just applying to it, okay? Now if you choose something, like let's suppose I choose the Brian Wood text, that text right there, if you import as is, it's gonna import it in the size of the Photoshop image. What we wanna do is if we import part of a Photoshop file, you want typically to clip to layer contents. Not always, but that means it's just gonna make it so this object is the size of the text for instance, this. I'm gonna import me. And if you want, you can command click on Mac, or control click on Windows, and select multiple layers to import all of them. What it's actually gonna do is it's gonna bring 'em all in. You can delete 'em, move 'em, do what you wanna do with them. And I'll show you that. So I've got both of those in there. And I'm gonna say clip to layer contents. Which means cut it down to the size of the image, click okay, and what I'm gonna do is I'm just gonna click to place it, alright, there we go. Now I'm gonna take this one and move it off to the side, just so we have it. Now if you look, it's actually, it's got it out there, it's great, it's got the image, et cetera, but if I look right here, you can see I can actually move, change, and edit, each object or each part independently. It's kinda cool, it actually kept the same relative positions of the layers. But I can now edit them independently. I can say, you know what? I don't want this text anymore, or I want it, and I can delete it, move it, whatever. This is now just an image for me to go out and start working with. So we can do that, alright. Let me delete that, and I'm gonna move this back over. We've got a couple images. Now I wanna show you another way to place an image out here, alright? There are, like I said, there's a lot of different ways, I wanna make it so that an image will actually kind of cover everything. And there's a few ways we can do that. So we'll leave this here for right now. We are at the end of this section, we're gonna have to go back and make sure that this stuff works, responsive. Smaller screen sizes, right? But for right now, I'm gonna leave it. I'm gonna save this, if you wanna save your site you can. Let's go back over to plan mode, and let's go to home, open up the homepage and I wanna fit everything in there so we can see the entire page. So if you come under view, you can choose fit page in window. Now we could put in the image out here, and we could say, yeah, let's just place it out here and do something to it. Now let's do that, and then I wanna show you another method, 'cause yeah, the reason why I'm showing all these ways, is because you're gonna use them, you really are. Depending on the situation, depending on what you're working with. If you just wanna straight up place images, go for it, you're done, okay? But this next thing I'm gonna show you after, hold on. It's pretty cool. So I'm gonna go to file, place, go ahead and place an image. I've got a JPEG, and the JPEG's pretty big, okay? It's at least the size of the screen, it's actually bigger, it's 1500 pixels wide. The reason why I did that is because I wanted to put it in the background or put it out here and make it really big. I'll open that up, and this time what I'm gonna do instead of just clicking, I'm gonna drag to place it out here. Now the cool thing about doing this, is that once again we're smaller then the 100%, which is good right now, and I can go in now, placing an image like this, I can actually just crop and do different things. If you want to you can come up to one of the corner points. Now I said before that you can just drag and scale, and it's good right? If you press on the shift key, I'm not gonna do this. If you press the shift key, you will distort it as you drag it. And if you wanna crop it, we can actually hold down the command key on Mac, or control key on Windows, and you can cut off part of the image. It's just cropping it essentially. Think of these as it's a box with an image inside of it. That's how it works. We're not deleting the image, that part of the image over there, we're just hiding it. So it's very much like InDesign or even Illustrator if you've done those. Now if you wanna rotate the image, you can just come off of a corner, you're gonna see a little rotate angle. You can just drag, I don't need to do that, so. But here's the fun part. You're gonna see over in the left in the tools panel, we actually have a crop tool. Now the crop tool allows us to do what I just did, and a couple other things. But you can crop or grab part of the image, or the frame, the box, and just cut off, or reveal parts of the image using that. But if you just learn that keyboard command, command or control, you've got most of it. Now the other thing we can do here is this. We can select the image in the frame. This is very InDesign. If I double click on the image, go ahead and try that. It's gonna show you the image in the frame. So that brownish border right there is the size of the image. You now have it selected, and you can move it around. So I can go out here and say, you know what? I'm gonna drag it a little bit, let's move it here. You can even, this is a little wacky. I see these little things on the corners, and I'm like, can I really drag those? Yes you can, you can drag. So you can make it bigger or smaller within. Now I just accidentally hit a key, but if you press the option key on Mac, or alt key on Windows, you resize from the center. This is very much like Adobe applications. So that's kinda cool, to be able to do that. So we can do things like, we can scale, we can scale the frame in the image, we can scale the image within the frame, you can also rotate the image within the frame. After double-clicking on it, you're in there, you have that image selected. And by the way if you accidentally get outta here, you like click, and you're like, oh, where is it? You can always just double-click again. There we go. You can also rotate. Just come off a corner and start to rotate, and we can see, that looks pretty good. The problem is here, is that it's not quite filling it up, right, or fitting. So we can use fitting and fill commands. There's a couple commands we have here. If you right click, let's suppose you have an image that's either too small for the frame, the box it's in, or it's too big and you wanna make it small again, like fit it in. Right click, and you're gonna see fitting. You'll see fit, or fill frame. So fit content is just basically go in and say, let's proportionally, let's not stretch it or anything, but let's fit it within, so the widest or tallest is gonna fit, and you're probably gonna see, it's gonna have some extra, okay? It's not gonna fill up the whole box. Fill frame is one of my favorites. If you choose fill frame proportionally, it's gonna try to do what it says. Now unfortunately this thing is rotated. So if you look at it, it's kinda freakin' out a little bit here. (laughing) Now what you can do if you want, let's try this. Come to the transform panel on the right. And you're gonna see that we've got a lot of the options that we wanna work with that we've already kinda tried, you have sizing, scaling, rotate, that type of thing. Let's reset this to zero. Let's reset the rotate angle to zero, this is a great place to do that by the way. And then we're gonna go in and fill it now, and see if we can get it to work. So if you right click on it, fitting, fill frame proportionately, there we go. The rotate kinda threw it off a little bit. But now that we've got it, you're seeing that it's actually cutting off part of it, because it's gotta fill it up. It's not the same exact proportions as the frame, and that's fine. Okay, now here's what I want you to do. Delete this, alright? I know, we just did all this work. Now click on it and delete it. I wanna show you my favorite method here, for getting an image that's large. We're gonna put a box out here, and just put an image in that background. That's gonna allow it to kinda scale and stretch and do different things. So come over to the left, and what we're gonna do is we're gonna grab the rectangle tool. This is gonna allow us to do some things to it not the one with the X, the X is meant for imagery. The rectangle tool is meant, it allows us to do things, like stretch it to the browser, and all kinds of things. Click the rectangle tool and draw a rectangle, it's about the size of the page, and you can go taller, that way we have room here. I'm gonna zoom out, I'm gonna use my pinch zoom to do that. And we're gonna now put an image in that to fill that up with an image, if you come under fill, right here, you're gonna see that we have, we can do a gradient, this is just a box, if you wanna put a gradient in it you can. You can also do add image. Click add image, and I'm gonna grab that home JPEG again. You can grab any picture you have, it doesn't really matter, open it up. Now the thing that does matter, is it's gotta be large enough to cover this area. 'Cause if we scale it up, remember, it might look pixelated. So I'll click open, there we go. Like I said, the cool thing about this, is that it's fitting it out there, that's great, this is gonna be great for responsive design too, because it's gonna kinda stretch and squish, and fit proportionally to make it work. But right now you're seeing the image in the back of that, that box, is actually original size, which is kinda big actually. So what I wanna do is I wanna always scale it to fill. This is important. If I choose scale to fill, it's gonna fill up the box, like we just saw a few moments ago with the other image, but it's gonna make it so that you can scale if this gets bigger or smaller, which is great. Now you can also position it. I could say, let's get the center of the image, dead center in the box, for instance, or always keep the top of the image tagged to the top of the box, we can do that too. Depends on which part of the scale you work with. Alright, that looks pretty good, not too bad, if I don't say so. Come up to that, the gripper, the scrubber up there, and you can just drag. So drag it, and you'll see what happens. Go a little small, and go big, check it out. Thing about this is that it's gonna keep going. That's what I love, keep going, alright, there we go. Okay, now click in to make sure it fits it to that maximum width size, 1100. Now just one more thing as far as images are concerned, I wanna show you, if you click to deselect, now we wanna do this on the master page, just so we have it so it's on every page, we gotta always consider that. If we wanna have something that's gonna be on every page, we have to go back to the master. So I'm gonna open up the master page, and I've got a couple things open here I'm gonna close, there we go. I already have the master page open as a tab. You can click on that if you want to. Come up to that tab, and what we're gonna do is we're gonna actually just place a few things out here, I'll work with a little bit. So if you look up top you'll see that we have nothing selected by the way, right? Look up in the upper left corner, you're gonna see page, the word page, that right there's amazing information, because when you click on something, it's gonna tell you what is selected, or in this case what's not selected. The page is selected, and anything you do up there in the control panel right now, fill stroke, rounded corners, effects, all that, will effect the page. It might not work, but it will effect the page. What we can do is we can go to the fill here, and we can actually fill up the entire page, which is behind all your content by the way, it's gonna be all that area back there, the white area, and everything behind, you can fill it with a color, a picture, a gradient. If I go click on fill, and I choose gradient, it's gonna put that everywhere in the page. Now, I wanna show you somethin' here. Why don't you try this, go ahead and click on fill up there in the control panel, and then pick a color. I'm saying click on the word fill, sorry. Pick a color, I'll pick, I don't know, any color, we're gonna remove it, don't worry. And then what I want you to do, is we're gonna make the page wider. So we're gonna preview it, okay? So come out here to discover, grab this guy here, and drag to the right, and look what we see. Do you see that white back here? So this color right here, we're doing is effecting what's called the page fill. The page is that blue border. That's all it's gonna fill up. You see that white back there? That's behind the page itself, and that's called the browser fill. So your browser, it could be, you know, 40 feet wide, and your page is that big. If we want, we can fill up the browser with something else too, and this is, we're getting to images here, but we could fill it with images. This is another way to get images out here. I really wanna remove that color back there. So to do that, you'll notice we can't select anything because we are not at the break point. So come out to the design and click, and it's gonna say okay, there we are, we're back there, come back up to fill, and you can just remove the color fill if you want to. From here or the color box there. Okay, if you wanna put something in the browser fill, image, color, that type of thing, come up to browser fill and click on the words up there, and you're gonna see, once again, gradient, and you're gonna see image. Click on, if you have an image you can use, click on add image, and what I'm gonna try here, is I'm gonna actually try something like this head, okay? This is something we're gonna use later, we are gonna remove this by the way. I will click open, this could be almost anything, okay? Just about any kinda file format that works. Whatever doesn't work is grayed out essentially, and check that out. That is, first of all, it's gonna make you sick, but second of all it looks horrible, and third of all, watch. We can have a tile, we can have it scale to fill, we can do all kinds of things. You can tile horizontally, you can tile vertically, tile different ways, there's a lot of ways, but what's actually happening, I'm gonna put it back to tile, is it's going out and saying, okay, starting in the upper left corner of the page, for you it's gonna be up here, that's what this little position things mean, it's gonna just tile 'em out there or fit it, or whatever you just selected. Now watch. I'm gonna grab that gripper and drag. This is behind everything. This is behind in the browser window essentially. So whatever we put back here is gonna stay, it's gonna repeat, it's gonna be behind everything. We could cover this all up in the page area essentially, and that's about it, okay? Now I'm gonna click back on browser fill, 'cause this is makin' me nauseous. And what I wanna do is first of all, I'm gonna make sure that I can't select anything, 'cause I gotta click and go back to that break point. You're gonna do that, I do that every day, okay? Mess it up. I'll click on browser fill. Now we can if we want to set scrolling or not. And this is actually pretty awesome. I'm gonna replace the image, this is horrible. I'm gonna click on the asset name here, and try like the home JPEG, okay? I'll try that. Now, I'm gonna say, let's scale to fill, we're gonna remove this, by the way, I just wanna show you something. Scrolling means this, this is actually really cool. You could have an image in the background that stays in place. Right now, if scrolling is selected, just watch me for one second, okay? I'm gonna, stay where you're at, I'm gonna go out, and I'm gonna preview this in the browser so you can see what I'm talking about. If I grab the scroll bar, and go up and down, watch what happens. The background image, that is behind everything, that actually moves, it's called scrolling. So what I could do is turn off scrolling and it will stay in place. So if you have a background image in browser fill, and you turn off or deselect scrolling, if I go back out to the browser and take a look, you don't have to do it, don't worry, I'll just show you, watch. That's pretty cool. So now the header part and the background image are all staying put and the only thing moving is that footer box. But that's pretty cool. Alright, let me close all this up. Okay, let's remove that, 'cause we're gonna, we have the image on the homepage already, so click on browser fill. If you wanna try another image, go for it, you might find something with a subtle pattern, that you repeat, that might look kinda cool, you could do that. To remove it, just click on that little cupcake right there, that's a trashcan. And it should remove it, there we go.