How to make editable frosted/blur panel effects in Muse.

21 MINS
21 minutes to complete this task.
In this Muse tutorial Chris Kellett shows you a simple method of creating frosted panel effects in Muse. 21 minutes to complete this task.

Introduction:

First off let's make sure you understand that this will not work on all older browsers. This technique uses CSS filters and classed as experimental.

For a full breakdown of which browsers support CSS filters see this link:

See what browsers filters work with.

 

With that covered let's go ahead and do this.

I am going to assume that you have Muse open, have your image assets ready and a new site open in the desktop layout in Muse.

In the Master, page set the header guides to zero to make it easy to align items on the working page as (see image below), this is not essential just useful in this particular case.

The idea here is to create a panel that can contain content such as a form that blurs out the background image.

We don’t want to use Photoshop to create the blur as we may wish to change the image and re-use the effect.

To do this, we will be using a single image and a new little widget from us called Blur Maker.

Let’s start by visualising how the effect is put together.

As you can see from the diagram, the effect is made up of various parts.

The base layer is the image background this needs to be a non-scaling image using its original dimensions. You will need to edit your image to cater for the largest size screen width.

We will be able to use this image as a background fill in a full-width rectangle later. For now we want just to place the image on the Muse design canvas.

The image dimensions we are using are 2048px wide by 651px high. It is important to take a note of the dimensions as we will need to reset the image size for the blur panel itself for the effect to work.

On top of the background image is the blur panel that we will apply the CSS blur filter.

This panel is not a rectangle with a background fill but rather an image placed on the canvas and resized and cropped using the built in Muse tools.

The final group of elements is made up of the color panel; that adds either a lighter or darker tint to the blur effect and the form content.

Steps:

1Create three layers in the "Layers" panel called "Background Image," "Blur Panel" and Content respectively. Background Image at the bottom Content at the top and Blur Panel in the middle.

2Add your background image to the canvas by either dragging it to the canvas from its file location or by using the File > Place. Make sure you are working in the Background Image layer.

3Use the align tool to align the image to top/center of the page.

4Next duplicate the image using either Edit > Duplicate or Alt + Click and drag on the image. Right click on the duplicate and use the “Move to Layer” option to move it to the blur panel layer.

5Now using the "Layers" panel lock the “Background Image” layer to stop us from accidentally moving it which is just annoying.

6To resize the image to the size, we want drag on the image handles while pressing shift on your keyboard allowing you to free-form resize the image. If you do not press shift, the image will just scale proportionally. We want to resize the image to 276px wide and 372px high. You can use any dimensions you wish this is just for this example.

7Now we want to reset the image as at present the image is squished within its image frame. We want the image to be it’s original size but cropped by the frame of the dimensions we just set. Double click on the image to activate the image crop tool. You should see the Gold/Brown outline appear around the image. Now reset the size of the image to its original dimensions of 2048 x 651. Re-align the image to match the exact position of the “Background Image”.

8If you preview the page now, it should appear as if there is just a background image as the new image is aligned to the “Background Image”.

9It's safe to say at this point that Flash and mobile sites don't mix.

10In design view select the “Blur Panel” and add a new “Graphic Style” in the graphics style panel called “blur.” You can call it whatever you wish, but we are calling it blur for easy reference.

11Back in that canvas (assuming you have installed the Blur Maker widget) drag an instance of the widget onto the canvas. The CSS Id is used to target the various items on the Muse canvas with the effect. Leave this as “blur” if you called the graphic style in the previous step “blur”. Set the blur amount to 10. Now when you preview the page there should be a section of the image that is blurred.

12Next we will add a rectangle to the page with the 276 x 372 dimensions and use a fill colour of #39003D with a 20% opacity. Right click on the element and move it to the “Content” layer. Lock the blur panel layer. Place this new element directly above the blur panel. Add an outer glow to the layer using the #39003D color 40% opacity and a blur of 5. When you preview the panel should be looking nearly complete.

13You will find some sample content in the Blur Maker library. Drag the form sample onto the page.

13That's it the effect is complete.

Conclusion:

You can now play around with additional blur panels and content.

The main concept to get into your mind is that the image in the blur panel needs to align with the background image to ensure that the effect looks correct.

You could now use the background image in a full-width rectangle instead of the image being placed on the canvas as just an image for better layout control in Muse.

Make sure you set the background image to “Original Size” in the fill options to maintain the correct size.

If you are not sure, watch the video.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 123muse.com 2015 - All rights reserved