Website Functions

Website Functionality

Using the photoshop files Harrison has compiled I have begun to convert the static photoshop picture into a fully functioning website using adobe muse.

I have started off by changing some of the photoshop file sizes to make them fit the needed website size. Using the master keys I have added a plain black background so any bleed from the photoshop file will still be contained within the header and footer and not have any random white patches on the bottom of the site.

From hear I can import the photoshop file and continue to add functionality.

Creating Buttons

After importing the photoshop file and sizing everything up, I then moved on to creating the buttons. Rather than linking the static pictures to different pages I decided to add animation to the buttons to give them a more user friendly and professional look.

I started with the original image and imported it into photoshop, then duplicated the file twice.

I then resized the image so it was slightly smaller than the original.

Finally I then did the same with the third image and used the photoshop ajustment tools to convert it to black and white. 

Once I had the three images I then exported the file as a PSD. Reverting back to adobe muse, I then placed a photoshop button into my photoshop template.

Once placing the PSD file into Adobe Muse the program recognises the amount of layers included within the PSD file and gives you various functionality options revolving around the cursor. I set the file functions so the original file will be visible while the mouse is located at a different part of the page. The picture will then shrink slightly when the mouse hovers over the picture. Finally when the mouse is clicked down the resized button will turn black and white, hence the previous photoshop edits.

I have done a similar thing with my social media buttons but gave them a different design.

Adding Links 

Adding links to buttons such as social media and page functions is a fairly simple process. First I had to create the source pages for each of the missing people. Once clicked on the animated pictures of the missing people you will be directed to a page with more information on said person & a button which when clicked will download a missing persons poster automatically.

To add the funtion to the button clicks you must first locate what you want to be associated with each link. Clicking Chloe’s picture I can then use the Hyperlink box to link it to her missing persons page.

This can also be done with a file source such as a MP3 or JPEG. Muse will upload the file and link your desired button or destination with a file from your computer. I have done this with the download missing person poster link.

Adding Video

We have also filmed and edited a live news report corresponding with our media project. I want to include this video on our website and have it so it will play whilst browsing in either small or full screen versions. To do this I first needed to upload the video to youtube, I then used the embed function on youtube to create a custom size video for my website.

After creating the correct size video I then copied the embed link and pasted it into Adobe muse. The programme recognised the link and placed the video onto my template.

Conclusion & Final Thoughts

Adding functionality to a template is somewhat a confusing thing to learn at first, but once you are use to the location and functions of each hyperlink, also swapping between programmes EG muse to photoshop etc the programme becomes much easier to understand and navigate. I feel the website has allot of content and functionality so far, but  I dislike having buttons & locations on the template that have no page or function to match, so I would like to complete those first. In all I am happy with the operation of the website, especially the animation of the buttons and the functions of the poster downloads and video playback. In future I would like to do more work on the template personally to save time in the future with resizing and editing pages when they could have been the correct size from the beginning.