IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I'm Steve Harris and this is
Designing a Portfolio Website with Adobe Muse.
| | 00:11 | Getting starting in web
design can be intimidating task.
| | 00:14 | But now you can focus on designing your portfolio
website, while Muse takes care of writing the code for you.
| | 00:21 | In this course, I'll show you how to
efficiently plan your portfolio site by gathering content
| | 00:26 | and assets, then creating your site plan.
| | 00:29 | I'll show you how to add texture and
transparency to create depth in your design.
| | 00:34 | I'll demonstrate how to incorporate web
fonts to give your site a unique look.
| | 00:40 | We'll cover how to embed HTML content, then we'll add
built-in widgets to make your portfolio interactive.
| | 00:48 | Lastly I'll explain how to purchase and set
up a unique domain name as well as help you
| | 00:53 | to optimize your website
for great search rankings.
| | 00:57 | Investing the time and energy in building a
professional website to showcase your portfolio
| | 01:01 | is one of the most important aspects of
creating a successful business and with the release
| | 01:07 | of your new secret weapon--Adobe
Muse--the time has never been better.
| | 01:11 | So let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're Premium Member of the lynda.com
online training library, you have access to
| | 00:04 | the exercise files used throughout this course.
| | 00:07 | If you don't have access to the exercise files,
you can follow along using your own assets.
| | 00:12 | The exercise files for this course are organized
into subfolders for each chapter of the series.
| | 00:17 | Inside each chapter folder, you'll find a
separate folder for each individual movie
| | 00:21 | that contains all of the
graphics and working files.
| | 00:24 | Occasionally, when you open a site in Muse, you may
see an alert prompting you for missing links or assets.
| | 00:31 | This is because Muse will link files
relative to the location on your computer.
| | 00:37 | By clicking OK and clicking into a page on
the Muse site we can see in the Assets panel
| | 00:42 | on the right side that, we've got these red
question mark Alerts telling us assets are missing.
| | 00:47 | Simple way to update them all is to select
the first Asset, hold down the Shift key and
| | 00:51 | select last Asset and right-click
on any of them and select Relink.
| | 00:56 | Once you select Relink, you'll see the
original link location up at the top of the window.
| | 01:00 | Exercise Files/Assets/Portfolio/Final/1.
| | 01:05 | So let's just follow this path to Assets,
Portfolio, Final and 1.jpg and click Open.
| | 01:13 | And what Muse will do is work through those
links and find all of the other ones they're
| | 01:17 | still in that folder.
| | 01:19 | When you click OK, it will prompt you for the
next missing link that's in a different folder.
| | 01:23 | So this one is located in Exercise Files/Assets/Portfolio
and it's called Arrow_Circle_Left.png. Let's click Open.
| | 01:33 | So again Muse will go through and
find any of the assets that are missing.
| | 01:37 | Now simple trick to speed this all up would
be to move all of the assets directly into
| | 01:41 | this main Asset folder, I broke them down
by subfolders to make it easier for you to
| | 01:46 | find each one of them.
| | 01:48 | However, if re-linking of assets becomes a
problem for you, I recommend you just move
| | 01:52 | all of these files directly into the Assets
folder and then Muse will find them automatically
| | 01:57 | the first time you load up the website.
| | 02:00 | To make this course, more valuable
consider using products from your own portfolio to
| | 02:04 | build website instead of our exercise files.
| | Collapse this transcript |
| Understanding what you should know before watching this course| 00:00 | Before you dive into Designing a Portfolio
Website with Muse, I would recommend that
| | 00:04 | you watch the Muse Essential
Training on lynda.com by James Fritz.
| | 00:09 | James has done a great job covering all of
the important aspects of working with Muse.
| | 00:14 | Such as importing images, linking
files and setting up a basic site.
| | 00:19 | Designing a Portfolio website with Muse,
explores some of the more advanced features of Muse
| | 00:24 | and teaches you some of the cool tricks and
tips that you can use to make your Muse site
| | 00:28 | really stand out.
| | Collapse this transcript |
| Touring the Red30 Design portfolio site| 00:00 | Before we jump in to our training, I'd like
to give you a quick preview of the website
| | 00:04 | we're going to build in this course.
| | 00:06 | The site has been created for a fictional design
business called Red30 which is based in New York City.
| | 00:12 | The projects featured in the Portfolio are
real projects from my own design portfolio.
| | 00:17 | However, I would encourage you to try
using your own portfolio pieces for the course.
| | 00:21 | The red30 website follows a popular format
for portfolio websites featuring four main
| | 00:26 | pages a Homepage, Team page,
Portfolio and Contact page.
| | 00:32 | This site has lots of personality and
reflects the firm's love of New York City and their
| | 00:37 | own playful attitude.
| | 00:39 | Text has been limited in this site makes use of strong
photography and bold colors to create visual interest.
| | 00:45 | Nearly every widget available in the current
version of Muse is included in some form including
| | 00:50 | automatic navigation bars, a floating or
pinned contact menu, horizontal sliding galleries,
| | 00:57 | tabbed panels, light-box galleries and
finally Muse's built-in contact forms.
| | 01:04 | Now that you've had a chance to
see what we're going to create today.
| | 01:06 | Let's get started building your
own portfolio site in Adobe Muse.
| | Collapse this transcript |
|
|
1. Preparing Your Portfolio Content and LayoutExploring information design| 00:00 | The first step in building your website is
to determine what information you're going
| | 00:04 | to include and how that
information is going to fit together.
| | 00:07 | Depending on the size of your
website, this can be a difficult task.
| | 00:10 | But here's a few tips.
| | 00:11 | First off, I recommend you have a look on the
Internet at similar websites that are in your
| | 00:16 | industry and then you can get an idea
of how they've laid out their navigation.
| | 00:20 | So on my website which is visualarms.com,
I've included a fairly standard navigation
| | 00:26 | structure to most portfolio websites.
| | 00:28 | I have got an About page, a Design & Consulting
page that features some of my service offerings
| | 00:34 | and How It Works page.
| | 00:35 | This is a process page, Portfolio page to
display some work and also Contact page so
| | 00:40 | users can get a hold of me.
| | 00:42 | Now on many websites you will find that the
navigation system is a little bit more basics.
| | 00:46 | On Sarah Byrne site, we've got
simply Bio, Resume, Portfolio and Contact.
| | 00:51 | So you choose to use little bit more
simple words for the navigation system.
| | 00:56 | But the web is use source of inspiration, so
have a look at what's out there in your field.
| | 01:00 | A simple trick to determine your site map
and to figure out what content you're going
| | 01:04 | to include is to use Post-it Notes.
| | 01:07 | So first, I recommend you start by writing
down a Post-it Note and this is going to be
| | 01:10 | a content area on your website.
| | 01:13 | So I've got a testimonial section
that I'd like to include my site.
| | 01:16 | Repeat this step for every single content
area of your website, and when you're done
| | 01:21 | you have a large map listing all of the areas
of content that you like to include on the site.
| | 01:27 | Once you've got this giant scattered map,
you can go ahead and arrange them into columns.
| | 01:32 | These columns will clearly outline what
sections are going to fit on what pages.
| | 01:36 | So our Top Level Navigation would
be the top layer of these columns.
| | 01:41 | In this site, we've got a Homepage and About
Us page, Portfolio page and a Contact page.
| | 01:45 | Now if we jump over to Muse using our Plan
view we can basically mimic the Post-it Note
| | 01:50 | map we have used before.
| | 01:52 | If we click the plus button beside, we can
add a TEAM page, let's go head and add a PORTFOLIO
| | 01:58 | page and then finally, we
will add a CONTACT page.
| | 02:02 | Now you may notice I'm writing these all in
capital letters. That's because I'm going
| | 02:05 | to use an automatic menu widget in Muse and it
will display these names exactly as I write them here.
| | 02:11 | So I'd like them for style
purposes to be in all capital letters.
| | 02:14 | So using the Plan view in Muse, designers
can take a top-down look at their complete
| | 02:18 | site and identifying the sections where
content may be missing or need to be removed.
| | 02:22 | Also, consider using techniques away from the
computer to create a visual for your information
| | 02:28 | such as the Post-it Note
method I mentioned earlier.
| | Collapse this transcript |
| Generating content| 00:00 | It's standard practice in the web design
industry to request that your client provides you all
| | 00:05 | of the site content
prior to starting the design.
| | 00:08 | However when you're building your personal
portfolio site, this process often breaks down.
| | 00:12 | And the designer or visual artist will begin
the fun part which is actually designing the
| | 00:16 | website before generating any content at all.
| | 00:19 | This usually leads to extremely long development
or design time and sometimes completely stalling
| | 00:24 | out on the project.
| | 00:25 | So if you're a designer don't deviate from
standard process you use when working with clients.
| | 00:30 | Treat yourself as the client
and follow the same procedures.
| | 00:33 | It's always best to gather all of your
site content prior to starting the design.
| | 00:37 | I recommend you work in a
series of sequential tasks or events.
| | 00:41 | Stay focused and don't jump between tasks.
| | 00:44 | You want to finish one, start on the next.
| | 00:47 | Write your site content in a single word document,
using a new page for each button on the navigation.
| | 00:52 | And finally, when you're writing for the web
aim for volume and refine later. It's always
| | 00:57 | easier to cut content out than it is to
create it while you're on the design stage.
| | 01:01 | As you can see here, I've created a Word
document and I've used the top level navigation items
| | 01:06 | from my website as headings in the document.
| | 01:08 | So I've got my Home page and under this
heading, I've written all the content that is going
| | 01:13 | to be included in my site.
| | 01:15 | I've done the same thing for the About
page and same thing for Portfolio page.
| | 01:21 | So what this is going to do is just ensure
that, you don't get to a section in your design
| | 01:26 | and then you end up not having
any content to place in that page.
| | 01:29 | So I always recommend that you gather all
of your site content prior to starting the
| | 01:33 | design of your website as this will lead to a
smooth and efficient portfolio design project.
| | 01:38 | Structuring information in a logical format
is essential to designing a proper website
| | 01:42 | and your customers and users will
appreciate the time spent on this step.
| | Collapse this transcript |
| Wireframing the site| 00:00 | Determining where content is going to be
placed is important for building a website
| | 00:04 | that is consistent in look and feel, and can
be extremely helpful when you're developing
| | 00:08 | site elements and other design tools,
such as Photoshop or Illustrator.
| | 00:12 | Just as a print designer would when building
a brochure or flyer you'll often need to drop
| | 00:16 | in placeholders to figure out how content
is going to fit together and that's where
| | 00:20 | wireframing comes into play.
| | 00:21 | First, I'd recommend that you look at
common website structures or layouts online.
| | 00:26 | As you can see here the MailChimp website
uses a fairly standard layout in that we
| | 00:29 | have got a logo on the left-hand corner, the
navigation system to the right, a large banner
| | 00:34 | area below that with kind of a bold message,
and a four-column structure to the bottom.
| | 00:39 | If we were to wireframe this it might look
something like this--we've got a LOGO to the
| | 00:43 | left, NAVIGATION to the right and again a
BANNER and the four-column structure below that.
| | 00:47 | And all I've done here is just filled solid
blocks to outline where this content is going to be.
| | 00:51 | Another website is my site, musethemes.com.
| | 00:54 | MuseThemes has a little bit of a different
layout, in that we've got a centered logo
| | 00:58 | at the top, a centered navigation below that
and then a large bold banner and a three-column
| | 01:03 | structure to the bottom.
| | 01:04 | If we were to wireframe this it
might look something like this.
| | 01:08 | In Muse, we can easily wireframe
by just drawing rectangular boxes.
| | 01:13 | If I select our rectangular box or drawing
tool here, we can simply draw a rectangular
| | 01:18 | box in Muse and it's going to tell us the
dimensions of this box in a couple of different places.
| | 01:23 | As you can see here my box is
234 pixels wide x 86 pixels high.
| | 01:28 | We can also see these dimensions in the
Transform dropdown that's showing right here 234 x 86.
| | 01:35 | Now if we were to generate a graphic to fit
in this area, we could easily create a new
| | 01:38 | document or new file with those dimensions in
Photoshop, Illustrator, whatever you're working in.
| | 01:44 | So I'm just going to go
ahead and fill this with black.
| | 01:46 | And I'm going to go ahead
and duplicate this below.
| | 01:49 | Now when I duplicate this, I'm just going to
scale it out and I'll drop it right about there.
| | 01:54 | So I know that this banner image below
is 916 pixels wide x 260 pixels high.
| | 02:01 | We can use that to build our banner images.
| | 02:04 | Muse does feature extensive image control in
that we can copy or arrange image in different
| | 02:08 | ways and it will optimize them on export but
I always like to be in control and generate
| | 02:13 | graphics at the appropriate size.
| | 02:14 | Next, let's go ahead and duplicate this below and
we'll just get a sense of how wide our column is.
| | 02:20 | We can see here that our column is
214 pixels wide x 260 pixels high.
| | 02:26 | Now of course the height can change but if we
wanted to generate a graphic for that size we now know.
| | 02:31 | Wireframing Type, we're getting idea of how
much type is going to fit into a certain areas
| | 02:35 | using Muse as well.
| | 02:36 | If we use our Type tool we can simply drag
a text box across the screen and we could
| | 02:41 | fill this box with dummy text.
| | 02:43 | Now Muse doesn't have a built-in dummy
text tool like InDesign, but what we can do or
| | 02:49 | what's common in the web design industry
is to use what's called Lorem Ipsum text.
| | 02:53 | So Lorem Ipsum can be found at lipsum.com.
| | 02:57 | And what this will do is allow you to
generate dummy text that's been used in the printing
| | 03:00 | and typesetting industry since the 1500s.
| | 03:03 | On the website, we have the option to generate
as many paragraphs, words as we'd like to do.
| | 03:08 | So I'm going to go ahead and generate eight
paragraphs, and let's just click Generate.
| | 03:13 | Now this brings up a website with eight
paragraphs of dummy text, and if we were to copy one
| | 03:18 | of these paragraphs--go head back into Muse--
and paste it, we can get an idea of how much
| | 03:24 | text is going to fill in
specific areas of the site.
| | 03:27 | I always find it helpful to keep a Lorem Ipsum
document in my working files folder at all times.
| | 03:33 | I'll generate the text and I'll just drop it
into a text file so that I'm not constantly
| | 03:38 | revisiting Lorem Ipsum website.
| | 03:41 | While wireframing your website may seem
unnecessary at first, it will certainly save you a great
| | 03:45 | deal of time by the end of the project.
| | 03:48 | Having a rough guideline of how big graphics
or written content will be may help you avoid
| | 03:52 | unnecessary rewrites or having to export
new graphics at a completely different size.
| | Collapse this transcript |
| Adding a mobile or tablet layout (New)| 00:00 |
Users who are looking to create a unique
version of their website can now build a
| | 00:04 |
phone or tablet version directly within
their Muse working file.
| | 00:07 |
Here's a quick overview of how to add a
mobile specific layout to your existing
| | 00:11 |
Muse site.
You can see on the Plan view of our Red 30
| | 00:15 |
desktop website, we now have these new
buttons in the toolbar.
| | 00:18 |
It says plus Tablet, and plus Phone.
And if you hold your mouse over one of
| | 00:22 |
them, they say click to add a Phone layout
to your site.
| | 00:25 |
Let's go ahead and click to add a phone
layout.
| | 00:28 |
Once we do that, it brings up this dialog
box.
| | 00:31 |
We have a few options that we can set in
here.
| | 00:32 |
First we have Copy from, let's go Copy
from our Desktop.
| | 00:36 |
And what this will do is it will copy the
layout or the organization of the pages in
| | 00:41 |
the plan view, to our phone version.
It will not copy the actual design element
| | 00:45 |
or content over.
Simply because the desktop version of your
| | 00:49 |
site isn't sized properly to work on the
mobile version.
| | 00:51 |
Next we have the ability to copy page
attributes.
| | 00:54 |
That's things like Metadata and some of
the options you'll find in the site properties.
| | 00:58 |
Lastly, you can copy the browser fill,
which is just the background color that
| | 01:02 |
we've put in.
Let's leave that off and we'll click OK.
| | 01:05 |
Its synchronizes our layout, now you can
see we have a phone version of our website
| | 01:09 |
using the exact same layout as our Desktop
version.
| | 01:12 |
There's another way to add a different
version of your site and that's within the
| | 01:16 |
Site Properties box.
If we click File, and Site Properties, we
| | 01:20 |
can see our Desktop and Phone versions on
the left hand side.
| | 01:24 |
And below that, we have the ability to
Create a new layout.
| | 01:28 |
Let's click the New Layout button.
And Desktop and Phone are grayed out.
| | 01:32 |
We've already created those versions.
But let's go ahead and create a Tablet version.
| | 01:36 |
And then of course, we have the same
options, so we'll copy from our phone
| | 01:39 |
layout this time, and hit OK.
Now Muse has automatically created a
| | 01:44 |
tablet version of our site.
And you can see that by clicking the
| | 01:46 |
buttons in the tool bar in our plan view.
We can jump back and forth between the
| | 01:50 |
different versions, if we click into the
Home Page of our Desktop version.
| | 01:54 |
We can quickly jump to a page in our
mobile or tablet version by using the Go
| | 01:59 |
to Page button in the toolbar.
If we click Go to Page, it brings up this
| | 02:02 |
box, and in the drop down, you can see
that we have all of the different versions
| | 02:06 |
of our site.
And the small icons on the right note that
| | 02:09 |
this is the Desktop version, this is the
Tablet version, and this is the Phone version.
| | 02:14 |
So if we click on the home page on the
Phone version, and click OK, we'll jump to
| | 02:19 |
that page.
We can also jump to the matching page on
| | 02:22 |
another layout by going up to the page
drop-down and selecting Go to Matching Page.
| | 02:27 |
If we click the Tablet layout, what this
does, is it jumps us or send us to the
| | 02:32 |
home page on the tablet layout.
Whatever page matches the page that you're
| | 02:36 |
currently on.
Adding a tablet or mobile version to your
| | 02:39 |
existing Muse website is easy.
And the Muse team has provided a wide
| | 02:43 |
variety of options for you to quickly move
between each page within the different
| | 02:47 |
versions of your site.
| | 02:49 |
| | Collapse this transcript |
|
|
2. Designing Fundamental Elements with MuseCreating master pages| 00:00 | When you build your site in Muse you'll need to
use Master Pages as templates to guide the design.
| | 00:06 | Master Page templates cannot be edited
directly unless you're working within one, and it's
| | 00:10 | important to know what content to leave free
of the Master and how it's going to layer
| | 00:14 | throughout the site.
| | 00:15 | In this Muse file, I've included two pages
one called Standard and one called Floating.
| | 00:20 | Both have different
master pages applied to them.
| | 00:22 | If we want to see what master is applied to
each, we need to make sure that the Master
| | 00:25 | Badge is turned on.
| | 00:27 | And what that will do is just tell us in
this blue bracketed text below that this page is
| | 00:31 | using the Standard master and this
page is using the Floating master.
| | 00:34 | If we wanted to change one of these pages to
use a different master, we could just simply
| | 00:38 | right-click on it, scroll down to the
master's file and select Standard or Floating.
| | 00:43 | In a Standard master page, you'll notice that
I've included the logo, some header elements,
| | 00:49 | and then some footer elements.
| | 00:50 | I didn't include this large banner image
that you're seeing on the actual page itself.
| | 00:55 | The reason that I didn't include this image
is because if we include the image--I'm just
| | 00:59 | going to go ahead and cut it and paste it
onto the master page using Edit>Paste in Place.
| | 01:05 | You can see that it appears in the right spot,
however when we go to a standard web page we
| | 01:10 | can't actually edit this image.
| | 01:11 | So if we want this content to be different
through all the pages on our website we need
| | 01:16 | to make sure that it's free of the master.
| | 01:18 | In InDesign you can easily unlock
elements however you can't do that in Muse.
| | 01:23 | Now if you're worried about elements shifting
spots--that's one of the best reasons to use
| | 01:27 | a master page is to ensure the things stay
in the same place--you can use a handy trick
| | 01:31 | which is the Paste in Place command.
| | 01:33 | So if we go ahead and cut our banner from
the master page, jump back into the Standard
| | 01:39 | page and click Edit>Paste in place, what
Muse is going to do is paste that banner back in
| | 01:45 | the exact same spot as we
had it on the other page.
| | 01:48 | So if we were to go ahead and create
another page beside we could easily jump into that
| | 01:54 | page and click Edit>Paste in Place to make sure that
our banner is placed in the same spot on that page.
| | 02:00 | Another item to consider when you're
working with Master Pages, is how content is going to
| | 02:03 | layer throughout the site.
| | 02:05 | You can see on the my Master page called Floating,
what I've done is I've dropped in a logo however
| | 02:10 | I set the logo to be pinned to the top of
the browser just by clicking the Center Pin
| | 02:14 | option on the control bar.
| | 02:16 | Now that we've got that in place if we go
back to our actual Content page, we can see
| | 02:22 | that everything looks good.
| | 02:23 | However, if we preview this page and then
we scroll down you'll see that our logo is
| | 02:27 | going to float behind any of the page
content. That's not what we want to do.
| | 02:32 | And this is because master page items always
remain below the actual page content items.
| | 02:37 | So if you want something to stay pinned or
something be visible at all times, you need
| | 02:41 | to make sure that you're including it on each page
of the website rather than on the master page itself.
| | 02:47 | For most websites, the master pages will include
the elements that you want users to see at all times.
| | 02:52 | So items such as the logo, the navigation,
any sort of header elements or any sort of
| | 02:57 | footer elements, for the most part you'll
want to keep any of the actual site content
| | 03:01 | on the pages themselves.
| | 03:03 | Master pages are a really helpful way to ensure
consistency throughout your site and improve
| | 03:08 | the speed of your work.
| | 03:09 | Just be sure that the elements you place
on the master page are consistent throughout
| | 03:13 | all pages of the website as they cannot be
unlocked or edited when you're working on
| | 03:16 | the content pages.
| | Collapse this transcript |
| Building and placing graphics from Photoshop| 00:00 | The ability to build graphics using the other
creative suite software can be a helpful part
| | 00:04 | of building a professional and
modern portfolio site in Muse.
| | 00:08 | Photoshop is a favorite of web designers everywhere,
so here's a few tips for working with Photoshop in Muse.
| | 00:13 | If we click on this rectangle in Muse, we
can see that it has a width of 916 pixels
| | 00:18 | and a height of 200 pixels.
| | 00:19 | If I jump over to Photoshop, I can
create a new document at that size.
| | 00:24 | Let's click File>New, 916
pixels wide and 200 pixels high.
| | 00:29 | We're going to leave the resolution at 72
dpi and with the background contents, let's
| | 00:34 | set to Transparent and click OK.
| | 00:37 | So now we have this new document created
at the exact size of our image in Muse.
| | 00:42 | What I'm going to do is I'm going to go
ahead and place another image in, and let's just
| | 00:45 | place the image of our Apple. There you go.
| | 00:52 | Now that we've got the Apple placed in I'm
just going to move it up to the top of this
| | 00:54 | file, and I'm going to place in a shadow.
| | 00:57 | I've created the shadow ahead of time in
Photoshop just because although Muse does have the ability
| | 01:02 | to generate pretty cool shadows, Photoshop
still can do something a little bit more advanced.
| | 01:07 | So now that we've got the shadow placed in
I'm just going to move the Shadow layer to
| | 01:10 | the back and what we're
going to do is save this for web.
| | 01:14 | So if we click File>Save for Web, we get the
Save for Web dialog and this is where we can
| | 01:21 | optimize our image, save it
in different file formats.
| | 01:24 | So I'm going to leave this set as a PNG-24 image and
we need to make sure that Transparency is turned on.
| | 01:31 | If we were to save this as a JPEG for example,
you can see in our preview that it fills in
| | 01:35 | the transparent background with white, and
we want this to be transparent, so that we
| | 01:38 | can overlay this image on things in Muse.
| | 01:41 | So let's set PNG-24 and click Save.
| | 01:44 | I am just going to Save that to our
Desktop and we'll call it apple.png.
| | 01:50 | Now that we've saved this, let's go back to Muse and
let's go ahead and place the Apple image in this box.
| | 01:55 | I'm just going to zoom out slightly here.
| | 01:59 | Now there's two ways that we
can place this image in here.
| | 02:01 | We can change the fill.
| | 02:02 | So if we were to click on the box, select
Fill>Image. It will let us navigate to our
| | 02:07 | Apple image and if click Open, you
can see that it fills in the box.
| | 02:12 | Now the background of this box is still orange, and
that's because the fill color is still set as orange.
| | 02:17 | We had output this file without transparency
it would have just filled in solid white,
| | 02:21 | so let's go ahead and set that to None.
| | 02:23 | Now if we wanted to place this image in,
in a different way we can delete the cell
| | 02:28 | and click File>Place and we can just go ahead
and place the image this way rather than filling
| | 02:34 | in our predrawn box.
| | 02:37 | Photoshop has typically been the number one tool for web
designers, due to the low resolution nature of the web.
| | 02:43 | Well technology may change there's still
no better solution out there for coloring,
| | 02:47 | sizing or editing pixel-based graphics.
| | Collapse this transcript |
| Building and placing graphics from Illustrator| 00:00 | While Photoshop can be helpful for editing
images and creating shadows and texture, Adobe
| | 00:05 | Illustrator is your number one tool for drawing
individual graphics and site elements for use in Adobe Muse.
| | 00:12 | In Wireframing, you've established
dimensions of particular site elements.
| | 00:16 | In this Wireframe, I've established that the
back arrow on this particular widget is going
| | 00:22 | to be 45 pixels wide by 60 pixels high.
| | 00:25 | We're go into Adobe Illustrator we can
create a new document at that exact size.
| | 00:30 | So let's set 45 pixels and 60 pixels high, make
sure our Units are set to Pixels and click OK.
| | 00:38 | First of all, I'm going to turn on my Grid
line just to make drawing little bit easier.
| | 00:44 | Now that we've got a new document opened in
Illustrator, I'm going use the Pen tool and
| | 00:48 | I'm going to draw very simple arrow
using our grid lines. There you go.
| | 00:54 | Now that the arrow is drawn, I'm going to
just move into the center of that canvas and
| | 00:59 | let's turn off the Stroke and
fill it with Black, there you go.
| | 01:04 | Now that we've drawn our arrow,
we'll click File>Save for Web.
| | 01:08 | In the Save for Web dialog it's very similar
to Photoshop in that we can change the file
| | 01:12 | type and we can ensure that
we have Transparency turned on.
| | 01:15 | So I'm going to save this
as a PNG with Transparency.
| | 01:17 | Let's click Save and we'll Save that to
our Desktop and we'll just call it arrow.
| | 01:23 | Now that we've got this saved in the desktop,
we can jump back into Muse and in the Back
| | 01:28 | button that we have selected here,
we'll apply that arrows as a Fill.
| | 01:31 | So if we click our Fill dropdown, select
an Image and select the arrow that we just
| | 01:36 | created in Illustrator, click Open,
you'll see that it fills this box in Muse.
| | 01:40 | We can change some of the Fill settings in terms of
scaling up to fit or keeping at the Original Size.
| | 01:46 | I built it at the exact size I wanted so
we'll just leave this at Original Size.
| | 01:50 | Finally I'm just going to click into the box and delete
out the text arrow that Muse automatically places in it.
| | 01:56 | If you're looking to draw custom shapes
and arrows for use in Muse, Adobe Illustrator
| | 02:00 | should be your primary choice, especially
if you come from a print design background.
| | Collapse this transcript |
| Building graphics in InDesign| 00:00 | Photoshop and Illustrator are great
tools for building individual graphics.
| | 00:04 | However, for my workflow there's no better
software to use when building multiple graphics
| | 00:09 | at a particular size than Adobe InDesign.
| | 00:13 | In Muse we've determined that we want to create
some sort of slideshow or widget at this specific size.
| | 00:18 | Now these dimensions are 600
pixels wide by 300 pixels high.
| | 00:23 | If we use InDesign we can create a number
of multiple graphics at that specific size.
| | 00:28 | So let's go head and
create a new InDesign document.
| | 00:32 | Let's select our Intent as Web and we're going
to set our Width at 600 pixels and our Height
| | 00:40 | at 300 pixels and click OK.
| | 00:43 | Now that we've got a new InDesign document
ready to go I'm going to bring in some assets
| | 00:47 | that I've created and used in
the past from my print portfolio.
| | 00:51 | So I've got things like business cards, posters, all
of which have crop marks and that sort of thing on them.
| | 00:57 | If we bring something like these Business
Cards directly in InDesign we can crop and
| | 01:01 | orient those without having to actually
open them all individually in Photoshop.
| | 01:06 | Let's go head and just drag and drop our
Business Cards into InDesign and we'll click to place.
| | 01:13 | Now that we've got this placed I'm just
going to go ahead and crop it, so I can crop off
| | 01:18 | the crop lines and perhaps I'll
duplicate it so there is two of them.
| | 01:22 | Now I'm just going to these over to the right-
hand side of the screen and maybe I'll just turn
| | 01:27 | this one a little bit to give
them some kind of depth or dimension.
| | 01:30 | Now next I'm going to go ahead and
place a poster that I've built in the past.
| | 01:34 | This poster is a JPEG. Click Open.
| | 01:38 | So now that we've got our posters placed in
InDesign I'm just going to scale this down.
| | 01:42 | Once I scale this down to show what I want
to preview in my portfolio, I'll just lay
| | 01:47 | it out in the appropriate
spot on my InDesign document.
| | 01:51 | Now we can add things like subtle drop shadows.
| | 01:53 | So if we were to right-click on this
element and select Effects>Drop Shadow, we can add
| | 01:58 | just a very subtle drop
shadow and let's Preview this.
| | 02:02 | I'll drop the Distance down a little bit and
will just set it at a Size of 2 pixels. Click OK.
| | 02:09 | Just to give a little bit of depth.
| | 02:10 | Now that we built this in InDesign we can simply go
File>Export and I'm going to export this as a JPEG.
| | 02:20 | So let's go ahead and place this on the Desktop and
I'm going to call at portfolio.jpg. Now click Save.
| | 02:28 | We're going to get a dialog box.
| | 02:29 | It gives us some options how
we want to save this image.
| | 02:32 | Because Muse does actually optimize images on
export I'm going to set the Quality to Maximum.
| | 02:38 | The Resolution at 72 ppi and
everything else looks good.
| | 02:41 | So we'll click Export.
| | 02:42 | Now what this is going to is put this
on the desktop for us to use in Muse.
| | 02:46 | So if we click back into Muse, I can click
on this rectangle and change to Fill, select
| | 02:52 | an Image, and navigate to our Desktop and
select portfolio, click Open. There we go.
| | 02:58 | So we can see this nice image in Muse and
I'll just go ahead and remove the Stroke on here.
| | 03:03 | Now what this did was it saved us a lot of
time, because we've got a ton of assets and
| | 03:07 | files that are made for print PDF, JPEGs
different file formats that you might not necessarily
| | 03:12 | be able to bring directly into Muse.
| | 03:14 | However, by using InDesign we can really
effectively combine all those files into a really nice
| | 03:20 | looking graphic, export it for the
web, and place it directly in Muse.
| | 03:25 | InDesign is well known among print designers.
| | 03:27 | However, its ability to output graphics at
web resolution and setup documents using
| | 03:31 | pixel dimensions can be really helpful when
you're building graphics for your site, especially
| | 03:36 | for the portfolio section.
| | Collapse this transcript |
| Creating repeating backgrounds| 00:00 | It's important to optimize your graphics for
smaller file sizes when you are working on the web.
| | 00:05 | In order to do so, you may need to tile or
repeat a specific texture in order to fill
| | 00:09 | a large space on the site. You can also
ensure that your background texture will fill the
| | 00:13 | browser's full window which may vary from
user to user depending on screen resolution.
| | 00:19 | I recommend you visit a site on
the web called subtlepatterns.com.
| | 00:22 | Subtle Patterns provides a resource for you
to download images that will perfectly tile
| | 00:28 | in the background of your site.
| | 00:30 | If you simply mouse over a Graphic, click
Preview you can see how it's going to look
| | 00:34 | in terms of filling the
entire screen on the background.
| | 00:37 | There's no better resource on the web for
these full screen background tiled images.
| | 00:41 | If we were to Download one of these images,
it would provide us with the PNG or JPEG file
| | 00:46 | that we can use in Muse.
| | 00:47 | If we jump back to Muse click into our
Patterns page, let's set of these in the background.
| | 00:52 | First of all I am going
to zoom out a little bit.
| | 00:55 | Next let's select our Browser
Fill and fill with an Image.
| | 01:00 | I'm going to select the DarkPattern.PNG image.
| | 01:04 | If we click Open, you can see that it fills the entire
browser window or the entire background of our website.
| | 01:11 | If we were to set this fitting to original
size it would only include one of the images,
| | 01:18 | so we need to make sure that's set to Tile.
| | 01:21 | Now if you can't find an image on the web
that works for you, you can modify an image
| | 01:25 | in Photoshop to make it work.
| | 01:27 | First of all, I recommend that you find an
image that's got a fairly consistent texture.
| | 01:31 | I have picked this image of sand, the sand
has a fairly smooth texture throughout with
| | 01:36 | the exception of a few kind of darker edges
that aren't going to look very good when we tile.
| | 01:41 | If we try this image in Muse--let's set our
Background Fill to the sand and leave on Tile--
| | 01:49 | you can see that we have got these hard lines
on the outside. That doesn't look very good.
| | 01:54 | So to fix this, let's open that file in
Photoshop, once we have got it open in Photoshop, let's
| | 02:00 | zoom in nice and close and let's layer the
background and I am just going to call this sand, click OK.
| | 02:07 | Now that we have got this layer, let's
actually move it up into the top left corner, we are
| | 02:12 | going to fill it kind of snap to our guidelines
and what we want is for the image to be perfectly
| | 02:17 | placed in the top left quarter of the screen.
| | 02:20 | Next, we are going to duplicate this image
to the right, and repeat the steps top and
| | 02:25 | bottom, duplicate it down below. There you go.
| | 02:30 | So basically what we've done is
flipped this image inside out.
| | 02:34 | Now in order to smooth out this dark line that
you are seeing down the center, what I am going
| | 02:38 | to go is just use the Clone tool.
| | 02:40 | So let's create a new layer. Let's select
our Clone tool, and I'm going to change the
| | 02:48 | sampling to All Layers, just to make
sure that I'm picking up from each layer.
| | 02:52 | Now I am going to zoom in slightly on the
image, and let's just hold down the Option
| | 02:56 | key to select a new area to sample from.
| | 02:59 | I'm going to sample from right here because it
looks like a pretty consistent area of the sand.
| | 03:03 | Now once we have sampled there, let's go ahead
and just draw and what I'm doing here is just
| | 03:08 | filling in the dark edge there with
some of the lighter sand to the left of it.
| | 03:14 | Now you want to take your time on the step,
as you want your graphic to be as consistent
| | 03:18 | as possible, you find that things are
getting a little bit blurry, then you may need to
| | 03:22 | adjust your Opacity settings,
up here where our Opacity is 73.
| | 03:26 | If you could turn that up, select a New Sample
Spot, you can see, we are going to get a little
| | 03:31 | bit of a harder image
when we click, there you go.
| | 03:37 | If we are happy with the consistency of our
sand, then what we can do is go File>Save for Web
| | 03:42 | and let's just save this to our Desktop.
| | 03:45 | I am going to call it sand.
| | 03:50 | Once that's saved, we can jump into Muse and
let's test it out as the background of our site.
| | 03:55 | So we already had sand_small.png
applied as a background.
| | 03:58 | What I am going to do is right-click on that
Asset and click Relink and I am just going
| | 04:02 | to re-link it to the sand file
that we just created in Photoshop.
| | 04:05 | Once we click Open it's going to replace
that and its going to look a lot more smooth.
| | 04:10 | If you have got any variation that still remains,
you can just go back into Photoshop and edit
| | 04:15 | that out quickly by re-linking or updating the asset,
you'll see the new pattern up here in the background.
| | 04:22 | Creating and tiling Graphics to use in
Adobe Muse can be a really powerful way for you
| | 04:26 | to add great visual interest to a website,
as well as keeping the file sizes down and
| | 04:31 | reducing bandwidth.
| | Collapse this transcript |
| Manipulating layers and transparency| 00:00 | Web Design is an extremely flexible medium
because you're not limited to what can be
| | 00:04 | reproduced when printed or rendered.
| | 00:07 | Designers or visual artist can use complex
layers of graphics and transparency to create
| | 00:11 | unique elements and subtle details that add
to the professionalism and depth of a website.
| | 00:17 | First, I recommend that you download a cool
graphic from a stock photo resource perhaps.
| | 00:22 | I've chosen this graphic
of the Statue of Liberty.
| | 00:25 | Next what we are going to do is create kind of this
cool feathered effect by doing some work in Photoshop.
| | 00:30 | So first of all let's jump a blank page in
Muse and click File>Place and I am going to
| | 00:38 | just place our Statue file
directly on canvas, perfect.
| | 00:42 | Now that that's in Muse, I am going to
open this image in Photoshop and Edit it.
| | 00:47 | The first thing I am going to do is just
Duplicate our layer--it's actually a fairly destructive
| | 00:52 | editing technique I am going to do here.
| | 00:54 | So let's just make sure we have a back up
copy. Now I am going to turn off the Background
| | 00:58 | layer first, as we don't want to edit that.
| | 01:00 | I am going to select our Rectangular Marquee tool
and I am going to set our Feathering to 60 pixels.
| | 01:09 | Now that we've got the Feathering set,
let's just draw a box around this image. And as
| | 01:13 | you can see due to the Feathering, it's
done some refining on the selection here.
| | 01:19 | Now if we were to just delete out what's
selected right now you'd see that we would lose the
| | 01:22 | middle of the image just keeping the Feather towards
the outside but we want quite the opposite of this.
| | 01:27 | So let's go a head and undo that and click
Select Inverse, what that will do is just
| | 01:33 | select the outer edges of this image.
| | 01:35 | Now, if we hit Delete, we can see that
it's just going to clear the outside edges and
| | 01:40 | if we hit it multiple times, we
get a different degree of feathering.
| | 01:43 | Once you are happy with this.
| | 01:45 | I'm with this it because I'm not seeing any
more of the image along edges, I am just going
| | 01:50 | to deselect by clicking Command+D
and go File>Save for Web.
| | 01:55 | I want to make sure to preserve transparency.
| | 01:57 | So I am going to ensure that Transparency is
selected on a PNG file format and click Save.
| | 02:03 | Let's just save that to the
Desktop and we'll call it statue.png.
| | 02:07 | Once we have that image saved, we can jump
over to Muse and let's update this Asset with
| | 02:12 | this image that we just built.
| | 02:13 | So if we right click on that Asset
in our Assets panel, and click Relink.
| | 02:17 | I'm going to Relink to the version on
the Desktop and click Open, there you go.
| | 02:22 | So as you can see, we have got this
nice kind of cool Feathering effect.
| | 02:26 | Now if we were to draw a box over this
image using our Rectangle tool in Muse and let's
| | 02:32 | Fill the box with a dark gray and then finally,
let's layer this box behind the image we just
| | 02:39 | created, we can just right-click on it,
and click Arrange>Send To Back.
| | 02:43 | We can see that we've got this nice image
sitting in front and there's this really smooth
| | 02:47 | seamless transition
between the image and the box.
| | 02:51 | Now to enhance this further, we can click on
the Image and we can play with the Transparency.
| | 02:56 | So let's just go ahead and drop
this down to 50%. tTere you go.
| | 03:02 | So just by altering the Transparency of the
image, we can add a little bit more for dramatic
| | 03:07 | effect to this and again. If we change the Fill
color of this block as well, we can further enhance it.
| | 03:14 | Now one technique you might also want to try
is layering some text over this. So if we select
| | 03:19 | our Text tool and we draw a text box,
type in our heading, New York City.
| | 03:26 | And then let's just style this text
appropriately by first changing the Font--I am going to
| | 03:31 | change the Font to Lobster--let's change
the Color to white and let's just up the Size
| | 03:38 | to about 70, perfect.
| | 03:42 | Now we can just Scale our Text out and you
can see how cool it can be to a play with
| | 03:47 | layers of Transparency, Images,
Color Blocks and even Text.
| | 03:51 | Great design on the web often uses a variety
of different layers and transparent elements
| | 03:56 | to create depth and visual interest.
| | 03:59 | Don't be afraid to play with Graphics and
Layers to achieve this effect, but be careful
| | 04:02 | not to overdo it.
| | Collapse this transcript |
| Creating buttons and button states| 00:00 | When designing an interactive layout it's
important to model the interface after real life.
| | 00:05 | By using shadows and button states properly,
it's easy to give users the illusion of depth
| | 00:09 | or depression for example a push button by
simply using real-life elements as reference.
| | 00:15 | Shadows and gradients are the main tools that
we are going to use to create realistic buttons.
| | 00:19 | Now the key to really nice buttons is
subtlety; you don't want to overdo it.
| | 00:25 | And I recommend that you look for examples in
your own environment such as remote controls,
| | 00:29 | calculators or keyboards to just analyze
how the light is coming off the button and what
| | 00:33 | you can do to make a button
on the screen look realistic.
| | 00:37 | Let's take a look at a popular website the
Apple site, now you can see that the Apple
| | 00:41 | site here actually does use gradients
and shadows below its Navigation buttons.
| | 00:48 | However the gradients are very subtle, and
this adds a tasteful level of depth to your
| | 00:53 | site, you definitely don't want to overdo it.
| | 00:57 | Let's jump to a blank Muse layout.
| | 00:59 | In order to draw the different button states
in Muse, I am going to just use the Rectangle
| | 01:04 | tool to draw some squares.
| | 01:05 | Right here, I am going to draw the normal
state for a Button, so after we draw our square
| | 01:11 | I'm going to set our Fill.
| | 01:12 | For the Fill, I'm going to use a Gradient,
For the Gradient, the first up, I want to
| | 01:18 | use is this orange color, now for the second,
I'm going to use the same orange color but
| | 01:24 | I'm just going to drag it to a
little bit of a darker color.
| | 01:27 | This way is just a subtle change but it's
not overly dramatic and finally I'm going
| | 01:32 | to change the Direction of this
gradient to Vertical. There you go.
| | 01:37 | Now I'm going to turn off our Stroke by selecting
Stroke dropdown and setting the Color to None.
| | 01:42 | And I'm going add a subtle drop shadow to
this, let's click the Effects dropdown, Shadow--
| | 01:48 | turn that On--and I am going to change the
Distance to 4 and the Blur to 4. And what this
| | 01:54 | is going to do is just does give us
a little bit more of a subtle effect.
| | 01:57 | Finally, I am going to
round the corners on this.
| | 02:01 | Let's that the Corner round to 5. There you
go. So this is going to be the Normal state
| | 02:05 | for the button or the Un-pushed state.
| | 02:08 | Next what I am going to do is, I am going
to duplicate this button by holding Option
| | 02:12 | key and just clicking and
dragging it to the right.
| | 02:16 | Now what we are going to is do, is draw
our Mouseover effect or Hover effect.
| | 02:20 | This is what's going to happen to the
button when the mouse moves over it.
| | 02:23 | So when the mouse moves over this button,
I'm going to remove the drop shadow, so let's
| | 02:30 | click Drop Shadow dropdown here and turn it Off.
| | 02:33 | Next what I'm going to do is I am going to
change the Fill of the Button and I'm going
| | 02:37 | to make it just a little bit
darker on both stops on the gradient.
| | 02:44 | There you go, perfect.
| | 02:47 | So this is going to be our Mouseover, or
Rollover state. And now, finally what we need
| | 02:51 | to do is we need to create our Depressed state.
| | 02:54 | So this is what's going to happen
when the button has actually been pushed.
| | 02:59 | So for this, I am going to set the Fill to
a little bit darker even and I'm going to
| | 03:07 | add an Effect and for the Effect I'm going
to add a Glow and I'm going to turn On the
| | 03:11 | Glow and select an Inner Glow.
| | 03:14 | Now for the Color of the Glow, I like to
make it dark. So let's select black; there you go.
| | 03:22 | So now we have these three
states determined for our Button.
| | 03:26 | We've got the Normal state, the Mouseover--or Hover
state--and then the actual Depressed or Pushed state.
| | 03:32 | Now let's apply these to a Button.
| | 03:34 | Let's move up to our Rectangle tool and draw
a rectangle below. iI order to apply different
| | 03:41 | states to this button, we need use the
States panel and the States panel can be found in
| | 03:45 | the top left corner here.
| | 03:47 | So in our Normal state, we need to apply a
specific style to that, same thing for our Rollover,
| | 03:53 | our Mouse Down and our Active.
| | 03:54 | So what we are going to do is we're going
to create new graphic states based on these
| | 03:58 | three buttons we have already designed.
| | 04:00 | If we select the first button, move over to
our Graphic Styles, and click New, we have
| | 04:07 | created new style and we
are going to call this Normal.
| | 04:11 | Let's repeat the process for all three Buttons.
I'll call this Hover and finally I'll call
| | 04:18 | this Mousedown, okay.
| | 04:21 | Now that we have got all three Button
states determined, let's select our Button, move
| | 04:28 | up to the States panel and apply these Styles.
| | 04:31 | So for a Normal state, we want to use Normal,
for our Rollover state, I want to use Hover,
| | 04:41 | and for our Mouse Down I'm going
to use Mousedown, there you go.
| | 04:48 | Now if we preview this Button by clicking
the Preview option in Muse, you can get an
| | 04:53 | idea how the button is going to look on screen.
| | 04:56 | So as you can see it looks normal if we
mouse over it. It appears to push into the Browser
| | 05:01 | and if we actually click on it it's going
to get darker on the outside as if we pushing
| | 05:05 | it directly into the screen.
| | 05:08 | Interface Design uses lighting shadows and
a quite often gradients to achieve a level
| | 05:12 | of visual depth on the screen.
| | 05:14 | It's important to remember that it easy to
overdo many of these elements so they should
| | 05:19 | only be used to subtle accents to add realism
and always remember look at real-life interface
| | 05:25 | elements such as remote controls, calculators,
or keyboards, to better understand how to
| | 05:29 | style your online version.
| | Collapse this transcript |
| Defining and redefining text styles| 00:00 | If your website uses a variety of
different fonts and styles you will definitely want
| | 00:04 | to use text styles to ensure that all the
styling is consistent as well as quickly apply
| | 00:09 | changes to all of the text throughout the site.
| | 00:11 | When you're selecting a Font for your website,
first of all, I recommend that you select
| | 00:16 | one that has a variety of
different styles with it.
| | 00:18 | First, I am going to draw a
text box.
| | 00:21 | In this text box, I'm going to type Heading 1 and
I'll go ahead and increase the Size of this to 40.
| | 00:29 | Once we've got that selected, let's go ahead
and select a new Font from our web fonts library.
| | 00:35 | So if we click on our Font dropdown list
and click Add Web Fonts, we can choose from
| | 00:39 | a variety that Adobe is
supplying to their Typekit service.
| | 00:43 | Now to make it easy to design your site with
a variety of different looks and styles, you
| | 00:47 | need to pick a font that has different
variations, such as bold, italics and different weights.
| | 00:52 | So for example a Font such as PT Sans. If
we were to click that and select OK, Muse
| | 01:00 | has now added this font to our Fonts menu.
| | 01:02 | Let's click our dropdown and select PT Sans.
| | 01:05 | Now you can see we have a Bold, Bold Italic,
Italic, and Regular version of the font.
| | 01:10 | That's great because we are going
to be able to do a lot with this.
| | 01:13 | Now if we were to duplicate this font, and let's
select something else for example one called Yesteryear.
| | 01:21 | Yesteryear is really cool looking font but it
doesn't quite have the options that PT Sans does.
| | 01:26 | As you can see with it selected, I have a no-
fly out saying Bold, Italics--anything like that.
| | 01:31 | So if we are going to use this font, you
really want to stick with a Heading Style or you
| | 01:36 | want to use it in a Heading rather than a block of
text where you may a bold or a different variation.
| | 01:41 | So once you have determined this is your
first Heading Style for your text, what you want
| | 01:46 | to do it style it appropriately.
| | 01:47 | So I'm going to just change this to orange
and what I am going to do is actually make
| | 01:52 | this the Bold version, there you go.
| | 01:55 | Now that I have got this styled appropriately,
let's look over in a Paragraph Styles panel
| | 01:59 | and let's click New. This will create a
new Paragraph Style based on the text that we
| | 02:04 | styled in this box.
| | 02:05 | Now what I want to do is double-click on to
the Style and I want to make sure that it's
| | 02:09 | tagged appropriately.
| | 02:11 | So first of all, I am going to give it
a name, I am going to call it Heading 1.
| | 02:14 | Next I'm going to select the
Paragraph tag that it's associated t.
| | 02:19 | In this case, I like it to be a headline or
a h1. It's important to set these paragraph
| | 02:24 | tags for search engine optimization reasons.
| | 02:26 | We will cover that in a
later on video. Let's click OK.
| | 02:31 | Now I am going to just duplicate this
text, and I am going to set a Heading 2.
| | 02:36 | So if we select that text and let's just
shrink it down a little bit here and we will make
| | 02:41 | this gray. There you go.
| | 02:46 | Now what we want to do is we want to create
a new style for this and again, let's rename
| | 02:51 | this to Heading 2 and set our
paragraph tag to the h2 and click OK.
| | 02:59 | Now the reason that it's important to use
styles is because you can quickly edit and
| | 03:03 | update all of the text throughout your website.
| | 03:06 | So if we were to duplicate this Heading 1
through out our site in a couple of different
| | 03:11 | places and if we were to change them to New
York, Boston and Chicago, what we can do then
| | 03:23 | is edit this Heading Style to simply
update all of these Headings at once.
| | 03:28 | So if I decided that I wanted this font to
be a little bit bigger--let's say 50--and I
| | 03:33 | decided I wanted it to be Black.
| | 03:35 | Then I can change this and what I can do with
it selected is simply move over to the Heading 1
| | 03:42 | item and you see it's got this
small plus sign beside it.
| | 03:44 | What that means is you've edited the style.
| | 03:47 | Now if I right-click on Heading 1 and
select Redefine Style it's going to redefine the
| | 03:54 | Heading 1 style to what I have
selected--which is now the Chicago heading.
| | 03:57 | Now, when I click this you'll see that all
the other headings on the site will update
| | 04:02 | automatically as well.
| | 04:04 | Using text styles results in a quick
global editing of text throughout your site.
| | 04:08 | It ensures consistency in your design
and it speeds up your design process.
| | Collapse this transcript |
| Understanding the Sticky Footer (New)| 00:00 |
Muse now features the ability to create
what's called a Sticky Footer.
| | 00:04 |
Essentially what this means is that the
footer of your website will stick, or stay
| | 00:08 |
floating, to the bottom of the browser
window, on pages where there is minimal content.
| | 00:13 |
Many users think it's similar to pinning,
in which a footer element floats with the
| | 00:17 |
site while you scroll, however it's quite
different.
| | 00:19 |
The Sticky Footer simply addresses a small
issue that can be created when the site
| | 00:23 |
uses lots of negative space.
And the footer doesn't sit nicely at the
| | 00:27 |
bottom of the screen.
In the sample site that I have on the
| | 00:29 |
screen, let's preview it in the browser
and see how it looks.
| | 00:32 |
If we go File, and Preview Page in
Browser, you can see that the footer is
| | 00:36 |
sitting kind of below this white box.
And if we zoom out a little bit on the
| | 00:39 |
page, it stays there.
What if we wanted this footer to sit
| | 00:43 |
always at the bottom of the browser
window?
| | 00:45 |
Well, this is where Sticky Footer's come
into play.
| | 00:47 |
If we close our browser and in Muse we
click File and Site Properties, we have
| | 00:53 |
the option to check Sticky Footer and
let's do that.
| | 00:56 |
So, if we check that and hit OK, now,
we'll go File and Preview Page in Browser
| | 01:01 |
we'd see that our footer is still at the
bottom of the page.
| | 01:04 |
If we zoom out It actually stays at the
bottom, so what this does is it forces the
| | 01:09 |
footer to always sit at the bottom of the
browser window.
| | 01:11 |
And if we had a smaller browser window you
can see that the footer will always stay
| | 01:15 |
down there.
One thing you need to remember when you're
| | 01:18 |
using a Sticky Footer is that your guides
are drawn correctly.
| | 01:21 |
If we move to our Plan View and go into
the master page, you can see that our
| | 01:25 |
Footer Guide is at the button and we leave
this gap that we can leave footer content.
| | 01:31 |
On our content pages we've placed content
down below and we've made sure that this
| | 01:35 |
Footer check mark is actually checked.
And what this will do is tell Muse that
| | 01:40 |
these elements are footer items, and they
need to stay in that area at the bottom.
| | 01:44 |
If we turn on Sticky Footer, they'll
always stay at the bottom of your browser window.
| | 01:48 |
And you're not going to end up with a
page, with just nothing down below, where
| | 01:51 |
half of it is empty on higher resolution
screens.
| | 01:54 |
As you can see, the Sticky Footer does not
replace pinning functionality, but rather,
| | 01:58 |
forces the footer to stay at the bottom of
the window on sites with little content.
| | 02:02 |
The majority of users won't encounter this
issue, however the visitors on a high
| | 02:06 |
resolution screen, such as the Mac, LEDs.
Will ensure that the footer actually stays
| | 02:11 |
at the bottom of your site, and not half
way up the page.
| | 02:13 |
| | Collapse this transcript |
|
|
3. Building the Portfolio Website Creating the header and the footer (Updated)| 00:00 |
The header area of your Muse site is one
of the most important features of your website.
| | 00:04 |
It needs to be both interesting, an simple
for users to understand.
| | 00:09 |
The photo area of your site is also
important.
| | 00:11 |
It's a great place to include contact
information, or social media links.
| | 00:16 |
Let's get started building the header an
footer areas of our Red 30 website.
| | 00:20 |
To start let's have a look at the site
changes or site property changes I've made
| | 00:24 |
in the news file.
If we go to file and site properties, you
| | 00:29 |
can see that I've left our page width and
minimum height with the default values.
| | 00:33 |
I made sure that sticky footer was turned
off.
| | 00:36 |
We're going to have enough content on each
page that I'm not worried about footer
| | 00:39 |
sitting at the bottom of the browser
window.
| | 00:41 |
Lastly, I've made sure that we had 12
columns.
| | 00:44 |
This'll just help me kind of split up
content, and make sure everything is
| | 00:47 |
aligned properly.
That's it.
| | 00:49 |
Let's click OK.
Next, I dragged our header guide down so
| | 00:55 |
that we had a little bit more space at the
top of the page.
| | 00:57 |
So that we could place all these elements
up above that header guide.
| | 01:01 |
I also dragged the bottom of Browser Guide
down a little bit, just to create a little
| | 01:04 |
bit of padding on the bottom of the page
so that I could add some text below into a footer.
| | 01:09 |
Now let's drop back to our Plan View and
go into our Blank Master Slide.
| | 01:14 |
We need to make sure to include all of our
header elements on our Master Page as we
| | 01:18 |
want them to be consistent through all
pages on the website.
| | 01:21 |
Just going to zoom out a little bit here.
Next what we're going to do is draw the
| | 01:27 |
wooden background for our header.
If I click the rectangle tool and draw
| | 01:30 |
large rectangle at the top of my site.
You can see that when I hit the right edge
| | 01:37 |
of the site I get this red line appearing,
and it kind of snaps to the right edge.
| | 01:41 |
That means that this background is going
to repeat throughout the whole website.
| | 01:46 |
And I just want to make sure that it also
has snapped to the left side, there.
| | 01:50 |
So, now any graphic I place in this box is
going to repeat across the header no
| | 01:54 |
matter what the browser resolution is.
I'll turn off the stroke and I'm going to
| | 01:59 |
change the fill.
And I'll set the fill as our wood image.
| | 02:03 |
Now this image is just a stock photo that
I downloaded.
| | 02:06 |
I didn't even really modify it ahead of
time because I knew it would tile well
| | 02:10 |
because it's a pretty consitent grain
throughout.
| | 02:13 |
Let's just change hte fitting to tile and
there you go.
| | 02:16 |
We've got a nice wood, header background.
Next thing I'm going to do is drop in our logo.
| | 02:22 |
I've prepared the logo ahead of time in
Photoshop.
| | 02:24 |
So let's go file, place and click our
Logo_Red30.png.
| | 02:27 |
When we place this into our site, we can
see that it floats nicely above the wood background.
| | 02:35 |
This is because I saved the logo file with
transparency.
| | 02:38 |
Next what we're going to do is draw an
orange bar underneath this wood.
| | 02:41 |
I'd like to just cap it off on the bottom
so it has something to kind of sit on.
| | 02:45 |
First I'll take the rectangle tool and
I'll draw a box below the header graphic.
| | 02:51 |
Once I've got my rectangle in place I'm
going to fill it with the orange color
| | 02:54 |
I've used in my logo.
If I click the Fill drop down,
| | 02:58 |
unfortunately the fill box covers my logo,
so I'm going to temporarily move the logo
| | 03:03 |
out of the way...
Now, I'm going to make sure to click off
| | 03:05 |
the logo because I don't want to fill that
with the orange color.
| | 03:08 |
I'm going to click back on the rectangle.
First, I'm going to remove the stroke, and
| | 03:13 |
next I'll click the fill drop down, choose
the sample tool, and select the orange color.
| | 03:19 |
There you go.
You can see it's filled into the
| | 03:21 |
rectangular box that I've placed below the
header.
| | 03:24 |
Let's move our logo back up into place,
and finally we'll add our tag line.
| | 03:29 |
If we select our text tool and draw a text
box in the top right-hand corner of the
| | 03:33 |
site, we can type in our tag line, which
is 'A Creative Consultancy'.
| | 03:39 |
Now let's just select this text, change
our font, which is lobster Change the
| | 03:44 |
color to white, and scale the text a
little bit bigger.
| | 03:48 |
Lastly, I'm just going to make sure that
the tag line is aligned to the right.
| | 03:52 |
I want to make sure it always sits on the
right hand side of the site.
| | 03:55 |
That looks good.
In order to add footer elements to our
| | 03:58 |
site, we need to make sure that a footer
options box is checked.
| | 04:02 |
So if we click on our text tool and draw a
text box.
| | 04:05 |
I'm just going to copy and paste in some
of the text we used on our original design.
| | 04:09 |
This copyright red 30 creative design will
work well.
| | 04:12 |
Let's copy this, and paste it into our new
site.
| | 04:16 |
Now that we have that in the site, we need
to make sure that the footer box is checked.
| | 04:21 |
And this will allow us to place this in
the footer without having it actually
| | 04:24 |
scroll the page vertically longer.
So when we click this, we'll move it down
| | 04:28 |
to the bottom of the site.
And we can arrange it as we see fit.
| | 04:32 |
That looks good.
By using full width elements containing
| | 04:36 |
unique tiled graphics and textures we've
built a really strong header for our website.
| | 04:41 |
Next we'll begin adding our navigation
system by using the automatic navigation
| | 04:45 |
widget in Muse.
You can finish building your footer by
| | 04:48 |
including any text or social media icons
you'd like to see.
| | 04:52 |
| | Collapse this transcript |
| Adding the navigation widget| 00:00 | The Menu widget in Muse is a really powerful
tool, as it allows us to automatically create
| | 00:05 | a Navigation system for the website by
referencing the site map we've created in our Plan view.
| | 00:11 | As you can see here the Navigation system for
the Red 30 website features some nice rollovers.
| | 00:15 | We've got this white bar below with a small
triangle pointing up to the actual menu item
| | 00:20 | above, and as you can see the active
page is going to be this orange color.
| | 00:25 | Let's get started building this in Muse.
| | 00:27 | On our Master page we have already created
our header graphic with the wood background.
| | 00:32 | Now to build the Navigation, first I'm
going to drop in that dark background you saw on
| | 00:36 | the Navigation menu.
| | 00:37 | I'm not going to actually style the widget
to have that background, I am just going to
| | 00:41 | float the widget above that.
| | 00:42 | So using our Rectangle tool let's just draw
a rectangle, remove the Stroke, select the
| | 00:48 | Fill--I am going to fill it with a dark
gray--and we'll set the transparency or opacity.
| | 00:53 | I'm going to set this to 91. There.
| | 00:54 | Now that we have this in place, lastly I am going
to just round the Top Left and the Top Right corners.
| | 01:03 | Clicking on the Rounding option in the Control
panel in Muse we can see that it looks pretty good.
| | 01:08 | Next, let's click into our Widgets Library and
select our Horizontal menu and drag this out on the page.
| | 01:17 | Muse is already included the 4 pages we
set up in our Plan view, so let's pull this
| | 01:21 | up and place it above into
the Header area of our site.
| | 01:24 | I am just going to increase the size of this black
bar just a little bit to fit the Navigation menu better.
| | 01:30 | Now we'll move this up, we'll grab the
right side Transform controls and we'll scale it
| | 01:36 | a little bit wider.
| | 01:38 | Once we have it in place, I'm going to
click onto a single menu item and I am going to
| | 01:43 | go up to the States dropdown in the top.
| | 01:45 | And I'm just going to delete any of the
states that are included in the Default widget.
| | 01:50 | I want to start from fresh.
| | 01:53 | Now that these are deleted out with the
Normal state set I'm going to remove the Fill.
| | 01:58 | I don't need any fill in any of our states
here because we have already drawn that black
| | 02:02 | box to float behind the menu.
| | 02:05 | Next what we are going to do is draw the
graphic--that white triangular graphic that you saw
| | 02:10 | floating below the Navigation buttons--to use
on our Rollover state and we're going to do
| | 02:14 | this in Illustrator.
| | 02:16 | First, with one of the menu items selected
let's get an idea of the Width and Size of
| | 02:21 | this box--it's about 101
pixels wide by 34 pixels high.
| | 02:27 | If we launch Adobe Illustrator and create a new
document, let's create a document at this size.
| | 02:32 | We have got the 101 pixels wide by 34 pixels high
and just make sure that your Units are set to Pixels.
| | 02:40 | That looks good, click OK.
| | 02:42 | With our new document open I am going to just
draw that rectangle and triangle very quickly.
| | 02:48 | So let's select our Rectangle tool and
draw a thin rectangle along the bottom.
| | 02:52 | We are going to remove the Stroke and we're
going to make sure the Fill is set at white.
| | 02:59 | Because our Fill is set at white it's
really hard for us to see this box, so one trick
| | 03:04 | is to go up to our View option in
the Top menu and select Outline.
| | 03:08 | That way we can just see
what the box looks like.
| | 03:11 | Now we'll click on our Rectangle tool again and
we'll bring out the fly-out and select our Polygon tool.
| | 03:17 | Once Polygon tool is selected and we click once, it
gives us the option to draw a very simple polygon.
| | 03:22 | We'll set the Sides at 3 and the
Radius at 20 and click OK, there.
| | 03:28 | Now we have a triangle.
| | 03:31 | Let's Scale the triangle down.
| | 03:33 | Once the triangle is scaled down we'll just
move it into place above the box we have already
| | 03:37 | drawn and we'll make sure that this
Stroke is turned off and the Fill is white.
| | 03:42 | Once we are happy with the position of this,
let's just go back to our Preview view, select
| | 03:47 | both of them and make sure that they are
aligned, so we can click on our Align dropdown and
| | 03:53 | choose Align Horizontal
Center. That looks good.
| | 03:56 | Now we'll click File>Save for Web and we want
to make sure we have a PNG file with Transparency
| | 04:03 | turned On and click Save.
| | 04:06 | We'll save that to the Desktop
and we'll call it nav_rollover.
| | 04:12 | Once we are back in Muse we need to make sure
that one of our Navigation buttons is clicked.
| | 04:17 | And we also need to make sure that Edit
Together is turned on, because what we are doing to
| | 04:21 | this single button, we want to carry
through to all the buttons on the Navigation.
| | 04:27 | Now let's go up to our States dropdown in
the top left, select Rollover, change the
| | 04:33 | Fill of this rollover and select an image.
| | 04:36 | We are going to select the rollover we
created that's on the Desktop and click Open, and
| | 04:41 | we can see that it appears in
Muse for our Rollover state.
| | 04:45 | Now we can go ahead and style
the other states as we like.
| | 04:48 | I'm on Mouse Down state, I'm okay with it
being the same, and for our Active state I'd
| | 04:53 | like to change the Text Color to orange.
| | 04:56 | Lastly, what we need to do is just style the
text to be the correct font, so I'll change
| | 05:01 | our State back to our Normal state and
we'll set our Font to PT Sans and Regular.
| | 05:11 | Now that we have got our Navigation
system set up, let's just preview the site.
| | 05:16 | Let's just mouse over some
of these Navigation items.
| | 05:19 | When we mouse over it, we can see that our
arrow showing up or graphic below is showing
| | 05:22 | up, but it seems to be a little bit cut off. That
means we need to adjust some of the fitting settings.
| | 05:27 | If we go back to our Design view, make sure
our first menu item is selected or any menu
| | 05:32 | item for that matter, we can change
the Fill and the Fitting settings.
| | 05:36 | Now notice that we don't have the option here
it's because we need to make sure our States
| | 05:40 | panel is set to the Rollover state,
where we have actually applied that Fill.
| | 05:44 | Bring up the Fill dropdown, change our
Fitting options to Scale to Fit and let's let the
| | 05:50 | Position as Centered.
| | 05:52 | Now when we preview our site we can see
that the white box appears as we intended. And
| | 05:58 | if we click on an item, it turns orange and
that what the Active state that we've set.
| | 06:03 | Always remember to keep your Navigation
system simple and easy for you users to understand.
| | 06:08 | It's important that visitors can easily
access all the pages on your website and follow a
| | 06:12 | logical path from one page to the next.
| | 06:15 | When working with the Menu widget you are
going to be using the States panel extensively,
| | 06:20 | so just remember to reference often to what
state you're working within before you make
| | 06:24 | any changes to your site.
| | Collapse this transcript |
| Creating a rotator for text and graphics| 00:00 | One of my favorite widgets in Muse is the
Composition widget, which can be used to combine
| | 00:05 | together almost any type of
graphic into an animated slideshow.
| | 00:09 | In this tutorial we're going to create the
text rotator displayed underneath the photos
| | 00:14 | on the main homepage as seen here.
| | 00:17 | On a blank Muse page first of all,
I'm going to place in that banner image.
| | 00:21 | That's not part of the widget itself.
| | 00:23 | So if we just click File>Place I'll select the
Home Banner and we'll place that onto our main canvas.
| | 00:31 | I am going to give us a little bit of
space so let's just drag the bottom of the page
| | 00:36 | down, click in to our Widgets panel and drag
the blank composition widget out on to the page.
| | 00:43 | I am just going to move this into place
along the left-hand side and I'm going to click
| | 00:48 | into the Target and I am going to size
this out to be approximately the right size.
| | 00:54 | Now that we've sized the Target out, let's
move our Triggers up, by clicking onto them
| | 00:59 | and holding Shift, selecting all
of the triggers, and moving them up.
| | 01:05 | Now that we've got our triggers placed
underneath our main target area what I am going to do
| | 01:10 | is just delete out the triggers
we are not using at the moment.
| | 01:13 | So let's delete that one and we'll
click in and Delete the second one.
| | 01:16 | I am just going to style one trigger for now.
| | 01:19 | We'll go up to a Zoom box and zoom into 125%
so it's a little easier to work with this.
| | 01:24 | I am going to shrink the trigger down, I am
going to make it about 10 pixels by 10 pixels.
| | 01:29 | Let's use our Transform dropdown here,
I'm putting 10 pixels and 10 pixels.
| | 01:35 | Now that it's the right size I am
just going to move it over a little bit.
| | 01:38 | I am going to style it.
| | 01:39 | So first let's go ahead make sure
that our state selected is Normal.
| | 01:44 | I am going around our corners.
| | 01:47 | Rounding the corners will make sure
that the box itself is a nice circle.
| | 01:52 | Let's select on it again, and I am going to
make sure that we are working on the Normal state.
| | 01:55 | We don't be styling the
Active state at the beginning.
| | 01:58 | With Normal selected I am going to remove the
stroke and I am going to change to Fill to a dark black.
| | 02:04 | Once we have done that we'll go ahead and
style the Rollover state by clicking the Rollover
| | 02:10 | state in the States dropdown, removing the Stroke,
and will change our Fill to a light gray color.
| | 02:18 | Lastly, we are going to style our Active state.
| | 02:22 | To do so I'm going to remove the Stroke
and I'll change our Fill color to orange.
| | 02:29 | Now that we have styled the Trigger appropriately
let's add some content to this actual Target area.
| | 02:33 | So with our first trigger selected we can click
into our Target area and we can draw a text box.
| | 02:40 | In this text box we are going to copy and paste
the text that I had in the final version of the site.
| | 02:44 | So if we click into the first trigger on
our Final version we can see it says, Solving
| | 02:49 | business problems using design & code.
| | 02:51 | Let's Copy, click in, and
Paste this into this text box.
| | 02:57 | Now I am going to collapse this panel to give
us a little more room and zoom out a little bit.
| | 03:01 | We'll size this text box to about the right
size and let's just shrink down this content area.
| | 03:06 | It expanded because we've pasted a
text box in that was too big for it.
| | 03:10 | So it moved to accommodate the size, and
we'll just move our trigger back up again.
| | 03:14 | Now that we've got this text inside of this
composition, let's just duplicate the text
| | 03:18 | below and we'll paste in our second line
of content where we have this, Over 25 Years
| | 03:23 | of Award Winning Experience, and paste that in.
| | 03:30 | You can see that I've added a link to this
line of text, linking that was as simple as
| | 03:34 | selecting it and just entering a
link up into the Hyperlink box.
| | 03:39 | With it selected we could
select a link to our Portfolio page.
| | 03:43 | Now this gray doesn't look very good as the
background for this particular text style,
| | 03:47 | so I am going to select the Target area, I
am going to remove the Stroke, and let's just
| | 03:52 | change the Fill color to a
darker black, this looks much better.
| | 03:57 | Now, we can add other compositions very
easily by just clicking the Plus sign beside
| | 04:02 | our Trigger, and as you can see when you
push the Plus button more triggers appear, so
| | 04:07 | we can click on those and move them into place.
| | 04:09 | Now we want to duplicate the content we've
included on this first trigger onto the others.
| | 04:14 | The way to do that is by selecting the
content you've included, copying it, clicking on to
| | 04:20 | our second trigger, clicking the Target area for
that second trigger and clicking Edit>Paste in Place.
| | 04:28 | So what we have done is made sure that the content
is in the same spot as it is on the first trigger.
| | 04:32 | Now that we've got this content in
place we can style it as we see fit.
| | 04:37 | I'll go ahead and copy a line of text from
our Final site, "Radically different. Results
| | 04:41 | oriented." And I'll go ahead and add this
little image in here that we've of two people.
| | 04:46 | So we'll go back to our Main page, copy and
paste this text in--I am just going to move
| | 04:53 | it over a little bit--and let's
include the image in this space.
| | 04:57 | So if I make sure that the target is
again selected we click File>Place.
| | 05:03 | We can place our Team_Graphic into this area.
| | 05:06 | We've got a loaded cursor and
we'll just click and place it in.
| | 05:09 | I am just going to scale this image down by
dragging the corner and moving it into the correct place.
| | 05:17 | Now we can repeat this process throughout
all the compositions on our site, duplicating
| | 05:21 | the content and pasting it in
place, so that's in the right spot.
| | 05:25 | Lastly, I'm going to just change the
background on this target area to a blue color.
| | 05:29 | If I bring down our Fill dropdown, we can just
select a blue and pick a nice dark blue color.
| | 05:36 | Lastly, what we want to do is
set some Options on this widget.
| | 05:41 | If we click on the Composition widget and
click the blue arrow to the right--let me
| | 05:45 | move this panel out of the way--we get this flyout
that gives us some of the options we can change.
| | 05:50 | So we don't want to change our Event. We
like to have it set to Click which means we need
| | 05:54 | to click the Trigger to have the target change.
| | 05:56 | What I am going to change is our Speed.
| | 05:59 | I like to leave our Transition set to a
nice fade but I find that it fades too fast.
| | 06:03 | So we'll set our Speed to Medium.
| | 06:06 | And I'm also going to turn on Auto Play, I
want this to automatically change when a user
| | 06:11 | is visiting the site.
| | 06:13 | That looks good, I don't need to
change any of the other options.
| | 06:16 | Now that we are done, let's Preview this widget.
| | 06:22 | We can see in the Preview of our widget that
if we mouse over one of our Triggers, it has
| | 06:27 | nice states and it's automatically
scrolling through all of the different compositions
| | 06:31 | we've just created.
| | 06:33 | The Blank Composition widget is extremely
powerful and can be used to integrate almost
| | 06:38 | any type of graphic into your website, try
experimenting with images or video in this
| | 06:43 | interactive format.
| | Collapse this transcript |
| Creating the office photos slideshow| 00:00 | An interesting way to style an image gallery or
slideshow is to place it within a unique frame.
| | 00:06 | The Homepage of the Red 30 website
features an office image slideshow.
| | 00:10 | It is displayed on a Tablet device.
| | 00:14 | Let's jump into Muse and see how this is built.
| | 00:16 | First of all, I am going to zoom out to
give us a little bit more room on our page.
| | 00:20 | Next, I am going to create this
canvas from scratch below the original.
| | 00:25 | The first step is to place
our Tablet image onto the page.
| | 00:29 | If we click File>Place we'll
select our tablet and place it in.
| | 00:34 | Now we want to Scale this down, so let's Scale it down
to approximately 60% of its original size, there we go.
| | 00:42 | We'll position it underneath our original
and we'll get started building the widget.
| | 00:47 | Let's expand our panel on the side.
| | 00:49 | The next step is to drag out a
Blank Slideshow widget onto the page.
| | 00:53 | If we click and drag that out, we can see a
widget appears and what we are going to do is we
| | 00:58 | are actually just going to
overlay this, over this tablet.
| | 01:01 | To make it fit I am going to click into the
hero image and I'm going to adjust the Dimensions
| | 01:06 | so that it fits nicely within our tablet.
| | 01:08 | Next, I am going to change some of the widget
Options by clicking the blue arrow to the right.
| | 01:13 | I am going to turn off our Counter.
| | 01:15 | We don't need that for this widget.
| | 01:17 | However I'll leave our Previous and Next
button and our Captions button turned on.
| | 01:22 | Next what I am going to do is I am going
to style these Previous and Next buttons.
| | 01:25 | If we click on to the Previous button,
let's just move it to the left-hand side.
| | 01:29 | For the Next button, we'll do the same.
| | 01:31 | We'll move to the right-hand side and using
our Guides we can see when these are aligned.
| | 01:36 | Next we want to Fill these with images that
we've created ahead of time in Illustrator.
| | 01:40 | If we click on to our Fill>Image,
let's select the Arrow_Left and click Open.
| | 01:46 | Now you can see we only have the top portion
of the arrow. That's because our Fitting is
| | 01:51 | set at Original Size.
| | 01:53 | What I'm going to do is go Scale to Fit and
what that's going to do is scale it down to
| | 01:57 | fit in any box that we size.
| | 01:59 | So let's just make this a little bit bigger so
our arrow is a little more dramatic, and there you go.
| | 02:03 | Now it fits nicely.
| | 02:05 | Lastly what I want to do is I'd like to remove
the text arrow that Muse automatically places in.
| | 02:10 | We can do that by simply double-clicking
in the box, highlighting it, and the deleting it.
| | 02:15 | Perfect!
| | 02:16 | Next we need to add the
arrow into the Next button.
| | 02:19 | As you can see Muse has automatically placed
the same arrow, however it's facing the wrong way.
| | 02:24 | To fix this, let's click our Options
and we need to turn off Edit Together.
| | 02:29 | Edit Together make sure that whatever you
do to one arrow it will do the opposite side.
| | 02:34 | With that turned off, we'll make sure it's
selected and we'll change the fill of this version.
| | 02:39 | Let's select Arrow_Right and click Open.
| | 02:41 | There you go, now it's
facing the proper direction.
| | 02:44 | Lastly, let's just make sure these
two boxes are the exact same size.
| | 02:48 | So if we click on the left-hand side we can
see in our Transform dialog that we've got
| | 02:52 | 29 and 46 High; the right-hand side, let's set
it to match those dimensions, 29 Wide and 46 High.
| | 03:02 | There you go, now they are the exact same size.
| | 03:05 | Lastly, let's set some states for these buttons.
| | 03:08 | So I am going to turn back on Edit Together
because I want to both sides to be the same.
| | 03:12 | Once we have turned on Edit Together, let's click
into our States dropdown and let's change some of these.
| | 03:19 | For our Normal state I am going to
just change our Transparency to 50%.
| | 03:25 | For our Rollover state let's change that to
70% and for our Mouse Down state, I am going
| | 03:33 | to set that to 100%. There you go.
| | 03:37 | If we preview this widget we can see that
when we mouse over either of our arrows they
| | 03:45 | are changing color and again we need to delete out
that text arrow that Muse automatically places in.
| | 03:50 | We did on the left side, but let's do
it on the right as well. Perfect!
| | 03:56 | Next let's quickly style the Captions below.
| | 03:58 | You can see that our Captions box
here is using this light gray text.
| | 04:02 | But what I want to do is move this box
down kind of into this blank area below.
| | 04:05 | Let's select the text.
| | 04:07 | We will set a style for it.
| | 04:09 | Let's go with Arial.
| | 04:10 | We'll set the Color to black and I am just
going to center the text within that box.
| | 04:17 | Now that our widget is set up nicely how we'd like
it to look, we'll go ahead and add the images.
| | 04:22 | So if we click onto the widget, select the
blue arrow beside and click Add Images, we'll
| | 04:27 | select 4 images that we placed in our folder.
| | 04:31 | Once we click Open, Muse will
automatically add that to the Slideshow.
| | 04:35 | Once they are in if you click the Previous
button it will scroll through the images and
| | 04:41 | as you can see the Captions below
are changing on each different image.
| | 04:44 | So if we wanted to edit the Caption on any
of these particular images, we just need to
| | 04:48 | make sure that image is selected.
| | 04:51 | Click into the Caption and type,
"OUR OFFICE IS LOCATED IN A CLASSIC BROWNSTONE."
| | 05:00 | Let's go ahead and shrink this caption a little
bit more to make it match our original widget,
| | 05:05 | and we'll create it Bold. There you go.
| | 05:10 | Now when we scroll through we can see that our
captions have changed throughout the rest of the widget.
| | 05:14 | The last step in creating this
Slideshow is we want to set the Transition.
| | 05:18 | So if we click on to the Blue arrow beside to
access our Options we can set the Transition.
| | 05:24 | Right now it's set at Fade, I want to set it at
Horizontal so that it slides across the tablet.
| | 05:30 | I'm also going to disable Auto Play because
I don't want this to be moving before users
| | 05:34 | actually click on it.
| | 05:36 | With that turned off let's Preview our widget and make
sure it's functioning as we intended. Looks perfect!
| | 05:47 | One final note to mention is that if we
notice that the image isn't fitting nicely inside
| | 05:51 | the frame we can easily
adjust that in our Design view.
| | 05:55 | If we wanted this image to look a little bit
bigger we can simply click into the Hero image
| | 06:00 | and double-click until we have our hand.
| | 06:02 | --This is similar to a frame in InDesign.--
| | 06:04 | With that selected we can scale this to any size
and it's just going to stay within our hero image.
| | 06:09 | So we can Position our images as we see fit.
| | 06:12 | Try adding a simple frame or background to
your widgets like I've done with this tablet
| | 06:16 | in the example. And remember, you can
easily customize individual elements such as our
| | 06:21 | Previous and Next arrows by replacing them
with background images and applying unique states.
| | 06:27 |
| | Collapse this transcript |
| Creating the floating contact menu| 00:00 | In order to capture visitors and connect with
potential customers it's important that your
| | 00:04 | social media accounts or contact details are
visible virtually anywhere you are on the site.
| | 00:10 | By building a social media and contact menu
that floats on the left side of the browser
| | 00:14 | window at all times, you can ensure that your
customers can easily see how to get in touch.
| | 00:19 | Let's jump into Muse and build this menu.
| | 00:23 | In Muse we can see that I have the menu
already set up on the left-hand side of the browser,
| | 00:27 | lets go ahead and just move this
down and create it from scratch.
| | 00:32 | Now that its out of the way.
| | 00:33 | The first step to build this, is we need
to draw a box, using our Rectangle tool let's
| | 00:38 | draw a box that's flush with the
left-hand side of the browser window.
| | 00:43 | Next I am going to apply the orange stroke
you see, so let's select Stroke and let's
| | 00:47 | set it out about 3.
| | 00:49 | Now you can see that the Stroke is
appearing in the left-hand side as well and we don't
| | 00:53 | want that. We want to make sure that the stroke
only covers the top, right, and bottom sides of the box.
| | 00:59 | So if we click on our Stroke dropdown we can
click unlink all sides of the Stroke and let's
| | 01:05 | just change the left-hand side to 0.
| | 01:08 | Now we have only got a
Stroke on those sides of the box.
| | 01:11 | Lastly I just want around the Top Right and the
Bottom Right side of the box that looks pretty good.
| | 01:17 | Next, let's go ahead and place in our
Social Media icons if we click File>Place.
| | 01:24 | We'll just go ahead and select the 4 social
media icons we've included email, Facebook, Flickr
| | 01:29 | and Twitter. Click Open and we'll
just paste them on to our page here.
| | 01:35 | Now let's arrange them as we see fit in this
box. We'll start with Twitter, next Facebook,
| | 01:41 | next Flickr, and finally email.
| | 01:44 | There you go, now that they are in place,
let's make sure they are aligned properly.
| | 01:49 | If we select all 4--move to our Align panel.
| | 01:52 | Let's just make sure we have Distribute
vertical centers. What this will do is make sure the
| | 01:57 | gaps between all these items in the
same and will align them down the center.
| | 02:02 | Now I am just going to move them up a little
bit so they're centered in inside this box
| | 02:05 | and there you go.
We've got our 4 icons in place.
| | 02:09 | Next what we need to do is link these buttons.
| | 02:11 | So if we click on our original menu we can see that
our Twitter icon is linked to twitter.com/red30design.
| | 02:16 | Lets do the same for each of the buttons on
our new menu. Click on the Twitter icon and
| | 02:22 | type in www.twitter.com/red30design.
There you go.
| | 02:29 | Now that our link is in place we just need to repeat
those steps for all of the other buttons in this menu.
| | 02:35 | Lastly let's go ahead and link this email
button by simply entering email in the hyperlink box.
| | 02:40 | So we've got sarahred30@gmail.com.
| | 02:46 | You can see that Muse automatically adds the
"mailto:" which will create a link to open up
| | 02:50 | an email client and send an email.
| | 02:52 | Now what we need to do is pin this to the
left side of our browser window. The way that
| | 02:56 | we do that is by selecting the whole menu,
move up to the control bar and select Pin,
| | 03:03 | to the top left-hand side.
| | 03:05 | Once that's selected I am going to delete out
our original menu and let's just preview this.
| | 03:10 | And as you can see this menu is pinned to the left side of
our browser and it scrolls as we scroll with the page.
| | 03:16 | Now you want to make sure not to place this
menu on the Master page of your website; as
| | 03:21 | remember items placed on the Master page
will sit at the very bottom of all your layers
| | 03:25 | and if your browser size is too small,
the Pin menu will be covered by page items.
| | 03:32 | Use pinning to place crucial elements that
you would like visitors to see at all times. This
| | 03:36 | could include social media buttons, a simple content
menu, or even the main navigation of your website.
| | 03:41 |
| | Collapse this transcript |
| Styling the tabbed photo panels on the team page| 00:00 | The TEAM page of the red30 website
features black-and-white photos which colorize and
| | 00:05 | reveal a biography when
you hover or mouse over them.
| | 00:08 | The Tab panel widget was used to achieve this effect
along with some simple editing of photos in Photoshop.
| | 00:15 | Let's jump into Muse and see how this was built.
| | 00:18 | Let's go ahead and first move
this original widget out of the way.
| | 00:21 | We're going to reference back to it a
few times as we build it from scratch.
| | 00:26 | Now that we've moved our final widget out of
the way, let's create a new one from scratch.
| | 00:31 | In the Widgets panel, let's scroll down to
the Panels area, and we'll drag a Tabbed panel
| | 00:37 | widget out onto the page.
| | 00:39 | Once that appears on our page, I'm just going
to scale it to fit the full width of our site.
| | 00:47 | Now that it's scaled with full width, I am
going to delete out any of the content that's
| | 00:51 | included in the Sample widget that I don't need.
| | 00:54 | So I'm going to just delete this tab altogether, and
I'll click into the second tab and delete that as well.
| | 01:01 | Next, I'll delete out this content
just by clicking in and selecting it.
| | 01:06 | And now that I've no content, let's go
ahead and add our 5 different tabs that we're
| | 01:10 | going to use for each of the 5 team members.
| | 01:15 | Now that we've got these 5 tabs, let's
scale them to make them a little bit higher
| | 01:19 | as they are going to contain
those tall images or our team members.
| | 01:22 | So if we scale them to about 300
pixels that should be perfect.
| | 01:28 | Next, if we click the blue arrow beside our
widget, we can change some of the options.
| | 01:33 | I am going to turn off Show Label, as I
don't want the label to show, I want an image to
| | 01:38 | show, and I'm also going
to change Edit Together.
| | 01:43 | Edit Together means that all of these tabs
are styled the exact same way and we want
| | 01:46 | them to be different for each
individual different team member on our site.
| | 01:50 | Now if we click into the first tab, what we're
going to do is we're going to change the states.
| | 01:56 | So, I'm going to set our Normal state.
| | 02:00 | I want to include the black-and-white
image of Sarah.
| | 02:04 | I've created black-and-white versions of all our
team members' photos prior to building this in Muse.
| | 02:11 | Once we've got this photo in place, I'm
going to set our fitting to Scale To Fill and our
| | 02:16 | positioning to the center.
| | 02:18 | Next, let's click onto our Rollover state.
| | 02:22 | Our Rollover state is going to
be the color photo of Sarah.
| | 02:26 | So if we change our fill, select an image
and select Sarah's color photo, click Open.
| | 02:34 | And again set our fitting to Scale to Fill
and our position to cente; that looks good.
| | 02:41 | Finally what I'm going to do is
I'm going to change our Active state.
| | 02:45 | Our Active state also needs to be
the color image of Sarah, click Open.
| | 02:55 | Let's go ahead and preview this.
| | 02:57 | So, because this tab is selected
we've got a color image of Sarah.
| | 03:01 | However, if we select the tab beside we can see
that it changes to our black-and-white version.
| | 03:06 | Now, you can go ahead and repeat the process
for all of the other tabs throughout the site.
| | 03:13 | For now, I'm going to move down and
style the content below Sarah's tab.
| | 03:17 | So, let's move our original widget
down a little bit out of the way.
| | 03:21 | Let's go ahead and scale
down this content area below.
| | 03:25 | I'd like to make it big
enough to include some text.
| | 03:28 | Now, what I want to do is I want to change
this and include a fill or an image behind.
| | 03:33 | Let's have a look at the width of this box. It's
915 pixels Wide by approximately 233 pixels High.
| | 03:40 | I created an image in Photoshop
that looks something like this.
| | 03:44 | It just uses a couple of brackets on the
left and right side and we're going to put this
| | 03:47 | in the background of that content area.
| | 03:51 | In Muse, if I select this content area, and
I change the Fill, let's select that graphic
| | 03:57 | that I just created using
the brackets, and click Open.
| | 04:00 | What that's going to do is place that
in the background of this content area.
| | 04:04 | Now, with Sarah's image selected, we can
go ahead and add some text--just by clicking
| | 04:08 | on the Text Box tool, drawing a
textbox, and typing anything we need.
| | 04:13 | I'm going to select Sarah's text from the
original widget saying that she is the Creative
| | 04:17 | Director, and I'll go ahead
and paste that in my new text box.
| | 04:20 | I've actually created a style already for this.
| | 04:23 | It's a paragraph style and I've
called it Widget - Team Heading.
| | 04:29 | Once we've got some text in this area, we
can go ahead and duplicate this text throughout
| | 04:33 | all areas on our widget.
| | 04:35 | Just by selecting the second tab you can
see that we don't have any text in there.
| | 04:39 | So, if we go back to the first tab, if we
select our text, we can click Edit>Copy. Select
| | 04:45 | the second tab, make sure our content area
is selected, and click Edit>Paste in Place.
| | 04:51 | And what that will do is make sure that this
text appears in the content area of the second tab.
| | 04:56 | We know that the second tab
is going to be used for Uri.
| | 04:59 | So if we go ahead and change this to Uri, and
we select Sarah again, we can see that it changes.
| | 05:06 | Now, you may notice that our bracketed
background isn't appearing in each of these tabs.
| | 05:12 | That's because we have Edit Together turned off.
| | 05:15 | So if we want something to appear in all
of the tabs, we need to make sure that we've
| | 05:18 | turned Edit Together back on.
| | 05:20 | If we right-click this blue arrow, turn on
Edit Together, and select Uri's tab, we can
| | 05:27 | go ahead and change this fill
to that same bracketed image.
| | 05:33 | And now this will appear in all
of the tabs throughout the widget.
| | 05:37 | Lastly, what we want to do with this widget
is we want to change some of the mouseover
| | 05:42 | and event settings.
| | 05:43 | So if we click the blue arrow on
the right we can change the event.
| | 05:47 | On Click means we have to
click on each of the tabs.
| | 05:49 | However, if we select On Rollover what this
will do is it means that when our mouse moves
| | 05:54 | over any of these images it will
automatically display the new text below.
| | 05:59 | So if we go ahead and preview that, so you
can see if we mouse over this image it's the
| | 06:04 | one that's selected.
| | 06:05 | So that's why Sarah is in color.
| | 06:06 | However, if we mouse over the image beside which
is Uri's spot, Sarah changes to black and white,
| | 06:11 | and that's because we've got
our event set to mouseover.
| | 06:14 | Now if we reference down to our final
widget, we can see that with all of the photos in
| | 06:18 | place and all of the content in place
it's quite a cool and interactive widget.
| | 06:22 | Now, I'm noticing a difference between the
two of these and that's just that this one
| | 06:26 | still has strokes applied to it.
| | 06:28 | So if we go back to our Design view, click on our
widget and make sure we've got Edit Together selected.
| | 06:33 | We can simply click into each tab and
let's go ahead and remove our stroke.
| | 06:38 | And we're going to want to do that for each
of the different states throughout our widget.
| | 06:42 | Once we've removed all of the strokes, this
widget will perfectly match up with the original
| | 06:47 | we've designed below.
| | 06:48 | The Tabbed panel widget is a great way to
condense a large amount of information in
| | 06:53 | this one small interactive area on your website.
| | 06:56 | Experiment with adding different types of
content into both tabs--and the panels--such
| | 07:00 | as videos, embedded HTML, and buttons.
| | Collapse this transcript |
| Creating a lightbox photo gallery| 00:00 | The portfolio section of our website uses a
Slideshow Lightbox widget to display images
| | 00:06 | in a clean interactive format.
| | 00:07 | However, it can also contain
other types of content such as videos.
| | 00:12 | Let's just have a quick look at
what it looks like on our website.
| | 00:15 | The Light Box widget fades the
background out, and images appear in front.
| | 00:20 | Here's how we built it.
| | 00:21 | On a blank page in our Muse site let's
make sure we have lots of room to work.
| | 00:25 | If we click on our Slideshow widget panel,
and we click on the Lightbox widget and drag
| | 00:31 | it out under canvas, we
can begin to work with it.
| | 00:34 | Next, I'm going to click inside the widget
and I'm going to select all of the items included
| | 00:38 | in the Lightbox portion.
| | 00:40 | So if I click and highlight all of these
bottom portion--all of the areas that are
| | 00:45 | surrounded by the black--I can
click and drag that out of the way.
| | 00:48 | I'm just moving our Lightbox out of the
way for now, so we can style that thumbnails.
| | 00:51 | And I'll bring our page down a
little bit so we have more room.
| | 00:55 | Next, we'll click into this thumbnail
area and we'll drag this up to the top left.
| | 00:59 | I'm just going to size
these thumbnails appropriately.
| | 01:03 | We'll size this container out to fit the
full width of our screen, and we'll start sizing
| | 01:08 | the thumbnails out just with the
sample images included in Muse.
| | 01:12 | I want them to be in this
three column format; that looks good.
| | 01:15 | Now that we have an idea of how
our thumbnails are going lay out,
| | 01:18 | I'm actually just going to delete
out those two unnecessary images.
| | 01:21 | We don't need those.
| | 01:22 | I'm just going to leave one in for now.
| | 01:24 | So that we can style the Lightbox
and we can add our own images in after.
| | 01:28 | To style the Lightbox I'm to going to
click into that container and I'm just going to
| | 01:32 | size our main hero image out to fit the
full width of our screen; that looks good.
| | 01:39 | If we click inside, we have the ability to
actually adjust how an image sits in our hero image.
| | 01:43 | However, we're not going to adjust that for
now, we're going to wait till we add our own
| | 01:46 | images into the widget.
| | 01:48 | Next, I'm going to change some
of the options in this widget.
| | 01:51 | Let's click on the, widget Options in the blue arrow
to the right and I'm going to turn off our Counter.
| | 01:57 | I'm also going to turn on our Close Button.
| | 02:00 | What this is going to do is close
the window when the Lightbox appears.
| | 02:04 | Notice when I turned on the Close Button
we didn't see it appear. That's because it's
| | 02:07 | probably partway up the screen.
| | 02:09 | If I scroll up, I can see that my Close
Window button appeared at the top, so let's just
| | 02:13 | click on that and move it back down into place.
| | 02:16 | Next, I'm going to style our
Previous and our Next buttons.
| | 02:20 | So, if we just move these on to the left and
up on to the right, I'm going to add some images
| | 02:26 | to sit inside these frames.
| | 02:27 | First, I want to turn off Edit Together, because I
know that they're both going to use different images.
| | 02:33 | Next, I'll scale this box out a
little bigger and we'll add a fill.
| | 02:39 | For our fill image, we're going to use
our Arrow_Circle_Right, and click Open.
| | 02:47 | We can see that image
has filled inside this box.
| | 02:49 | I'm also going to click inside and delete the
text arrow that Muse has automatically included.
| | 02:54 | Next, I'm going to click into our States
dropdown, select our Rollover state and let's
| | 02:59 | change this fill as well.
| | 03:02 | For that fill, I'm going to
use Arrow_Circle_Right_Hover.
| | 03:04 | So, this is a little bit of a
different arrow that I've created.
| | 03:08 | It's the same size however
it just uses different colors.
| | 03:11 | And we also want to
change our Fitting on this box.
| | 03:13 | You can see that the arrow is
a little bit tight in this box.
| | 03:15 | So, let's just set the Fitting to Scale To Fit, and
we'll make sure that setting is applied to our Normal state.
| | 03:24 | Okay, now that we've got this finished,
we'll repeat these steps to the left side.
| | 03:30 | So, scale the box little bit bigger.
| | 03:32 | We'll delete out our text arrow, fill it with
our left pointing arrow, select the Rollover
| | 03:41 | state, and fill it with our rollover left arrow,
and change our fitting options to Scale To Fit.
| | 03:53 | Lastly, I'm just going to make sure
that these two arrows are the same size.
| | 03:59 | So, I like the look of the arrow
on the right a little bit better.
| | 04:02 | If we move up to our Transform
dropdown, we can see this arrow is 43 x 44.
| | 04:07 | So, I'll just set these same settings to
left-hand side, 43 x 44; that looks good.
| | 04:15 | Now, they're the same size and our
guides tell us they're in the same position.
| | 04:19 | Next, we'll move our captions box over a little
bit so it's centered underneath our main image.
| | 04:25 | We'll select the text inside and style it with
PT Sans--the font we've been using throughout
| | 04:30 | our site--and let's just
center this font underneath.
| | 04:33 | Lastly, we need to style this Close Window button
and we're going to do something really basic with this.
| | 04:38 | I'm just going to remove the fill. I'll add a
stroke--a nice white stroke should do.
| | 04:44 | We'll set this at about 2 and
we're going to add a state.
| | 04:49 | If we click on to the X itself, we'll
leave our Normal state set as white.
| | 04:53 | However, we'll set our Rollover
state with a different text color.
| | 04:57 | We'll set this color to orange.
| | 04:59 | And lastly, we'll set our
Mouse Down state to gray.
| | 05:05 | Now that that looks good, let's move our
Close Window button underneath our main lightbox.
| | 05:10 | Okay, now that we've got this in place, we
need add our own images into the Lightbox widget.
| | 05:16 | If we click onto the widget, select the blue
arrow beside and click Add Images and select
| | 05:22 | all of the images we've prepared
for our portfolio, and click Open.
| | 05:26 | The widget has added them all automatically.
| | 05:28 | However, everything is
looking a little bit tight.
| | 05:30 | So what we need to do is we need to move the
lightbox down a little bit to get it out of the way.
| | 05:35 | The first thing I'm going to do is I'm going
to scroll up and I'm going to delete out the
| | 05:38 | sample thumbnail that we don't need.
| | 05:41 | Now that that image is deleted we can
see a little bit more of our lightbox.
| | 05:44 | However, I'm just going to click into the
Lightbox itself, and let's just highlight
| | 05:48 | all of the elements of it.
| | 05:50 | So make sure we've got our left and right
arrows, our Close Window button and our caption.
| | 05:55 | It looks like we've selected the thumbnail.
| | 05:56 | So, if we just hold Shift and click on the
thumbnails it will deselect those--and let's
| | 06:01 | move this down out of the way.
| | 06:03 | And it looks like we need
a little bit more space.
| | 06:05 | So let's drag our page down a little lower.
| | 06:07 | That's why I said you need a lot
of space to work with this widget.
| | 06:10 | Next, we can check the layout of our photos within the
lightbox just by clicking the forward and back button.
| | 06:16 | Everything seems to be fitting quite well.
| | 06:18 | I'm happy with this.
| | 06:19 | Lastly, what we need to do is
style states on our thumbnails.
| | 06:23 | So if we click on to our thumbnails, we can
add some Normal and mouseover states to these.
| | 06:28 | First, we need to make sure that Edit
Together is turned on; it's turned off right now.
| | 06:32 | So, anything we did to the first thumbnail
wouldn't carry through throughout all the thumbnails.
| | 06:37 | Once we turn this on if we add a Normal state
and we set a small drop shadow--let's change
| | 06:44 | our Blur down to about 4
and our Distance to about 3.
| | 06:48 | So it's just subtle then we
can add our mouseover state.
| | 06:52 | I'm going to change this state to Rollover
and let's go ahead and remove the shadow.
| | 06:59 | Now that we've added this, let's go ahead
and preview the site to see how it looks.
| | 07:03 | Once we're into the preview of our site, we
can see that there is this nice shadow below
| | 07:06 | all of the thumbnails and if we mouse over
them, the thumbnail goes away which gives
| | 07:11 | the impression that the thumbnail
itself is being pushed into the screen.
| | 07:15 | Next, let's click on one of our images
and we can see that our lightbox loaded up.
| | 07:20 | If we mouseover our forward and back buttons, we can
see that they scroll nicely through our portfolio.
| | 07:25 | We might need to make some tweaks such as
our Close Window button doesn't appear to be
| | 07:28 | centered under the caption, but we can
go back and do that in its Design view.
| | 07:34 | Let's just center this button.
| | 07:38 | And now that our button in centered, I'm
going to make one more change to the widget.
| | 07:41 | By selecting the widget and selecting the blue
Options arrow, we can change the Transition.
| | 07:46 | I'm going to set our Transition to Horizontal
which will give us more of a horizontal sliding effect.
| | 07:52 | If for any reason you need to rearrange the
thumbnails in your Lightbox widget, you can
| | 07:57 | do this very easily.
| | 07:59 | Simply click onto any thumbnail
and drag it into a different spot.
| | 08:04 | Let's just put this back into the
same place we had it originally.
| | 08:07 | We'll preview it, select one of our
thumbnails, and try clicking forward.
| | 08:13 | Now, we can see it slides to the left.
| | 08:15 | This is where the transition comes into effect.
| | 08:18 | Using a Lightbox slideshow widget is a great
way to display a portfolio or gallery of images.
| | 08:24 | Simple additions such as custom forward and
back buttons can really help you to take this
| | 08:28 | widget beyond its basic
styling and make it your own.
| | 08:31 |
| | Collapse this transcript |
| Styling the contact page| 00:00 | The Contact page of our website uses a few
unique elements, such as these three-dimensional
| | 00:05 | ribbons and this embedded Google Map.
| | 00:07 | Here's an overview of how this page was made.
| | 00:10 | On a blank page in Muse--first of all, let's
draw that dark box that we had below the navigation.
| | 00:16 | Click our Rectangle tool, and let's just draw
it within our guidelines. So it's approximately
| | 00:22 | the same size as the navigation.
| | 00:24 | I'm going to remove the Stroke and I'm going
to change the Fill, and I'm going to select
| | 00:28 | an image that I've prepared ahead of time.
| | 00:32 | It's called dark_wood.
| | 00:36 | And I'm going to just make sure that this
image is tiling in that space. That looks good!
| | 00:42 | Next, let's go ahead and
draw these orange ribbons.
| | 00:45 | Many designers would draw
this in Illustrator or Photoshop.
| | 00:48 | However, Muse actually can do this, and the
benefit of doing it directly in Muse is that
| | 00:52 | it's going to generate code rather than
including an image that's going to increase the file
| | 00:57 | size and bandwidth use of our site.
| | 00:59 | So if we click our Rectangle tool, let's
draw a large rectangle across this dark area.
| | 01:05 | We'll remove the Stroke and let's
go ahead and fill it with orange.
| | 01:12 | Next, we're going to create the
three-dimensional element that's behind.
| | 01:18 | To do this I'm going to duplicate this
rectangle, scale it down so it's just a square, and I'm
| | 01:23 | going to change the Fill color to be a
little bit darker; it is supposed to be going away
| | 01:27 | from us, so we'll assume that
it's a little bit shaded behind.
| | 01:31 | Now that we've got this square ready, I'm
going to move up to the top-right corner and
| | 01:34 | you'll see this rotate icon appear.
| | 01:37 | If we hold this down and rotate our
box, let's rotate it to 45 degrees.
| | 01:42 | With it rotated 45 degrees, we'll align it
to the bottom-left corner of this ribbon in
| | 01:47 | Muse, and we're going to send it to the back.
We right-click on it, click Arrange, and Send
| | 01:53 | To Back; you can see that it sits behind all
of the other elements and now we've created
| | 01:57 | this cool 3D effect.
| | 01:59 | Now that we've got this ribbon in place,
let's just select both elements, hold the Option
| | 02:04 | key, and we'll duplicate this down below.
| | 02:07 | In the sample I've provided I included some
simple contact information text over top of the
| | 02:11 | ribbons, such as phone
number and an email address.
| | 02:14 | Next, we're going to embed a
Google Map below this area.
| | 02:17 | Let's have a look at the sample.
| | 02:19 | You can see that we've included this gray
box with rounded corners behind our Google
| | 02:23 | Map, just to give it a little bit of a frame.
| | 02:25 | This box is approximately
445 pixels by 433 pixels.
| | 02:30 | If we go back to our page that we're
building, we'll draw that same box.
| | 02:38 | I'll use the Transform dropdown to
set it to the same size, 445 x 433.
| | 02:45 | Next, let's just change the Fill
color, and we'll select a gray.
| | 02:55 | And lastly, we'll go
ahead and round our corners.
| | 03:02 | I'm going to set a fairly dramatic
radius on the round. There you go.
| | 03:06 | We also want to remove our Stroke.
| | 03:11 | Once that's ready to go, I'm going to embed
the Google Map in the middle of this area.
| | 03:15 | First, I'm going to draw a rectangle to gain
an idea of how big I want to embed the map.
| | 03:20 | You can see from these dimensions that our map is
going to be about 401 pixels wide by 377 pixels high.
| | 03:28 | Once we have a rough idea of how big to make
our map, let's visit the Google Maps website
| | 03:34 | and let's type in our address.
| | 03:35 | For now, I'll just use New York, New York.
| | 03:39 | Once we've got our map on screen, I'm going
to zoom in a little bit. I'm going to click
| | 03:43 | this Link button beside our map, and in this
flyout we have Customize and preview embedded
| | 03:49 | map, let's click that link.
| | 03:51 | This is going to bring up an Options window
where we can change some of the dimensions.
| | 03:55 | I'm going to set Custom dimensions, and I'll use
401 x 377; the size we determine in our Muse layout.
| | 04:03 | Next, let's just go ahead and center this
map, and I'm going to change the style to
| | 04:09 | Terrain, I like the look
of this better. There you go.
| | 04:12 | I'm happy with this map.
| | 04:14 | Now let's go ahead and select our code, copy
it, jump back to Muse, and I'm going to delete
| | 04:22 | this box, and we'll click Object>Insert HTML,
and paste our code into this box.
| | 04:30 | Once we click OK, Muse is going to generate a
preview of our map and we can move that into place.
| | 04:36 | Now I'm just going to scale this box back up,
it was actually pushed a little bit larger
| | 04:41 | when we embedded the map inside of it.
| | 04:44 | Lastly, what I want to do is I want to
remove this View Larger Map text at the bottom of
| | 04:49 | our code; you can do that
by editing the code directly.
| | 04:52 | If we right-click on it and click Edit HTML,
you can see at the very end of our code there
| | 04:58 | is a View Larger Map snippet of text,
I'm just going to remove that and click OK.
| | 05:03 | That removes the View Larger Map
option and our map looks as we intended.
| | 05:07 | While you may always be tempted to use
drawing tools such as Illustrator or Photoshop to
| | 05:11 | create graphics, consider what you can
actually create directly in Muse, like these ribbons
| | 05:16 | that I created above.
| | 05:18 | This way you're generating code rather than
graphics and reducing the bandwidth usage of your website.
| | 05:23 |
| | Collapse this transcript |
| Creating a document link for downloadable content| 00:00 | Linking to downloadable content--such as PDFs
or documents--is easy to do directly in Muse
| | 00:05 | by using the Link to File
feature available in the Hyperlink box.
| | 00:09 | On the Red 30 website, you can see that we've
linked this "PROJECT INQUIRY GUIDELINE (.pdf)"
| | 00:15 | onto our Contact page.
| | 00:17 | When you click on it, you can open the PDF
with Preview and have a look at what it contains.
| | 00:22 | This document contains some information
about what customers may need to provide the firm
| | 00:26 | in terms of working with them.
| | 00:28 | However, you may want to
link something like a resume.
| | 00:30 | If we jump back to Muse, I'll
show you how I created this link.
| | 00:34 | First, we need to go ahead
and draw a couple of textboxes.
| | 00:38 | Using the Textbox tool, I'll draw a top
textbox here and say "CLICK BELOW TO DOWNLOAD OUR".
| | 00:46 | We'll go ahead and style this text.
| | 00:48 | We're going to use PT Sans and we'll set the
size at 15 point, and I'm going to center it.
| | 00:54 | Next, let's duplicate this text, and below
we're going to write "PROJECT INQUIRY GUIDELINES"
| | 01:06 | --in parentheses, .pdf-- just to inform our users that
they will be downloading a linked PDF file.
| | 01:12 | Now let's style this text.
| | 01:14 | We'll bring the font size up to about 32,
or perhaps even bigger; we'll go with 40.
| | 01:23 | And lastly, I'm going to change
the color of this font to orange.
| | 01:28 | I'm also going to bring up the size of
this a little bit, just so it's more visible.
| | 01:32 | Next, let's draw those horizontal lines that
you see dividing the CLICK BELOW TO DOWNLOAD
| | 01:38 | OUR and the PROJECT INQUIRY GUIDELINES.
| | 01:40 | Using the Rectangle tool, I'm just
going to click and drag a very thin box.
| | 01:45 | And we'll turn off the Stroke and we'll
go ahead and fill that with a gray color.
| | 01:51 | I'm going to click on this box, hold Option,
and I'm going to just duplicate it down below.
| | 01:56 | Now that we've got our button set up, we need to
link the PROJECT INQUIRY text to the actual PDF file.
| | 02:02 | The way that we do that is
through the Hyperlink box.
| | 02:05 | So if we have this textbook selected and we
move up to our Hyperlink box in the Control
| | 02:10 | strip in Muse, click on the
dropdown, we can choose Link to File.
| | 02:15 | What we're going to do is click on this and
select the PDF that we're going to link this
| | 02:19 | text to, so I'm going to link it to
Design Request Guidelines.pdf and click Open.
| | 02:26 | Now that we've got the file linked, I'm
going to click the Hyperlink dropdown and choose
| | 02:30 | Open the link in a new window or tab.
| | 02:33 | Now that we've got our PDF linked to this
text, let's go ahead and preview this site.
| | 02:37 | When we preview this site, we can see if
we mouse over that this is an active link.
| | 02:41 | I'm not going to click on it, because I want
to click on this in the browser, so it launches
| | 02:45 | something to view our PDF.
| | 02:47 | Lastly, if you wanted to change our Hyperlink
styles, you can select this text. And in our
| | 02:53 | Hyperlink dropdown you can select Edit Link
Styles. And what this is going to do is allow
| | 02:58 | you to change things like underlines when
you're mousing over it, or changing colors
| | 03:03 | when you click on it.
| | 03:06 | Now that we've got this ready to go,
let's click File>Preview Page in Browser.
| | 03:11 | Once the page loads in our browser, we can check
to make sure our link is working as we intended.
| | 03:16 | If we click on the link, we can see that our PDF
file opens up in a separate window. That's perfect!
| | 03:21 | If you'd like to add additional files for
upload, perhaps that you're not going to be
| | 03:25 | working with immediately in your site, you can
do so by clicking the File>Add Files for Upload.
| | 03:32 | This is going to bring up a finder window
and in this window you could select an image
| | 03:36 | or PDF file that you wanted uploaded to your
website but you may not be immediately linking to.
| | 03:42 | If we select our Design_Request_Guidelines
and click OK, we would see that link appear
| | 03:47 | in our Assets panel on the right-hand side.
| | 03:50 | Designers will often link PDFs or other content
--such as resumes or news articles--to hyperlinks
| | 03:55 | or buttons on their website.
| | 03:57 | You can direct-link to a file in Muse and
it will take care of uploading it directly
| | 04:01 | to your FTP server; you won't
need any third-party software.
| | Collapse this transcript |
| Setting up a Business Catalyst contact form (Updated)| 00:00 |
The Contact Form Widget in Muse is a
really powerful feature and it includes
| | 00:04 |
several different options for submitting
the form, organizing the fields and
| | 00:08 |
changing options.
With the ability to build these forms from
| | 00:11 |
scratch in Muse you don't need to host
your website on Adobe's business catalyst
| | 00:16 |
servers to make use of contact forms.
They will work on any hosting provider you
| | 00:20 |
upload your site to.
Here's how I built the contact form on the
| | 00:24 |
Red 30 website.
First, let's click into the forms widgets
| | 00:29 |
and let's drag a simple form out onto the
canvas.
| | 00:32 |
Now that we have the form on our page,
let's set some options by clicking the
| | 00:35 |
blue arrow to the right.
In our Options menu, we have the ability
| | 00:39 |
to name this form.
So we'll just call this form Red 30 contact.
| | 00:43 |
Next, we'll send the email to
Red30sarah@gmail.com.
| | 00:50 |
Next, we want to change where we want to
send users after they submit the form.
| | 00:54 |
We have the option to stay on the current
page, or we can send them to a different page.
| | 00:59 |
I'm going to send them to a different
page.
| | 01:01 |
Let's close the Options Panel for now, and
let's drop back to our Plan View.
| | 01:05 |
I'm going to create a Child Page under our
Contact Page.
| | 01:09 |
I'm going to call it Thank You.
I've prepared some text to put onto this
| | 01:13 |
page so let's just copy that.
Jump back to the Plan View and let's paste
| | 01:17 |
it on the page we've just created.
With our text in place, we go back into
| | 01:23 |
our widget options and select after
sending and click on that Thank You page
| | 01:29 |
we just created.
What this will do is when a user submits
| | 01:32 |
the form, they're going to sent to that
thank you page rather than just staying on
| | 01:36 |
this contact page.
Next, we have the option to add some
| | 01:40 |
standard fields to our form.
These are commonly used fields that you
| | 01:43 |
might see on forms on the web.
I'm going to add a website field.
| | 01:47 |
When we click this option we can see that
website has appeared on our form to the left.
| | 01:52 |
Lastly, I just want to make sure that Edit
Together is turned on.
| | 01:55 |
Because I want all of these fields to
style in the same way when I edit one of them.
| | 01:59 |
Let's close that Options box, and let's
look at some of the other options we have
| | 02:04 |
in the form.
If we click on a specific text input
| | 02:07 |
field, we have a little bit of a different
Option menu.
| | 02:10 |
This Option menu allows us to change
things like require entry, which means a
| | 02:14 |
user has to enter it for the form to
submit.
| | 02:17 |
Next, we have Show Prompt Text when Empty.
What that means is this text inside the
| | 02:22 |
field that says your name.
If we turn this off, when we preview this
| | 02:26 |
form, it's not going to appear in the form
if we haven't entered anything into that field.
| | 02:30 |
I'm going to leave that on.
Next, we can turn on and off parts of a
| | 02:34 |
specific feel.
So, the label, which is the title above,
| | 02:37 |
we definitely want to leave that on.
And any additional message text.
| | 02:41 |
So, if we click that, we can see that it
says here, Required.
| | 02:45 |
We can change this perhaps to give users
instructions on what they have to enter in
| | 02:49 |
this form.
I'm going to leave that turned off for now.
| | 02:51 |
Once we've set specific field options, I'm
just going to size the form to fit better
| | 02:56 |
in our space.
We can do so by selecting a specific
| | 02:59 |
field, clicking the Transform Boundary on
the right-hand side and just shrinking it down.
| | 03:03 |
You can see that the two other single
fields below changed.
| | 03:07 |
However, our larger form field, which is a
multiline text input, didn't change.
| | 03:12 |
That's because it's different from the
other three.
| | 03:14 |
Those are single fields.
So, we'll click and size this manually.
| | 03:18 |
Now, we've got our form set up to work.
In our next video, we'll cover how to
| | 03:23 |
style this form and how to control some of
the states for our buttons and our fields..
| | 03:29 |
Always explore the Options file on each
section of your form by clicking the blue
| | 03:33 |
arrow to the right of a particular field.
If you're planning to redirect users to a
| | 03:37 |
new page after the form submission is
complete, it might be helpful to include
| | 03:41 |
instructions or next steps for them on
that page, such as visiting your social
| | 03:46 |
media sites for more information.
| | 03:48 |
| | Collapse this transcript |
| Styling and adding states to the contact form| 00:00 | Now that our form is set up and we've set
all of our options it's time for us to style
| | 00:05 | the text, fills, stroke colors--as
well as adjust the states for each field.
| | 00:10 | If we select one of the fields in our form
such as the Name field here we can see that
| | 00:14 | our states dropdown has a
variety of different options.
| | 00:17 | We can control what the field looks like
when we have the field Empty, Not Empty, when we
| | 00:23 | roll over it, when it's in focus or
keyboard focus or when there is an error.
| | 00:27 | By mousing over any of these options Muse gives you
a little flyout that explains what exactly is that.
| | 00:33 | First, I am going to change our Empty state.
| | 00:36 | For our Empty state I want to change our text
style first of all, and I'm going to set this
| | 00:41 | to PT Sans>Regular.
| | 00:45 | Now the PT Sans has been set we can see that
all of the other fields in our form have changed
| | 00:49 | and that's because we have Edit
Together turned on in our widget main options.
| | 00:54 | Next, I'm going to just change the labels.
| | 00:58 | Let's set our font size to 16 point, and
I'm actually just going to change this to all
| | 01:04 | capital letters which can be done by
clicking Edit>Change Case>UPPERCASE.
| | 01:10 | Next, I'm going to click on the specific text
input itself and I'm going to remove the Italic.
| | 01:19 | Let's change some of the
states for this particular input.
| | 01:22 | If we go to our Rollover state I'm
going to add a stroke to make it orange.
| | 01:31 | In our states dropdown let's
also change the Error state.
| | 01:35 | In the Error state we can see
that we also have Italic text.
| | 01:38 | I'm going to remove that and
I'm going to leave this pink.
| | 01:41 | That seems like a good color
appear if there is an error.
| | 01:44 | Let's just check all of our other
states to make sure they look good.
| | 01:47 | I'm not going to change the Non Empty or the Focus
states because I want them just to remain plain white.
| | 01:53 | I'm happy with all of the states for this
form and because we have Edit Together turned
| | 01:57 | on, that's going to carry through,
throughout all of the other fields on the form.
| | 02:01 | Next, I'm just going to change these
titles to be in all capital letters.
| | 02:06 | Okay, now that they're in all capital letters
I've decided that I want to move the Website
| | 02:11 | field up above the Message field.
| | 02:14 | So I'm going to click in and grab this
Website field, move it out of the way.
| | 02:18 | We'll drag down our Message field and we'll
move the Website field back up into its place.
| | 02:24 | Let's also just space out the fields on this
form a little bit to give it a little bit more room.
| | 02:28 | If we use the guides that appear underneath
each of the fields we can see that these are
| | 02:32 | approximately 20 pixels apart, and we'll
repeat the process for all of the fields underneath.
| | 02:39 | That's 20 pixels and we'll
set this at 20 pixels as well.
| | 02:43 | Now let's move our Submit button out of
the way and let's style the Submit button.
| | 02:46 | So we'll grab the corner and scale
it out to fit the size of the form.
| | 02:50 | Next, we're going to change
the states on the Submit button.
| | 02:54 | Let's change a Normal state to not have a
stroke and we'll change the Fill color to orange.
| | 03:01 | I'm also going to change our text style to
Lobster, Lobster is the font we've used extensively
| | 03:05 | throughout this site and we'll
just change the font size up to 20.
| | 03:10 | I'm also going to change
the font color to white.
| | 03:13 | Now that that's set we can change other states
on this button by clicking the states dropdown
| | 03:17 | and setting a Rollover.
| | 03:19 | For the Rollover state I'm going to
change the Fill color to a dark gray.
| | 03:24 | Let's have a look at our Mouse Down state;
it's also a light gray, so let's change this
| | 03:29 | to a dark gray again.
| | 03:31 | And finally we have our
Submit in Progress state.
| | 03:34 | This is a little bit different and now we've
got this text that kind of appeared behind the
| | 03:38 | button, and this is some text just telling us or
telling your user that the form is being submitted.
| | 03:43 | I'll just move this down so it's underneath
our Submit button and we'll style the text
| | 03:48 | in this state a little bit.
| | 03:49 | So I'm going to center it and I'm just
going to change it to PT Sans>Regular.
| | 03:55 | I'm also going to remove the Italic on it.
| | 03:58 | Now I want to make sure that the actual
Submit button is styled for the Submit in Progress
| | 04:02 | as well, so again we'll remove the Stroke
and we'll change the Fill on this one back
| | 04:07 | to orange, and we'll also
change the text color to white.
| | 04:12 | Okay, so we've changed a number of states,
however there is one more option for states
| | 04:17 | and that's on this submitting form itself.
| | 04:19 | If we click on this Form Message and check
our states dropdown again we now have more
| | 04:24 | options so we've got when it's submitting
in progress, when we've got a Submit Success,
| | 04:29 | and if we click on that we can see it says
"Form received" and we've also got Submit Error
| | 04:34 | which is what happens if
the form cannot be submitted.
| | 04:38 | So let's go ahead and just
style these other two states.
| | 04:41 | For Submit Success I want to set our font
at PT Sans>Regular, and also center it and
| | 04:48 | remove the Italics, and lastly we'll
set our Submit Error to the same font.
| | 04:54 | We'll remove the Italics and center it.
| | 05:00 | Now you might want to consider using styles for
this as it's going to make things a lot quicker.
| | 05:04 | Especially if you're styling a big form and you have
a lot of different states that are quite elaborate.
| | 05:09 | However for this form they should do just fine.
| | 05:12 | Let's go ahead and preview the form.
| | 05:16 | With our Form Preview here we can see that
when we mouse over a box the stroke color
| | 05:19 | changes to orange and we've got
this white background in place.
| | 05:23 | We set these settings on the States panel.
| | 05:27 | Our Submit button, when we mouse over it,
turns dark gray and when we click on it we
| | 05:32 | get an alert saying the standard HTML form is
configured to work with Adobe Business Catalyst.
| | 05:37 | So we can't test it unless we upload it
to our hosting server, so let's do that.
| | 05:41 | If we click on Publish we'll publish this up to a
temporary site called red30contacttest, and click OK.
| | 05:51 | Once the form is published up we'll go to our
Contact page and let's fill in some details.
| | 05:55 | Name: Steve Harris, Email: test@test.com, Website:
test.com, and a Message: Testing!; click Submit.
| | 06:07 | As you can see the form has redirected us to
this Thank You page that we set up, so the
| | 06:11 | form seems to be working as we intended.
| | 06:13 | Let's check our Gmail account to see
what the form submission looks like.
| | 06:17 | If we check our Gmail account we can see
that the Contact Red30 form has a new submission
| | 06:22 | that was sent to red30sarah@gmail.com, and
we can see some of the info below about what
| | 06:29 | was submitted, our name, the email
address, the web address, and the message.
| | 06:34 | Building complex forms is easy in Adobe Muse.
| | 06:37 | It's important to note though that for form
submissions work you'll need to host the site
| | 06:41 | using Adobe's Business Catalyst platform.
| | 06:44 | If you're using a third-party host you should
consider an alternate form provider like JotForm
| | 06:49 | or Wufoo instead.
| | Collapse this transcript |
| Creating a Wufoo contact form| 00:00 | If you're not hosting your site with Business
Catalyst and you want to build a contact form
| | 00:04 | I'd recommend Wufoo. That's my
favorite online form provider.
| | 00:08 | Let's set up a Wufoo account and
embed a form into our contact page.
| | 00:12 | In Firefox we visit the Wufoo
website. That's wufoo.com.
| | 00:19 | Let's sign up for a new
account; it's free to try.
| | 00:22 | So we'll sign up for free and we'll use
Sarah's email address. That's red30sarah@gmail.com.
| | 00:30 | Password and her Account URL, we'll call this red30,
and of course we'll agree to the terms of service.
| | 00:39 | Let's create the account.
| | 00:43 | Once our account is created
now we need to create a new form.
| | 00:46 | We can create a new form by clicking this
button in the top-right that says New Form!
| | 00:51 | Now this is where we actually build our form,
so we have lots of settings and lots of options
| | 00:55 | for building a form.
| | 00:57 | First of all I'm going to change my form name
by clicking in this top Untitled Form area here.
| | 01:02 | So we'll change the name to Red 30 Contact,
and in the Description of our form let's just
| | 01:08 | say, "Submit a quote request."
| | 01:11 | We'll leave the language as English, the
Label Placement as Top-Aligned, and we have some
| | 01:16 | confirmations here so we can actually show
different text when we submit our form--something
| | 01:21 | like, "Great! Thanks for filling out my
form!" Or we could redirect to our website.
| | 01:25 | In this case we could redirect to that Thank
You page we created using our Muse website.
| | 01:31 | This is actually an advanced feature on the Wufoo
account, so we we'll need to upgrade our account.
| | 01:36 | So for now we'll just show this text.
| | 01:38 | Lastly, we can send an email confirmation
to a user so that the user that submits the
| | 01:43 | form knows that it actually went through.
| | 01:46 | We also have the option to show Captcha.
| | 01:49 | What this is, is the jumbled letters
or numbers that you'll need to enter.
| | 01:53 | This is just to ensure that spammers can't
continuously submit contact requests to your form.
| | 01:59 | Let's just leave this off for now at Never Show.
| | 02:03 | Now that we've set up our form we'll go back to Add a
field on the top-left and we'll start building the form.
| | 02:09 | So let's pick some of our predefined fields
such as Name, Email, Website, and then we'll
| | 02:16 | add a Paragraph Text option.
| | 02:19 | And we'll just call this Message.
| | 02:21 | We can change the form properties or the
names of these fields just by clicking on them and
| | 02:27 | editing the labels.
| | 02:28 | Message>Field Size we'll just
set this to Medium. That's okay.
| | 02:33 | We can also set the options for required fields or
who to show this field to, such as administrative users.
| | 02:40 | We don't want to change any
of these settings for now.
| | 02:42 | We can also limit the number of
characters that each of these fields has.
| | 02:46 | So there's lots of options as far as styling.
| | 02:49 | For now I'm happy with the
basic styling that Wufoo provides.
| | 02:52 | Once we finish editing our form let's
just click Save Form, and it's going to save.
| | 02:58 | Now this box comes up and
asks us what we want to do next.
| | 03:02 | We can continue editing it, we can set up
notifications or we can finish with the form.
| | 03:07 | I'm done editing it, so I'm
going to set up some notifications.
| | 03:11 | In this area we can enter our email address;
this is where form submissions will go.
| | 03:17 | So I'm going to enter Sarah's
email address, red30sarah@gmail.com.
| | 03:23 | Next, we'll set our Reply To Email. What
this means is that when you receive this email
| | 03:30 | and you hit Reply it's going to reply to the
email that the user has entered into the form.
| | 03:36 | Next we can choose whether we want us to
receive emails about new entries or new comments.
| | 03:41 | We're just going to leave
that the same for now.
| | 03:43 | Another cool feature of Wufoo is that we
can actually enter a cell phone number in.
| | 03:47 | So when somebody submits a contact request to our
form it can send you a text rather than an email.
| | 03:53 | We're going to leave this blank for now.
| | 03:55 | I'm happy with this, so let's just make
sure we've clicked Save and we're done.
| | 04:00 | If we go back to our main Forms page now we
have the option to actually style the form
| | 04:05 | and that's called Themes.
| | 04:07 | Under this form we have the option to change
the theme, right now it's set for the Default
| | 04:12 | Theme but we can set a new theme.
| | 04:14 | First, I'm going to just preview the default
theme to see what it looks like. Let's click View.
| | 04:20 | Here's our form. We can change some of the
colors and styles of the form but for now
| | 04:24 | I find the default theme to look pretty
good, so we'll just leave that set as is.
| | 04:29 | Next what I want to do is
embed this form onto our website.
| | 04:33 | The way that we can do that is
by clicking on the Code button.
| | 04:38 | When we click Code it gives us a
whole bunch of options to embed this form.
| | 04:42 | So we could do a link to the form
basically what this means is if we created a button
| | 04:46 | in Muse and we pointed it to this
hyperlink our form would load in a new window.
| | 04:51 | What I'm going to do is I'm going to use my
Embed Form Code--that's the code that's going
| | 04:56 | to allow us to embed this
form directly into Muse.
| | 04:59 | We get a couple of different versions but
for now I'm going to use the JavaScript version
| | 05:03 | which is recommended.
| | 05:05 | We'll copy and then paste this code into Muse
by clicking into our site and going Object>Insert
| | 05:12 | HTML, and pasting the code.
| | 05:15 | When we click OK, Muse will work to
generate a preview of this contact form.
| | 05:20 | We can see that the form has appeared on our
site and now if we just move this over into
| | 05:23 | place--preview the form--we can see that we
have quite a nice contact form ready to go.
| | 05:31 | And if we wanted to change some of the
colors and options on this form we could do so by
| | 05:35 | just theming it directly in the Wufoo interface.
| | 05:38 | So let's go ahead and submit a form request.
| | 05:42 | We'll enter in our name, our email, our website
address, and a message, "Testing!" and click Submit.
| | 05:51 | "Great! Thanks for filling out our form."
| | 05:55 | Now if we go to our Gmail account we can see that
our Wufoo contact request has appeared automatically.
| | 06:01 | And within this request we can see all of
the same fields that we had in our form, our
| | 06:05 | name, our email, our website, and our message.
| | 06:09 | All of this was built within a few
minutes using Wufoo's free account.
| | 06:12 | So definitely explore your options for
building forms and embedding them in Muse if you're
| | 06:17 | not hosting on the Adobe
Business Catalyst platform.
| | Collapse this transcript |
|
|
4. Publishing and Optimizing the SiteBest practices for search engine optimization| 00:00 | Search Engine Optimization is a key part of
marketing your site on the web and by following
| | 00:05 | a few simple guidelines you can ensure that
your Muse site is easily indexed and recognized
| | 00:10 | by Google or any other
search engine that you use.
| | 00:14 | The first and most important aspect of SEO
is to write high quality, keyword rich text
| | 00:19 | that can be used throughout the site.
| | 00:22 | You can see on our Red 30 site here, we've
included words such as Website Design, Branding
| | 00:26 | and identity design. These are words that we
might want to come up on Google for potential
| | 00:31 | searches, so it's good to include
them in the content on your site.
| | 00:35 | Next, we need to make sure that
this text is actual real HTML text.
| | 00:40 | If we highlight a block of it, click into
our Text dropdown here, and look at the Fonts
| | 00:45 | we're using, we need to make sure that
we're not using the fonts that say "System Fonts
| | 00:49 | (exports as image)".
| | 00:52 | If we select one of these fonts, you can see that the
small image icon appears in the bottom right of this box.
| | 00:57 | And what this means is that Muse is going to
output this text as an image or create an image from it.
| | 01:04 | If the text on your site is contained in an
image, Google is not going to be able to read
| | 01:08 | it, and that's going to
really hurt your SEO efforts.
| | 01:11 | So just make sure you're using real text throughout your
site, for everything from menus, to buttons, and headings.
| | 01:17 | With Web Fonts now included in Muse, there
is almost no reason to not use real text for
| | 01:21 | any aspect of the site.
| | 01:23 | The next thing we need to
look at is our site's metadata.
| | 01:26 | By going up to our Page>Page Properties box,
and then clicking the Metadata tab in the
| | 01:32 | top, we can see a few options here.
| | 01:35 | If we mouse over any of the titles in this
box, Muse will bring up a description of what
| | 01:39 | they all mean, but I'll give
you a quick explanation right now.
| | 01:42 | In the Description box we need to include a
brief description of the particular page on our site.
| | 01:48 | If we click into Firefox and type a company
name in Google, such as visual arms, you can
| | 01:54 | see that we get the listing in this format;
we have a title here; and then we have this
| | 01:58 | description down below.
| | 02:00 | Now, this is actually the description that
I included in this Meta Description box on
| | 02:04 | my site, so you can see how
powerful it can be on Google.
| | 02:08 | The next option is the Keywords box.
| | 02:10 | This is somewhere that we can include a couple of
different keywords that might be related to our site.
| | 02:15 | So we might want to include something like
website design, branding & identity, etcetera.
| | 02:23 | You can just separate those with a comma.
| | 02:24 | Now, stuffing the keywords box full of a thousand
keywords really isn't going to help your ranking,
| | 02:29 | so I'd recommend you just include
a couple of really important ones.
| | 02:33 | The HTML for <head> section is where we can
embed things like Google Analytics or other
| | 02:37 | additional code snippets; we're
not going to be using that for SEO.
| | 02:41 | Lastly, we've got our
Page Name and our Page Title.
| | 02:44 | While these may appear to be
the same, they're definitely not.
| | 02:48 | The Page Name is what Muse is actually
calling this page in our site Plan view, so that's
| | 02:52 | what we entered in our Plan view.
| | 02:54 | The Page Title however is what's going to
show up in the top of our browser window.
| | 02:58 | If we jump back to Firefox, we can see that
the title here is what I've entered for the
| | 03:02 | Page Title, and if we click into this link,
you can see at the top of the browser window
| | 03:06 | that Visual Arms | Calgary Graphic Design by
Steve Harris is the actual title of the page.
| | 03:11 | If we go back to Muse, we need to uncheck
this, Same as Page Name option, and we can
| | 03:17 | enter a Title for our page; let's just call
this Website Design by Red 30 and click OK.
| | 03:25 | Now when we export this site, that page is
going to have a much more descriptive name
| | 03:28 | and Google is going to
understand what you're including on it.
| | 03:31 | Next, we need to talk about Headings.
| | 03:34 | This heading here that says "Thanks for
stopping by!" uses a style called Heading 1, that's
| | 03:39 | what we've named it.
| | 03:40 | However, if we select Heading 1 by double-
clicking on it, we can see that the Style Options dialog
| | 03:45 | tells us it's mapped to a Paragraph Tag,
and in this case it's mapped to the h1 tag.
| | 03:52 | This is the right way to do it.
| | 03:53 | If for example, this name was mapped to the
default or a Paragraph Tag, Google wouldn't
| | 03:58 | know that this was a prominent heading.
| | 04:00 | So mapping styles appropriately is really
important for search engines to understand
| | 04:04 | how your site fits together and
the hierarchy of all of the information.
| | 04:08 | Lastly, we need to talk about images.
| | 04:12 | If we click on this banner image that we've
included above and look into our Assets panel
| | 04:16 | on the right, we can see
that that image is selected.
| | 04:19 | If we right-click on the image and click
onto Edit Image Properties, we have a few blank
| | 04:24 | boxes here that we'll need to fill in.
| | 04:26 | First of all, we have our Tooltip.
| | 04:28 | Your Tooltip can basically be thought of as
the title for your image, so we might just
| | 04:32 | want to call this The Main Dish Banner.
| | 04:36 | The Alternative Text is a
description of the image.
| | 04:39 | This might be used on users who are
visually impaired and can't actually see the image
| | 04:43 | and need to read what the image is all about.
| | 04:46 | So here we want to write a more extensive
description of what this is going to be. So
| | 04:50 | this might say something like photo of the menu for
the main dish, scan to view our menu online, etcetera.
| | 04:57 | Once these are filled in, try and repeat
this throughout all the images on your site.
| | 05:02 | Search Engine Optimization is an ongoing
process and you should always be working to improve
| | 05:07 | the quality of your Meta descriptions,
your page titles, and your site content.
| | 05:12 | Just remember that nothing improves the ranking of a
website better than quality content that's updated regularly.
| | 05:19 | You can't fool Google by stuffing your
site full of hidden keywords or text.
| | 05:23 | If you could, it wouldn't return quality
results and nobody would use it as a search engine.
| | 05:28 | If you want your site to rank high for a
particular keyword, you should focus on making sure that
| | 05:33 | it truly deserves to be there.
| | Collapse this transcript |
| Inserting and activating Google Analytics| 00:00 | Monitoring your website traffic allows you to
keep track of how your website is performing
| | 00:05 | and gives you the evidence you need
to make crucial changes to the site.
| | 00:09 | Google Analytics is an enterprise class
web analytics tool that's free to use and can
| | 00:14 | be easily implemented onto your website.
| | 00:17 | First let's visit the Google Analytics
homepage at www.google.com/analytics.
| | 00:21 | Next, we're going to create an account.
| | 00:26 | You can login using your
normal Google ID and click Sign in.
| | 00:32 | Once you've signed in, you have the option to
sign up for Analytics, so let's go ahead and sign up.
| | 00:38 | Now that we've signed up,
we need to name our account.
| | 00:40 | I'm going to name the account Red 30 Design.
| | 00:43 | Now we need to enter our Website's URL;
this is going to be its domain name.
| | 00:47 | I'm going to select http, and we'll
include www.portfolio.red30design.com.
| | 00:55 | Next, we need to include our Time zone.
| | 00:59 | Google is going to use this to track the hits to
your site and tell you when visitors were visiting.
| | 01:05 | So we're going to leave
this set at Pacific Time.
| | 01:08 | Lastly, you have the option to include your
Industry Category; we'll just go ahead and
| | 01:13 | set this at Media and Entertainment.
| | 01:16 | We have a few more additional options here
that you can read more about by just clicking
| | 01:20 | on Show example; we'll just
leave those checked for now.
| | 01:24 | And lastly, we need to just agree to the User
Agreement here, so we'll click Yes and Create the Account.
| | 01:31 | Now our account has been created.
| | 01:33 | So now we need to integrate the
tracking code directly into our website.
| | 01:37 | So every Google Analytics site
will get a unique tracking ID.
| | 01:41 | This is the unique
tracking ID for our Red 30 site.
| | 01:44 | Next, if we scroll down, we have some options how
we'd like to include our Analytics code in the site.
| | 01:50 | We have an Advanced option and a Custom option,
but for Muse we just need to use the Standard option.
| | 01:56 | Next, we need to click on what are we
tracking, a single domain, one domain with multiple
| | 02:00 | sites, or multiple top-level domains.
| | 02:03 | For this site we're just going
to be tracking a single domain.
| | 02:06 | Lastly, we have the tracking
code that Google provides us.
| | 02:10 | This is what we're going to be including in
our site to make sure that it's actually tracked
| | 02:13 | by Google Analytics.
| | 02:14 | So if we copy this code, if we go back to
our Muse site, there's a few ways that we
| | 02:20 | can integrate this code.
| | 02:21 | The first is to click onto our Homepage
and to click into our Page>Page Properties.
| | 02:27 | Underneath the Metadata tab we have this
section called HTML for <head>, this is where we're
| | 02:32 | going to integrate that code
that Google has provided us.
| | 02:34 | So if we just right-click and click
Paste, it has pasted the tracking code in.
| | 02:39 | And if we click OK, now Google
Analytics will track this particular page.
| | 02:44 | You'll need to include the tracking code on
each individual page that you'd like tracked.
| | 02:49 | Another option for you to do this is
for you to embed it on the Master Page.
| | 02:53 | If we click into our Master Page, go up to
Object>Insert HTML, we can actually paste
| | 03:00 | the tracking code in here and click OK.
| | 03:04 | Once Muse analyzes the code,
then we get this small HTML box.
| | 03:08 | We can just position this
out of the way on our site.
| | 03:11 | You may need to preview your site just to make
sure it's not causing any weird layout shifts.
| | 03:15 | Looks good to me!
| | 03:16 | Now, the difference between these two options
is that this method will include the tracking
| | 03:21 | code somewhere in the middle of the code for
your site, whereas the original method will
| | 03:25 | place it in the head of your site.
| | 03:28 | Placing it in the head is actually the
recommended method by Google, however both will work fine,
| | 03:33 | especially for sites that are
a little bit smaller in size.
| | 03:36 | Now all we need to do is
upload our site to our domain name.
| | 03:41 | Once we've uploaded the site to the domain,
if we go back to our Google Analytics account,
| | 03:46 | click Save to save all our settings, and then
go up to Home. We're going to see all of the
| | 03:51 | visits to our site.
| | 03:53 | So right now we just uploaded the code
so we don't have a lot of data to view.
| | 03:56 | However, over time you're going to get a
good idea of all your visitor stats and any sort
| | 04:01 | of unique things that people are doing on
your site that you can use to make better
| | 04:04 | decisions about how to structure content.
| | 04:07 | Google Analytics is the best free
website analytics tool on the web today.
| | 04:12 | Use it to keep an eye on how visitors are
finding your site, as well as identifying
| | 04:16 | any pages that may not be
performing up to your standards.
| | Collapse this transcript |
| Setting up Google Webmaster Tools| 00:00 | In addition to Analytics, Google has a
service called Webmaster Tools that can be really
| | 00:05 | valuable for managing your visibility in Google.
| | 00:08 | Here's how we set it up
to work with our Muse site.
| | 00:11 | First of all, visit google.com/webmasters/tools to
sign up for your new Google Webmaster Tools account.
| | 00:19 | Once we've logged into our account, we have
this box here that says Add A Site, so we're
| | 00:24 | going to add our Muse site
into our Webmaster Tools account.
| | 00:27 | For this course I published our Muse site up
to a temporary site on the Business Catalyst
| | 00:32 | Platform; I've called it red30test.
| | 00:36 | So the full link is
red30test.businesscatalyst.com.
| | 00:39 | If we click on that URL, we can see
that the site loads up in that link.
| | 00:45 | So I'm just going to go
ahead and copy that link for now.
| | 00:48 | That's what we'll use in
this test of Webmaster Tools.
| | 00:51 | And let's paste it into this box. I'm going
to remove the index.html--that doesn't matter.
| | 00:56 | We just need the main level domain.
| | 01:00 | Now let's click Add A Site.
| | 01:04 | Once we click Add A Site, Webmaster Tools
wants us to verify that we do actually own
| | 01:08 | that site, and there's a
couple of methods for us to do this.
| | 01:12 | The recommended method is to use the HTML file
upload, but there's actually an easier way to do this.
| | 01:19 | If we click into the Alternate methods box,
it's going to give us the ability to link
| | 01:23 | to our Google Analytics account, which we
could actually do; we could include an HTML
| | 01:28 | tag in the meta tag of our site's homepage,
we can do that as well; or we could sign into
| | 01:34 | our domain name provider.
| | 01:35 | For this course, I'm going
to use the HTML tag method.
| | 01:39 | Webmaster Tools brings up some information
below about how to go about embedding this tag.
| | 01:44 | It says first to copy the tag and
paste it onto the site's homepage.
| | 01:49 | It should go in the <head> section.
| | 01:51 | Well, we have the ability to embed things
in our <head> section within the Metadata
| | 01:55 | properties of our Muse site.
| | 01:57 | If we go ahead and we copy this snippet of
code--right-click and Copy--go back to our
| | 02:03 | Muse site. I'll click into a specific page
on the site, the homepage in particular,
| | 02:08 | this is where we need to place our embedded tag.
| | 02:11 | We'll go up to the Page>Page Properties
section, click on our Metadata tag, and we're going
| | 02:17 | to Paste this code into the HTML for <head>,
so let's just paste it in there. Click OK.
| | 02:23 | Now, we'll need to publish this version back up to
our FTP, so that it's current and it includes that tag.
| | 02:29 | So let's click OK.
| | 02:31 | There, now Muse has published a new version
and this tag is going to be included in the
| | 02:35 | code for this site.
| | 02:38 | Once the site has finished uploading, let's
go back to our Webmaster Tools account and
| | 02:42 | we need to click Verify.
| | 02:44 | Verify is going to make sure that we have
actually embedded this tag properly on our site.
| | 02:49 | And there you go. It says "Congratulations, we've
successfully verified the ownership of this site."
| | 02:55 | Now we can click Continue.
| | 02:58 | Now we've linked this site to
our Webmaster Tools account.
| | 03:01 | There is one other cool feature of Webmaster Tools
and it's the ability to upload a sitemap into it.
| | 03:07 | Muse actually generates a sitemap file--it's
sitemap.xml when it exports. And what a site
| | 03:14 | map file does is explain to a search engine
how well the pages on the site fit together.
| | 03:20 | If we click into the Optimization tab in
Webmaster Tools and select Sitemaps, we have the ability
| | 03:26 | to Add or Test a Sitemap,
let's click that button.
| | 03:30 | Now, we need to provide the link to our sitemap.
| | 03:33 | Muse always places the sitemap right in the
main folder of your site. So if we just add
| | 03:37 | in here sitemap.xml--that's the most
common file type for a sitemap--and click Submit
| | 03:44 | Sitemap, it's going to submit
the sitemap to Webmaster Tools.
| | 03:47 | And we can refresh this page just to make
sure everything is submitted as we intended.
| | 03:53 | You can see here that we have a sitemap.xml
submitted, and it's just undergoing processing right now.
| | 03:59 | Within a day or two this will show as
Processed and it will let us know of any issues with
| | 04:03 | the site or how many pages
Google is actually indexing.
| | 04:07 | The quality of information in your Google
Webmaster Tools account will improve over time.
| | 04:12 | When the account is brand-new, Google has no
information regarding Search Queries or Crawl Errors.
| | 04:17 | If we click into the Configuration of our
site, we have some other options for Settings.
| | 04:21 | So I recommend that you get familiar with
the Webmaster Tools layout and you can start
| | 04:25 | to see how to make it work for you.
| | 04:27 | If we go down to the Traffic tab and click
Search Queries, when we have some data, this
| | 04:33 | will show what kind of queries our site is
getting in terms of search traffic, so it's
| | 04:37 | all really helpful information.
| | 04:39 | Check back into your account often and
explore all the options that Google provides.
| | Collapse this transcript |
| Publishing to a third-party hosting server within Muse| 00:00 | In addition to publishing your site to
Business Catalyst using the Publish option in Muse,
| | 00:06 | Muse also has the ability to publish your
site to a third party host such as GoDaddy
| | 00:10 | without having to manually export the HTML and upload
the files using different software such as FileZilla.
| | 00:17 | When you're finished designing your site you
can upload your site to an FTP by using the
| | 00:22 | File>Upload to FTP Host option.
| | 00:26 | This brings up a box where we can
enter some details in about our FTP Host.
| | 00:31 | For our Domain name we're going to
be using portfolio.red30design.com.
| | 00:38 | Our FTP Host information was provided to
us by our hosting service when we signed up.
| | 00:43 | Ours is ftp.ldcsites.com.
| | 00:47 | Most of the time the FTP host
information starts with the letters FTP.
| | 00:52 | So if you can't find it, look for that.
| | 00:54 | The Host directory allows us to pick a specific
subfolder or directory on the FTP to upload the site to.
| | 01:00 | If we leave this blank it will
just upload to the root of the FTP.
| | 01:05 | Just think of the FTP as a
big folder stored on a server.
| | 01:09 | Our Login name will be the login name that
you chose when you signed up for your host.
| | 01:15 | Often it's an email address.
| | 01:17 | Lastly, we need to enter our Password.
| | 01:21 | The final option in this box is to choose to
Upload All the files or Only the modified files.
| | 01:27 | Leaving Only modified files selected means
that as you edit your Muse site, it will only
| | 01:32 | upload what's changed which will
definitely shorten the upload time.
| | 01:36 | Once we have all these
details in let's click OK.
| | 01:40 | Muse will connect to the FTP Host and it will
upload your files automatically to the FTP server.
| | 01:46 | After your site is done uploading, your
site will launch in the browser, and this looks
| | 01:50 | great as we intended.
| | 01:52 | If we did want to manually upload the site
using an FTP program, I'd recommend FileZilla.
| | 01:59 | Let's have a look at the FileZilla interface.
| | 02:00 | If we click in the FileZilla the program
looks a little bit intimidating, but I'll give you
| | 02:05 | a quick breakdown of what everything means.
| | 02:07 | In our top menu we have some options to enter
in our Hostname, our Username, and our Password
| | 02:11 | similar to as we did in Muse.
| | 02:13 | Blow this we have a column on the left side.
| | 02:16 | This is our local files.
| | 02:17 | So these are the files that
are actually on the computer.
| | 02:20 | If you wanted to drag and drop files
between your FTP and your computer, you would drag
| | 02:24 | it from the left side to the right side.
| | 02:26 | You can see on the right side it says Remote site, and
this is what we're going to be connected to the FTP server.
| | 02:32 | So once we connect to our server we're
going to see some files populate in this window.
| | 02:37 | Let's go ahead and connect to the
server that we set up for our Muse site.
| | 02:41 | So our Host is going to be ftp.ldcsites.
com, Username, and finally our Password.
| | 02:54 | Now we can click Quickconnect.
| | 02:56 | Once we've connected, we can see that all
the files we uploaded to our site now appear
| | 03:01 | on the right-hand side.
| | 03:02 | If we wanted to download files from our
FTP server or we wanted to manipulate some of
| | 03:07 | the manually, you can do so in this window just as
if you're working in your Finder or Explorer window.
| | 03:13 | Another thing I'd like to show you in
Muse is changing the Host directory location.
| | 03:18 | So if we go back or File>Upload to FTP
Host and we add in a Host directory here.
| | 03:24 | Let's call this Host
directory red30test and click OK.
| | 03:31 | This brings up a box saying that
The requested path does not exist.
| | 03:34 | Do we want to create it?
| | 03:35 | Basically it means the folder
we're trying to upload to doesn't exist.
| | 03:39 | So we need to create a
new one. So let's click OK.
| | 03:41 | Now Muse is going to create this folder
and re-upload the files into this folder.
| | 03:47 | Once it's done, I'm going to jump back to
FileZilla and on our right-hand side where we
| | 03:51 | were connected to our FTP I'm just going to
right-click in the window and click Refresh.
| | 03:56 | Now that have Refreshed we can see that
there is actually a folder here called red30test
| | 04:01 | and Muse has uploaded all
the files into that folder.
| | 04:05 | Because there is an index.html file sitting
in this folder that means when we write the
| | 04:10 | link to it in our browser, we
don't need to include index.html.
| | 04:14 | We can just put a forward
slash and the folder name.
| | 04:16 | If we jump to our browser, go up to the
address of the top--and I remove the index.html--and
| | 04:22 | I type red30test and click Enter. We can see
there our site loads again. But now this time
| | 04:28 | we have a /red30test and another slash.
| | 04:31 | This is because it's loading the
version that's stored in that red30 subfolder.
| | 04:37 | So you can actually upload different
versions or different sites to different subfolders
| | 04:41 | on your FTP and by using third-party
software like FileZilla, you get a little bit more
| | 04:46 | control in terms of how you
can move those files around.
| | 04:49 | However, it's not necessary to use that.
| | 04:52 | With Muse's built-in FTP upload you no
longer need to manually move files from your local
| | 04:58 | machine to your web server.
| | 05:00 | You can easily only update what has been
changed on your site, saving you time and reducing
| | 05:05 | the risk of overwriting essential files.
| | Collapse this transcript |
| Buying and linking a custom domain name| 00:00 | If you're new to working on the web it's
really easy to get confused about how domain names
| | 00:05 | connect with hosting servers--and what settings you
need to change to link everything together properly.
| | 00:11 | Using an Adobe Muse website published to the
Business Catalyst platform I'll show you how
| | 00:15 | to link your domain name even if it's
purchased through a third-party hosting provider.
| | 00:20 | To start let's search and
find a new domain name.
| | 00:24 | I'm going to go to the GoDaddy website
and I'm going to search for new domain.
| | 00:28 | In this main box we will type in
red30creative and leave it set to .com and click Go.
| | 00:37 | As you can see RED30CREATIVE.COM
is available and it's only $12.99.
| | 00:42 | That seems like a good deal, so
we're going to go ahead and buy this.
| | 00:45 | Remember when you select your domain name,
it's important to include keywords that you'd
| | 00:50 | like to be search for in the domain if possible.
| | 00:53 | Red30creative is a great domain name for our
business, because it's the name of our actual
| | 00:59 | business, however, red30graphicdesign or
red30webdesign may actually rank higher than red30creative,
| | 01:05 | because it contains keywords
directly in the domain itself.
| | 01:09 | So let's go ahead and click Add to add this
to our cart and we're going to go ahead and
| | 01:13 | Continue to Registration.
| | 01:16 | Now we need to go through and fill in
an all of our registration information.
| | 01:20 | Now that we've finished purchasing our domain
through GoDaddy, we're going to have an account
| | 01:24 | that looks something like this.
| | 01:26 | Before I make any changes to the GoDaddy
account, first I'm going to go back to my Muse site.
| | 01:30 | Let's go to Muse and let's
click on the Manage tab on the top.
| | 01:35 | This will bring up the Admin
Console for our Business Catalyst site.
| | 01:39 | In the Admin Console we have some analytics, we
have other options to change things for our site.
| | 01:45 | Within this console what we're going to do
first is we're going to Push our Site Live.
| | 01:49 | That means we're going to changes from a
temporarily hosted site to an actual live website that
| | 01:54 | we we'll be paying for each month.
| | 01:56 | Once we've click Push Site Live,
we get another box that comes up.
| | 01:59 | Because I'm a Creative Cloud member
I have hosting for five live website.
| | 02:04 | So I'm going to use this
for one of my five sites.
| | 02:07 | Let's click Push Site Live.
| | 02:09 | Now our site is live on the web.
| | 02:11 | So what we need to do from here is we need to add
our domain that we've purchased through GoDaddy.
| | 02:16 | Let's click the Add a Domain button.
| | 02:18 | Once we click Add a Domain, we get this box
where we can enter in some information about
| | 02:22 | the domain that we're going to use.
| | 02:25 | For our Domain name let's enter in
red30creative.com. That's what we just purchased.
| | 02:30 | Next, we need to select
the Home page on our website.
| | 02:33 | This is the page that we want visitors to
land on if perhaps they googled us or they
| | 02:37 | typed in the address into the browser window.
| | 02:39 | So I'm going to click a Home page.
| | 02:42 | Let's set our Country, you can
set this based on your location.
| | 02:44 | We'll set our Language--I'm just going to
set this as English (United States).
| | 02:51 | And now we have an option
for Host with the service.
| | 02:54 | What this means is, are we hosting the
site with Business Catalyst, or are we hosting
| | 02:57 | this site somewhere else.
| | 02:58 | We are going to host this site with Business
Catalyst since we just pushed this site live.
| | 03:02 | So we'll leave it on Recommended.
| | 03:05 | Next we have the option to change our
Email depending who's hosting that.
| | 03:08 | So we'll leave that as Recommended as well,
but you could use something like your Google
| | 03:11 | Apps account for your email or another service.
| | 03:14 | Lastly, we need to just set
whether we want to use www. in the URL.
| | 03:19 | So we can have it be
red30creative.com or www.red30creative.com.
| | 03:24 | I'm going to leave this on Recommended
to Always show the www in the address bar.
| | 03:31 | Now that that's all done let's click Save.
| | 03:35 | Once we've saved this domain we can
just go ahead and close the window.
| | 03:39 | Now we can see that the domain name
red30creative.com is set up on our Business Catalyst site.
| | 03:45 | So what we've done basically is we've hosted
the site on Business Catalyst and we've purchased
| | 03:51 | the domain through a
third party. That's GoDaddy.
| | 03:54 | Now what we need to do is
we need to link the two.
| | 03:57 | To link our hosting server with our domain
provider we need to change what's called the name servers.
| | 04:03 | Business Catalyst has specific name servers that they
use and we can find them just through a quick Google.
| | 04:09 | So I'm going to go up to a Google and I'm just
going to put in business catalyst nameservers.
| | 04:15 | And if I click on the first link it's from
the Knowledgebase for Business Catalyst. And
| | 04:20 | scroll down--it talks about Buying and registering a
domain name and pointing the domain to our servers.
| | 04:26 | That's what we're doing right now.
| | 04:27 | So if we look down below we can see Replace
any existing name servers with the following
| | 04:32 | name servers and it gives
us three different servers.
| | 04:36 | That's what we need to
include in our GoDaddy account.
| | 04:39 | Let's drop back to GoDaddy.
| | 04:41 | In our GoDaddy account we have the Domains option
here and we're going to Launch in to our domains.
| | 04:47 | Once domains comes up, we can see that the
domain we just purchased red30creative is
| | 04:51 | available here and it displays somw
information about its expiry, its Status, etcetera.
| | 04:57 | In the Features if we mouse over some of
these areas we can see that we have some features
| | 05:00 | to lock the domain, to auto renew it, etcetera.
| | 05:04 | I'm just going to click on the
domain first to access more features.
| | 05:08 | Next, we need to set our nameservers.
| | 05:11 | The Nameservers option is right here.
| | 05:13 | We click on Nameservers dropdown and Set
Nameservers, we're going to get a new options box here
| | 05:21 | and we have a few choices about
what we want to do with our domain.
| | 05:25 | Because we didn't purchase a hosting account
to GoDaddy--we're hosting on Business Catalyst--
| | 05:29 | I have specific nameservers for those domains.
| | 05:32 | This is where we can enter them in.
| | 05:34 | So if we have a look back at our Business
Catalyst name servers, you can see that they're
| | 05:39 | ns1.worldsecuresystems.com.
| | 05:42 | I'm going to copy the first name server and
let's paste it into the Nameserver 1 box in GoDaddy.
| | 05:49 | I'm also going to paste it again in
Nameserver 2 and Nameserver 3 and I'm just going to
| | 05:54 | change it to NS2 and NS3.
| | 05:57 | This is exactly as we saw in our
Business Catalyst Knowledgebase.
| | 06:02 | Once those nameservers are set we can click OK.
| | 06:05 | It will validate them and it says these
changes usually take place within two hours.
| | 06:09 | However, it may take up to 48
hours for them to take effect.
| | 06:13 | So what we've done if we've now pointed this
domain name to our Business Catalyst hosting server.
| | 06:19 | A custom domain name is important for a
professional presence on the web and your Adobe Muse website
| | 06:25 | can be used along with any
domain provider on the web.
| | 06:28 | For this example I chose GoDaddy.
| | 06:31 | For more information about linking domains
and working with Business Catalyst, visit
| | 06:35 | the support documentation on the Business
Catalyst website at businesscatalyst.com/support.
| | Collapse this transcript |
| Enabling and using content management (New)| 00:00 |
If you're hosting your website on Adobe's
Business Catalyst platform, you can take
| | 00:04 |
advantage of the ability to edit the text
and photos on your site through InBrowser Editing.
| | 00:09 |
This means that you don't need access to
the Muse working file and your clients and
| | 00:14 |
customers can edit their own site without
engaging the original designer.
| | 00:18 |
Changes made remotely are then synced back
to the Muse site, meaning that the working
| | 00:22 |
file and live site stay in sync at all
times.
| | 00:25 |
Let's open up our InBrowser Editing Muse
file, and move up to the File and Site
| | 00:31 |
Properties dialog box.
In the Site Properties dialog box, we need
| | 00:35 |
to click on the Content tab at the top.
And move down to the Enable In Browser
| | 00:40 |
Editing check box.
Just make sure that this is turned on
| | 00:43 |
within your site, click OK.
Now we need to publish our site up again
| | 00:47 |
to the business catalyst platform.
So let's click Publish.
| | 00:50 |
And I've published this up to a temporary
site called BCEditing.
| | 00:54 |
And click OK.
Once the site is done publishing, a
| | 00:56 |
browser will launch, showing you a
preview.
| | 00:59 |
That looks good, if we go back to Muse,
we're prompted to either add in browser
| | 01:04 |
editing users, or assign a domain name.
I'm just going to click OK on this, and
| | 01:08 |
move past it.
Now if we click on the Manage button at
| | 01:11 |
the top of our Muse site, it's going to
bring up the administrator console within
| | 01:15 |
business catalyst.
In this area you can see a few things,
| | 01:19 |
things like analytics or you can add a
domain name to your site.
| | 01:23 |
What we're looking for today is the Edit
button in the top.
| | 01:26 |
If we click Edit, it brings up a preview
of our site.
| | 01:29 |
However, when we mouse over certain
elements, we're presented with a few
| | 01:32 |
options to either Edit or Click.
Let's scroll down to an area that has some text.
| | 01:36 |
We'll move over to this large text block,
an let's click Edit.
| | 01:41 |
Now we're presented with a text window
that we can make edits directly in and
| | 01:45 |
publish them to our site.
So I'm just going to edit one line.
| | 01:48 |
I'll add the word complete.
Our complete services include and click Update.
| | 01:54 |
There, now you can now see it's changed on
the site.
| | 01:57 |
If you look down in the bottom left
corner, you can see we have two buttons.
| | 02:00 |
A publish button which will make all the
changes we made on the site live, Or we
| | 02:05 |
have a Discard Changes button.
The Discard Changes button is going to
| | 02:08 |
erase anything we've done through
InBrowser Editing, but I don't want to do that.
| | 02:12 |
I want to publish that small change.
Once I've published we receive a message
| | 02:16 |
saying success, page has been saved.
You can also make changes to images by
| | 02:20 |
mousing over an image, clicking Edit.
And then either uploading an image from
| | 02:25 |
your computer or selecting something
you've used on the site already.
| | 02:28 |
For now, I'll just leave that as it is.
Once we've made all of our changes, we'll
| | 02:32 |
go back to our Muse working file.
Within the Muse working file, let's click
| | 02:37 |
File and Sync with Adobe Business Catalyst
Site.
| | 02:41 |
What this is going to do is review the
changes you've made online, and merge them
| | 02:45 |
into your Muse working file.
You can see that it picked up the addition
| | 02:49 |
of the word complete.
And now we have the option to either merge
| | 02:52 |
it into Muse or not to merge it.
Let's go ahead and merge it.
| | 02:55 |
There, the sync has completed and if we
click Done our site now matches up with
| | 03:01 |
the changes we've made online.
Inbrowser Editing is one of my favorite
| | 03:04 |
features in Muse, because it allows you
provide your client with a simple and
| | 03:08 |
effective way to make minor content
changes themselves.
| | 03:11 |
You can invite a client to edit their own
site by moving up to the File menu and
| | 03:15 |
clicking Add InBrowser Editing User.
What this will do again is bring up the
| | 03:20 |
administrator console.
Once the administrator console has loaded,
| | 03:23 |
in the bottom right corner it says Users,
and I'm listed here.
| | 03:27 |
However, we want to invite a customer.
We're prompted to provide their email
| | 03:32 |
address and their name, and then we can
set a role on the Current Site.
| | 03:35 |
Go ahead and fill in your customer
information there and for the role, let's
| | 03:39 |
just click a User.
It means they won't have full access to
| | 03:43 |
make changes, but they can make changes to
the content through InBrowser Editing.
| | 03:47 |
That's perfect.
Once you hit the invite button, Adobe
| | 03:50 |
Business Catalyst will send an email to
them inviting them to participate in
| | 03:54 |
editing this site.
They set up a password and they can log in.
| | 03:58 |
For large scale edits, like adding new
pages or widgets, you'll need to make the
| | 04:02 |
changes directly in your Muse working
file.
| | 04:04 |
As this functionality is not available
through InBrowser Editing.
| | 04:08 |
Remember to keep your working file and the
live site in Sync.
| | 04:11 |
So that you don't overwrite your client's
remote changes the next time you publish
| | 04:15 |
from your original working file.
| | 04:17 |
| | Collapse this transcript |
|
|
5. Additional Tips and TricksPinning graphics to create depth (Updated)| 00:00 |
By selectively pinning and layering
elements on your Muse site, you can create
| | 00:04 |
some really unique visual depth and
interest.
| | 00:06 |
Here's an example of a fixed footer that
is pinned to the bottom of the browser window.
| | 00:10 |
This site was created by designer Jeremy
Goldberg and you can see that he's pinned
| | 00:14 |
this wooden element to the bottom of the
browser window, so the content appears to
| | 00:18 |
come from within this element.
This is a really cool effect.
| | 00:21 |
Let's recreate this in Muse, you can see
that on the content page of our Muse site,
| | 00:26 |
I've created some filler text.
We just want to make sure that we have
| | 00:29 |
enough content that the page will actually
scroll.
| | 00:31 |
Now we're going to place this element on
the master page of our site.
| | 00:35 |
So let's move to our A-Master page, I'm
going to zoom out just a little bit to 75%.
| | 00:40 |
And let's click File > Place, and we'll
place our footer.png graphic.
| | 00:48 |
Once we place this on the canvas, what
we're going to do is just align it to the
| | 00:51 |
center of our site and move it down to the
bottom.
| | 00:54 |
You can see that it pushs the page content
a little bit lower.
| | 00:57 |
So, what we need to do is we need to
select the Pin and bottom center, that
| | 01:01 |
will allow us to move this to the bottom
of the site.
| | 01:04 |
And don't worry about the text that we've
placed behind.
| | 01:06 |
That will sit behind the footer, and you
won't see it.
| | 01:08 |
Next, what we need to do is adjust out
footer guides.
| | 01:11 |
You can see we have the guide at the
bottom for a bottom of our page and our footer.
| | 01:14 |
Let's just drag the footer guide up above
this element so that it stays down below, there.
| | 01:19 |
Now that we've got this in place, we need
to do one more thing.
| | 01:23 |
We need to arrange the layering so that we
know that it will stay on top of our page content.
| | 01:28 |
If we move to our Layers panel, and we
bring up our Layer 1 drop down, you can
| | 01:33 |
see footer.png sitting at the top.
Let's go ahead and create a new layer and
| | 01:37 |
let's name this layer Footer and click OK.
Now that we have a Footer layer, let's
| | 01:43 |
select our footer.png graphic by selecting
the box beside it and just drag it up into
| | 01:48 |
our Footer layer.
You can see that the bounding box on this
| | 01:51 |
turns to red.
It means it's in that red Footer layer.
| | 01:53 |
Now, that this layer is positioned above
Layer 1, which contains the rest of our
| | 01:58 |
content, we can move back to our main
content page and click Preview.
| | 02:02 |
You can see that the foot element is
positioned at the bottom of the browser
| | 02:05 |
window, and when we scroll down, the
content appears to come from within.
| | 02:09 |
Now we can also do something kind of cool
with our header elements.
| | 02:13 |
So, let's drop back to the Design view,
we'll go into our Master page and we'll
| | 02:17 |
just delete out that footer.
What we're going to do, is pin the header
| | 02:20 |
of our site so that the navigation bar and
elements included with it, the logo and
| | 02:25 |
the wood background, scroll above all the
content on our page.
| | 02:28 |
So, if we select all of this content and
we pin this to the top center of our
| | 02:32 |
browser window, with all these items
selected, we'll click a new layer and
| | 02:36 |
we'll call this Header and click OK.
Now let's bring down our Layer 1 panel and
| | 02:41 |
let's just move all these elements up into
the Header.
| | 02:44 |
And you can see that they start to change
to green as we move them.
| | 02:47 |
So, we'll move the logo and we've got a
couple of rectangles here.
| | 02:50 |
Let me just select those again and let's
just space out this panel to make it a
| | 02:54 |
little bit easier to move everything over.
We'll move that up, and finally the last
| | 02:59 |
two, there.
Now, all of our header elements are in the
| | 03:02 |
Header layer, but you can see some of them
have disappeared.
| | 03:04 |
We need to just rearrange the order of
them.
| | 03:06 |
So, the logo should be at the top of our
layer as well as the Creative Consultant
| | 03:10 |
text and then our Navigation bar.
There you go.
| | 03:13 |
Now everything is layered correctly and
our Header layer is on top of our Layer 1,
| | 03:18 |
which has all of our content.
If we preview this site, it looks good.
| | 03:22 |
But we need to preview this on the actual
content page of the site, not on the master.
| | 03:26 |
The master doesn't contain any of the
content.
| | 03:28 |
So, if we move to our pinning page, scroll
up and let's hit Preview.
| | 03:32 |
Now you can see the page content is
scrolling down behind the header elements.
| | 03:37 |
This is because we pinned the header to
the top of the browser window and we made
| | 03:40 |
sure to layer it on top.
Pinning elements to the browser window can
| | 03:44 |
be a powerful way to turn a flat design
into a layout with depth and dimension.
| | 03:48 |
Try experimenting with individual site
elements as well as large bars of menus
| | 03:53 |
containing important content.
| | 03:54 |
| | Collapse this transcript |
| Adding full-size images as backgrounds| 00:00 | Full screen image backgrounds can be an easy and
creative way to showcase your design or photography work.
| | 00:07 | Using a Red 30 site as an example let's replace
the textured background with a full screen image.
| | 00:13 | First of all I recommend that you choose an
image that has a fairly reasonable resolution.
| | 00:17 | I'd like to choose something that's about
2500 pixels wide as I know that that will
| | 00:22 | cover the screen resolution of most
of the larger displays out there today.
| | 00:27 | Now again Muse will of course
optimize these images on export.
| | 00:31 | But if you start with a low resolution
version from the beginning, you're going to find it
| | 00:35 | gets pixelated and blurry when you scale it up.
| | 00:37 | If we go back to Muse, we can change the
Browser Fill by clicking on the Browser Fill dropdown.
| | 00:42 | If we select an image for the fill let's go
ahead and choose our background.jpg and click Open.
| | 00:49 | You see that it's been placed
in the background of our site.
| | 00:52 | Now to fit this image we
have lots of fitting options.
| | 00:57 | For full-screen websites I'd recommend you
use Scale To Fill, what this will do is scale
| | 01:02 | the image up to always fill
the background area of the site.
| | 01:05 | If there is this specific area of the image
that you want to be focused on--if you'd like
| | 01:09 | to change the positioning of your background--
you can choose another option on the Position
| | 01:13 | Control on the Browser Fill dropdown menu.
| | 01:16 | Next, let's choose an image
that has a little bit more detail.
| | 01:20 | We've prepared this image of an apple and
as you can see it's got more detail in terms
| | 01:23 | of the stem and all these water
droplets and just more variation in the color.
| | 01:28 | Let's go head and place that in the
background of our Muse site using the same method.
| | 01:34 | Once we've placed this background in
let's go ahead and preview it in the Browser.
| | 01:41 | Now you can see as we scale the Browser
down the image is going to shuffle to make sure
| | 01:45 | that it's always scaling the full-screen.
| | 01:48 | When you are working with full-screen
background images I'd also recommend you experiment with
| | 01:53 | some transparency on your page itself.
| | 01:56 | Let's go ahead and change the fill for our page.
| | 01:59 | If you go to our Fill box let's change the
Opacity and we'll move this down to about 60%.
| | 02:06 | Now if we preview the site, we can see that
the background is starting to come through
| | 02:11 | this nice box and we get a
little bit more texture and depth.
| | 02:14 | If the main focus of your site is large
images or custom art, consider using them as the
| | 02:19 | full-screen background image just be sure to
select an image that's high enough resolution
| | 02:23 | or the quality may be compromised.
| | Collapse this transcript |
| The basics of horizontal scrolling websites| 00:00 | Horizontal scrolling sites are popular
among artists and photographers as it's easy to
| | 00:05 | display a large amount of
text or images on a single page.
| | 00:08 | Adobe Muse can be used to design a
horizontal web layout quite easily by creating a site
| | 00:14 | of a large pixel width and
implementing text anchors for navigation.
| | 00:18 | To start let's have a look at an example site.
| | 00:21 | The site for graphictherapy.com
features a horizontal scrolling layout.
| | 00:25 | The navigation system on the right-hand
side allows you to click on any box and it will
| | 00:30 | scroll to that particular
project in their portfolio.
| | 00:33 | We can easily create a similar site
in Muse by creating a blank new site.
| | 00:38 | To start, let's create a new Muse website and
let's make sure that we've got a nice wide width set.
| | 00:44 | So I've got 2000 pixels wide by a
standard minimum height of 500 and click OK.
| | 00:50 | Next what I am going to do is just drop in a
few images, let's click File>Place and place
| | 00:56 | 4 images in the site.
| | 00:57 | I am going to place them side-by-side.
| | 01:01 | I'll arrange these, too.
| | 01:04 | Let's close this panel just to get it
out of the way and save us some room.
| | 01:08 | I am also going to crop this image a
little bit, just so it matches all the others.
| | 01:16 | Next we need to create a navigation system.
| | 01:18 | However we can't use the Automatic Menu
Navigation widget that Muse has built-in because these
| | 01:24 | aren't different pages on a
website this is only one page.
| | 01:28 | So what I am going to do is I'm going to
draw a textbox. Within that textbox I'm going to
| | 01:33 | create a few buttons, we'll call them
PHOTO 1, put a vertical break, PHOTO 2, another
| | 01:40 | break, PHOTO 3, and finally PHOTO 4.
| | 01:46 | I am going to just add a space between
the number and the word PHOTO, there you go.
| | 01:52 | Next what we will need to do is we will need
to create some anchors to link these buttons to.
| | 01:57 | We can do this by clicking on the
Anchor Gun on the Control Bar in Muse.
| | 02:01 | Once we click on that, let's create new anchor
above our first photo, and we'll call this PHOTO 1.
| | 02:07 | Let's repeat the process for each photo throughout the
site, PHOTO 2 and PHOTO 3, and PHOTO 4, there you go.
| | 02:24 | Now that we've completed this what we need to
do is link our text in our navigation system
| | 02:29 | to each of these photos.
| | 02:31 | So let's highlight PHOTO 1, and in our Hyperlink
dropdown we'll click SAMPLE:PHOTO1, let's repeat
| | 02:37 | this process for all of the
other anchors on the site.
| | 02:40 | Sample:PHOTO 2--our page is called Sample,
that's why we see SAMPLE: and then the name with link.
| | 02:48 | PHOTO 3 and PHOTO 4, there you go.
| | 02:57 | Now if we preview our site we can see that
if we click on the PHOTO 3 link the site is
| | 03:02 | going to scroll over to the third photo.
| | 03:04 | However, it seemed to stop when it hit the right side,
that's because our page isn't quite wide enough.
| | 03:09 | To fix this let's go back to our Site
Properties and let's change our Width, let's increase
| | 03:15 | this dramatically--say to 10,00--and click OK.
| | 03:19 | Now when we preview the site and we click
our PHOTO 3 link, we can scroll all the way
| | 03:24 | over to the third photo because we've
got some room on the right-hand side.
| | 03:27 | Now, we also need to include some sort of
system to get back to the original navigation
| | 03:32 | as we don't want our user to be
using the bottom scrollbar very often.
| | 03:36 | So we can accomplish this in two ways.
| | 03:39 | The first would be to create a new anchor,
and let's just call this Anchor, Home, we'll
| | 03:44 | place it right at the beginning of our website.
| | 03:47 | Next we can create a new Text button, also
called Home, link that text button to our
| | 03:53 | HOME anchor and we can place this
button above each photo on the site.
| | 04:02 | I'll move this 1 to PHOTO 3 so we get an
idea of how it looks and we'll preview the site.
| | 04:09 | Now when we click PHOTO 3 and we scroll to
PHOTO 3 we can click our HOME button and it's
| | 04:14 | going to take us back to the beginning.
| | 04:16 | However, I'm not a huge fan of this HOME
text above every single photo on our site.
| | 04:21 | So better alternative is to delete these
buttons out and we'll delete the anchor and now what
| | 04:30 | I'm going to do is I am going to pin the
Navigation menu to the top left-hand side of the screen.
| | 04:34 | So if we click on our Navigation, click
the upper left pin and preview it. Now when I
| | 04:40 | scroll to an image we can see that our navigation
system stays pinned in place; this is a cool effect.
| | 04:46 | One more change I'd like to have on the site
is that when I scroll to a particular image
| | 04:50 | I find it's a little bit
tight on the left-hand side.
| | 04:52 | I like a little bit of room, maybe I like the
image to line up with our navigation system.
| | 04:57 | We can adjust this by
adjusting the placement of our anchors.
| | 05:01 | If we move our anchors over to the left a
little bit, it's going to create that room
| | 05:04 | that we need on the left-hand
side before the image.
| | 05:07 | Go ahead and repeat this process for all the
entire anchors throughput the site--I am going
| | 05:12 | to just space this in the
middle of these two--and preview it.
| | 05:16 | Now you can see when we click PHOTO 3 it
scrolls over and it stops a little bit.
| | 05:21 | So we get a little bit more
room on the left-hand side.
| | 05:24 | Horizontal scrolling sites can be easily
accomplished by using Adobe Muse and anchor tags.
| | 05:29 | However, because horizontal scrolling is not very
common, I would encourage users to use this layout
| | 05:34 | technique only in very special circumstances.
| | Collapse this transcript |
| Placing a layered PSD file into Muse| 00:00 | Many designers feel more comfortable laying
out the base of their website in Adobe Photoshop
| | 00:05 | as it's widely used in the web
design world as the mockup tool of choice.
| | 00:10 | But did you know that you can actually import
each individual layer of your Photoshop file
| | 00:15 | directly into Adobe Muse
without saving them individually?
| | 00:19 | This is a really powerful feature.
| | 00:21 | First, let's layout our website in Photoshop.
| | 00:24 | Here I've got a simple website layout and
one thing we need to pay attention to is the
| | 00:28 | naming of our layers.
| | 00:30 | We're going to be referencing the
names of these layers later on in Muse.
| | 00:33 | So we need to make sure
their named descriptively.
| | 00:35 | As you can see our logo layer here is called Logo_Red30
so we know what that layer is going to be.
| | 00:41 | Once we are happy with our mockup
in Photoshop let's jump over to Muse.
| | 00:46 | Create a new Muse site and let's go ahead
and place using the File>Place command, our
| | 00:54 | Photoshop or PSD file into Muse.
| | 00:58 | Now we get a dialog box
that contains a few options.
| | 01:01 | The Import Composite Image option allows us to
basically import a flattened preview of the PSD file.
| | 01:09 | We also have the option to
import an individual layer.
| | 01:12 | So if we can click this we can select any of the
layers that we've created in our Photoshop file.
| | 01:17 | This is where naming the layers came in handy.
| | 01:19 | Now we can see what it actually is.
| | 01:21 | Lastly, we have Clip To Layer Contents.
| | 01:24 | What this will do is Muse will remove any
of the unnecessary boundaries on this layer.
| | 01:30 | Without it clicked our logo is just
very small on the top left corner.
| | 01:33 | However, if we click this it's
going to crop it to just the logo.
| | 01:37 | So that's really helpful.
| | 01:38 | First, I'd recommend that
you Import Composite Image.
| | 01:42 | We're going to use this as a
guideline for laying out our site.
| | 01:44 | So once we've imported that and we have a
loaded cursor, we can click and place it in Muse.
| | 01:49 | That's exactly what we saw in Photoshop.
| | 01:51 | Next, we can go ahead and
Place individual layers.
| | 01:55 | If we repeat the command File>Place select our
PSD, and open it, let's start working through
| | 02:01 | importing specific layers.
| | 02:02 | To start I'm just going to import my Logo
layer and I'm going to make sure that Clip
| | 02:07 | To Layer Contents is selected.
| | 02:09 | When it is, let's click OK.
| | 02:11 | Now you have loaded cursor.
| | 02:13 | If we click near logo here we can overlay our
logo in the exact same spot we did in Photoshop.
| | 02:19 | That's why importing a
competent image first is really helpful.
| | 02:23 | Now if you want to import multiple layers
at anytime, you can repeat this process by
| | 02:27 | going File>Place select in the PSD as usual,
selecting Import Layer, and selecting multiple
| | 02:33 | layers by holding down the Command key.
| | 02:35 | So let's import all of our social media buttons at
one time and ensure Clip To Layer Contents is turned on.
| | 02:41 | Now we click OK.
| | 02:44 | We've got a loaded cursor and we can
click to add our 4 social media buttons.
| | 02:48 | So you want to repeat this step laying out
your website as you had it exactly in Photoshop.
| | 02:53 | One thing to remember though is that we don't
need to drop in solid blocks of color or text
| | 02:58 | that we created in Photoshop as Muse
has the ability to generate this itself.
| | 03:04 | If you're more comfortable starting a web
mockup in Photoshop you'll be happy to know
| | 03:07 | that it complements Muse nicely.
| | 03:10 | Instead of sending your PSD away to a
developer to slice it up and code it, try importing
| | 03:15 | it into Adobe Muse, then
generating the code yourself.
| | Collapse this transcript |
| Integrating Adobe Edge Animate graphics| 00:00 | Adobe Edge Animate is a powerful new tool
from Adobe. It allows designers to build animations
| | 00:06 | and interactive content using
HTML5, CSS3, and JavaScript.
| | 00:12 | What does this all mean?
| | 00:13 | It means that you can build websites with
dynamic moving graphics and interactive elements
| | 00:17 | that work flawlessly on desktops
and mobile devices such as the iPhone.
| | 00:21 | Here is how you can import an
Edge Animation directly into Muse.
| | 00:25 | First of all, let's Preview the
animation that we're going to include.
| | 00:28 | If we click our Preview button, we can see
that there's some slight motion on the logo.
| | 00:32 | I'd like to thank designer Jeremy Goldberg
for making this simple animation for me to
| | 00:37 | feature in the video.
| | 00:38 | You can check out his work at jeremytech.com.
| | 00:42 | Next let's see how this was built.
| | 00:44 | The size of this logo is
approximately 203 pixels wide by 96 pixels high.
| | 00:49 | If we set up our document in Edge we're
going to be using those exact same dimensions 203 pixels
| | 00:54 | by 96 pixels.
| | 00:57 | Once we've created our animation, we need to make
a few changes before we can publish this to Muse.
| | 01:02 | First of all, we need to make sure that our
stage background color is set to transparent.
| | 01:07 | We don't want any color behind there or it's
not going to overly nicely on to our header.
| | 01:11 | Lastly, we need to make
sure that Autoplay is selected.
| | 01:14 | We want this animation to play directly when
we drop it into Muse without having to click
| | 01:18 | on it or start it in any way.
| | 01:20 | Once we've made those two changes let's go
ahead and change some of our Publish settings.
| | 01:25 | So if we click File>Publish Settings, we need to
make sure that the following selections are made.
| | 01:31 | We need InDesign and DPS selected.
| | 01:34 | DPS stands for Digital Publishing Suite.
| | 01:37 | This is going to output the correct
file format that we can import into Muse.
| | 01:40 | Lastly, just set the Target Directory
where we'd like this file to be placed.
| | 01:45 | I have it going to a folder called publish/dps.
| | 01:48 | I've also given it the name red30logo.
| | 01:51 | When that's go to go let's hit Publish.
| | 01:53 | Now that this file has been published
to our computer, let's place it in Muse.
| | 01:57 | If we go back to our Muse site--I'm
going to just open up a blank header here.
| | 02:02 | If we quick File>Place let's navigate to our Edge
Animation folder in Edge>publish>dps>red30logo.oam.
| | 02:13 | The OAM file is what we're
going to be placing into Muse.
| | 02:17 | If we click open, you'll
see we have a loaded cursor.
| | 02:20 | Let's just click that into
the header area of our site.
| | 02:24 | You may be asking
yourself why this is solid white.
| | 02:26 | It's because there is a fill applied to it.
| | 02:29 | Let's just remove the
Fill and remove the Stroke.
| | 02:34 | Now that this is done we can preview this page
in Muse and as you can see our Edge Animation
| | 02:40 | plays without having to click on it
to start it or control it in anyway.
| | 02:45 | Subtle animation can be a great way to add
visual interest to a site and with limited
| | 02:49 | Flash support on mobile devices we need to
animate elements using HTML5, CSS3, and JavaScript.
| | 02:57 | Adobe's new Edge Animate tool allows you to
accomplish all of this within a simple interface
| | 03:02 | and final animations can be
easily placed into your Muse website.
| | Collapse this transcript |
| Working with the Layers panel (New)| 00:00 |
The Layers Panel in Adobe Muse works very
similar to InDesign, in that content can
| | 00:05 |
be arranged an positioned within each
layer.
| | 00:07 |
And the layers themselves can also be
arranged.
| | 00:09 |
Let's take a closer look and explain in
more detail how the Layers Panel works and
| | 00:14 |
what options you have for selecting
content.
| | 00:16 |
On the Home page of our website, you can
see in the Layers Panel we have Layer one.
| | 00:19 |
If we click this small arrow beside layer
one, it brings down and displays all the
| | 00:24 |
elements that are available within that
layer.
| | 00:26 |
If we click the New Layer Button in the
bottom of the palette, you can see that
| | 00:30 |
layer two has appear.
And if we double-click on Layer two, it
| | 00:33 |
brings up some Layer Options.
Let's go ahead and call this Layer Images.
| | 00:37 |
And we'll set the color as Red.
Next we'll leave on Show Layer, and then
| | 00:41 |
we could also lock our layer if we didn't
want it to be editable.
| | 00:43 |
So let's just click OK.
Now let's go ahead and move the image on
| | 00:47 |
our site to the images layer we just
created.
| | 00:50 |
If we click on this image you can see that
it's now selected within Layer one.
| | 00:54 |
It's the 6.jpeg and the blue box beside it
is highlighted.
| | 00:58 |
We drag that blue box up to our Images
layer, and drop it, you can see that the
| | 01:02 |
boundary of this image has now changed to
be red.
| | 01:05 |
And that's because we set the images layer
as the red color.
| | 01:08 |
So this makes it easy to tell which layer
each item is on.
| | 01:11 |
Next, let's look at a composition.
You can see that we have a composition in
| | 01:15 |
layer one.
And we have an arrow beside it to bring
| | 01:17 |
down or display more.
And then within we have a couple of
| | 01:20 |
targets, and a couple of triggers.
If we select each target to see what it
| | 01:24 |
is, we can see our site on the left
changing.
| | 01:26 |
So it's showing us the various targets we
have in our widget, and also the various triggers.
| | 01:31 |
This makes it easy to select a specific
target and place content within it.
| | 01:36 |
We can also rearrange the layers within,
by simply dragging them and dropping them.
| | 01:41 |
We can also turn on and off the visibility
of layers by selecting the eye to the left.
| | 01:46 |
If we click that, you can see that the
text on the left hand side disappears.
| | 01:50 |
We can also lock that layer by clicking in
this blank area beside, and a small lock appears.
| | 01:55 |
I'm a big fan of keeping a nice, clean
layered file.
| | 01:59 |
However, it's not essential that you
perfectly arrange or name your layers.
| | 02:03 |
The site will function just as well
without it.
| | 02:05 |
The panel is there to help you select
elements that you may not have been able
| | 02:09 |
to easily grab and to simply control what
elements sit on top of others.
| | 02:13 |
If you're not constantly revisiting the
panel to keep layers clean, I suggest that
| | 02:18 |
you organize them after you finish a
complete page design.
| | 02:21 |
It shouldn't take more than a minute to
tidy things up.
| | 02:24 |
| | Collapse this transcript |
| Working with Parallax Scrolling (New)| 00:00 |
Parallax scrolling is a technique that
designers use on the web to create the
| | 00:04 |
illusion of depth.
You can set elements and images to scroll
| | 00:07 |
down the page at different speeds and
directions,.
| | 00:09 |
Which will give you the ability to create
the illusion that certain elements are
| | 00:13 |
deeper into the website.
Parallax scrolling is a relatively new
| | 00:17 |
trend on the web.
And many designers are using it as an
| | 00:19 |
accent to compliment their existing
design.
| | 00:21 |
Let's take a look at a simple example of
parallax scrolling.
| | 00:24 |
In this image from Wikipedia you can see
how it appears as if you're maybe moving
| | 00:29 |
in a vehicle looking at the landscape.
The bushes in the front are moving by
| | 00:33 |
quickly whereas these kind of mountain
images in the back are moving by at a
| | 00:37 |
slower pace.
And lastly, you've got the sky in the background.
| | 00:40 |
These all appear to be at different
distances away.
| | 00:42 |
However they're actually just a flat
image.
| | 00:45 |
And this is kind of an example of how
Parallax Scrolling works.
| | 00:48 |
An more elaborate example of this would be
the Oakley Airbrake site.
| | 00:52 |
This wasn't made in muse.
But this is an elaborate Parallax
| | 00:54 |
Scrolling site where as you scroll down
you can see these different rocks or
| | 00:58 |
boulders flying away.
The boulders that are closer to the users
| | 01:01 |
screen are blurred.
Whereas the ones in the background are a
| | 01:04 |
little bit more clear.
And this is how the illusion of depth
| | 01:06 |
comes into play.
Let's create a simple example of Parallax
| | 01:09 |
Scrolling in our Muse site.
First we'll open up this Parallax
| | 01:12 |
Scrolling page.
Its just a long page we're going to need
| | 01:14 |
some scroll room to be able to add
something.
| | 01:17 |
We need to make sure the browser's
actually going to scroll on the page.
| | 01:20 |
Next let's go ahead and place an image.
We go file, place, and let's navigate to
| | 01:25 |
out falling.png grpahic and open that.
And place it on the canvas.
| | 01:30 |
We've just got this graphic of this guy
falling here.
| | 01:32 |
This is going to be an easy example to
apply a parallax to.
| | 01:36 |
Next what we want to do is we want to
click the effects drop-down, and the
| | 01:39 |
Parallax button is the far right.
It says Scroll Motion.
| | 01:43 |
So first we'll click the checkbox to
enable Scroll Motion.
| | 01:46 |
Next, we're asked to provide the key
position.
| | 01:48 |
And if you hold your mouse over each of
these boxes or input areas Muse will
| | 01:53 |
display a small box explaining what each
of them does.
| | 01:56 |
So the key position is when the browser
window reaches the specified scroll position.
| | 02:01 |
the item will be where it is located in
the Muse design view.
| | 02:04 |
So basically what this means is, really
where you want your scrolling to kind of
| | 02:08 |
start or be visible.
So you can manually input an item, or if
| | 02:11 |
you jump back to your Design view, you can
actually drag this small guide down.
| | 02:15 |
And I'm going to set this start position
kind of just above this yellow box, there.
| | 02:20 |
Once the browser reaches that area, this
image will be where it is in our Design View.
| | 02:23 |
Next, let's just set a motion before the
key.
| | 02:27 |
So what we're going to do is set a down
Motion, and I'm going to set the speed as one.
| | 02:32 |
Again, if you hold your mouse over this
input area, it will give you some
| | 02:35 |
explanation of how these speeds work.
But basically zero indicates that the
| | 02:39 |
object does not move, and one indicates
that the object moves vertically at the
| | 02:43 |
same speed.
So rather than setting it just at the same
| | 02:46 |
speed, you know what?
Let's set this at 1.5 so it's moving a
| | 02:49 |
little bit faster.
In the box below, you've got left and
| | 02:52 |
right controls.
I don't want this to move left to right so
| | 02:55 |
let's just set that to zero.
Next we've got our Motion After the Key.
| | 02:58 |
I'm going to set the same ones.
So down and speed of 1.5 and.
| | 03:02 |
And, to the right, at a speed of zero.
There, now let's click off, and let's
| | 03:07 |
preview our site in Muse.
So as we scroll down the page, when we
| | 03:11 |
reach our start area or our key position.
That means our falling guy will start to
| | 03:15 |
appear, and as you can see, he falls
faster than the user scrolls.
| | 03:19 |
So it creates kind of a cool effect that
perhaps he's closer to the browser window.
| | 03:23 |
Are closer to the user viewing this site
than the rest of the content.
| | 03:27 |
We can add a little bit more interest to
this by adding a drop shadow effect.
| | 03:30 |
So let's click on him again, click effects
and shadow and we'll add a drop shadow.
| | 03:35 |
What this will do is make him like he's
even closer.
| | 03:37 |
So we'll create a drastic distance between
the element, the fallen guy element and
| | 03:42 |
And the content on our site.
Now let's preview how this looks.
| | 03:45 |
We scroll down the page, and the shadow
appears over the page content.
| | 03:50 |
This is a really cool effect.
Parallax Scrolling might require a little
| | 03:53 |
bit of tweaking.
So as you go, be sure to just click into
| | 03:56 |
your Effects panel and change the speed
slightly to get the exact effect you're
| | 04:00 |
hoping to achieve.
You can simply preview it by previewing it
| | 04:03 |
right in Muse or previewing it in the
browser tab.
| | 04:06 |
As you can see, parallax scrolling is a
powerful feature.
| | 04:08 |
However, I urge you to only use it as an
accent piece.
| | 04:11 |
If you're like me, you probably don't like
visiting sites where every element moves
| | 04:16 |
and shifts as you scroll.
Applying a simple graphic that falls or
| | 04:19 |
shifts as the page scrolls.
Or block of text that moves into place can
| | 04:22 |
be an easy way to add visual interest to
your design without distracting users.
| | 04:27 |
| | Collapse this transcript |
| Helpful resources (Updated)| 00:00 |
Congratulations on finishing Building a
Portfolio Site with Adobe Muse.
| | 00:05 |
Thanks for following along, and I wish you
the best of luck in building your new
| | 00:09 |
professional online presence.
In this course, I've included some of my
| | 00:13 |
favorite methods for working with Adobe
Muse and other Creative Suite software.
| | 00:17 |
However, I'd like to acknowledge that
there are lots of different ways to
| | 00:21 |
achieve the same effects and outcome.
So please, feel free to experiment and
| | 00:26 |
find a method that works for you.
For additional tips and tricks, and more
| | 00:30 |
information on Adobe news, here are a few
of my favorite resources for you to use.
| | 00:35 |
First, please check out my website and
blog muse-themes.com.
| | 00:39 |
The site features professionally designed
muse templates and website that you can
| | 00:44 |
use to get started building your own site.
The Adobe Muse knowledge base is an
| | 00:48 |
extremely helpful resource for Muse.
And you can find it online at adobekb.com.
| | 00:55 |
Be sure to check out James Fritz's Muse
Essential Training on lynda.com.
| | 00:59 |
James does a great job explaining the
basics and fundamentals of Muse.
| | 01:04 |
And you'll find it easier to complete this
course after watching his series.
| | 01:08 |
I love to connect with other designers and
Muse users, so please feel free to drop me
| | 01:13 |
a line and get in touch.
You can send me a note through the contact
| | 01:17 |
form on muse-themes.com or post a message
in the forum.
| | 01:22 |
Twitter is my favorite tool for
communicating, so please, feel free to
| | 01:25 |
follow me on Twitter at
twitter.com/visualarms.
| | 01:28 |
Also be sure to check out my new lynda.com
course titled Creating a Mobile Website
| | 01:36 |
with Adobe Muse.
Where I build the complete mobile version
| | 01:40 |
of the Red 30 website we just created.
It also covers some of the fundamentals of
| | 01:44 |
mobile web design and a few of my favorite
tools for previewing and testing mobile sites.
| | 01:49 |
| | Collapse this transcript |
|
|
