How I Made My Website In Muse

To begin, I opened Adobe Muse and clicked Create New Site.

Screen Shot 2013-12-16 at 18.41.08

As this website will only be 1 page I had to have the height quite large. I initially started with 5000 but during the build I increased this to 6500.

Screen Shot 2013-12-16 at 18.43.03

Firstly, I created a rectangle that would be my navigation bar. This extends across the whole canvas so that it will be full screen in a web browser. I selected fill and added in an image fill to colour the bar.

Screen Shot 2013-12-09 at 18.34.59

Next I added in some text using the text tool. These will act as my buttons.

Screen Shot 2013-12-09 at 18.39.13

I repeated this step and created a button for each page that will be created. I then highlighted them all and set the font and size, trying several different combinations. I settled for Size 18 and Open Sans Light for the navigation bar. I also selected Horizontal distribution space in the align window. This equally spaced the buttons along the navigation bar.

Screen Shot 2013-12-09 at 18.40.56

I used the video below to show me how to make the navigation bar freeze when it gets to the top of my screen.

Next, I set the final motion marker to the top of the bar in its current location. The Initial motion is 1x or normal scrolling speed and the final motion is 0, which will not scroll. That way, when the top of the screen reaches the bar It will stop scrolling and freeze in place. This had to be repeated for each text box that I am using as buttons.  I discovered that an object needs an image fill to be able to change the scrolling options, so I created a transparent image to use for the fill on the text buttons.

Here I show the motion marker, circled in red.

Screen Shot 2013-12-16 at 19.38.13

I clicked fill. Here I can adjust the motion marker more precisely.

Screen Shot 2013-12-09 at 19.12.25

The images below show the navigation bar as it is at the top of the web page.

Screen Shot 2013-12-10 at 18.29.08

This image shows the navigation bar as it freezes at the top of the screen when the page is scrolled down.

Screen Shot 2013-12-10 at 18.30.09

Next, I created the boxes that will be filled to create the background textures and images. This also allowed me to create the parallax scrolling effect on the website. I created a new layer that will allow the boxes to be in the background. I used the rectangle tool to draw the top box filling the whole canvas (this will make the background full screen).
The image below shows the empty box.

Screen Shot 2013-12-09 at 19.01.36

I added the image fill using the picture I had selected.

Screen Shot 2013-12-11 at 18.15.10

The image below shows the settings that I used. The fitting is set to scale to fill, this will make sure that no matter what the size of web browser is used it will always fill the screen. The position is set to centre.

Screen Shot 2013-12-11 at 18.33.12

This is how it looks once the fill is complete.

Screen Shot 2013-12-11 at 18.19.43

For each block of text I will be placing a texture behind it. This will be followed by an image and another texture and repeat. For the first section I drew another rectangle and filled that with a texture as shown below.

Screen Shot 2013-12-11 at 19.00.43

I then created another rectangle underneath and added an image fill using the settings as in the previous two boxes.

Screen Shot 2013-12-11 at 19.13.36

I repeated this process for rest of the website.

Screen Shot 2013-12-11 at 19.19.45

Next I added the settings for the parallax scrolling effect. I used the video below for reference on how to achieve this.

Firstly, I selected all of the boxes that contain my background images and textures and clicked on the fill window. I set the scroll motion for the initial motion and final motion to zero. This means that the images within the boxes will stay static when the page is scrolled down. The boxes however will scroll with the page, giving the parallax scrolling effect.

Screen Shot 2013-12-11 at 19.28.39

Now back at the top of the page, I added in the welcome message and title of the website. I inserted the updated logo using File > Place.

Screen Shot 2013-12-11 at 20.00.59

Using the same methods as above, I began adding in the content for the rest of the website.

Screen Shot 2013-12-11 at 20.13.14

I added a form onto the contact page. This was a very simple process and it almost fully automated. I navigated to Object > Insert Widget > Form > Simple Contact.

teddy

My cursor then changed as below. I clicked on the page and I was able to re-size and move the form into the correct position.

Screen Shot 2013-12-18 at 20.25.01

Once it was placed and the correct size, I could go into the settings and adjust these to my preference. I added in Work Address and BC CAPTCHA.

Screen Shot 2013-12-18 at 20.25.31

Once that was completed I decided to add in a map on the contact page. After researching online how to add in the map. It turned out to be as simple as copying the embed code and pasting it into Adobe Muse and arranging it where it was needed.

This link leads to the video I watched.

http://tv.adobe.com/watch/learn-muse/html-embedding-in-muse-maps/

Screen Shot 2013-12-11 at 20.24.02

After copying the embed code from Google Maps, I pasted it into Muse and it generated a preview which I could place in the correct position.

Screen Shot 2013-12-13 at 18.29.18

Next I created the footer for the website. I drew out a rectangle and placed it at the bottom of the page. To create a shadow effect I added a gradient to the fill of the rectangle. To create the gradient you just select gradient instead of solid and adjust as desired.

Screen Shot 2013-12-13 at 18.34.37

Below is a screenshot of the finished footer. I added a text box with my name and the year.

Screen Shot 2013-12-13 at 18.41.16

I created some social network buttons to add to the top and bottom of the pages. I got the vectors from this website:

http://creativenerds.co.uk/freebies/large-glossy-social-media-icons/

http://www.yukaii.com/blog/2008/09/icon-set-popular-blogging-platforms-links-social-networks/

http://graphicdesignjunction.com/2011/02/vector-icons-60-free-social-bundle-vector-icons/

The screenshots below show how I edited them to fit my own website.

I opened the file in Photoshop and used the magic wand tool to select the inside of the B.

Screen Shot 2013-12-13 at 18.51.38

I then navigated to Select > Inverse.

bebo make

Once I had the background of the image selected I hit delete to remove it.

Screen Shot 2013-12-16 at 17.56.21

Below is the finished image. I experimented with using black, but settled for white as it fit more with the look of the webpage.

Screen Shot 2013-12-16 at 18.00.06

I repeated this process for the other social network buttons I am using.

Once these had been created I went to File > Place.

Screen Shot 2013-12-16 at 18.07.29

I navigated and selected the file I had just created.

Screen Shot 2013-12-16 at 18.10.18

The cursor in Muse then changed as shown in the image below. I just had to click anywhere on the page to place the image.

Screen Shot 2013-12-16 at 18.10.31

I could now move and re-size the image as I wished.

Screen Shot 2013-12-16 at 18.13.05

I followed these steps again for the other images and placed them along the footer. I used the horizontal align function again to space these correctly.

Screen Shot 2013-12-16 at 18.16.00

I had planned on only having one set of buttons on the page but after feedback I decided on showing them at the top of the page also. These would not stick to the top of the page like the navigation bar but disappear as the user scrolled the page down.

Screen Shot 2013-12-16 at 18.16.08

To make the buttons function, I added a hyperlink to each one.

At the top of the image below you can see the hyperlink box.

Screen Shot 2013-12-16 at 18.22.14

I clicked on this and pasted in the link for the Facebook page.

Screen Shot 2013-12-16 at 18.22.25

Now when a user clicks on this image, it will take them to the Facebook page.

Screen Shot 2013-12-16 at 18.21.44

I added the links for the other images.

To add the links for the navigation bar, I didn’t need to use hyperlinks as everything is on one page. I decided to use Anchors instead. This creates a smooth scrolling effect when clicked.

To add an anchor, I selected the anchor symbol:

Screen Shot 2013-12-16 at 18.28.38

Once selected, the cursor will change as below.

Screen Shot 2013-12-16 at 18.30.06

To place the anchor I clicked on the page and it prompted me for a name. I used the name of the buttons so it was easily identifiable.

Screen Shot 2013-12-16 at 18.30.27

I clicked OK and the anchor was placed on the page. I then finalised where I wanted it to be. Wherever the anchor is on the page is where the user will get scrolled to.

Screen Shot 2013-12-16 at 18.30.34

I added in the other anchors, making sure they were placed correctly. When the page scrolled down I only wanted to show one texture on the screen.

Here, I clicked the Leadership button and the page was scrolled down to the correct section only showing the texture for leadership.

Screen Shot 2013-12-16 at 18.36.58

Advertisements

2 thoughts on “How I Made My Website In Muse

  1. Hi this is an excellent blog and really helpful. I love Muse and this has given me some great ideas. I’d love to see the completed web page if you have a link? Thank you for sharing:-)

  2. Hi! Thanks. I’m so glad you’ve found it useful. I don’t currently have it uploaded anywhere but here is a video of me clicking around the site.

    If you’d still like to see it live, let me know and I’ll upload it for you 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s