Adobe MuseWhat is Muse?| 00:00 | Adobe Muse is an application
that allows graphic designers
| | 00:03 | to create web sites with critical
components for small businesses
| | 00:06 | without having to know any
complex coding languages.
| | 00:10 | Designers use Muse for
creating web-friendly text
| | 00:12 | that easily flows around
objects and graphics.
| | 00:15 | Designing sites in a visual
print-like environment,
| | 00:19 | creating interactive elements like buttons
and links without knowing HTML or CSS,
| | 00:24 | visually adjusting elements like page size
without making any code level adjustments,
| | 00:30 | easily creating rich interactive
content like slideshows,
| | 00:33 | navigation bars and light boxes,
and deploying their sites directly
| | 00:37 | to their own web server, or hosted
services, like Adobe Business Catalyst.
| | 00:42 | Muse gives print designers an easy path
to getting their designs on the web
| | 00:46 | and it allows them to create
visually compelling sites like these.
| | 00:50 | If you're a designer Muse makes it easy
to take the mockups or graphics that
| | 00:54 | you've created in programs like
Photoshop, Illustrator and Fireworks,
| | 00:57 | and transform them into a working web site
without taking outside your comfort zone.
| | Collapse this transcript |
|
|
IntroductionWelcome| 00:04 | Hello! I'm James Fritz and welcome
to Muse Essential Training.
| | 00:08 | As a designer, I'm excited about Adobe
Muse, a brand-new product from Adobe
| | 00:14 | that allows designers to just design
and not worry about creating code.
| | 00:18 | In this title, I will take you through
everything you need to know so you can
| | 00:23 | easily create a web site with Muse.
| | 00:25 | We'll start out learning how to
create a site map with Master pages;
| | 00:28 | next I'll walk you through the steps of
building dynamic menus and slideshows.
| | 00:33 | Finally, we'll see just how easy it is to
export your site and publish it on the web.
| | 00:39 | If you're like me, you're excited to
learn how to create your own web sites.
| | 00:43 | So let's get started and
learn all about Adobe Muse.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium lynda.com subscriber,
| | 00:02 | you will have access to the Exercise
Files used throughout this title.
| | 00:06 | After you've download them, place
them on your Desktop for easy access.
| | 00:10 | Inside that folder are all of the
Exercise Files needed for each chapter.
| | 00:14 | Inside each chapter folder are individual
folders for each movie, with each asset needed.
| | 00:20 | If you don't have access
to the Exercise Files,
| | 00:22 | don't worry, you can also follow
along with your own assets.
| | 00:26 | There is also a possibility, when you
open a Muse file, that you could receive
| | 00:29 | a warning that your links to your
Assets are missing or modified.
| | 00:33 | If this happens to you,
there's a really easy fix.
| | 00:36 | If you see this warning, you
can click OK to dismiss it,
| | 00:39 | or if it says Fix Links
Automatically, you can try that.
| | 00:43 | Go to any page at all in your document
and open up your Assets panel.
| | 00:48 | Click on the first item, hold your
Shift key and click on the last item.
| | 00:52 | With all of these items selected
right-click and choose Relink.
| | 00:57 | Next, you'll need to browse to the
Assets folder in the Exercise Files
| | 01:02 | and find the Asset that it's asking
for; in this case it's arrow-white.png.
| | 01:07 | Don't worry; you're not going to
have to do this for all of them.
| | 01:10 | Select the item that it's
asking for and press Select.
| | 01:12 | It will automatically find the rest
of the items and you can press OK.
| | 01:17 | If for some reason it
doesn't find the rest,
| | 01:19 | just repeat the process until
you have all of them found.
| | Collapse this transcript |
| What's new in the August 2012 update| 00:00 | Since Muse is only available as a subscription,
this allows Adobe to release updates as often
| | 00:06 | as they like, as opposed to having to
wait years before pushing out a major release.
| | 00:11 | This is the first feature-rich update
since Muse was released back in May of 2012.
| | 00:16 | Let's take a quick look at
what has changed with this release.
| | 00:19 | The file that I currently have opened is
not in your exercise files, but I will be going
| | 00:23 | over these features in
depth later in this course.
| | 00:27 | Some of the changes in this version of
Muse are really hard to demonstrate on screen.
| | 00:31 | That's because they involve code optimizations.
| | 00:34 | For example, the HTML, CSS, and JavaScript are now
much more efficient and will render better on sites.
| | 00:40 | A good example of this is
CSS Gradients and Drop Shadows.
| | 00:44 | In earlier versions of Muse, if you used
the Drop Shadow or Gradient when you exported
| | 00:49 | your site to HTML, it would
automatically create raster versions of those files.
| | 00:55 | In this version, Muse will
create the necessary code.
| | 00:58 | This will result in smaller,
faster, and more efficient websites.
| | 01:02 | Let start by taking a look at some of
the interface elements that have changed.
| | 01:05 | We're going to go down to the Masters page,
and now in the Masters page I am going to
| | 01:09 | select this widget at the
top of the screen of the Menu.
| | 01:12 | When I click down and select the Home
button, this Home button has multiple states.
| | 01:17 | So if I go over to the States Panel, we can see
that we've got Normal, Rollover, Mouse Down,
| | 01:22 | and Active, and I could change any of
these by clicking on it and changing a property,
| | 01:26 | like adding a drop shadow or color.
| | 01:29 | But now instead of having to go over to the
States Panel, we have the States Panel built
| | 01:34 | into the Menu Bar at the top.
| | 01:36 | You will notice in the upper left-hand corner
it says Menu Item: Rollover with a hyperlink.
| | 01:41 | When I to click on Rollover, I don't
have to go to the States panel anymore.
| | 01:45 | You will also notice that these buttons at
the top now are blue with an underline when
| | 01:49 | they're a hyperlink.
| | 01:51 | In earlier versions they were black, and it
wasn't that obvious that you could click on
| | 01:54 | these to get an option.
| | 01:56 | Now that we've changed the color, it's a lot easier to see
that we can click on them to access additional controls.
| | 02:02 | If you use Muse on different size monitors,
this interface now gracefully degrades.
| | 02:07 | For example, you see on the upper right-hand
corner where it says Align and Text and has
| | 02:11 | the Width and Height next to it, if I go over
here and change the Width of the Muse window,
| | 02:16 | you will see it will start to collapse.
| | 02:19 | The Width and Height disappeared,
but Align and Text is still present.
| | 02:23 | As I make this smaller, the
X and Y coordinates disappear.
| | 02:26 | But as I bring this back,
more options appear again.
| | 02:30 | If you work with Muse on a large or small
monitor, now it will still be useful that
| | 02:34 | you could access these Menu Items, but if
you have to use a small one, you can always
| | 02:38 | go back to the Panels if needed.
| | 02:40 | Let's close the Masters page
and go to the Collections page.
| | 02:43 | On this page I am going to show
off one of my new favorite features.
| | 02:47 | We can now finally add Guides.
| | 02:49 | These Guides are Ruler Guides that we can grab
from the top or the left-hand Ruler on our page.
| | 02:55 | If you've used Photoshop, Illustrator, or
InDesign, you already know how to use these Rulers.
| | 02:59 | Just click and drag them out and
put them wherever you want on the page.
| | 03:03 | One little tip that I can't help but share
is if you go to the Ruler and want it at a
| | 03:06 | certain spot, just double-click your mouse,
and it will put the Ruler right there for you.
| | 03:11 | You can use these Ruler Guides to help
Align Objects to them to help with your design.
| | 03:16 | Another feature to help with
aligning is the Align Panel.
| | 03:19 | Over on our panels, I can click on the Align,
and now I can grab two different objects.
| | 03:22 | I'll just click and grab these two images over
here, and I can click Align on the left-hand side.
| | 03:28 | In earlier versions you actually had to use
Smart Guides or just manually try to do it.
| | 03:33 | This is a lot easier and more intuitive,
similar to the other applications.
| | 03:37 | If you don't want to use this panel, we
have the Align button at the top of the screen
| | 03:40 | that can accomplish the same task.
| | 03:43 | Let's close Collections and
go over to the About Us page.
| | 03:46 | On this page we have a large open area
where I want to insert an Adobe Edge animation.
| | 03:52 | Adobe Edge Animate is a new tool from Adobe which lets
you create web graphic animations without using Flash.
| | 03:59 | In a later movie we'll talk about how to
export the animation from Edge to bring it into Muse,
| | 04:03 | but right now let's just bring one in.
| | 04:06 | We're going to go to File > Place, and
we're going to navigate to our Assets folder.
| | 04:10 | Inside our Assets folder
we're going to go to edge.
| | 04:14 | In the edge folder we'll go into
publish and grab logo-animation.oam.
| | 04:20 | With this selected, we'll
click and put it on the page.
| | 04:23 | If we want to see the animation, all we
have to do is either Preview in the web browser
| | 04:26 | or click the Preview button.
| | 04:28 | When we click Preview, the
animation will appear right before us.
| | 04:32 | If you want to see this again, you have to
go back between Design and Preview or just
| | 04:36 | Refresh the page in your web
browser if you use Preview in web browser.
| | 04:40 | Back in Design mode, we'll scroll down a little bit,
and I am going to select this picture of a PDF.
| | 04:45 | If you want to add a PDF to your website,
it wasn't possible in earlier versions unless
| | 04:50 | you uploaded that file to a
website and then provided a link to it.
| | 04:54 | Now if we select any graphic at
all, we can link directly to a file.
| | 04:58 | I am going to go to the
Hyperlink menu and choose Link to File.
| | 05:02 | When I do this, Muse will ask me
where is the file we want to link to?
| | 05:07 | In our case, we're going to go to brochure.pdf.
| | 05:11 | Now that I have this set, when you click on the icon
in a web browser, it would download the PDF for you.
| | 05:17 | This isn't limited to just PDFs. You can
use Muse files if you wanted, zip files, MP3s,
| | 05:22 | or any type of file at all.
| | 05:24 | When you publish your site, it will
automatically upload this file to your server.
| | 05:28 | Let's close that page and go to Contact Us.
On Contact Us, we're going to add a form.
| | 05:33 | Now, it has been possible to add a form via
embedded HTML, but now it's a lot easier since
| | 05:39 | we can use the widgets inside Muse.
| | 05:41 | I am going to go over to the Widget Library
Panel, open up Forms, and drag out a Simple Contact Form.
| | 05:48 | Now that I have this dragged out, I could
modify the properties of this, but we'll cover
| | 05:52 | that in a later movie.
| | 05:53 | For now we're going to go to
Preview, and then I could try this out.
| | 05:57 | I'll into my Name, Email, and Message, and
then you could click Submit if this was online,
| | 06:01 | and it would send the message to the
person that the form was connected to.
| | 06:05 | One item of note, this Muse form will only
work if you're hosting with Adobe Business Catalyst.
| | 06:09 | If you're using your own solution,
you'll have to export this code to HTML and
| | 06:15 | then modify the code so it
can work with your own server.
| | 06:18 | Back in Design mode, there is one last big feature we're
going to talk about, and that's the built-in FTP.
| | 06:24 | If you are using your own server, in
earlier versions you'd have to export the code to
| | 06:28 | HTML and then use your
own FTP client to upload.
| | 06:32 | Now you don't have to worry about that
because we can go to File > Upload to FTP Host.
| | 06:37 | Inside this dialog box you can enter all of
your relevant information and click OK, and
| | 06:42 | then it will upload the files for you.
| | 06:44 | If you ever make a change to your layout--
be it a small text change or replacing an
| | 06:48 | image--when you upload, it's not going to re-upload the
entire site, it will just load the incremental changes.
| | 06:54 | This is just a quick overview of
some of the changes in this update.
| | 06:58 | There have been additional movies added to
this course that cover each of these new features
| | 07:02 | and changes in greater detail.
| | 07:04 | For a much more in-depth look at the
updates and new features in Muse or to see a list
| | 07:09 | of the updated movies,
please visit lynda.com/museupdates.
| | Collapse this transcript |
| What's new in the December 2012 update| 00:00 | This update to Muse is mainly focused on
giving you the ability to create mobile
| | 00:04 | versions of you website for phones and tablets.
| | 00:08 | Let's take a quick look at
what is new in this latest update.
| | 00:11 | Looking at our new Muse site right now,
you can see there is a new layout at the
| | 00:14 | top of the screen that says
Desktop, Tablet, and Phone.
| | 00:19 | This lets you switch between
alternate versions of your website, which are
| | 00:22 | designed for those specific devices.
| | 00:24 | I have already designed this website
with these finished, but we will be
| | 00:28 | learning how to do this in
greater detail later in the course.
| | 00:32 | At the moment, we are in the
Desktop view. which is the traditional view
| | 00:35 | of working in Muse.
| | 00:36 | When we click on the Tablet view, we can
see there is a version of this website
| | 00:39 | designed specifically for a tablet device.
| | 00:42 | And finally, when we click on the Phone
view, we have a smaller, more optimized
| | 00:46 | simplified version of our
website for a smartphone.
| | 00:50 | Let's take a look at one of these pages.
| | 00:51 | If I go to the Contact Us page, we can
see that this page is very small, and it
| | 00:56 | is designed for smaller phone.
| | 00:58 | If we hit the Preview button to switch
into Preview mode, we can see that it
| | 01:02 | says Preview Size iPhone 4.
| | 01:03 | If we wanted to, we could switch
between these views to see if it maybe an
| | 01:07 | iPhone 5 or Samsung Galaxy, or you can
choose other options over time as Muse is updated.
| | 01:13 | When I am in this view,
I can scroll and move around.
| | 01:16 | Just so you know, this is not emulating
the actual phone; this is just rendering
| | 01:20 | the actual device screen
size of that particular phone.
| | 01:23 | Let us go back in to the Design view,
and I am going to close this Phone page
| | 01:28 | and we are going to go to Tablet.
And in the Tablet View, I will go to the
| | 01:33 | Homepage and we will hit Preview. We can
test to see what this looks like on a tablet.
| | 01:37 | Here we can see the Preview Size is an
iPad. We can also choose Nexus 7 or a
| | 01:42 | Kindle Fire or one of the other devices.
| | 01:44 | Just like in the Phone view, this
isn't emulating the device; this is merely
| | 01:48 | showing us the resolution of that actual device.
| | 01:51 | A quick way to move between pages in
InDesign is the keyboard shortcut Command+J.
| | 01:56 | That also works inside Adobe Muse.
| | 01:58 | If you want to use this shortcut to
jump between pages, just press Command+J
| | 02:02 | or Ctrl+J on the PC.
| | 02:03 | When we hit this, a dialog box will pop
up, and we can start to type the name of
| | 02:07 | the Page that we want to go to.
| | 02:09 | So for example, if I want to go to the
homepage, I will type in Home and we will
| | 02:13 | see that there are three
different versions of our homepage.
| | 02:15 | There is the Desktop view, the
Tablet view, and the Phone view.
| | 02:20 | I am going to choose the
Desktop view and I will click OK.
| | 02:23 | At the top of the screen on our tabs, we can
see we have Home (Desktop) and Home (Tablet).
| | 02:27 | I can move these around and close them
whenever I would like, and we also have
| | 02:30 | the normal Overview by clicking on Q4-Overview.
| | 02:33 | We see there is the Desktop, Tablet, and Phone.
| | 02:36 | The keyboard shortcut to jump
between these is Command+7, Command+8, or
| | 02:41 | Command+9. Ctrl also works
on the PC for these shortcuts.
| | 02:45 | Another change that has been added to
this version of Muse is the redesign
| | 02:48 | of the Hyperlink menu.
| | 02:49 | I am going to go to the About Us page,
and on this page, I am going to select
| | 02:53 | the text Collections because I want to
create a link to the Collections page.
| | 02:58 | Now in the past, if you would have gone
to the Hyperlink menu, there would have
| | 03:01 | been a pop-up and you could
choose that particular page.
| | 03:04 | While that is still true,
| | 03:05 | they have just added a
new way to filter the links.
| | 03:08 | If I click on this, you can see,
sure, I could choose Collections.
| | 03:11 | As I start to type in this dialog box "col,"
it will filter down to just the links
| | 03:16 | that have col inside it:
| | 03:18 | the Desktop and Tablet versions
right now. And then I will just click on
| | 03:21 | Collections to select that hyperlink.
| | 03:22 | If I want to change the Link Style, I
will just go to the Links, and I will
| | 03:27 | change this to the Body
Text Style, which looks better.
| | 03:29 | If I change my mind and I no longer want
this hyperlink, I can just hit the X to
| | 03:33 | cancel the hyperlink.
| | 03:34 | Back in the Overview page, I
am going to go to Contact Us.
| | 03:37 | I am going to show you one little Form
change that has happened in this version.
| | 03:41 | You can see on this Form, there is an
Image Verification, which is sometimes
| | 03:45 | referred to as CAPTCHA.
| | 03:46 | What this is is a way to prevent
automated robots, or bots, from filling in forms
| | 03:51 | and submitting them
automatically on your website.
| | 03:53 | To add this to any form, just select
the form and go to the Widget menu and we
| | 03:58 | can see there is a checkbox for CAPTCHA.
| | 04:00 | If you do not want it, just turn it off.
But when it is added, the user of the
| | 04:04 | website just has to type
in what that image says,
| | 04:07 | in this case a b c d e f.
Then they are able to submit the Form.
| | 04:12 | It might be a different image
depending on when they visit the website.
| | 04:16 | This was just a quick overview of
some of the changes in this update.
| | 04:19 | There have been additional movies added
to this course that cover each of these
| | 04:22 | new features in more detail.
| | 04:23 | For a more in-depth look at the updates
and new features in Muse, or to see a list
| | 04:28 | of the updated movies, please
visit http://lynda.com/MuseUpdates.
| | Collapse this transcript |
| What's new in March 2013 update| 00:00 | This update to Muse contains a number of
small but useful additions that will speed up your
| | 00:06 | workflow and help remove costly errors.
| | 00:09 | Let's take a quick look at what is new.
| | 00:11 | The most obvious change to Muse is
the addition of a visual spell check.
| | 00:16 | You can see at various places on this page,
inside the text there's a little red squiggly
| | 00:20 | line underneath some words.
| | 00:23 | That red squiggly line means that this
particular word isn't in the dictionary.
| | 00:26 | So, I'm just going to come down here and I'm
just going to double-click to switch to my Text tool.
| | 00:31 | And if I put my cursor in this word, I can
right-click or Ctrl+Click on a Mac and it
| | 00:35 | will give me some options which I can choose.
| | 00:37 | And in this case, I know the word is attend.
| | 00:40 | As soon as I choose this, the word is corrected.
| | 00:43 | Now, there's another word up here,
| | 00:44 | this person's name, that isn't in the
dictionary, but I know this is spelled correctly.
| | 00:48 | So, if I right-click, I can just add it to
the dictionary, and now throughout my site,
| | 00:52 | I'll never have to worry about that
word showing up spelled wrong again.
| | 00:57 | You can also toggle the spell check on and off.
| | 00:59 | So, if you don't want to see the red squiggly
line, all you do is you go to your Edit menu
| | 01:04 | and go to Spelling.
| | 01:05 | You can also use the keyboard shortcut Command+Option+
I or Ctrl+Alt+I on the PC to toggle this on and off.
| | 01:12 | But, for now, we'll just leave it on.
| | 01:14 | Another change is how master pages work.
| | 01:16 | I'm going to close this page
and go to the Plan view.
| | 01:19 | You'll notice in the Plan view that my
master page at the bottom--I am just going to go
| | 01:23 | to do this. You can see how there's a logo
and then the menu at the top of the screen.
| | 01:28 | Back in the Plan view, I'm going to go to
the normal page, let's say the homepage.
| | 01:32 | And if I try to select this item, you can
see I'm not able to grab it, but if I grab
| | 01:36 | any pictures and put it on top of it,
you'll see the pictures are above the background
| | 01:40 | elements that are on the master page.
| | 01:42 | Well, what happens if I want to have master page
items above the page elements on the individual page?
| | 01:48 | In previous versions,
there was no way to fix this.
| | 01:51 | Well, I'm just going to do an Undo.
| | 01:53 | Now, if I go to the actual master page,
I can select any master page item and go to
| | 01:59 | the Object menu and then go
to Move To > master Foreground.
| | 02:03 | You'll see that it gets this little red border.
| | 02:06 | This means it will be above
everything on a normal page.
| | 02:10 | So now if I go back to the Desktop page
and I select this item and I move it here, we
| | 02:14 | can see that it's underneath that picture.
| | 02:17 | This way you can make certain elements on
master pages be above everything or below.
| | 02:22 | Now we have a choice.
| | 02:24 | Let's go back to the Plan view again.
| | 02:26 | And the last thing with masters I want to talk
about is the ability to base masters on each other.
| | 02:31 | What we're going to do is I'm going to
select the master page down here, right-click, and
| | 02:35 | choose Duplicate page.
| | 02:37 | And you can see here we've got A-Master,
and I'm going to call this one B-Master.
| | 02:40 | Now, on the B-Master, I'm going to go to this page,
and I'm just going to make a slight visual change.
| | 02:46 | We're going to change the browser fill color
over here just to this other color so we can
| | 02:50 | see that there's a difference.
| | 02:51 | Now, if I apply this master to the second-level
pages, we can see that it gets applied to all of them.
| | 02:57 | It will all be connected to the B-Master,
and they all have this darker background.
| | 03:01 | Well, what happens if I make a
change to the menus on all of the pages?
| | 03:07 | The old way we'd have to do it is I'd have
to go to the A-Master--and let's say I made
| | 03:11 | this a little smaller and resize this.
| | 03:13 | As soon as I do this, you'd see the top row--
the Home, Collections, and so on--they all
| | 03:17 | get a little smaller.
| | 03:18 | But the bottom pages, the
secondary B-Master pages, it wasn't updated.
| | 03:23 | I would have to go back to the
B-Master and manually make this change.
| | 03:27 | This is really a lot of work.
| | 03:28 | What I really would like to do is have my
B-Master based on my A-Master so they have
| | 03:33 | a connection to each other.
| | 03:35 | So, what we're going to do is just close these
pages and I'm going to delete this page because
| | 03:39 | I don't really need it anymore.
| | 03:40 | Now, I'm going to right-click on the
A-Master, and I'm going to duplicate the page.
| | 03:44 | We're going to call this B-Master again.
| | 03:46 | But, this time, I'm just going to
right-click and go to Masters and say A-Master.
| | 03:52 | When we do this, you can see that the
B-Master now is based on the A-Master.
| | 03:57 | When I go to this page, I'm just going to
make a slight change so we can see that the
| | 04:00 | pages are different again.
We'll just add this dark background.
| | 04:02 | And then I'll apply this to all of these
pages, so B-Master, B-Master, and B-Master.
| | 04:10 | Now, if I go back and I make a change on the
A-Master again--we'll just make this even smaller--
| | 04:17 | we can see it's going to be updated throughout.
| | 04:20 | On the B-Master, sometimes you'll have that
little item on top. We'll just get rid of that.
| | 04:24 | There we go. We can see the B-Master is
now connected to the A-Master.
| | 04:28 | Any change we make on the A-Master, where
it's based from, will automatically be updated on
| | 04:36 | the rest of the pages.
| | 04:38 | This is a really useful feature if you happen to
have a very complicated site with lots of master pages.
| | 04:43 | The last change we're going to look
at is in the Tablet or the Phone view.
| | 04:47 | I'm going to switch to the Tablet view, and
I'm just going to go to any one of these pages.
| | 04:50 | I'll just double-click here.
| | 04:53 | And if I want to preview this page,
we'll go to Preview, and we can see here is the
| | 05:00 | portrait preview for a
tablet device such as the iPad.
| | 05:03 | Well, now we have the addition of a little
button that we can toggle both the horizontal
| | 05:07 | and portrait version.
| | 05:08 | So, let's click this button and
now we can toggle back and forth.
| | 05:12 | One last little change is
just a little keyboard shortcut.
| | 05:15 | When you're in Preview mode, regardless of
you're in Tablet, Mobile Phone, or a Desktop,
| | 05:20 | you can now hit the Escape key
to go back to the Design mode.
| | 05:23 | This was just a quick overview of
some of the changes in this update.
| | 05:27 | There have been additional movies added to
this course that cover each of these new features
| | 05:30 | and changes in greater detail.
| | 05:32 | For a more in-depth look at the updates and
new features in Muse, or to see a list of the
| | 05:37 | updated movies, please
visit lynda.com/museupdates.
| | Collapse this transcript |
| What's new in the June 2013 update| 00:00 |
This update to Muse might be the biggest
update ever.
| | 00:03 |
It included Parallax scrolling, in
browser editing, and most dear to my
| | 00:07 |
heart, a Layers panel.
Let's take a quick look at what's new in
| | 00:11 |
this update.
If you work with a lot of pages in your
| | 00:13 |
websites, it can become overwhelming in
the plan view to kind of work and
| | 00:17 |
rearrange them as you happen to add
pages.
| | 00:20 |
Well, there's a new feature that's been
added to help you collapse pages, to make
| | 00:23 |
it easier to work with the top level
sections.
| | 00:25 |
If I go to this section right here, with
Collections, you could see there are some
| | 00:29 |
sub pages.
And when I mouse over it, a little double
| | 00:32 |
arrow kind of shows up underneath it.
If I click on this, it will temporarily
| | 00:36 |
collapse all of those pages.
Now you can see that the Collections is
| | 00:41 |
still there, with the sub pages, and it's
like this little card stack behind it, so
| | 00:45 |
you know there's additional pages.
If you want to get them back, you just
| | 00:48 |
mouse over and click again.
It's a little time saver, but it'll save
| | 00:52 |
you quite a bit of time.
Another big addition is the addition of
| | 00:56 |
the Layers panel.
Let's go to the homepage, and on the
| | 00:59 |
homepage, you'll see I have the Layers
panel open.
| | 01:02 |
If you've used InDesign or Illustrator
before, this will be second nature.
| | 01:05 |
And it's nice to finally have a proper
Layers panel inside Muse.
| | 01:09 |
So, what I'm going to do is click down
here and make another layer, and it's
| | 01:12 |
called layer two.
Then, I'm just going to double-click on
| | 01:15 |
layer two, and we'll call this text.
Now, all I have to do, is go ahead and
| | 01:20 |
select an item.
Let's grab this text frame right here,
| | 01:23 |
and I'm just going to go in and we'll
just open this up and we'll just find
| | 01:29 |
that particular text frame.
Here it is, and I can drag it all the way
| | 01:33 |
up to the Text layer.
As soon as I do this, you'll see it gets
| | 01:36 |
the red bounding box, just like you'd
expect with InDesign.
| | 01:40 |
In fact, I can turn this layer on and off
to hide it, or even lock it, so I don't
| | 01:43 |
have to worry about selecting it.
That can be really useful for widgets, or
| | 01:47 |
really complicated layouts.
We'll learn more about that in a later movie.
| | 01:50 |
The next big change is the addition of
Parallax scrolling.
| | 01:54 |
I'm going to go to the Parallax page, and
on this page, it doesn't look like much
| | 01:59 |
is going on, but I'm going to hit the
Preview button.
| | 02:02 |
On the Preview page, as you start to
scroll, watch what happens.
| | 02:06 |
Well see there's a lot of animation now
and various page items they're just
| | 02:10 |
moving around.
Parallax scrolling is a new trend in web
| | 02:15 |
design and it's another way to create an
interesting animated experience.
| | 02:19 |
We'll take a good look at this in a later
movie in this course.
| | 02:23 |
And finally, we now have the addition of
in-browser editing.
| | 02:27 |
What this means is once you've published
a website online, you or maybe a client
| | 02:31 |
may want to make changes, but you might
not have access to Muse.
| | 02:34 |
This allows you to edit a web page
directly from in the browser to make
| | 02:38 |
minor text and image changes.
Let's take a look at this in action.
| | 02:42 |
Now, I'm inside the web browser, and I'm
already logged in as a business catalyst
| | 02:47 |
user to edit this page.
You'll learn more about how to do this,
| | 02:50 |
specifically, in the later movie in this
course.
| | 02:53 |
But for right now, let's just take a
quick look at what it is.
| | 02:56 |
While I'm logged in, I can switch between
the various devices, desktop, phone, or
| | 03:00 |
tablet view.
And if I find something that I want to
| | 03:02 |
edit, when I mouse over, you'll see it
will either be a picture or text.
| | 03:07 |
If it's text, I'm just going to click
Edit, and I'm going to go in here and
| | 03:10 |
just change the dates.
Well, this will be 2013, since it's a
| | 03:14 |
little newer, and we'll click Update.
As soon as we do that, it will update
| | 03:18 |
directly on the site.
Eventually, when you go back into Muse,
| | 03:22 |
it will tell you that a change has
happened online.
| | 03:24 |
And you can decide if you want to bring
in those changes directly into Muse or
| | 03:28 |
ignore them.
For now, this is just a quick look at
| | 03:31 |
what it is, and we'll learn more about
that later on.
| | 03:35 |
This was just a quick overview of some of
the changes in this update.
| | 03:38 |
There have been additional movies added
to this course that cover each of these
| | 03:41 |
new features and changes in much greater
detail.
| | 03:44 |
For a more in depth look at the updates
and new features in Muse, or to see a
| | 03:48 |
list of the updated movies, please visit
lynda.com/MuseUpdates.
| | 03:54 |
| | Collapse this transcript |
|
|
1. Thinking Like a Web DesignerUnderstanding print vs. web design| 00:00 | Before we get into how to use Muse, let's step
back and take a high-level look at the difference
| | 00:05 | between Print and Web Design.
| | 00:08 | Since Muse is designed for people who are
familiar with Print, it is important to talk
| | 00:12 | about some fundamental shifts and thinking that will
help you with your transition to designing for the web.
| | 00:18 | The hardest part about the Transition between Print
and Web Design is learning to give up control.
| | 00:24 | When it comes to Print, you have complete
control over everything. We can decide what fonts
| | 00:28 | we want to use, pictures, where everything
is going to be, and how it's going to look.
| | 00:32 | How it looks on screen is how it
should look when it's printed out.
| | 00:36 | In fact, if it didn't, that would be a problem with the
printer, and we might even have to reprint our job.
| | 00:41 | On the other hand, with the
web we have very limited control.
| | 00:44 | We can set the initial appearance of
things but the end user can override them.
| | 00:48 | So we have to learn the differences between
Print and Web to make designing for the web easier.
| | 00:53 | Let's take a look at some categories so we
can learn the differences between designing
| | 00:56 | for Print and the Web.
The first one up is Text.
| | 01:00 | When it comes to designing for Print, we can
set the font, the size, and the line breaks.
| | 01:05 | In fact, we'll spend a very long time
making sure there's no hyphens, and we don't have
| | 01:09 | any rivers showing up.
| | 01:10 | However, when it comes to the web, we can set an
initial appearance, but the end user can override this.
| | 01:16 | So if you decide that you want to use the
font Times but the end user wants to use
| | 01:21 | Garamond or even Comic Sans, they can change that
and there is nothing you can do about that.
| | 01:26 | For color, when we're working with Print,
primarily it's going to be CMYK and Spot, but on the
| | 01:32 | web we're going to be using RGB Color
Space and Hexadecimal numbers to signify exactly
| | 01:38 | which color that we what to use.
| | 01:40 | Now for Print, we're kind of used to that,
and we know that there are some limitations
| | 01:43 | that we can't show super bright colors, but on the
web we actually have a lot more color to play with.
| | 01:50 | So in one sense I prefer to work for the web with Color
because it's easier and there are more options.
| | 01:55 | When designing around Page Size for
Print, sometimes we can set it and forget it.
| | 02:00 | That means if I'm going to design a brochure,
and it's going to be 8.5 by 11, I know it's
| | 02:05 | going to be 8.5 by 11,
and I can design it that way.
| | 02:08 | Now granted, if the client comes and changes
their mind, I will have to update my design,
| | 02:13 | but I know that when I'd sent to the printer
it's going to come back as 8.5 by 11.
| | 02:17 | It's not going to become 11 by 17 or some other
size. It's the way that it was in the beginning,
| | 02:22 | all the way to the end.
On the web, it's a little different experience.
| | 02:25 | There really is no real size.
| | 02:28 | Sure, we can set a size such as 960 pixels
wide, but each page of that site could be
| | 02:34 | a different height. One page could be 500
pixels, another 1000, another 10,000, if
| | 02:39 | there is a lot of content.
| | 02:41 | So there really isn't a specific size, plus
there is different browsers that render it
| | 02:45 | a different way. I might be reading a web
page on my smart phone or tablet or even on
| | 02:50 | a 30-inch monitor and each of those
will display it in a different way.
| | 02:54 | When it comes to Navigation, for Print we use
page numbers, sections, and maybe even some tabs.
| | 03:00 | But you don't really need to have that much
because the end user can just use their fingers
| | 03:03 | to turn between the pages and
flip around to get where they want.
| | 03:07 | On the web we have to set up menus and
hyperlinks, because if you don't do that, there is no way
| | 03:11 | to move between the pages other than
manually typing in a name of another page, and they
| | 03:15 | probably wouldn't even know what that is.
| | 03:17 | There is also a very strong usability
factor involved, because if you put your menu at a
| | 03:22 | wrong spot or a very difficult place to read,
it will be very hard for them to move around
| | 03:27 | your web page, where with Print they could just
move between the pages whenever they see fit.
| | 03:32 | For Document Construction with Print,
sometimes the ends can justify the means.
| | 03:37 | What I mean by that is in a perfect world
we would all design or print documents with
| | 03:42 | master pages, paragraph, and character
styles, and layers the best way possible.
| | 03:47 | But sometimes when you just don't have
enough time to work the correct way you can just
| | 03:51 | put something together, and if it prints
out okay, so be it, it will look good and the
| | 03:56 | end user won't even know how it was built.
| | 03:58 | On the other hand, with the web this is very,
very important. If you don't build a web page
| | 04:03 | correctly, there'll be a big usability
problem because users might not be able to get to
| | 04:07 | the page in the right way, the page
might load slower and the whole SEO factor--which
| | 04:12 | stands for Search Engine Optimization.
| | 04:15 | If you don't build your page correctly, it
will be invisible to a search engine and nobody
| | 04:19 | will be able to find it.
| | 04:21 | When working with File Size
in Print, it's mostly irrelevant.
| | 04:24 | What that means is I could use a multilayered,
multi-gigabyte PSD file if I wanted to in
| | 04:31 | a Print document, because when I end up
making a PDF or printing it, any excess information
| | 04:36 | will be disregarded, and it doesn't matter.
However, on the web this is of huge importance.
| | 04:42 | It's going to always be a
balance between Quality and File Size.
| | 04:46 | If you want your images to look good, they are going
to be larger, but it will take longer to download.
| | 04:51 | If you want your page to load faster, you'd
have to have your file size smaller, but then
| | 04:54 | the images won't look as good.
| | 04:56 | There is a delicate balance between the
two that you're going to have to learn.
| | 05:00 | When it comes to Accessibility, there isn't
that much we can do with Print unless we're
| | 05:04 | talking about PDFs or EPUBs.
| | 05:06 | However, one thing we should keep in mind
is try to keep the font sizes larger instead
| | 05:11 | of focusing on super small sizes.
| | 05:14 | For people with visual impairments, it
can be hard to read fonts that are smaller.
| | 05:18 | For the web, accessibility is huge. It's
important for SEO and for people with visual impairments.
| | 05:23 | We can help improve this by adding tags,
alternate text, and other information to help people
| | 05:28 | process this information.
| | 05:31 | When you're finished with your document
and you are ready to test or troubleshoot, with
| | 05:34 | Print it's fairly straightforward. We
need to check the PDF and maybe a proof of the
| | 05:38 | printer for color shifts. If
everything looks good, we're done.
| | 05:42 | On the other hand, with the web this can be
very painful and sometimes takes even longer
| | 05:46 | than the design process.
| | 05:48 | You need to test your website in various
browsers and OSs for compatibility problems.
| | 05:53 | Even though print and web design are
different mediums, the end result is the same.
| | 05:57 | You need to establish a clear message
to your customer in an appealing way.
| | 06:02 | While the techniques that you will employ
to reach this result may be different, the
| | 06:05 | end result should be the same: a great design.
| | Collapse this transcript |
| Understanding web graphics| 00:00 | When you create graphics for a print layout,
what applications do you end up using?
| | 00:04 | I bet you probably use
Photoshop and Illustrator.
| | 00:07 | From these programs you can generally
create a large number of formats,
| | 00:12 | like PSD, TIFF, AI, EPS and even PDFs.
| | 00:15 | When it comes to the Web you can
continue to use Photoshop and Illustrator,
| | 00:19 | and even Fireworks to create your graphics,
but instead of using PSD and AI files,
| | 00:24 | you will need to use
JPGs, GIFs and PNGs.
| | 00:27 | The reason we use these is because they're
small files and download pretty quickly.
| | 00:32 | They also are all supported
by the major web browsers.
| | 00:35 | If you put an Illustrator file on your
web page, it wouldn't display as a picture,
| | 00:39 | instead you would have
to download it as a file,
| | 00:42 | and you could only open it if you
had Illustrator on your computer.
| | 00:45 | You can easily create these files
from a wide variety of programs
| | 00:49 | including Fireworks,
Photoshop and Illustrator.
| | 00:52 | Let's take a look at each
of these formats in detail.
| | 00:55 | JPGs are great for photographs.
| | 00:57 | They're relatively small files,
but they have lossy compression.
| | 01:01 | What I mean by that is they get worse
over time everytime you resave the file;
| | 01:06 | it's kind of like photocopying a photocopy.
| | 01:09 | In order to keep your pictures looking
good, you want to keep a non-lossy or
| | 01:13 | a lossless version of it available for
editing, such as a TIFF or a PSD file.
| | 01:18 | Then if you have to make a change to the
JPG, just go to the original file, make
| | 01:22 | the change and then re-export or save a fresh
JPG each time you have to put it on the web.
| | 01:28 | GIF or sometimes pronounced this GIF are
used for areas of flat color and logos.
| | 01:35 | So you can see this logo
over here is straight blue.
| | 01:39 | So this is going to be a much smaller and
crisper logo as a GIF as opposed to a JPG.
| | 01:44 | They also support basic animation
and have limited transparency support.
| | 01:49 | Although the transparency support isn't
ideal, since it's only one bit transparency.
| | 01:55 | However when it comes to transparency,
you should consider using PNGs.
| | 01:58 | PNGs support 256 levels of
transparency versus one for GIFs.
| | 02:03 | So you can see the image on the
right has a nice soft Drop Shadow,
| | 02:07 | and it wouldn't look
nearly as good as a GIF.
| | 02:09 | PNGs on the other hand are larger files,
but they are lossless which means you can
| | 02:14 | re-edit them and they are not going to get
worse or re-encode every time you make a change.
| | 02:20 | Another advantage of using PNG files is
you can roundtrip edit with Fireworks.
| | 02:23 | So if you create a graphic in Fireworks
and save it as a Fireworks PNG and
| | 02:28 | place it in Muse, if you edit the file in
Fireworks it will update again inside Muse.
| | 02:34 | And finally, we have PSD files.
| | 02:35 | Now I know earlier I said that you
can't use PSD files on the web,
| | 02:40 | but with Muse we can
take a little shortcut.
| | 02:42 | When you put a PSD file in your Muse
layout it's linked to the PSD file,
| | 02:47 | but when you upload your web site, Muse
will automatically translate the PSD
| | 02:52 | into the appropriate format.
| | 02:53 | So there's no worrying about
having to put a PSD online;
| | 02:56 | you can continue to
use them inside Muse.
| | 02:58 | Now some of their advantages are that
you can work with them as buttons,
| | 03:03 | you can import all of the various layers, and
it supports roundtrip editing with Photoshop.
| | 03:08 | Web sites can display content
other than these image formats.
| | 03:12 | Multimedia like Flash, videos,
audio and interactive elements
| | 03:17 | are all supported by
modern web browsers.
| | 03:20 | In later chapters we'll learn how
to work with multimedia content.
| | Collapse this transcript |
| Creating web graphics| 00:00 | Saving a file for the Web may seem as
simple as going to File > Save As > JPG.
| | 00:06 | However, if you don't take the time
to properly optimize the graphic,
| | 00:10 | you may end up creating a file that is
multiple times larger than it needs to be.
| | 00:14 | In this movie, we will take a look at
optimizing a graphic for the Web out of Photoshop.
| | 00:19 | I'm inside Photoshop CS6 with
the photo of this collapsing house.
| | 00:23 | Now if you have an earlier
version of Photoshop,
| | 00:25 | don't worry, this technique works the
same regardless of what version you're in.
| | 00:30 | This image is a photograph and photographs
are best rendered as JPGs for the Web.
| | 00:34 | Now if I try to save this out as a Web
graphic, this image maybe way too large,
| | 00:39 |
and in fact, I can see down here it's telling
me it's 6.6 MB, which is a little too big.
| | 00:45 | So what I need to do is remove some
of these excess pixels in Photoshop
| | 00:49 | before I save it out
as a Web graphic.
| | 00:52 | So I'm going to go up
to Image > Image Size.
| | 00:54 | I can also use the shortcut Command+Option+I
on the Mac or Ctrl+Alt+I on the PC.
| | 01:00 | Now in this dialog, I need to
reduce the number of pixels.
| | 01:03 | We can see right now this image is 3300
pixels wide and almost 2200 pixels high.
| | 01:09 | That is larger than most
screens on computers today.
| | 01:12 | So we're going to reduce
the number of pixels.
| | 01:14 | Before I do that, I'm going to change
the method of this to Bicubic Sharper,
| | 01:19 | which is best for reduction
as you can see here.
| | 01:21 | Now I'm going to go up to the top
and change this to 700 pixels,
| | 01:25 | because that's the width of the
image that I want to put online.
| | 01:28 | And you can see we've already
reduced our image from 6.8 MB
| | 01:33 | down to 316 K just by cutting
out some of the extra pixels.
| | 01:37 | So I'm going to click OK
and now our image is smaller.
| | 01:41 | We're going to view this at 100%
by going to View > Actual Pixels.
| | 01:46 | Now we can see it still looks good, but
we wouldn't be able to zoom in forever
| | 01:50 | to get more detail because we've
disregarded that additional information.
| | 01:53 | But for the Web, that's perfectly fine.
| | 01:56 | Now that we have the image the size that we
want it to be, we need to save it for the Web.
| | 02:00 | Now the incorrect way to do
this is to go to File > Save As.
| | 02:04 | If you do this and choose a format like
JPG, I'm going to save this to my Desktop.
| | 02:11 | You're going to see I don't
have that much control.
| | 02:14 | Sure I can play with this slider
and get a preview of the file size,
| | 02:18 | but I don't know what this
picture is going to look like.
| | 02:20 | I would have to export, open it
back up again and take a look at it,
| | 02:23 | and it would waste a lot of time.
| | 02:25 | So I'm going to hit Cancel.
| | 02:27 | A better way to save your graphics
out is to go to File > Save for Web.
| | 02:32 | Now in this dialog you may
be in Original tab up here,
| | 02:36 | but what we're going to
do is go to the 2-Up tab.
| | 02:38 | What this is going to do is let me
see the original image in Photoshop,
| | 02:41 | as well as the exported image.
| | 02:44 | So right now if I click down
here, we can see it's set to GIF.
| | 02:46 | Well I don't want this as a
GIF; I want this as a JPG.
| | 02:50 | So I'm going to come up here
and change this from GIF to JPG.
| | 02:54 | Now here is the Quality.
| | 02:56 | If I bump this up all the way to 100,
that's the best quality possible,
| | 03:01 | and you probably wouldn't be able to tell
the difference between the two of these.
| | 03:04 | Unfortunately, we can see this is
264K which is way too large for us.
| | 03:10 | So what we need to do
is lower the amount.
| | 03:12 | So I'm going to change the Quality here
down to about 47%, and now you can see
| | 03:18 | we've cut this by over 50% down to almost
100K, and it looks pretty much the same.
| | 03:24 | If we try to go lower, if
I go all the way down to 9%,
| | 03:28 | now we're getting pretty small, but
we're starting to see these artifacts.
| | 03:32 | In fact, if I zoom in a little bit,
you'll see it starts to look worse,
| | 03:35 | so I'll grab the Hand tool
here and pan a little bit,
| | 03:38 | and we're not getting
the detail that we want.
| | 03:40 | So you have to find a combination
of Quality and File Size that you're
| | 03:44 | comfortable with and I personally
find usually around 50% works the best.
| | 03:49 | If you want to compare more
options, you can go to 4-Up
| | 03:53 | and I can see what the higher
quality is, here is a 49,
| | 03:56 | and I could go up to let's say 74. Let's
see here is another 49, and then a 12.
| | 04:03 | But we can see the combination of
the best quality, the worst and then
| | 04:08 | something in between, and figure
out what you're comfortable with.
| | 04:10 | If I like this one the most, I'm
going to click this and then hit Save.
| | 04:14 | I'm going to put this on my
Desktop and we'll call it jpg.jpg,
| | 04:20 | and now we have exported
this for the Web.
| | 04:22 | Now let's take a look at a GIF.
| | 04:24 | As we learned in an earlier movie,
GIFs are great for logos or areas
| | 04:29 | with flat color and basic transparency,
and this picture is perfect for that.
| | 04:34 | So if I go to File > Save for Web, we
can see that if I left this as a JPG,
| | 04:40 | the file would be small, but we
wouldn't have any transparency.
| | 04:43 | So I' m going to come down
here and change this to a GIF.
| | 04:47 | Now we have transparency available.
| | 04:49 | Over here is a Color Table where you
can reduce the number of colors available
| | 04:52 | to reduce the file size, but by default
it's actually doing a pretty good job.
| | 04:56 | So we are just going to leave
this as a GIF and click Save.
| | 05:00 | We'll put this on our Desktop
as a GIF and there we go.
| | 05:03 | Finally, we have a PNG.
| | 05:04 | PNGs are great if you want to have a
lossless image that you need to edit later,
| | 05:09 | or if you have transparency
with multiple levels,
| | 05:11 | for example this nice soft Drop Shadow,
so this is a perfect candidate for a PNG.
| | 05:16 | So we're going to go to File > Save
for Web and here we can see with a GIF,
| | 05:22 | the Drop Shadow just wouldn't look very good,
it doesn't show the multiple levels so
| | 05:26 | you would see sure a little bit of
transparency but that really wouldn't
| | 05:29 | look good if it was on
a colored background.
| | 05:30 | So I'm going to go to this
one and switch it to a PNG-24,
| | 05:35 | and as you can see, it has
a nice soft Drop Shadow.
| | 05:38 | We'll click Save, put it on our Desktop,
and now we have a nice PNG graphic.
| | 05:43 | If you use Illustrator or
Fireworks to create Web graphics,
| | 05:46 | this technique of saving for
the Web will be quite similar,
| | 05:49 | no matter which program you use, your
end goal is to create high-quality images
| | 05:54 | at the smallest file size possible
for placement within Muse.
| | 05:58 | If you'd like to learn more
about creating Web graphics,
| | 06:00 | check out Mordy Golding's Illustrator
CS5 for the Web and Interactive Design,
| | 06:05 | Jan Kabili's Photoshop CS5 for the Web
| | 06:08 | or Jim Babbage's Fireworks
CS5 Essential Training.
| | Collapse this transcript |
|
|
2. Understanding the Muse InterfaceWorking with the different views| 00:00 | Some applications like Adobe
Photoshop can seem overwhelming
| | 00:03 | because of the sheer number
of functions that they can do.
| | 00:06 | If you're not familiar with the program,
you might not know where to begin.
| | 00:10 | Muse helps solve this problem by
having a built-in workflow to take
| | 00:15 | you through the steps of building a
web site from the initial site map
| | 00:18 | to publishing and managing it online.
| | 00:21 | At the top of the screen,
we have five different modes;
| | 00:24 | a Plan mode, a Design mode, a Preview mode,
a Publish mode and finally a Manage mode.
| | 00:31 | Each of these will take us though various
stages of the development of our web site.
| | 00:35 | We're going to begin in the Plan mode.
| | 00:38 | The Plan mode is where we build our
structure of the site, or the site map.
| | 00:43 | Think of this as a Pages panel like in
InDesign or another page layout program.
| | 00:48 | In here we can see all of the different
pages of the web site, move them around,
| | 00:52 | organize and even apply master pages.
| | 00:54 | While we're in this mode, we
can at the top of the screen,
| | 00:57 | change the Size of our thumbnails,
we can make them larger
| | 01:00 | and we can make them smaller if we
want to fit more of them on the page.
| | 01:03 | We also have this little Master Badge down here.
| | 01:05 | Where if I turn this off, you can see the
master page that they're connected to,
| | 01:09 | such as Static, disappear or appear, and
we can also turn the Thumbnails on or off.
| | 01:15 | If we turn this off, we'll actually have
a little better performance on the page.
| | 01:19 | The next mode is the Design mode.
| | 01:21 | The Design mode is where you'll spend the vast
majority of your time building your web site.
| | 01:25 | Now if I want to go to the Design mode,
I can just press the Design button,
| | 01:29 | but more often I find myself just double-
clicking on the page that I want to work on.
| | 01:33 | So I'm going to double-
click on the Homepage
| | 01:36 | and that immediately brings
me to the Design mode.
| | 01:38 | If I ever want to go back to the Plan
mode again, I can either click on Plan
| | 01:43 | or go here to go back to the Plan view.
| | 01:45 | So either way works.
| | 01:46 | Inside the Design mode,
this is where I can work.
| | 01:49 | You can see I have my tools on the side, I
can select objects, I can move them around,
| | 01:53 |
transform, add content; this is where
you spend most of your time designing.
| | 01:59 | If you want to preview what your
site is going to look like online,
| | 02:02 | rather than having to export the
code and view it in a web browser,
| | 02:05 | there is actually a
Preview built inside Muse.
| | 02:08 | So if we go up to Preview, it will
render this page inside a built-in WebKit
| | 02:13 | rendering engine which is the same
engine used by Safari and Chrome.
| | 02:18 | Inside the Preview mode any
interactivity will function.
| | 02:21 | As you can see when I rollover
this menu, we have drop-downs.
| | 02:24 | As well as when I come over here, this
is a hyperlink going to another page.
| | 02:28 | And in fact if I click on it, it
will even go that page for me.
| | 02:31 | When I'm done with the Preview mode,
I can go back to the Design mode again
| | 02:35 | just by clicking up here.
| | 02:37 | There are a few other ways to go between
these modes, for example I spend a lot
| | 02:41 | of time going back and forth between
Design and Preview when working.
| | 02:44 | So rather than having
to hit these buttons,
| | 02:46 | there is a couple keyboard
shortcuts that I use.
| | 02:49 | If I'm in Design mode and I
want to go to Preview mode,
| | 02:51 | I can press Command+P on
the Mac or Ctrl+P on the PC.
| | 02:54 | When I do that, it
jumps straight to Preview.
| | 02:57 | When I'm in Preview mode and
I want to go back to Design,
| | 03:00 | I'll just press Command+I or
Ctrl+I to go back to Design mode.
| | 03:04 | The next mode that we
have is the Publish mode.
| | 03:06 | The Publish mode is how you can upload this
site to business catalyst and view it online.
| | 03:10 | We'll be going over that in a later movie.
| | 03:13 | And the final mode is the Manage mode.
| | 03:15 | This is where you can manage your
web site online, check its views,
| | 03:18 | upgrade the hosting as
well as look at other data.
| | 03:21 | Even though it may be confusing that there
are multiple modes or views to work in,
| | 03:25 | Muse makes it pretty clear
when you're in a given mode.
| | 03:28 | Now that we understand the
different modes of Muse,
| | 03:31 | let's take a look at the different ways that
we can preview our site in the next movie.
| | Collapse this transcript |
| Previewing a site| 00:00 | As you spend time designing in Muse,
you'll find yourself wanting to test
| | 00:04 | how your web site will
work in a web browser.
| | 00:06 | This might be to check hyperlinks,
test the slideshow's timing,
| | 00:09 | or to ensure that everything
is rendering correctly.
| | 00:12 | Let's take a look at the variety of methods
that you can use to preview your site,
| | 00:16 | ranging from a quick in at
preview to a complete export.
| | 00:20 | To preview the site, let's
first go to the Contact Us page.
| | 00:24 | On the Contact Us page let's click
the Preview button and in Preview mode,
| | 00:29 | Muse will render the
web site using Webkit.
| | 00:31 | So now I can select the
Text, Test any links,
| | 00:34 | and even use any Interactivity,
like this Google Map.
| | 00:38 | Let's go back to the Design mode.
| | 00:40 | While Preview mode is useful, sometimes
it can seem a little slow, and for a truly
| | 00:43 | accurate preview, you really
should preview it in a web browser.
| | 00:47 | We're going to go to the File menu
and go to Preview Page in Browser;
| | 00:50 | we can also use the keyboard
shortcut, Command+Shift+E on the Mac
| | 00:54 | or Ctrl+Shift+E on the PC.
| | 00:55 | When I choose this, it will
open with my default web browser.
| | 00:59 | On this machine it's Safari, on your
computer it could be different,
| | 01:03 | but if you want to check it in a different
web browser, you're going to have to change
| | 01:06 | your computer's preferences to another
browser, like Firefox or Chrome.
| | 01:09 | One negative of previewing just a page
is that the hyperlinks won't work.
| | 01:13 | So for example, if I click on Volunteer,
it's going to tell me that the page
| | 01:17 | isn't found and the warning will
actually tell you what to do;
| | 01:20 | that we should preview the
entire site in our browser.
| | 01:23 | Let's give that a shot.
| | 01:24 | We'll close this and go back into Muse
| | 01:26 | and this time we'll Preview
the Site in the Browser,
| | 01:28 | and we can use the shortcut Command+Option+E
on the Mac or Ctrl+Alt+E on the PC.
| | 01:33 | Now this export may take a little longer.
| | 01:36 | In fact, if you have many pages on your site,
this could take some significant time,
| | 01:40 | but once it's done, you can preview
the entire site in your web browser.
| | 01:44 | So I can go to Collections and try
any of the hyperlinks to make sure
| | 01:48 | everything is working correctly.
| | 01:49 | There is one more way to preview our site.
| | 01:52 | If I want to preview this site in another
web browser, but I don't want to change
| | 01:55 | my default web browser preferences,
I can export the entire site to HTML
| | 02:00 | and then just open it up
directly in another browser.
| | 02:03 | So what we're going to do is
go to File > Export as HTML.
| | 02:07 | We're going to choose the location on
our Desktop and we'll make a new folder
| | 02:12 | called export test; we'll
select it and click OK.
| | 02:19 | If you click View Site, it will open in your
default web browser, in this case, Safari.
| | 02:24 |
But if you want to try it in
another web browser like Firefox,
| | 02:27 | we just have to open up the file directly.
| | 02:29 | So I'm going to switch to Firefox and
I'm going to go to File > Open a File,
| | 02:34 | I'm going to browse to my Desktop, and go
into export test folder, and I'm going to
| | 02:40 | look for the file called index.html.
| | 02:43 | No matter what you've named your site,
that's the file that you're going to
| | 02:46 | want to open, because it's
the first page of the site.
| | 02:48 | We'll press Open, and now you can test it
in this browser and check all of your links.
| | 02:53 | Now that we have a good understanding of
the Preview modes in Muse, let's take a
| | 02:57 | look at the Interface in the next movie.
| | Collapse this transcript |
| A tour of the Muse interface| 00:00 | In order to become
familiar working with Muse,
| | 00:02 | it's important to understand the
various parts of Muse's interface.
| | 00:07 | When you first launch Muse, you're
going to be greeted with a splash screen.
| | 00:10 | The splash welcome screen gives us various
options to create new sites and open
| | 00:15 | recent sites, as well as learn
about Muse and recent updates.
| | 00:20 | For now, we're going to
open up interface.muse.
| | 00:23 | Now that we have a file
opened, we're in the Plan mode.
| | 00:26 | The Plan mode is the structure
or sitemap of our site.
| | 00:29 | We're going to begin by going to
the Home page and double-clicking.
| | 00:32 | This will open up in Design mode and
we can see that we have a new tab here.
| | 00:36 | Let's go back to the interface and go to
another page and double-click on Collections.
| | 00:41 | Now I have the Collections page open as well.
| | 00:43 | We're going to do one more by
going back to the interface
| | 00:46 | and come down to Current Exhibits.
| | 00:49 | Each of the tabs at the top of the screen
represent a different page of the main site.
| | 00:54 | If I want to go between the pages, I
don't have to go back to the Plan mode
| | 00:57 | and click on the page to go there.
| | 00:59 | Instead, I can just click on each of
these tabs to go to each of those pages.
| | 01:03 | In fact, if I want to reorder them,
I can just grab that tab and drag it
| | 01:07 | to the left or to the right to
put it in any order that I like.
| | 01:11 | This won't change the
order of the page;
| | 01:13 | it just makes it easier
for me to work within Muse.
| | 01:16 | If I close one of these tabs,
it doesn't close the document;
| | 01:19 | it just closes that page.
| | 01:21 | If I want to revisit that
page, all I have to do
| | 01:23 | is go back to the Plan mode
again and double-click.
| | 01:26 | However, if I do close this main tab,
that will close the entire document
| | 01:31 | and I would have to save or reopen it.
| | 01:33 | At the top of the screen,
we have various menus
| | 01:35 | that we'll be using
throughout this course.
| | 01:37 | The File menu lets me
open and place things,
| | 01:40 | the Window menu will
show the various panels,
| | 01:42 | and the View menu
will let me zoom in,
| | 01:45 | change view appearances
and go between modes.
| | 01:48 | At the top of the screen we have Plan,
Design, Preview, Publish, and Manage.
| | 01:52 | Each of these are the different
modes to work within Muse.
| | 01:55 | To the right of that we have our
toolbox, where we can switch between tools,
| | 01:59 | as well as zoom in and turn appearances,
such as guides and grids, on or off.
| | 02:04 | Underneath that is our Control panel
where we can modify various attributes
| | 02:08 | of items that we have
selected on the page.
| | 02:10 | On the right-hand side are our
panels that let us make changes
| | 02:13 | to various objects on the page.
| | 02:15 | So for example, if I wanted to
change the color of the square,
| | 02:18 | I can just select it and go to
the Swatches and change its color.
| | 02:20 | We'll learn more about
colors in a later movie.
| | 02:24 | Within these panels we
can drag to rearrange them
| | 02:27 | and we can also
collapse and reopen them.
| | 02:29 | In the right-hand corner, we can collapse
all of these to save a lot of room
| | 02:33 | on the page, and open it back up
if you want to see them again.
| | 02:37 | If you can't find a particular panel you're
looking for, just go to the Window menu
| | 02:40 | and you can find it in the list.
| | 02:42 | So for example, if I can't find Paragraph
Styles, here's Paragraph Styles and
| | 02:46 | it'll switch to it for me.
| | 02:48 | If you're familiar with other Adobe
programs like InDesign, Illustrator,
| | 02:52 | or Photoshop, this interface
will seem quite familiar.
| | 02:55 | Even though it may look the same, there
are a few limitations of Muse's interface.
| | 02:59 | For example, it isn't
possible to drag a panel
| | 03:03 | completely out of the other
panels or save a workspace.
| | 03:06 | Hopefully in future versions of Muse,
it will gain these useful features.
| | Collapse this transcript |
| Understanding the tools| 00:00 | When you're working with Page elements
in Muse, there are a variety of tools
| | 00:04 | that make it easy to modify or
move contents, create new boxes,
| | 00:08 | change your view, or
move around on the page.
| | 00:10 | Let's take a look at each of
the tools that Muse has to offer.
| | 00:13 | Let's begin by going to the Home page.
| | 00:16 | On the Home page we can see at the top
of the screen are our various tools.
| | 00:20 | The first tool that's already selected
is our Black Arrow or Selection tool.
| | 00:25 | When I hover over this, it will tell
us the keyboard shortcut is V.
| | 00:29 | I like to think of this as the
Move tool or the Select tool.
| | 00:33 | What we can do with this
is move objects around.
| | 00:35 | For example, if I come down here
and select this photo of this bird,
| | 00:39 | I can just click and drag and move it
around to put it somewhere else on the page.
| | 00:42 | You'll find yourself spending a majority
of your time working with this tool.
| | 00:46 | I could also grab the corner
and even resize objects.
| | 00:50 | If I scroll down a little further, you'll
see that there is a group of objects;
| | 00:53 | this is referred to as a widget.
| | 00:55 | We'll learn about these later on.
| | 00:56 | But if I want to work on something
within this group, I have to drill down
| | 01:00 | or click slowly till
I get to something else.
| | 01:03 | So if I want to move this
text frame or edit this text,
| | 01:05 | I can just click slowly and eventually
I'll get down to that particular frame,
| | 01:10 | so I can manipulate
it and move it around.
| | 01:12 | The next tool in our
toolbox is the Crop tool.
| | 01:14 | I'm going to come up here
and grab the Crop tool
| | 01:16 | or you can press the letter
C to switch to the Crop tool.
| | 01:20 | The Crop tool lets me crop or
move pictures within a frame.
| | 01:24 | So if I move over this particular picture,
do you see the little circle in the center?
| | 01:28 | That allows me to grab the center
of this and move it around.
| | 01:32 | In fact, if I click, I can select the
content itself and grab the edge of the
| | 01:36 | image and scale it up
and down within the frame.
| | 01:40 | If you try to do this with the regular
Selection tool, I'm just going to deselect,
| | 01:44 |
you can see I can only move the entire frame
itself and the content the way that it is.
| | 01:49 | So I find myself using the Crop
tool to reposition images frequently.
| | 01:54 | If you're familiar with InDesign, you can
think of the Crop tool as kind of like
| | 01:58 | the Direct Selection tool, because it
lets me grab the content or the picture
| | 02:01 | inside the frame to move
it around and resize it.
| | 02:05 | The next tool in our
toolbox is the Type tool.
| | 02:07 | The Type tool is pretty self-explanatory.
| | 02:09 | By selecting this, or pressing T, I can go
into text frames and actually edit the text.
| | 02:14 | So if I want to put this to next
year, let's say I'll make this 2013,
| | 02:18 | I can do it while
I'm editing my text.
| | 02:20 | I can also use the Type tool if I
want to create a new text frame.
| | 02:24 | So if I go somewhere else on
the page and click and drag,
| | 02:27 | I can draw this out and
start to type inside it.
| | 02:30 | Then if I want to move it around,
I will just grab my Black Arrow
| | 02:33 | and I can position it where I like.
| | 02:35 | I don't really need this anymore, so
I'm just going to hit the Delete key.
| | 02:38 | The next tool is the Zoom tool or Z.
| | 02:40 | With the Zoom tool selected, it
behaves like most other applications.
| | 02:44 | When I have it selected with a plus (+),
| | 02:46 | I can just click and I'll zoom
into that portion of the page.
| | 02:49 | If I want to zoom back out, I'll hold
either Alt on the PC or Option on the Mac
| | 02:53 | and it will change to a minus
(-) and I can just zoom back out.
| | 02:56 | We'll talk about zooming in
greater detail later on in another movie.
| | 03:01 | The next tool is the Hand tool or H.
| | 03:04 | This allows me to move around on the
page without manipulating objects.
| | 03:08 | So if I have the Hand tool selected, I can
click and drag to just kind of pan around.
| | 03:12 | It's very useful and this is kind of the
safest way to be working in your file.
| | 03:17 | There is no way you could accidentally select,
modify or hurt anything in the document,
| | 03:22 |
because all you're doing is just visually
moving it around like a sheet of paper.
| | 03:26 | I find working with the Hand tool is
easier than having to go to the side
| | 03:30 | and using the scrollbars to move around. I'd
much rather just click and drag to pan around.
| | 03:35 | And finally, the last
tool is our Rectangle tool.
| | 03:38 | The Rectangle tool lets
me create a rectangle.
| | 03:40 | So I can just click and
drag to draw a rectangle.
| | 03:43 | I'll select like my Selection tool and
I can put this anywhere on the page
| | 03:47 | and even change its color.
| | 03:48 | There are some other
modifications I can do,
| | 03:50 | such as give it rounded
corners or give it a stroke.
| | 03:53 | But we'll be talking about
the modifications later on.
| | 03:56 | Taking the time to understand
what each tool does
| | 03:58 | is an important step to being
more comfortable in Muse.
| | 04:01 | In the next movie,
we'll take a look at
| | 04:03 | how we can switch between
these tools much easier.
| | Collapse this transcript |
| Switching between the tools| 00:00 | As you become more comfortable
working with Muse,
| | 00:02 | you'll probably find yourself
wanting to work quicker.
| | 00:05 | Thankfully, there are many
shortcuts that will make it easier
| | 00:08 | to switch between the various tools.
| | 00:10 | Let's begin by going back to
the Home page and double-clicking.
| | 00:13 | While we are in the Design
mode and we can use our tools,
| | 00:16 | you should think about the keyboard
shortcuts for each of these.
| | 00:19 | So if I'm going to use
the Selection tool a lot,
| | 00:21 | I can just press the letter V to
switch to that tool to move around.
| | 00:24 | I also have C for my Crop tool,
T for the Type tool, Z for Zoom,
| | 00:30 | H for Hand and M
for the Rectangle.
| | 00:33 | Now if I want to Zoom into an area, I
could press Z to get the Zoom tool
| | 00:39 | and then click to zoom into
that area and then hold down
| | 00:41 | the Option or Alt key to
click to zoom back out again.
| | 00:44 | But when I'm done with that, I have to go
back and select the Selection tool again.
| | 00:48 | If I know that I just want to
temporarily zoom in for a little while,
| | 00:52 | what I can use is the
spring loaded shortcut.
| | 00:55 | What I'm going to do is hold down the Z key.
As long as I have the Z key held down
| | 01:00 | I will have this tool
which allows me to zoom in.
| | 01:04 | When I'm done with the Zoom tool,
I'll just let go of the letter Z
| | 01:07 | and it goes back to the
tool that I was at before.
| | 01:10 | So it saves me a little time; I
don't have to press the V key.
| | 01:13 | It's pretty handy and once you get
used to it, it's a great way to work.
| | 01:17 | In fact you can also use the same
trick in Photoshop and InDesign.
| | 01:21 | I'm going to zoom back out by
going up here and just choosing 100%.
| | 01:26 | Now if I want to move around on the page,
we know that we do have the Hand tool,
| | 01:30 | but there's another way to access that.
| | 01:32 | Rather than pressing the letter H,
which actually switches to the Hand tool,
| | 01:36 | what I can do is press
and hold the Spacebar.
| | 01:38 | As long as I am holding the Spacebar,
I will temporarily have the Hand tool
| | 01:43 | which will make it easier
to move around on the page.
| | 01:46 | When I'm done, I'll
just let go the Spacebar.
| | 01:48 | And in fact, I sometimes forget that
H is even a keyboard shortcut for it,
| | 01:53 | because I use the Spacebar all the time.
| | 01:55 | If you're familiar with Photoshop,
Illustrator or InDesign,
| | 01:58 | you probably already
know this shortcut.
| | 02:00 | But what happens if I'm editing text.
| | 02:02 | I'm going to move over here and
if I want to edit this text
| | 02:05 | I could select the Type tool, but there's
a faster way; instead I'll just double-click.
| | 02:11 | When I double-click, Muse
will automatically switch
| | 02:13 | to the Type tool to make
it easier to edit the text.
| | 02:16 | When I'm done editing the text, all I
have to do is press the Escape key and
| | 02:20 | I'll jump out of the frame and now
I have my Selection tool selected.
| | 02:23 | So very rarely will I actually
go and grab the Type tool,
| | 02:26 | instead I just double-click, do my business
and then press Escape to get back out;
| | 02:31 | it's a much more efficient way of working.
| | 02:34 |
Since you will spend a large portion of your
time switching between the various tools,
| | 02:38 | it is worth the time to memorize the
keyboard shortcuts for each of them,
| | 02:41 | so you will work more efficiently
without having to visit the toolbox.
| | Collapse this transcript |
| Understanding the current selection| 00:00 | As you to begin to work
on more complex layouts,
| | 00:02 | it may be hard to tell what
exactly you have selected.
| | 00:06 | If you're not careful you might
inadvertently apply formatting
| | 00:09 | to the wrong object
or portion of a group.
| | 00:12 | To help you keep track of
what you have selected
| | 00:13 | there is a useful status
indicator in the Control panel.
| | 00:17 | Let's begin by going to the
Homepage and on the Homepage,
| | 00:20 | you can see in the upper left-hand
corner it says the word Page.
| | 00:24 | The word Page is referring to
what I currently have selected,
| | 00:27 | which is a little strange because I
actually don't have anything selected.
| | 00:31 | But when you're working in Muse
when you've nothing selected,
| | 00:34 | you actually have the
page itself selected.
| | 00:37 |
So if I was to go where it says
Fill up here and change the color,
| | 00:41 | you can see I'm changing the color
of the Background page itself.
| | 00:44 | Let's put this back to white for now.
| | 00:47 | If I happened to select something
on the page, for example this photo,
| | 00:52 | you can see it says Image Frame,
because I have an image frame selected.
| | 00:55 | If I select a text frame it will
switch to a Text Frame
| | 00:58 | and then when I grab
text, it's at Text.
| | 01:02 | If I hold the Shift key and
grab more than one thing,
| | 01:04 | it'll tell me I have Objects Selected.
| | 01:07 | If I hold my Spacebar and pan
down to this Widget at the bottom,
| | 01:10 | it'll tell me I'm on the Widget.
| | 01:12 | When I have the Widget selected
and I slowly click to drill down
| | 01:16 | to various portions of it, I want to
\pay attention to the Status Indicator
| | 01:19 | so I know when I'm on
the area that I want.
| | 01:21 | Now I'm on the Container and
now I'm down to the Text Frame.
| | 01:26 | If I hold the Shift key and grab
more than one item and press Command+G
| | 01:30 | or Ctrl+G to group them, you can see that
it tells me that I have the Group Selected.
| | 01:34 | Then I can slowly drill down and
click to the portion that I want.
| | 01:38 | You may be asking yourself why do we even
want to use or care about the Status Indicator?
| | 01:43 | The reason we care is because it
tells us exactly what we have selected.
| | 01:47 | If I come down to the Widget
in the lower right-hand corner,
| | 01:50 | if I change its color and I'm
not sure what I have selected,
| | 01:54 | I might inadvertently change or not change the
portion of the Widget that I want to change.
| | 01:59 | So by slowly clicking and
verifying via the Status Indicator
| | 02:02 | I'll know that I have the correct
portion of the Widget Selected.
| | 02:05 | The current selection
area of the Control panel
| | 02:09 | is very useful when working
with everyday objects.
| | 02:11 | But when it comes to Widgets, it
is essential to pay attention to
| | 02:14 | what portion of the widget
that you were on.
| | 02:17 | In a later movie, we'll spend
more time learning about Widgets
| | 02:20 | and how to control their properties.
| | Collapse this transcript |
| Understanding the hint label| 00:00 | Another way to help you understand and
work with page items is the hint label.
| | 00:05 | This feature provides instant visual feedback
as you mouse over various objects on the page.
| | 00:11 | Let's go to the Current Exhibits page, and
as I mouse over various objects, you can see
| | 00:15 | we'll get a text label that will
tell us exactly what that object is.
| | 00:19 | In this case, it's text frame.
| | 00:21 | On this side, I have a group, and as I
mouse over individual elements of that group, we
| | 00:26 | have an image frame and a rectangle.
| | 00:29 | The hint label is incredibly useful for widgets.
Over here is a slideshow widget.
| | 00:34 | As I click, I can drill down to various sections like
the Thumbnail Container or even the Thumbnail itself.
| | 00:41 | Back in Plan mode, we'll go to the
Contact Us page where I have a widget form.
| | 00:47 | As I drill down, you can see I
have the Form Field and the Label.
| | 00:51 | We even have the Submit button at the bottom.
| | 00:53 | When you start working with complicated widgets,
this can be an incredibly useful tool.
| | 00:58 | But once you get used to Muse for a while, it can become distracting
having to see this all the time, so it's easy to turn off.
| | 01:05 | To turn off, we're just going to go to the
Adobe Muse menu at the top of the screen,
| | 01:09 | or on the PC, go to the Edit
menu, and go down the Preferences.
| | 01:13 | You can also press Command+K, or Ctrl+K.
| | 01:15 | In the Preferences dialog box,
just uncheck Rollover Hint Label.
| | 01:20 | Now that we have this turned off, I can mouse over
things, and I'll no longer see the hint label again.
| | 01:25 | Be sure to pay close attention
to your cursor as you work in Muse.
| | 01:29 | While the hint label is useful, there is
other feedback that could be useful, too, like smart
| | 01:33 | guides or even the angle of a rotation.
| | Collapse this transcript |
| Zooming and magnifying| 00:00 | There may be times that you wish
to get closer to your layout
| | 00:03 | so you can fine-tune your design.
| | 00:05 | Rather than spending time squinting at the
screen, you can take advantage of Muse's
| | 00:09 | multiple ways to zoom in and out of your
layout in order to work more effectively.
| | 00:15 | In order to zoom in, the most common
way of zooming is with the Zoom tool.
| | 00:18 | So I can either press the letter
Z or just grab it right up here.
| | 00:22 | With the Zoom tool,
I can click to zoom in
| | 00:24 | and if I hold down the Option or the
Alt key, I can also zoom back out.
| | 00:28 | But very often I don't use the Zoom tool
that way, instead I would rather zoom
| | 00:32 | into a particular portion of the page
and this is called a Marquee Zoom.
| | 00:37 | So for example, if I want to zoom into
the text down here, such as New works
| | 00:41 | from the SAMOCA Collection, rather than
clicking, clicking, clicking and then
| | 00:46 | having to pan around to the spot that I want,
there's a much more efficient way of working.
| | 00:51 | So first I need to zoom back out.
| | 00:52 | So I'm going to go to
View > Fit Page in Window.
| | 00:56 | Now if I want to zoom into that
area, when I have my Zoom tool,
| | 01:00 | I'm just going to click and
drag and do a Marquee Zoom,
| | 01:03 | and you can do this by just
dragging and drawing a rectangle
| | 01:07 | and think of this is the area that
you want to see zoomed in on the page.
| | 01:10 | When I let go, that area is big,
front and center for me to work on.
| | 01:14 | When I'm done with this, if I want to
zoom back out, I still don't like to hold
| | 01:19 | down the Option or Alt key to zoom
out because that takes way too long.
| | 01:22 | So I 'm going to go back and do
that View > Fit Page in Window.
| | 01:26 | In fact, if you use a menu quite
often, it's a good idea to memorize
| | 01:31 | the keyboard shortcut, and in this
case it's Command+0 or Ctrl+0.
| | 01:36 | If I plan on zooming in and out,
instead of using the Zoom tool,
| | 01:40 | I'll often use the shortcuts, such as
Command+Equals or Ctrl+ Equals,
| | 01:44 | or Command+Minus or Ctrl+Minus.
| | 01:46 | This way it's very easy to zoom in and
out whenever I like and then I'll just
| | 01:50 | add Command+0 or Ctrl+0
to fit on the screen.
| | 01:52 | A few other shortcuts that you might use
are Command+1 or Ctrl+1 to fit at 100%,
| | 01:58 | Command+2 or Ctrl+2 to fit at 200%,
or Command+5 or Ctrl+5 to fit at 50%.
| | 02:04 | If you forget any of these shortcuts, you can
always go to your View menu to access them.
| | 02:10 | Another way to zoom in the document
is with the Zoom toolbox right here.
| | 02:14 | I can click and choose any of these presets
if I want to zoom in to a particular area
| | 02:17 | or even type in my own.
| | 02:20 | If I want to zoom out really
far, I could type in 25%.
| | 02:23 | If you have nothing selected on the page,
| | 02:26 | there is even a keyboard shortcut
to jump up to this box.
| | 02:28 | All I have to do is press the Tab key;
that will highlight the Zoom toolbox
| | 02:33 | and I can type in any number at all.
| | 02:34 | In this case, I'm going to
jump to 233% and press Enter.
| | 02:40 | Since zooming is such an integral
part of working with Muse,
| | 02:43 | I suggest you take the time to learn some
of the keyboard shortcuts for zooming,
| | 02:46 | so you can navigate your documents easier.
| | 02:48 | The good news is that most Adobe
applications use the same shortcuts for zooming.
| | 02:53 | Therefore, if you already know them
for InDesign or Photoshop,
| | 02:57 | you will also know them for Adobe Muse.
| | Collapse this transcript |
| Working with layers| 00:00 |
As your layouts become more complicated,
it can become difficult to manage
| | 00:03 |
everything that is laid out on your
website.
| | 00:06 |
Layers are a useful method for managing
your layout, and making it easier to
| | 00:10 |
access and edit your content.
Let's go to the layers page.
| | 00:14 |
And on this page you'll see I have the
layers panel open.
| | 00:17 |
If you don't have this open yourself, you
can go to the Window menu, and choose Layers.
| | 00:22 |
Every single document that you have will
have at least one layer and by default it
| | 00:26 |
will be called layer one and is blue.
If I open up this little arrow here I'll
| | 00:31 |
see everything that is on the layer on
this given page.
| | 00:34 |
In this case it's a really simple page
with a text frame, a graphic frame, and a
| | 00:39 |
plain old rectangle frame.
If I come over here and I select the text
| | 00:42 |
frame you'll see that particular item in
my layers panel will be selected.
| | 00:46 |
And it has a little blue square that's
telling me that is the exact item that I
| | 00:50 |
have targeted right now.
I'm going to deselect now.
| | 00:54 |
Now with nothing selected on my page, if
I come over to the Layers panel and hit
| | 00:59 |
that little square, it will select the
individual item on the page.
| | 01:02 |
This is a quick way to actually grab
something, especially in a very
| | 01:05 |
complicated layout.
If I have a graphic frame, I can open up
| | 01:09 |
the frame and see the individual image
inside.
| | 01:13 |
This can be useful if you're curious what
exactly is inside here.
| | 01:16 |
If I want to hide a particular item, I
can turn off the eyeball to temporarily
| | 01:20 |
hide an individual item on the page, and
then I can turn it back on by clicking again.
| | 01:24 |
I can also do this to lock an individual
item, so it's easier to work with other objects.
| | 01:28 |
To organize my content further, I can
even make a secondary layer.
| | 01:32 |
So I'm just going to collapse this layer
for a moment, and I'm just going to come
| | 01:35 |
down and click New Layer, then I'll just
double-click, and I'm going to call this
| | 01:39 |
one text.
Now that I've done that, if I want to put
| | 01:43 |
this text frame on that layer, I can
select this, open up the layer, and I'll
| | 01:48 |
just grab this square and drag it up to
that layer.
| | 01:52 |
As soon as I do that, you'll see it's
been promoted and has a new bounding box
| | 01:55 |
that is the same color as the layer
above.
| | 01:58 |
This is a great way to organize your
layouts by having multiple layers.
| | 02:02 |
Now, when you do add an additional layer,
if you happen to go to another page or a
| | 02:06 |
different layout, for example let's say
go to the home page, you'll see that text
| | 02:10 |
layer will come along.
But the individual item from the previous
| | 02:13 |
page won't be here.
But what I can do is I can grab
| | 02:16 |
individual frames, open up that layer,
and then bring it right up to that layer.
| | 02:22 |
This way you can keep your content
organized on your website by putting
| | 02:26 |
similar content on similar layers.
While it may be tempting to start
| | 02:30 |
creating lots and lots of layers in your
document, I recommend keeping it simple.
| | 02:34 |
Start with a background image, text, and
maybe an interactive widget layer.
| | 02:39 |
From there, you can always add a few more
if needed, but avoid adding too many and
| | 02:43 |
creating more complexity than is needed.
| | 02:45 |
| | Collapse this transcript |
|
|
3 Creating a New SiteExploring the new site options| 00:01 | Now that we've gone over the
fundamentals of the interface,
| | 00:03 | let's get started creating
a brand-new web site.
| | 00:06 | When you're ready to create
a new web site in Muse,
| | 00:09 | inside the splash screen, you can
just press the New Site button,
| | 00:12 | or you can go to the File menu and choose New
Site or press Command+N or Ctrl+N on the PC.
| | 00:19 | In the New Site dialog box, there are a
lot of options here, but don't worry if
| | 00:23 | it seems complicated, because if you mess
up, you can always come back later and
| | 00:27 | change your mind via the Site Options,
after your web site has been created.
| | 00:31 | If you're used to Adobe InDesign, think of this
as the New Document dialog box that pops up.
| | 00:37 | You may also notice that there
are no units after these numbers.
| | 00:40 | That's because everything in
web design is measured in pixels.
| | 00:43 | So you have to worry about
putting px or using anything else.
| | 00:47 | In fact you can't measure in inches,
centimeters, picas or even ciceros.
| | 00:51 | Do you know what a cicero is?
It's the Italian Pica.
| | 00:54 | One cicero is equal
to 1/6th a French inch.
| | 00:57 | If you want to change the
values of any of these numbers,
| | 01:00 | you can use your mouse
to click up or down.
| | 01:01 | But personally, I prefer just
to click inside the field
| | 01:04 | and use my arrow keys to press up
or down to slowly change the numbers.
| | 01:08 | If I use the Shift key with the
arrow keys, it will go up even faster.
| | 01:11 | Now the first field is the Page Width
and that's going to be the width of
| | 01:15 | the web site that you're building.
| | 01:16 | If you've never made a web site before,
| | 01:18 | you may be wondering, what
is a good Page Width size?
| | 01:21 | Well, in the past, designers would sometimes
make them 600, 700 or 800 pixels wide,
| | 01:27 | but over time people have bought
larger and larger monitors.
| | 01:30 | So today, the standard is
usually around 960 pixels wide.
| | 01:35 | If you're curious how wide a particular
web site is, you can always take a
| | 01:38 | screenshot of it and then measure
it in Photoshop to find out yourself.
| | 01:42 | The next field is Minimum Height.
| | 01:44 | Now, that may seem strange, because
you might think it would say Page Height.
| | 01:48 | The reason it's Minimum is because
each page of a Muse site is dynamic.
| | 01:53 | That means the page will grow with content.
| | 01:55 | For example, the first page of
your site may be quite small
| | 01:58 | and only need to be 500 pixels tall.
| | 02:01 | But the second page may have lots of
content with lots of text and pictures
| | 02:05 | and the user may have to
scroll down to that content.
| | 02:07 | This number is just the smallest
height that your page will be.
| | 02:10 | It can always be longer,
it just couldn't be shorter.
| | 02:14 | The next field is a checkbox
that says Center Horizontally.
| | 02:17 | This will center your web
site within the web browser.
| | 02:20 | Most web sites today are centered.
| | 02:22 | If you'd prefer to have it aligned
left, you can always uncheck this
| | 02:26 | and have it be left aligned.
| | 02:27 | Unfortunately, there is no way right now to
have your web site be aligned to the right.
| | 02:31 | Our next field are Margins.
| | 02:33 | Margins determine a safe area of the
page where we can lay out our content.
| | 02:37 | This is very similar to the Margins
inside Adobe InDesign or Microsoft Word.
| | 02:42 | Margins don't have anything to
do with CSS or content rules.
| | 02:46 | So if you're familiar with what I'm
talking about, it doesn't affect that.
| | 02:49 | If you're not familiar with CSS or
content rules, please disregard that
| | 02:53 | and just think of them for layout purposes.
| | 02:55 | If I click this little lock, I can either
break or keep all of the settings the same.
| | 03:00 | That means when they're all the same, I
can come in here and use my arrow keys
| | 03:03 | to change all the values at once.
| | 03:06 | For now, we're going to keep them all at 20.
| | 03:08 | Columns will help you visually split up
your layout, and they also aid in design
| | 03:13 | by allowing objects to
snap to the various columns.
| | 03:16 | I'm going to change the value
to 12 and when I do this,
| | 03:19 | you'll notice that the
Column Width will change.
| | 03:22 | The reason for this, is because as you add
more columns, they have to become more narrow.
| | 03:26 | If I would change my Column Width's number,
the Page Width would actually have to change.
| | 03:32 | The Gutter is the space between the columns.
| | 03:34 | We'll leave that at 20 for right now.
| | 03:36 | And finally, we have Padding.
| | 03:38 | Padding determines the space in pixels
between the edges of the browser window
| | 03:41 | and the edges of your web page.
| | 03:43 | So if I wanted to have the web page be
aligned to the top of the web browser,
| | 03:47 | I would want to put
a zero number in here.
| | 03:49 | Right now I can only control
the Top and the Bottom.
| | 03:52 | I can't control the Left because my
web page is centered horizontally
| | 03:56 | in the middle of my web browser.
| | 03:58 | So if I turn this off, I'll be able
to use the Left Padding to move my
| | 04:02 | web content away from the
left edge of my web browser.
| | 04:05 | Now that we have our web
site set up, let's click OK.
| | 04:09 | Now that we've created our site,
| | 04:11 | we'll explore the various Plan
options in the next movie.
| | 04:14 | If you don't know what
size to make your site,
| | 04:16 | the default setting of 960 pixels
wide is a good starting point.
| | 04:20 | In fact, there is a great web site dedicated
to the idea of working with a 960 pixel grid.
| | 04:25 | To learn more about working with
a 960 grid, please visit 960.gs.
| | Collapse this transcript |
| Creating a sitemap| 00:01 | Before you begin to create a web site,
it is a good idea to sketch out a plan
| | 00:04 | that outlines the structure of the site.
| | 00:07 | This outline is often called a sitemap.
| | 00:10 | Once you have an idea for the structure
of your site and the relationship
| | 00:13 | between the pages, you can begin to
create all of these pages in Muse.
| | 00:17 | Now that we have the file open that
we created in the previous movie,
| | 00:21 | let's talk about the Plan mode and
how we can add additional pages.
| | 00:25 | The Plan mode is the first thing that
you see when you open up a document.
| | 00:28 | Think of this as a big page's panel
for working inside your document.
| | 00:32 | At the top we have the regular pages and
at the bottom we have our master pages.
| | 00:38 | Master pages are commonly
used for repeating content,
| | 00:41 | like headers and footers, menus,
or even background information.
| | 00:44 | For a regular page, it
begins as a home page.
| | 00:47 | When I mouse over this page you
can see a plus (+) shows up
| | 00:50 | on the left and right
and the bottom.
| | 00:52 | This allows me to add additional pages.
| | 00:54 | So I'm going to press the plus (+) on
the right to add a new top level page.
| | 00:58 | And right now I'm going to name this.
| | 01:00 | We're going to call this one Collections.
| | 01:02 | When I'm ready to make another page, I'll hit
the plus (+) and I'll call this one About Us.
| | 01:07 | Another way to Add a Page
is to go to the Page menu
| | 01:10 | and choose Add New Top Level Page or
Command+Shift+P or Ctrl+Shift+P on the PC,
| | 01:16 | and we'll call this one Volunteer,
and one more Contact Us.
| | 01:21 | If I want to rearrange these pages, for
example, maybe I want to have Contact Us
| | 01:25 | next to the Home page, all I have to do is
click and drag and I can put this over here.
| | 01:30 | You notice the blue area that
shows up between the pages?
| | 01:33 | That's where I'm going to release.
| | 01:35 | And now it's been reordered
to have it as the second page.
| | 01:38 | I'm going to put it back to
the right-hand side again.
| | 01:42 | Now let's add a child page, a child page is
a page that's underneath a top-level page.
| | 01:47 | So we're going to come over to Collections
and press the plus (+) button underneath.
| | 01:52 | Now I have a child page
that is underneath the top one.
| | 01:54 | We're going to call this
one Current Exhibits.
| | 01:57 | We'll add another child
page to the right
| | 02:02 | and call this one
Permanent Collection.
| | 02:08 | And finally, Upcoming Exhibits.
| | 02:10 | If I move the top level page around
the child pages will come along too.
| | 02:15 | So for example, I'm going
to drag Collections
| | 02:17 | to the right of About Us
and now they moved over.
| | 02:19 | For now we'll put it back.
| | 02:22 | As we add more pages to our web site,
we might have to change the size of
| | 02:26 | these pages, so we can
view all of them at once.
| | 02:28 | So at the top, we can
drag the Size handle.
| | 02:31 | So if we make them larger or smaller,
we can change the amount of pages
| | 02:35 | that we can see at once.
| | 02:38 | If you'd like to speed up the performance
of the Sitemap Plan View you can turn off
| | 02:41 | the Thumbnail preview, but if you'd like
to see the pages, you can leave it on,
| | 02:45 | but when you first go to this page,
| | 02:46 | it may take a few moments for
all of the pages to render.
| | 02:50 | To the right of that is
the Master page Badge.
| | 02:53 | Right now all of these pages
are connected to the A-Master;
| | 02:56 | if I turn this off I
won't be able to see that.
| | 02:59 | Now that we have a good understanding of
how to create a Sitemap in the Plan View,
| | 03:03 | let's take a look at working with
Master Pages in the next movie.
| | Collapse this transcript |
| Setting up master pages| 00:00 | If you're going to be reusing the same
content across multiple pages, it would be tedious
| | 00:06 | to have to copy and paste the
same thing over and over again.
| | 00:09 | A simple way to ensure consistency
across multiple pages is to use master pages.
| | 00:16 | If you are already familiar with InDesign
or PowerPoint, then you probably already have
| | 00:21 | a good understanding of how they work.
| | 00:24 | Inside Plan view, we can see that we have
at the top of the screen all of the various
| | 00:27 | pages in our site, and at the
bottom is where our masters live.
| | 00:32 | At the moment, every single page in this
site is connected to the A-Master, and you can
| | 00:38 | see underneath it says A-Master, for
example, Home A-Master, Collections A-Master.
| | 00:43 | And if I change the name of the master--I'm
just going to come down here and double-click
| | 00:47 | and call this B-Master--
they would all update as well.
| | 00:52 | That's because whatever happens on the
A-Master will update on all of the original pages.
| | 00:58 | If I don't want to see this little master badge,
I can always just turn this off and not see it,
| | 01:03 | but it's fairly useful to have this turned on
so we can see what pages are connected to it.
| | 01:07 | Let's go to the master page and make a change.
| | 01:11 | On the master page, I'm
going to grab the Rectangle tool.
| | 01:14 | I am just going to draw a
really big rectangle here.
| | 01:16 | We're going to change the fill to a color.
| | 01:18 | I'll just make this be blue.
| | 01:19 | Once I do this and I go back to the Plan view,
you can see that every single page automatically
| | 01:25 | gets this blue rectangle.
| | 01:27 | To make this a little simpler,
I'm going to rename the B-Master to be blue.
| | 01:32 | When you go to a master, if you try to
select the page item such as this blue rectangle,
| | 01:37 | you're not able to select
it because it's locked.
| | 01:40 | That's just the way Muse is.
| | 01:41 | It's unlike Adobe InDesign where you can override a
page item; you're not allowed to do that inside Muse.
| | 01:47 | Let's make another master.
| | 01:48 | I am going to go to the masters at the
bottom, and we're going to call this one red.
| | 01:53 | When we double-click, I'll do the same thing,
make a large rectangle, and we're going to
| | 01:57 | make the fill be Red.
| | 01:59 | Now, back on the master page,
you can see everything is still blue.
| | 02:03 | But if I happen to grab the Red master, I
can apply it to any of these other pages.
| | 02:08 | Now they're connected to it.
| | 02:10 | So if I make a change on the Red master--
let's say resize this--it will update on all those
| | 02:16 | pages. But no changes happened on the blue
page because those pages are connected to blue.
| | 02:22 | At any point, I can switch these back and forth.
| | 02:24 | In fact, if I don't want it connected to a
master at all, all I have to do is right-click,
| | 02:30 | go to Masters, and choose None.
| | 02:33 | If I want to apply Red again, I can either
right-click and choose Red, or just drag and drop
| | 02:38 | like I did earlier.
| | 02:40 | If you're working with content on a page--
let's say the Collections page right here--
| | 02:44 | if I happen to draw something--we'll just
draw this little rectangle here, and we'll
| | 02:48 | give it a color, like yellow--you see that
everything I create automatically is above the master item.
| | 02:56 | That's just the way it works by default.
| | 02:57 | But, if you change your mind and you want
your master page item to be above everything
| | 03:01 | else, we can make that
change on the master itself.
| | 03:05 | All I have to do is go to that master, select
that master page item, and go to Object > Move
| | 03:11 | To > Master Foreground.
| | 03:14 | When I do this, it gets a red border.
| | 03:16 | That means it's going to be
above everything on the actual page.
| | 03:20 | So, if I close this and go back to
Collections, we can see that it's above everything.
| | 03:24 | Now, I still can't select the master, but I can
select everything else, and it will just be behind it.
| | 03:30 | This can be really useful if there's a
header or footer or certain items that you want
| | 03:34 | to be above everything no matter what.
| | 03:37 | Master pages are fairly common
for menus, headers, and footers.
| | 03:41 | However, any time you find yourself
replicating a certain portion of a page over and over
| | 03:46 | again, it might be time to consider
building a master page for that section.
| | Collapse this transcript |
|
|
4. Working with PagesChanging page attributes| 00:00 | When designing for print, most
designers tend to ignore the paper
| | 00:03 | that their design is printed on and prefer
to focus on adding content to the design.
| | 00:09 | In the end that might be
an acceptable workflow,
| | 00:11 | since they have limited control over the
look of the paper in the layout program.
| | 00:15 | However in web design, you can
dramatically alter the page itself
| | 00:20 | before any content is added.
| | 00:21 | Let's take a look at what properties
of a web page that we can change.
| | 00:26 | Let's begin by going to the Home page, and
on the home page with nothing selected at all,
| | 00:30 | you can see it say Page up here, because
we are referencing to the page itself,
| | 00:35 | and that is the big white area
that you see in this document.
| | 00:38 | To make this easier to see,
I'm just going to zoom out
| | 00:41 | by pressing Command+Minus
or Ctrl+Minus.
| | 00:42 | Now what we're going to do is
right next to the word Fill
| | 00:45 | is this little widget we can
click on to change the Fill color,
| | 00:48 | and we're going to
change this to yellow.
| | 00:51 | When we do this, we can see the entire
page itself is turning to yellow.
| | 00:54 | If we want to change the property some
more, we can click on the word Fill
| | 00:58 | for a drop down, where we can change the
Opacity and make it actually see through,
| | 01:02 | so we can even see the gray
background of the web page itself.
| | 01:05 | We can even add an image to
the background of the page too,
| | 01:08 | and we'll learn more
about that later on.
| | 01:11 | Next to Fill is Stroke. From
here if we increase the number,
| | 01:15 | we can see that we're adding a thicker
stroke around the border of the page.
| | 01:19 | If we click here we can change its
Color, we'll change this to blue,
| | 01:22 | and when we click on Stroke itself, we
can even change the Alignment properties.
| | 01:26 | Right now it's aligned to the Outside.
| | 01:29 | Here it's completely in the Inside
| | 01:33 | and here we have it aligned
evenly on the inside and outside.
| | 01:34 | If we like we can even change the dimensions
on the left, right, top or bottom,
| | 01:38 | I'm going to break the connection between
these and I can go on the left hand side
| | 01:42 | and increase the amount to have
a thicker stroke on the edge.
| | 01:46 | For now I'm going to put
this back to being the same
| | 01:49 | and I'm going to lower this amount
to something a little smaller like 10.
| | 01:52 | Next we can add rounded
corners to the page.
| | 01:55 | So, I'm just going to click the top
two and increase the amount to 50,
| | 01:59 | and we can see that we have rounded
just the top two corners of the page.
| | 02:03 | If we like we can go to Effects and even
give it a drop shadow or we can play with
| | 02:08 | its Opacity and other Angle Controls.
We can even give it a Bevel or a Glow.
| | 02:14 | The last option is the Browser Fill, which
is how we view the web page in a browser.
| | 02:20 | So for example, we're going to leave
this alone and we're just going to press
| | 02:23 | the File > Preview Page in Browser,
so we can see what this would look like.
| | 02:27 | This will open up in
our default web browser
| | 02:29 | and we can see all this gray
area around the page itself.
| | 02:33 | I'm going to close this
and go back to Muse,
| | 02:35 | and we can see the gray here.
| | 02:38 | If we click on the Color, we can
choose White or No Color at all.
| | 02:42 | For now we're just going
to leave this at White.
| | 02:44 | If I click on Browser Fill, I'm
able to add a background image
| | 02:48 | and control its formatting, which
we'll talk about in another movie.
| | 02:51 | As you can see, there are lots of formatting
options available to just the page itself.
| | 02:56 | In the next movie, we'll take
a look at embedding images
| | 02:58 | in the background of the
page and the browser itself.
| | Collapse this transcript |
| Creating a browser fill| 00:00 | In the previous movie, we learned how
to change the formatting of the page
| | 00:04 | and the background of your web site.
| | 00:06 | While most of the changes were color
based, it is possible to use your own
| | 00:09 | artwork or images as the background for both
the browser and to fill of the page itself.
| | 00:15 | Let's go to the Home page.
| | 00:16 | On the Home page, you can see that
the Browser Fill is set to a light blue.
| | 00:20 | What we're going to do is change
the Fill of the page itself.
| | 00:23 | So we're going to come up
to Fill and choose Image.
| | 00:26 | From here, we're going to go to our
Desktop > Exercise folders > Assets
| | 00:30 | and then we're going to grab
this first image right here.
| | 00:35 | Once we do this, you can see that
the image is centered on the page.
| | 00:39 | But if you try to grab it with your Selection
tool, you're not going to be able to.
| | 00:43 | That's because the image is filling
up the background of the page itself.
| | 00:47 | If I want to manipulate this,
I have to go over to Fill
| | 00:51 | and here I can have
my Position controls.
| | 00:54 | We can see that if I press the Position
on the left, it lines up on the left side,
| | 00:58 | the right, top, bottom and
even any of the corners.
| | 01:02 | Some other changes that we
can do are the Fitting options.
| | 01:08 | Right now, it's set to the
original size of the image.
| | 01:12 | But if I click on this, I can say Scale
To Fit, and it's going to scale up
| | 01:16 | so it's fitting up here.
| | 01:17 | I can even do Scale To Fill and it
will blow up to fill the entire page.
| | 01:22 | But unfortunately, this
graphic is pretty low res,
| | 01:25 | and if I make it this large,
it doesn't look very good.
| | 01:27 | But if I'd used a high-res graphic,
it might look a little better.
| | 01:30 | We'll put it back to Original Size.
| | 01:34 | Another useful option is tiling.
| | 01:37 | I can come over here and say Tile and
it's just going to do a repeated pattern
| | 01:41 | throughout the entire page.
| | 01:43 | I can even control the tiling
if I say Tile Horizontal.
| | 01:46 | Now it's just going from
the left to the right.
| | 01:49 | If I change its position, it could be at
the top or even the bottom of the page.
| | 01:53 | We can do the opposite of
this, of Tile Vertically,
| | 01:56 | and line it up on the left
or right-hand side too.
| | 02:00 | If you want to change your image,
you can always browse to a new one
| | 02:03 | or hit the little trashcan to remove it.
| | 02:04 | We can also do this process
for the Browser Fill.
| | 02:08 | So, if I come over to the Browser
Fill, and I'm going to grab an image,
| | 02:13 | by going to the Assets folder
and grabbing background.jpg.
| | 02:17 | Now that I've done this, I'm going to collapse
these panels so we can see it easier,
| | 02:22 |
and we can see that the whole page itself
has this blue photo as the background.
| | 02:26 | In fact, if I go to the Fill and
lower the Opacity of the page,
| | 02:29 | we can even see the background
through the page itself.
| | 02:33 | But for now, we're just going
to leave this up all the way.
| | 02:36 | We can preview this in our web browser by
going to File > Preview Page in Browser.
| | 02:40 | Here we can see that the picture
is filling up the entire page
| | 02:43 | all the way down to the bottom.
| | 02:46 | There are a few other options
with the Browser Fill.
| | 02:48 | When we click on Browser Fill,
we can see right now the Fitting
| | 02:52 | for this picture is Tile, which
means the picture is repeating.
| | 02:55 | But if I change this to Original Size,
you can see there's a little bit of room
| | 02:59 | left on the left and right
hand side of the image itself.
| | 03:02 | So if someone was on a very large monitor,
they would start to see the blue on the
| | 03:06 | left and right-hand side of the image.
| | 03:08 | We could repeat this by
changing from Fitting to Tile.
| | 03:12 | That way the picture will
keep tiling for eternity.
| | 03:15 | Another option is to
change the Color itself.
| | 03:18 | Maybe this light blue doesn't
match our photo very well.
| | 03:20 | So what we can do is click on this and
grab our eyedropper and sample a color
| | 03:25 | from the photo that we think
would match very nicely.
| | 03:28 | So I'll choose this nice blue and
now that color blue matches the photo.
| | 03:32 | So as you made the web browser larger,
it wouldn't matter as much because
| | 03:36 | it would match the photo.
| | 03:39 | The final option is Scrolling.
| | 03:40 | I'm going to leave this checked on,
so you can see how this would work.
| | 03:43 | What we need to do is come
to the bottom of the page
| | 03:46 | and grab this area
called Bottom of Page.
| | 03:48 | I'm just going to scroll
down a little bit
| | 03:51 | and we're just going to give
ourselves a lot more content.
| | 03:54 | Now that we have some more content, I'm going
to go to File > Preview Page in Browser.
| | 03:59 | Now that that's set, as I
scroll, it looks pretty normal.
| | 04:03 | We can see we're just
scrolling the entire page.
| | 04:05 | But I'm going to close this.
| | 04:07 | Let's go back to Browser
Fill and turn off Scrolling.
| | 04:09 | Now we're going to
repeat the process.
| | 04:12 | I'm going to File >
Preview Page in Browser
| | 04:15 | and now when I scroll you can see
just the page itself is moving.
| | 04:19 | We're not moving the
background image.
| | 04:21 | So if you like the way the image is, you can
have that be static by turning off Scrolling.
| | 04:26 | That way just the content on the page scrolls
and the background stays the way that it is.
| | 04:31 | Adding your own images to the background
of a page or browser is a great way to
| | 04:34 | strengthen the design of your site.
| | 04:37 | One warning that I want to
share with you is that
| | 04:39 | whenever you add images to
your site, it will load slower.
| | 04:43 | Just be careful not to add too
large of an image to your background,
| | 04:47 | otherwise your site may take too
long to load for some users.
| | Collapse this transcript |
| Understanding page guides| 00:00 | When creating a web site,
individual pages can vary in length
| | 00:04 | based on the content of each page.
| | 00:06 | Within Muse we can use a variety of guides
to help us determine what pages begin in
| | 00:11 | the browser, where headers and footers
live, and even where the page ends.
| | 00:15 | We're going to start by going to the Master.
| | 00:17 | So I'm just going to come down
here to A-Master and double-click.
| | 00:20 | Now on the Master you'll see a
series of guides on the left-hand side.
| | 00:24 | Let's take a look at each of them.
| | 00:26 | As you hover over, a tooltip will
tell you what it is and how it works.
| | 00:29 | The first one is the Top of the Page,
then we have our Header, our Footer,
| | 00:34 | and as we scroll down, the Bottom of
the Page and the Bottom of the Browser.
| | 00:38 | If you don't see all of these guides,
make sure you're on the Master page and
| | 00:41 | it says Hide Guides here because
if you've hidden your guides,
| | 00:45 | you'll have to go to View > Show
Guides in order to see all of them.
| | 00:49 | The Top of the Page determines
where the top of the page is
| | 00:53 | in relationship to the web browser.
| | 00:55 | As we lower this,
there's more padding put in,
| | 00:57 | so the content is further
away from the web browser.
| | 01:00 | As we raise it up,
it gets closer again.
| | 01:03 | So as an example, if I put this
all the way to the top and go to
| | 01:06 | File > Preview Page in Browser, we'll see
that the content is all the way up at the top
| | 01:12 | and sometimes that's maybe
what you're looking for.
| | 01:14 | Other times we want this a little lower,
so we're just going to drag this back down.
| | 01:19 | The Header is used to determine a section
where the content will appear the same
| | 01:23 | on every single page that's connected
to that particular Master.
| | 01:26 | This is really useful for menus
and other repeating elements.
| | 01:30 | We'll talk more about
this in the next movie.
| | 01:32 | That's also true with our Footer.
| | 01:34 | The Footer is where we determine what
shows up at the bottom of every single page.
| | 01:38 | Sometimes this is used for legalese,
another menu system, or contact information.
| | 01:43 | Once again we'll be going over this
along with the Header in the next movie.
| | 01:47 | The Bottom of the Page sets the
minimum height of the page itself.
| | 01:50 | As I drag this down, I'll add
more content to the page itself.
| | 01:54 | In fact, you don't have to move this
very often, because Muse has a wonderful
| | 01:58 | auto-expanding Bottom of Page feature.
| | 02:01 | So as an example, if
I grab this rectangle,
| | 02:03 | I'm just going to draw this
out and give it a color.
| | 02:05 | When I grab my Selection tool, as I
move this down, watch what happens,
| | 02:11 | the page automatically
expands and contracts.
| | 02:14 | This allows me to
continue to add content
| | 02:16 | without having to worry about coming down
here and adding more content to the page.
| | 02:21 | It makes designing for the
web significantly easier.
| | 02:24 | The last one is the
Bottom of the Browser.
| | 02:26 | This determines to padding between the bottom
of your content and the browser itself.
| | 02:31 | So I could give myself more room down
here or I could drag it all the way up
| | 02:34 | and have it snap right to the bottom.
| | 02:36 | The choice is yours.
| | 02:38 | All of these guides can be manipulated on any
of the pages except for the Header and Footer.
| | 02:44 | The Header and Footer are unique in that
they only can be modified on the Master page.
| | 02:49 | For now, I'm going to
delete this rectangle,
| | 02:51 | and let's go back to the Plan
view and go to the Home page.
| | 02:54 | On the Home page you'll see that the
Header and Footer are already grayed out
| | 02:58 | because I can't access them.
| | 03:00 | That's because they're not
available on a regular page.
| | 03:02 | They're only available
on a Master page.
| | 03:05 | But if I like, I can come down here
and move any of the other guides
| | 03:09 | to make this particular page unique.
| | 03:11 | Another question you may be asking
yourself is where are the Ruler guides?
| | 03:15 | In most Adobe applications, you can go
over to the Ruler and click and drag
| | 03:18 | to bring out a guide to
help align your objects.
| | 03:21 | Unfortunately, right now
they just don't exist in Muse.
| | 03:24 | Hopefully they will be
added in a future update.
| | 03:26 | For now you have features
like Smart Guides and Alignment
| | 03:29 | to help you with
your aligning needs.
| | 03:32 | Now that we understand
the basics of guides,
| | 03:34 | let's take a look at how to work with
headers and footers in the next movie.
| | Collapse this transcript |
| Establishing headers and footers| 00:00 | In order to maintain a sense of consistency
across multiple pages of a web site,
| | 00:05 | it is important to establish
Header and Footer regions.
| | 00:08 | Headers may contain graphics for the top
of a web site or even a menu system that
| | 00:12 | lets users move between their pages.
| | 00:14 | Footers can cap the bottom of a site and
let users know when they've reached the end.
| | 00:19 | Let's take a look at how to create
and work with Headers and Footers.
| | 00:22 | Let's begin by going to the Home page.
| | 00:24 | So I'm going to double-
click on the Home page.
| | 00:26 | And here, I want you to pay attention
to the relationship between the image
| | 00:30 | at the top and the image and
background that we see right here.
| | 00:33 | It's about 25 pixels right now.
| | 00:35 | Now, over here is my Header guide.
| | 00:38 | If I try to move this, it's not
going to let me; it's grayed out.
| | 00:41 | If I click on it, I will get a
tooltip telling me how to use it.
| | 00:45 | It's saying that I have to go to the
Master page if I want to modify this.
| | 00:48 | So let's go to the Master.
| | 00:50 | I'm going to go back to the Plan view
and then double-click on A-Master.
| | 00:56 | Back on the Master page, I'm
going to grab the Header guide
| | 00:58 | and drag it down underneath this image.
| | 01:00 | Now, let's go back to the
Home page and see what changed.
| | 01:05 | You'll notice now that there's
a large amount of space
| | 01:07 | between the top graphic
and the graphics below.
| | 01:10 | What happened was, as I moved
the guide, the amount of space
| | 01:14 | between the top Header guide and
the image below was maintained.
| | 01:17 | But if I don't want this amount of
space, what I need to do here is
| | 01:21 | I'm going to go back and I'm going to click
and drag to select all of this content
| | 01:25 | and put it back up right
next to the Header guide.
| | 01:28 | Going forward, when I move this Header,
all of this content will move with it.
| | 01:33 | Let's check it out.
| | 01:33 | I'm going to go back to the Master page
and move the guide down a little more.
| | 01:38 | Let's say I want to get a little more
breathing room between the top Header
| | 01:41 | and the content below.
| | 01:43 | Back on the Home page, we can see
that the amount of space was updated.
| | 01:47 | If I want to bring it back, I just go
back to the A-Master, bring it back up,
| | 01:51 | and back on the Home
page, it's been updated.
| | 01:54 | By taking the time to set up
a Header on all of your pages,
| | 01:57 | it will make editing
significantly easier.
| | 01:59 | Now, let's take a
look at Footers.
| | 02:01 | As I scroll down, we can
see here is our Footer.
| | 02:04 | With the Footer,
it's the same options.
| | 02:06 | If I want to modify this, I can click,
but the tooltip is just telling me
| | 02:10 | to go back to the Master page.
| | 02:11 | So what I'm going to do is
I want to move this Footer
| | 02:14 | to give myself a little
more room down here.
| | 02:16 | Back on the Master page, I'm going
to scroll down and I can play with
| | 02:20 | the Footer guide to determine
the amount of space that I want.
| | 02:23 | I think this is looking pretty good.
| | 02:24 | Now, when I draw a rectangle,
I will draw one about this big,
| | 02:29 | I'm going to remove its stroke
and give it this nice blue color.
| | 02:33 | Now after drawing this object, if I
want to put this underneath the Footer,
| | 02:37 | it's going to be very difficult,
because we can see the page
| | 02:39 | is automatically expanding.
| | 02:41 | What if I want to
put it down here?
| | 02:43 | Well, what I can do is
with this rectangle selected,
| | 02:45 | I'll click the checkbox to
make it part of the Footer.
| | 02:48 | Now that, that's the case, I can come
down here and put it anywhere that I want.
| | 02:51 | What I'm going to do is resize
this to be the size of the Footer.
| | 02:56 | So I'll just grab this rectangle,
and there we go; that is looking good.
| | 03:02 | The next step is that I
want to bring in some text.
| | 03:04 | I'm going to put the contact
information for the museum.
| | 03:07 | Now I could type it in here manually, but
I actually have it saved as a text file.
| | 03:11 | We're going to go to File > Place or
Command+D or Ctrl+D and we're going
| | 03:17 | to navigate to the Assets folder, and
in here is a file called footer.txt.
| | 03:23 | With my loaded cursor, I'll just
click to place it on the page
| | 03:26 | and I'm going to resize this
to make this a little wider,
| | 03:29 | just so all the text
can fit and look good.
| | 03:32 | Next, I'll double-click to
select the text and center it.
| | 03:36 | Now that I have that finished,
I want to put this in here
| | 03:38 | and I'm going to make sure it's
part of the Footer. There we go.
| | 03:42 | That is looking pretty good.
| | 03:43 | Maybe I'll even bring this down a little
more and we'll bring the Footer down.
| | 03:51 | Now that I have this established,
if I go back to the Home page,
| | 03:54 | we'll see that we have this
content at the Footer of the page.
| | 03:57 | If I try to move something else,
it will never cover up the Footer
| | 04:01 | because the Footer
will keep expanding.
| | 04:03 | When you're finished setting
up your Header and Footer,
| | 04:05 | it is possible to hide the guides
by going to the View menu
| | 04:08 | and choosing View >
Hide Header and Footer.
| | 04:11 | However, if you ever want to edit them
again, remember to go back to the Master
| | 04:15 | and turn on their
visibility for easy editing.
| | Collapse this transcript |
| Changing site and page properties| 00:01 | After you've created your site, you may
find that you need to change properties
| | 00:04 | for the entire site or
maybe just a page or two.
| | 00:07 | These changes can range from
the number of columns on a page,
| | 00:10 | to the dimensions of the page itself.
| | 00:12 | Before we make changes to any of these
properties, it's important to understand
| | 00:16 | the relationship between Site
Properties and Page Properties.
| | 00:21 | Let's begin by talking
about Site Properties.
| | 00:23 | I'm going to go to
File > Site Properties.
| | 00:28 | The Site Properties dialog is
similar to the New Site dialog.
| | 00:32 | In fact the changes that you can
make here are pretty much the exact
| | 00:35 | same changes you can make when
you're first creating your document.
| | 00:38 | The few changes that are different are
the fact that we can add a Favicon icon,
| | 00:41 | which we'll cover later on, as well as
modify the various hyperlinks throughout
| | 00:45 | the web site, which we'll also be
talking about later on in this course.
| | 00:48 | If I make any changes
to the Site Properties
| | 00:51 | it will affect every single
page within the document.
| | 00:54 | But what happens if I want to
modify just an individual page?
| | 00:57 | Well for that we need
to use Page Properties.
| | 01:00 | I'm going to the click OK
to dismiss this dialog box
| | 01:02 | and what we can do is
go to any other page.
| | 01:05 | I'm just going to
go to the Home page.
| | 01:07 | On the Home page, I need to right-
click and go to Page Properties.
| | 01:12 | Inside the Page Properties
I see similar information,
| | 01:16 | but there's another
option called Metadata.
| | 01:18 | The Metadata lets me add additional
information about this particular page,
| | 01:22 | which we'll be covering in the next movie.
| | 01:24 | At the bottom of this page we can
include its navigation options,
| | 01:27 | as well as if we want to
have it included in Export.
| | 01:30 | But in this case we can actually go in
here and change the number of Columns.
| | 01:34 | So let's make this be 1 Column.
| | 01:36 | Now that I have this 1 Column, if I
go back and go to a different page,
| | 01:41 | we can see this page
still has 12 columns.
| | 01:43 | So by using Page
Properties, we can change
| | 01:45 | unique properties about
each page individually.
| | 01:48 | For now, let's go back to Home
and I'm going to right-click
| | 01:51 | and go to Page Properties and reset
this back to 12, so it's normal.
| | 01:56 | Back in our Plan mode, I want
to talk about the relationship
| | 02:00 | between Master pages
and Normal pages.
| | 02:02 | What happens if we decide that we want
to have some pages in our web site
| | 02:06 | have 12 columns and other
pages have only one column?
| | 02:09 | Well right now I would have to manually
go to each page's Page Properties
| | 02:13 | and make that change, and for
me that's just too much work.
| | 02:16 | So I'm going to come back down to A
-Master and rename this 12 Columns.
| | 02:22 | Now right now, everything is set to 12
columns so I don't have to make any changes.
| | 02:26 | But what we're going to do
is I'm going to right-click
| | 02:28 | on this Master page
and choose Duplicate.
| | 02:31 | Now that it's duplicated,
we'll call this one 1 Column.
| | 02:34 | Now rather then double-clicking to go
to this page and then right-clicking
| | 02:39 | and going to Page Properties, you
can get to the Page Properties faster
| | 02:43 | while in the Plan view by
right-clicking your mouse
| | 02:45 | on any page regardless of a Master or
Normal page, and choosing Page Properties.
| | 02:51 | Now that I have this set,
I'll change this to 1 Column.
| | 02:55 | Now that it's set to 1 Column, I'm
going to change the children pages here
| | 02:59 | to all 1 Column Masters, or selecting and
right-clicking and changing the master.
| | 03:06 | Now that I have this set, I can go to these
pages and we can see that they're all 1 Column.
| | 03:11 | Later on if I change my mind, all I
have to do is go back to this Master page,
| | 03:15 | I'll go to my Page Properties and
let's say I want to have six columns
| | 03:20 | and then I'll rename the
Master page so it makes sense,
| | 03:23 | and now all of these pages
will have six columns.
| | 03:27 | If I went to one of these individual
pages and made a change,
| | 03:31 | let's say I went to Page Properties
and made this have 10 Columns.
| | 03:34 | Well if I want to go back to what it
was before that and I don't remember,
| | 03:39 | I can always go back to the
Plan view, select that page,
| | 03:43 | right-click and choose
Reset Page Properties.
| | 03:45 | That will reset it back to what was
originally when I applied the Master.
| | 03:50 | Another unique aspect of Page Properties
is to choose its Export options.
| | 03:53 | What we're going to do is we're
going to add another top level page,
| | 03:57 | and we're going to call this Clipboard.
| | 04:01 | Now for the Clipboard page, you might
just use this as a placeholder if you're
| | 04:04 | messing around with a widget or trying
another composition or maybe you just
| | 04:08 | want to make an alternate version
of the page to see how it looks.
| | 04:11 | But when you upload your site, you may
not want this page to be included in both
| | 04:14 | the navigation and as a
file on your web site.
| | 04:18 | So what we can do is if we
select this page and right-click,
| | 04:21 | we can turn off Export,
so it doesn't export,
| | 04:24 | as well as go to menu options
and say Exclude Page From menus.
| | 04:28 | That way it won't be included in any
navigation systems that get created.
| | 04:32 | Now that we have a better
understanding of the relationship
| | 04:35 | between Page Properties
and Site Properties,
| | 04:38 | it will be easier for you to plan
to make changes for your site
| | 04:41 | without having to manually make
a change on every single page.
| | Collapse this transcript |
| Adding page metadata| 00:00 |
One of the most important part of a
website, is how easily it can be found on
| | 00:03 |
a search engine.
You can improve your website search
| | 00:06 |
engine ranking by adding relevant
metadata to your pages.
| | 00:10 |
But you might be asking yourself, what
exactly is metadata?
| | 00:14 |
Well, metadata is simply is, data about
data.
| | 00:17 |
It's found on just about all digital
documents.
| | 00:20 |
For example, if you have a digital photo,
it might tell you the camera model it
| | 00:23 |
came from, the dimension of a photo, the
save date and so on.
| | 00:27 |
But when it comes to news and websites,
you want to have relevant metadata so you
| | 00:31 |
can say exactly what is the information
that's found on that page, that way when
| | 00:35 |
someone searches of your website via
search engine it can show up as a
| | 00:38 |
relevant result.
To add metadata to an individual page
| | 00:45 |
inside Muse, you just go to that page,
right-click, and chose Page Properties.
| | 00:50 |
The middle option is called Metadata, and
the first option is Description.
| | 00:54 |
The Description is exactly what the page
is about.
| | 00:57 |
I'm just going to put in here some mocha
the San Angelico museum of contemporary
| | 01:01 |
art is an art museum with a focus on
modern art from the last 75 years.
| | 01:06 |
Since that is exactly what this webpage
is about.
| | 01:09 |
We also have keywords.
Keywords are single words or phrases that
| | 01:13 |
describe the page itself.
So if someone is searching on a search
| | 01:17 |
engine trying to find your webpage.
You would want to enter relevant keywords.
| | 01:21 |
So in the case of this website, we'll
enter museum, paintings, photography,
| | 01:30 |
modern art, and California.
If you're familiar with web design and
| | 01:35 |
coding, HTML for head should be familiar
to you.
| | 01:39 |
What that's for is to inject or insert
special code that would show up on the
| | 01:43 |
top of every single page.
Now, not visually on the top of every
| | 01:47 |
single page, but inside the code.
This is used for tracking in Google
| | 01:51 |
Analytics and other advanced features.
You can put it here, manually in each page.
| | 01:56 |
Or, if you want to automatically be on
every single web page inside your site,
| | 02:00 |
you could put it on the master.
And then, whatever is in the master head
| | 02:04 |
would apply to the head of the other
pages.
| | 02:06 |
We're not going to insert anything here
right now, so let's go to the options tab.
| | 02:11 |
The page name at the top is the name that
is visible inside news.
| | 02:14 |
So right now this page is called Home,
but I could rename it if I wanted to
| | 02:18 |
here, or in the plan view.
The page title is the text that appears
| | 02:24 |
in the actual web browser at the top of
the web browser when you're on that page.
| | 02:28 |
So if we don't want this to be Home.
We can uncheck this and we can type in
| | 02:32 |
something else.
For example, welcome to the Simoca Art Museum.
| | 02:36 |
The filename is the actual HTML file that
will be loaded when someone goes to the page.
| | 02:42 |
The first page is (UNKNOWN) index dot
HTML, so you really don't want to change
| | 02:46 |
that, but if you're on a different page
you could have it be a different name if
| | 02:49 |
you so desired.
The sitemap.xml is a file that's used for
| | 02:53 |
SEO for your website.
You usually want to include pretty much
| | 02:57 |
every page of your site in, in that,
unless there's a temporary page, like a
| | 03:01 |
pasteboard or some other page that you
don't want included when it goes online.
| | 03:05 |
So for now we'll leave that here.
In our menu options, we do want this page
| | 03:08 |
to be included in our menu.
While some of these metadata fields will
| | 03:12 |
be unique to each page, you may want to
have the same information on some or most
| | 03:17 |
of the pages on your website.
The easiest way to do this is enter your
| | 03:21 |
metadata when you first create the
website.
| | 03:24 |
Then, you can just duplicate that first
page to the other pages on the site, and
| | 03:28 |
the metadata will come along.
If you need to manually edit the data
| | 03:31 |
later or add new data, you'll have to do
it manually on each page.
| | 03:35 |
| | Collapse this transcript |
| Creating a favicon| 00:01 | When you visit or bookmark a web site
| | 00:02 | you may have noticed a tiny
little graphic next to the URL.
| | 00:06 | This is called Favicon.
| | 00:08 | By adding this little graphic, you can help
brand your web site and make it easier for
| | 00:12 | people to find your site among a
collection of ever-growing bookmarks.
| | 00:16 | Let's take a look at a few
examples of this in action.
| | 00:19 | In Safari in the URL
at the top of the page,
| | 00:22 | you can see that we have the
lynda.com logo was sitting there.
| | 00:25 | On the Apple page we have the Apple logo,
the Google logo and the Adobe logo.
| | 00:31 | When I bookmark these or view my
bookmarks, I'm going to go Bookmarks Bar,
| | 00:36 | we can see each of them
are now visually available.
| | 00:39 | If you don't create a Favicon
you'll just get a generic graphic.
| | 00:43 | By adding one it will help brand
your site and make it easier to find.
| | 00:46 | Let's learn how to do this in Muse.
| | 00:48 | The first thing you have
to do is create the graphic.
| | 00:54 | This has to be a square image.
| | 00:56 | If it's not exactly square,
Muse will not accept it.
| | 01:00 | This can be a large image,
but Muse will scale it down.
| | 01:03 | Ideally, you're going to use either
a 48 x 48, 32 x 32, or 16 x 16 image.
| | 01:10 | When you create this image in another program,
be sure to save it as a JPG, PNG or GIF.
| | 01:16 | To add it to the site we're going
to go to File > Site Properties.
| | 01:21 | Inside the Site Properties, we
have a spot for Favicon Image,
| | 01:24 | and I'm going to click
on the Folder to load one.
| | 01:26 | We'll go to the Exercise Files > Assets folder
and we're going to browse down to Favicon.
| | 01:35 | Now that we have had this
added, we'll click OK
| | 01:40 | and when I go to File >
Preview Page in Browser,
| | 01:44 | we'll see that we have the Favicon
right at the top of our page.
| | 01:48 | If you want to have a unique Favicon
for each individual page, you can do this
| | 01:52 | by going back and right-clicking on any
page and going to the Page Properties.
| | 01:57 | From here we could change the
Favicon image to be different
| | 02:00 | for a different page
within your web site.
| | 02:03 | Be sure to take the time to add at least one
Favicon to your site via the Site Properties.
| | 02:08 | Usually this is the Logo of your web site,
but you may want to simplify the logo
| | 02:12 | in Illustrator to remove a
small copy or other information,
| | 02:16 | because it may not render well, when
you're displaying it that small on the Web.
| | Collapse this transcript |
|
|
5. Working with GraphicsImporting graphics| 00:00 | In the early days of the web,
most sites were primarily
| | 00:03 | a collection of Text and Hyperlinks.
| | 00:05 | After the first
browsers became popular,
| | 00:07 | graphics soon became an
important part of web design.
| | 00:10 |
Let's take a look at how we
can import graphics into Muse.
| | 00:14 | We'll begin by going to the Home
page and to bring in a graphic,
| | 00:17 | we're going to go to File > Place,
you can also press Command+D or Ctrl+D.
| | 00:23 | On our Desktop in our Exercise
Folder, we have an Assets Folder
| | 00:26 | with a large number of graphics.
| | 00:27 | This graphics are primarily
JPEGs, GIFS and Pings,
| | 00:31 | but we can also use SWF
files and Photoshop PSDs.
| | 00:35 | Other formats like AI, EPS,
or TIFs are not supported.
| | 00:39 | To create these web graphics it's
recommended to use the Save for Web Command
| | 00:43 | out of other applications like
Photoshop, Illustrator or Fireworks.
| | 00:47 | The first graphic we're
going to grab is about-hero.jpg.
| | 00:51 | When we press Select, we'll
get it with a loaded cursor.
| | 00:54 | If you're used to Adobe
InDesign, this is very familiar.
| | 00:57 | With my loaded cursor I get a small
preview of the image, and when I click,
| | 01:02 | it will be placed at exactly
100% of its actual size.
| | 01:05 | If I press Undo, Command+Z or Ctrl+Z, I'll
get it back to the loaded cursor again,
| | 01:10 | and this time I can click and drag
and draw it to whatever size I like.
| | 01:15 | You'll see this small percentage will
let me know how big I'm making it.
| | 01:19 | It's not recommended to go beyond 100%,
because the photo could become pixelated.
| | 01:23 | So, for now we'll keep
it a little smaller.
| | 01:26 | Let's delete this graphic
and let's bring in some more.
| | 01:28 | I'm going to go to
File > Place again,
| | 01:31 | and this time we're going to
bring in more than one image.
| | 01:33 | What we're going to do is I'm going
to click on the top image here,
| | 01:36 | hold my Shift key and
click on the fourth one.
| | 01:39 | If I wanted to grab another one,
I could hold down Command on the Mac
| | 01:43 | or Ctrl on the PC, to grab any other images
that I like that were noncontinous.
| | 01:47 | If I wanted to remove those, hold down the
same key, Command or Ctrl, and deselect them,
| | 01:52 | we'll stay with the
top four and press Select.
| | 01:56 | Now my loaded cursor has a number 4;
this tells me I have 4 images,
| | 02:01 | and the first one is loaded.
| | 02:02 | If I want to switch to another image,
I can use my arrow keys on the keyboard
| | 02:06 | to switch between the various images.
| | 02:08 | If I don't want one of them, I can press
the Esc key to remove it from my queue.
| | 02:12 | Now with this three images I can just
do a click and drag, click and drag,
| | 02:17 | and a click and drag to quickly
bring all three of them in.
| | 02:20 | Another way to bring a graphic
into Muse is via drag and drop.
| | 02:24 | On the Mac if I go to the Finder
and find an image that I want,
| | 02:28 | I can just drag and drop
it directly into Muse.
| | 02:31 | I can click and put it on
the page wherever I like.
| | 02:34 | On the PC I'll have to have an Explorer
window to do the exact same operation.
| | 02:39 | When you drag and drop an image, it's exactly
the same process as doing File > Place
| | 02:43 | or pressing Command+D or Ctrl+D.
| | 02:45 | Placing graphics as links into Muse
is the preferred way of working.
| | 02:49 | While it's technically possible
to copy and paste graphics in,
| | 02:52 | it will result in a larger file size and
make it harder to make edits down the road.
| | 02:57 | In a later movie we'll discuss Embedding
and Editing Links in greater detail.
| | Collapse this transcript |
| Adding animated GIFs and SWFs| 00:00 | One of the more fun aspects
of working with Web Design
| | 00:03 | is the ability to add
animations to your Web site.
| | 00:06 | In this movie, we'll take a look
at two different technologies,
| | 00:09 | Flash and Animated Gifs, to see how we can
incorporate them into your site.
| | 00:15 | You can bring animation Assets into
Muse the exact same way you bring normal
| | 00:19 | assets into Muse, by going File > Place.
| | 00:22 | And we'll start with an Animated Gif.
| | 00:24 | So what we're looking
for is animated-logo.gif.
| | 00:27 | Here it is; we'll Press Select, and
we'll click and put it on our page.
| | 00:31 | When we first place this graphic, it looks
like a normal image with nothing special.
| | 00:36 | But let's click on Preview
to see what happens.
| | 00:40 | In Preview mode we can see that each
letter is slowly appearing one after
| | 00:44 | another and then the name of
the museum appears at the bottom.
| | 00:47 | This is a frame-based animation that was
built in either Photoshop or Fireworks.
| | 00:52 | Let's go back to the Design view;
| | 00:54 | you can see that the first frame of the
animation is always sitting by itself
| | 00:58 | in the Design view.
| | 01:00 | In order to see the other frames we
have to preview it in Preview mode or
| | 01:04 | preview it in a Web Browser.
| | 01:05 | I'm going to delete this image and
then let's bring in a Flash Asset.
| | 01:09 | I'm going to go to File > Place and
we're browsing for samoca-banner.swf;
| | 01:17 | it has to be a .swf File.
| | 01:19 | This is an export from Flash
Professional or Adobe InDesign.
| | 01:23 | You can't import a native
Flash authoring asset.
| | 01:26 | it has to be finished published
movie, which is what SWF is.
| | 01:30 | With this selected, I'll get my
loaded cursor and put it on the page.
| | 01:34 | Now the poster image for a Flash
Movie is relatively boring,
| | 01:37 | you really can't tell what it is.
| | 01:39 | In order to see the animation
we have to go in to Preview mode.
| | 01:43 | In Preview mode we can see this Animation
and it's a little more impressive.
| | 01:47 | In fact, one of the interesting aspects of
Flash is this information is usually vector,
| | 01:52 | which means we can scale
it significantly larger.
| | 01:54 | So if I go back into Design mode and I scale
this image to almost fill the screen and
| | 02:01 | press Preview, we can see the animation
plays and it's still crisp and looks good.
| | 02:06 | One word of warning is that Flash
will not work on iOS devices.
| | 02:10 | So if you plan on viewing your web site on
an iPhone or an iPad or other iOS device,
| | 02:15 |
it will not display and you'll
get a warning asking for a plug-in.
| | 02:18 | Well working with animations in
Muse is fairly straightforward.
| | 02:22 | Keep in mind that it isn't possible to edit
the timing or other animation properties.
| | 02:27 | If there's an issue with the animation,
you'll need to go back to the original
| | 02:30 | application to tweak the asset
before you can publish it to your site.
| | Collapse this transcript |
| Adding animations from Adobe Animate| 00:00 | If you want to use animation in your
website but you want it to work on mobile
| | 00:04 | devices like the iPhone or the iPad,
Flash unfortunately will not work.
| | 00:09 | Luckily there is a new web animation
application from Adobe called Edge Animate.
| | 00:14 | Edge lets you build animation
and interactivity similar to Flash.
| | 00:18 | But rather than relying on a plug-in, it uses a
combination of HTML, CSS, and JavaScript.
| | 00:25 | I am inside Edge Animate, and I'm just going
to tab the spacebar to preview this animation.
| | 00:30 | In this animation we have the
background image fading in and then some text
| | 00:34 | moving from side to side.
| | 00:35 | If you do create something more complex,
it still would work with Muse, but we're
| | 00:39 | going to keep things simple for now.
| | 00:41 | In order to bring this into Muse, we have to
publish it into a format that Muse can accept.
| | 00:45 | To do that, we're going to go
to File > Publish Settings.
| | 00:49 | In this dialog we want to make
sure we have InDesign/DPS selected.
| | 00:53 | If we are publishing to the Adobe
InDesign Digital Publishing Suite, we could
| | 00:57 | use this option, for example, to
create a digital magazine for the iPad.
| | 01:02 | But in our case, we're going to Muse,
and this option will still work.
| | 01:05 | I'll select InDesign/DPS and then make
sure I have the Target Directory that I want.
| | 01:11 | In this case, it's already on my Desktop.
| | 01:13 | But if you want to change to something
else, you could just click the Folder
| | 01:16 | icon on the right and choose your own location.
| | 01:19 | If you want to change the name, just
type in a different name and the poster
| | 01:23 | image, which is the static
representation of the animation.
| | 01:25 | You can click the arrows on the right to
choose the poster that you want to use.
| | 01:29 | For now, everything is
set up the way that I like.
| | 01:32 | So I'll click Save.
Next we'll go to File > Publish.
| | 01:36 | As soon as which will publish an OAM
file be created in the background.
| | 01:40 | This file is a package collection of all the
assets Muse needs to view the Edge Animation.
| | 01:46 | Going back into Muse, I'm
going to go to File > Place.
| | 01:49 | I'll browse to the Desktop and grab that
file and click and place it in my layout.
| | 01:55 | When I deselect I'll see that
we have a nice black border.
| | 01:58 | But in this case, I don't really want
that, so I'm going to select it and
| | 02:02 | change the Stroke to 0.
| | 02:04 | Now to preview the animation,
we'll click on the Preview button.
| | 02:07 | There we go, now that's a good animation.
| | 02:09 | If we don't like a certain aspect of
the animation or we want to change some of
| | 02:13 | the graphic elements, we have
to go back to Edge to do that.
| | 02:17 | I'm going to switch back to
Design mode, and I'll go back to Edge.
| | 02:20 | Inside Edge if I want to make a change
to this, for example, maybe I want to
| | 02:25 | change some of the text.
| | 02:26 | Let's select the text, double-click,
and then we're going to change the color.
| | 02:30 | Instead of a blue color, we'll choose a purple.
| | 02:32 | Now that I have this finished,
I'm going to go to File > Publish.
| | 02:36 | As soon as I've published this, and
I go back to Muse, we'll see that the
| | 02:40 | asset is out of date.
| | 02:41 | When I select this and right-click and
choose Update Asset and click Preview,
| | 02:47 | we'll see the Edge Animation has been updated.
| | 02:50 | The reason this occurred is because we just overwrote
the OAM file on the Desktop with a new one.
| | 02:55 | Using Edge to create animation and
interactivity is a great way to help you take
| | 02:59 | your site to the next level.
| | 03:00 | If you want to learn more about using
Adobe Edge Animate, be sure to check out
| | 03:04 | our other Edge training at lynda.com.
| | Collapse this transcript |
| Working with graphics| 00:00 | After placing an image into Muse,
you may find yourself wanting to crop
| | 00:04 | or resize the image.
| | 00:06 | Rather than trying to do this externally
and then re-import the graphic, you can
| | 00:09 | easily make modifications
to your placed graphics.
| | 00:13 | Let's begin by going to File > Place,
and in our Assets folder, we're going
| | 00:17 | to grab about-hero.
We'll click and place this image at 100%.
| | 00:24 | If we'd like to move our image around,
we want to be sure to have our Selection
| | 00:27 | tool, and then we can click and
drag and put it anywhere on the page.
| | 00:30 | You can hold the Shift key to constrain your
movements along various 45- and 90-degree angles.
| | 00:36 | You can also move your graphic by
using the arrow keys on the keyboard.
| | 00:39 | Each time you press it, you'll move 1 pixel.
| | 00:42 | If you hold the Shift key with your
arrow keys, you'll jump 10 pixels at a time.
| | 00:46 | This is a great way to fine-tune
your graphic's placement on the page.
| | 00:50 | If you want to resize the graphic, just
go to any corner and click and drag and
| | 00:54 | it will always resize proportional.
| | 00:56 | While you're dragging, you'll see a
percentage indicator to let you know how big
| | 01:00 | or small the graphic is getting.
| | 01:01 | Be sure to keep it under 100%, because
if you drag it larger than 100%, your
| | 01:06 | picture may become pixelated.
| | 01:08 | If you want to rotate the graphic, you
can go to any corner and just click and
| | 01:12 | drag to spin it around.
| | 01:14 | If you want to get it to a specific
angle, you can always open up your
| | 01:17 | Transformation panel and
type in any angle that you like.
| | 01:22 | For now, I'll just put this back to 0.
| | 01:24 | There are other transformation controls
that we can do to this object, but we'll
| | 01:27 | talk about those in a later movie.
| | 01:29 | If we'd like to crop our picture, there
are few different ways that we can do this.
| | 01:33 | One way is to use the Crop tool.
| | 01:35 | When I select the Crop tool, I can
grab the edge of the frame and crop it
| | 01:39 | in wherever I like.
| | 01:40 | Then I can mouse over the center content
grabber and move the picture around to
| | 01:45 | get a more appealing cropping.
| | 01:46 | If you want to resize the image itself,
you can click to select the content and
| | 01:50 | then grab the edge to
make it larger and smaller.
| | 01:54 | Personally, I prefer to use the Move
tool for as many operations as I can.
| | 01:58 | So there are a couple of little
shortcuts we can do to do the exact same
| | 02:01 | operations a little easier.
| | 02:03 | I'm going to grab my Move tool and deselect.
| | 02:05 | Now if I start to click and drag,
we can see the image starts to scale.
| | 02:09 | Instead, I'm going to hold down
Command or Ctrl on the PC, and as I click
| | 02:14 | and drag, you can see that I'm doing my
cropping right now without need for the other tool.
| | 02:18 | If I want to move the content inside,
I can just double-click, then I can click
| | 02:22 | and drag to reposition it,
or resize the image itself.
| | 02:27 | When I'm finished, I'll just hit the Escape
key to go back and select the frame again.
| | 02:32 | I found myself using this much more
often than the Crop tool, because it's
| | 02:35 | faster and one less tool to worry about.
| | 02:37 | Another option that we
have are fitting controls.
| | 02:40 | For example if I hold the Command or Ctrl
Key and make this frame be a little smaller,
| | 02:44 | if I want to shrink the image down to
fill up this frame, I could manually do
| | 02:48 | it, but that would be pretty tiresome.
| | 02:50 | So instead, if I right-click my mouse
and go to Fitting, I can fit the content
| | 02:55 | proportionally to scale it all the way down.
| | 02:58 | But you notice how there's a
little bit of space left on the side?
| | 03:01 | If I wanted to fill up this frame, I
can right-click, go to Fitting, and choose
| | 03:05 | Fill Frame Proportionally instead.
| | 03:07 | Now it's completely filling up my frame.
| | 03:10 | Another way to do this is via the
Object menu, with Fitting, and we can see we
| | 03:14 | have two different shortcuts for each of them.
| | 03:16 | So if you do this frequently, it might
be worthwhile memorizing those shortcuts.
| | 03:21 | Manipulating graphics
isn't as hard as you may think.
| | 03:23 | Just like most things, the more you
end up working, the faster and more
| | 03:27 | efficient you'll end up being.
| | Collapse this transcript |
| Using an image as a background| 00:00 | Earlier we had learned how to import
a graphic by going to File > Place.
| | 00:04 | But what happens if you already have a frame
on your page that is already the correct size.
| | 00:08 | In order to get a graphic into that frame,
we have to learn about background images.
| | 00:13 | Let's begin by making a frame.
| | 00:16 | So I'm going to grab my Frame tool
and we're going to click and drag.
| | 00:21 | Next we'll remove the Stroke so there's
no formatting at all on this frame.
| | 00:25 | Now to put a picture in this frame, you might
think that you'd want to go to File > Place.
| | 00:29 | Well let's try and see what happens.
| | 00:32 | In the Assets folder let's just
grab an image and we'll press Select.
| | 00:35 | And with our loaded cursor if you try to
click in here, it's not going to go in;
| | 00:39 | it's just going to create its own frame.
| | 00:41 | Well we're going to delete this
and we're going to select this frame.
| | 00:44 | In order to put a picture in here
we have to use a background image.
| | 00:48 | And that means we're going to
fill the frame with an image,
| | 00:52 | just like you fill a
frame with a color.
| | 00:54 | To do that, we're going to go over to
Fill, you have to click on the word here,
| | 00:58 | and then go down to Image and
click on this little folder.
| | 01:01 | That will let me browse
to the image that I want.
| | 01:03 | I'm going to grab
bird-watching-big.
| | 01:09 | Now that I have that placed, let's click
off and I can move this around on the page.
| | 01:13 | Now when I click and drag, look what happens.
| | 01:15 | It's just cropping the image;
the image isn't getting any larger.
| | 01:20 | The reason for that, is it's in
the background; it's like a color.
| | 01:23 | So what we're going to do is I'm going
to make this frame be a little bigger,
| | 01:26 | and if we want to manipulate the picture,
we have to go back to our Fill settings.
| | 01:31 | Now there's two ways to deal with a Fill,
| | 01:33 | I can do it up here like we've been
using or I can use the Fill panel.
| | 01:38 | So if I go to Window > Fill, we can see
the panel over here has the same options.
| | 01:43 | I kind of prefer this
because then I don't have to
| | 01:45 | go to this little drop-down
menu every single time.
| | 01:48 | Right now this image is aligned to
the top and left corner of this frame.
| | 01:52 | I can change this by changing its position.
| | 01:54 | I can have this aligned in the center
on the left, centered within the frame or
| | 01:59 | any other corner that I see fit.
| | 02:01 | The other options that I have are Fitting.
| | 02:03 | If I by go in here, I can choose Tile
| | 02:05 | and have it tiled repeatedly
throughout the frame.
| | 02:08 | I can also tile it different directions
or put it back to its original size.
| | 02:14 | Another interesting thing you can
do is we can choose Scale to Fit,
| | 02:18 | so it's fitting perfectly, or Scale to Fill;
that means no matter what I do here,
| | 02:22 | the image will keep
scaling to fill it up.
| | 02:25 | For now let's put it back
to the original size.
| | 02:27 | I'm going to trash this graphic
and replace it with another one.
| | 02:31 | Let's browse and find footer-tile.png.
| | 02:37 | Now when I do this, we just have this
tiny little graphic that's sitting here.
| | 02:40 | But what we're going to do is change
the Fitting to Tile Horizontally,
| | 02:44 | it will repeat across
horizontally this entire frame.
| | 02:48 | As I resize this frame, it will
continue to expand and contract.
| | 02:51 | One of the great things about using
tile graphics is that it'll only be
| | 02:55 | downloaded once into the browser's memory.
| | 02:57 | This will greatly reduce the download time
no matter how wide your page ends up being.
| | 03:02 | What we're going to do now is create a Footer.
| | 03:04 | So I'm going to select this graphic and make
it become a Footer and drag this to the bottom,
| | 03:10 | and I'm going to change
the fill of this to no color.
| | 03:14 | Next I'm going to resize this till it goes
all the way to the edge of the browser.
| | 03:19 | You see this little
red line that shows up?
| | 03:21 | That means it snapped to
he edge of the browser.
| | 03:23 | I'm going to collapse this
for a little more room
| | 03:26 | and I'm going to repeat the
process to the right side.
| | 03:29 | Now that it's snapped to both
sides, this is a 100% width object.
| | 03:33 | Which means it will scale as
your browser gets wider or smaller.
| | 03:37 | Let's preview this.
| | 03:38 | I'm going to go to File
> Preview Page in Browser.
| | 03:42 | You can see here as I change the width
of the web browser, this graphic will
| | 03:45 | expand to be the exact width of
whatever browser window is available.
| | 03:49 | We'll close this and let's
just add another graphic to this.
| | 03:52 | I'm going to grab the Rectangle tool;
| | 03:54 | I'm going to draw another
graphic underneath here.
| | 03:57 | And this time I'm going to remove the
Stroke, I'm going to go to the Fill,
| | 04:01 | but I'm going to use the Eyedropper to
sample the color from this. There we go.
| | 04:07 | Now when I go to File >
Preview Page in Browser,
| | 04:10 | we have a nice footer that automatically
repeats across the entire page.
| | 04:14 | Creating background graphics is just another
way to work with graphics inside Muse.
| | 04:19 | In fact, it is possible
to place a graphic
| | 04:22 | and then another graphic
as a background image.
| | 04:25 | Try combining a transparent
PNG with a background JPEG
| | 04:28 | and see what kind of graphics
you can end up creating.
| | Collapse this transcript |
| Understanding the Assets panel| 00:00 | When you place a graphic into Muse or
import via a background fill, that graphic
| | 00:04 | will end up being linked to where it originally
came from, on your hard drive or maybe a server.
| | 00:09 | In order to manage these links Muse
has a panel called Assets that lets you
| | 00:14 | monitor their status and make
other modifications if necessary.
| | 00:17 | Now you may be asking yourself,
why should I bother linking;
| | 00:21 | it would be a lot easier just to copy
and paste my images directly into Muse?
| | 00:25 | Well, one reason is when you link your files
by placing, it makes the Muse file smaller.
| | 00:30 | Think about it this way, if you were to
copy and paste a 3 MB image into Muse,
| | 00:35 | those 3 MB would have to become
embedded in the Muse file.
| | 00:38 | As you added more and more images, the
Muse file might become too large to manage.
| | 00:43 | Instead when you link to the images,
your Muse file will remain small.
| | 00:47 | Another reason is that it makes
it easier to make changes.
| | 00:50 | If you have your company's logo on your
web page and your company's logo changes,
| | 00:54 | you can make a change
to that file externally
| | 00:57 | and the image would update
automatically in Muse.
| | 00:59 | If it was embedded in the file, you'd
have to recopy and paste it again.
| | 01:03 | If you're familiar with Adobe InDesign,
this is a very similar workflow.
| | 01:07 | In order to manage all of these
images that are linked externally,
| | 01:11 | we're going to use the Assets panel.
| | 01:13 | You can get to the Assets panel
by going to Window > Assets,
| | 01:17 | or pressing Command+Shift+D on
the Mac or Ctrl+Shift+D on the PC.
| | 01:22 | To make this easier to work with,
let's collapse the other panels
| | 01:25 | and resize this window
to make it easier to see.
| | 01:29 | The Assets panel contains
all of the external assets
| | 01:31 | that your entire web
site is connected to.
| | 01:34 | At the top we're sorting by
Name, Status and Page Location.
| | 01:39 | If there's a black arrow next to an image, it
means it's being used on more than one page.
| | 01:44 | If I open up the arrow I'll
see which pages located on.
| | 01:47 | If I want to go to that image, I can just select the image,
| | 01:51 | right-click and say Go To Asset.
| | 01:54 | It will open up that page and then
zoom in to that particular image.
| | 01:59 | The Yield symbol will tell
us the status of our images.
| | 02:01 | You can see that the top image,
ArrowmenuDown.gif, has a small image there;
| | 02:07 | that means this is an embedded graphic.
| | 02:09 | We'll learn more about Embedded
Graphics in a later movie.
| | 02:12 | The rest of the images right now seem
to be fine, there is no warnings at all.
| | 02:16 | But let's explore what
type of warnings we can get.
| | 02:19 | On this page I'm going to make a little
bit of room just by deleting this frame,
| | 02:23 | and what we're going to
do is go to File > Place,
| | 02:25 | and on our Desktop I have got a
file called bird-watching-big.
| | 02:30 | I got this by going to my
Exercise File > Assets folder
| | 02:33 | and copying it over to the Desktop.
| | 02:36 | I want to make modifications to the
copy so I don't hurt the original.
| | 02:39 | With this selected I'm just
going to place this in my file.
| | 02:42 | Now right now everything is fine and
linked to this file on my Desktop,
| | 02:47 | but what would happen if
that file would move?
| | 02:48 | I'm going to go to the Finder or the
Explorer on the PC and browse to my Desktop,
| | 02:53 | and I'm going to rename this file.
| | 02:58 | Now that I've renamed the file
Muse doesn't know where it is.
| | 03:01 | If I go back into Muse and I look in the
Assets folder, you'll see that there's
| | 03:05 | a Stop sign next to that particular
asset; that's because Muse can't find it.
| | 03:09 | When you renamed it doesn't know
where it is, maybe it's been deleted,
| | 03:13 | moved to another folder; it doesn't know.
| | 03:15 | To fix this we have to tell
Muse where this picture is.
| | 03:18 | So what I'm going to do is select
this link in the Assets panel,
| | 03:21 | right-click and choose Relink.
| | 03:23 | Now I'm going to browse to the Desktop
and choose that image and press Select.
| | 03:28 | Now it's relinked and
everything is fine.
| | 03:31 | Another scenario is when the
image is edited externally.
| | 03:34 | I'm going to go to Photoshop and
I'm going to open up that image.
| | 03:38 | While I'm in here I'm going to grab the
Clone tool and just make a small change.
| | 03:46 | After making this change I'm going to
save the file,
| | 03:50 | when I get back to Muse we'll see
a Yield symbol next to this link;
| | 03:53 | this is telling me that the
file has changed externally.
| | 03:56 | What I need to do is select this link,
right-click and choose Update Asset.
| | 04:01 | When I do this the change that
I made will be updated instantly
| | 04:05 | and we can now see that
the bird is no longer there.
| | 04:07 | Another way to make a change to the file
is to edit original directly from Muse.
| | 04:12 | If you right-click on the image in the
Assets panel and choose Edit Original,
| | 04:16 | the file will open up in the native
application on your operating system.
| | 04:19 | However, if this isn't the application
you want to open in, you can also choose
| | 04:23 | Reveal in Finder on the Mac or Reveal
in Explorer on the PC and then open
| | 04:28 | the file in Photoshop for further editing.
| | 04:29 | A few other changes we can do in the Links
panel is editing a title or alternate text.
| | 04:34 | We'll be covering this in a later movie.
| | 04:37 | We can also copy the full path, which is
the location of where the image lives on
| | 04:40 | your hard drive, if you need
to email it to someone else.
| | 04:43 | When you work with linked assets it is
crucial that you keep your files organized.
| | 04:47 |
I recommend that you make a folder called
Assets and place it next to your Muse file.
| | 04:51 | When you're ready to bring an image
into Muse, first place it in that folder,
| | 04:55 | then you can go to
File > Place to import it.
| | 04:57 | This way all of your files
will always be organized.
| | Collapse this transcript |
| Understanding asset size and resolution| 00:00 | When you work with graphics in Muse, it
is easy to resize them to fit your design.
| | 00:05 |
However if you're not careful, you could
end up with images that look pixelated
| | 00:08 | on your web site if you end
up scaling them too large.
| | 00:12 | In this movie we'll take a look at how to
work with the resolution of your images.
| | 00:16 | When you work in print, most people think
about 300 dots per inch for the resolution,
| | 00:20 |
and for the web they
think 72 dots per inch.
| | 00:23 | But in reality, the dpi
doesn't really matter;
| | 00:26 | it's the total number
of pixels that matter.
| | 00:28 | In fact, you can't even
find out the dpi inside Muse.
| | 00:32 | We're going to go
to the About Us page.
| | 00:35 | And if I select this image right here
and we look inside our Assets panel,
| | 00:39 | we'll see the about-hero has
a strange icon next to it.
| | 00:42 | That icon is telling me that
this picture is too low resolution.
| | 00:46 | In fact, when mouse over it, it
will tell me some information.
| | 00:49 | We can see that the original
asset size was 585 x 390.
| | 00:55 | It doesn't say anything
about dots per inch;
| | 00:57 | those are just the
total number of pixels.
| | 01:00 | The next option is the
Resampled Asset Size.
| | 01:02 | It doesn't seem like there's a
difference between Original Asset Size
| | 01:06 | and Resampled Asset Size, but we'll
be talking about that in a moment.
| | 01:10 | The next option is Page Item
Size, which is 646 x 430.
| | 01:15 | That is telling me how large the picture
is being used on the actual page.
| | 01:19 | When you use the image larger
than it exists on your hard drive,
| | 01:22 | you'll get that little Rubik's
Cube warning on the right.
| | 01:25 | In fact, the status will tell
you exactly what the problem is.
| | 01:29 | And in this case, the Asset is being
upsampled and may look pixelated.
| | 01:33 | And it tells you that you can fix it by either
making it smaller or link to a larger asset.
| | 01:38 | Now unfortunately, I
don't have a larger asset,
| | 01:41 | so my only course of action
is to make it smaller.
| | 01:44 | So I'm just going to click drag and
resize this and as soon as I get it
| | 01:47 | down to 100% or less, that warning
will disappear. and now it looks normal.
| | 01:52 | If you end up working with high-
resolution graphics in Muse,
| | 01:55 | there is another workaround
that you should be aware of.
| | 01:57 | I'm going to close the About Us
Page and open up the Asset Size Page.
| | 02:03 | On this blank page we're
going to go to File > Place
| | 02:07 | and we're going to go the
Assets folder and find large-image.
| | 02:09 | Next, we'll click and
place this image at 100%.
| | 02:14 | Now this is a very large image and I'm
just going to press Command+Minus
| | 02:19 | or Ctrl+Minus to
zoom out a little bit.
| | 02:20 | And we can see just how large
this is being used in our layout.
| | 02:24 | When I mouse over the image, it'll tell
us that the Original Asset Size
| | 02:28 | was 3890 x 4942, but the Resampled
Asset Size is 1612 x 2048.
| | 02:36 | What that means is Muse won't import
the image at its full resolution;
| | 02:40 | instead it has a hard limit
of 2048 x 2048 for the image.
| | 02:45 | And right now the Page Item
Size is placed at that hard limit.
| | 02:49 | But if we decide to make this image
larger, we'll see that we'll get
| | 02:52 | the warning telling us that the
image may appear pixelated.
| | 02:56 | But there's a workaround that we can do.
| | 02:58 | When mouse over the image, it tells me that
I can load additional data from the asset.
| | 03:02 | So all I have to do is right-click my
mouse and choose Import Larger Size.
| | 03:09 | When I do that the warning disappears,
and if I mouse over the image,
| | 03:12 | we'll see that my Resampled Asset Size
is now the same as the Page Item Size.
| | 03:18 | This gives me the flexibility
to use larger assets if necessary.
| | 03:22 | However if you don't use large assets,
| | 03:23 | you really don't have to
worry about this workaround.
| | 03:26 | You can usually get away
with increasing the size
| | 03:28 | of your images to a
small amount above 100%.
| | 03:31 | But be careful not to resize your images
too much, or they may appear pixelated.
| | 03:36 | In the end, be sure to preview your site
in a browser and see what it looks like;
| | 03:40 | let your eyes be the final judge.
| | Collapse this transcript |
| Roundtrip editing with Photoshop and Fireworks| 00:00 | If you're used to print design,
you're probably familiar with using
| | 00:03 | native formats, like PSD
files, in your designs.
| | 00:06 | However on the web, you
can't use that type of format.
| | 00:10 | Luckily, Muse supports Native Photoshop PSD
and Fireworks PNG files for your layouts.
| | 00:16 | Upon exporting your site for the web,
Muse will automatically convert your files
| | 00:20 | into JPEGs or Pings.
| | 00:23 | On the Home page, we're going to scroll
down to this open area, and we're going
| | 00:26 | to go to File > Place, and in the
Assets folder, grab bird-watching.psd.
| | 00:34 | When placing a PSD file, we'll
automatically get Image Import Options.
| | 00:38 | The first option is to
Import the Composite Image.
| | 00:41 | What that means is it will import the PSD
file looking exactly how it looked in Photoshop.
| | 00:46 | In fact, we get a little preview,
so we can see what it looks like.
| | 00:50 | But if you like, you can actually
choose to Import specific layers.
| | 00:53 | So if I click on Import layer, I could
choose to import just the Bird layer,
| | 00:59 | or just the layer 1, which
happens to be the background.
| | 01:01 | If I bring in just the Bird, we
can see it shows up very small.
| | 01:05 | So we can clip the contents
to just that particular layer,
| | 01:09 | And that way we just have a
smaller image of just the Bird.
| | 01:12 | But for now, we're going to
import the entire composite.
| | 01:16 | Now with my loaded cursor, I'll
just click and place it at 100%.
| | 01:18 | An advantage of working
with PSD files is that
| | 01:22 | it makes it very easy to
make changes to the file.
| | 01:24 | All I have to do is right-click on
the image and choose Edit Original,
| | 01:28 | and it will automatically
jump to Photoshop.
| | 01:30 | While I'm in Photoshop I can
make any changes that I need.
| | 01:35 | I could turn the layer on
and off, make a color change.
| | 01:38 | But in this case I'm going to grab my Selection
tool, hold down the Option or Alt key
| | 01:42 | and I'm going to drag this
bird to the second branch.
| | 01:45 | Now I'm going to save the file.
| | 01:47 | I'm going to go back to Muse, and
we'll see that it's automatically
| | 01:50 | been updated with my change.
| | 01:52 | Some of the advantages of using
PSD files, as opposed to JPEGs,
| | 01:56 | are that it's really easy to edit,
because you'll jump directly to Photoshop.
| | 01:59 | Another advantage is that Photoshop files
are lossless, versus lossy files of JPEGs.
| | 02:05 | As you edit JPEGs over and over in
Photoshop, they will be recompressing
| | 02:09 | and you'll lose image data over
time, as opposed to PSD files,
| | 02:12 | where it's nondestructive editing.
| | 02:14 | In addition to working
with Native Photoshop PSDs,
| | 02:17 | we can also work with
Native Fireworks Pings.
| | 02:19 | We're going to go to File > Place and
we're going to find samocha-logo-fw.png
| | 02:26 | in our Assets folder, and we'll
place this next to the bird image
| | 02:30 | and I'm going to resize this
to make this a little smaller.
| | 02:32 | Now if I decide I want to make a
change to this, if I right-click
| | 02:37 | and choose Edit Original you would
probably think it will go to Fireworks.
| | 02:41 | Unfortunately, depending on your
Operating System Settings, it may not.
| | 02:45 | In this case it went
to Preview on the Mac,
| | 02:48 | and on the PC it might go
to a program like Paint.
| | 02:51 | So to fix this, I'm going to close
this application, and back in Muse,
| | 02:55 | I'm going to find this
Asset in the Assets panel.
| | 02:57 | I'm going to right-click and choose
Reveal in Finder on the Mac or Reveal
| | 03:01 | in Explorer on the PC, and this will open
up a window where I can find the image.
| | 03:07 | Now with this image selected,
I need to right-click
| | 03:09 | and choose Open With,
and find Fireworks.
| | 03:13 | Now that I have this file open in Fireworks,
I can make any necessary changes.
| | 03:18 | Because this is a native Fireworks Ping,
I still have vector information here,
| | 03:22 | so I'd be able to edit this easily.
| | 03:24 | Just be careful because every Ping doesn't
necessarily mean it's a Fireworks Ping.
| | 03:29 | So in this case, I'm just going
to change the color of the door.
| | 03:33 | Now I'll save the file and now when I go back
to Muse, I'll have to manually update this,
| | 03:40 |
because I didn't trigger the
Edit Original directly from it.
| | 03:43 | So all I have to do is go to the Assets
panel, right-click and choose Update Asset.
| | 03:49 | Working with Fireworks has a few advantages,
because it does allow you to use vector files,
| | 03:54 |
special shapes or even auto shapes.
| | 03:57 | When you're finished with your layout,
and you're ready to upload your web site,
| | 04:00 | PSD files will automatically be converted
either to JPEG or Pings upon export.
| | 04:05 | However, Firework Pings will stay as Pings,
but they will be re-optimized upon export.
| | 04:11 | Be careful though;
| | 04:12 | don't leave your file placed at 100%, because
if you leave a Firework Ping placed at 100%
| | 04:17 |
it won't be changed upon export.
| | 04:19 | And Firework Pings are larger than normal
Pings, so what I recommend you do is
| | 04:25 | inside Muse, just resize it so it's
not exactly at 100%, either make it be
| | 04:30 | a little bit bigger or
a little bit smaller,
| | 04:32 | that way Muse will re-export
it as a normal Ping,
| | 04:35 | and your file size will
be substantially smaller.
| | 04:38 | Just because you can import
Native Photoshop files,
| | 04:40 | doesn't mean that should do
your layouts inside Photoshop
| | 04:42 | and then place them in the Muse.
| | 04:44 | You're better off creating the
graphical elements in Photoshop,
| | 04:48 | and then placing those into
Muse to lay everything out.
| | Collapse this transcript |
| Embedding graphics| 00:00 | Another method of importing graphics
into Muse is via copy and paste.
| | 00:04 | When you import graphics this way,
they will become an embedded graphic.
| | 00:08 | This means that you don't have to
worry about the location of the file,
| | 00:11 | since it really isn't
linked to anything.
| | 00:14 | Let's scroll down to this open area,
| | 00:16 | and I want to put an image
right here above Bird Watching.
| | 00:19 | I'm going to switch to Photoshop and
I'm going to have bird-watching-big.jpg
| | 00:23 | open from our Assets folder.
| | 00:26 | In Photoshop we'll go to Select
> All and then Edit > Copy.
| | 00:30 | We'll switch back to Muse and
we'll just go to Edit > Paste.
| | 00:35 | Now we have the image in here and I'm going
to resize it down to the size that I want it.
| | 00:39 | I'll hold down the Command or Ctrl
key to just crop it up a little bit,
| | 00:45 | then I'll double-click and resize
it, so it's the spot that I want.
| | 00:50 | You notice in Assets panel, it says
Clipboard and has a little graphic.
| | 00:53 | That's because we pasted it from the
clipboard and Muse doesn't know the filename.
| | 00:58 | In fact, we can't Edit Original,
because there's no original to go to.
| | 01:02 | If I try to do this, you'll
see it's not even an option.
| | 01:05 | Some of the advantages of copy and pasting
elements in is that we don't really have
| | 01:09 | to worry about any links, because if
I just moved the Muse file around
| | 01:13 | there wouldn't be anything missing.
| | 01:14 | Another good thing about copying and
pasting is it might seem a lot faster
| | 01:18 | than having to go to File > Place.
| | 01:20 | But there are a lot of negatives
that we need to be aware of.
| | 01:23 | One of the big ones is that we
can't edit the original file.
| | 01:25 | If I want to make a change to this
image, I'd have to copy and paste it
| | 01:29 | back to Photoshop, make the change
and then copy and paste it again.
| | 01:33 | Another disadvantage is that the
Muse file can become quite larger.
| | 01:37 | As you add more embedded graphic
the file size will continue to bloat.
| | 01:41 | If I go back to Photoshop
and open up another file,
| | 01:45 | this time we'll just
open this top image.
| | 01:47 | When I copy and paste this one, we'll
just go to Select > All, Edit > Copy
| | 01:54 | and then paste this one in the Muse.
| | 01:55 | We'll notice that we start
to have another problem.
| | 01:58 | As we start to copy and paste
more and more images in,
| | 02:01 | they all are called Clipboard and
they'll be very hard to manage.
| | 02:05 | When you place your files,
they'll have unique filenames,
| | 02:07 | so it's easier to find
in the Asset panel.
| | 02:10 | For now I'm going to
get rid of this one.
| | 02:12 | There's another way to create
an embedded graphic in Muse.
| | 02:15 | If you've already placed a file in here,
| | 02:17 | I can select it in the Assets panel,
right-click and choose Embed link.
| | 02:22 | Now we will get that icon telling
me it is an embedded graphic
| | 02:25 | and I don't have to worry about
dealing with the external link.
| | 02:28 | If I change my mind, I can always
right-click and choose Unembed Link.
| | 02:33 | Now it's linked back to where
it originally came from,
| | 02:36 | and I can Edit Original, if needed.
| | 02:38 | I don't recommend embedding
your links very often,
| | 02:41 | but there are a couple of uses
that you might want to consider.
| | 02:43 | For example, if you're creating a
very small site with very few graphics,
| | 02:47 | maybe you just have the logo of your
company and everything else is text.
| | 02:51 | In that case embedding
the link isn't a big deal,
| | 02:53 | because it's only one image and
it's one less thing to worry about.
| | 02:57 | Another option is if you're doing a
quick mockup and you're not going to
| | 03:00 | use this for anything, if you just want
to copy and paste a few elements in
| | 03:03 | to be lay it out to see how it
looks, that's perfectly fine.
| | 03:06 | But realize if you want to
use this for something more,
| | 03:09 | you might have to go back
and build it the correct way.
| | 03:12 | If we step back and
look at the big picture,
| | 03:13 | it's probably best to avoid
embedding graphics most of the time.
| | 03:17 | Since it has large negatives including
a large file size and you can't edit the
| | 03:21 | originals, it really should not be
used as part of your normal workflow.
| | 03:25 | That said it's still useful to
know about this functionality,
| | 03:28 | in case the need ever arises.
| | Collapse this transcript |
| Adding alternate text| 00:00 | For many years web designers have been
adding alt text to images and other graphics.
| | 00:06 | Alt text, or alternate text, is a brief
text-based description of the subject captured
| | 00:12 | in the photograph or illustration.
| | 00:14 | This serves two main purposes.
| | 00:16 | For people who have vision problems, screen readers
can read back a description of what is in the image.
| | 00:22 | The other reason is for
search engine optimization, or SEO.
| | 00:26 | Google and other search engines cannot
index the meaning or content of images.
| | 00:31 | By providing alt text, it helps your
document bubble to the top of search results.
| | 00:37 | Let's go to this Home page, and on
the Home page I only have one image.
| | 00:42 | When I select this image, we're going to
right-click on the image, or you can even go into
| | 00:46 | the Assets panel and right-click
and choose Edit Image Properties.
| | 00:52 | Inside Image Properties there are two
fields: Tooltip and Alternative Text.
| | 00:58 | Tooltip is a little pop-up that
happens when you mouse over an image.
| | 01:02 | It's also referred to as the
title attribute inside HTML.
| | 01:05 | We're going to enter the
text The SAMOCA Art Museum.
| | 01:11 | Alternate text is the description of the image.
| | 01:14 | We're going to enter the text
Museum exterior photograph.
| | 01:19 | When you enter alternative text, it
should be the description of the image.
| | 01:23 | If it happens to be a photo of some text
or a sign, it helps to actually type out the
| | 01:28 | text that's in that photo, but most
importantly, you want to be descriptive.
| | 01:32 | For example, painting isn't
a very good descriptive text.
| | 01:36 | On the other hand, Sheldon Crane Seaside,
1963 is very descriptive because that explains
| | 01:43 | exactly what that particular painting is.
| | 01:46 | The more information you add in the alternate content,
the better the experience for accessibility and SEO.
| | 01:53 | Now that we've set this up, let's click OK, and
we're going to go to File > Preview Page in Browser.
| | 02:01 | As I mouse over this and keep my mouse still,
you can see we see the little tooltip that
| | 02:05 | says The Samoca Art Museum.
| | 02:08 | But if we view the source--we're going to
View > View Source. If you're in a different
| | 02:13 | web browser it might be in a different location.
| | 02:17 | But we can see directly in here the title says,
The SAMOCA Art Museum and then alt="Museum
| | 02:24 | Exterior Photograph."
| | 02:26 | This alternate text information is added to
the code when you either publish or preview
| | 02:31 | your site in a web browser.
| | 02:33 | Some best practices to keep in mind is to
add alt text to all of your images, and remember,
| | 02:38 | pictures of text, including logos, should also
have the text written out inside the alt text.
| | 02:44 | Try to get in the habit of adding alt text to all of
your images when you first add them to your layout.
| | 02:49 | It may take an extra moment or two, but once
it becomes a habit, you won't have to spend
| | 02:54 | an eternity adding alt text to all of
your images before you publish your site.
| | Collapse this transcript |
| Adding downloadable content| 00:00 | Adding images and text to your website is
a fairly straightforward process, but what
| | 00:05 | if you want to add another type of
file, like a PDF or a Word document?
| | 00:08 | To do this, we need to add a downloadable asset.
Let's go to the About Us page.
| | 00:14 | On this page if we scroll down,
you can see that we have a PDF icon.
| | 00:18 | Let's select this PDF icon, and if we want
someone to be able to download a PDF brochure
| | 00:23 | or another type file, we need to have
that file on our website and link to it.
| | 00:28 | We can do this by going to the File
menu and choosing Add Files for Upload.
| | 00:34 | When we choose this option
the Import dialog will appear.
| | 00:37 | Inside our Assets folder,
we're going to find brochure.pdf.
| | 00:44 | When I select this it will
be added to our Assets folder.
| | 00:47 | In fact, if I scroll down here, we'll be able
to find it. Here it is, and you can see that
| | 00:52 | there is a little paperclip
and an Arrow icon next to it.
| | 00:55 | That signifies that this file will be uploaded
automatically to our server when we publish our site.
| | 01:01 | Another way to do this is to go to the
Hyperlink menu and choose Link to File.
| | 01:05 | This will also open the import dialog.
| | 01:07 | But in our case here, we're
going to leave at brochure.pdf.
| | 01:10 | Now that we have this set up,
let's preview this in a web browser.
| | 01:14 | I'm going to go to File > Preview Page in Browser.
| | 01:17 | I'm inside Safari, and if I click on this link,
it'll automatically open the PDF in the web browser.
| | 01:23 | If you're using a different web browser,
it might download the PDF and open up in another
| | 01:27 | application like Preview or Adobe Reader.
| | 01:30 | Adding downloadable content is a
great way to share files on your website.
| | 01:34 | PDFs, zip files, or even Muse files themselves
are all different uses of downloadable content.
| | Collapse this transcript |
| Creating parallax scrolling| 00:00 |
When you think of adding animations to
your site most people think of Flash,
| | 00:04 |
GIFs, or maybe even Edge Animate.
But there's another option called
| | 00:08 |
Parallax scrolling that has been a recent
trend in web design.
| | 00:12 |
Parallax scrolling is a technique that
let's objects that are on your page move
| | 00:17 |
at different rates and directions as you
scroll.
| | 00:20 |
Let's take a look at how it works.
I'm on the website Source Sans Pro and
| | 00:26 |
this gives you a good demo of what you
can kind of create with Adobe News with
| | 00:30 |
Parallax scrolling.
So, what I'm going to do is just start
| | 00:34 |
scrolling slowly on the page and pay
attention to the various pieces that move around.
| | 00:39 |
See, as I begin to drag or scroll,
various items that move at different
| | 00:44 |
rates and different directions.
And if you didn't notice that we were
| | 00:48 |
scrolling on a web page, you might think
we're just watching an animated video, or
| | 00:52 |
some other sort of animation.
But in reality, I'm just moving along the
| | 00:56 |
page, and these various page items are
moving with it.
| | 00:59 |
If I start scrolling in the opposite
direction the animations will go in the
| | 01:03 |
opposite direction.
I can even go back and forth quickly just
| | 01:06 |
to kind of speed it up which is kind of
fun.
| | 01:10 |
And as I get to the bottom, you'll just
see there is more and more animations
| | 01:13 |
showing every thing off and you'll see
that everything was created with Adobe Muse.
| | 01:19 |
Now, if you're interested, you can
actually download this Muse file and open
| | 01:22 |
it yourself and see how it was created.
But lets jump back into Muse and take a
| | 01:26 |
look at another file.
Here in Muse, I'm want to show you what a
| | 01:29 |
file would look like.
I'm going to zoom out quite a bit.
| | 01:32 |
And you'll see that it's one really long
page, which is kind of what you would
| | 01:36 |
expect when you saw that demo online.
I had to scroll for a very long time to
| | 01:41 |
get to the bottom to see everything.
And that's true when you design a webpage
| | 01:45 |
involving Parallax scrolling.
It's going to end up being a very long webpage.
| | 01:50 |
Let's go back to being the normal size.
And I'm going to hit the preview button
| | 01:54 |
and we'll see how it looks at the moment.
Now, as I start to scroll, you'll see the
| | 02:00 |
various pieces move at different rates.
And then, I get to the middle and
| | 02:04 |
everything's stationary because we
haven't applied any animations to it yet.
| | 02:09 |
So, here at the top, we can see these
letters and the various objects just move
| | 02:13 |
at different rates.
To see how that works, we're going to go
| | 02:15 |
back into Design view and select one of
these objects.
| | 02:19 |
When I select the S, you'll notice that I
have the boundary box around the letter
| | 02:23 |
s, but there's an extra line that goes
all the way to the top of the web browser.
| | 02:28 |
Now, with this selected, I can go to my
Effects panel and you'll see there's a
| | 02:32 |
new option at the top that involves the
Scroll Motion.
| | 02:36 |
And when that's enabled that will let me
control how much scrolling and how much
| | 02:41 |
speed its going to be.
And each of these letters have different
| | 02:45 |
numbers applied in different directions.
But since this one is working, let's go
| | 02:51 |
and add it to a new area.
Let's scroll down until we get to this
| | 02:55 |
area, and you'll notice that when I click
on one of these objects, I'm just going
| | 03:01 |
to zoom in a little bit to make this
easier.
| | 03:02 |
We're going to click on Effects and move
this to the side.
| | 03:09 |
And with Effects turned on, when I turn
on Scroll Motion, you'll see it has some
| | 03:13 |
values that I've entered previously.
One is 1400 pixels.
| | 03:16 |
That is the spot right here where I have
a guide positioned, because this is the
| | 03:20 |
break point.
When the web browser hits the spot at the
| | 03:24 |
top of the web browser, this is when the
animation is going to begin, so that's
| | 03:29 |
why it's set at 1400 points.
If I wanted to, I could change the amount
| | 03:32 |
and have it begin higher or lower, but I
chose this number because it's a nice
| | 03:37 |
even number.
And I've got a guide here, so I can line
| | 03:40 |
up these other animations, so they all
begin scrolling and animating at the same spot.
| | 03:45 |
The first option is the motion before the
key.
| | 03:48 |
We can see it's going to go up and to the
left at a certain rate, with a 0 and a 3.
| | 03:55 |
And then, after it gets to the spot, it's
going to start moving up and to the left
| | 03:59 |
more, at 0 to 3.
So, if we want to Preview this, we'll
| | 04:02 |
just go into Preview.
And we'll start scrolling down until we
| | 04:05 |
get to that spot.
And you'll see right above the, where it
| | 04:09 |
says See our exquisite collection of
paintings, imagine where that 1400 point
| | 04:13 |
line was.
Our guide.
| | 04:14 |
As soon as we get to that area, we'll see
that my animation starts beginning, it
| | 04:19 |
gets to that spot, and then just kind of
continues all the way across.
| | 04:21 |
Just scrolls along as we get to that
break point.
| | 04:26 |
Now, if we go back into design, I'm
going to grab this object, go to the
| | 04:30 |
Effects panel and apply it here.
We see that I've got 1400, but this time
| | 04:34 |
instead of going up into the left, it's
going up and to the right before and
| | 04:39 |
after and I have a 2 instead of a three.
So, its going to be scrolling just a
| | 04:43 |
little slower so, we're going to go into
Preview.
| | 04:46 |
And let's test this out.
So, as we get close, we'll see that one's
| | 04:51 |
coming to the right and the other one's
coming to the left.
| | 04:54 |
And they're just crossing each other.
So, we can see that they're going at
| | 04:57 |
different directions, and they're going
in a different rate.
| | 05:00 |
One is going a little faster than the
other.
| | 05:03 |
So, back in Design view, in Effects, we
can see the 2 is a little slower than a 3.
| | 05:09 |
Finally, I'll grab this bottom image.
We'll go to Effects, and I'll hit it
| | 05:13 |
again, and we can see it's still set at
1400.
| | 05:15 |
This one is going to go down and to the
right before and after at a different rate.
| | 05:20 |
So, let's Preview this and see what it
looks like.
| | 05:23 |
We're going to scroll down.
And here, we can see all of them are kind
| | 05:28 |
of moving.
So, it just looks like a fun little animation.
| | 05:30 |
They are all sliding past each other.
As you can see, Parallax scrolling is a
| | 05:35 |
powerful but somewhat confusing
technique.
| | 05:38 |
Don't worry that if the first few times
you try it, it may not seem like it's
| | 05:42 |
working properly.
But don't despair.
| | 05:44 |
My recommendation is just to keep playing
with it trying different numbers, trying
| | 05:48 |
different angles.
And eventually, you'll figure out exactly
| | 05:51 |
how to use it.
| | 05:51 |
| | Collapse this transcript |
|
|
6. Formatting ObjectsTransforming objects| 00:01 | Over the course of a design you'll
probably find yourself needing to
| | 00:04 | adjust the various assets in your layout.
| | 00:06 | It might be placed graphics,
frames or even text.
| | 00:10 | All of these objects can be
modified in a variety of ways
| | 00:14 | using the Transform
panel or other methods.
| | 00:16 | If we're going to be transforming objects,
we should be using the Transform panel.
| | 00:21 | If you don't have it open, you
can go to Window > Transform
| | 00:24 | and we'll see it located right here.
| | 00:26 | I'm going to collapse the Swatches panel
just make this a little more obvious.
| | 00:31 | If I select an object on the page,
like this photograph, we'll see some
| | 00:34 | information like the X, Y coordinates,
width and height, and even rotation.
| | 00:38 | Depending on the resolution of your
screen, you might also see this information
| | 00:42 | in your Control Bar at
the top of your screen.
| | 00:44 | Let's talk about each of
these fields in detail.
| | 00:46 | With this object selected, the X
and Y coordinates are referring to
| | 00:49 | where it is located on the page.
| | 00:51 | X is how far it is moving to the
right; Y is how far it's moving down.
| | 00:55 | The 00 point is in the
upper left-hand corner.
| | 00:58 | So if I grab this photo and put
it in the upper left-hand corner,
| | 01:02 | we'll see the X and Y
coordinates are 0 and 0.
| | 01:05 | As I use my Arrow keys to move
it, we'll see the numbers change.
| | 01:09 | If I want to place it at a specific spot
on the page, I can either use my mouse
| | 01:13 | or arrow keys to move it, or I can
type in those coordinates myself.
| | 01:16 | For example, if I know that this
photograph is on the X axis at 22,
| | 01:21 | I can just grab this and put it 22
as well, so I know they're lined up.
| | 01:25 | And if I know that this
gray box is at the Y of 245,
| | 01:29 | I can select the same photo and
put the Y at the same number.
| | 01:33 | This way I know they're
perfectly lined up.
| | 01:36 | The width and height will tell
me the dimensions of the frame
| | 01:38 | that I currently have selected.
| | 01:40 | If I change this, it won't resize the
image, it will change the frame itself.
| | 01:44 | So if I make this smaller for the width to
200, we'll be cropping more of the image.
| | 01:49 | If I make it larger, we'll
see more of the image.
| | 01:51 | The same is also true with the height.
| | 01:54 | In fact, this is the only way to
actually stretch the content of a frame.
| | 01:57 | Normally, if you go in and
double-click to select the content
| | 02:01 | and you click and drag to resize,
it's always going to be proportional.
| | 02:04 | There's no way to stretch this, but
if you really want to stretch it for
| | 02:08 | a reason, you can go in here and change
the dimensions, and that will stretch
| | 02:13 | the photo, or if I go the other direction
to 400, we'll see it will become distorted.
| | 02:18 | This really isn't recommended,
but it is a workaround
| | 02:21 | if that's what you're
trying to accomplish.
| | 02:22 | I'm going to press Command+Z or Ctrl+Z on the
PC, to undo this back to its original size.
| | 02:30 | If you want to rotate your object
there are a few ways to do that too.
| | 02:33 | If I select this image and I go to
the corner, we'll see the Rotate icon.
| | 02:37 | When I click and drag, I can rotate it
around the center to whatever I like.
| | 02:41 | We'll see in the Transform panel it will
tell me the degree that it's rotated to.
| | 02:45 | If I want to put in something
specific, I can just type that in.
| | 02:48 | And in this case I want it to go
back to Normal, so I'll put in 0.
| | 02:52 | We can also use math in these fields.
| | 02:55 | If I know that I want to change the
width or the height by a certain amount,
| | 02:59 | I can go in here and type divided
by two (/2) to cut it in half.
| | 03:03 | If I want to add some space
to this, I can do +45.
| | 03:07 | I can even subtract, -2, and even multiply
by using the asterisk (*) symbol.
| | 03:13 | If I'm going to move the object around
the page, I can of course drag and drop.
| | 03:18 | But if I want to get one more of it, I
could copy and paste, but if I hold down
| | 03:22 | my Option or my Alt key, I can drag
a copy when you see the double arrow.
| | 03:28 | If I select an image and cut it
to the clipboard and then paste,
| | 03:31 | it will be put in
the center of the page.
| | 03:33 | So if you have something copied and
you want it to go back to the exact
| | 03:36 | same location it came from,
go to Edit > Paste in Place.
| | 03:41 | Now it will go back to the
exact same X, Y coordinates.
| | 03:44 | This is a great way to move content
between pages on your web site.
| | 03:47 | Be sure to take your time when
you're transforming your objects,
| | 03:51 | if you work too hastily, you might make
a change that you regret and you'll
| | 03:54 | have to end up doing a bunch of undos
to get back to your starting point.
| | Collapse this transcript |
| Locking objects| 00:01 | As your layouts become more and more
complex it might be difficult to work
| | 00:04 | on your page if objects keep getting in the way
when you're trying to select the other objects.
| | 00:09 | One way you can keep yourself
organized is by locking page items
| | 00:13 | that you don't need to
move or edit anymore.
| | 00:15 | I'm going to select this black rectangle,
because I don't want to resize or move it anymore.
| | 00:21 | To prevent myself from doing that, I'm going
to go to the Object menu and choose Lock.
| | 00:25 | I could also use the keyboard shortcut
Command+L on the Mac or Ctrl+L on the PC.
| | 00:30 | As soon as I've got that Locked,
I can no longer select it.
| | 00:34 | In fact if I click, I'll select
the Object that's underneath.
| | 00:37 | If I want to lock this object, I could
go to the Object menu or use the shortcut,
| | 00:42 |
or I can also right-click
and choose Lock.
| | 00:45 | Another way to work with Locked
Objects is to use a Master Page.
| | 00:48 | For example, at the top of
this page we can see this logo,
| | 00:52 | but I can't select it,
no matter how hard I try.
| | 00:55 | That's because it's
living on the Master Page.
| | 00:57 | In all of the other pages in my
document, it's locked automatically.
| | 01:01 | If I need to move it, I have
to go to the Master Page.
| | 01:03 | So we'll go back to our Plan
mode and I'll go down to A-Master.
| | 01:08 | And now you can see I'm able to
select this object and move it around.
| | 01:12 | An advantage of putting items on the
Master Page is that they'll repeat
| | 01:15 | automatically in every single
page that they're connected to.
| | 01:18 | The other advantage is you
don't have to worry about
| | 01:20 | having to be moved or modified in any way.
| | 01:22 | If you find yourself locking the
Same Object on Multiple Pages,
| | 01:26 | it might be worth creating another
Master Page for your site.
| | 01:29 | There's nothing wrong with
having more than one Master Page
| | 01:32 | to help you organize your site.
| | 01:33 | And if it prevents you from accidentally
modifying a portion of your page,
| | 01:37 | it is definitely worth building.
| | Collapse this transcript |
| Working with groups| 00:01 | When you are working
with two or more objects,
| | 00:03 | you might want to consider
grouping them together.
| | 00:05 | When you group them, you're
temporarily joining them together
| | 00:09 | which makes it easier
to move and manipulate.
| | 00:12 | On the right-hand side, we can
see Upcoming Events and that arrow,
| | 00:16 | and if we want to move this particular
section, this might be pretty difficult
| | 00:19 | because of all of the objects involved.
| | 00:21 | For example, if I try to grab this object
right here, it kind of gets in the way.
| | 00:26 | So my first step is to lock this object.
| | 00:28 | I'm just going to go to Object > Lock.
| | 00:30 | Now I don't have to worry
about selecting it anymore.
| | 00:32 | Next if I want to move this
section, I have to click and drag
| | 00:36 | to be sure to grab
all of these items.
| | 00:38 | Now I can move them around, but if I
didn't grab one of them, such as this text,
| | 00:44 | you might miss it and have
to redo your operation.
| | 00:47 | So what we can do is we can group
these items to make it easier to manage.
| | 00:51 | What I'm going to do is click and
drag to grab all of these items.
| | 00:55 | Now that they're all selected,
I can go to Object > Group,
| | 00:59 | or press Command+G
or Ctrl+G on the PC.
| | 01:02 | Now that they're grouped, you can see
a light dashed line all the way around
| | 01:06 | this object which is letting me know
that I have all of them grouped together.
| | 01:09 | If I deselect, all I have to is just
click anywhere, and now I have all of
| | 01:14 | the objects selected to make
it easier to move them around.
| | 01:17 | If I want to move these items individually,
such as this photo or this text,
| | 01:21 | there's a few ways to do it.
| | 01:23 | If I like, I can ungroup it
to move them individually.
| | 01:26 | I could go to Object > Ungroup, or press
Command+Shift+G or Ctrl+Shift+G on the PC.
| | 01:33 | Now they're all apart like it was
before and I can move them around.
| | 01:37 | But there's a better way in my opinion.
| | 01:39 | What I'm going to do is have all of these
items selected and I'll group them again.
| | 01:43 | But instead of ungrouping, I can just drill
down to the item that I want to move.
| | 01:48 | All I have to do is mouse over to
that area and then slowly click.
| | 01:52 | When I click, it'll
grab the next item.
| | 01:55 | Now I can move it around
and put it where I like.
| | 01:57 | When I deselect and go back, the
items are still grouped together.
| | 02:03 | Another way to organize this
is to group multiple times.
| | 02:07 | I'm going to ungroup this by going to
Object > Ungroup, and this time I'm going
| | 02:11 | to make smaller groups and then
group those smaller groups together.
| | 02:14 | So I'm going to grab this Upcoming Events,
hold the Shift key to select multiple items
| | 02:19 | like the arrow and this top header,
and then I'll press Command+G or Ctrl+G.
| | 02:24 | Next, I'm going to grab the text
and the photo and group them.
| | 02:28 | Now that I have each of those
items individually grouped,
| | 02:31 | I'll grab everything all
at once and group again.
| | 02:35 | Now that I have these groups within
groups, it'll be easier to manipulate.
| | 02:38 | So if I want to move that text and the photo,
all I have to do is go down and click once.
| | 02:44 | Now I have that subgroup
selected and I can move it around.
| | 02:48 | If I want to move just the
photo, I'll click again;
| | 02:50 | now I have the photo
selected for moving.
| | 02:52 | Like before, if I deselect and come back,
I have the whole group selected again.
| | 02:57 | Creating groups is a great way
to stay organized in your layout.
| | 03:00 | Be sure to group similar items together to
make it easier to make changes in the future.
| | 03:05 | In addition to helping you,
it will also help others
| | 03:08 | find their way around your files,
in case they ever need to make edits.
| | Collapse this transcript |
| Understanding stacking order| 00:01 | What items overlap on the page,
one of them has to be on the top
| | 00:04 | and the other has
to be on the bottom.
| | 00:06 | This is called the Stacking Order and it
affects every single item on each page.
| | 00:11 | Let's go to the Stacking Order page,
and on this page I have two squares,
| | 00:16 | a purple square and a blue square and
you notice one is on top of the other.
| | 00:20 | Let's create a new one.
| | 00:20 | I'm going to grab the Rectangle tool,
| | 00:22 | and we're going to click and
drag and draw this square.
| | 00:25 | Next I'll grab my Selection
tool and change the Fill to a green.
| | 00:29 | You notice when I drew this object
it's automatically on top of the others.
| | 00:33 | That's because whenever
you create a new object,
| | 00:35 | it'll always be on top
of everything else.
| | 00:38 | But what happens if I want to have the
green square behind the blue square.
| | 00:41 | Well to do that I have to change
the Stacking Order of the objects.
| | 00:45 | With the green square selected, I'm
going to go to Object > Send Backward.
| | 00:50 | When I choose Send Backward, it will go
back one step; now it's behind the top object.
| | 00:55 | In this case the blue square
is on top, then the green square.
| | 00:58 | But the green square is still
on top of the purple square.
| | 01:01 | I'm going to do this one more time,
Send Backward, and now it's completely
| | 01:05 | in the back and the other
two objects are above it.
| | 01:08 | If I want to move it forward, I can go to
the Object menu and choose Bring Forward.
| | 01:13 | Now it went forward one step and we'll
repeat it again to go forward again.
| | 01:16 | Now this is a relatively
simple page with only three objects.
| | 01:20 | But I want to put this one all the way
behind the other ones, rather than having
| | 01:24 | to repeat the step twice, it's much
faster to build Object > Send To Back.
| | 01:28 | And if I want to bring it all the way
forward I can go to Object > Bring To Front.
| | 01:33 | You'll probably find yourself using
these operations quite frequently,
| | 01:37 | so it's a good idea to
learn the keyboard shortcuts.
| | 01:39 | If I want to send something backward
you press Command+Left Bracket or Ctrl+Left Bracket.
| | 01:42 | If you want to bring something
forward you press Command+Right, Bracket Ctrl+Right Bracket.
| | 01:44 | If you want to send something
all the way to the back,
| | 01:51 | press Command+Shift+Left Bracket
or Ctrl+Shift+Left Bracket.
| | 01:54 | If you want to bring something
all the way to the front,
| | 01:57 | press Command+Shift+Right Bracket
or Ctrl+Shift+Right Bracket.
| | 02:00 | It's a much faster operation than
having to go to the Object menu.
| | 02:03 | Let's visit another page.
| | 02:06 | We'll go back to the Plan view
and double-click on the Home page.
| | 02:10 | On the Home page we'll grab a rectangle
and we're going to click and drag
| | 02:14 | and we're going to make
this color be yellow.
| | 02:16 | Now that we have this selected,
we'll grab our Selection tool,
| | 02:19 | and we're going to put this
on top of these other objects.
| | 02:21 | If I want to have this yellow
object be behind everything
| | 02:24 | I could press Command+Left Bracket or Ctrl+Left Bracket multiple
times to slowly get it back there.
| | 02:29 | But because there are so many objects
on the page, it will take a really
| | 02:33 | long time to get it all
the way to the back.
| | 02:35 | A much faster way to use this is to
press Command+Shift+Left Bracket or Ctrl+Shift+Left Bracket
| | 02:39 | and then it will be behind everything.
| | 02:40 | If I want to bring it to the front,
Command+Shift+Right Bracket or Ctrl+Shift+Right Bracket.
| | 02:44 | Let's put this yellow
object on top of the logo.
| | 02:48 | If I send this all the way to the back, you
notice that it still is on top of the logo.
| | 02:52 | Well why is that?
| | 02:54 | You would think that it
would be behind everything
| | 02:55 | because that's what
sending to the back does.
| | 02:58 | The reason that it's still above the logo
is because the logo is on a Master page.
| | 03:02 | And Master page items are always
behind everything on every single page.
| | 03:07 | If you really wanted to have this
yellow object be behind the logo,
| | 03:10 | you'd have to put it on the
Master page behind the object.
| | 03:14 | Even though it is possible to
send objects forward and backward,
| | 03:17 | you're probably better served by bringing
objects to the front or the back.
| | 03:21 | If your layout has more than a few
objects, it might take dozens of forward
| | 03:25 | and backward commands to get your
object to the proper location.
| | 03:28 | Instead, if you just send it all
the way in the other direction,
| | 03:32 | you'll be there in one step.
| | Collapse this transcript |
| Using ruler guides| 00:00 | Most design applications have rulers that allow you
to precisely align your objects to each other.
| | 00:06 | Rather than rely on mathematical
measurements, you can use Ruler Guides to help
| | 00:10 | position your objects to
various locations on your page.
| | 00:14 | In order to use Ruler Guides, we
have to make sure the Ruler is visible.
| | 00:18 | If it isn't visible, you can go to
the View menu and choose Show Rulers.
| | 00:22 | But in our case, it's showing.
| | 00:24 | To bring down a guide, just go to the top
Ruler and click and drag to put it into place.
| | 00:29 | You can also bring a Ruler Guide from
the left-hand ruler to drag it over.
| | 00:33 | If you want to move a guide, just select
it and then click and drag to move around.
| | 00:38 | You can even move more than one
at once by clicking and dragging.
| | 00:41 | However, if you try to select something else on
the page in addition to a guide, it won't work.
| | 00:45 | For example, if I try to grab this
guide in this background, it's going to grab
| | 00:50 | those objects, and not the guide itself.
| | 00:52 | If you want to duplicate a guide, all
you have to do is select it and click and
| | 00:57 | drag while holding the Option or the Alt key.
| | 00:59 | To remove a guide, you can
just hit the Delete key.
| | 01:02 | One of my favorite ways to use a guide
is to position it to a very specific spot.
| | 01:06 | So in our case, let's say I want to
put a guide exactly at 600 pixels,
| | 01:10 | what I'll do is go up to the Ruler
and double-click at that tick mark.
| | 01:14 | When I double-click, it
puts it exactly at that spot.
| | 01:16 | This is really useful for trying
to create a grid in your layout.
| | 01:20 | If you want to hide the Guides
temporarily, just go to the View widget
| | 01:24 | and turn off Guides.
| | 01:25 | You can also do this from the View menu,
and you can see the keyboard shortcut
| | 01:29 | is Command+Semicolon, or Ctrl+Semicolon.
| | 01:31 | If you want to lock the Guides so you
don't have to worry about selecting them,
| | 01:35 | just go to View > Lock Guides.
| | 01:37 | If you need to select them again, just go
back and go View > Lock Guides to unlock them.
| | 01:42 | If you want to get rid of all of the
Guides on the page, just select one of them,
| | 01:46 | right-click, and choose Delete All Guides.
That will immediately delete the Guides on the page.
| | 01:52 | Using Guides is a great way to achieve
a consistent appearance on your site.
| | 01:56 | Try adding Guides to your master page in
order to put them on every single page.
| | 02:00 | But remember, you won't be able to edit or remove
the Guides unless you go back to that master.
| | Collapse this transcript |
| Using the Align panel| 00:00 | Another way to position objects on
the page is to use the Align Panel.
| | 00:04 | This panel will allow you to precisely
position and distribute objects on your page.
| | 00:09 | Let's go to this Align page, and we're going
to see the Align Panel on the right-hand side.
| | 00:14 | If you don't see this, go to
your Window menu and choose Align.
| | 00:18 | You can also access the Align Panel if
you have more than one object selected.
| | 00:22 | So if I grab these objects, you can see
in the upper right-hand corner, I've got the
| | 00:26 | Align button over here with a dropdown
that gives me access to the same panel.
| | 00:31 | But in this case, right now I'm just
going to stick with the Align Panel.
| | 00:34 | The Align Panel is really useful
to help align objects to each other.
| | 00:38 | For example, I'm going to select these two objects,
and I want their left edges to be lined up.
| | 00:42 | So I'm just going to come
over here and click on Align Left.
| | 00:46 | If I decide that I want this object, and
I'll hold down Shift key to grab this one to be
| | 00:50 | aligned up on the right-hand
side, I can say Align Right.
| | 00:53 | It's also really useful
to distribute their centers.
| | 00:56 | So if I zoom out a little bit by pressing
Command+Minus, or Ctrl+Minus, I am going to put this
| | 01:00 | object underneath this one.
| | 01:02 | But I want these three objects to
have the space in between them to be even.
| | 01:06 | So I'm going to move this one little closer,
select all three, and then choose Distribute
| | 01:10 | objects, and then I'll
choose Distribute vertical centers.
| | 01:14 | When I choose this, you can see the middle object moved
so the space was even between the three objects.
| | 01:19 | In addition to lining objects to each other,
we can even align them to the page themselves.
| | 01:24 | So for example, if I want all three of
these objects to be aligned to the center of the
| | 01:27 | page, I'm going to change Align to from
Selection and change it to the Content Area.
| | 01:34 | When I do this and I hit Align Center, all
of the objects align to the center of the page.
| | 01:39 | But you have to be careful. You don't want
to hit this Align Center, because if I do this,
| | 01:43 | all of them will be
stacked up on top of each other.
| | 01:46 | So in this case, I've got to move
them so I can see all the images now.
| | 01:49 | When I am aligning to the Content Area, it will
not go above the header or below the footer.
| | 01:54 | So for example, if I select this object,
and I'm making sure I am on Align to Content
| | 01:59 | Area and I choose Align Top, it's
going to go right to the top of the header.
| | 02:03 | If I choose Align Bottom,
it'll go to the top of the footer.
| | 02:07 | It shouldn't take you that long to
get used to the Align Panel in Muse,
| | 02:10 | especially if you've used other
Adobe applications like InDesign.
| | 02:13 | Before long, you'll be using on
a daily basis with your designs.
| | Collapse this transcript |
| Aligning and distributing with Smart Guides| 00:01 | One of the most important parts
of design is the relationship
| | 00:04 | between elements on the page.
| | 00:06 | If you haphazardly throw
objects on the page
| | 00:08 | they may end up being in
an undesirable location.
| | 00:11 | Thankfully, Muse has a way to
quickly align and distribute objects
| | 00:15 | to help you maintain a structure
or grid within your design.
| | 00:19 | Let's go to the Align page and before
we start to align these objects,
| | 00:23 | we want to make sure that our
Smart Guides are turned on.
| | 00:26 | We can check this by going to the View menu
and seeing the checkbox next to Smart Guides.
| | 00:30 | They're also available in
this View Settings widget.
| | 00:34 | Make sure the Smart Guides checkbox is there
because if it isn't, they will not be active.
| | 00:38 | I'm going to collapse these
tools to put them out of view
| | 00:43 | so we have a larger area to work with.
| | 00:46 | And what I want to do is align
these three objects next to each other.
| | 00:48 | Now the first object I'm going to put
up here and as I drag the second object
| | 00:53 | and put it next to it, you'll start
to see these blue lines appear.
| | 00:56 | These blue lines are telling me that
this object is snapping to alignment
| | 01:00 | with the object next to it.
| | 01:02 | Since these objects are the same
size, the top, middle and bottom
| | 01:06 | are all lined up the same.
| | 01:08 | Next I'm going to grab this
one and do the same thing
| | 01:11 | and we can see now all three
objects are aligned the same.
| | 01:14 | But looking at these three objects, we can
see that the spacing between them is different.
| | 01:18 | On the left-hand side, the space between
the left and the center image
| | 01:22 | is different than the space between
the center image and the right image.
| | 01:25 | If I want the spacing to be the same,
I'm going to grab the right object
| | 01:29 | and slowly move it to the left.
| | 01:30 | As I move this to the left, eventually
we'll see a light blue color show up.
| | 01:35 | This is telling me that the
space is exactly the same,
| | 01:37 | and in this case
they're both 53 pixels.
| | 01:40 | We can also align objects
to the page itself.
| | 01:44 | If I grab this object on the left,
| | 01:46 | as I move it around you'll
see some red lines appear.
| | 01:49 | When I move this to left, it's
snapping to the left side of the column
| | 01:54 | in the horizontal center of the page.
| | 01:56 | As I move it to the right, eventually
we'll get it centered within the column.
| | 02:01 | So pay attention to the color to
see what you're actually snapping to.
| | 02:05 | If I lock an object by going to Object >
Lock, Smart Guides will still function.
| | 02:10 | So as you can see when I move this left
image, it will still snap in alignment
| | 02:14 | to the image in the center,
even though it's locked.
| | 02:18 | If I move this object to the top of the
page, you'll see it's not snapping to
| | 02:21 | anything that's on the Master page.
| | 02:22 | Master page items are ignored
when it comes to Smart Guides.
| | 02:27 | Let's visit another page to
see Smart Guides in action.
| | 02:30 | We're going to go back to the
Plan view and open up Collections.
| | 02:34 | On the Collections page, I'm going
to grab this top image and hold down
| | 02:37 | my Command or Ctrl key
to change the cropping.
| | 02:40 | As I do this, when it gets to be
the same size as the image below,
| | 02:43 | it'll snap to alignment.
| | 02:46 | Next, I'm going to click and drag to grab
these two objects and just move it to the left.
| | 02:49 | As I do this with the others, eventually
it will snap into position and then I can
| | 02:54 | grab the bottom to bring it up to
have that be the exact same height.
| | 02:58 | Sometimes when you're moving objects
around, Smart Guides can get in the way.
| | 03:02 | So we can turn them off by
going to View > Smart Guides.
| | 03:06 | Now as I move it around,
we can freely move it
| | 03:08 | without having to worry
about anything snapping.
| | 03:11 | Using Smart Guides is a great way to
help you quickly align objects on your page.
| | 03:16 | However, since Smart Guides are going
solely off the edge of the frame,
| | 03:19 | there may be times that you want to align
them visually instead of mathematically.
| | 03:23 | For this type of scenario it's a good
idea to turn off Smart Guides temporarily.
| | Collapse this transcript |
| Rounding Corners | 00:01 | If you look at the tools built into Muse,
| | 00:02 | it may seem like you're stuck with
only the ability to create rectangles.
| | 00:07 | However, it is possible to modify the
corners of these rectangles to create
| | 00:11 | a whole new range of
shapes for your layout.
| | 00:14 | Let's go to the Corners page and on
the Corners page, we're going to select
| | 00:18 | this object and we're going
to target each of the corners.
| | 00:21 | In the Control panel, we can click
on the upper left-hand corner
| | 00:25 | and we can see that it gets a 10,
which means it has a 10 pixel corner.
| | 00:28 | I'm going to put my cursor in
here and increase the Amount
| | 00:31 | so we can see the
corner getting better.
| | 00:33 | I'll hold my Shift key to
make it all the way to 50.
| | 00:35 | Next, if I want to round another
corner, I'll just target that corner
| | 00:40 | and it will get the same Amount.
| | 00:42 | In fact, I can target any
combination of corners that I like.
| | 00:45 | However, each corner that is targeted
will have to have the same amount.
| | 00:49 | For example, both the upper-left and the
bottom-right will have to be 50 pixels.
| | 00:54 | One couldn't be 15 and the other be 50.
| | 00:57 | Rounding Corners will also
work on objects with a stroke.
| | 01:00 | When I select this object and target the
top corners, increase the Amount to 50,
| | 01:04 | you'll see that the stroke is rounded
as well as the object underneath.
| | 01:09 | Lower on this page is a text frame.
| | 01:11 | When I select this text frame, and increase
the rounded corners, you'll notice that
| | 01:15 | the background shape is changing, but
the text isn't flowing to compensate.
| | 01:19 | That's because rounded
corners don't affect text.
| | 01:22 | If you want to have the text be
aligned with the object underneath,
| | 01:25 | we'll have to use the
Spacing panel to fix this.
| | 01:27 | We'll be covering the
Spacing panel in a later movie.
| | 01:30 | We can use the rounded corner to create
different types of shapes inside Muse.
| | 01:34 | I'm going to grab the Rectangle tool
and click and drag to draw a shape.
| | 01:38 | We'll go to the Fill panel and change
its color so we can see this easier.
| | 01:42 | I'm also going to remove the Stroke.
| | 01:44 | After I select the object
with my Selection tool,
| | 01:46 | I'm going to go to
the Transform panel
| | 01:47 |
and change its Width to
100 and its Height to 100.
| | 01:52 | Next, I'll go to the corners
and target all four corners
| | 01:55 | and give all of them the
same 50 pixel corner radius.
| | 01:59 | Now looking at this object,
it looks like a perfect circle,
| | 02:02 | and in fact it is, because
it's 100 pixels by 100 pixels,
| | 02:06 | with a 50 pixel rounded corner,
which makes it a perfect circle.
| | 02:10 | Unfortunately, when I scale this object,
you'll see it's no longer a circle.
| | 02:13 | So this will only work if you
do this at the actual size.
| | 02:18 | Let's go back to the Plan View,
and visit the Collection page.
| | 02:23 | On the Collection page, I'm going to grab
this top image and hold my Shift key.
| | 02:27 | With both of these objects selected,
| | 02:29 | I'm going to target the top-left and the
bottom-left and increase the corner radius.
| | 02:34 | You'll notice that both of these
objects are changing at the same time.
| | 02:37 | So if you have multiple objects selected,
you can round all of their corners at once.
| | 02:42 | If you find yourself rounding corners
in the same fashion over and over again,
| | 02:46 |
you might want to look into
creating a graphic style
| | 02:48 | to help you automate this process.
| | 02:51 | In a later movie in this chapter,
we'll go into much greater detail
| | 02:55 | about how to create and
work with graphic styles.
| | Collapse this transcript |
| Using effects| 00:01 | One of the more fun aspects of designing
is getting to apply special effects.
| | 00:05 | While Photoshop probably wins the
contest for the most effects possible,
| | 00:10 | Muse does have a few tricks up its sleeve.
| | 00:12 | In this movie, we'll take a look at
Transparency, Drop Shadows, Bevel, and Glows.
| | 00:17 | Let's go to the Effects page and we'll
begin by selecting this top rectangle
| | 00:21 | and drawing it on top
of everything else.
| | 00:23 | Now right now it's behind everything, so
we're going to go to Object > Bring To Front.
| | 00:27 | Now, if we want this to be above
everything, we can't see the content below
| | 00:32 | but we can use Transparency
to lower the opacity,
| | 00:35 | so we can start to see the content
that's underneath this color.
| | 00:38 | At the top of the screen
is our Opacity slider.
| | 00:41 | As I lower this, we'll start
to see more of the content.
| | 00:44 | 0 means we can see everything below,
but we no longer see the object,
| | 00:49 | 100% means we see the entire
object and nothing underneath,
| | 00:52 | and 49 is about halfway in between.
| | 00:55 | Let's put this back up here and
take a look at another effect.
| | 00:58 | With this object selected,
we can go to the Effects menu
| | 01:01 | and we're going to choose
Shadow and turn it on.
| | 01:04 | When you turn a Shadow on, it
helps the image pop off the page,
| | 01:07 | and we have quite a few
settings to change its appearance.
| | 01:10 | We can go to the Color, and if
you don't want it to be black,
| | 01:13 | we'll give it a gray shadow, a tan shadow
or any other color shadow that you like.
| | 01:18 | For now, I'm going to stick with black.
| | 01:20 | We can change the opacity of it, so it
could be more intense or less intense.
| | 01:26 | Size will change the sharpness.
| | 01:28 | WhenI change the size to 0, it
will become a straight sharp edge.
| | 01:31 | As I increase the number,
it will slowly dissipate.
| | 01:34 | The angle will change
the angle of the shadow;
| | 01:36 | 45 degrees is a good number, but let's
take a look at a few other options.
| | 01:40 | We can see it's moving from the
left to the right and all around.
| | 01:44 | The distance is the space between
the shadow and the object.
| | 01:47 | If I put this at 0, it
will be directly behind it.
| | 01:50 | As I increase it, it
moves it further away.
| | 01:54 | We'll turn the Shadow
off and add a Bevel.
| | 01:57 | A Bevel gives it a
3D or raised look.
| | 02:00 | This is frequently
used in buttons.
| | 02:02 | The Opacity will change how
much of the bevel that you see.
| | 02:06 | As I lower it, it slowly starts
to fade away, and as I increase it,
| | 02:09 | it becomes more intense.
| | 02:11 | The Size is the thickness of the
bevel and the Angle is the location,
| | 02:19 | and we can change the distance
between the border and the faded edge.
| | 02:23 | Our final effect is a Glow.
| | 02:25 | A glow is similar to the drop shadow
except for it's even all the way around.
| | 02:29 | We'll change the color to pink,
so we can see it a little easier.
| | 02:32 | If we want to have the glow to the inside,
| | 02:35 | we can just click the checkbox
and it moves it to the inside.
| | 02:39 | As much fun as transparency
and special effects are,
| | 02:42 | keep in mind that they will
not make a bad design better.
| | 02:44 | Try to use effects sparingly, and
use them when you want something to
| | 02:48 | pop out and be different.
| | 02:49 | Think about it this way;
| | 02:51 | if you were to bold
every word in a paragraph,
| | 02:53 | nothing would appear bold or
stand out since everything is bold.
| | 02:57 | The same is also true with effects.
| | Collapse this transcript |
| Creating graphic styles| 00:01 | Throughout your web site, you'll probably
have graphics that use the same formatting.
| | 00:05 | Rather than manually apply the
same formatting again and again,
| | 00:09 | you can help automate this
process by using Graphic Styles.
| | 00:12 | Let's go to the Graphic
Styles page in this document.
| | 00:15 | On this page, we have two objects.
| | 00:17 | I'd like the formatting on the left to
be applied to the object on the right.
| | 00:21 | Now one way to do it will be to find
out exactly what the formatting is,
| | 00:25 | and in this case, this is dark
green and a 9 point black stroke.
| | 00:29 | But then I would have to go to this object
and change the color and the stroke to match.
| | 00:34 | If I wanted to do this to five objects,
I'd have to do this five times,
| | 00:37 | and that's a lot of work.
| | 00:39 | A much more efficient way
is to make a graphic style.
| | 00:42 | What I'm going to do is select
this object on the left
| | 00:44 | and make sure my Graphic
Styles panel is open.
| | 00:47 | If I don't see it, you can
go to Window > Graphic Styles.
| | 00:51 | To create a graphic style, I'm going to
have the object on the left selected
| | 00:55 | and in the Graphic Style
panel, click the New button.
| | 00:57 | This will create a
style called Style.
| | 01:00 | I'm going to double-click on the Style
and we're going to change its name;
| | 01:04 | I'm going to call this Left box.
| | 01:06 | Now, I'm going to go to the
right box and apply the same style.
| | 01:10 | We'll see the formatting
changed and now they match.
| | 01:14 | Now that we have the style
made, we can create new boxes
| | 01:17 | and match the formatting quite easily.
| | 01:19 | So I'm going to go to the top of
the page and draw two more rectangles.
| | 01:23 | With my Selection tool, I'm going to
click and drag and grab both of them
| | 01:27 | and apply the exact same
style; now they all match.
| | 01:31 | But what happens if I change my mind,
| | 01:33 | and I want to change the
appearance of any one of them?
| | 01:35 | I'm going to select the object
on the right and go to Effects.
| | 01:39 | I'll choose Shadow and turn it on.
| | 01:42 | Next, we'll go to the Stroke and
change its Stroke Color and Thickness.
| | 01:49 | In the Graphic Styles panel, you'll see
there is a Plus (+) next to the Style name;
| | 01:53 | the Plus means there's an override.
| | 01:55 | This means that I've made a change
to the appearance of that object.
| | 01:58 | If I want to remove the override, I'll
click the Clear Style Overrides button.
| | 02:02 | Now it moves it back
to what it was before.
| | 02:05 | But in this case, I
didn't want to do that.
| | 02:07 | So I am going to press
Command+Z or Ctrl+Z as an undo.
| | 02:10 | If I really like this formatting, and I want
these settings to be applied to the style,
| | 02:14 | I'm going to press the Redefine
Style button to the right of it.
| | 02:18 | Now, all of these objects have been
updated with this exact same style.
| | 02:22 | But what would happen if I would
want the object on the right
| | 02:25 | to no longer be updated
by any style changes?
| | 02:28 | In that case, I can unlink
it from that particular style.
| | 02:31 | So with this object on the right selected,
I'm going to press the Unlink button.
| | 02:36 | Now, it is no longer connected
to that particular style.
| | 02:39 | So, if I go back to one of these and
change something about its appearance,
| | 02:45 | and then I redefine the style,
you'll see it no longer updates
| | 02:48 | because it's not
connected to it.
| | 02:49 | But if I change my mind
and want it connected,
| | 02:51 | I can just go back to select
that object and reapply the style.
| | 02:55 | If you find yourself creating
lots of graphic styles,
| | 02:58 | there are a few different
ways that we can remove them.
| | 03:00 | If I come down and make a
few different graphic styles,
| | 03:03 | I can remove them individually by selecting
the style and hitting the Trashcan.
| | 03:08 | If I delete a style in use, it's going
to tell me to replace it with a style.
| | 03:12 | I'm going to choose Left
box, press Replace.
| | 03:14 | Another way to quickly remove styles
you're not using is to mouse over any
| | 03:18 | of the names, right-click,
and say Delete Unused.
| | 03:22 | Now that will quickly remove the styles
that you're not using in the document.
| | 03:26 | One thing you have to be careful
with when you're using Graphic Styles
| | 03:30 | is to make sure you
have something selected.
| | 03:32 | If I deselect and have nothing selected
at all, and click on the Graphic Style,
| | 03:36 | I'm going to be applying the Graphic
Style to the page, because remember,
| | 03:40 | when you have nothing selected, you
actually are selecting the page.
| | 03:44 | Styles are very powerful and it's
highly recommended that you use them
| | 03:47 | throughout your layout.
| | 03:48 | This way, you can consistently and
accurately apply the same formatting.
| | 03:52 | While it may seem like
a lot of work up front,
| | 03:54 | it may end up saving you a lot
of time by using Graphic Styles.
| | Collapse this transcript |
| Wrapping an object around text| 00:01 | If you want to put an
image next to the text,
| | 00:02 | you will find that the image will
either be on top or underneath the text.
| | 00:06 | In other programs like
Adobe InDesign or Illustrator,
| | 00:09 | it is possible to use Text Wrap to have
the text bounce off and around the image.
| | 00:14 | Muse can also accomplish this but
in a slightly different fashion.
| | 00:19 | Our first step is to open the Wrap panel.
| | 00:21 | You can open the Wrap panel
by going to Window > Wrap.
| | 00:25 | I'm going to collapse the Assets panel
so we can see this a little better.
| | 00:28 | Now as I scroll down
we see this top image.
| | 00:31 | I'm going to scale this
image to be a little smaller,
| | 00:35 | and I want the text to
bounce around this image.
| | 00:38 | In Adobe InDesign, you would select
the image and then you would go to
| | 00:42 | the Text Wrap panel and
press one of the buttons.
| | 00:45 | Unfortunately, Muse
doesn't work this way.
| | 00:47 | What we have to do, is have
this be an in-line graphic.
| | 00:51 | To do that we're going to select
the image and go to Edit > Cut.
| | 00:56 | Next I'm going to double-click
to switch to my Type tool
| | 00:59 | and I'm going to put my cursor at
the beginning of the text flow
| | 01:02 | and then I'm going to paste
it in by going to Edit > Paste.
| | 01:05 | Now this image is part of the text.
| | 01:08 | I can use the Wrap options.
| | 01:09 | If I wrap to left, the text
will wrap around the right.
| | 01:12 | If I wrap to the right, the
text will go around the left.
| | 01:17 | For now I'll use the left option.
| | 01:18 | Personally I think the text is
a little too close to the image,
| | 01:22 | so I'm going to use the Offset options;
I'll put my cursor in the right offset
| | 01:25 | and use my arrow keys
to increase the amount.
| | 01:30 | Now we have the Wrap
working the way that we like.
| | 01:33 | If your screen resolution
is large enough,
| | 01:34 | you might even see the Wrap settings
in the Control panel at the top.
| | 01:38 | Let's preview what this
looks like on the web.
| | 01:40 | I'm going to press the Preview
button and as we scroll down
| | 01:45 | we can see that I can click and drag to
select the text, and when I get to the top,
| | 01:49 | I'll actually be able to select the image
because it's part of the text flow.
| | 01:53 | Back in the Design mode, what happens
if I need to manipulate this picture?
| | 01:57 | When I grab my Selection tool, if I want
to move the picture, when I click and drag,
| | 02:01 | we'll see I could only move it up and down;
that's because it's part of the text flow.
| | 02:05 | If I want to remove it, I'll
have to cut and paste again,
| | 02:08 | but then I'll no longer
have the Text Wrap working.
| | 02:11 | There are other uses
for the Wrap panel;
| | 02:13 | you could use it on a pull quote or anywhere
that you want the image to flow with the text.
| | 02:18 | It's important to note that end-users can change
the size of your text of your web site online.
| | 02:23 | Because of this, your picture
could move to a different location.
| | 02:27 | Wrapping text is a useful
tool in web design.
| | 02:29 | To help you keep your wraps consistent,
| | 02:31 | try creating a Graphic Style
based off of an in-line graphic.
| | 02:34 | Since Graphic Styles are able
to remember the Wrap settings,
| | 02:37 | this style will keep all of your wraps
the same throughout your entire web site.
| | Collapse this transcript |
| Creating 100 percent width objects| 00:01 | When you draw a rectangle, you normally
set its size by either dragging it
| | 00:04 | or using specific numbers
in the Control panel.
| | 00:07 | However you can also set its dimensions
to be 100% of the width of the browser,
| | 00:12 |
so no matter what size
the user changes it to be,
| | 00:15 | the rectangle will
resize accordingly.
| | 00:17 | Let's go to the About page
and on the About page,
| | 00:21 | we're going to scroll down and
draw a rectangle that's pretty wide.
| | 00:27 | Let's change its color to green
so we can see this easier
| | 00:29 | and select it with
our Selection tool.
| | 00:32 | Now that we have this made, we're going
to go to File > Preview Page in Browser.
| | 00:39 | As I scroll down to see this rectangle,
as I resize the width of this web browser,
| | 00:44 |
the rectangle's staying the
same size and not changing.
| | 00:46 | If I want this to change in relationship
to the size of the web browser,
| | 00:51 | there are a couple things we can do.
| | 00:52 | I'm going to close this Preview, and
we're going to go back into Muse,
| | 00:56 | and I'm going to zoom out by
pressing Command+- or Ctrl+-.
| | 00:59 | Next, I'll grab the left edge of this
rectangle and as I snap it to the edge,
| | 01:04 | you see a red line show up.
| | 01:06 | This is letting me know it's snapped
to the left edge of the web browser.
| | 01:09 | If you're not seeing the guide, make
sure you turned your Smart Guides on
| | 01:13 | by going to the View menu.
| | 01:14 | Next, I'll grab the right edge and repeat
the process to the right side of the browser.
| | 01:19 | Now that I have this set, we'll go
back to File > Preview Page in Browser.
| | 01:26 | Looking at this page, the rectangle
is the width of the web browser.
| | 01:30 | As I change the width, we'll see the
rectangle grows and shrinks accordingly.
| | 01:34 | This is considered a 100% width object.
| | 01:37 | These work great for headers and footers.
| | 01:39 | You can put them anywhere you
want the area to expand forever.
| | 01:42 | However be careful with images because
an image won't necessarily increase,
| | 01:47 | unless you have it set as a
background image or maybe a tile.
| | 01:50 | Let's try that ourselves.
| | 01:51 | I'm going to close this window and go back
into Muse and get rid of this rectangle.
| | 01:56 | Next, we'll close this page
and visit the Master page.
| | 02:01 | On the Master page, we'll scroll down to
the bottom and we're going to grab the
| | 02:04 | rectangle and we're going
to draw one at the bottom.
| | 02:07 | Within this rectangle, we'll go to
the Fill and add a background image.
| | 02:11 | We're going to look for
footer-tile and select it.
| | 02:16 | Next, we're going to change the
Fitting to Tile Horizontally,
| | 02:19 | so it repeats all the way across regardless
of the width of the particular shape.
| | 02:24 | Next, we're going to remove the background
color so that white box isn't showing.
| | 02:28 | We'll also get rid of the Stroke.
| | 02:30 | With this selected, we'll zoom out
by pressing Command+Minus or Ctrl+Minus.
| | 02:34 | We'll make this 100% width object just like
we did before by lining up the left side
| | 02:39 | of the object with the
left edge of the browser.
| | 02:42 | We'll repeat the process
on the right side.
| | 02:47 | Next, we'll draw another rectangle at
the bottom to fill in the empty space.
| | 02:51 | We'll remove the Stroke and we're
going to change the Fill color using
| | 02:55 | the Eyedropper to sample
the color from the image.
| | 02:58 | We'll go to the Object menu
and send it to the back.
| | 03:01 | Next, grab your Selection tool and
make sure it is also a 100% width object.
| | 03:07 | Now that we have this set, we can go
back to our Plan view and go to any page
| | 03:12 | and then preview it in the web browser.
| | 03:15 | Now that we have our Footer
set up as a 100% width object,
| | 03:19 | it will expand and contract regardless
of the width of our web browser.
| | 03:23 | Since people may visit your site using
browsers as small as cell phones and
| | 03:27 | as large as 30 inch monitors, creating a
100% width frame is a nice way to ensure
| | 03:33 | a consistent experience for all users.
| | Collapse this transcript |
| Pinning an object to the browser| 00:01 | Have you ever noticed any web sites
that have an object that seems to float
| | 00:04 | at the same location, no matter how
much you scroll or resize your browser?
| | 00:09 | This technique is called pinning and is becoming
a popular technique in modern web design.
| | 00:14 | We're going to begin by taking a look
at a few different web sites that are
| | 00:17 | using pinning, so you can see how
you can use them in your own designs.
| | 00:21 | The first sight is sillypoems.info.
| | 00:23 | Now as I scroll this page, pay attention to
the navigation system on the right-hand side.
| | 00:29 | You'll notice how the navigation system stays
persistent, no matter where I go on the page.
| | 00:34 | This is because it's pinned
to the right-hand side.
| | 00:38 | Next, on informationhighwayman.com, the bar
on the left-hand side does the same thing.
| | 00:43 | It just stays consistent like a
bookmark as you scroll across the page.
| | 00:48 | And finally, Phase2 Design Studio
has a unique take on pinning.
| | 00:53 | Pay attention to the water
droplet on the upper left-hand corner.
| | 00:56 | As I scroll down, it starts to disappear and
it makes you think that it's going through
| | 01:01 |
this pipe and eventually it pops out, goes
in again and finally appears at the bottom.
| | 01:07 | This is accomplished by putting
other objects on top of the logo.
| | 01:10 | So as I scroll, you can
see how it disappears.
| | 01:13 | The reason this logo is disappearing
and appearing again is because there
| | 01:16 | are multiple objects overlapping
it as we scroll down this page.
| | 01:20 | Now let's take a look at how we
can pin objects in Muse ourselves.
| | 01:24 | Back in Muse, let's begin by going
to the Permanent Collection page.
| | 01:30 | On this page, pay attention to the Talk to
Us button in the upper right-hand corner.
| | 01:35 | Let's preview this in the
browser and as I scroll,
| | 01:39 | you will see it just
disappears when we scroll down.
| | 01:42 | But what if want to have that persistent
in the upper right-hand corner?
| | 01:45 | Well, what we can do is
if I come back into Muse,
| | 01:48 | I'm going to select it and then
pin it to the top and center.
| | 01:52 | Next, when we preview this page in
the browser, watch what happens,
| | 01:57 | as we scroll, it stays persistent
in the upper corner.
| | 02:00 | Now you may be thinking, well why wouldn't
we pin it to the upper right-hand corner?
| | 02:04 | That's a very good question.
| | 02:06 | Let's go back to the Plan view
and go to the Pin test page,
| | 02:09 | so we can understand how
each of these corners work.
| | 02:12 | On the Pin test page, none of
these objects are pinned right now.
| | 02:15 | So we're going to preview in the
browser so we can see how they behave.
| | 02:19 | As I resize this page, the
objects move with the page
| | 02:22 | and there is really nothing special
about them, but when we add pinning,
| | 02:25 | we can see how they
each behave differently.
| | 02:27 | We'll close this page
and go back into Muse.
| | 02:31 | And the Upper Left, we're going to
pin in the upper left-hand corner.
| | 02:35 |
Next, we'll go to File > Preview Page in Browser
and now when we resize, look what happens.
| | 02:41 | We see how it's static and doesn't move at all.
| | 02:44 | You'll notice that the upper left-hand
corner stays at the exact same spot,
| | 02:47 | at that position in the
browser no matter what you do.
| | 02:49 | Let's go back and try another.
| | 02:53 | We'll go to the Lower
Right and pin it there.
| | 02:56 | As I resize this one, we can see it's
fixed to a specific position in resizing.
| | 03:02 | That's because it's pinned to the
lower right-hand corner of the browser.
| | 03:05 | As I go back in Muse, I'm going to pin
each of these to the respective locations.
| | 03:10 | Now that I have each of these finished, we're
going to go to File > Preview Page in Browser.
| | 03:16 | Back in the web browser, you can
see as I resize, each of them move
| | 03:19 | in relationship to the
edge of the web browser.
| | 03:22 | Pinning is a great way to keep
things snapped to the same location
| | 03:25 | for social media or navigation.
| | 03:27 | It may seem confusing as to
which position to pin your object,
| | 03:30 | but take your time and test each
location until you find the right fit.
| | Collapse this transcript |
|
|
7. Working with TextGetting text into Muse| 00:00 | When it comes time to add
text to your web site,
| | 00:03 | you probably don't want to have to
enter everything letter by letter.
| | 00:07 | Thankfully, there are a few different
ways that we can import text into Muse.
| | 00:11 | Let's go to the About Us page.
| | 00:13 | On this page, we have an area
that we need to enter some text.
| | 00:17 | I'm going to switch over to TextEdit
on the Mac or WordPad on the PC,
| | 00:22 | and open the about-us-formatted.rtf file.
| | 00:25 | This text file is already formatted
for me with different fonts and colors.
| | 00:29 | I'm going to select all this text
and copy it to the clipboard,
| | 00:33 | and then paste it into Muse.
| | 00:36 | Unfortunately, you'll see that
this text comes in without formatting.
| | 00:40 | That's because when you copy
and paste text into Muse,
| | 00:43 | you end up losing all of the formatting.
| | 00:45 | I'm going to delete this text, and we're
going to try to bring it in another way.
| | 00:48 | We're going to go to File >
Place, and in the Assets folder,
| | 00:54 | we're going to go to about-us.txt.
| | 00:56 | You'll notice that the
about-us-formatted.rtf is grayed out.
| | 01:00 | That's because RTF or Word files
cannot be imported into Muse.
| | 01:04 | We're going to select about-us.txt, select it,
and click and drag to put it in our file.
| | 01:10 | I'm going to resize to make this
fit a little nicer, and there we go.
| | 01:16 | There is another way that
we can bring text into Muse.
| | 01:19 | I'm going to delete this text
and open up a Finder window.
| | 01:22 | You could also do this on
the PC with an Explorer window.
| | 01:26 | On my desktop, I'll go into the Assets folder,
and find that same file about-us.txt.
| | 01:31 | Now, I'm going to drag it directly into Muse,
and when I come back, it will be placed in.
| | 01:39 | Even though it seems that all of
the text is unformatted in Muse,
| | 01:41 | we can copy and paste formatting from
within Muse or between Muse documents.
| | 01:47 | If I delete this frame, I'm going to come
over to the side and select this text frame.
| | 01:51 | I'll copy that to the
clipboard and then paste.
| | 01:55 | You can see it came over
with the exact same formatting.
| | 01:58 | If you already have stylized text in
another application like Microsoft Word,
| | 02:02 | it is unfortunately not possible
to import formatted text into Muse.
| | 02:06 | Hopefully in a future update
to Muse, this may be possible.
| | 02:10 | For the time being, you can always
just copy and paste your content in
| | 02:14 | and then change the formatting
by hand or apply a style.
| | Collapse this transcript |
| Formatting your text| 00:00 | Working with text inside Muse is very similar to other
Creative Suite applications, like InDesign or Illustrator.
| | 00:07 | It has a panel that lets you control the font,
size, and alignment, but there are also some
| | 00:11 | web-centric settings that you need to be aware of.
Let's go to the About Us page.
| | 00:17 | Now if I want to select this text, I could
grab my Type tool, but if I have my Selection
| | 00:21 | tool, I can just select this text frame
and double-click to switch to the Type tool.
| | 00:26 | Now I am able to edit my text.
| | 00:28 | If I want to get out of this frame, just
hit the Escape key to get right back out.
| | 00:32 | In this case, I'm going to
double-click to get back in.
| | 00:35 | Now, if I am going to select some text, I
can of course click and drag, but I can also
| | 00:39 | double-click to grab a word, or triple-click
to grab an entire paragraph, or quad-click--
| | 00:45 | which is four times--to grab everything.
| | 00:47 | Let's do a triple-click to select this
paragraph, Celebrating the Best of Modern Art.
| | 00:51 | Now, with this text selected, you can see
at the top of the screen we have the font,
| | 00:56 | the size, and the alignment,
and a few other controls.
| | 00:59 | But I also have a panel
open on the right-hand side.
| | 01:01 | If you don't have that panel open, you
can just go to Window and choose Text.
| | 01:06 | You can also use the keyboard shortcut, Command+T
or Ctrl+T. Now, with this text selected, if
| | 01:11 | I want to change the size of the font, I
can just put my cursor in here, and I can use
| | 01:14 | my Arrow Keys to increase the font size.
| | 01:17 | Another way to do it is just select the text
and use the keyboard shortcut, Command+Shift+Period
| | 01:23 | or Ctrl+Shift+Period, or Command+Shift+Comma
or Ctrl+Shift+Comma, to make it smaller.
| | 01:29 | If you add the Option or the Alt
key, it will grow five times as fast.
| | 01:33 | We can also hit the bold, italic,
or even the underline button.
| | 01:37 | If we want to change the color of the text,
just click on this little color widget, and
| | 01:41 | we can grab any color we like, choose it
from the color picker, or even grab the sample
| | 01:46 | eyedropper and choose a color from a photo.
| | 01:50 | If we want to change the font,
we have quite a few options.
| | 01:53 | You can see right now we have the
option for Arial. Arial is a web Safe Font.
| | 01:57 | This is a font that will appear on everybody's
machine, regardless if they have a Mac or a PC.
| | 02:03 | We also have an option for
adding Web Fonts or System Fonts.
| | 02:06 | We'll be covering this
in detail in a later movie.
| | 02:09 | Some other alignment controls that we
have is Center, Right, Left, or Justify.
| | 02:16 | But in this case, Justify doesn't really
work because it's just one line of text.
| | 02:20 | But if I go into this paragraph and I
choose Justify, we can see it lines up evenly on
| | 02:25 | the left and on the right-hand side, but
for now we'll just keep it aligned to the left.
| | 02:30 | If we want to do some more controls, we're
going to have to go over to the Text Panel
| | 02:33 | because right now my monitor isn't large
enough that we can see all of these controls, but
| | 02:37 | if you happen to be working on a larger screen
at home, you might be able to see more of these controls.
| | 02:42 | The next option that we have is our
Tracking, which is the space between the letters.
| | 02:46 | So if I put my cursor here, I can use
my arrow keys to increase or decrease.
| | 02:51 | I can even do this between individual letters.
| | 02:53 | So if I put my cursor between the R and the T,
I can do the exact same thing to change the kerning.
| | 02:59 | The keyboard shortcut for this is
the same as most Adobe applications.
| | 03:02 | You can press Option or Alt+left or right,
to kern or track.
| | 03:07 | We also can change the
leading, or the line spacing.
| | 03:10 | With this selected, I can press Option or
Alt+up and down, or just go into the leading
| | 03:16 | space in the Text panel and
increase and decrease the leading.
| | 03:19 | We can add a first line indent, add a left indent,
a right indent, or even space before and space after.
| | 03:31 | Space before and space after is really useful,
so you don't have to put double returns between
| | 03:34 | all of your paragraphs.
| | 03:36 | You can also save this formatting as a style, so you
don't have to manually do this on every single page.
| | 03:41 | It's also possible to add
an inset to a text frame.
| | 03:44 | I'm going to press the Escape key to select
this frame, and with this selected we're going
| | 03:48 | to add a background color.
| | 03:49 | So I'm going to go to Fill
and choose this light blue.
| | 03:52 | Now, with this light blue we can see that
the text is a little too close to the edge.
| | 03:56 | So I'm going to open up a new panel called the
Spacing panel, and I'm going to add some Padding.
| | 04:02 | I'll add it from the Left,
Right, Top, and Bottom.
| | 04:10 | There we go, now all of the text is
inset from all the different sides.
| | 04:13 | It doesn't really matter if you use the Text
panel or the Control panel at the top of the
| | 04:17 | screen to format your text, since
they both accomplish the same goal.
| | 04:21 | However, if you have multiple text frames
selected, you can use the panel to format
| | 04:25 | all of the text even if you don't have the
text selected, since the frame is actually selected.
| | 04:31 | This can be a huge time saver.
| | Collapse this transcript |
| Working with web-safe and system fonts| 00:00 | When working in print design, the choice
in what font to use ultimately lies with the
| | 00:04 | rationale for its use.
| | 00:06 | However, in web design you have to
consider not only a font that matches your design,
| | 00:11 | but also one that is
available on another user's computer.
| | 00:14 | While there are some ways around this issue,
it is important to understand the way that
| | 00:18 | Muse organizes and uses fonts.
| | 00:21 | On this page let's scroll
down and select some text.
| | 00:23 | I'm going to grab this headline,
Celebrating the Best of Modern Art.
| | 00:27 | Now, at the top of the screen we can see
this is the Arial font with a globe next to it.
| | 00:32 | The globe is telling us that this is a Web
Safe Font, which means anybody can use it.
| | 00:37 | So if I choose this font, you can see
right now we have the option for Arial.
| | 00:40 | Arial is likely to show up on everybody's
computer, but in the case that it isn't, when
| | 00:46 | we hover over, an
alternate font dialog will appear.
| | 00:50 | It says Helvetica Neue,
Helvetica, and finally Sans-Serif.
| | 00:54 | What that means is if you happen to use
this font in your layout and someone didn't
| | 00:58 | have Arial on their computer, it would roll
back to each of those fonts and then finally
| | 01:04 | to a Sans-Serif if a user didn't have
any of those fonts on their computer.
| | 01:08 | Web Safe Fonts are a great
choice to use for a lot of your text.
| | 01:12 | One of the best reasons for this is it
is actual selectable text on your website.
| | 01:17 | So if I click Preview and I scroll
down, I'm able to select all of this text.
| | 01:22 | I could copy it to a clipboard, paste in
another document, search on the page, or for people
| | 01:27 | with visual impairments, they'd be able to find
this text and have the screen read it back to them.
| | 01:31 | They could even change the size of the
font to be larger or smaller, even replace the
| | 01:36 | font with a different font.
Now, another option are System Fonts.
| | 01:40 | I'm going to select this exact same text
and go into my text field, and we're going to
| | 01:45 | scroll down into System Fonts.
And you notice it says export as image.
| | 01:50 | Well, let's come down here, and now
I'm going to choose Apple Chancery.
| | 01:54 | Now, we're going to make this a little
bigger so we can see this. That looks better.
| | 01:59 | And I'm going to make it be a
different color so it pops a little more.
| | 02:02 | Let's grab the eyedropper, and we're
going to grab, let's say this blue.
| | 02:07 | No, that's not dark enough. We're
going to need to choose something else.
| | 02:11 | Let's make it a little bit darker, there we go.
That looks the way that I want it to be.
| | 02:14 | Now, this looks really good in my layout, I
can select my text, I can change the spelling,
| | 02:18 | I can type something else, that's not a problem,
but watch what happens when I click on Preview.
| | 02:23 | When I click on Preview, everything looks good, but
if I try to select this, it's not going to let me.
| | 02:30 | The reason is this font is a System Font
which will automatically export as one big image.
| | 02:36 | So back in Design mode, if I scroll down, you
notice this little icon in the lower right-hand
| | 02:42 | corner, this is telling me that this entire
frame is getting rasterized as one big picture,
| | 02:47 | which is a really bad idea because you can't select the
text. It's bad for search engine optimization and accessibility.
| | 02:54 | You really don't want to do
this unless you absolutely have to.
| | 02:58 | So a good compromise is if I really like
this headline and I want to keep it looking like
| | 03:02 | this is just to put it inside its own frame.
| | 03:05 | So I'm going to select this
text and cut it to the clipboard.
| | 03:08 | Next, I'm going to go out here and click
and drag to draw a frame and paste it in.
| | 03:13 | Next, I'm just going to move this frame down,
we'll put this one up here, and we'll resize
| | 03:18 | this and put it right where I want it to be.
| | 03:21 | So now looking at this, this text looks
exactly the same as it did before, but only this top
| | 03:27 | frame is going to get rasterized and
everything else will stay as normal text.
| | 03:31 | To prove this, we'll go back in Preview mode,
and you can see I can select all of this text,
| | 03:37 | but I can't grab this one,
because it's just a picture.
| | 03:40 | Be sure to try and use web safe fonts for
the majority of the text in your layouts.
| | 03:45 | This will make it easier for people to
change the size of your text in your site, search,
| | 03:48 | and even copy the text for other uses.
| | 03:51 | However, there is another option that combines
the freedom of design that System Fonts bring,
| | 03:57 | combined with the
flexibility of web safe fonts.
| | 04:00 | In the next movie we'll
take a look at using Web Fonts.
| | Collapse this transcript |
| Working with Typekit fonts| 00:00 | For many years web designers have been
limited by what fonts were on people's computers.
| | 00:04 | However, in the past few years there have
been a variety of companies that have been
| | 00:09 | licensing a large number
of web fonts to designers.
| | 00:12 | One of the most popular of
these companies is Typekit.
| | 00:14 | It was recently purchased by Adobe
and integrated directly into Muse.
| | 00:19 | Let's go to the About Us page, and I'm
going to select this headline right here.
| | 00:22 | And at the moment the font is Arial, which
is a little boring, and it's not really trying
| | 00:27 | to convey the message that I want.
So let's go up here and choose a Web Font.
| | 00:32 | Now, at the moment I don't have any on my
screen, but if we just choose Add Web Fonts,
| | 00:36 | we can browse and grab any
web font that we want to use.
| | 00:39 | Now, if we happen to know the name of the
web font, we can filter by the name and just
| | 00:43 | type it in, and it will go to that font.
| | 00:45 | But if you don't know what font you want
to use, we can use the Filter buttons at the
| | 00:48 | top of the screen to help narrow it down.
| | 00:51 | The first one is Sans serif, next we have Serif,
Slab serif, Script, Blackletter, Monospaced,
| | 01:04 | Handwritten, and finally Decorative.
| | 01:09 | We also can narrow these down further by showing
only ones that are useful for headers or body copy.
| | 01:15 | For now, let's go to Sans serif and just
use one that's appropriate for the body.
| | 01:20 | Droid Sans sounds like a good one, so
we'll click OK, and this font will automatically
| | 01:24 | be downloaded in the background.
| | 01:26 | Now, this isn't going to be downloaded as
a file to my desktop that I could install
| | 01:30 | on my system and use in other computers.
Instead, it's installed just inside Muse so I can use
| | 01:35 | it in any and all of my layouts.
So we'll just click OK to dismiss this dialog.
| | 01:40 | Now that I have this selected, let's go
back into our Font Menu and choose Droid Sans.
| | 01:44 | You'll notice in the pop-out, we
have both a bold and a regular.
| | 01:49 | This font had multiple weights installed.
| | 01:51 | Sometimes you might get a font with
only one, other fonts may have up to 12.
| | 01:56 | For now let's just choose bold, and
we'll make this a little larger, let's go to 24
| | 02:00 | points, that looks pretty good for a headline.
| | 02:03 | Now, even though this looks like a unique
font, it's not going to be like a System Font
| | 02:07 | where it exports as an image.
| | 02:09 | Web Fonts are special because they'll show
up as regular selectable text in your layout
| | 02:14 | when you publish to the web.
To prove this, let's click on Preview.
| | 02:17 | Now, in Preview I'm able to select all of this text,
regardless if it's a Web Safe Font or even a Web Font.
| | 02:23 | When you're finished with your layout, and
you publish your site or export to HTML, there's
| | 02:27 | no extra work to be done.
| | 02:29 | All of the code will be written automatically.
You don't have to worry about that.
| | 02:32 | The Typekit fonts that you use on your
website will continue to function regardless if you
| | 02:36 | export to HTML or use
business catalyst for hosting.
| | 02:40 | In addition, Adobe will be adding even
more fonts available to Muse over time.
| | Collapse this transcript |
| Create paragraph styles| 00:00 | CSS or Cascading Style Sheets is one of
the most important aspects of Web design.
| | 00:06 | CSS lets you create an initial look
for a document and then apply it
| | 00:09 | automatically to the rest of
your site saving substantial time.
| | 00:13 | One of the great aspects of Muse is that
you don't have to worry about writing CSS.
| | 00:18 | Instead, you can just create styles
similar to how you would create them
| | 00:22 | in a layout program like InDesign.
| | 00:23 | In this movie, we'll take a look
at working with paragraph styles.
| | 00:27 | Let's go to the About Us page,
| | 00:32 | and what we're going to do is create
a paragraph style for the body text.
| | 00:36 | So I'm going to come down here and
just click three times to select
| | 00:39 | the second main paragraph and
we're going to change the font.
| | 00:42 | Let's go in here and switch to a
Web Safe Font and let's try Garamond.
| | 00:48 | Now that we have set this to Garamond,
we'll increase the size to 14 points
| | 00:53 | and increase our leading.
| | 00:54 | While we're at it, we'll add
a little bit of space after.
| | 01:00 | Now that I have this paragraph
set the way that I want it to be,
| | 01:04 | I'd like to save this formatting so
I could use it on all the body text
| | 01:07 | throughout my web site, because to have to
manually do this in every single paragraph
| | 01:11 | would take significant time.
| | 01:13 | So what we have to do is switch
to the Paragraph Style panel.
| | 01:15 | I have it located right here,
but if you don't see it,
| | 01:18 | you can always go to
Window > Paragraph Styles.
| | 01:21 | Since we have our paragraph
formatted correctly and it's selected,
| | 01:26 | we'll create a new paragraph style, double-
click on the name and we'll call it body text,
[00:01:332.94]
and then we'll click OK.
| | 01:34 | Now that we have this made, I can select
more text and then apply the style.
| | 01:40 | Using a paragraph style is a
really fast and efficient way
| | 01:43 | to apply formatting across your site.
| | 01:45 | But what happens if we change our mind?
| | 01:46 | In that case, I'll just go to any
paragraph, make a change, and in this case,
| | 01:52 | we'll change the font from Garamond
to something else like Helvetica
| | 01:58 | and maybe make it a little smaller and
we'll see a Plus next to body text.
| | 02:02 | That means there's an override or a change
that we've applied to that particular paragraph.
| | 02:06 | Well if I like what I did, I want
to update the style or redefine it.
| | 02:12 | So all I have to do is come over
and press the Redefine Style button.
| | 02:16 | When I do this, the rest of the text
that's connected to that paragraph style
| | 02:20 | will automatically update.
| | 02:21 | Let's make a paragraph
style for our subheads.
| | 02:24 | We're going to select
Celebrating the Best of modern Art,
| | 02:28 | and we'll change the font
this time to a thicker font.
| | 02:31 | We'll do Gill Sans, Bold, and then we'll
make it a little bigger; let's do 16 point.
| | 02:37 | Then I'm going to come over, make a
new paragraph style, and call it subhead.
| | 02:45 | Next, we'll select
An Introduction and apply it.
| | 02:49 | Now that we have this page laid out,
let's go to another page on this site.
| | 02:52 | I'll go back to the plan,
visit the Volunteer page.
| | 02:56 | Next, we'll select the
subhead and apply the subhead style.
| | 03:00 | Then we'll grab the body text
and apply the body text style.
| | 03:04 | Be sure to take the extra time to
build paragraph styles for your site.
| | 03:08 | At first glance, it may seem like a
lot of extra work, but in the long run,
| | 03:12 | you'll end up saving a
substantial amount of time.
| | Collapse this transcript |
| Creating character styles| 00:00 | In the previous movie, we learned
how to create paragraph styles
| | 00:04 | that affect the entire paragraph evenly.
| | 00:06 | But what happens if you only want to
change the formatting of a portion
| | 00:09 | of a paragraph, like a person's name?
| | 00:11 | The solution to this problem
is to use character styles,
| | 00:15 | which are as easy to
make as paragraph styles.
| | 00:18 | Let's go to the Volunteer page.
| | 00:20 | On the Volunteer page, I want to change
the formatting of the word SAMOCA.
| | 00:24 | So I'm going to select this and we're going
to change it to a Web Safe Font, Garamond.
| | 00:30 | Next, we'll make it bold and blue.
| | 00:35 | Now if I try to make this a
Paragraph Style, watch what happens.
| | 00:45 | As soon as I apply the
style to the paragraph,
| | 00:48 | you'll see that everything
turns blue in that font.
| | 00:51 | The reason is a paragraph style
affects the entire paragraph evenly.
| | 00:54 | You can't apply a paragraph
style to just a portion of it.
| | 00:57 | So this really isn't
what I want to do.
| | 01:00 | I'm going to press Command+Z or Ctrl+Z a
few times to undo back to the beginning.
| | 01:04 | There we go.
| | 01:05 | In order to save this formatting
and use it across my site,
| | 01:08 | I need to save it
as a character style.
| | 01:10 | A character style is any style that
affects a portion of a paragraph.
| | 01:14 | So with this selected, I'm going
to go to my Character Style panel.
| | 01:18 | If you don't see it, go to
Window > Character Style.
| | 01:21 | I'll press the New button
and we'll call it Samoca.
| | 01:24 | Now that that's done, I can go anywhere
else in the site and apply this style
| | 01:34 | and it will only affect my selection.
| | 01:37 | So if I try to Cafe, you'll
see it's working effectively.
| | 01:41 | If I change my mind about it and want
to change its color, I can go up here,
| | 01:46 | change the color, and then redefine
the style just like a paragraph style,
| | 01:51 | and the rest of the site updates.
| | 01:53 | It's a good idea to avoid
using system fonts.
| | 01:55 | The reason is if you apply a system font
to a paragraph, it will affect the
| | 01:59 | entire text frame regardless of
the amount that you're using it.
| | 02:04 | Other uses for character
styles are used in hyperlinks.
| | 02:06 | We'll talk more about
those in a later movie.
| | 02:09 | Even though character styles may not
seem as important as paragraph styles,
| | 02:13 | take the time to make them when you're
changing the appearance of a portion of text.
| | 02:17 | Something as simple as making something
bold should be a character style.
| | 02:21 | That way, if you ever decide to change
the appearance of bold in your layout,
| | 02:25 | you'll just have to make one small change
and then the entire site is updated.
| | Collapse this transcript |
| Setting style export tags| 00:01 | When designing a layout, most people
usually name their styles something like
| | 00:04 | headline, subhead, sub-subhead and body.
| | 00:08 | But with HTML the names of
styles are much more strict.
| | 00:11 | In Web design, styles are normally named
h1 for the biggest, most important headline
| | 00:16 |
on the page, h2 for the next biggest
headline, and so on all the way down to h6.
| | 00:21 | p is reserved for the body
text or normal paragraph text.
| | 00:26 | Using the export-taking feature, you
can continue to use whatever name
| | 00:29 | you wish inside your layout,
| | 00:31 | but upon export, the styles names will
change to whatever you have them set to.
| | 00:36 | Before we start working in Muse,
I want to show you an example of
| | 00:39 | the CSS Zen Garden to give
you an idea of how CSS works.
| | 00:43 | Looking at this page, it's
beautiful and very simple.
| | 00:46 | But on the right-hand side,
it says select a design.
| | 00:49 | Let's try another design.
| | 00:52 | Let's see what Under
the Sea! looks like.
| | 00:54 | This page looks completely
different, doesn't it?
| | 00:57 | As I scroll down, I see different
images, different formatting of text.
| | 01:02 | Let's see another one.
How about Make 'em Proud?
| | 01:04 | Here is another example where
it looks completely different.
| | 01:09 | But what if I would tell you that all three
of these pages had the exact same content?
| | 01:14 | The reason for this is because of CSS.
| | 01:17 | If I turn off the CSS, you'll see how
all three pages look exactly the same.
| | 01:23 | In order to turn off the CSS,
I have to disable my styles.
| | 01:26 | I'm going to show you how to do
this with the Safari browser
| | 01:29 | which is available both
on the Mac and the PC.
| | 01:32 | We're going to go to Safari's
Preferences, and in the Advanced tab,
| | 01:36 | I'm going to show to Develop menu.
| | 01:39 | Now that I have this turned on, I
can go to Develop > Disable Styles.
| | 01:45 | You see how this page is nothing but text.
| | 01:47 | That's what most web pages are.
| | 01:49 | If I turn the Styles back on
and go back to the previous page
| | 01:54 | and I disable the Styles again, you
can see how it looks exactly the same.
| | 01:59 | That's because it was only the CSS that
was changing the appearance of the site.
| | 02:03 | Let's turn this back on and close Safari.
| | 02:07 | Back in Muse, let's go
back to the About Us page.
| | 02:10 | On this page we have a
wide variety of styles.
| | 02:13 | When I select About Us, we'll see
the style applied is breadcrumb nav.
| | 02:17 | Now breadcrumb nav might be useful to
us as a human, but to a Web browser,
| | 02:22 | they have no idea what that is.
| | 02:24 | We have to let Muse know that
this is needs to be an h1.
| | 02:27 | To do that, go over to that style,
right-click and choose Style Options.
| | 02:32 | Here we have the Paragraph Tag which
will be applied when it's exporting.
| | 02:37 | So I'm going to change
this to Headline (h1).
| | 02:39 | Now the appearance in
Muse will not change at all;
| | 02:44 | it'll just change its
appearance upon export.
| | 02:46 | In fact, let's see what
it looks like right now.
| | 02:49 | We're going to go to File > Preview
Page in Browser and everything looks fine.
| | 02:56 | But watch what happens
when we disable our Styles.
| | 03:00 | You see how About Us is a little
bigger than the rest of the text.
| | 03:03 | We need to make sure that each of these
paragraphs have the correct style applied.
| | 03:08 | So I'm going to go back and re-enable
the styles, back to Muse, and we can see
| | 03:14 | that Celebrating the Best of modern
Art is Main Headline - bold black.
| | 03:18 | This is the secondary headline on
the page which would make it an h2.
| | 03:21 | So we'll right-click, Style
Options, and change it to an h2.
| | 03:27 | We'll repeat the process for the next
one, which would be subhead - black,
| | 03:32 | and we're going to call that one h3.
| | 03:37 | Now our body text should be a Paragraph.
| | 03:40 | Luckily, all of the styles in Muse by
default are tagged to a Paragraph,
| | 03:46 | so you don't have to worry about those.
| | 03:47 | You only need to be changing
the headlines and subheads.
| | 03:52 | Let's preview this one
more time; looking good.
| | 03:56 | We'll disable the Styles.
| | 03:58 | And now we can see it's changing
the way that it should be.
| | 04:04 | In addition to Paragraph Styles,
we also have to make some changes
| | 04:07 | with our Character Styles.
| | 04:08 | You can see that I've got SAMOCA and
SAMOCA has the Character Style of Bold.
| | 04:13 | On the Web, they don't
use a style called Bold.
| | 04:16 | Instead, I'm going
to right-click and
| | 04:17 | I'm going to change the Style
Options to strong or Important.
| | 04:21 | Now it will be tagged
correctly when it's exporting.
| | 04:24 | There are a few other options in there
which I'm not going to go over right now,
| | 04:28 | but if you're interested in what they
are, you can visit w3schools.com/html5.
| | 04:34 | Taking a bit of time it takes to set your
export tags for your styles can go a
| | 04:39 | long way to improving the accessibility
and searchability of your site.
| | 04:44 | As you become more comfortable
working with HTML tags,
| | 04:47 | you might want to consider labeling
your styles with the actual HTML names,
| | 04:51 | like h1 and h2, rather
than headline or subhead.
| | 04:55 | This will end up making it even
easier to set your export tags
| | 04:58 | since they'll be
named the same thing.
| | Collapse this transcript |
| Understanding minimum height| 00:01 | You may have noticed that
sometimes text in Muse
| | 00:03 | does not have the same line breaks
in Preview mode as Design mode.
| | 00:07 | You may have also
noticed that some frames
| | 00:09 | contain a strange dashed
line in the middle of them.
| | 00:12 | Both of these occurrences work together
utilizing a feature called Minimum Height.
| | 00:16 | We're going to go to the Home page.
| | 00:19 | On the Home page, we have two text
frames that look pretty much the same.
| | 00:23 | When I select the one on the left,
there doesn't seem to be any problems,
| | 00:27 | but when I select
the one on the right,
| | 00:28 | you'll notice that there's
a thin dashed line in the middle.
| | 00:32 | This is referred to
as the Minimum Height.
| | 00:34 | The reason that's there is because the
end user could change the size of the font.
| | 00:38 | If they made the font smaller,
the text frame could shrink,
| | 00:41 | but that won't get any smaller than the height
that is showing from the minimum height.
| | 00:46 | Let's go in Preview mode
and see how this layout looks.
| | 00:51 | At first glance, it may
look like nothing's changed;
| | 00:53 | but in fact, the frame on the right is a
little shorter than the frame on the left.
| | 00:57 | In addition, the photo on the
bottom right is up a little higher
| | 01:01 | than the photo on the bottom left.
| | 01:04 | Back in Design mode, we can see
that they're aligned perfectly.
| | 01:07 | So what's going on here?
We've got to figure out this problem.
| | 01:10 | Well, there're actually two
reasons that this is happening.
| | 01:13 | The first one is the font.
| | 01:15 | Pay attention to the text
on the right-hand side.
| | 01:18 | We'll see that "include regular garden"
is still there, but "regular" is up a line,
| | 01:23 | where in the other screen,
it was down the line.
| | 01:25 | The reason for that is
because the font that we chose.
| | 01:29 | Back in Design mode,
if I select this text,
| | 01:32 | you'll see that the font is Franklin
Gothic Medium, a Web-safe font,
| | 01:36 | but just because it's a Web-safe font
doesn't mean it's on every single computer.
| | 01:40 | In fact, it actually isn't even on the
computer that I'm recording on right now.
| | 01:44 | When you choose a web font
and you mouse over the name of it,
| | 01:49 | a tool tip will pop up telling
me the alternate fonts,
| | 01:52 | because if I don't have Franklin Gothic
Medium, it'll fall back to Arial Narrow,
| | 01:57 | then Arial, and finally, any sans-serif
font that's on my computer.
| | 02:02 | In our case, it switched to Arial,
and because the appearance of Arial
| | 02:06 | is a little different than Franklin
Gothic, the line breaks change.
| | 02:10 | Because the line break changed, the
frame ended up getting a little smaller.
| | 02:14 | So we have to solve this problem;
| | 02:16 | there are two different
things that we could do.
| | 02:18 | One would be to change our font to a font
that we knew that every single person had.
| | 02:22 | Unfortunately, that really
isn't a realistic option.
| | 02:25 | The other option is to remove
the Minimum Height from our frame.
| | 02:29 | To do that, select the frame and make it a
little taller until the dashed line disappears,
| | 02:34 |
and then repeat the process on the
left-hand side so they're the same height.
| | 02:38 | Make sure you have Smart Guides
enabled to make this easier.
| | 02:42 | Back in Preview mode, we'll see that
everything looks the way that it should.
| | 02:46 | Even though the text may
have reflowed slightly different,
| | 02:48 | all of our objects are now the same
size and have the same relationships.
| | 02:52 | One of the hardest parts of working
in web design versus print design
| | 02:55 | is learning to give up control.
| | 02:57 | As much as you might want to control
every single line break by adding
| | 03:01 | a soft return, the end result would be
much worse than if you left it alone.
| | Collapse this transcript |
| Using spell check| 00:00 | Even though images may be worth a thousand words,
one misspelled word can leave a significant
| | 00:06 | negative impression on a
visitor to your website.
| | 00:10 | While it is always important to proofread
your copy before you put it on your site,
| | 00:14 | it is useful to use Muse's built-in spell-check
as a safety blanket to catch any last-minute typos.
| | 00:21 | You'll notice on this page there are various
locations where the text has red squiggly lines underneath.
| | 00:27 | That means that this particular word
isn't inside Muse's built-in spell check.
| | 00:31 | If we don't want to see this because we just
happen to be designing, we can turn this on
| | 00:35 | and off by going to Edit > Spelling.
| | 00:38 | You can also use the keyboard shortcut
Command+Option+I or Ctrl+Alt+I to toggle this on and off.
| | 00:44 | For now we're just going to keep this on.
| | 00:47 | Using the built-in spell
check is relatively simple.
| | 00:49 | It works just like you'd expect in
other applications like Word or TextEdit.
| | 00:53 | All I have to do is just double-
click to switch of the Type tool.
| | 00:57 | Now, you can either select the word or just
have my cursor anywhere inside it, and then
| | 01:01 | just right-click and it will
give me a few different options.
| | 01:04 | In this case I know that it's opinion, so I'll
switch it to opinion, and there we go. It's been fixed.
| | 01:11 | If your spelling is too far off, you might
have to actually type out the word a little
| | 01:15 | more or go to Google or a
dictionary to find it correctly.
| | 01:19 | Now, you might come across a word that is
spelled correctly but it isn't inside the dictionary.
| | 01:23 | This is really common with the
name of companies or a person's name.
| | 01:26 | In our case, SAMOCA isn't in the dictionary,
but I don't want to see this red squiggly
| | 01:31 | throughout my entire site,
| | 01:32 | so I'm just going to select this word,
right-click, and choose Add to Dictionary.
| | 01:37 | As soon as this is added to the dictionary,
throughout my entire site, I will no longer
| | 01:42 | see the little red squiggly.
| | 01:44 | Just be careful when you add a word to the
dictionary, because at the moment in this
| | 01:47 | build of Muse, it isn't possible to remove a
word from the dictionary, so be very careful
| | 01:53 | about deciding to add a word.
| | 01:55 | On the other hand, if there is a lot of words
that you come across frequently in your industry
| | 01:59 | that aren't in the
dictionary, be sure to add them.
| | 02:02 | Now, this dictionary is unique to Muse.
| | 02:04 | It's not connected to InDesign or
the local operating system dictionary.
| | 02:09 | It's independent and works only with Muse.
| | 02:12 | But if you do use another document,
the word will be inside that dictionary too.
| | 02:16 | Even though the original text you get for
your website might be error free, there is
| | 02:20 | always a chance for an additional
edit when you're working on the design.
| | 02:24 | While Muse's spell check might be basic,
it's still a very important tool to use before
| | 02:28 | you publish your site.
| | Collapse this transcript |
|
|
8. Adding Color to Your SiteCreating color swatches| 00:00 | Creating colors in Muse is a
pretty straightforward process.
| | 00:04 | However, if you do end up making a color,
it is important to save it as a swatch,
| | 00:08 | so it can be used by styles in
other aspects of the Muse interface.
| | 00:11 | Let's start by making a color.
| | 00:13 | I'm going to go the Home page and I'm
going to scroll down and I'm just going
| | 00:17 | to get rid of this picture, so we
have a little bit of room to play with.
| | 00:21 | I'm going to grab the Rectangle tool
and just draw a rectangle right here
| | 00:23 | and select it with my black arrow.
| | 00:24 | We'll get rid of the stroke, but what
I want to do is give it a Fill color.
| | 00:28 | So we're going to come over
here and open the Swatches panel.
| | 00:31 | In the Swatches panel, there are a
few different ways to make a color.
| | 00:34 | The simplest way is just
to choose a Color Swatch.
| | 00:37 | You can also play with the
Color Picker down here
| | 00:39 | to choose a particular
color that you want.
| | 00:42 | If you know the RGB values,
you can type them in.
| | 00:45 | Another useful tool is the Eyedropper to
sample a color from a photo on your site.
| | 00:49 | So I'm just going to grab the Eyedropper
tool and sample this color over here.
| | 00:53 | That looks pretty good.
| | 00:54 | Now if this is a color I want to use
it again and again throughout the site,
| | 00:57 | it's a good idea to make a swatch.
| | 00:59 | So all I have to do is come over
here and press the New Swatch button.
| | 01:03 | Now that it's been
created as a swatch,
| | 01:05 | I can use this in Styles or
in other places on the site.
| | 01:09 | It's also a good way to ensure consistency,
because if I try to use the Eyedropper to
| | 01:12 |
sample a photo, I might click a different
spot and the color could be off.
| | 01:17 | If you want to share colors
between a Muse document,
| | 01:19 | there isn't a way to share the actual
swatches, but what you can do is just
| | 01:24 | make a rectangle with color and copy and
paste that between two different documents.
| | 01:28 | Another way to get colors into
Muse is to use the hexcode.
| | 01:31 | The hexcode is a series of letters
and numbers that represents the color,
| | 01:35 | similar to RGB or CMYK.
| | 01:38 | One place you can get
these colors is in Photoshop.
| | 01:41 | When I switch over to Photoshop and I
use the Eyedropper to sample a color,
| | 01:45 | I can double-click on the color
and see the Hex value down here.
| | 01:48 | I'll copy that to the clipboard,
hit Cancel and go back into Muse
| | 01:54 | and I can paste it in
to get that color.
| | 01:56 | Now I have the exact same color
that I found in Photoshop.
| | 01:59 | Be sure to take your time to
make swatches for the colors
| | 02:02 | that you plan on
using in your site.
| | 02:04 | That little bit of extra prep
will end up saving you lots of time
| | 02:08 | as you continue to
build out your site.
| | Collapse this transcript |
| Working with stroke and fills| 00:00 | When you stylize rectangles with color in Muse,
you can change both the Fill and the Stroke.
| | 00:05 | Changing the Fill is pretty straightforward,
but when you explore the Stroke options,
| | 00:09 | things can get a little more interesting.
| | 00:12 | On this page, we're going
to create a rectangle
| | 00:14 | and then select it with
our Selection tool.
| | 00:16 | Next, we're going to go to the Fill
| | 00:18 | and change its color to
something contrasting, like green.
| | 00:22 | Opening the Fill options shows that we
can change from a Solid to a Gradient,
| | 00:26 | but we'll be talking about
the Gradient options later on.
| | 00:29 | You can also fill with an
image and control the Fitting,
| | 00:32 | but we talked about that
earlier in this course.
| | 00:34 | Our next option is Stroke.
| | 00:36 | Let's change the stroke's
thickness to 20 points.
| | 00:39 | This is going to put a nice
thick black stroke on our object.
| | 00:43 | If we want to change Stroke options,
we just have to click on the word
| | 00:47 | Stroke at the top of the screen.
| | 00:48 | From here, we can change
the stroke's alignment.
| | 00:50 | By default, the stroke is aligned
to the center of the frame.
| | 00:54 | So if I have a 20-point stroke,
10 points are going outside the frame
| | 00:58 | and 10 points are going inside the frame.
| | 01:00 | But I can change that by pressing these
options; here all 20 points of the stroke
| | 01:05 | are aligning on the inside, and here
all 20 points are aligned on the outside.
| | 01:09 | For know, I'm going to leave it centered.
| | 01:12 | Another interesting control is the ability
to control the individual sides of the stroke.
| | 01:17 | This is something unique to Muse
| | 01:18 | that isn't available in any
other layout program by Adobe.
| | 01:21 | Right now all the sides are
the same, but if I break this,
| | 01:25 | I can go to any side and
increase the stroke's thickness.
| | 01:29 | So from here, I can increase
it all the way up to 50,
| | 01:32 | and I'm going to go to the
bottom and make it be nothing.
| | 01:35 | This opens up many
creative possibilities.
| | 01:37 | If this is the type of formatting
that you use frequently,
| | 01:40 | remember, we can always save this
as a graphic style for other objects.
| | 01:44 | So what we're going to do
is with this frame selected,
| | 01:47 | I'm going to go my Graphic Styles
panel, make a new graphic style,
| | 01:51 | we'll double-click, and we'll call
it Large box and we'll click OK.
| | 01:55 | Now if I draw another
rectangle and I apply the style,
| | 01:58 | the same formatting appears.
| | 02:00 | Remember, the stroke doesn't have
to be to just objects on the page;
| | 02:03 | you can apply the stroke or
the fill to the page itself.
| | 02:06 | If I grab my Selection tool
and then completely deselect,
| | 02:09 | if I change any Stroke or Fill
properties, it'll affect the page itself.
| | 02:13 | So I'm going to change the Fill
color to a red and then the Stroke
| | 02:16 | to something thicker and
align the stroke to the inside.
| | 02:21 | Another unique aspect of Muse, compared
to other Adobe applications,
| | 02:24 | is that you don't have to worry about
targeting the stroke or the fill.
| | 02:27 | Since you independently choose if you're
going to change the stroke or the fill,
| | 02:30 | it is one less hassle that you don't have
to concern yourself with during your design.
| | Collapse this transcript |
| Using gradients| 00:00 | You can add a few different types
of Fills to Objects: Solid Colors,
| | 00:04 | a Background Graphic or even a Gradient.
| | 00:06 | In this movie, we'll take a look at how
to create and use Gradients inside Muse.
| | 00:11 | Let's go to the Home page and we're
just going to draw a rectangle
| | 00:14 | right in the middle of the page.
| | 00:16 | From here we're going
to remove the Stroke
| | 00:18 | and we're going to click
on the Fill drop-down menu.
| | 00:21 | Normally when I choose a color, it's a
Solid Color throughout the entire frame,
| | 00:25 | but what we can do is choose Gradient,
| | 00:27 | and this way it's a Fade
from one color to another.
| | 00:31 | By Default the second color is
black, but we can click over here,
| | 00:34 | and choose something else if we like.
| | 00:36 | Now you notice the Focal Point,
what this allows us to do is
| | 00:40 | control the intensity
from one side to the other.
| | 00:42 | I kind of like it in the middle,
so I'm going to leave it here.
| | 00:45 | We also can change the Direction,
so here it's going Vertical,
| | 00:48 | and this one is going Horizontal.
| | 00:50 | I'm going to keep the
Vertical Option for now.
| | 00:52 | We can even change the Size.
| | 00:54 | Right now it's on Automatic,
| | 00:55 | But if we choose Fixed, we can scale
this, and get this be just right.
| | 01:00 | A final option is Opacity.
| | 01:02 | If I completely move this to 0,
most of the orange disappears.
| | 01:06 | I can still see a tint of it.
| | 01:08 | So if I come over here and choose white,
it'll look like most of it's gone.
| | 01:11 | I'm liking the look of this, so I'm
going to deselect, grab my Selection tool
| | 01:16 | and press Command+Minus or
Ctrl+Minus to zoom out.
| | 01:18 | Next, I'm going to make
this be part of the Footer
| | 01:22 | and resize to put it at
the bottom down here.
| | 01:24 | Now we have nice Fade at
the bottom of our page.
| | 01:26 | If you plan on using this Gradient more
than once, just save as a Graphic Style.
| | 01:31 | So I'm going to select this, choose
New Graphic Style, call it Gradient.
| | 01:38 | Next I'm going to draw another rectangle,
apply the Style, but this time I'm going
| | 01:44 | to rotate the frame and I'll put this
at the top of the page; there we go.
| | 01:51 | That looks good.
| | 01:52 | Gradients are a great way to add depth to a
Background, Button, or Graphic in your Layout.
| | 01:57 | Just be careful not to
overuse them in your Layouts,
| | 01:59 | otherwise they may lose their
impact as part of your design.
| | Collapse this transcript |
|
|
9. Using HyperlinksCreating a hyperlink| 00:00 | Hyperlinks are arguably one of the
most important parts of any website.
| | 00:04 | They allow the user navigate in between
pages, within a page, or jump to other websites.
| | 00:09 | Let's take a look at how we
can create hyperlinks in Muse.
| | 00:14 | Let's go to the Homepage.
| | 00:16 | Now on the Homepage, I am going to use the
Selection tool to select this image of this
| | 00:19 | bird, and I want to have this image or
this box to be a link to go to a website.
| | 00:24 | In this case let's go to Google.
| | 00:27 | So what I am going to do is click at the top
of the screen where it says Add or filter links.
| | 00:33 | When I click on this I can
start to type in the URL.
| | 00:36 | In this case, it will be www.google.com.
| | 00:40 | When I am finished, I will hit Return.
| | 00:42 | Now I have applied a hyperlink to this bird.
| | 00:44 | Let's check it out by previewing.
| | 00:46 | Let's go to Preview. You can see, when I
mouse over this box, our arrow changes to a hand,
| | 00:52 | this hand is letting us
know that it is a hyperlink.
| | 00:55 | When I click on it, it will go to Google.
| | 00:57 | Let us go back into the Design mode.
Some people may prefer to have a hyperlink pop up
| | 01:02 | in a new window instead of just
going into that individual page.
| | 01:05 | To do this, we are going to click on the
Links button at the top, and here, there is a link
| | 01:09 | that says Open the link in a new window or tab.
| | 01:12 | When I have activated this, in order to test this,
we are going to have to preview this on a web browser.
| | 01:18 | So we are going to go to
File > Preview Page in Browser.
| | 01:21 | In our web browser, when I mouse over this and I
click, we can see it opens up in a brand-new window.
| | 01:27 | Keep in mind that some users may not prefer
to have this open in a new window, so that's
| | 01:31 | just going to be a design consideration on
your part when you are creating your website.
| | 01:36 | Back in Muse, let us add a
hyperlink to a specific page.
| | 01:38 | I am going to scroll down and grab the text
Volunteer. With the text Volunteer selected,
| | 01:44 | I want this to link to the
Volunteer page on our website.
| | 01:47 | To do that I am going to click at the top
where it says Add or filter links, and in
| | 01:51 | here, we will see all of the links
that currently exist within our website.
| | 01:55 | Now, I could scroll down and click on Volunteer,
but it might be hard to find if you have a
| | 01:59 | lot of links within your site.
| | 02:01 | So I can start to type to filter down to
the particular link that I want, vol. Oh, there
| | 02:07 | it is. That is the only one now.
It is a lot easier to find it.
| | 02:10 | So I can select it and the link is applied.
| | 02:12 | When you apply a text hyperlink, you might see
the default appearance of blue with an underline
| | 02:17 | appear. We can change this appearance
and we will learn about this in a later movie.
| | 02:22 | To check it out, let's click on Preview.
We will scroll down and click on Volunteer, and
| | 02:28 | there we go; it goes to the
Volunteer page, as expected.
| | 02:31 | Let's go back into the Design mode.
| | 02:33 | And there is another type of
hyperlink I want to talk about.
| | 02:35 | We will close the homepage
and we are going to Contact Us.
| | 02:40 | On Contact Us, I want people to be able to
email us, so if I select Info@samoca-arts.org,
| | 02:47 | when you click on this, I want it
launch your default email client.
| | 02:51 | To do that we are going to go up to the Links again and
we need to type in "mailto:" and then the email address.
| | 02:59 | So in this case, mailto:info@samoca-arts.com.
| | 03:06 | Now, if you were to click on this on
another device or on you desktop machine, it would
| | 03:11 | launch your default email client and
address it specifically to this email address.
| | 03:15 | If you are designing for a
smartphone, we can use phone numbers.
| | 03:19 | If I grab this phone number right here, I
am going to copy it to the clipboard. I am
| | 03:23 | going to go to the Hyperlink panel and I
am going to type in tel: and I am just going
| | 03:28 | to paste this in. That tel: is going to tell
the phone to say, all right, you need to dial
| | 03:33 | this number if someone taps on this hyperlink.
| | 03:36 | We will hit Enter, and now it is applied.
| | 03:39 | Adding hyperlinks to your layout is a useful
way to make your site more interesting for others.
| | 03:44 | Be sure to add a hyperlink on your site
whenever you refer it to another area. This way you
| | 03:48 | don't have to rely on the user to figure
out how to get to other areas of your site.
| | Collapse this transcript |
| Working with link styles| 00:01 | When creating text hyperlinks in Muse, they
will default to the color blue with an underline.
| | 00:06 | Well, this does make it obvious that
they are hyperlinks and unfortunately,
| | 00:10 | may not match the look of your site.
| | 00:12 | In order to control the look of your hyperlinks,
you will need to create Link Styles.
| | 00:17 | Let's go to the Volunteer
page, and as we scroll down,
[00:00:221.31]
you'll see at the bottom of
the page the text Contact us.
| | 00:24 | I want this to link
to the Contact Us page.
| | 00:27 | So what I'm going to do is select this
with my Type tool and at the top of the
| | 00:30 | screen I'm going to change it
to be a Hyperlink to Contact Us.
| | 00:33 | As you can see it changes to the default
appearance of blue with an underline.
| | 00:38 | But I really want to change this to
something that looks a little better
| | 00:41 | and maybe matches the look of my site.
| | 00:43 | To do that, we have to create a link style.
| | 00:45 | There are two different ways we can do this.
| | 00:47 | I can go to the Hyperlink menu here, click
and choose Edit Link Styles or I can go to
| | 00:53 | File > Site Properties and go to
Hyperlinks and make my Link Styles here.
| | 00:59 | It doesn't matter which way
you go; the choice is up to you.
| | 01:02 | I'm going to go back to Hyperlink
and choose Edit Link Styles
| | 01:06 | and we're going to make a new one.
| | 01:08 | I'll press the New button and we're
going to name this internal link.
| | 01:13 | The reason I'm calling this internal
link is I plan on using this whenever
| | 01:17 | I link internally inside Muse.
| | 01:18 | There are four different appearances or
states that are available to a Hyperlink.
| | 01:23 | Normal is how it looks when
you see it on your page,
| | 01:26 | Hover over is the
rollover appearance,
| | 01:29 | Visited is when you've already
clicked on this link at some point,
| | 01:32 | and Active is when you're
actually clicking on it.
| | 01:37 | Next to each of these, we have
some properties that we can change.
| | 01:40 | We change the color of each one,
Bold, Italic or an Underline.
| | 01:45 | In the case of the normal appearance, I'm going
to change the color, I want it to be blue.
| | 01:50 |
I also want it bold and to not
have it italic or an underline.
| | 01:55 | If you notice the tiny square inside the
checkbox, that means it's being ignored.
| | 01:59 | But if I put a check or remove the
check, that means it forces it to be this.
| | 02:04 | For Hover, which is the rollover,
I want it to be the same color,
| | 02:08 | and I want it to be bold with no italic,
but I want it to have an underline.
| | 02:12 | That way as you mouse over it,
you'll see an underline appear.
| | 02:16 | After visiting a link, I want
that the color to remain purple,
| | 02:19 | but I'm going to keep it bold with
no italic and without a hyperlink.
| | 02:23 | And Active, I'm going to keep as red,
bold, no italic and have it underline.
| | 02:29 | Now that I have all of
this setup, we'll click OK.
| | 02:31 | Now at first glance, you may
be thinking it didn't work.
| | 02:35 | Well the reason it's not working is we
haven't applied the style to our text yet.
| | 02:39 | So now I'm just going
to select Contact us,
| | 02:42 | go to Hyperlink at the top and
apply the style internal link.
| | 02:47 | Now it's working
the way we expect.
| | 02:49 | But let's just double check
by going into Preview mode.
| | 02:51 | We're going to go up to Preview
and right now it's bold and blue.
| | 02:55 | As I mouse over,
the underline appears.
| | 02:59 | When I click, it turns
red and we visit the site.
| | 03:01 | We're going to go
back to Design.
| | 03:03 | Once you've created a hyperlink style you
can create internal hyperlinks very easily.
| | 03:07 | For example, if I want the word expertise
to also go to the Contact Us page,
| | 03:13 | I can go to the top of the
screen and choose Contact Us,
| | 03:16 | and it goes back to
its old appearance.
| | 03:19 | But all I have to do is change the
Hyperlink style to internal link.
| | 03:23 | However, if we use paragraph styles,
we can actually save ourselves a step.
| | 03:27 | I'm going to press Command+Z or Ctrl+Z to do
an undo to remove the Link Style that I applied.
| | 03:31 | I'm going to keep this Hyperlink
with a default appearance.
| | 03:34 | With my cursor in this paragraph, you'll notice
that the Paragraph Style has a Plus next to it.
| | 03:38 | That means there's an override.
| | 03:39 | The override in this paragraph is
the fact that I added a link style.
| | 03:43 | If I redefine the style of this paragraph,
it will pick up the link style, which means
| | 03:47 | every hyperlink that I add to this particular
style will look exactly like Contact Us.
| | 03:53 | So all I have to do,
is mouse over that style,
| | 03:56 | right-click my mouse and
choose Redefine Style.
| | 03:59 | As you can see, expertise
in the top paragraph updated
| | 04:03 | and I didn't even have to
change the hyperlink style.
| | 04:06 | In fact, if I try it again, I go to
SAMOCA and add the hyperlink About Us,
| | 04:11 | its appearance will change automatically.
| | 04:15 | So adding a Link Style to your Paragraph
Style is a great way to save a lot of time.
| | 04:19 | We're going to create one more Link Style;
this is going to be in invisible Link Style.
| | 04:24 | If I scroll up to the top of the
page, you can see the word Volunteer.
| | 04:29 | We're going to close the Volunteer
page, and go back to the Plan view.
| | 04:34 | Next, we're going to go to
the Current Exhibits page.
| | 04:37 | On the Current Exhibits page, you'll notice
that Collections is blue with an underline.
| | 04:42 | This is because this is a hyperlink
set to go to the Collections page,
| | 04:46 | and it has the default
appearance of a Link Style applied.
| | 04:48 | But I don't want it to look this way.
| | 04:50 | I want it to look exactly
the same as Current Exhibit.
| | 04:53 | So what we need to do is
create an invisible Link Style,
| | 04:56 | so it doesn't change the
appearance of the text.
| | 04:59 | To do this, we're going to select the
text and go to Hyperlink > Edit Link Styles.
| | 05:06 | In here we'll make a new Hyperlink style
and we're going to call this Invisible.
| | 05:12 | What we need to do is ignore
the color for each state,
| | 05:16 | we're going to remove the
underline for each state,
| | 05:20 | and then we're going to keep the bold
and italic the way that they are,
| | 05:23 | because they're currently set to ignore.
| | 05:25 | With this set, we'll press OK and
apply the Link Style of invisible.
| | 05:31 | Now that we have this set,
this is a functioning hyperlink
| | 05:34 | but at first glance,
it won't look like that.
| | 05:36 | So if we go to Preview mode,
you'll notice when I mouse over,
| | 05:40 | it's a hyperlink and
I can go back to the page.
| | 05:43 | While it is possible to change a lot
of attributes for your Link Styles,
| | 05:47 | remember that you can only control
the color, bold, italic and underline.
| | 05:51 | The font and size is not something
that you are able to control.
| | 05:54 | Even with these limitations,
you still should be able
| | 05:57 | to create beautiful
links with Muse.
| | Collapse this transcript |
| Using link anchors| 00:01 | When you create a normal hyperlink, it
will take you from your current page
| | 00:04 | to another page on your site
or another web site altogether.
| | 00:08 | However, it is possible to create
links within a single page of your site.
| | 00:13 | This can be very useful
if you have a long page
| | 00:16 | and want to let people jump
right to the information.
| | 00:19 | Before we begin to create Link Anchors
in Muse, let's take a look at a couple
| | 00:23 | of examples online to see
how they're being used today.
| | 00:26 | On the Kevin's Koffee Kart site, you
can see where it says Drip Coffee,
| | 00:30 | French Press and Espresso, and
if I click on any of these,
| | 00:33 | it will bring me to
that area of the page.
| | 00:36 | So let's try out French Press.
| | 00:38 | There we slide down to French Press
and Espresso jumps us down to Espresso.
| | 00:43 | This is an easier way to get
to the specific information
| | 00:46 | without having to scroll yourself.
| | 00:48 | Let's take a look at the
Happy Valley Adventures.
| | 00:51 | This page has unique
take on Link Anchors.
| | 00:54 | When I click on Services, you'll see
that most of the page stays the same,
| | 00:58 | but the text itself
scrolls in the background.
| | 01:01 | It continues with About and Contact and
then we can go all the way back to the top.
| | 01:06 | If we want to do this manually
ourselves, we can just scroll.
| | 01:10 | Both of these webpages were
created with Muse and Link Anchors.
| | 01:14 | Let's jump back into Muse and learn
how to create Link Anchors for ourself.
| | 01:18 | Back in Muse, we'll go to
the Permanent Collection page
| | 01:21 | and here you can see that we've got
Photography, Paintings and Sculpture.
| | 01:25 | You'll see as I scroll down I have texts
and images associated with each section.
| | 01:29 | What I want to happen is
when I click on Photography,
| | 01:33 | it brings me to the Photography area,
Paintings bring me to the Painting area,
| | 01:37 | and Sculpture brings me
to the Sculpture section.
| | 01:39 | In order to link to those areas, I first
have to create a destination or an anchor.
| | 01:44 | There are a few different
ways that we can do this.
| | 01:46 | The easiest way is to go to your
Control bar and just click on the Anchor.
| | 01:49 | When you do this, your cursor
changes into a Link Anchor
| | 01:53 | and you can just click wherever
you want it to be on the page.
| | 01:56 | In this case, I'm going to put
it right next to Photography.
| | 01:58 | When I do this, I
have to give it a name.
| | 02:00 | So I'm going to call it Photography.
| | 02:04 | Now that I have that set, let's
scroll down and do another.
| | 02:07 | For Paintings, I'm going
to use the keyboard shortcut.
| | 02:09 | All I have to do is
press the letter A.
| | 02:12 | That will give me a Link
Anchor and I can just click.
| | 02:15 | We'll call this one Paintings.
| | 02:19 | And finally, for Sculpture, I'm
going to go to the Object menu
| | 02:23 | and choose Insert Link Anchor.
| | 02:25 | That will give me the same cursor and
then I'll click and call this Sculpture.
| | 02:29 | Now that I have my anchors set, let's go
back to the top of the page and link to them.
| | 02:33 | I'm going to select the text frame
Photography and go to my Hyperlink pull-down,
| | 02:37 |
and you can see right at the bottom, we
have all of the anchors that we just created.
| | 02:41 | So I'm going to link to Photography.
| | 02:43 | Next, we'll link Paintings to
Paintings and Sculpture to Sculpture.
| | 02:48 | Let's try it out and see how it looks.
| | 02:51 | So when I click on Paintings, you'll
see we'll scroll down to Paintings.
| | 02:55 | However, you'll notice a couple of problems.
| | 02:57 | First of all, Paintings is a little cut off
at the top, plus I have no way of getting back.
| | 03:02 | The navigation didn't come with me.
| | 03:04 | So let's solve this problem together.
| | 03:06 | We're going to go to Design.
| | 03:07 | You'll notice that the Photography
anchor is covering up the word Photography,
| | 03:12 | and that might be hard to read.
| | 03:13 | So if I like, I can move this further
to the left; that's not a problem.
| | 03:17 | I want this to be close enough to
photography without it being cut off
| | 03:20 | when I scroll to this in my web browser.
| | 03:22 | We'll repeat the process
with Paintings and Sculpture.
| | 03:26 | So now that I have that set,
let's preview again.
| | 03:33 | So when I click on Paintings, it scrolls
and I can comfortably read Paintings.
| | 03:37 | But we still have the problem
that the menus didn't come along.
| | 03:41 | Let's go back into Design
and try to solve that problem.
| | 03:44 | In an earlier movie,
we learned about pinning,
| | 03:46 | where we could position certain items on
the page regardless of how you scrolled.
| | 03:51 | That's what we're going to
do with our navigation system
| | 03:53 | that we created for Photography,
Paintings, and Sculpture.
| | 03:56 | I'm going to click and drag and select all
three of these, and in the Control panel,
| | 04:00 |
I'm going to pin it in the top-middle.
| | 04:01 | Now we're going to go to
Preview and test it out.
| | 04:05 | When I click on Paintings, we can see it
scrolls down, but our navigation system
| | 04:09 | is still here; the same thing
with Sculpture and Photography.
| | 04:14 | Now that we're testing this out,
I see one last little issue.
| | 04:17 | There's no way to go all the way
back to the top without scrolling.
| | 04:21 | Let's create a Hyperlink and a
Link Anchor to solve this problem.
| | 04:24 | We'll go back to Design mode and on this
page, I'm going to grab another Link Anchor
| | 04:29 |
and put it at the top of the page
and I'm going to call this Top.
| | 04:34 | Next, I'm going to select this text
frame, hold down my Option or Alt key
| | 04:38 | to drag a copy of it to put it lower,
and I'm going to rename this Back to Top.
| | 04:45 | Next, we'll change its color to something
a little different and I'll select the frame
| | 04:50 |
with my Selection tool and add the Link
Anchor to Top and we'll test it out.
| | 04:56 | In Preview mode, if I click to go down
to Sculpture, I can click on Back to Top
| | 05:01 | and now we're all the way back to the top.
| | 05:03 | Back in the Design mode, there is
one last tip I want to share with you.
| | 05:06 | After you've set your Link Anchors,
they may become distracting
| | 05:09 | because you don't need to edit them anymore,
and they just might get in the way
| | 05:12 | or you might accidentally move them.
| | 05:14 | If you would like to temporarily hide
them, you can go to View > Hide Anchors.
| | 05:20 | Now you don't have to worry about
seeing them on the page, or moving them.
| | 05:23 | If you need to edit them again, you can
always go back to View > Show Anchors.
| | 05:28 | Link Anchors are a great way to help people
find information in a deep and long site.
| | 05:33 | If you find yourself creating a page that
is very long, consider taking the time to
| | 05:37 | make Link Anchors to the content
and back to the top of the page.
| | Collapse this transcript |
|
|
10. Understanding States and Dynamic MenusUsing the States panel| 00:00 | On many web sites, you probably have
noticed buttons that change their
| | 00:03 | appearance when you roll
over and click on them.
| | 00:06 | This change in appearance is
also referred to as a state.
| | 00:10 | In this movie, we'll take a look at
changing the appearance of objects
| | 00:14 | in our site by using the States panel.
| | 00:16 | Let's go to the Home page and
we're going to go to Preview mode
| | 00:20 | to preview a finished button already.
| | 00:23 | As I mouse over the Upcoming Events
button, you'll notice that the color
| | 00:26 | of the background changes as well as
the color and the boldness of the text.
| | 00:30 | As I click, the text
will also become white,
| | 00:33 | and when I release, it goes
to the hyperlink destination.
| | 00:37 | Let's go back to the Design view
to learn how to do this ourselves.
| | 00:40 | Our first step is to
open the States panel.
| | 00:42 | If you don't have the States
panel open, go to Window > States.
| | 00:46 | I already have it open over here and
I'm just going to zoom in a little bit
| | 00:51 | to make this easier to see.
| | 00:52 | So I'm going to press Command+Plus
on the Mac or Ctrl+Plus on the PC.
| | 00:57 | When I select Upcoming Events, you'll
see in the States panel that there's
| | 01:01 | a Normal, Rollover,
Mousedown, and Active state.
| | 01:05 | Normal specifies the initial or
default appearance of the rectangle
| | 01:09 | when the web page loads in the browser,
| | 01:11 | Rollover is when you mouse over the
rectangle with your cursor in the web page,
| | 01:16 | Mousedown is when you're
clicking on the button itself,
| | 01:21 | and Active is the initial appearance
when you're on a particular page.
| | 01:25 | This option is reserved for menu
bar widgets and tap panel widgets.
| | 01:29 | Now let's set up these
states ourselves.
| | 01:32 | We're going to select Plan Your Visit.
| | 01:34 | You notice that the colored background
and text is already set correctly.
| | 01:38 | That's because this is
what we designed earlier
| | 01:40 | and this is what we want
the default appearance to be.
| | 01:43 | Next, we're going to
click on Rollover.
| | 01:44 | When we select Rollover
nothing really changes,
| | 01:47 | because we haven't
changed anything yet.
| | 01:50 | But what we're going to do is change
the background color of the frame.
| | 01:54 | At the Control Bar at
the top of the screen,
| | 01:55 | I'm going to click on the Fill color
and change it to a darker blue.
| | 02:00 | Next, I want to change
the color of the text.
| | 02:02 | So I'll make sure I have the Text panel open
and I'm going to change the color to black.
| | 02:08 | Next, I want my text to be bold,
so we'll press the Bold button.
| | 02:12 | After changing our
Rollover appearance,
| | 02:14 | let's go to Preview to make
sure it's working properly.
| | 02:17 | So we'll click on the Preview
button and as I roll over,
| | 02:22 | we can see it's working as expected.
| | 02:23 | We'll go back to Design
mode to finish it up.
| | 02:27 | Our next step is to
go to Mousedown.
| | 02:29 | On Mousedown, I want to change
the color of just the text.
| | 02:33 | I want the text to be white.
| | 02:34 | So I'm going to go to Text panel
and change the color to white.
| | 02:42 | With this change, we'll go back to
Preview mode and then try it out again.
| | 02:47 | My Rollover is working properly and
when I click, the color is changing.
| | 02:52 | Back in Design mode, I could edit Active
state, but it isn't necessary at this time.
| | 02:56 | In a later movie, we'll
learn all about active states.
| | 02:59 | If I don't want the change that I made
in the Mousedown state, I can press the
| | 03:03 | Trashcan in the States panel and that will
reset the state to its initial appearance.
| | 03:08 | Other than color changes, there
are other changes that we can try.
| | 03:11 | I'm going to select the Rollover state and
this time, I'm going to change the font.
| | 03:15 | We're going to go from
Arial to Courier New.
| | 03:20 | Next, I'll go to Effects
and we'll give it a shadow.
| | 03:24 | Now let's go to Preview
mode and see how it looks.
| | 03:26 | You'll notice as I roll over the
color, text, and effect is changing.
| | 03:33 | Any change in appearance that you can
do in Muse, you can also change in states.
| | 03:39 | One way to keep your states
consistent across your entire web site
| | 03:42 | is to use graphic styles.
| | 03:44 | Just save each state as a style, then
you can just apply it whenever you need.
| | 03:48 | It's a great way to save
time and keep things consistent.
| | 03:51 | If you find yourself spending a lot of
time creating buttons and working with
| | 03:54 | the States panel, you might want
to consider using Photoshop buttons.
| | 03:58 | By taking the time to build
the buttons in Photoshop,
| | 04:01 | it will make working
with States much easier.
| | 04:04 | In the next movie, we'll take a look
at working with Photoshop buttons.
| | Collapse this transcript |
| Importing a Photoshop button| 00:00 | If you plan on creating buttons with
multiple states in Muse, it can be tedious
| | 00:04 | to get them working just right.
| | 00:07 | Rather than spend your time in Muse
tweaking the appearance of each state,
| | 00:10 | is possible to use properly
prepared Photoshop files to streamline your
| | 00:15 | button-making experience.
| | 00:16 | Let's go to the homepage and on the
homepage, if I select Upcoming Events, you'll
| | 00:23 | notice that I have the states,
Normal, Rollover, and Mouse Down.
| | 00:26 | While I did create this inside Muse,
| | 00:29 | I could replicate this
experience inside Photoshop if necessary.
| | 00:33 | In fact, sometimes it's easier to do
this in Photoshop, because you have access
| | 00:37 | to more graphic effects.
| | 00:39 | Let's jump over to
Photoshop and take a look at a file.
| | 00:41 | I have psd_button open right now, and
you will notice that it has four different
| | 00:46 | layers: Normal, Over, Down, and Active.
| | 00:50 | Your layers don't have to have these
exact names, but it makes it easier to manage.
| | 00:54 | Now you notice, as I turn each layer off,
I will be able to see the underlying layer.
| | 01:00 | For now, I am going to leave all of them on.
| | 01:03 | Let's go back into Muse
and try placing this file.
| | 01:06 | Back inside Muse, if I try to place this
the normal way, by going to File > Place
| | 01:11 | or Command or Ctrl+D, I am going to
browse to that particular file, we will grab
| | 01:18 | psd_button, and in the Image Import
Options, I can bring a composite of everything
| | 01:26 | or just a particular layer.
| | 01:28 | Although, once it's in here,
each state is exactly the same.
| | 01:34 | What I want to do is map each layer in
Photoshop to a particular state inside Muse.
| | 01:40 | So placing a PSD file normally
isn't the route that we want to go.
| | 01:43 | So I am going to delete this
and go back to the File menu.
| | 01:46 | This time instead of going to
File > Place, I am going to go to File >
| | 01:50 | Place Photoshop Button.
| | 01:52 | I could also use the keyboard shortcut
Command+B on the Mac, or Ctrl+B on the PC.
| | 01:56 | You'll notice as I am looking for this
image, everything is grayed out except
| | 02:03 | for PSD files. That's because this
technique will only work with PSD files.
| | 02:07 | I will select psd_button and press Select.
| | 02:13 | This time in the Photoshop Import
Options dialog, it looks a little different.
| | 02:17 | I have four different states to
choose from, the Normal, Rollover, Down, and
| | 02:22 | Active state, and I can choose which
Photoshop layer I want to appear in
| | 02:26 | that particular state.
| | 02:28 | Because I had all four layers set up in
the correct order in Photoshop, I really
| | 02:32 | don't have to change anything here, but
if I wanted to, I could override their
| | 02:36 | appearance in this dialog box.
| | 02:38 | But for now, I'm going to
keep it the way that it is.
| | 02:42 | We'll press OK and with my loaded cursor,
I will click and put it on the page.
| | 02:49 | After lining it up, you will notice
that in my States panel all the states
| | 02:53 | are properly mapped.
| | 02:54 | We have Normal, Rollover, Mouse Down, and Active.
| | 03:00 | Let's go into Preview
mode and make sure it works.
| | 03:08 | Excellent!
| | 03:11 | Back in Design mode, there are a
couple of other changes I want you to be aware of.
| | 03:15 | If I change my mind and I would like to
use a different layer from the PSD file
| | 03:19 | for this particular state, there really
is no way around it, outside of deleting
| | 03:23 | this image and then reimporting it again.
| | 03:26 | However, there are few
other changes that I can do.
| | 03:31 | One operation that you can do is go to
the Assets panel. In the Assets panel,
| | 03:36 | browse and find that image.
| | 03:38 | I will open up the Asset panel so
you can see this a little larger.
| | 03:41 | You will notice that the PSD button is
linked four times, one for each state.
| | 03:46 | If I wanted to, I could re-link one of these
images to a different image. So let's try this.
| | 03:51 | I am going to select PSD button for the
Over state, right-click, and choose Relink.
| | 03:57 | Now I am going to choose bird-watching.
| | 04:05 | You will notice that that
state's image was swapped out.
| | 04:08 | If I go back into Preview mode, you'll
notice that the rollover is working as expected.
| | 04:16 | What's happening here is the background
image of the frame is being swapped out
| | 04:20 | from the PSD button to the image of the bird.
| | 04:23 | Even though you will be using PSD files,
you won't end up using them in your final export;
| | 04:29 | in fact, Muse is smart enough to
automatically convert your placed PSD files
| | 04:33 | into JPEGs as needed.
| | 04:35 | However, it is still a good idea to make
your PSD buttons 72dpi and crop them to
| | 04:41 | the smallest size possible.
| | Collapse this transcript |
| Creating menus| 00:00 | If you're going to be creating a
web site with more than one page,
| | 00:03 | it's critical to build a
menu or navigation system,
| | 00:06 | to let users go back and
forth between the pages.
| | 00:09 | While it would be possible to manually
create a hyperlink to each page,
| | 00:13 | there's a much more efficient
way to do this inside Muse.
| | 00:17 | By using widgets, you can build menus based
on the names of each page automatically.
| | 00:22 | Right now, we're in the Plan mode of Muse,
| | 00:24 | where we're taking a look at all
of the pages inside this site.
| | 00:27 | We've got a Home, Collections, About Us,
Volunteer and Contact Us page for our main pages.
| | 00:33 | And I'd like to have a navigation system that
automatically goes to each of these pages.
| | 00:38 | In the Plan view we have an
overview of our entire web site,
| | 00:41 | and our main pages are Home, Collections,
About Us, Volunteer and Contact Us.
| | 00:48 | Each of these are pages that I would
like to link to in our navigation system.
| | 00:52 | Now, we could build these manually,
but there's a much better way to do it.
| | 00:56 | What we're going to do is go to the
Master page, because if we put something
| | 01:00 | on the Master page, it shows up
automatically on every single page.
| | 01:04 | So we're going to go down,
and double-click on A-Master.
| | 01:09 | On the Master page, we first have
to open the Widget Library panel.
| | 01:13 | If you don't have it open,
go to Window > Widget Library.
| | 01:18 | The Widget Library contains many different
widgets that we can use in our web site.
| | 01:22 | Widgets are objects that contain
special forms of interactivity
| | 01:25 | that let you do interesting
things on a web site.
| | 01:27 | We'll learn more about
widgets in the next chapter.
| | 01:30 | For now, we're going to under menus,
and we're going to select Horizontal
| | 01:34 | and drag it to our Desktop.
| | 01:36 | Now that we have this widget out, I'm
going to collapse my tool panel because
| | 01:39 | I don't need it right now.
| | 01:40 | You'll notice that my menu
structure is already built.
| | 01:44 | It has Home, Collections, About Us,
Volunteer and Contact Us.
| | 01:49 | These were built dynamically because
they're the names of each page in my site.
| | 01:53 | In fact, if I make any changes to the
site, my menu will update automatically.
| | 01:58 | If you don't believe me,
let's try ourselves.
| | 02:00 | We're going to go to the Plan view and
we're going to add an additional page.
| | 02:06 | Next to Collections, I'm going to
click and we're going to type in Temp.
| | 02:09 | This will be a temporary page.
| | 02:13 | Let's go back to A-Master
and see what happened.
| | 02:16 | Sure enough, right next to
Collections is the Temp page.
| | 02:19 | If I decided to reorder these,
the menu will update too.
| | 02:23 | Back in the Plan view, I'm going to grab
Temp and put it to the left of the Home page.
| | 02:29 | Back on the Master, we can
see it's been updated again.
| | 02:32 | Well, what happens if we decide that we
really like the Temp page because we just
| | 02:36 | want to use this as a temporary pasteboard
or just for messing around with a design.
| | 02:40 | We might want the Temp
page in our web site,
| | 02:43 | but we don't want it based
in our navigation system.
| | 02:46 | So to fix that, we're going to go back
to the Plan view and I'll right-click
| | 02:49 | on the Temp page, and I'm going to go down
to menu Options, and I'm going to choose
| | 02:54 | Exclude Page From menus.
| | 02:57 | Now that I've this set, when
I go back to the A-Master,
| | 03:00 | you can see it's no longer included.
| | 03:03 | Now that we understand how the menu is built,
let's go to Preview mode and test it out.
| | 03:09 | In Preview mode, when I roll over each section,
you'll see we get this default gray box.
| | 03:14 | We're not going to worry about the appearance
right now, because we'll go over this
| | 03:17 | in more detail in the next movie.
Let's click on the Home page.
| | 03:21 | On the Home page, we'll see a gray
rectangle behind Home; that lets us know
| | 03:25 | we're on this page, even when
we're not mousing over the button.
| | 03:29 | As I mouse over to the other buttons,
and I click there, you'll see that the
| | 03:32 | dark rectangle appears when
I'm on that particular page.
| | 03:35 | You'll notice when I go
over to the Collections page,
| | 03:39 | I can only go to the
main Collections page.
| | 03:42 | I don't have a way of
going to the sub pages.
| | 03:44 | What we need to do is change the
options to let me have a drop-down menu.
| | 03:49 | Back in the Design mode, I'm going
to click on the blue fly-out menu
| | 03:53 | to get some options for this widget.
| | 03:55 | Inside the Options, I'm going to change
the menu Type to include All Pages.
| | 04:00 | When I do this, you'll see we'll get
Current Exhibits, Permanent Collection
| | 04:05 | and Upcoming Exhibits available.
| | 04:07 | Let's go back into Preview
mode and check this out.
| | 04:09 | As you can see, right now we have
Collections with a little triangle,
| | 04:13 | letting me know that
there's a dropdown menu.
| | 04:15 | As I mouse over, I can mouse
down and choose the correct page.
| | 04:22 | Back in Design mode, let's take a look at
how we can create a different type of menu.
| | 04:25 | We'll open up our panels again,
back in the Widget Library panel,
| | 04:31 | I'm going to click and drag out
the vertical menu onto the page.
| | 04:34 | You'll see it has the same information
as the menu bar at the top,
| | 04:37 | except for it's displayed
in a different fashion.
| | 04:40 | So if you want to use a different
type of navigation system,
| | 04:42 | you could use this type of widget.
| | 04:44 | Using menus to build your navigation
system is a pretty easy decision.
| | 04:48 | You really just want to use it.
| | 04:50 | In the next movie, we'll take a look at
how we can modify the various settings
| | 04:53 | of these menus, to help you make it
look exactly the way that you want.
| | Collapse this transcript |
| Modifying menus| 00:00 | After creating a menu with widgets,
you'll probably want to make modifications
| | 00:05 | in order to have it match
the design of your site.
| | 00:08 | In this movie, we'll take a look
at what changes are possible
| | 00:11 | and the best way to implement them.
| | 00:14 | Let's go back to the A-Master
and take a look at our widget.
| | 00:17 | Right now looking at this
menu, it seems a little tight
| | 00:21 | and I'd like to make
it a little wider.
| | 00:23 | Unfortunately, when you try to grab the
edge, it won't let you click and drag
| | 00:27 | and resize, which can seem kind of annoying.
| | 00:29 | So what we're going to do is click on
the fly-out menu and change Item Size
| | 00:34 | from Fit Width to Uniform Width.
| | 00:36 | As soon as we do this, when
we deselect and go back,
| | 00:40 |
we can click and drag
to make this wider.
| | 00:43 | In fact, to make this a
little easier to work with,
| | 00:45 | I'm going to zoom out by pressing
Command+Minus or Ctrl+Minus.
| | 00:47 | Now I'm going to click and
drag and make this quite wide.
| | 00:52 | There we are; that looks better.
| | 00:54 | Now that this is the width that I like, I
want to make changes to the menus themselves.
| | 00:58 | When we go to Preview mode, you'll notice
that we have these gray boxes that appear.
| | 01:03 | Although it's fine when we're
starting to prototype a site,
| | 01:06 | I really don't want this
look in my final layout.
| | 01:09 | So we need to make a few changes.
| | 01:10 | Let's go back into Design mode.
| | 01:12 | I'm going to go back to this widget and
click slowly until I have just Home selected.
| | 01:18 | Rather than manually changing each
button to my own specifications,
| | 01:23 | it's a lot easier if I go into this menu
and make sure I have Edit Together checked.
| | 01:28 | This way I only have to
make the change once
| | 01:30 | and every single other widget
will be updated automatically.
| | 01:36 | If you click too far, just
deselect and slowly click again
| | 01:39 | until you have the part of the
widget selected that you want.
| | 01:42 | In this case, I have the menu Item selected
and you can tell it's the menu Item
| | 01:47 | by looking in the upper left-hand corner.
| | 01:50 | With this item selected, I'm
going to go over to my Text panel
| | 01:53 | and I'll keep the font Helvetica, but I'm
going to increase the size up to 17 points.
| | 01:58 | Next, I'm going to change the
Color from black to a nice light gray.
| | 02:05 | There that's looking better.
| | 02:07 | The next step is to get rid
of that ugly gray rollover.
| | 02:10 | Now in order to get rid of a rollover,
we have to go to our States panel.
| | 02:14 | In our States panel when I click on Rollover,
we'll see where the gray box was coming from.
| | 02:20 | Now you might be tempted to click
the Trashcan to get rid of it,
| | 02:24 | and in fact you could do
that and it would remove it.
| | 02:27 | Unfortunately, when you
move a state this way,
| | 02:29 | it won't affect every
other widget at the top.
| | 02:32 | So what we have to do is go to the
Fill option at the top of our screen
| | 02:36 | and change it to None.
| | 02:37 | When we do it this way, every
other menu widget at the top
| | 02:41 | will be updated automatically.
| | 02:43 | While I'm on the Rollover state,
I'm going to go to the Text panel
| | 02:47 | and change the color of
the text to this blue.
| | 02:52 | Next, I'll go to the Mouse
Down state and remove the Fill.
| | 02:55 | I'll keep the color
the same for the Text.
| | 02:59 | Finally, I'll select the Active state and
remove the Fill and give it a nice darker blue.
| | 03:09 | Now let's go to Preview and check.
| | 03:12 | Right now in Preview mode,
we're on the Master page.
| | 03:15 | On the Master page,
when I mouse over Home
| | 03:18 | you'll notice that the Home
button changes to a slight blue.
| | 03:22 | When I click, it will bring us to the
home page and when I'm not on the text,
| | 03:26 | it'll be a nice darker blue.
| | 03:28 | As I mouse over, you'll
notice the subtle change.
| | 03:32 | Let's go back to Design mode
and finish up the design.
| | 03:36 | The next step that I'd like to do is put a
little separation between the Text menus.
| | 03:41 | So what I'm going to do
is with Home selected,
| | 03:43 | I'm going to go to the top of the
screen and go to the Stroke panel,
| | 03:47 | break the link and give it a 1 point
stroke on the right-hand side.
| | 03:52 | That way we have a
nice separation bar.
| | 03:54 | Now that's looking a little dark.
| | 03:56 | So we're going to go to the Color and we're
going to change the color to a nice dark gray.
| | 04:00 | That's a little more subtle of a
color and I think it looks better.
| | 04:04 | If we go to Preview mode, we
can see what it looks like.
| | 04:07 | That's looking pretty good.
| | 04:10 | Back in Design mode, I don't like the gray
bar that's on the right-hand side of Contact Us.
| | 04:14 | So I'm going to go over to Contact Us and
click slowly until I select that menu item.
| | 04:20 | Next, I want to remove the color on
the right-hand side, but if I were to
| | 04:24 | remove the color from the right-hand side of
the stroke, it would remove it on all of them.
| | 04:29 | So what I need to do is turn off Edit Together.
| | 04:33 | With that off I can go
to the top of the screen
| | 04:36 | and go to Stroke and remove
it on the right-hand side.
| | 04:41 | With that done, I'll go to Preview
mode and check one more time.
| | 04:44 | Alright, that looks pretty good.
| | 04:46 | Back in Design mode, we still want to
add our dropdown menu for Collections.
| | 04:51 | So I'm going to select the menu widget.
| | 04:53 | Go to the panel menu and
turn on menu Type > All Pages.
| | 04:58 | With this turned on, I'll get
all of the dropdown menus,
| | 05:01 | but when I go in Preview mode, it
doesn't match the rest of my menu.
| | 05:04 | I need to make a few more changes.
| | 05:07 | The first thing we have to do is get
rid of the ugly box that's on each state.
| | 05:11 | So back in Design mode, I'm going to
slowly click until I select the first item.
| | 05:15 | I'll go into the Panel menu
and turn Edit Together back on.
| | 05:21 | Next, I'm going to go to the Stroke
and remove the Stroke and the Fill.
| | 05:26 | Then I'm going to go to each
state and repeat the process.
| | 05:32 | I'll make sure there is
not a Stroke or a Fill.
| | 05:39 | Next, I don't want the text aligned center,
I would prefer to have it left-aligned.
| | 05:44 | So select the text and align it to the left.
| | 05:48 | Then I'll put a left indent to move the
text so it's lined up to Collections.
| | 05:52 | Now with that finished, I'll go
to Preview and I'll check it out.
| | 06:02 | There we go, it's looking
exactly the way that I want.
| | 06:05 | If you'd like to complete the menu, you
could select the submenu and change the
| | 06:09 | design of each state to
match the design above.
| | 06:12 | Working with menus can seem tricky
at first, but don't give up.
| | 06:16 | Once you have your menu designed, it will
be much easier to make changes in the future.
| | 06:21 | Using Muse's built-in Automation features
| | 06:23 | can really end up being a
big timesaver down the road.
| | Collapse this transcript |
|
|
11. Widgets, Slideshows, and FormsUnderstanding widgets| 00:00 | Muse has a large collection of widgets that
help you create interactivity on your site.
| | 00:05 | In this chapter, we'll take a look at some of
these widgets and learn how to customize them.
| | 00:09 | But before we begin, we should first
understand, what exactly is a widget?
| | 00:13 | Widgets are building blocks of interactivity.
| | 00:16 | In the past, if you wanted to have
interactivity, you probably relied on Flash,
| | 00:20 | but today we're able to build this
interactivity by using widgets.
| | 00:25 | They're customizable for
a wide variety of needs,
| | 00:27 | including compositions, menus,
panels, and even slideshows.
| | 00:32 | And best of all, they're
a lot of fun to use.
| | 00:35 | Widgets are based off of jQuery. jQuery
is a combination of JavaScript and CSS.
| | 00:41 | It's now an industry standard
for interactivity on Web pages.
| | 00:45 | And the best part of all is there's
no need to write any code at all;
| | 00:48 | you can just drag and drop
directly from the menu.
| | 00:51 | Let's take a look at some examples of jQuery
and Widgets in use today on web sites.
| | 00:56 | The first example, I want
to show you is a slideshow.
| | 01:00 | So we can see on this page I've
got a couple of buttons right here
| | 01:03 | where I can click and we have a banner ad
just fade in between each of these images.
| | 01:09 | I can just click to go to any
particular one that I like,
| | 01:12 | and if I'm not clicking it will slowly
fade from time to time between the images.
| | 01:16 | Our next site has a different type of
slideshow, if I click on one of these,
| | 01:21 | we'll have a white box pop-up where
the background is dimmed out
| | 01:24 | and I can just focus on this image.
| | 01:26 | Then I can click through the slideshow
to get to any image that I like.
| | 01:30 | When I'm done, I'll just click off
to the side and be back to the page.
| | 01:33 | Here is another example; when I
click here we can see the images
| | 01:38 | and it slowly slides
nicely from image to image.
| | 01:41 | And here's a nice little x you
can click to close the slideshow.
| | 01:46 | Another type of widget
is the Accordion Widget.
| | 01:49 | This allows me to click to expand and
close varying degrees of information.
| | 01:53 | We can see inside each of these, is
a combination of text and pictures.
| | 01:57 | In fact, we can even put other
interactivity inside these,
| | 02:00 | such as YouTube videos
or even other widgets.
| | 02:03 | And here's one final example
of widgets in action.
| | 02:06 | When I click on this we even have
other buttons to go to other areas.
| | 02:11 | Now that we have a better understanding
of widgets, we can learn how to modify
| | 02:14 | them to create fun and interesting
interactivity on our web site.
| | 02:19 | In the next movie we'll take a
look at the Accordion Widget.
| | Collapse this transcript |
| Building an accordion panel| 00:00 | Muse has a large collection of widgets that
help you create interactivity on your site.
| | 00:05 | In this chapter we'll take a look at some of
these widgets and learn how to customize them.
| | 00:10 | The first widget that we're going
to look at is the Accordion Widget.
| | 00:13 | We're going to begin by going to the
About Us page, and on the About Us page
| | 00:18 | we'll open up our Widgets Library.
| | 00:20 | Inside the Widgets Library open up the
panels area and we're going to click
| | 00:24 | and drag out the Accordion panel.
| | 00:27 | With the Accordion panel on the page,
we can see it says Lorem 1 and Ipsum 2.
| | 00:31 | We're actually going to hit this little
Plus (+) to add one more for Ipsum 3.
| | 00:36 | Now that we have these three panels
set, when we click on each of them,
| | 00:39 | we can see how they expand and contract,
| | 00:42 | but it's quite jerky when this happens.
| | 00:44 | So we're going to switch to Preview
mode and see how it would look online.
| | 00:48 | In Preview mode when I mouse over these,
you can there is a nice rollover effect,
| | 00:53 |
and when I click they smooth gracefully.
| | 00:56 | For now we're going to go back to the Design
mode and we're going to add some more content.
| | 01:01 | You can place practically
anything inside these menus.
| | 01:04 | We're going to begin by
bringing in some text.
| | 01:06 | We'll go to File > Place, and in our Assets
folder I'm going to grab accordion.txt.
| | 01:13 | Next, I'll click and drag
and place this on the page.
| | 01:17 | I'm going to cut and paste
the header into each section.
| | 01:19 | So there's Volunteers Needed;
I'll get rid of that extra return.
| | 01:23 | New Cafe menu will replace Ipsum 2,
and Family Programs will replace Ipsum 3.
| | 01:33 | Now when I pasted in Volunteers
Needed it brought an extra return
| | 01:37 | and made that area a little larger.
| | 01:38 | So I'm just going to grab the Selection
tool and make this a little smaller,
| | 01:41 | so it's the same size as everything else.
| | 01:44 | Next I want to add the rest of
the content to these widgets.
| | 01:46 | So I'm going to triple-click to select
this paragraph, and cut it to the Clipboard.
| | 01:51 | Next with my Selection tool, I'm going to
click slowly until I grab the container
| | 01:55 | of this widget and then I'll paste it in.
| | 01:58 | As you can see it comes in as its own
text frame inside this area of the widget.
| | 02:02 | I'll use my Arrow keys to fine-
tune its location and its size.
| | 02:06 | Next I'll go to my Paragraph Styles
and apply I'll the P paragraph style.
| | 02:11 | Once I have the size that I like,
I'm going to select the container
| | 02:16 | and make it a little
smaller so it fits snug.
| | 02:18 | Finally to make the text
a little more readable,
| | 02:20 | I'm going to change
the Fill color to white.
| | 02:24 | Let's repeat the process
with the other two.
| | 02:27 | We'll cut this paragraph and then we'll drill
down into the New Cafe menu, and paste it in.
| | 02:32 | You'll notice that the background
of the New Cafe menu is also white.
| | 02:36 | That's because Edit Together
was on by default for this widget.
| | 02:39 | I'll change this to paragraph style P,
resize and make sure everything fits good,
| | 02:44 | then I'll repeat it with the last one.
| | 02:47 | Let's preview and see how this looks.
| | 02:50 | In Preview mode everything seems to be
working well, but it needs a little color.
| | 02:54 | So let's go back into Design
mode and change the color.
| | 02:58 | I'm going to click slowly until I select
the container of Volunteers Needed.
| | 03:03 | Next I'll go into the panel
menu and turn off Edit Together.
| | 03:06 | This way I can change the color of just
this frame, without affecting the others.
| | 03:10 | I'm going to open up my States
panel and select the Normal state
| | 03:18 | Next I'm going to open up my Text panel
and change the color of the text to black.
| | 03:24 | When I switch to the Rollover state, I'm
going to change the color to a dark blue.
| | 03:29 | The Mouse Down is fine and I'm not
going to worry about the Active state.
| | 03:32 | Now let's repeat this process for
the next two, and now let's preview it.
| | 03:38 | In Preview mode the Rollover
seem to be working correctly.
| | 03:41 | However, when I click on
something and I try to rollover,
| | 03:45 | I'm not seeing the effect that I like.
| | 03:45 | and then I'll go to Fill and I'm
going to choose a light blue.
| | 03:47 | So what I need to do is go back into
Design mode and add the Active state.
| | 03:51 | For the Active state I'm going to put the
same dark color as Rollover and Mouse Down,
| | 03:55 | and then I'm going to repeat
the process for the others.
| | 04:00 | There is the dark green,
and finally the dark blue.
| | 04:05 | Now let's try it out.
| | 04:07 | Here we are, the Rollover is
working, and when I click on it,
| | 04:11 | I'm on that particular widget.
| | 04:13 | That's what I expected it to be.
| | 04:15 | One final change that we have is back
in the Design mode I'm going to go to the
| | 04:19 | panel menu and we have an option called
Can Close All and Close All Initially.
| | 04:24 | With both these turned
on, when I go to Preview,
| | 04:27 | you see that they'll
all be closed initially.
| | 04:29 | But when I happen to click
on any of them, it will open up.
| | 04:32 | But if I want to close all of them,
I just click on the top one again
| | 04:35 | and they all become closed.
| | 04:37 | As you can see the Accordion
panel is quite useful,
| | 04:40 | and lets you put practically
anything inside it.
| | 04:42 | In addition to text you can
put images, other widgets,
| | 04:46 | HTML or even a Google map,
or a YouTube video.
| | Collapse this transcript |
| Setting up a tabbed panel| 00:00 | If you have a large amount of information
to share and a small amount of space,
| | 00:04 | you might want to consider
using a Tabbed panel.
| | 00:07 | This widget contains several panes that
overlap and when you click on that tab,
| | 00:12 | that information is displayed.
| | 00:15 | Let's go to the Widget Library panel
and in the panels area I'm going to click
| | 00:19 | and drag Tabbed panels onto the page.
| | 00:23 | Next, I'm going to click and drag to
open this up because we're going to put
| | 00:26 | a lot of information in here.
| | 00:28 | While this is open, let's go to the Preview
panel and make sure it's working correctly.
| | 00:33 | You'll notice that the Lorem 1 tab is
highlighted because we're in that area.
| | 00:37 | When I click on Ipsum 2, that tab
becomes highlighted, and Dolor 3.
| | 00:42 | Back in Design mode, I'm going to put
the Photography information in Lorem 1,
| | 00:46 | the Paintings information in the second tab,
and the Sculpture information in the third tab.
| | 00:51 | Let's begin by selecting the Photography text
and holding the Shift key to grab the image,
| | 00:57 |
and pressing Command+X on the Mac or Ctrl+X
on the PC to cut them to the Clipboard.
| | 01:02 | Now we'll go over to the widget
and slowly click until we have
| | 01:05 | the bottom container selected.
| | 01:06 | We'll press Command+V on the Mac or
Ctrl+V on the PC to paste them in.
| | 01:10 | You'll notice that the widget became
wider once we've pasted our information in.
| | 01:14 | That's because our information
was wider than the widget.
| | 01:17 | Widgets are smart because they will
expand as needed when you add content.
| | 01:20 | Now let's continue the operation
for the other two areas.
| | 01:23 | I'll get rid of this extra information
because I don't need it,
| | 01:27 | and then I'll select these two
items, cut it to the Clipboard,
| | 01:30 | go to the second page item, select
the container and then paste it in.
| | 01:35 | Then finally, we'll grab the last two, go
to Dolor 3, select the container and paste.
| | 01:42 | Now that I have everything set up
correctly, let's go to the Preview panel
| | 01:45 | and make sure it's working.
| | 01:48 | As I click on each tab, we can
see it switches to that information.
| | 01:52 | As you can see, we can fit a lot
more information in a smaller area
| | 01:55 |
with a Tabbed panel, but right now it
doesn't match the appearance of our site.
| | 02:00 | Let's go back and fix that.
| | 02:01 | Back in Design mode, I'm going to get rid
of this extra object by hitting Delete,
| | 02:05 |
and we're going to go to Lorem 1
and click slowly to grab the top item.
| | 02:09 | I'm going to keep clicking
until I'm able to select the text,
| | 02:13 | then I'll type in Photography.
| | 02:17 | Next, I'll click off and then
slowly click again until
| | 02:20 | I just have that container selected.
| | 02:22 | I want to change the color of this so
it matches the text below Photography.
| | 02:26 | I'd like to make it green.
| | 02:27 | I'm going to go over to the States panel
and make sure I'm on the Normal state.
| | 02:32 | On the Normal state I'm going to go to the
Fill and change it from Gradient to Solid.
| | 02:37 | Next, I'll change the change
the color to a light green.
| | 02:40 | You will notice as I change the color
of this tab, the other tabs change too;
| | 02:44 | that's because Edit Together is turned on.
| | 02:46 | I'm going to go to the panel
menu and turn off Edit Together.
| | 02:51 | If you click too far, just
hit Escape to go back out.
| | 02:54 | I'll make sure I have the Normal tab selected
and next I'm going to change the color of the
| | 02:57 |
text to black, so it's a little more readable.
| | 03:01 | Let's go down to Rollover and
change its color to a dark green.
| | 03:05 | I want Mouse Down to be
the same as well as Active.
| | 03:13 | Next, I'm going to click to select
the container in the background,
| | 03:16 | switch to the Normal state and
give it the same light green.
| | 03:21 | Now that I have that set, let's
change the appearance of this area.
| | 03:24 | I'm going to resize this text
frame, so it's a little larger
| | 03:27 | and I'm going to put
it down at the bottom.
| | 03:29 | Next, I'm going to hold down my
Command or Ctrl key on the PC
| | 03:32 | to resize this graphic frame
so it fits a little nicer.
| | 03:35 | I'll right-click, choose Fitting
and choose Fill Frame Proportionally.
| | 03:39 | If I need to crop a little more, I'll just
continue to hold down the Command key.
| | 03:45 | There we are; that looks good.
| | 03:47 | Next, we'll go to Ipsum 2 and we'll start
to make some more changes in this tab.
| | 03:51 | I'm going to grab the top tab
and change the text to Paintings.
| | 03:55 | I'll press the Escape key
to select the container
| | 03:59 | and I'm going to change
the Fill to a darker blue.
| | 04:02 | Next, I'll go to the Normal state
and change it to a lighter blue.
| | 04:07 | On the Rollover state, I'll
be adding the darker blue.
| | 04:09 | I'm just going to be repeating the
process that I did with the other tabs.
| | 04:13 | Next, I'll grab the background
container, go to the Normal state
| | 04:16 | and change the Fill
to the light blue.
| | 04:18 | I'll resize everything so it fits
nicely by holding the Command key,
| | 04:26 | right-click and Fill the Frame Proportionally.
There we go; that looks better.
| | 04:31 | Now if we preview, you can see as we go between
each tab, everything changes according to plan.
| | 04:38 | Next, we'll repeat the
process for the third tab.
| | 04:41 | Now that the tabs are complete, it'd be
nice to add a little something extra
| | 04:45 | to make it stand out from a normal tab.
| | 04:46 | What we're going to do is go
back to the Photography tab.
| | 04:49 | I'm going to deselect and go to File > Place.
| | 04:53 | In the Place dialog, I'll go to the
Assets panel and I'm going to go
| | 04:57 | and choose arrow-photography.
| | 05:00 | After I place this on the page, it
looks like it's the same color as
| | 05:03 | the Photography tab;
well that's by design.
| | 05:05 | I'm going to cut this to the Clipboard
and then I'm going to click slowly
| | 05:09 | to grab the background
container and paste it in.
| | 05:12 | Now I'm going to click and drag and
put it right underneath the tab.
| | 05:15 | I'll use my arrow
keys to fine-tune it.
| | 05:17 | Now, when we go to Preview mode, we'll
see the tab there when it's available.
| | 05:22 | When I click on Painting,
it will disappear.
| | 05:24 | Now let's repeat the process
for the other two tabs.
| | 05:27 | Back in the Design mode, I'll press
Command+D on the Mac or Ctrl+D on the PC
| | 05:31 | and we're going to select arrow-painting,
| | 05:35 | hold down our Command or Ctrl key,
and select Sculpture.
| | 05:39 | With my bulleted cursor, I'll just
click twice to put them on the page.
| | 05:43 | Then I'm going to click to switch the
Paintings tab, select the painting graphic,
| | 05:47 | cut it to the Clipboard, select the
background and then paste it in.
| | 05:52 | Now at this point I notice
that I actually made a mistake.
| | 05:55 | I made the tab in the background
with a wrong color and we can't see it.
| | 05:58 | So what I'm going to do is just select
the background and I'm going to change
| | 06:01 | the Fill to a lighter blue.
| | 06:04 | Next I'm going to select the top tab
and change its color to the same blue
| | 06:08 | as the other adornment.
| | 06:09 | I'm going to repeat the
process for the other states,
| | 06:13 | and then the normal state
needs to be a lighter blue.
| | 06:15 | We'll use our Arrow keys to line this
up and then we'll repeat the process by
| | 06:21 | cutting and pasting one
last time for Sculpture.
| | 06:26 | Now that this is done, we'll go to
Preview mode and see how it looks.
| | 06:30 | Photography has a tab, Paintings
has a tab, and Sculpture has a tab.
| | 06:34 | Remember that you can add any
content at all to each of the tabs,
| | 06:38 | just like you can with
the Accordion Widget.
| | 06:40 | Be sure to make the tabs at the top
stand out from the content below
| | 06:44 | so the user visiting your site is
able to navigate the tabs easily.
| | Collapse this transcript |
| Creating pop-up tooltips| 00:00 | One of my favorite widgets is the tooltip.
| | 00:04 | This widget lets you set a hotspot to
reveal one area that was previously hidden.
| | 00:09 | Let's take a look at how we
can add one to our website.
| | 00:13 | We'll go to the tooltip page and on this
page, I'm going to open up the Widget Gallery,
| | 00:17 | so let's move this out if the way.
And I'm just going to drag out tooltips.
| | 00:21 | I'm going to close this panel because I don't
need it anymore and we'll just stick this over here.
| | 00:28 | But before we start to edit this widget,
I'm just going to put this in the center of our
| | 00:31 | page and we're going to go into
Preview mode to see how it works.
| | 00:36 | You notice to begin with that we don't see
the big tooltip box with text in the picture.
| | 00:41 | All we happen to see are
three small gray circles.
| | 00:44 | But when I mouse over one of
these, that tooltip will pop up.
| | 00:48 | If I mouse over the next one, you'll see it's at a
different location, and the same is true with the third.
| | 00:54 | Now that we understand how this tooltip functions,
let's break it apart and make it work with our design.
| | 01:01 | Back in the Design mode, I'm going to
deselect and I'm going to bring in a text file that
| | 01:04 | has the text that we need.
| | 01:05 | So we're going to go to File > Place or Command+D
or Ctrl+D on the PC and inside our Assets folder,
| | 01:12 | I'm going to look for tooltips.
| | 01:17 | There were go, tooltips.txt.
| | 01:18 | I'll click Open and we'll just put
this over on the right hand side.
| | 01:22 | Next, we need to remove the elements we
don't need. So for this first tooltip, we're just
| | 01:27 | going to slowly click down until we have the
image selected. And we'll just hit the Delete
| | 01:31 | key because we don't need it.
| | 01:33 | Next, we'll get rid of the small text, because
that isn't needed, and I'm just going to come
| | 01:37 | over here and cut this text and paste it in
here. So we have the "Roof painted white to
| | 01:44 | reduce cooling costs."
| | 01:46 | I'll just resize this to make this a little
smaller, and we'll make that match nicely. There we go.
| | 01:52 | That looks pretty good.
| | 01:54 | Now, because this tooltip is referring to
the roof, I'm just going to slowly click down
| | 01:58 | to select it, and then I'll just stick it right here.
And I want the hotspot or the trigger to be on the roof,
| | 02:04 | so we're just going to click and drag and
make this a little bigger to cover the roof area.
| | 02:10 | Now let's repeat the process for the rest.
| | 02:13 | When I click on the second one, you can
see that it switches to the next tooltip.
| | 02:17 | Let's scroll down here.
| | 02:19 | We're going to repeat the process.
We're going to get rid of this picture which we don't
| | 02:22 | need, we'll get rid of the bottom text, and
then we'll select the text here, the Wall
| | 02:28 | built, cut it, and we'll paste it in.
| | 02:32 | We'll resize this so it looks a little better,
and we're going to put this text right over
| | 02:40 | here, and we're going to have the
tooltip be the size of the wall.
| | 02:48 | For the third one, this is
going to be for a canopy.
| | 02:51 | We'll just stick this right here, get rid
of the elements we don't need, and we'll cut
| | 02:58 | and paste the text in. There we go.
| | 03:03 | This is looking much better.
| | 03:05 | And for the canopy, we'll have
this be the size of the canopy.
| | 03:10 | Now for the last one--we need the fourth one--all I
have to do is hit this little plus to add one more.
| | 03:16 | This is going to be the size of this bench,
so we'll put it over here for the bench.
| | 03:21 | I'm going to cut this to the clipboard,
move the tooltip down, and we'll paste it in.
| | 03:29 | Now, you'll notice there's a problem.
| | 03:30 | This text doesn't look the same as this one.
| | 03:33 | Well, what we want to do is make a
paragraph style so it's consistent.
| | 03:36 | So I'm just going to select this text.
| | 03:39 | We'll open up our paragraph styles, so we'll
go to Window > Paragraph Styles, and then we'll
| | 03:45 | open the panel so we can find it.
| | 03:47 | We'll make a new paragraph style
for this, and we'll call it tool tip.
| | 03:55 | There we go. That looks pretty good.
| | 03:57 | Now I just have to come back and select the
other tooltip that we made and select that
| | 04:03 | text, and we'll apply
tool tip so it's consistent.
| | 04:09 | We'll give this a little
more room, and we'll resize this.
| | 04:14 | Now, let's preview to make sure it's working.
| | 04:19 | In Preview mode, we'll see that we have
these large ugly rectangles, but we're going to
| | 04:23 | make these disappear in a second. But as I
mouse over the area, we can see that each
| | 04:27 | of these pops up appropriately.
| | 04:29 | But the problem is, right now I
don't want to see these ugly rectangles;
| | 04:33 | I want them to be invisible.
| | 04:35 | So what we can do is back in Design mode,
I'm going to select each of these and turn
| | 04:39 | off the fill in each state.
| | 04:41 | So we're going to change the Fill to be None
and we're going to need to go to the States
| | 04:46 | panel. Make sure that each
of these is None as well.
| | 04:52 | We can also hit the trashcan to
get rid of it a little faster.
| | 04:54 | Then we can just repeat this for each of these.
| | 04:59 | None, we'll hit the trashcan, and now it's
gone, and then we'll repeat it on the last one.
| | 05:08 | There we go. That looks pretty good.
| | 05:11 | Now when we go into Preview mode, we can see
here is the photo, but as we happen to mouse
| | 05:15 | over certain areas, we get the little tooltips
to pop up wherever the tooltip happens to be.
| | 05:21 | Using the tooltip is a great way to add
additional information to a page that you want to keep
| | 05:26 | clean and uncluttered.
| | 05:28 | In addition to providing text, you can include
images or other content inside the target that pops up.
| | 05:34 | Take some time to experiment
and see what you can come up with.
| | Collapse this transcript |
| Creating a thumbnail slideshow| 00:00 | One of the most common interactive
elements on a website is a slideshow.
| | 00:04 | At first it may seem like creating a
slideshow would be a lot of work, but in
| | 00:08 | reality, Muse's widgets make
working with slideshows quite easy.
| | 00:12 | Let's go to the slideshow page and then
I am going to go to the Widgets Library
| | 00:16 | and open up Slideshows.
| | 00:18 | Next, I will click and drag
out thumbnails onto the page.
| | 00:21 | I am going to close the toolbar for now,
and if we need it, we will open it later.
| | 00:26 | Now that I have the slideshow made, let's
go to Preview mode and see how it works.
| | 00:32 | In Preview mode, when I click on an
image, it will fade to that image, and over
| | 00:36 | time the image will fade from one to another.
Let's go back to the design.
| | 00:40 | There is additional information in the
slideshow that I really don't care for.
| | 00:44 | So to get rid of it, I am going to go
to the panel menu and I am going to turn
| | 00:48 | off Previous, Next, Captions, and Counter.
| | 00:52 | This will keep the slideshow nice and clean.
| | 00:53 | Now that we have the slideshow cleaned
up a little bit, let's put the thumbnails
| | 00:57 | underneath the main image.
| | 00:59 | To do that, I am going to click
slowly until I select the container of
| | 01:02 | thumbnails on the left-hand side.
| | 01:04 | Next, I will click and drag to put it
underneath the main image, and we will open
| | 01:09 | it up to make it wider.
| | 01:10 | I would also like to make the main image larger,
| | 01:13 | so I am going to resize this
to make it fill up the page.
| | 01:20 | Now that the slideshow is set up,
I am ready to add my own images.
| | 01:23 | I am going to deselect and go to File > Place.
| | 01:26 | In the Assets folder, I am going to
browse to the slideshow folder and select
| | 01:31 | slide1. I will hold my
Shift key and click on slide8.
| | 01:34 | Now with my loaded cursor, you can see
it has a number 8 next to it, which lets
| | 01:40 | me know I have eight images
ready to go into the slideshow.
| | 01:43 | So I will just click on the main
slideshow image and all eight images will be
| | 01:47 | added automatically.
| | 01:48 | Not only are the images are added
to the slideshow, but thumbnails are
| | 01:52 | automatically generated at the bottom.
| | 01:54 | Now that my images have been added to
the slideshow, let's remove the starter
| | 01:58 | images that Muse gave me.
| | 01:59 | We will just slowly click down to
each thumbnail and press Delete.
| | 02:04 | As we do this, they will be
removed from the slideshow.
| | 02:08 | Next, I am going to click to select
the container of thumbnails, and I will
| | 02:11 | position it underneath and open it
up so it goes all the way across.
| | 02:15 | I'd also like to make the thumbnails larger,
so I will slowly click until I select
| | 02:20 | one of them and then I will resize it
until it fits all the way across the page.
| | 02:23 | There we go. That looks pretty good.
| | 02:26 | Now that I have this set up,
let's deselect and see how it looks.
| | 02:29 | We will go to Preview mode, scroll down,
and as I click on each one, it fades to
| | 02:34 | that particular image.
| | 02:38 | To make this a little more interesting,
let's go back into Design mode and we
| | 02:41 | are going to create some
states for the thumbnails.
| | 02:44 | I am going to slowly click
until I select the first state.
| | 02:47 | Next, I will open up my panels, and in
States, while I am in the Normal state,
| | 02:52 | I am going to change the Opacity to 50%.
Then on rollover, I am going to change it to 100%.
| | 02:58 | I will also change Active to 100%.
| | 03:04 | With this set, we will go
to Preview and try it out.
| | 03:09 | As I mouse over each thumbnail, we will
see the image becomes highlighted when
| | 03:12 | it becomes available. Then when I
click, I go that particular image.
| | 03:17 | Let's take a look at a
few more slideshow options.
| | 03:19 | We will put this panel out of the
way and when I have the main slideshow
| | 03:23 | selected, I will go the panel menu and
in here, I can change the transition.
| | 03:28 | Right now it's set to fade.
| | 03:30 | If I like I can have it horizontal or vertical.
| | 03:32 | In this case, I think horizontal will be nice.
| | 03:35 | I am going to turn Auto Play off so it
doesn't advance unless I decide to do it
| | 03:38 | myself, and then we will go to
Preview to see how it looks.
| | 03:44 | Now each time I click, it
slides to that particular image.
| | 03:48 | If I go more than one image away,
it will slide over until it gets to it.
| | 03:52 | If we go to the last image and then
click on the first image, you will watch all
| | 03:55 | the images fly by until
you get to the correct one.
| | 03:59 | Take your time to modify your
slideshow until you're happy with how it looks.
| | 04:03 | If you want to use the same appearance
of a slideshow somewhere else on your
| | 04:05 | site, you can always copy and paste
it to a new page and then just swap out
| | 04:10 | the images as needed.
| | Collapse this transcript |
| Creating a lightbox slideshow| 00:00 | You may have seen examples of
slideshows on the Internet where the image
| | 00:03 | themselves seem to pop off the page and
the entire background was dimmed back.
| | 00:08 | This is called a lightbox, and in
this movie, we are going to learn how to
| | 00:13 | create a slideshow that will use this process.
| | 00:14 | Let's begin by going to the slideshow
page and on the slideshow page, I am going
| | 00:18 | to go to my Widget Library and open up
the Slideshow area and click and drag
| | 00:23 | Lightbox on to the page.
| | 00:24 | I will collapse my panel, because I don't
need it right now, and put it out of the way.
| | 00:29 | Next I will go to the Preview
mode so we can see how this looks.
| | 00:32 | You will notice that the
main image is no longer visible.
| | 00:35 | In fact, we can only see the thumbnails.
But when I click on a thumbnail, the
| | 00:39 | entire screen dims back and
now I can just see the image.
| | 00:43 | I can also click forward and
backward through the slideshow.
| | 00:46 | When I am finished, I click off to the
side to leave the lightbox and we will go
| | 00:50 | back to Design mode.
| | 00:51 | When working with the lightbox, it's
a lot easier to work if you go to the
| | 00:55 | panel menu and turn off Show
lightbox parts while editing.
| | 00:58 | I am going to disable this so
we can focus on the thumbnails.
| | 01:02 | Next, I will select the thumbnails and
press Command+D or Ctrl+D on the PC to
| | 01:06 | bring up my Import dialog box.
| | 01:09 | In my Assets folder, I am going to
scroll down to slideshow 2, click on the
| | 01:13 | first item, hold my Shift
key, and click on the last item.
| | 01:17 | Now with my loaded cursor, I am going to
click and add all these images to the slideshow.
| | 01:22 | After my images have been added, I am
going to slowly click to select each
| | 01:25 | thumbnail of the image I no longer need.
| | 01:27 | So we'll get rid of that one,
that one, and finally that one.
| | 01:31 | Our next step is to make the thumbnails larger,
| | 01:34 | so I am going to click to select the
slideshow, and then I will click again to
| | 01:37 | select the container.
| | 01:39 | Next I am going to click and
drag to make the container larger.
| | 01:41 | Then I will select one of the individual
frames and click and drag to increase its size.
| | 01:48 | There we go. That's a good size.
| | 01:51 | Now I am going to deselect.
| | 01:53 | With the thumbnails larger, I will open
up my panels and switch over to States.
| | 01:57 | I am going to slowly click until I
select the first thumbnail and while I am
| | 02:01 | on the Normal state, I am going to change the
Opacity to 50%, and the Rollover state to 100%.
| | 02:08 | We can really make our thumbnails
pop by changing the Normal and Rollover
| | 02:11 | states with Opacity.
| | 02:13 | With this finished, let's go
to Preview and see how it looks.
| | 02:16 | In Preview mode, I can mouse over
and see a portion of each image.
| | 02:20 | If I click, the screen will
fade back and I can test it out.
| | 02:23 | When we are finished with our slideshow,
we will click off and go back into Design mode.
| | 02:29 | Now that thumbnails of the slideshow are
finished, let's go back and finish up the slideshow.
| | 02:33 | I will collapse my panel and move it to
the side and click on the panel menu and
| | 02:39 | we will turn on Show
lightbox parts while editing again.
| | 02:42 | To make it easier to edit the lightbox,
I am going to scroll down and then I am
| | 02:46 | going to click and drag to
select all of these elements.
| | 02:49 | While clicking and dragging, be sure
to grab the caption, the forward and
| | 02:53 | backward button, as well as the
lightbox itself, but don't click and drag too
| | 02:56 | much or you might also grab the thumbnails.
| | 02:59 | With these selected, you can either use your
arrow keys or click and drag to pull it down.
| | 03:04 | Now that that's out of the
way, editing will be easier.
| | 03:06 | I am going to select the caption and
move it up to put it underneath the photo.
| | 03:10 | And I will repeat the process with
the forward and backward buttons.
| | 03:14 | Now let's add a caption for each photo.
| | 03:17 | In order to do that, you have to click
on the photo, so I will click on the
| | 03:19 | first photo and then I am going to double-click
inside the Lorem Ipsum and type in the caption.
| | 03:24 | This caption is Streamers.
| | 03:25 | Then we have Out to See and so on.
| | 03:31 | Now that I have the captions finished,
I could change the text of the captions
| | 03:34 | or the forward or backward button to a
different graphic, font, size, or color.
| | 03:38 | But for now I'm happy how it looks.
| | 03:41 | Let's go to Preview mode
and see the finished work.
| | 03:43 | While we are in Preview mode, as I mouse over,
I can see each image is popping up over my cursor.
| | 03:51 | When I click, we will go to that
particular image, and then I can click forward
| | 03:54 | and backward to read all of
the captions and view the photos.
| | 03:58 | Building slideshows with lightboxes is a great
way to get a user to focus in on your content.
| | 04:04 | In addition to images, you can put
other content inside your lightbox.
| | 04:08 | Try adding other widgets or even a movie.
| | 04:10 | In fact, we will learn about adding
movies into Muse in the next chapter.
| | Collapse this transcript |
| Understanding text form fields| 00:00 | Most web pages have a way for users
to contact the owner of a website.
| | 00:05 | Sometimes this is simple as posting a phone
number or an email address on the site, but
| | 00:09 | often the best way to do this is with a form.
| | 00:12 | Let's take a look at adding
some text form fields to our site.
| | 00:16 | We're going to go to the Contact Us page.
| | 00:18 | On this page we have an open area
where I want to add a form field.
| | 00:21 | Inside our Widget Library panel, we're going
to go underneath Forms and grab Simple Contact.
| | 00:26 | When I click and drag this onto the
page, we'll have our form fields added.
| | 00:29 | I'm just going to move this over to the left
and line that up so it looks a little nicer.
| | 00:34 | Now that we have our form field,
let's go into Preview mode and test it out.
| | 00:38 | As we mouse over each of these form
fields, you notice there's a Rollover effect.
| | 00:43 | When I click inside, the
description will disappear.
| | 00:46 | And I'll enter my name, James Fritz.
| | 00:48 | I'm going to purposely skip the Email address, and then
we'll add a brief message, "I like your site!"
| | 00:56 | Now let's click Submit.
| | 00:58 | When you click the Submit button,
you're going to receive an alert.
| | 01:01 | This alert is telling us that
this form field isn't working.
| | 01:04 | The reason it isn't working is because we're just
in Preview mode, and it hasn't been published yet.
| | 01:09 | For now we're going to dismiss this alert.
| | 01:11 | Next, you'll notice that the
Email address is highlighted red.
| | 01:15 | The reason for this is
because this is a required field.
| | 01:19 | Since we didn't enter an Email address, it's alerting
us to say, "Hey, you forgot to enter your address."
| | 01:24 | And if this was on a real site, the form
wouldn't be submitted until you entered an Email address.
| | 01:29 | Now that we can see how this form field works, let's go
back to the Design mode and try out some different options.
| | 01:34 | When you select the form fields, you notice there's
an Options widget in the upper right-hand corner.
| | 01:39 | When I click on this, we get a few more options,
such as the name of the form, who it's going
| | 01:44 | to be send to, as well as the
ability to add additional fields.
| | 01:48 | For now we're going to ignore these options,
and we're going to cover these in a later movie.
| | 01:52 | If you want to move or resize any of these
fields, you just need to slowly click down
| | 01:56 | until you select that section.
| | 01:57 | So for example, if I want to move the
Submit button, I'm just going to slowly click until
| | 02:01 | I have the Submit button selected.
Now I can move this to the center.
| | 02:05 | Or maybe I want to make it larger
so it's easier for people to click.
| | 02:11 | If I want to change the name of this, I'll just double-click
and change the name from Submit to Submit Form.
| | 02:18 | If I wanted to I could even
change the font or the color.
| | 02:21 | If I do this, it's probably a good idea to
use a Paragraph Style so I can keep things
| | 02:24 | consistent across my site.
| | 02:26 | Now watch what happens if I change
the Width of one of the text fields.
| | 02:31 | I'm going to slowly click until I select Name,
and then I'm going to click and drag and just
| | 02:35 | make this a little shorter.
| | 02:37 | You notice that when I change that
Name field, the Email address changed too.
| | 02:41 | The reason this occurs is if I select all
the form fields and go into the Options, you'll
| | 02:46 | see at the bottom it says Edit Together.
| | 02:48 | When you have Edit Together checked, if you
change the properties of one text field, the
| | 02:53 | other text fields will change too.
| | 02:55 | If you don't want this to
happen just uncheck Edit Together.
| | 02:58 | But personally, I find it very
useful because it saves a lot of time.
| | 03:02 | Some of the other options we might want
to change are the appearance of the Rollover States.
| | 03:06 | So if I select one of these fields, for
example, Name, let's go over to the States panel.
| | 03:10 | You'd notice in the States panel there is
various States that can change the appearance
| | 03:14 | depending on what you do.
| | 03:16 | Empty is when you have nothing entered in the field.
This is just how it normally looks on the page.
| | 03:21 | Non Empty is when you're
entering information into the field,
| | 03:25 | Rollover is as you mouse
over or rollover the field,
| | 03:28 | Focus is when you're tabbing into a field,
| | 03:30 | and Error is if there's a problem with the
data that's in that field--for example, you
| | 03:34 | forgot to enter your name or an email address.
| | 03:37 | You can change the appearance of any of
these at any time, and remember, if you have
| | 03:40 | Edit Together turned on,
they'll all change together.
| | 03:43 | You can format these form fields with any of the
attributes that you can apply to regular objects in Muse.
| | 03:49 | It's also a good idea to use Paragraph Styles for the
name fields and messages to keep your text consistent.
| | Collapse this transcript |
| Creating a simple form| 00:00 |
Now that we have a basic understanding of
form fields, let's take a look at some of
| | 00:04 |
the more advanced options and what it
takes to complete a form.
| | 00:07 |
On the Contact Us page, I have the simple
contact form placed.
| | 00:11 |
Let's select this form field and go into
the options and take a look at what we
| | 00:15 |
see in here.
The form name is the name of the form itself.
| | 00:18 |
You want to make sure that you have a
nice descriptive name, so you can keep
| | 00:20 |
track of this form later.
The email address is the email address
| | 00:24 |
that this form data will be sent to.
By default, it's the same account that
| | 00:28 |
your Adobe Muse account is connected to.
But if you want, you can put your
| | 00:32 |
client's email address in here, so when
you publish the site for them, that
| | 00:35 |
information is sent to them instead of
you.
| | 00:37 |
After sending tells Muse, after you
submit this form, where does the user go?
| | 00:42 |
By default, it stays on the same page,
but if you wanted to, you could send them
| | 00:46 |
to a different page in the site.
We're going to do this later on in this movie.
| | 00:49 |
Next, we have standard from fields that
we can add.
| | 00:53 |
For now, let's add a cell phone number.
You see, when you add a cell phone
| | 00:56 |
number, or any other standard fields,
they automatically get added to the
| | 01:00 |
bottom of your forms.
In our case, we want cell phone to be
| | 01:03 |
above message, so we're going to have to
change that later on.
| | 01:06 |
We can also add our own custom Single
Line fields, which are the same as name
| | 01:10 |
or email address, or a Multi Line field,
which is the same as message, so you can
| | 01:14 |
enter more information.
Finally, Edit Together will make sure if
| | 01:17 |
you make any changes to the fields, they
all update at the same time.
| | 01:20 |
Let's change the appearance of these form
fields.
| | 01:23 |
I'm going to scroll down and select the
message area.
| | 01:25 |
I'm going to click and drag and move
message out of the way.
| | 01:28 |
And then we're going to move cell phone
up.
| | 01:30 |
Next, to make this form field look a
little more interesting, we're going to
| | 01:34 |
move the name, email, cell phone, and
message labels to the left-hand side and
| | 01:38 |
have the form fields themselves on the
right-hand side.
| | 01:42 |
So to do this, we have to be a little
meticulous with how we're working inside
| | 01:45 |
our document.
You're going to want to click slowly and
| | 01:48 |
deliberately as you move your items
around.
| | 01:50 |
So let's come down and I'm going to grab
the name field and click and drag and
| | 01:54 |
move this to the side.
I want this to line up right along with
| | 01:57 |
this edge over here.
Next, I want name to be lined up on the
| | 02:01 |
right-hand side.
So with name selected, I'm going to go to
| | 02:04 |
my text field and choose a line on the
right-hand side.
| | 02:07 |
When I do this, you'll see all of the
other labels switch over to align right,
| | 02:11 |
because Edit Together was selected.
Next, I don't need all this extra space.
| | 02:15 |
I'm just going to move this over here.
And then click and drag, and start to
| | 02:18 |
line this up.
Next, to make sure it lines up at the
| | 02:21 |
spot that I want, I'm going to use some
guides.
| | 02:23 |
I'm going to bring down a guide, and put
it at the baseline of the description,
| | 02:27 |
Your Name.
Then I'm going to slowly click until I
| | 02:29 |
have name selected.
Now I'll use my arrow keys to nudge it
| | 02:32 |
down so it's on the same baseline.
Next, I'll put a guide over here to put
| | 02:37 |
exactly where the colon is located.
That looks pretty good.
| | 02:41 |
Now I need to repeat this process for the
rest of these form fields.
| | 02:45 |
Now that we have all of this lined up,
let's go into Preview mode and see how it looks.
| | 02:49 |
Now this is a much clearer way to read
your form.
| | 02:51 |
We know that name is on the left, and
then you can enter your name on the right.
| | 02:55 |
It's easy to jump down and enter all of
your information.
| | 02:58 |
Now before we test this out, let's go and
add another page to our site.
| | 03:01 |
We're going to go back to the Plan mode,
and we're going to select the Contact Us page.
| | 03:06 |
We'll right click or Ctrl+click our mouse
and choose Duplicate Page.
| | 03:11 |
Now that it's duplicated, let's change
the name to form submit.
| | 03:15 |
Next, we're going to drag and put this
underneath Contact Us.
| | 03:19 |
Now, to prevent this page from showing up
in our navigation system, I'm going to
| | 03:22 |
select this page, right click, and choose
Menu Options, and then Exclude Page From Menus.
| | 03:29 |
That way, it won't show up in a
drop-down.
| | 03:32 |
Let's edit this page and change some of
the information.
| | 03:36 |
I don't need the form field on this page,
because I already have the form field on
| | 03:39 |
the earlier page.
So, I'm going to delete this and I'll get
| | 03:43 |
rid of some of these guides too, because
I don't need these, either.
| | 03:46 |
Select those and hit Delete.
I'm going to select Contact Us, Copy and
| | 03:51 |
then Paste and put this right down here.
And we're going to change the message to
| | 03:55 |
say, Form Submission Success.
With this finished, we need to go back to
| | 04:00 |
the Contact Us page.
Select the forms, go into the options,
| | 04:04 |
and say, after sending, where do we want
it to go?
| | 04:06 |
And what we want to to do, is go to the
page that we just created.
| | 04:10 |
And that's going to be Contact Us Form
Submit.
| | 04:15 |
Now that we have this finished, we can
publish the site and try it online ourselves.
| | 04:19 |
We're going to press Publish, and then we
need to enter the name of our site.
| | 04:22 |
In order to receive the information from
the form fields that people enter, it
| | 04:26 |
can't be put on a test site.
It actually has to go to a real, live
| | 04:29 |
published site.
For purposes of this movie, we're just
| | 04:32 |
going to publish it to a sample site.
Now that we have the sample site
| | 04:37 |
published, let's go to the Contact Us
page and let's enter some information.
| | 04:41 |
We'll put in my favorite phone number and
then a nice message.
| | 04:44 |
Now watch what happens when we click
Submit.
| | 04:48 |
It goes to the next page that says, form
submission success.
| | 04:51 |
If this had been published to a live
business catalyst site, an email would
| | 04:54 |
have been sent to the email address
that's connected to that form field.
| | 04:58 |
Using Adobe Business Catalyst to host all
of your form fields should work as
| | 05:02 |
expected, but what happens if you're not
using Adobe Business Catalyst, you're
| | 05:06 |
using a different host?
Well, when you upload your site via the
| | 05:10 |
built-in FTP, Muse will notify you if it
finds any problems that you may have.
| | 05:15 |
The most common issue is that the built
in captcha for spam will not work with
| | 05:20 |
hosts other than Business Catalyst.
So if you avoid using that captcha
| | 05:23 |
feature, you should be okay with whatever
host you end up using.
| | 05:27 |
If you happen to run into any issues with
the forms in your host, Adobe recommends
| | 05:31 |
that you contact them via their tech
support forums so they can work on a fix
| | 05:36 |
for future updates to Muse.
| | 05:38 |
| | Collapse this transcript |
| Exploring the Muse Widget Gallery| 00:00 | To some people, Muse's Widgets may seem
complex, and to others, they may seem frustratingly
| | 00:06 | limiting, but ultimately, you can be really
creative with the options within each widget.
| | 00:11 | However, there are times that it is useful to see
what other people have created with Muse's widgets.
| | 00:16 | Let us take a look at the Adobe Muse Widget
Gallery. By visiting Adobekb.com/widget-gallery,
| | 00:24 | you can see a series of widgets that have
been designed by Adobe designers themselves
| | 00:29 | or other people that have submitted them
to Adobe to be displayed for others to see.
| | 00:33 | In this case, I am going to scroll down,
and we can see they are sorted by type.
| | 00:37 | I am going to go to the Lightbox Display.
| | 00:42 | Within Lightbox Display, we
have a few different widgets.
| | 00:45 | I am liking this Lightbox
Display (Composition Widget).
| | 00:50 | When I click on it, if I want to see this
widget in action, I am just going to click
| | 00:53 | View this widget in action, and we
can test it out to see how it works.
| | 00:57 | We'll, this is looking really nice.
| | 01:01 | If this is a widget I want to use within my website, I
am just going to go back and download this Muse file.
| | 01:08 | Now that I have downloaded it, I am going to go
inside Muse and I am going to go to File > Open.
| | 01:13 | I will browse to my
Downloads folder and open it up.
| | 01:19 | Within this, I can try it out.
| | 01:21 | I can go in here, see how it works, and
you can preview it directly inside Muse.
| | 01:27 | There we go. It is working as expected.
| | 01:30 | Feel free to download as many of
these widgets from the site as you like.
| | 01:34 | You can modify them or use them unaltered
within your own website if you choose to.
| | 01:39 | If you happen to create your own widgets, try
submitting them to the website, so others can use them too.
| | 01:45 | With enough experimentation, you will be able
to make some amazing widgets in no time at all.
| | 01:50 |
| | Collapse this transcript |
|
|
12. Embedded HTMLUnderstanding arbitrary HTML| 00:01 | You might have noticed that some
web sites have actual Google Maps,
| | 00:04 | YouTube videos, or Twitter
status updates on their site
| | 00:08 | instead of just linking to
these other web sites or services.
| | 00:11 | If you've never worked on
a web design project before,
| | 00:13 | you might think that this
would be really difficult,
| | 00:15 | and maybe you had to partner with Google
or another company to make this happen.
| | 00:19 | In reality, a designer just adds
this information to a web site
| | 00:23 | by using Arbitrary HTML
or HTML Embedding.
| | 00:26 | To add this type of content, it's
easy as a simple copy and paste.
| | 00:31 | Before we get into Muse, let's take a
look at what exactly Arbitrary HTML is.
| | 00:36 | A simply way to think about it is that
it's code created by third-party web sites,
| | 00:40 | like YouTube, Facebook or Twitter.
| | 00:42 | It has many names like Arbitrary HTML,
Embedded HTML, Widgets, or even Gadgets.
| | 00:50 | The reason it's so popular is
that it's really easy to work with.
| | 00:54 | All you have to do is copy
specific code from a web site,
| | 00:57 | and then paste it directly
into Muse; that's it.
| | 01:00 | To give you an idea of just how easy
it is to work with Arbitrary HTML,
| | 01:05 | I'm going to show you an example that's
available on The Weather Channel.com.
| | 01:08 | So I've searched for forecast from
Milwaukee, Wisconsin, my hometown,
| | 01:12 | and I'm going to go to Share, and click.
| | 01:15 | Immediately, there is an option
right here that says Embed Code.
| | 01:18 | When I click on that, I'm just going
to copy that to the clipboard and then
| | 01:22 | I can hit Cancel, go back to Muse, and I'm
going to go into this page and just paste.
| | 01:29 | It will take a moment,
but immediately,
| | 01:31 | I'll have a little widget
that appears on the screen.
| | 01:33 | This was built using
the Arbitrary HTML.
| | 01:37 | To preview this, I'll just
click on the Preview button.
| | 01:40 | You can see that there's an animation happening
saying that it's Cloudy in Milwaukee right now,
| | 01:44 |
as well as the forecast for Tonight,
Tomorrow, and Tomorrow Night.
| | 01:47 | In Preview mode, you can see
that this isn't just a photo
| | 01:50 | because theres an animation of the clouds,
and I can go in and select this text,
| | 01:54 | or even click underneath
the hyperlinks.
| | 01:57 | Let's go back into Design mode.
| | 01:59 | In Design mode, if I try to move this around,
there really isn't that much I can do
| | 02:03 | because it's going to stay the same
size, since it's rendered via HTML.
| | 02:07 | But, if I want to edit this, I can
just right-click my mouse and choose HTML.
| | 02:12 | Now, I can see the code that was
written in order to make this happen.
| | 02:15 | Now don't worry if you don't understand
code; you don't have to make any changes.
| | 02:19 | I just wanted to show you where
the code was living inside Muse.
| | 02:22 | We'll click OK, and leave this here.
| | 02:25 | If you want to enter your own HTML code, rather
than copying something from a web site,
| | 02:29 |
you can always go to the Object
menu, and choose Insert HTML.
| | 02:33 | Here, you can enter your own code.
| | 02:35 | I'm just going to leave
this alone and I'll click OK.
| | 02:38 | Now I'll click and drag and move
Insert your HTML here over to the side.
| | 02:43 | As you can see, I can't
select this text right now
| | 02:45 | because it's just a picture
that says Insert your HTML.
| | 02:49 | But, when I go into the Preview
mode, I could actually select it
| | 02:51 | because it's real selectable HTML text.
| | 02:55 | If you're familiar with HTML or CSS,
you could actually edit this code,
| | 02:59 | and add your own CSS styling.
| | 03:01 | In fact, it's a very powerful way
to extend the capability of Muse.
| | 03:06 | If manually entering code isn't your
cup of tea, don't worry about it.
| | 03:09 | There are a large number of web sites
that use Arbitrary HTML that you can use
| | 03:13 | to copy and paste into Muse
or other applications.
| | 03:16 | However, if you are interested
in writing or modifying code,
| | 03:19 | you can accomplish almost
anything with Arbitrary HTML.
| | Collapse this transcript |
| Inserting a map| 00:01 | When you're looking for directions,
you've probably used an online mapping
| | 00:04 | service like Google or Bing.
| | 00:05 | One of my favorite features of Muse is
the ability to use arbitrary HTML to add
| | 00:10 | these types of maps to your website.
| | 00:12 | By embedding a map, it makes it much
easier for visitors of your site to
| | 00:16 | find your location.
Let's go to the Contact Us page.
| | 00:19 | Now on this page I want to add a map.
| | 00:22 | Before we go to Google or Bing, we should
figure out how big of a map we need on our website.
| | 00:26 | So I'm going to grab my Rectangle
tool and click and drag a rectangle to
| | 00:30 | determine how big of a map that I want.
| | 00:32 | After drawing the rectangle,
I'll grab my Selection tool and open up
| | 00:35 | the Transform panel.
| | 00:37 | Here it tells me the width of the frame
is 526 pixels and it's 333 pixels tall.
| | 00:43 | I'm going to write that down so I
can remember it when I go online.
| | 00:46 | I'll switch my web browser. And I've
already gone to maps.google.com and
| | 00:51 | entered my address.
| | 00:53 | Once I'm in Google maps and I've found the
location, I'm going to go and click on
| | 00:56 | this paper link to open
up the embedding options.
| | 01:00 | Next, I'm going to click on
Customize in preview embedded map.
| | 01:03 | Here I can choose the custom radio
button, and then enter my Width and Height.
| | 01:08 | My Width was 526 and my Height was 333.
| | 01:13 | As I make those changes,
you'll see the map will update below.
| | 01:16 | I'll resize the map to get it just right.
| | 01:19 | When I have it the way that I like it,
I'm going to come down and I'm going to
| | 01:22 | select all of this code
and copy it to the clipboard.
| | 01:25 | Next, I'll go back to Muse, get rid of the
rectangle placeholder and paste in the code.
| | 01:31 | Just like magic, the Google map
appears and I can put it on my page.
| | 01:34 | Now while I'm in Design mode,
there really isn't much I can do.
| | 01:38 | We just see a poster frame,
and it's not editable.
| | 01:41 | But by going into
Preview mode, I can try it out.
| | 01:45 | Here we have an actual working Google map,
where I can zoom in and zoom out, and
| | 01:49 | even change the mode to Earth or Satellite.
| | 01:52 | Now that we've seen how to do this with a
Google map, let's try it with a Bing map.
| | 01:57 | I'm going to go back to Design
mode and get rid of this frame.
| | 02:00 | Next we'll go our web browser, and I can
close this window, and I'm going to go
| | 02:03 | to my next tab where I
already have Bing located.
| | 02:06 | To get the Bing maps, you can just go to
bing.com/maps and then enter your address.
| | 02:12 | Since I have the location already
found, I can click on the Share button and
| | 02:16 | then choose Customize and preview.
| | 02:18 | Now this window is very similar to Google maps.
| | 02:22 | I'll just go down to Custom and
enter my numbers: 526 and 333.
| | 02:30 | With that finished, I'll put it at the
right size and right zoom level and
| | 02:34 | then Generate the code.
| | 02:36 | Next, I'll copy the code that was been
generated, and I'm going to go back into
| | 02:39 | Muse and paste the code in.
| | 02:41 | Now that I have the map in Muse, we'll go
back into Preview and make sure it works.
| | 02:47 | Excellent! I can move it
around and zoom in and zoom out.
| | 02:52 | Finally, if I decide that I want to
change the size of this map, if I click and
| | 02:56 | drag, it's not going to let me change it.
| | 02:58 | So what I have to do is either go
back to the website and type in new
| | 03:01 | dimensions, or if I'm feeling
adventurous, I can right-click my mouse and go
| | 03:06 | into HTML and just find
the Width and Height fields.
| | 03:09 | Now at first glance, this looks pretty scary.
| | 03:12 | But if you look at the top,
it just says Width 526.
| | 03:14 | I'm going to change it to 500
and Height, I'm going to 300.
| | 03:18 | After you do this, click OK,
wait a moment, and Muse will update.
| | 03:26 | Now we have the map at the correct size.
| | 03:28 | If you prefer to use a different
mapping service online, it most likely has the
| | 03:32 | ability to let you copy and paste
code directly into your website.
| | 03:36 | Just take the time to look for a
button that says Embed, Share, or Link.
| | 03:41 | From here, you should be able to copy
and paste the code like we've seen in
| | 03:44 | this movie.
| | Collapse this transcript |
| Embedding videos| 00:01 | Another popular Arbitrary HTML feature
is to put videos on your Web site.
| | 00:05 | While currently it isn't possible to
directly place a video as an asset in Muse,
| | 00:10 | you can upload a video to a
number of different web sites,
| | 00:13 | and then use the Embed code
to put it on your site.
| | 00:16 | One of the most popular video-
sharing sites on the Web is YouTube.
| | 00:19 | When you find a YouTube video that
you want to put on your web site,
| | 00:23 | just scroll down to underneath the
video and look for the Share button.
| | 00:27 | When you click on the Share button,
we need to click the Embed button.
| | 00:31 | From here we could grab this code, but
if you want to change the size of it
| | 00:35 | you can come down and choose any of
these presets, or enter a custom field,
| | 00:39 | but for now this is perfectly fine.
| | 00:41 | So I'm going to copy
that to the Clipboard,
| | 00:43 | I'm going to go back to
Muse and open up this page.
| | 00:47 | Next, I'll paste it on.
| | 00:50 | It's amazing how
easy this is to do.
| | 00:53 | If we want to preview it, just click on Preview
and you can press Play and watch your movie.
| | 01:10 | Let's go back to the Design mode
and let's visit another web site.
| | 01:13 | I'm going to delete this frame and go back to
my Web Browser and go to the web site Vimeo.
| | 01:19 | On Vimeo, I'm going to grab
this movie and put it into Muse.
| | 01:23 | To share a movie on Vimeo, just mouse
over the movie and click on Embed,
| | 01:28 | from here you can grab the Embed
code and copy it your Clipboard,
| | 01:31 | or you can go down and customize it.
| | 01:33 | Let's jump back in the
Muse and just paste the code.
| | 01:37 | Next, we'll go to Preview and
press Play and watch the movie.
| | 01:49 | In additional to YouTube and Vimeo,
most other video sites will let you
| | 01:53 | embed their videos on your web site.
| | 01:55 | Just look around for the Embed or
Share button on or around the movie,
| | 01:59 | on whatever site you happened to use.
| | 02:01 | If you can't find an embed link,
it also might be possible that that
| | 02:06 | particular video can't be shared
because of copyright reasons.
| | Collapse this transcript |
| Working with Twitter| 00:00 | Over the last few years, Twitter has
become one of the more popular social networking
| | 00:04 | sites. By using HTML embedding, you can add
Twitter content directly into your site, with
| | 00:10 | a few different methods.
| | 00:12 | On our Contact Us page, I want to add one
of those Twitter Follow buttons, so people
| | 00:16 | that visit our site can follow us on Twitter.
| | 00:19 | What I need to do is go over to the Twitter page, and we
are going to go to twitter.com/about/resources/buttons.
| | 00:27 | On here, we are going to choose the second Twitter
button--you can choose a different one if you wish.
| | 00:32 | Inside our Button options, you want to add
the username that you want to follow. And there
| | 00:37 | are a few other options, but I
am happy with how this looks.
| | 00:39 | What we need to do is go over here and copy
this code to our clipboard, jump back into
| | 00:44 | Muse, and paste it in.
| | 00:46 | I think this Follow button looks
really good over here by Contact Us.
| | 00:50 | Now to test this out,
let's go into Preview mode.
| | 00:53 | Inside Preview mode, it is not
looking really the way that I want it to.
| | 00:56 | I was hoping it was going to say
Follow and the name of our Twitter handle.
| | 01:01 | But this is a case where what you see is
not necessarily what you are going to get.
| | 01:06 | The reason for this is because Muse's built-in
renderer does not really work with Twitter very well.
| | 01:11 | What we need to do is preview
this inside our web browser.
| | 01:14 | I am going back into Design mode
and then go to File > Preview Page in Browser.
| | 01:19 | When we are previewing this page inside a
web browser we can see, oh, there we go; it
| | 01:23 | looks the exact way that we expect.
Follow@art_samoca. That's working nicely.
| | 01:30 | Now there are some other types of Twitter
widgets that we can embed inside our website,
| | 01:34 | other than just the simple Follow Us on Twitter.
| | 01:37 | What I am going to do is close this tab and
I am going to go back to this page, where I
| | 01:42 | have already logged in to my Twitter website.
| | 01:45 | What I am going to do is go over to
this gear and go down and choose Settings.
| | 01:49 | Within Settings, I am going to go to Widgets,
and inside Widgets, you can create your own
| | 01:54 | new widget or you can edit the ones
that you have created in the past.
| | 01:58 | I am going to click Create New and inside
this, I am going to choose the Search widget,
| | 02:03 | because I want to get a
search of certain results.
| | 02:05 | In this case, I want to search for Adobe Muse.
| | 02:09 | We can put in certain dimensions if we want
and even themes and link colors, but the most
| | 02:13 | important thing that we need to enter is
our web domain. In the case of this website,
| | 02:18 | it is going to be samoca-art.com.
| | 02:22 | If you do not have a URL of your
website yet, this is not going to work.
| | 02:26 | I can't stress this enough. This can be very
frustrating because if you enter www in front
| | 02:32 | of it or even the http:, Twitter can be
very particular about what works in here.
| | 02:37 | So you may have to test around a little bit to
make sure that you actually have the right URL.
| | 02:42 | If you are trying to publish to a temporary Business
Catalyst site, I have limited experience with this working.
| | 02:47 | What I have had to do is publish it to
a real site in order to have it show up.
| | 02:52 | So from testing, I know that
this actual URL will work.
| | 02:55 | Now that I have this here, I am going to
choose Create Widget, and you will know it's going
| | 02:59 | to work when it says Your
widget has been created.
| | 03:02 | If it gives you a warning saying "This URL
is invalid," or something like that, you are
| | 03:06 | going to have to go back and visit the Domain
area and make sure you are entering this correctly.
| | 03:11 | I am going to copy this to the clipboard,
and when I go back into Muse, I am going
| | 03:15 | to scroll down and paste it in here.
| | 03:18 | Unfortunately, when I put this here, it doesn't
look like anything that I had wanted it to look like.
| | 03:22 | I would expect a nice big dialog that would have all
the search results for anyone searching for Adobe Muse.
| | 03:27 | If I go into the Preview mode,
it's not going to look any better.
| | 03:31 | In fact, if I would even preview in my
web browser, it still isn't going to work.
| | 03:35 | The only way this will work is when I actually
publish it online to the URL that I specified
| | 03:41 | in the Twitter settings.
| | 03:43 | So what I am going to do is hit Publish, and
I have already published somoca-art.com, so
| | 03:47 | I am going to click OK.
| | 03:48 | It is going to upload the changes that we
have made, and now when I visit the website,
| | 03:54 | I can go to Contact Us, and here is
the Twitter Search widget in action.
| | 03:59 | If this is the result that you are looking for,
you are going to have to go through those additional steps.
| | 04:04 | Adding Twitter integration to your site is a great way
to encourage others to share information about your site.
| | 04:09 | Another benefit is that as more people will
link back to your site via Twitter, your search
| | 04:14 | engine rankings will improve, which will
hopefully result in more visitors to your website.
| | Collapse this transcript |
| Adding a Facebook Like button| 00:01 | Many web sites feature Facebook Like
or Recommended buttons to let users
| | 00:05 | share articles that they find interesting.
| | 00:07 | One example is lynda.com.
| | 00:09 | Every course at lynda.com has Share Widgets.
| | 00:12 | For example on this page, we could share
the course via Facebook, Twitter or email.
| | 00:17 | Under the Samoca Artpage I want to
add a Facebook recommended button.
| | 00:21 | So what I'm going to do is copy this
URL to the clipboard and then visit
| | 00:25 | this Facebook Developer Page.
| | 00:27 | Now that we're here, I'm
going to Paste in the URL.
| | 00:30 | Next, I'm going to turn off the Send Button
and change the Layout Style to button_count.
| | 00:34 | To Width is fine, but I really don't
want to see any faces right now,
| | 00:38 | so I'll turn that off, and I'm
going to change the verb to recommend.
| | 00:43 | Next, we'll switch to a dark color;
you know, I'm changing my mind.
| | 00:47 | We're going to put it back to light.
| | 00:50 | And finally, we're going to choose the
font Arial so it can match our web site.
| | 00:53 | When we're finished, we'll click Get
Code, and we're going to choose I-frame,
| | 01:00 | and then Copy and Paste
this code into Muse.
| | 01:03 | Back in Muse, I'll go to our Facebook
page and then we'll Paste the code in.
| | 01:09 | There we go, that lines up
nicely, and if we go to Preview,
| | 01:12 | we can see that it's rendering correctly.
| | 01:15 | Adding Facebook Like or Recommended
buttons is a great way to increase
| | 01:19 | the popularity of your site.
| | 01:21 | In fact, you might want to begin
to make it standard practice
| | 01:23 | to add Social Media buttons next
to each article on your web site.
| | 01:28 | This way, your visitors can share their
favorite parts of your site with others.
| | Collapse this transcript |
| Embedding an external slideshow| 00:01 | If you want to add a slideshow to your
web site, you can always make one yourself
| | 00:05 | using Muse's various widgets like we
talked about in the previous chapter.
| | 00:09 | However, you may already have your
images hosted on another service,
| | 00:13 | like photoshop.com or issuu.
| | 00:16 | If that is the case you
can use arbitrary HTML
| | 00:19 | to embed the online slideshow
directly into your web site.
| | 00:23 | Well, let's go up to the Slideshow
page in Muse and we're going to add
| | 00:26 | a slideshow to the big open area here.
| | 00:29 | Our next step is to
switch to our Web Browser,
| | 00:31 | and I'm already logged
into photoshop.com.
| | 00:34 | If you don't have an account,
it's completely free,
| | 00:36 | and it's a great way to upload and
share and edit your photos online.
| | 00:41 | While I'm logged in, I'm going to
come over and organize my library.
| | 00:45 | Now that I'm in my Organizer at the bottom
of the screen I'm going to click Share Album.
| | 00:50 |
From here I can email the album to someone,
| | 00:52 | so I'm going to press the Embed code
button and then I'll copy the Embed code.
| | 00:58 | Now that it's been copied, I'm going
to go back to Muse and paste it in.
| | 01:03 | After pasting it I'll move
the slideshow over to the left
| | 01:06 | and let's see what it
looks like in Preview mode.
| | 01:10 | Now I can see all of the photos of
my slideshow. I can click through,
| | 01:14 | let the slideshow play, or
even view it full-screen.
| | 01:18 | When I'm finished with the slideshow,
I'll press Escape to leave.
| | 01:22 | Let's go back into Design mode,
I'm going to remove the slideshow
| | 01:25 | and let's take a look
at another service.
| | 01:26 | I'm going to close photoshop.com and go back
to my next tab, which is on the web site issuu;
| | 01:33 | Issuu is another web site online
that allows you to share your media.
| | 01:38 | In this case instead of sharing just
images you can actually upload a PDF
| | 01:42 | of a magazine or even a catalog.
| | 01:44 | I've already uploaded my PDF, so now
I'm ready to share it on my web site.
| | 01:48 | So I'm going to come down
and grab the embed code.
| | 01:53 | If I like I could change some of the
embed options to a different size.
| | 01:56 | For example, let's make
it a little larger.
| | 01:59 | Next I'll grab the embed code,
copy it to my Clipboard
| | 02:03 | and we'll go back into Muse and paste.
| | 02:07 | Now that I have this in Muse, let's
go to Preview and check it out.
| | 02:09 | When we mouse over the slideshow,
we can click forward and backward
| | 02:16 | to read the magazine, but it's more
interesting if you click to expand,
| | 02:20 | so you can view it full-screen.
| | 02:22 | From here we have a navigation system
at the top to go forward and backward,
| | 02:27 | or we can click on the side
of the magazine as well.
| | 02:29 | If you click anywhere on the page, you'll
be able to zoom in and read the article.
| | 02:36 | For now I'm going to zoom back out.
| | 02:38 | We can even jump forward pages or even
print it out and email to share the article.
| | 02:44 | Embedding an issuu slideshow is a great way
to share your portfolio on your web site.
| | 02:49 | These are just two examples of web sites that
let you share your images or PDFs with Muse.
| | 02:53 | If you already have a set of photos
on another service you can embed them
| | 02:57 | into Muse with arbitrary HTML.
| | 02:59 | Just take your time and look for the
Share, Publish, or Embed button to get
| | 03:03 | access to the code so you
can embed it on your site.
| | Collapse this transcript |
| Adding a form with JotForm| 00:00 | If you want to gather information
from visitors to your web site,
| | 00:03 | a form is a great way to have them
submit that information to you.
| | 00:07 | In this movie, we're going to learn
how to use a web site called JotForm
| | 00:11 | to design and build a form and then embed it
with arbitrary HTML directly into our site.
| | 00:18 | On our web site, I have this open
area where we need to add a form.
| | 00:21 | So I'm going to switch to our web browser,
where I've already logged in to jotform.com.
| | 00:26 | In order to create a form on this web site,
you first have to create a free account.
| | 00:31 | Creating forms is free, but you should know
that there is a premium service at JotForm.
| | 00:36 | What I mean by that, is it's free to
create and use forms up to a point.
| | 00:41 | If you end up having a
large number of users,
| | 00:43 | you might have to pay in order
for the service to continue.
| | 00:46 | Please pay attention to
JotForm's terms of service,
| | 00:49 | so you can decide if you want to
use it on your web site or not.
| | 00:53 | Once you're logged in to JotForm,
it's very easy to create a form.
| | 00:56 | I'm going to begin by giving my
form a name at the top of the screen.
| | 01:00 | Let's call this Contact Us.
| | 01:03 | Next, I'm going to
go to the Quick tools,
| | 01:05 | and I'm going to click and
drag Full Name onto the page.
| | 01:09 | In this field, I want to have our
users fill out their entire name.
| | 01:12 | So I'm going to put in Your Name.
| | 01:14 | You can see underneath, it already has
a spot for First Name and Last Name.
| | 01:18 | After finishing the name area,
I'm going to click on Form tools
| | 01:22 | and then I'm going to drag
and drop the Drop Down area.
| | 01:25 | We'll call this How
did you hear about us?
| | 01:30 | In the dropdown menu, I
want to add three options,
| | 01:32 | but you can see right now,
they're not filled out.
| | 01:35 | So what we have to do is go over to the gear
and in here we can choose Show Properties.
| | 01:39 | Now we can enter the information.
| | 01:42 | The first one is From a Friend, then we'll
add web search, and finally advertising.
| | 01:52 | With that complete, I can close the dialog
and now we can see it's working correctly.
| | 01:57 | Next I want to add an email address.
| | 01:59 | So I'm going to go back to the Quick tools
and I'll click and drag out email address.
| | 02:02 | I'm going to change the
name to Your email Address,
| | 02:07 | and then finally, back in Form tools,
I'm going to grab a Text Area.
| | 02:11 | This is where I'll let people
enter their information.
| | 02:14 | So we'll put in Your Message.
| | 02:16 | To control the width of this form on our
web site, I'm going to click on Form Width.
| | 02:20 | Right now it's set to 500 pixels.
| | 02:22 | I'm going to make this a little more
narrow, and we're going to go to 450.
| | 02:25 | There we go; that looks better.
| | 02:27 | You could also change the Font
Size, Color or even the Background.
| | 02:30 | In addition there are Themes that will help
you skin your form to match your web site.
| | 02:35 | At any point you can press the Preview
button if you'd like to test the form.
| | 02:39 | That's looking pretty good;
I'm going to close this.
| | 02:42 | Now that I have my form complete,
I'm going to go to Setup and Embed.
| | 02:46 | In order to receive information
from people that fill out this form,
| | 02:49 | you'll have to set up your Email Alerts.
| | 02:51 | When you visit this button, you
can enter your own email address,
| | 02:54 | that way when someone fills out a form,
[00:02:56 .64]
you will receive an email with
the information that they entered.
| | 02:59 | For now, let's see what this
form looks like on our web site.
| | 03:01 | I'm going to click on Embed Form, and
we're going to go to the Embed button.
| | 03:06 | Next, I'm going to select this
code and copy it to the clipboard,
| | 03:10 | go back to Muse and then paste the code in.
| | 03:13 | There we are; I'll make this a little wider.
| | 03:17 | Next, I'll click on Preview and let's
see what it looks like. Excellent.
| | 03:22 | It looks exactly like it should.
| | 03:24 | JotForms are just one of the many ways
to create forms for your web site
| | 03:27 | using arbitrary HTML.
| | Collapse this transcript |
|
|
13. Publishing a SiteExporting your site to HTML| 00:00 | If you decide that you want to host your
website yourself, or if you want to dive in and edit
| | 00:04 | the HTML, you can always export
the site to HTML whenever you like.
| | 00:09 | To do this, go to the File menu and choose
Export as HTML, or you can press Command+E
| | 00:14 | on the Mac, or Ctrl+E on the PC.
| | 00:17 | In the Export dialog, you need to
enter the domain name of your site.
| | 00:21 | This will help with SEO
when you publish it online.
| | 00:23 | So in the case of this site, I'm
going to enter www.samoca-art.com.
| | 00:29 | Then I want to choose a location,
and I will place this on my desktop.
| | 00:32 | I am going to put a new
folder and call it export.
| | 00:37 | When you click OK, you'll see the
progress bar slowly export all of your content.
| | 00:42 | After you export, your default web browser
will open up the website so you can look at
| | 00:46 | it locally on your desktop.
But right now I don't need to look at this.
| | 00:49 | Let's minimize Muse and look
at the files on our desktop.
| | 00:53 | Inside our Export folder are all of the
files that create our website, including each page
| | 00:57 | as an HTML file, the CSS,
individual images, and the scripts.
| | 01:02 | You also see a sitemap.xml file which is
the structure of the site that helps with SEO.
| | 01:07 | If you want to edit the page, you
can open them up inside Dreamweaver.
| | 01:10 | So I'm going to grab About Us and
drag it onto Dreamweaver to open it up.
| | 01:15 | Inside Dreamweaver, I need to turn on Live
View to be able to see how it looks in a web browser.
| | 01:19 | And if I want to make changes, I could make
them in here, or I could go into Split View
| | 01:23 | and entered the code directly.
| | 01:25 | Realize if you do make any changes inside
Dreamweaver, and you save your HTML files,
| | 01:29 | those changes will not be updated inside Muse.
| | 01:32 | This is a one-way workflow, similar
to how you work from InDesign to PDF.
| | 01:36 | If you make a change inside the resulting PDF, that
change won't be reflected inside the InDesign file.
| | 01:42 | If you are a developer who enjoys working
with code, it's likely that you could have
| | 01:45 | handwritten cleaner code than Muse.
| | 01:47 | However, for most people, the export is good
enough, and in fact, the export will continue
| | 01:50 | to improve over time as
there are more updates to Muse.
| | Collapse this transcript |
| Uploading your site via FTP| 00:00 | In order for your website to live
online, you have to place it with a host.
| | 00:04 | Now, if you have your own host other than
Adobe Business Catalyst, you can use the built-in
| | 00:09 | FTP program to upload all the necessary files.
| | 00:13 | If you want to use your own FTP client, you
can always go to File > Export and just export
| | 00:17 | the code yourself and upload it yourself.
| | 00:19 | But if you have the client information for
your own host, it's a lot easier to use the
| | 00:23 | built-in FTP client inside Muse.
| | 00:25 | To do that, we're just going to
go to File > Upload to FTP Host.
| | 00:30 | Because I've used Muse before to upload to
a website, it's asking me if I want to use
| | 00:34 | the information I've already entered.
In this case, I'm going to say Allow.
| | 00:38 | If you've already entered information
here, it will remember it for future use.
| | 00:42 | The first location is the domain itself.
| | 00:44 | This is where you want to enter the
address where this is going to live.
| | 00:47 | Next, you need to put in the FTP information.
| | 00:50 | If you don't have this information, you're
going to want to talk to your host, and they'll
| | 00:53 | be able to give it to you.
| | 00:54 | The host directory is the folder
where your files will be uploaded.
| | 00:58 | If you have a specific location,
you're going to want to enter that.
| | 01:00 | Otherwise, it will be
placed in the root directory.
| | 01:02 | The Login is your username and
the Password is your password.
| | 01:06 | And finally, you can choose if you want to
upload all of the files to your host or just
| | 01:10 | the modified files, because if you've only
made a few text-based changes or something
| | 01:13 | small, it's a lot faster to
only upload the modified files.
| | 01:17 | In my case, I've only made a few small changes.
So I'm going to choose Only Modified Files.
| | 01:21 | Then I'll click OK.
| | 01:23 | I'll allow it to use my credentials, and then
we'll watch the progress bar after it's uploaded.
| | 01:28 | Finally, when the site is finished loading,
it will show up in your web browser, and you
| | 01:31 | can take a look at it.
| | 01:32 | You might have to refresh your web
browser to see the latest version.
| | 01:36 | Uploading to an FTP
client is very easy with Muse.
| | 01:39 | Keep in mind that if you give your Muse
file to someone else, your username and password
| | 01:43 | will not be included with the .muse file.
| | 01:45 | They will need a login and password for
themselves in order to upload your content.
| | Collapse this transcript |
| Publishing your site to Business Catalyst| 00:00 | When you're finished testing your site
locally and you're ready to publish it
| | 00:03 | online, there are two different
methods that you can choose from.
| | 00:07 | One option is to export the HTML
directly and handle it yourself.
| | 00:11 | We covered this in the earlier movie.
| | 00:12 | The other option is to publish
directly to Business Catalyst.
| | 00:16 | If you've never heard of Business
Catalyst, it's a way to manage and upload your
| | 00:20 | websites directly from Muse--
probably the easiest way to get your content
| | 00:24 | online, because you don't
have to deal with code at all.
| | 00:27 | Business Catalyst will handle all of
your hosting, and what I mean by that is
| | 00:31 | it takes all of the HTML and CSS files
that Muse generates and puts them online
| | 00:36 | so other people can view the website.
| | 00:37 | You can publish on your own, but
Business Catalyst makes it very easy.
| | 00:42 | In this movie, we're going to create a test site.
| | 00:44 | When you publish your site, you can
either publish it to a temporary test site
| | 00:48 | so other people can see the
website for a short while,
| | 00:51 | or you can publish it to your own
domain, like www.thenameofyourcompany.com.
| | 00:57 | To publish your website, just press the
Publish button at the top of the screen,
| | 01:01 | or you can go to File > Publish.
| | 01:04 | Because this is an already-
published website, it's connected to a URL.
| | 01:09 | So what I'm going to do is go down to
Options and change where I'm going to publish to.
| | 01:13 | In this case, we'll choose New site.
| | 01:16 | If you've never published with Muse
before, this is how your screen would look.
| | 01:21 | Our first step is to create a site name.
| | 01:23 | If you want to try to enter
your own URL, you can do that.
| | 01:26 | But for now I'm going to keep this default.
| | 01:29 | We can also choose data
center that's closest to you.
| | 01:31 | Automatic will sense your location,
but in this case I'm still going to
| | 01:35 | choose United States.
| | 01:36 | I'll click OK and now Adobe Business
Catalyst is creating a temporary site for us.
| | 01:47 | Now the website has been published
online. You can share this URL with anyone
| | 01:51 | and they'll be able to view it.
| | 01:53 | The URL that's created
is unique to this website.
| | 01:56 | Now it's kind of long, and we
probably don't want to use this for an actual
| | 02:00 | website, but its fine for testing purposes.
| | 02:02 | After publishing to this temporary site,
the website will stay online for 30 days.
| | 02:07 | Anytime you make a change to the Muse
file, it will be renewed for another two
| | 02:11 | weeks, and you can do this for up to two years.
| | 02:13 | But eventually, you're going to
want to transfer it to your own URL.
| | 02:17 | Even though it doesn't have an ideal URL,
it's a great way to quickly get your
| | 02:21 | content online for testing or showing
your client the progress of the site.
| | Collapse this transcript |
| Updating your site| 00:00 | After publishing your site, there's
a strong possibility that you'll
| | 00:04 | need to make changes eventually.
| | 00:06 | How these changes are handled
depends on your export method.
| | 00:10 | Did you export via HTML or did you publish
your site directly to Business Catalyst?
| | 00:16 | If you exported your site via
HTML, and uploaded it yourself,
| | 00:21 | what you'll need to do is go back in
to Muse and go to File > Export as HTML,
| | 00:26 | again if you make any changes in Muse.
| | 00:29 | Then, you'll have to grab all of
the content that you've exported
| | 00:32 | and upload all of it again to your Web server.
| | 00:35 | If you've exported your web site to HTML and
then made changes to that exported content.
| | 00:40 | For example, you tweak the CSS, when
you re-export from Muse those CSS files
| | 00:46 | that you've changed will no longer
be there and you'll have lost them.
| | 00:50 | So keep in mind, when you export from Muse,
you don't want to make any more changes
| | 00:54 |
to the Muse file because you'll have
to redo every single manual change
| | 00:58 | in the code by hand again.
| | 01:02 | If you've published with Business
Catalyst, it's very easy to make changes.
| | 01:06 | So if you plan on making changes
to your Muse file regularly,
| | 01:10 | I recommend you use
Business Catalyst as your host.
| | 01:13 | Let's take a look at the temporary site
that we generated in the previous movie.
| | 01:17 | I can do that by going to the Publish
tab, and then clicking on the URL
| | 01:22 | that's located underneath Site Name.
| | 01:23 | So right now the web site looks good,
but let's say the client came back to me
| | 01:29 | and told me that they wanted to
move VISION New works from the
| | 01:32 | SAMOCA Art Collection up a little bit.
| | 01:34 | Well, to do that, I'm
going to go back into Muse
| | 01:38 | and I'm going to cancel out of
this dialog and go to the Home page.
| | 01:42 | Next I'll select this group, and I'm going
to click and drag and put it on the top.
| | 01:46 | After making this change, we're going
to press the Publish button again.
| | 01:52 | Next, when I press the Options button I
can see where I'm going to be publishing to,
| | 01:57 | and I want to publish to that temporary site.
| | 01:59 | You'll notice that it says Only modified
files, because since I made just a small
| | 02:04 | little change it doesn't make sense to
have to re-export the entire web site.
| | 02:08 | This will be a much faster export.
| | 02:10 | However, if you want to export everything
again, you can just choose All files
| | 02:15 | and then the entire web
site will be refreshed.
| | 02:17 | Sometimes this is a good idea, if you
updated to a new version of Muse,
| | 02:22 | because over the time Muse will
re-optimize the HTML export.
| | 02:25 | So if you find yourself updating Muse
it's probably a good idea to change
| | 02:30 | the Upload to All files.
| | 02:31 | So now we'll press OK and you can
see the export went much faster.
| | 02:37 | Now that we're viewing the test site online
you can see that our change has been updated.
| | 02:42 | After publishing your site to Business
Catalyst you may eventually want to
| | 02:46 | move your site to your own domain.
| | 02:48 | You can do this by pressing the Manage
button at the top of the screen within Muse.
| | 02:53 | After pressing this button, you'd be brought
to the Admin page in Business Catalyst.
| | 02:58 | From here, you'll be able
to view your analytics
| | 03:01 | as well as manage various
aspects of your site.
| | Collapse this transcript |
| Viewing analytics for your site| 00:00 | One of the most powerful aspects of the
Web is the ability to have analytics or
| | 00:05 | information about how people
interact with your site.
| | 00:08 | When you create a printed catalog, you
know how many people that you may have
| | 00:12 | sent the catalog to, but you don't know
how many people are actually reading it,
| | 00:16 | lat alone, what areas of the
catalog they read the most.
| | 00:19 | With the Web, we're able to find
out this information and even more.
| | 00:24 | If you've published a Business
Catalyst from Adobe Muse,
| | 00:27 | you probably have
created a temporary site.
| | 00:29 | When you have a temporary site, you're
not able to view any analytic information.
| | 00:34 | In order to view this information,
you first have to upgrade your site.
| | 00:38 | This file that I have opened in Muse
has already been connected to an upgraded
| | 00:41 | Business Catalyst account.
| | 00:43 | So I can press to Manage button
to view additional information.
| | 00:46 | While I'm managing this
site in Business Catalyst,
| | 00:50 | my first view is a quick
Dashboard of information.
| | 00:53 | This'll tell me the unique
visits to my web page.
| | 00:56 | If I press the minus button
on the right hand side,
| | 00:59 | I can view more
information than a week.
| | 01:01 | Here's two weeks,
three weeks and so on.
| | 01:04 | To view more information, I'll click
on the Reports tab on the left.
| | 01:10 | Here's where I can see the Visitors.
| | 01:12 | This information might be useful because I
can find out when people are visiting the site.
| | 01:16 | Maybe it's a certain day of the week,
| | 01:18 | or after I've published
updated information.
| | 01:19 | I can also see where
they're visiting from.
| | 01:22 | In this case it's all
over the United States,
| | 01:25 | but they don't have a very
large international audience.
| | 01:29 | The Traffic Sources tab will tell me
how people are coming to this site.
| | 01:32 | In this case, it looks like
most people are coming directly
| | 01:35 | as opposed to a referral
link or a search engine.
| | 01:38 | As I go down, I can see what people are
searching for to get to the web site,
| | 01:42 | and even what search engine they're using.
| | 01:43 | Back in the Visitors
tab, if I go to Browsers,
| | 01:47 | I can see what web
browsers people are using.
| | 01:50 | Right now it looks like Safari
is the most popular, then Firefox,
| | 01:53 | and finally, Internet Explorer.
| | 01:55 | In the More dropdown, I can even see
what Operating System people are using,
| | 01:59 | and in this case, it looks like
the majority are Macintosh users.
| | 02:03 | If I go down to the Filter, I can
change the Filter from last month
| | 02:07 | to even the last six months to
see if it's changed over time.
| | 02:11 | And looking at it now,, it looks
like the Macintosh is still winning.
| | 02:14 | Be sure to pay attention to your analytics
so you can respond to the results.
| | 02:18 | For example, if you find that a majority
of people are using a certain Web browser,
| | 02:22 | it's probably a good idea to spend
some extra time to thoroughly test
| | 02:25 | your site with that browser.
| | 02:26 | If they're using an outdated
version of Internet Explorer,
| | 02:29 | and that makes up a substantial
portion of your visitors,
| | 02:32 | you'll want to make sure that there aren't
any issues that you're not aware of.
| | Collapse this transcript |
| Working with in-browser editing| 00:00 |
After publishing your website, sometimes
you are completely finished working on it.
| | 00:04 |
But quite often, changes do need to be
made.
| | 00:08 |
If you happen to be making a website for
a client, it can be advantageous to let
| | 00:12 |
them make the changes to the site via
in-browser editing.
| | 00:16 |
I do need to state that this feature will
only work if you're using Adobe Business
| | 00:19 |
Catalyst as your host.
If you're using your own host, you will
| | 00:23 |
not have this functionality.
Now after you've published your site,
| | 00:28 |
there's a few things you're going to need
to do in order to make it available for
| | 00:32 |
editing by the client.
The first thing you want to do is inside
| | 00:35 |
Muse, go to File > Site Properties.
In here, you want to make sure you're in
| | 00:41 |
the Content tab, and you click Enable
In-Browser Editing.
| | 00:46 |
That has to be turned on in order for
your site to be able to be edited by your client.
| | 00:52 |
After you've done this, you can go to the
Manage button.
| | 00:55 |
And it will bring you online to the Adobe
Business Catalyst Manage page.
| | 01:02 |
From here, you need to create a ID for
your client, so they can log in and make
| | 01:06 |
changes to the site.
So what we're going to do is go to Site Settings.
| | 01:11 |
And down here, there's an option called,
Admin Users.
| | 01:14 |
Here you need to create a new admin user.
So what you would do, is click Invite
| | 01:19 |
Admin User, and then you would give them
an email address, a first and last name
| | 01:23 |
and even a phone number if you need to
reach them.
| | 01:25 |
Then a user role, either as administrator
or client or a user.
| | 01:30 |
Each of these levels have varying degrees
of control for editing.
| | 01:33 |
It's probably a good idea to give them
the client option, so they can make text
| | 01:37 |
and image changes.
Now, I've already made one, so I can hit Cancel.
| | 01:43 |
After creating the account, your client
will receive an email and they will need
| | 01:47 |
to fill out a password so they can log
into the site.
| | 01:51 |
Once they've done that, what they need to
do, is go to the website's domain.
| | 01:56 |
In the case of our site here, it's
samoca-art.com, and then I just put admin.
| | 02:03 |
It is whatever your URL is and then you
just put slash admin.
| | 02:09 |
After they do that, they just need to
enter their email address and their
| | 02:13 |
password so they can log in.
I'm already logged in right now, so I'm
| | 02:16 |
just going to close this tab and we'll go
back to the main page.
| | 02:20 |
Once they're here, they just have to hit
Edit.
| | 02:24 |
After they've hit edit, there will be a
little Getting Started that will explain
| | 02:27 |
how it works, but I'm just going to close
that right now.
| | 02:29 |
And what they're able to do, is switch
between the varying views or devices that
| | 02:34 |
you've published.
So, right now I'm on the desktop version
| | 02:36 |
but if I wanted to switch to phone or
tablet version, I can easily do that for editing.
| | 02:43 |
We'll stick to desktop for the moment.
Now that we're here, as I mouse over
| | 02:47 |
anything, we'll be able to either go to
that particular link or find out if we
| | 02:51 |
want to edit it.
So in this case of this picture, as I
| | 02:54 |
mouse over, I'll see the little pencil
which means I can edit.
| | 02:58 |
So I'll click and it will pop up and say,
alright well, what picture do you want to
| | 03:02 |
replace it with?
You can grab one from the site, or you
| | 03:06 |
could upload one from your own computer.
For now, let's say I'm just going to
| | 03:09 |
replace it with a different image.
Let's grab this one.
| | 03:12 |
I could give it a different tool tip if I
needed to, but for now I'll leave that
| | 03:15 |
alone and I'll just click Update.
There, now it's been updated.
| | 03:19 |
Now if I want to edit text, I'll mouse
over this and click Edit.
| | 03:23 |
And I'll just update this for 2013.
I'll do that and we'll click OK.
| | 03:29 |
And we'll see it's updated.
Now one thing to keep in mind, is you
| | 03:32 |
want to be really careful with the
editing of the text if there's a lot of
| | 03:34 |
rich formatting.
At the moment, it's fairly limited for
| | 03:38 |
the formatting of text that you can do.
You could only do it in the actual word,
| | 03:42 |
so for example if bird-watching was bold,
and everything else wasn't, you'd have to
| | 03:46 |
be careful that you only edited the words
inside bird-watching.
| | 03:50 |
So bird-watching would remain bold.
Then everything else would stay the way
| | 03:53 |
it is.
So just be careful how you edit your text.
| | 03:57 |
When you're finished with these changes,
you can hit Publish.
| | 03:59 |
And it will publish these changes
directly online to the website.
| | 04:04 |
After making these changes online for the
client, they may notify you and say hey,
| | 04:08 |
I made a few changes.
Well what happens to your Muse file?
| | 04:11 |
Let's go back into Muse.
Now the next time I'm in here and I hit
| | 04:16 |
Publish and I click OK, it's going to
say, hey, some changes have happened
| | 04:21 |
online since we've published.
Would you like to review them before we publish?
| | 04:25 |
Well, let's click Review to see what
changes were happening online.
| | 04:30 |
As I'm in review, it'll go to the actual
page, and it will tell you exactly what happened.
| | 04:34 |
We can see here that it's telling me that
one of the pictures has been replaced on
| | 04:38 |
the website.
If I click Preview on Page, I can see it
| | 04:41 |
swap in and out.
And I can decide if I either want to
| | 04:44 |
merge this into Muse or if I don't want
to merge it into Muse.
| | 04:48 |
And I can even decide if I want to merge
everything from this point on or not
| | 04:52 |
everything from this point on.
For now I'm happy with this, so I will
| | 04:55 |
merge that into Muse.
The next one here are my text changes.
| | 04:59 |
I can see exactly what happened and we'll
preview that.
| | 05:01 |
I think that's pretty good.
Let's merge that into Muse.
| | 05:05 |
And there's all the changes, and now we
can hit Publish now and these final
| | 05:09 |
changes would be put online.
Working with the in-browsing editor is a
| | 05:13 |
very useful way to have clients make
minor changes to a site to update it and
| | 05:18 |
maintain it themselves.
But it's always a good idea to keep an
| | 05:21 |
extra back-up copy of your Muse file,
just in case your client goes overboard
| | 05:26 |
with changes and you accidentally merge
them into your working Muse document.
| | 05:30 |
| | Collapse this transcript |
|
|
14. Creating Mobile SitesCreating a mobile site| 00:00 | When you are creating a new website in Muse,
you can choose what the initial layout will
| | 00:05 | be. Desktop is a default choice, but let's
take a look at how to create a tablet- or phone-
| | 00:10 | optimized site too.
| | 00:11 | We are going to choose Create a New site,
an in this New Site dialog box, you can see
| | 00:16 | it says Initial Layout, and it's
Desktop, which is your default set.
| | 00:21 | But in this case I am going to choose Tablet,
because I am going to design a website dedicated
| | 00:25 | for a tablet, like the iPad.
| | 00:27 | When I choose Tablet, I will put in the
dimensions 768x1024, because that is the common size
| | 00:33 | for a tablet. But you will notice over on
the right-hand side where it says Padding,
| | 00:37 | we have Top, Left, Bottom, and Right.
| | 00:40 | But if I switch this back to Desktop, we can
see we have just Top and Bottom, and Left is
| | 00:46 | grayed out, with this option
called Center Horizontally.
| | 00:48 | That is because you can center websites within
the web browser on a desktop, but on a tablet
| | 00:54 | or a mobile device, you really can not do
that at all, so that happens to be disabled.
| | 00:57 | But I will leave this at Tablet for now.
| | 01:01 | When I choose this and click OK, we
will be back to the Plan view and we could see
| | 01:04 | we have our Homepage.
| | 01:06 | Looking at this, we will see it
is a vertical view of a tablet.
| | 01:09 | We don't have to worry about designing horizontal view,
because it will reflow or scale if you rotate the tablet.
| | 01:14 | I am going to go through and add a couple
more pages, such as Home, About Us, and maybe
| | 01:20 | a Contact. And this works just like
the regular Desktop view if you need to.
| | 01:26 | If I wanted to I could even add Phone Pages
or a Desktop version too, but we will talk
| | 01:30 | more about that in the later movies.
| | 01:33 | Some things you want to think about when you
are designing for a mobile device is you want
| | 01:36 | to make sure you do not use any Flash animations.
That's because the Flash web browser plug-in
| | 01:42 | does not work on mobile devices.
Instead, I recommend you use Adobe Edge Animate.
| | 01:46 | I have a movie earlier in the
course all about Adobe Edge Animate.
| | 01:49 | You should also be careful with
pinning items to the web browser.
| | 01:53 | While that works great on the desktop, it
isn't consistent across all mobile browsers.
| | 01:58 | And finally, small assets for smaller
devices like the phone is probably a good idea.
| | 02:04 | You want to make sure you do not put really
large images on a phone because it will take
| | 02:08 | longer to download if someone is trying to
get this via a small weak wireless signal.
| | 02:12 | You do not have to do anything extra in order for
your mobile website to be viewed on a mobile device.
| | 02:17 | When you publish or upload your site,
Muse will automatically write the necessary code
| | 02:22 | for the mobile device to
autodetect which site they'll see.
| | Collapse this transcript |
| Adding a tablet site| 00:00 | If you've already created a Muse site for
the desktop, you may want to adapt this content
| | 00:05 | for viewing on tablets,
like the iPad or Kindle Fire.
| | 00:08 | While your content could be viewed on these
devices, you can create a better user experience
| | 00:13 | by building specific layouts for these sites.
| | 00:16 | We are looking at a finished desktop site,
but what we want to do is add a tablet version
| | 00:21 | of it, so at the top of the screen
we are going to click on the +Tablet.
| | 00:25 | When we do this, it will say Add Tablet
Layout, and we have to decide, do we want to copy
| | 00:30 | anything from an existing site?
| | 00:32 | In this case, yes, I want
to copy it from the desktop.
| | 00:35 | And what it is going to do is copy the site
plan or the structure of the individual pages
| | 00:40 | and any page attributes or browser fills.
| | 00:43 | In this case, the first two is what I want.
| | 00:45 | So I am going to click OK, and it will take
a moment, and we can see all of the pages get
| | 00:50 | added to the Tablet page.
| | 00:52 | Now looking at these pages, it looks
rather blank, and that is because it doesn't copy
| | 00:56 | over any of the content.
| | 00:58 | So what we have to do is
manually copy and paste that over.
| | 01:01 | So what we will do is go to our Desktop, and
I am going to go down to the Master page on
| | 01:05 | the Desktop, and I am going to do Select All,
Command+A or Ctrl+A on the PC, and copy it.
| | 01:12 | Next, we are going to go to the Tablet page
and go down to that Master and paste it in.
| | 01:20 | I am going to zoom out a little bit so I can
see everything, and we are just going to kind
| | 01:24 | of position this down here. And at the top,
we are just going to resize the logo so it
| | 01:30 | fits a little better on this page. And the
Menu, we are going to put right down here,
| | 01:35 | and I am going to resize this to just get a
little tighter so it looks good. There we are.
| | 01:40 | And then for the Footer, we can bring this
top area down. And we are going to zoom in
| | 01:45 | so we can see this, and we will just resize each
of these individual pieces so it fits the page.
| | 01:51 | I want to make sure it snaps to the edge,
so we don't have any gaps, and then we will
| | 01:57 | get rid of these repeating tile, put this
here. It looks like we have some extra text we
| | 02:01 | do not need, so I am just going to get rid of that
back there, and we will resize this. There we go.
| | 02:08 | That looks pretty good. And then we
will just center this right at the bottom. There.
| | 02:12 | Now if I zoom back out--and I will lower
this right here--we have a nice master page set
| | 02:19 | up for all of our tablet pages.
| | 02:22 | If we go back to the Plan
view, everything looks good.
| | 02:25 | Our next step is to copy and
paste over all the individual content.
| | 02:28 | So we are going to go over our desktop
page and I am going to go to Volunteer. I will
| | 02:34 | do a Select All and copy to the clipboard.
| | 02:38 | Because I am on a page, we do not have to
worry about the actual master page content,
| | 02:42 | because remember, that's locked.
| | 02:43 | We can only access that on a master page.
| | 02:45 | We will go back to the Tablet section, go to
Volunteer, and we will paste it in. It usually
| | 02:52 | helps to zoom out a little bit, so we can
start to position things a little better.
| | 02:55 | I am thinking that's pretty good. I am going
to hold down the Command or the Ctrl key on
| | 03:00 | the PC to crop this image a little bit and
then we will resize this to line this up,
| | 03:06 | grab these other items, and
position them right here.
| | 03:10 | Now, you have to be careful when you are
moving your items, because in this case, it is hard
| | 03:13 | to see, but I actually missed this little
image right here. So I am going to do an Undo,
| | 03:18 | and I am going to click and drag to make sure I
grab everything in that section and then drag it over.
| | 03:25 | One thing you might want to do is make sure you
group your items before you copy and paste them.
| | 03:29 | That way you do not miss
any individual little items.
| | 03:32 | Back to the Plan view, we can see that I
have that one page finished, and now I will just
| | 03:36 | have to repeat this process
for the rest of the layout.
| | 03:39 | Depending on the complexity of your site,
the difficulty of converting your desktop
| | 03:43 | site to a tablet site may vary; however, it
shouldn't be too much work, because the size
| | 03:48 | of tablet screens is pretty
similar to the size of a desktop.
| | Collapse this transcript |
| Adding a mobile phone site| 00:00 | One of the more unique challenges facing web
designers is creating websites for small screens.
| | 00:05 | While it is possible for smartphones to
display an entire desktop site, the user experience
| | 00:11 | can be subpar, since you may have to zoom in
and pan around to find a relevant information
| | 00:16 | that has been designed for a much
larger screen size than you are looking at.
| | 00:21 | Let's take a look at how to create a specific
site dedicated for a mobile phone within Muse.
| | 00:26 | Now, we are looking at a document that has
been designed for the desktop and--if I click
| | 00:31 | on the Tablet--for the tablet already.
But what we want to do is add a phone to this site.
| | 00:37 | So we are going to click at the +Phone button.
| | 00:39 | Similar to what we did with a Tablet Layout,
we are going to copy from the Desktop and
| | 00:44 | we will copy the Site Plan
and all the Page attributes.
| | 00:48 | Now, this time, rather than bringing over all
of the information from the main desktop site,
| | 00:52 | we are going to create a simplified, shorter,
smaller, phone site, so we are going to remove
| | 00:58 | some pages we do not need.
| | 00:59 | I am going to remove the Collections because
I do not want people to browse the Collections
| | 01:03 | from their phone-optimized site, because
it is far too complex for a small screen.
| | 01:07 | So let me get rid of those pages, and I am
also going to get rid of this Pasteboard page.
| | 01:12 | So now, we have a very short four-paged site, and now
we have to copy over the content to fill these pages.
| | 01:19 | Back on our Desktop site, I have a
Pasteboard over here called the Phone pasteboard, and
| | 01:24 | I have already predesigned all
of these pages for the phone size.
| | 01:29 | So what we need to do is I am just going to
select this and copy that to the Clipboard.
| | 01:33 | I am going to go back to the adding phone
page and we will choose Phone (Home). I will
| | 01:42 | paste this in, and that
looks pretty good right there.
| | 01:46 | Now, at the moment, we see that we don't have a
header or a footer, so I need to add a master page to this.
| | 01:52 | So, back to the Plan view, I am going to go
to my Desktop, and on my Desktop, I am going
| | 01:57 | to grab that homepage.
| | 01:58 | I am going to zoom out and I am going to
select all of this and copy it to the Clipboard.
| | 02:04 | We will go back to the Plan view, go to
the Phone page, and go to the Phone's master.
| | 02:09 | On the master, we are going to paste.
| | 02:12 | We're probably we are not
going to use all this content.
| | 02:15 | We will have to zoom out to see it, because
we are on a very small site, and I am going
| | 02:19 | to get rid of the logo. And we are just
going to bring the menus right down here, and we
| | 02:24 | are going to bring the other items up. So I am
just going to click and drag to bring this up here.
| | 02:29 | This repeating tile is a little too busy
for this page, and we are just going to resize
| | 02:33 | this footer. There's some extra text over
here we do not want. And I will zoom in so
| | 02:39 | we can see this a little easier. That's looking
pretty good, and we will make it fit it nicely
| | 02:45 | on the sides, there.
| | 02:49 | Now for the text, I am going to have to wrap
this down to a second line, so I am just going
| | 02:56 | to select this and put a Return in, and
then reposition this so it is nice and centered
| | 03:02 | and get rid of the extra
spacing over here. There we are.
| | 03:06 | That looks like a good footer.
| | 03:08 | Now, back up at the top, there is no way this is
going to fit on the page; it is far too large.
| | 03:12 | So I am going to grab the side of this and
just bring this in to get it a little closer,
| | 03:17 | so we can have everything fit nicely.
| | 03:19 | But looking at this, this text is a little
too big, so we are just going to go to our
| | 03:23 | Font Size--and that is
going to be in our Text menu--
| | 03:26 | and we are going to bring the Font Size down to
about--I think 13 point looks pretty good.
| | 03:34 | There we are, and maybe we would make this line
separator a little taller. That is looking pretty good!
| | 03:41 | With this closed, I can close these
additional pages, and now I am going to the Home Phone
| | 03:45 | page, we can see that, oh,
that looks pretty good at the top,
| | 03:48 | and that's looking pretty good at the bottom.
And I will just position this centered right here.
| | 03:53 | And back in out Pasteboard, I can just
go and start to copy the rest of this.
| | 03:57 | So I am going to copy this page, go back to
Plan. We will grab About Us, paste it in here.
| | 04:05 | That looks pretty good, on the Pasteboard
page. We will grab this text, copy it to the
| | 04:13 | clipboard, back in the Phone view,
Volunteer, paste this one in here.
| | 04:21 | And as you can see, as I drag down, the
footer, just like the desktop pages, will continue
| | 04:26 | to expand to give us more room.
| | 04:30 | And then finally, the last page in the Plan
view we need to get is the Contact Us information.
| | 04:39 | I'll grab this, go to Contact Us, we will
paste it in, and that is looking pretty good.
| | 04:46 | And just so you know, if you are pasting over
the map from the larger size, like the desktop
| | 04:52 | or a tablet, the map may not fit, and you
can't click to drag and resize it to make it fit
| | 04:57 | because we have to edit the HTML.
| | 04:59 | So all you have to do is select this HTML
widget, right-click, and choose Edit HTML.
| | 05:06 | Within this you can change the Height and
the Width code to make it whatever size you
| | 05:10 | need this to be, and that
is looking pretty good here.
| | 05:15 | While we made the decision to create a
phone-optimized site with less content,
| | 05:19 | you are able to making longer pages
with all the content from the desktop.
| | 05:23 | However, you may need to design some of the
widgets in order to make the links larger,
| | 05:28 | so people can use their fingers to
interact with them properly on smaller screens.
| | Collapse this transcript |
| Previewing mobile sites| 00:00 | After designing the mobile versions of
your website, it is important to test how they
| | 00:04 | will perform on mobile devices.
| | 00:07 | What may look good onscreen doesn't
always translate to the way that you would expect
| | 00:11 | them to work on various devices.
| | 00:12 | There are a few different ways
to preview your mobile devices.
| | 00:16 | Let's go to the Tablet view and we are going
to go the Homepage. And if I want to preview
| | 00:21 | this page, I can just hit the Preview button.
| | 00:23 | When I hit the Preview button, it's going
to be previewing it by the default size of
| | 00:28 | the iPad. And I can scroll down and look at it.
| | 00:31 | I can click on the links if I want to, to move
around the site, and it shouldn't work as expected.
| | 00:36 | One thing to keep in mind though, is this
isn't emulating how an iPad will render the site.
| | 00:42 | This is just using the built-in WebKit
Preview that you could use for all of Muse sites.
| | 00:47 | It's just using the
dimensions for a specific iPad.
| | 00:49 | If you would like to see what it would like
on another device, you can click over here
| | 00:54 | and try some others.
| | 00:55 | Let's try the Kindle Fire HD. And we can
see here, it's a lot taller, so maybe I want to
| | 01:00 | mixed some design consideration changes.
| | 01:03 | But for now, I am just going
to leave it back to the iPad.
| | 01:06 | There is a little Info Bubble I just want
to click on, and this will tell you that it
| | 01:10 | isn't previewing it on the device. It is just
showing you what it would look like with those
| | 01:14 | particular dimensions.
| | 01:16 | If you want to preview it on an actual device,
you actually have to have one of those devices to preview it.
| | 01:22 | Let me show you an example of what this
tablet site would look like on an iPad.
| | 01:27 | So here I am on an iPad, and I am scrolling
around with my finger on the device and just
| | 01:32 | mirroring it directly onscreen.
| | 01:34 | If I click on any of these links, it will go to
that particular page, and it works as expected.
| | 01:41 | Even on the Contact Us page, we have
the integrated map that we can use.
| | 01:46 | Let's see what it looks like on a mobile phone.
| | 01:49 | Here I am on the site with
the mobile phone interface.
| | 01:51 | I can scroll around and take
a look at it. I can zoom in.
| | 01:55 | And as I tap, it's really easy to navigate
to each of these pages, since I created large
| | 01:59 | navigation buttons.
| | 02:01 | It is unlikely that you will be able to test
your site on every device that is out there;
| | 02:05 | however, it is a good idea to test your site
on at least one tablet and phone to make sure
| | 02:11 | it is easy to navigate and
consume the content on your site.
| | 02:14 | Since Muse is updated frequently,
new phones and tablets will eventually make their way
| | 02:18 | into Muse, so you'll be sure that
your site is viewable across all devices.
| | Collapse this transcript |
| Linking between alternate layouts| 00:00 | Sometimes when you create alternate
layouts for smaller devices like a phone, you may
| | 00:05 | make a decision to change
the content that is displayed.
| | 00:08 | However, you can make a link back to the
main desktop version for visitors who don't mind
| | 00:13 | zooming around the larger page to find
the content that they are looking for.
| | 00:17 | I am on the phone version of this website,
and you can see we only have four pages of
| | 00:22 | content, but if I switch back to the desktop
version, we can see we have quite a few more
| | 00:27 | pages and there is a lot more pictures and text.
| | 00:30 | If I want to provide a link back to the main
desktop experience on a phone, it is as easy
| | 00:35 | as creating a hyperlink.
| | 00:37 | I am going to go to the Homepage and I am
just going to grab my Type tool and make a
| | 00:40 | text frame down here. And we are just going to
type in Desktop Site, and I will center this.
| | 00:46 | And with this selected, I am just going
to add a link back to the desktop site.
| | 00:50 | So going to my Link menu, and inside the Desktop
area, I am going to choose the Homepage, because
| | 00:56 | I want this to be a link back to
the Homepage on the Desktop site.
| | 01:00 | Next, I will grab this and just align this to
the center of the page. That looks pretty good!
| | 01:07 | And if I want to check this out, all I
have to do is publish this and then look at it
| | 01:11 | on a mobile device.
| | 01:13 | So let's take a look at this on a mobile device.
| | 01:15 | I am on my mobile device right now and as I
tap to each page, we can see we are completely
| | 01:21 | on the phone version of the page.
| | 01:23 | But if I want to go back to the main full
site, I will just click on Desktop Site.
| | 01:28 | Now, I am back to the main desktop site, but
I am going to have to pinch to zoom to read
| | 01:32 | everything that is on here.
| | 01:34 | Once you click on a link to visit the
desktop site, you do not have to worry about being
| | 01:38 | sent back to the mobile site.
| | 01:40 | Muse is smart enough to lock the code to that
specific version of the website while you are browsing.
| | 01:48 | If you want to go back to the mobile version,
you would have to close the browser and reopen
| | 01:52 | it and type in that URL or put a link
in on the main site to the mobile site.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Wow, that was a lot of information.
And now you're well on your way to create
| | 00:04 |
beautiful and engaging websites with
Adobe Muse.
| | 00:08 |
If your head isn't full from everything
that you've learned, here are a few
| | 00:11 |
resources to keep you busy.
To learn a little more about Muse, I'd
| | 00:15 |
recommend checking out, designing a
portfolio website with Muse by Steve Harris.
| | 00:20 |
If you want to learn more about Web
Design, we have Photoshop for Web Design,
| | 00:25 |
Illustrator for Web Design and InDesign
for Web Design.
| | 00:28 |
These three courses are designed for the
non-coder in mind, but just how to create
| | 00:34 |
assets for a website, which then you
could use inside Muse.
| | 00:38 |
You can also visit www.adobekb.com for
Muse tutorials, and more information from
| | 00:44 |
the Muse team.
They've got lots of information, like
| | 00:46 |
site of the day, and a widget gallery.
Another great site is www.musethemes.com.
| | 00:52 |
This is a website that will let you buy
actual themes to use for Muse.
| | 00:57 |
There's also a good blog here with
additional information.
| | 01:01 |
And then finally, you can follow me on
Twitter at twitter.com/jamesfritz, where
| | 01:06 |
I'll occasionally post some links and
tips and tricks for Muse and other products.
| | 01:10 |
And I would also like you to send me a
link to a website that you've designed
| | 01:14 |
with Muse.
I'd love to see what you're making, and
| | 01:16 |
I'll share it with my followers.
Thanks again for taking the time to learn
| | 01:20 |
with me, and I look forward to teaching
you again.
| | 01:22 |
| | Collapse this transcript |
|
|
