References

Automotiveillustrations.com, (2014). Technical Illustration Pricing & Styles. [online] Available at: http://www.automotiveillustrations.com/tutorials/style.html [Accessed 6 Aug. 2014].

Behance.net, (2014). [online] Available at: https://www.behance.net/gallery/6454675/All-Roads-Lead-to-Centraal-Station [Accessed 25 Jun. 2014].

Behance.net, (2014). [online] Available at: https://www.behance.net/gallery/17094725/LONDON-Typeface-Illustration [Accessed 25 Jun. 2014].

Behance.net, (2014). [online] Available at: https://www.behance.net/gallery/14987129/Alphabet-Machines-Typography [Accessed 25 Jun. 2014].

Behance.net, (2014). [online] Available at: https://www.behance.net/gallery/17893835/Consulting-Icon-Set [Accessed 25 Jun. 2014].

Behance.net, (2014). [online] Available at: https://www.behance.net/gallery/11158717/Airbnb-Sonos-Hello-LA [Accessed 25 Jun. 2014].

Chaize, M. (2014). Add a preloader to your Muse web pages | Creative droplets. [online] Creativedroplets.com. Available at: http://creativedroplets.com/add-a-preloader-to-your-muse-web-pages/ [Accessed 6 Aug. 2014].

Design & Illustration Tuts+, (2014). How to Create 3D Type in Perspective in Illustrator CS6 - Tuts+ Design & Illustration Tutorial. [online] Available at: http://design.tutsplus.com/tutorials/how-to-create-3d-type-in-perspective-in-illustrator-cs6--vector-5982 [Accessed 6 Aug. 2014].

Gubitosi, L. (2012). Free Adobe CS6 Vector Icons for Download - The Interactive Wall. [online] The Interactive Wall. Available at: http://interactiveblend.com/blog/creative/free-adobe-cs6-vector-icons-download/ [Accessed 6 Aug. 2014].

Museresources.com, (2014). MUSE RESOURCES™ | Home. [online] Available at: http://www.museresources.com/ [Accessed 6 Aug. 2014].

Studio, M. (2014). Picons.me | Vector Icons, Symbols and Pictograms. [online] Picons.me. Available at: https://picons.me/download-social.php [Accessed 6 Aug. 2014].

YouTube, (2014). Adobe Muse - Lightbox Effect for YouTube Video. [online] Available at: http://www.youtube.com/watch?v=Nj-UpnpR0q4 [Accessed 6 Aug. 2014].

YouTube, (2014). Adobe Muse Scroll Effect Edge Animate. [online] Available at: http://www.youtube.com/watch?v=75tPMsI0d8k [Accessed 6 Aug. 2014].

YouTube, (2014). Graphic Design Portfolio / Showreel - Logo Designer, Branding, Brochure Design, Print & Web. [online] Available at: http://www.youtube.com/watch?v=rYzPA0I4CYE [Accessed 6 Aug. 2014].

YouTube, (2014). Muse tutorial: Integrating Adobe Edge Animate graphics | lynda.com. [online] Available at: http://www.youtube.com/watch?v=fps_oeMmywA [Accessed 6 Aug. 2014].

Adobe Muse Design.

Total Time Usage: 5 hours

Adobe Muse can say is software that help webs designer to save their working time. And it is so user friendly even normally people can navigate it easily.

All the assets that need for the website can be easily drag into platform and place it and the position u need.

Go to site properties to adjust the size of the web and upload the favicon but make make sure the favicon image must be in square format.

After that place it the animation that are create by using edge animation into muse ( drag in the oam format)

go to the right toolbox and select scroll effect then press on the edge animation button to set the key position. The key position is to set when the point of key position hit the top of the website the animation will start playing.

Then i input the youtube video by embed into a iframe then paste it into muse and will pop out on the platform.

After complete the design for desktop version i move forward to table and phone.

Desktop version

Tablet Version

Mobile Version

For tablet version it is similar to desktop version so i am able to copy and paste the whole site from desktop to tablet then modify abit on the key point and light box. And the images below show how it link the three different layout together.

To design the mobile is similar to desktop, just need to drag in all the asset and graphic and arrange it to the way you want.

After every layout is done i only go back to portfolio size to create images slide show and lightbox. 

Go to object then insert widget, then composition then select lightbox or slide show.

After selecting the lightbox then there will be a toolbar pop out for user to design the lightbox and slideshow. Then adjust the size by scaling it.

For creating button just go to widgets library and click button then drag state button on to the platform and rename it . 

 You also can modify the color and style with the top tool bar by select the state, color and more.

After Everything is done you are able to upload the finish website to your domain. Go to file then select Upload to FTP Host then key in your ftp server , username and password then next. The second step is for CMS and browser editing you can choose no then final step just press ok and will upload to your server.

My portfolio is officially on my website please feel free to visit it :

www.gykho.com

Adobe Edges Animating.

Total Time Usage : 6 hours

Stage 1 Showreel

Stage 2 Skillset

Stage 3 About Me

 

Stage 4 Portfolio

Stage 5 Contact

My previous blog 

http://ykcfe.blogspot.com/2014/07/testing-on-adobe-muse-and-adobe-edge.html had recorded the progress on how to create the the animation with adobe edges.

I wil also repeat about the progress here again.

First  start up Adobe Edge animation then create new project

Edit the stage to size that you need. For now i am using 700px height 700px width

Import the Asset through library, then press the + button base on the category you want. I am import graphic only

Drag the Asset to the stage. The animation tools are all at the left and top left of the interface. Mainly i am position, opacity and masking. The tools are similar to Adobe After Effect so is it very easy to navigate.

After finish the animation, press files and go to publish setting. Unclick Web then click Animate Develop package then select the directory then rename and save.

Lastly save the document in a folder then press files then publish.