Step By Step For Deleytha’s Website In Muse

To begin I set the page size. This changed throughout the time I was building the website. These are the final settings.
1 new page

I initially changed the browser fill to white, this matched the websites canvas.
2 browser fill

I placed the logo I had made in Illustrator at the top of the page. I did this by navigating to File > Place.
3 place for logo

I selected the logo and placed it in the correct position on the page.
4 selecting logo

I used the rectangle tool to draw the navigation bar. I set the fill colour to white. I also dragged the rectangle to each side of the canvas, this makes it 100% width when in a web browser.
5 place menu bar

I used the text tool to write out each button.
6 place menu titles

Once this was done for all of my buttons I opened the scroll effect menu. Here I was able to set the scroll speeds so the navigation bar would freeze at the top of the page.
7 highligh all set scroll

Next, I selected the rectangle tool again and drew out a box. This would become one of my floral spacers.
8 place spacer box

To insert the image fill, I clicked on fill near the top left of the screen and clicked the grey folder icon.
10 fill settings

I then selected the image i wanted and clicked open.
insert floral

I set the fitting to scale to fill so no gaps would appear. And on the scroll tab I set the scroll speed to 0. This would mean the image fill stays still while the box will appear to scroll over it. I repeated this step until I had a spacer for each section of the website.
11 fill scroll settings

For the titles I selected the text tool and drew out a text box. These are all equally spaced under the spacers in each section.
12 page titles

After some feedback from my colleagues I created this swirl pattern to fit under each title. These were simply added in using File > Place.
13 place swirl under title

The first section at the top of the website is About. To begin I drew a text box and added in these paragraphs which describe who Deleytha is and what Rowan does.
14 inserting text

I added in one of Rowan’s pictures to the right of the text using File > Place.
15 placing image

For the Music section I planned on displaying some of Deleytha’s music so it could be listened to. I added in text box for the text.
16 inserting more text

To be able to display his music and let people play it I decided on using Sound Cloud. They offer free embed code.
17 soundcloud

It was as simple as copying the code and going into muse and pasting it there.
18 pasting soundcloud

After it is pasted, Muse creates a preview box so you can resize and place it into the correct position.
19 placing soundcloud

Under the sound cloud I added in Deleytha’s music video. I used YouTube for this and again it was as simple as copying the embed code and pasting it into Muse.
20 youtube embed code

A preview is again shown so you can resize and place it correctly.
21 placing youtube

In the next section I am going to place a gallery. Muse comes with build in Widgets that are great for this and can be modified extensively. I selected the option with thumbnails and dragged it into the canvas.
22 gallery widget

These are the settings that the Widget comes with. To add new photos, I clicked the folder icon at the top and selected Rowan’s photographs.
23 gallery settings

I resized the main image as well as the thumbnails, this is the final position.
24 finished gallery

For the studio section I decided on a grid style layout for the images. I tried several different layouts. Here is one.
2

I decided to use two columns in the end.
25 studio images

Using file place, I added in each image and resized it. I had to try a few different combinations to get this looking correct.
26 studio images

Here it is looking more complete.
27 studio images

And finally here in their final position.
28 final images

I added in a subtitle using the text tool.
29 music influences

In this section I wanted to do something a little different. I had planned on using a 3rd party widget for a lightbox where I could display many videos, preferably from YouTube. I then discovered that Muse had a lightbox widget that would work exactly for that purpose.

I watched this video which explained how to get this kind of effect.

https://www.youtube.com/watch?v=rnZNv2jTC9c#t=453

So following the steps in the video, I selected this widget and dragged it onto the page.

30 lightboxy

Here are the options that are available with the widget.
31 lightboxy

I decided to display the layout so each thumbnail had the songs album artwork or a scene from the music video. These would be laid out in a grid and once clicked would open up a window with the video inside. I clicked on each thumbnail and clicked the folder icon next to image to set the fill image.
32 lightboxy thumbnails

 

I repeated the above step for all the thumbnails and got them into the correct position.
33 lightboxy thumbnails done

To be able to view the video once the thumbnails are clicked I had to insert the html embed code for each youtube video. This was relitively simple. I clicked on each thumbnail and navigated to Object and clicked Insert HTML.
34 lightboxy insert html

I got the embed code for each video from youtube which is freely available.
35 embed code

After I clicked on Insert HTML in muse this box appeared. I pasted the embed code here and clicked ok.
35.5 embed code

Now once the thumbnail is clicked on, the video appears in the lightbox area.
36 lightbox done

I uploaded to my friend’s web-hosting to test it. When the thumbnail is clicked the video appears with a lightbox effect.
37 lightboxy onpage

The final section of the website is Contact. I used the text tool and added some details for the page.
38 contact start

I added another of Deleytha’s images to the page using File > Place.
39 placed images

Muse comes with another built in widget that I decided to utilise. I clicked on Simple Contact in the widgets panel and dragged it onto the page.
40 form

Here are the options that I can adjust. I decided that the simple form had the correct fields that I needed.
41 formsettings

I place it under the text I added earlier
42 form done

For the footer I drew out a box using the rectangle tool and set the fill colour to a green.
43 footer box

I used the text box and added this to the footer.
44 footer text

I made another pattern in the same style of the logo and the patterns under the titles. I added this in using File > Place.
45 footer pattern

Now that all the sections were in a finalised position I could add in the other functionality of the website. The page anchors were next. To make these all I did was click on the anchor button.
46 anchor

The cursor then turns into an anchor and I just clicked where I wanted it placed. This one would be the top anchor for the side arrow which will take the user back to the top of the website.
47 anchor

This one is for the navigation bar, specifically the About button. I placed it down above the floral separators after I received some feedback that suggested doing this.
48 more anchors

Here I am showing how I linked the buttons in the navigation bar to the anchors. When I clicked on the hyperlinks drop down menu, all the anchors appear here for you to select.
49 link anchors

At the top of the page I added in a slider. This was done using the same widget as the gallery. The only differences are that it will autoplay, have no buttons and no thumbnails. That way it works in the same style as a website banner.

In the widgets panel, I selected the Basic slideshow option and dragged it onto the page.
50 slider

These are the default settings for the widget.
51 slider

Here you can see I resized the box. I also unticked the Prev and Next buttons, as well as the Captions and counter. I was left with only the image itself.
52 slider

Here you can see the settings I finished with. Autoplay is ticked and the speed of the transitions and how long each image shows for has been extended.
53 slider

 

I linked each images to what it represents. As you can see below, all I had to do was click on each image in the muse file, navigate to Hyperlinks in the top tool bar and select where I needed it to be linked.

linkingslider

 

Advertisements

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