• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Adobe Muse Content Background with Shadow on browser fill

Community Beginner ,
May 03, 2016 May 03, 2016

Copy link to clipboard

Copied

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!

TOPICS
Newbie Corner

Views

609

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 03, 2016 May 03, 2016

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 03, 2016 May 03, 2016

Copy link to clipboard

Copied

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

photo_frame_shadow.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2016 May 03, 2016

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines