3 Replies Latest reply on May 3, 2016 6:18 PM by Liam Dilley

    Adobe Muse Content Background with Shadow on browser fill

    Davidomir Level 1

      Hey Folks, I am looking for an option to have a different browser fill than on the canvas (content area) with a shadow around the content area, so the actual content looks like a little closer than the background of the browser.

      But I dont want to just have a rectangle there, because it creates trouble with the footer area and it is a mess with the master.

       

      Somebody any ideas?

       

      Cheers!

        • 1. Re: Adobe Muse Content Background with Shadow on browser fill
          manamedia

          Easiest way to achieve what you want David, is (if I understand your questions correctly).

           

          1. Create the a document in your preferred image program (Photoshop in this case). Give the document the dimensions of your page inner content width, along with a twenty px marging either side. For example; if the width of your content background is 1180px then add 40px to this which would give your base document size 1220px wide.

          2. Give the document a height of 10-20px.

          3. Select a background colour of the document identical to the browser background colour you will have for your page.

          4. Choose Ok.

          5. CTRL+R or CMD+R to bring up your ruler on the screen, and create two guides either side of the document both equaling the additional margin width as per above. So in this example, I will set one guide at 20px Left and 20px right.

          6. Select the Shape Tool. The colour of this shape will be dependent on the colour of your content area. I have chosen white.

          7. Draw out the shape within the boundaries of the guides you have set up for your Margins. You want to ensure that the boundaries of this shape go outside of the header and footer of your document so as not to cause any gap in your drop shadow in the final output:

          bkg-with_guides.png

          8. With the shape still selected in the layers, from the Effects Panel choose Drop Shadow

          9. Set the angle at 90degrees, and play with the spread and opacity to achieve the look you want.

          10. You should have something that looks like this:

          bkg-with_ds.png

          11. Export this out as ither PNG (best quality), JPG, or Gif

          12 Open muse up, and go to your A-Master Page and where you have set up the page boundaries, click outside of the canvas.

          13. On the Fill Menu (located top left of your screen) click on it to show the drop down content like this:

           

          muse_guides.png

          Fill Type is solid, and I have selected the colour for the background of my page from the colour selector. Opacity is set to 100%, and in the Background Image selector, I have chosen the background image created in the above steps. Choose fitting Settings "Tile Vertically", and click on the Center Square of the Pin Position selector.

           

          Voila, now you have a drop shadow page content area.

           

          Hope this helps

          • 2. Re: Adobe Muse Content Background with Shadow on browser fill
            manamedia Level 1

            As a footnote, you can apply the same technique to image containers (shapes) in Muse, like the below example:

             

            photo_frame_shadow.png

            • 3. Re: Adobe Muse Content Background with Shadow on browser fill
              Liam Dilley Adobe Community Professional & MVP

              Outside of Muse its only creating a class with a few bits of CSS and once the class added to any image the above effect or similar added at any time.