To begin, I opened Adobe Muse and clicked Create New Site.
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.
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.
Next I added in some text using the text tool. These will act as my buttons.
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.
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.
I clicked fill. Here I can adjust the motion marker more precisely.
The images below show the navigation bar as it is at the top of the web page.
This image shows the navigation bar as it freezes at the top of the screen when the page is scrolled down.
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.
I added the image fill using the picture I had selected.
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.
This is how it looks once the fill is complete.
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.
I then created another rectangle underneath and added an image fill using the settings as in the previous two boxes.
I repeated this process for rest of the website.
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.
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.
Using the same methods as above, I began adding in the content for the rest of the website.
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.
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.
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.
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.
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.
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.
Below is a screenshot of the finished footer. I added a text box with my name and the year.
I created some social network buttons to add to the top and bottom of the pages. I got the vectors from this website:
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.
I then navigated to Select > Inverse.
Once I had the background of the image selected I hit delete to remove it.
Below is the finished image. I experimented with using black, but settled for white as it fit more with the look of the webpage.
I repeated this process for the other social network buttons I am using.
Once these had been created I went to File > Place.
I navigated and selected the file I had just created.
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.
I could now move and re-size the image as I wished.
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.
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.
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.
I clicked on this and pasted in the link for the Facebook page.
Now when a user clicks on this image, it will take them to the Facebook page.
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:
Once selected, the cursor will change as below.
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.
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.
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.