Creating a Hover Slideshow in Adobe Muse. No Coding Skills Required.

Hey, what’s up Muser! In this video tutorial, I go over how to create a unique hover slideshow using the new responsive composition widget in Adobe Muse.

The steps are as follows:

1. Go to Object > Insert Widget > Composition > Blank.

2. Delete all triggers and targets except one.

3. In the composition widget options set ‘Show Target’ option to ‘On Rollover.’

4. Enable the ‘Triggers on Top’ option to make sure the triggers are above the targets.

3. Add text to the trigger and make the background filled with the trigger blank.

4. Add an image to the target by selecting the target and then going to the ‘Fill’ option in the upper control bar. You can then fill the target with an image and set the image fitting an image position for the target.

5. Place the trigger to the left of the target.

6. Create a new trigger and target by selecting the trigger and clicking the plus symbol below it.

7. Repeat process for as many triggers and targets as you’d like.

8. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=KowjbHqtM4A]

Creating Responsive Compositions in Adobe Muse. No Coding Skills Required.

Responsive slideshows, compositions, and forms are finally here! Adobe Muse 2017.1 was released on August 22, 2017 with more responsive widgets, stability and performance improvements, and productivity improvements. The release notes can be found here:

https://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

If you are an avid Adobe Muse user you will know that these updates have been anticipated for quite some time. Since the release of breakpoints and fluid-width design we’ve all been waiting for these widgets to catch up with the new way of designing in Adobe Muse. Prior to this release slideshows, compositions, and forms were not able to respond to the browser width.

I created the video tutorial above to showcase the new updates and to show the power of responsive compositions within Adobe Muse.

Here is a preview of the website: http://bit.ly/2w5Ihgj

The assets to re-build this website can be found at the following link: http://bit.ly/2xumluL

To create a responsive composition in Adobe Muse:

1. Go to Object > Insert Widget > Composition > Blank
2. Add triggers and targets by click on the ‘+’ symbol around the triggers. To have all the triggers and targets have the same styling initially, delete all triggers besides one, then style the first trigger and target. Now when you add a new trigger and target they will have the same styling as the first.
3. Style and add content to the triggers of the composition.
4. Style and add content to the targets of the composition.
5. To have the composition be responsive set the composition to ‘Responsive Width’ by going to the ‘Resize’ option in the upper toolbar and selecting ‘Responsive Width.’
6. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=mcMAD7OJy7g]

Fly Me to the Moon Landing Page in Adobe Muse. No Coding Skills Required.

Hey, what’s up Muser! Today we are going to create a unique landing page using a few different animation widgets from http://museforyoushop.com. The landing page we’ll be creating can be found here:

http://bit.ly/2imMqtd

In this video tutorial we’ll be doing the following:

• Morphing icons with the Muse Morph Widget powered by Greensock’s SVGMorphPlugin.
• Fading in text with the Muse Motion 2 Widget powered By Greensock’s Animation Platform (GSAP).
• Adding audio to the site with the Mute-Unmute Audio Widget.
• Adding particles to the background to create a star effect with the Particles.js Widget.
• Adding a background image from http://unsplash.com.

I thought this video came out a good time seeing how there was just a recent solar eclipse.

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=JaHdC1ousxg]

How to Animate Text in Adobe Muse. No Coding Skills Required.

Animating text on your website can be a great way to focus a users attention to a specific area or topic on your website. With the Animated Text Widget found at http://museforyoushop.com it is now very easy and simple to do that.

Here are the steps to add Animated Text to your Adobe Muse website with the Animated Text Widget from Muse For You:

1. Double click the .mulib file to install.

2. Open the library panel and drag and drop “Animated Text – Add First” widget onto your Adobe Muse website. Place at the top of your Adobe Muse website. If you do not see the library panel go to Window > Library.

3. Drag and drop the “Animated Text – On Load” or the “Animated Text – On Scroll” onto your website.

4. Add and customize the text in the “Text” section.

5. In the “Options” section you can set the text animation to autostart and loop along with a few other options. The “Animation Out” will only play if the “Loop” option is enabled.

6. Select the text “Animation In” in the “Animation In” section. You can also set the animation to play in sync, shuffle, or reverse in this section. The delay of each character or word in the animation is the “Delay Scale” option multiplied by the “Delay” option.

7. Select the text “Animation Out” in the “Animation Out” section. You can also set the animation to play in sync, shuffle, or reverse in this section. The delay of each character or word in the animation is the “Delay Scale” option multiplied by the “Delay” option.

8. If you are using the “Animated Text – On Scroll” widget you will also have the option of set “On Scroll” offsets from the top and bottom of the viewport. Enter in a negative value to have the offset go into the viewport. You will also have the option to play the text animation once or every time it is scrolled to in the “On Scroll” section.

9. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=az0gqjSi_uo]

How to Create a Spring Header in Adobe Muse. No Coding Skills Required.

The warm weather is finally here! Being a resident of Wisconsin you have no idea how grateful I am for that. Yes the days can be muggy and humid at times but I’ll take that over 12 inches of snow any day :P. With that being said I’ll segue into today’s article.

Lately, I’ve been creating different headers in Adobe Muse to showcase how to use Adobe Muse and to give ideas for building your own headers. The theme of this week’s header is Spring.

The tutorial is composed of 8 steps. They are:

1. Setting Largest Breakpoint

2. Adding Spring Text 1

3. Adding Spring Text 2

4. Masking Image in Photoshop

5. Adding Paragraph Text

6. Adding Contact Button

7. Adding Logo and Menu

8. Finishing Touches

We use various tools in Adobe Muse to create this header. For the fonts we use the text panel to set the font type, size, alignment, tracking, leading, and line height. These options are very useful when getting the text just how you want it.

For the image we use Adobe Photoshop to mask the image within an abstract looking image. This lends itself to a unique visual for the header.

We also use other tools, like stroke, the built-in menu widget, along with the Adobe Muse pinning options.

Adobe muse is very powerful tool and my goal is to make it easier to use by demonstrating fun, easy to create headers :).

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=8_BjuipVQSg]

How to Add an HTML5 Video Player with Lightbox in Adobe Muse. No Coding Skills Required.

Video is becoming our main way of consuming information. It is most evident with YouTube as 300 hours of video are uploaded to YouTube every minute and almost 5 billion videos are watched on YouTube everyday! That is a staggering number, and it is no wonder I often get requests for video widgets.

YouTube makes it really easy to add video from YouTube to your website and Muse even has a built-in widget that allows you to do this, but what if you wanted to add your own video without going through YouTube?

That is where the HTML5 Video Player with Lightbox widget comes into play. With this widget you can upload your own mp4 video to your website without having to go through third party video hosting like YouTube or Vimeo. The video can be watched directly from your server. Not only that you can also open the video in a Lightbox display giving the user a more direct experience of watching the video without any information surrounding the video. Many users prefer hosting their own video as this means no ads or related videos at the end. The HTML5 Video Player with Lightbox also comes with a YouTube player in case you wanted to add YouTube video as well.

Here are the steps to adding the HTML5 Video Player with Lightbox to your Adobe Muse website:

1. Double click the .mulib file to install.

2. Drag and drop an “Add First” widget from the Library Panel and place at the top of your Adobe Muse website. If you do not see the Library Panel go to Window > Library.

You can choose from the following “Add First” widgets:

– HTML5 Video Player – Add First – For Video Players.

– HTML5 Video Player – Add First – With Lightbox – For Video Players and Video Players within a Lightbox. You can add a color with an opacity or an image for the Lightbox background.

– HTML5 Video Player – Add First – With Gradient Lightbox – For Video Player and Video Players within a Lightbox. You can add a gradient with 2 colors for the Lightbox background.

3. Place a video player widget onto your website. You can choose from the following video player widgets:

– HTML5 Video Player Widget

– HTML5 Video Player Widget – Lightbox

– YouTube Video Player Widget

– YouTube Video Player Widget – Lightbox

The Lightbox widgets open the video within a Lightbox. Depending on the “Add First” widget added you can set the Lightbox background to be a color, image, or gradient. You can set the opacity of the color and image with the Lightbox background.

4. For the HTML5 Video Players it is recommended to add at least a .mp4 file for video. You can add a .webm and .ogv file for fallback support on browsers that do not support .mp4. Most browsers support .mp4.

5. Add a poster image so when the video is not playing an image will show, and then the user can press the play button.

6. Set the theme of the video player to default, dark, or light.

7. You can set the width and height of the video within the widget options. There is a 16:9 Aspect Ratio calculator within the widget. You can also set the video to autoplay, loop, and the initial volume. You can set the video to overscale within the Lightbox, meaning the video will get larger then the size set within the widget when the browser is resized.

8. Done!

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing!

[youtube https://www.youtube.com/watch?v=RmTOd2PFoa8]

How to Build a Responsive Website in Adobe Muse. No Coding Skills Required

We’ve seen quite a few changes to Adobe Muse since its initial release in 2012. The initial release focused on adaptive design and scroll effects, and then Adobe Muse evolved to responsive design and breakpoints. We can still use adaptive design and scroll effects but it almost seems hidden in the background of Muse and you need to know where to look to bring back these features.

This lead to a pretty steep learning curve for many users, as most were not familiar with the idea of breakpoints or responsive design. Needless to say, this turned many users away from using Adobe Muse. I had been contemplating myself how I was going to help users get over this learning curve. Most of my videos prior to responsive design and breakpoints were focused on scroll effects and the adaptive design layout of Adobe Muse. I had not even touched the idea of responsive design as users could create different versions of their website on a Desktop, Tablet, and Mobile layout within Adobe Muse. I knew I had to come out with a series of video helping users use the new version of Adobe Muse.

I set out to create a complete course on using the new responsive version of Adobe Muse that incorporated breakpoints. I spent weeks developing the site, and then a few more weeks recording all the videos for the course. The course consists of 17 days of different topics. I organized all the asset files for the course and tried to remove all the guess work by including PDF files on where each element is placed on the website. Throughout the course we cover adding elements to Adobe Muse, responsive breakpoints, testing tools, uploading to a live server, and more.

This course was designed to give users confidence in building a website in Adobe Muse even if they never heard of breakpoints or responsive design.

With all the topics the course takes a total of 17 days to complete. You can complete the course in less days if you decide to do more than 1 topic a day. If you are new to Adobe Muse this is the perfect course for you, and if you are an intermediate user can practice using some of the main points within Adobe Muse.

Here are the topics covered in the course:

• Introduction
• Installing Web Fonts
• Adding Header and Footer
• Adding Section 1
• Adding Section 2
• Adding Section 3
• Adding Section 4
• Adding Section 5
• Adding Section 6 and Grouping
• Creating a 1-to-1 Breakpoint
• Adding Tablet Breakpoints and Mobile Menu
• Adding Mobile Breakpoints
• Adding Anchor Points to Create a One Page Scrolling Website
• Adding Search Engine Optimization and Favicon
• Working with various Testing Tools
• Uploading Website to a Live Server
• Summary and Congratulations

This course is completely FREE as I wanted to give users a solid foundation when working in Adobe Muse. With that said Welcome to the Building a A Chef Website in Adobe Muse with Assets. Below is the introduction to the course:

What’s up Muser! Welcome to the Building a Chef Website in Adobe Muse course. This is a 17-day course designed to teach you everything you need to know about Adobe Muse. Within the

“muse-for-you-building-a-chef-website-in-adobe-muse” folder you will find the assets for each day of the course. You will also find a completed version of that particular day in case you need help with a certain section. PDF files are included to let you know exactly where each item is placed within the website. By the end of this course you will be well on your way to building your own website in Adobe Muse. On the Muse For You YouTube Channel you will find a step-by-step video for each day. Let’s get started!

Here is the playlist for the entire course:

https://www.youtube.com/playlist?list= PLBVTh_lteKbjlgsnQRZqdS4-TCWg-9216

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com