Lessons

Lesson Info

Adding Text and Creating Styles

The next thing we're gonna start to do here is we're gonna start to look at some different things. We've got some image content. Now we're gonna start to look at text styling, placing text out here, different things like that. I just wanna mention one more thing as far as images are concerned, it just kinda popped in my head. When you are working with other programs like Photoshop and Illustrator, you can copy, paste okay. And I wanna show you that just quickly, because this is something that could be a really easy workflow for you. Something that's pretty phenomenal actually. If I go over to, let me open up Illustrator and I'll show you that if we have something in Illustrator for instance, we can just copy, paste. And what it's gonna do is it's actually gonna take that content and depending on where it comes from, I will choose just a file I have so I'll click open. If you wanna follow along you can, you don't have to do this, I just wanted to show you this. I'll go to assets and I'l...

l open up this asset here. Here we go. I'll zoom out. Now if i select this, I'm gonna select it all, I'm just gonna copy, I'm gonna go back over to Muse, so I'm gonna toggle back over and just paste. Now watch. All it's gonna do is it's gonna treat it as an object here that we can work with. Now it's kind of interesting, but SVG content in Muse doesn't look extremely crisp, like super clean looking. Only when you go out to preview or publish, or things like that, or preview in here will it actually look really, really good. It's just trying to keep it so it's actually a pretty fast run-time. If you look on the right in the assets panel, I wanted to point this out too because if we do put in content from Photoshop or Illustrator and we paste it or even in some cases you can drag it in, that just takes longer, but you're gonna see it says pasted something. Like this right here, pasted SVG. And I put it in there and you're gonna see this icon right here. This icon actually means that it's been pasted and embedded. So I just wanted to show you that, last thing before we moved on. I promise there's just so much to talk about with images, there really is. We can go in we can use and put in SEO, search engine optimization. We can do things like alternate text on content. And this is something that's really pretty important. If I go back, if you wanna follow you can go back to the team page, I'll click on that tab, and I've got the images out there. Now you're gonna do this per image. You could also set a description and keyword content for pages if you wanted to do that. That's actually under page, page properties if you're familiar with that you can go there to set that for the page. But if you click on one of the images and then you right click on it, you're gonna see that we've got some commands in here I haven't even mentioned. We've got edit original, replace image, you can replace it right here if you want, but we have edit image properties. Choose that. And you'll see that we have a Tooltip and we have alternate text. Now Tooltip is typically when you hover over an image in the browser it'll show you a little Tooltip with text in it, right? And that could actually be used for search engine optimization in some cases. We also have alternate text. So alternate text if you look right here, description of the image for search engines and also screen readers. So for assistive devices and things like that. If we want to we can put in some alternate text that makes sense, you know. Like I might say Brian Wood, creative director and then descriptive information. You're trying to think of keywords, searchable keywords, things like that. But that's gonna tag it with the alternate text and we can go to each one of our images and do that if we want to. So I'll click ok. I'm not gonna put a Tooltip 'cause I don't wanna do that right now. All right, so we've got our images, that's great. The next thing we're gonna do is we're gonna focus on working with text. We're gonna add some text and we're gonna create some styling. So let me do this. Why don't we go over to the homepage, let's switch over to the homepage. And I'm gonna start to put some text out here in the middle. Now we're gonna put a bit, we're gonna use fonts. I'm gonna show you a lot of formatting and then we're gonna go in and we're gonna save that formatting as styles. So come over to the text tool over here, click on that. And just click and drag to make a text box. There we go. And I'm gonna type something in. I'm gonna type in my name 'cause this is the site for my stuff. I'm gonna say I'm, I'll press enter return, Brian, press enter return, I'm just trying to get a look here, and I'll press enter return and type developer or something like that. So you can put your own name, that kind of thing if you want to do that. Now when we type in text in here you're gonna see that you know it's pretty small. You can't even see it, I can't see mine either. You probably wanna zoom into that but we're gonna go change the formatting so we can see it a lot easier. Drag across the text to select it. You can see I kind of screwed up. That's okay I'll fix it. We're gonna change the font, the size, the coloring and just show you some of the text formatting options we have. Noe depending on your screen size you should see some up here in the control panel. You might not, it depends like I said. If you wanna see all of it come to the right you should see the text panel over there. Now if you don't see certain panels that I have we can take panels out of here and drag them and close them and do all kinds of things. Muse actually has a way to reset these panels. And this is one of my favorite things, if you come under window you can choose reset panels and it will just put them all back where they should be. It'll hide the ones that weren't there initially at least when you first started Muse. Come to the text panel and you'll see we have font, size, color alignments, all the just the kind of stuff you may be used to. Indents, we have indents. We have first line, left, space before, space after, leading, we have leading adjustments. You can do all of this if you want to and just try it out, see what you get. But I'm gonna do this first, I'm gonna change the font size. So come up here and I'm gonna type in a much larger font size 'cause it's not in the menu and then press enter return. And I'm gonna go fix that text. I wanted to make it all caps. I kinda messed up, that's fine. Okay. And what I wanna do now is we're gonna take the text here, I'm and developer or take some of the text and select it, you can just double click to select it, and let's change the font size. I'll make this text a little bit smaller maybe. This text a little smaller. I did 24 alright. I do that all the time, I always pick the wrong size. This is why we do styles, we create styles. I'll show you that in a minute. Okay, we've got some text. What I wanna do now is I wanna make it so we can actually see it. So go ahead and select it, come to color and let's pick a color, I'll just choose white, 'cause we're gonna actually put this on top of an object, like a color object. That looks pretty good. Now we're gonna center line it. So come to center, I know a lot of you are like I know how to do some of this stuff I know how to do it okay but I get it but there's a lot you can look at if you wanna explore or you wanna go ahead you go ahead but you're gonna see we have leading, we have kearning, we have tracking, we have all this kind of thing. Leading right here, that's actually the distance between the baselines or lines of text. So if you want the text to come closer or that kind of thing, you can do that. Now I wanna do this, I wanna actually go in there and pick a different font 'cause I think that looks pretty bad. By default you're gonna see we have Ariel chosen. Now if we want we can choose from three different kinds or places for fonts. Click Ariel, come in there and I'm gonna make sure I scroll all the way up here. Now you will see there's a search field at the very top if you want to you can search by a font name, if you know it you can do that. You'll also see recently used. If you haven't don't any then that's pretty much gonna be blank or not gonna be there. You'll see web fonts, click on web fonts. Every time you click on one of these headings in here, like a gray heading, it's just gonna scroll it up so you can see that stuff. Click on standard fonts, scroll it up. And then click on system fonts. There's three different ways we can use fonts or types of fonts we can use here. We can use web fonts, these are typekit fonts. These are fonts you buy, initially I should say. There's a couple different more, there's actually three types of fonts you can buy and these are awesome because these are hosted fonts. That means that you can pick a font that you don't have and there's a lot of them and all you do it pick it, you apply it and Muse takes care of the rest. Everybody sees that font 'cause this font will live on another machine somewhere, okay, and when your site is viewed it's gonna go grab that font and view it in the browser for you. You don't have to do any of that, it's great. Standard fonts with fallbacks if you click on that again, that's actually all the typical, Ariel, Helvetica, Times Roman, that type of thing. And then you're also gonna see we have what are called system fonts. So system fonts are fonts on your machine and you wanna try not to use those. Well look it says exports as image. In Muse it will be text, let's suppose that I use Giddy Up or something 'cause we all use Giddy Up alright from time to time, you use that, in here it's gonna be Giddy Up, it's gonna be text, it's gonna be editable, you can do whatever you want, as soon as you publish, preview, do whatever it's gonna turn it into a picture. We don't want that for search engine optimization, for a lot of different reasons. So what we're gonna do is chose a web font. Go ahead and chose web fonts and you should see, now your list might be different then mine don't worry about that 'cause as you add them over time it'll start to accumulate. Click add web fonts. Now in here you're gonna see that we actually have typekit web fonts, we have edge web fonts and we have what are called self-hosted web fonts. The typekit web fonts, those are included, it says it right there I don't need to say it, it's included in a creative cloud membership. So as a member you get access to those. You're also gonna see edge web fonts. Those are hosted by Adobe, they're totally free. There are a bunch of other fonts you can try. And there's self hosted. Self hosted web fonts means you went out or somebody went out, you purchased a font, a web specific font that is and then you want to use it on your site, Muse let's you do that. And you just tell Muse where the web fonts are it'll stick them in here and let you use them and that's it, game over. You use the fonts. Click get started. And if we want we can just search for fonts and you gotta pick what you wanna use. So we're gonna either typekit, edge web or self hosted. Most of us are gonna bounce between typekit and edge web and most of us are gonna stick on typekit to be honest. If you want you can just come in here and any font that you've already synced with your machine should have a blue check mark on it. You can see I've already got this one. You might not have any, don't worry that's fine. If you wanna come in here you can actually filter by classifications. You can say hey show me Sans Serif, show me hand script or hand lettering, that type of thing. And it's very much like the typekit website. Then it's gonna filter for you. You can kinda see what you've got. And we can go through and if you find fonts you really like, this is where it's gonna get a little crazy, just start clicking on them. Now the more you click on the more you're gonna download and the longer it's gonna take to download. But the great thing about this is if you do this, let's suppose you're about to get on an airplane, they're on your machine so you've got them. And that's the great thing you can start using them for other websites too. Alright I think that looks pretty good. I'll click ok. What it's gonna do right now, like I said, it's gonna take those fonts, sync them with your machine so that you have access to them. Now it's not gonna take a font and stick it on your desktop so you can grab it. It's just saying, Muse fonts are there go ahead and use them. And like I said it's gonna take a few minutes or a little while here and depending on how many fonts you chose. I only chose about four or five something like that. If those fonts have a lot of styles in them, italic, bold, that type of thing, that can also add to download time and I'll bet you money that that's what's happening here for this one. Now when it downloads you're gonna see that you will be able to access them from the font menu over here where it says Ariel. Now if you do download these, like I said before, they are on your machine and you can use them from site to site. You don't have to re-download them anytime you create a brand new site for instance. Okay there we go, five have been added, I'll click ok. I'll come up here to the font menu once again and you should now see that I have these web fonts. So what I could do is, you'll see a little sample text formatting out there, I could try something see if I like it. Say that looks pretty good, I'll keep it. I'm gonna fix this up a little bit. I think this looks pretty bad. I'm gonna select this and make the font size a little bigger. Not that, I'm not gonna go out there and type that. I'm gonna type in the field, there we go. Hit center of return and it should accept it or I'm gonna use the arrow keys, there we go. I'll adjust the leading a little bit, pull it back. You can actually hold down the arrows on this, it's kinda cool. I'm gonna apply a little bit of space after here. If you wanna just try some of this you can. I'm gonna do a little space after, push this down, there we go, that looks pretty good. Okay, we've got a little bit of text. Now we can apply this kind of formatting to all kinds of text we create. What we're gonna do next is we're gonna create some body text and a headline text and then we're gonna kinda save that formatting as styling. So we're gonna place some text out here. So to place text you don't need to create a text area, it's gonna do it for you. You can only place txt files. Not Word docs, not rtf, things like that so far. Come up to file and if you wanna place text choose place. Now if you have a text file you can use that's great, you can grab it. Otherwise you can type in text by drawing a text box, you can do that too. I'll click open. And I'm just gonna come out here and it's gonna say, okay where do you wanna put the text? I will click, there you go and I've got a text box. So I'll make it a little wider just so we see it. Now I wanna go in and apply some formatting to that just so we can see it and it's easy to work with et cetera. So the great thing about text is that if you have a box full of text and you want the same formatting applied you can just select the entire box, go apply formatting, it'll do it for everything in there. Now what I wanna do is I wanna select by double clicking in here, you can switch the text tool. I'm gonna select just one of the paragraphs. So what I'm gonna do is go one, two, three and it should select the paragraph. In Muse you can drag across text or click two times to select a word, three times to select a paragraph, four times to select all if you're brave enough to stay that long. Alright we've got the text, I'm gonna do a little formatting. So come over to the right or up top if you see it up there. I'll pick a font. You're gonna find that there's a lot of different types of web fonts we can use. Open Sans is a pretty good one, I'll go with like a regular. That looks pretty good. I'll bump up the font size just a bit so we can actually read it. And I'll increase the leading just a hair. Change the color. If you wanna go in and do a little bit of formatting you can do that, I've got the text. Now I've done it for the one paragraph and I wanna put a spacing after the paragraph, we could go in there and we could actually, let me zoom in just a bit, we could hit return after the paragraph to put some space between but we do have space before and space after right here and the great thing about these formatting options is that we are about to save this formatting as a style, it's called. And if we do that spacing before and after, leading, all that, it's captured in the style. So I'm gonna come in here do a little space after. That looks pretty good. Now I wanna take that formatting and apply the same formatting to the text below. So we're gonna capture the formatting off that text, save it as a style and then apply it to the other text. To do that we're gonna come under window and choose. You're gonna see there's two kinds of text styles we can work with. We have character styles and we also have paragraph styles. You're probably gonna wind up using paragraph styles most of the time. Paragraph styles are styling for an entire text. So if you do alignments, you do leading, you do font size, all that, you just put your cursor in it and say apply it and it'll do it to the whole paragraph, the one paragraph. Character styles are formatting like font, font size, font weight, that type of thing and you have to select text or the whole box to apply it, okay. So we're gonna stick with paragraph styles for right now. Choose paragraph styles and you should see it's gonna open it up on the right over there. It's actually doc now and it's got a bunch of panels. With that text selected we are gonna sample formatting. So come over there to the right. You should see to create a style you click the create new button. Now if you've done styles or created styles in InDesign or Illustrator, programs like that, in those programs you can create a style without having anything selected, any formatting anything. And here you need to have some formatting selected okay, to get this to go. Or some object with text in it or something like that. So I'll click create a new style. It makes a style from that text and if I hover over it it's gonna show you all the formatting for it. Double click on that style if you've made one. And what that's gonna do for us is it's gonna do a couple things, it's gonna allow us to name the style which makes sense, we wanna make sure we know what the style's for what is it used for. And also if you care about the code if you are familiar with tagging and that kind of thing you can go in and assign tags to different styles. So you could have a heading style and assign a heading 1 or heading 2 tag to it and that way later on in the code it's actually gonna be an H1 or H and that could be good for search engine optimization, all kinds of things. I'll leave that alone and let's name the paragraph style. We'll just call this body and of course I'm forgetting the size, I think it's 16 pixels or 16 points, it says it right there look at that Brian. Size 16, amazing myself. Okay body 16, that's great. I'll click ok. Now what we just did, couple things, we re-named it but we also just applied the style to that text. That's what you wanna do. You wanna apply the style to the text so that if we go in and update text styling it'll update everywhere it's applied. Click in the next paragraph if you've got one. Otherwise you can just a hit return after that one and unfortunately it's gonna use the same formatting. Come over to the paragraph styles panel and click the style name. And you should see it applies it automatically. This is awesome. I cannot live without styles in these programs just because you're going out and saying this is one page with body copy what if I have 20 pages with the same kind of body copy. Instead of having to copy paste and all that this is your ticket, okay. Alright that looks pretty good. Now I wanna show you something here that's kinda cool, kinda interesting I should say. If we wanna update a style you can really only do it one way. In other programs you double click the style name like InDesign for instance and you see this ginormous dialogue box and it says, what do you wanna change? In here, you have to just take one of the paragraphs that has the styling applied, change it and then do something called re-define the style. So let's do that. I've got this paragraph selected. I'll go up top or to the text panel, either way and I'll make the text just a tiny bit smaller. It might be too small but that's okay. A little bit smaller. If you look over now at the paragraph styles panel you'll see that there's a plus next to the style name, hover over it and you'll see a tooltip. In the tooltip, this is pretty cool, you're gonna see a dotted or a dashed line and something below it, whatever's below that dashed line is what's different. So it's what's different on the selected text from the style itself. If we wanna make sure that the style matches the selected text not the other way around we can re-define the style right now 'cause the text is selected. Come to the style name, right click on it and there's all kinds of things in here that you can do. Choose either clear, now clear overrides would remove the stuff you did, the extra things, the stuff beyond the style formatting. Just choose re-define style. Look what it did. Took the other paragraph and it's now updated to match. That's because that style was applied. Now unfortunately our style name no longer makes any sense 'cause it's body 16 and this size is so you gotta be careful about naming styles. I'm gonna double click and change it to 15. There we go. Okay, go ahead and save your page, save your site.