Adobe Muse Tips: Hidden Hero

Adobe Muse Tips: Hidden Hero

I’ve already shared on this blog how to achieve classic web design patterns with Adobe Muse: the scrolling menu, the catalog experience. It’s time for a new web experience: the hidden hero.

Video tutorial

Step by step

The goal is to reproduce the CANU.se website experience: http://www.canu.se/world . They welcome you with an expressive Hero section, and then, when you scroll down, the content of the page covers the Hero section. The menu sticks to the top and is slightly transparent. Here is my final sample designed with Adobe Muse CC: http://hiddenhero.businesscatalyst.com/

screenshot-hidden

Sticky menu

To create the sticky menu, I’ve added three elements in the header of my Master Page: an image (the icon of the website), a horizontal widget menu and a white rectangle in the back. I’ve set the opacity of the rectangle to 90% to make it slightly transparent.

To stick the menu to the top of the page:

  1. Make sure that your header is in a layer on top of all other layers. To do so, use the Layers panel of Adobe Muse CC.
  2. Select all your elements and use the “Pin” tool. Pin your elements to the top centre of the page.
Use the pin tool to create a sticky menu.

Use the pin tool to create a sticky menu.

 

Hidden hero

To create the “Hidden Hero” effect, and to get your Hero section “covered” by the content of your page, follow these steps:

  1. Place all your Hero section elements in a layer that is under all the other layers.
  2. Select all the elements of your Hero section and use the “Pin” tool again. Pin your elements to the top centre of the page.

Download the project

If you want to play with this sample:

  1. Get Adobe Muse CC that is part of the Adobe Creative Cloud: http://creative.adobe.com
  2. Download my Adobe Muse project: http://creativedroplets.com/samples/adobemuse/window-web.muse.zip

If you have any question about Adobe Muse or the Creative Cloud, don’t hesitate and contact me via twitter or posting a comment on this blog.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

10 Comments

  1. very nice presentation and useful trick.

  2. Awesome tutorial, I’ll be using this one when I create my quick portfolio site to display the work I’ve done. Rock on dude, you da’ man.

  3. Very informative tutorial. Thank very much for sharing this video. You’re my idol!

  4. Thx for this nice tutorial! Learning a lot….thanks

  5. Super tuto, une question comment définir la distance pour l’ancre ?
    pour que la position des sections tombe juste au raz du menu ?
    Merci

    • En fait c’est assez simple avec les guides. Tu repères la taille de ton Header (100 pixels par exemple). Tu places un guide à 100 pixels au dessus de ta section, et l’ancre dessus.

      • Merci, c’est ce que je faisais, mais je ne sais pas pourquoi, même avec une ancre placée à 100px la section remonte trop, j’ai X2 la position Y de la section et ça fonctionne

  6. how to use pin in mobile site

  7. Thanks for the help Michael. You just showed me how to do exactly what I was looking to do. Much appreciated!

  8. Hi Michael,

    Thanks for the post.

    As you can see CANU.SE updated its website and now the scroll effect is a modern one: The content isn’t scrolling over the Hero slideshow but instead it’s simply scrolling up.

    Any idea how can we imitate this eefect while the scroll arrow and the hero image start with a fullscreen mode?

Submit a Comment

Your email address will not be published. Required fields are marked *