![]() Look at it in your default browser, look at it on your default screen size, and eventually I'll show you how we can publish it and look at it on the devices to see kinda how it's looking. And usually with this we can type in a value or press the arrows, I'm usually gonna go 1100 or or even up to 13 something, that's just gonna make it a little bit wider, something for us to work with. So we want to make sure that we make this big enough to fit most screen sizes today. It's just gonna expand to that size and be done. Now this is gonna determine the maximum width for every page to start with, okay? You can, like I said, it's a certain size, it is gonna get smaller on the device, but if you, let's say we take this site and we look at it on a cinema display, an Apple cinema display, well our site is gonna get, right now it's gonna get 960 pixels wide and on the cinema display it's cinema display is gonna be like this wide or whatever, okay so that's it. ![]() On the right you're gonna see max page width, which is the maximum width this page will go. You take your browser and make it smaller and there's a big scroll bar down here, right? We typically don't do that anymore, there's special case use for that, but we're gonna use fluid width typically. This is, I mean I always make a joke with this, this is like a website from 1998, you see it, it's this wide and that's it. And you will see that there is a fixed width size. ![]() It's gonna expand and contract to fit the device size essentially or the screen size. So in Muse you'll see, we're gonna be able to look at the range of sizes and determine if our design is actually working. Back in the day when mobile first came out, and yes I was around for that, we would actually go in and mobile would kind of be an after thought, so we would take a desktop design and then for the mobile sized site we would just say ah, let's hide this, hide this, get rid of that and that looks pretty good. Sign that we create and making sure that if we go smaller for instance, it's still gonna look good and work, and the right contents gonna be there. So it's taking a desktop version of a web de. Now what is responsive design? Responsive design is taking a web design, or a web page you're creating, let's say, and making sure that it works across the different devices and screen sizes and things like that. Think of fluid width as responsive web design or responsive design. By default it's gonna be what's called fluid width. I love this dialogue box because it's just small, there's not a lot to focus on, not a lot to think about. Come over here to create new, you can also come up to file, and choose new site, if you want to do that and it will open up the new site dialogue box. So let's get started and then I'll explain. Now what is a responsive website? I want to actually just start there real quick as we create the site. We're gonna kind of build it from the ground up and I'm gonna show you the techniques, the method, to create a fully responsive website. You can save any graphics into svg and use them as static backgrounds or slideshows.Ĭheck this tutorial for more detailed information.So we are gonna create a brand new site today. This is a basic tutorial using svg icons. One of the benefits of using svg in Adobe Muse is that you can resize the graphic in Muse. Click and drag to resize the svg element. Click on the white canvas to place the SVG. You will notice that your mouse arrow has a number when you drag more than one element.Ģ. You can drag more than one element at a time. Choose the location and change the format to SVG. Select the whole icon -> Right click -> Export SelectionĪ window will open. In Adobe Illustrator CC 2017, select the whole icon (you can group it to save time) and drag it to the Asset Export Window.You can use these icons or design your own. We are going to use these Round Flat Icons package from for this tutorial. In this tutorial you are going to learn how to save graphics in SVG format using Adobe Illustrator and how to use SVG in Adobe Muse. This means that the graphics can be scaled to any dimension without affecting the page-load time or the resolution of the element in your site. Now you should be thinking… Why should I save my logos or icons in SVG instead of PNG or JPG? The main reason is that SVG format is light and resolution independent. You can save your designs created in Adobe Illustrator in this format and place them on your website designed with Adobe Muse.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |