#20 Cartoon Design Progress 2

I have drew the girl's heads out with drawing tablet and Photoshop layering. I have drew quite long on the long hair part to make it looks more natural. The images below showed few samples of outlining and colouring of the cartoon character.

#19 Cartoon Design Progress 1

For this project, I need to draw using drawing tablet for my characters design. In story part, I have 33 character images to draw, included 16 pieces of boy and  17 pieces of girl. Plus, it still required 20 background images for the story line. For the head parts, I took advices from my friend, Zhou who good in drawing comics, about the details of eyes, face and hair. It is because I am not so good in drawing cute characters. I started with outlining the cartoon head first and then just coloured it layer by layer. Then I save it as PNG file to use in my upcoming drawing. The images below shows the few example I have drawn.

#18 Final Storyboard

I have rearranged and edit some parts of my storyboard, included the storyline. I will showed the storyboard at below.

#17 Study on Other Wedding Invitation Website

Since I am doing wedding invitation parallax website, I will studied some others website to improve my developing on the project website. First and important, I looked for the content sections of the sites. It is because the website need details to invite the guests to come to the wedding, yet I have not much understanding on how the wedding invitation should be made. After going on through the websites I studied, I realised the three must-need-info in the website including who are going to marry, date and time, and venue to be hold. There are also few websites which introduce the personalities or characteristics of the wedding couple, but I will put this aside and just focus on the wedding invitation part. There may also have a RSVP section so that the wedding couple will know who can be attending, and who will be not. I will put this in considering.

There are different design styles of wedding invitation website which bring the styles of the couple. For example, the graphic style of Joy and Tom website is more to "university-style" which they experienced a lot together in university time. The orange and dark blue colour brought the feelings of cheerful yet mature. The navigation is also cannot be ignored in parallax website, since it is a single page website that put everything in one page. Some of the audiences may confused and lost his/her ways in the site, so I will take references from Joy and Tom's and Karl and Gina's website on the navigation part. Joy and Tom website made their navigation bar stick on the top of the browser which is convenient to those website that have a lots of content in a page, especially parallax. The users can go to the part they want by clicking on the menu. Karl and Gina website make the navigation bar on top too, but not pinned at top like the previous website. Yet they make the scrolling motion appearing which when users click to the menu they want, the website will show the scrolling and bring the users to the section. This benefit will bring the users to have more impacted memory point on the website and get to experience the fun of interactivity.

So, that is all about my research on those websites. The websites addresses are shown in references below.




References:
http://karlandgina.com/
http://www.gopal-seema.com
http://www.joyandtom.us/
http://www.geckomouse.com/

#16 Adobe Muse New Features: Opacity Scroll Effects

This report is about testing out the scrolling effect with opacity.

After making two sections in the page, I turned on the opacity under Scroll Effects to the texts. It comes out 3 points on the texts include Fade Position 1, Fade Position 2 and Key Position which are to adjust the opacities and positions. The Fade Position 1 represents the vertical scroll position when opacity start changing with the value that have been setted; the Key Position represents the vertical scroll position at which the top of the web browser window is in this location; the Fade Position 2 represents the vertical scroll position when opacity finish transitioning with the value that have been setted . I adjusted those knots/points to the position I wanted and also setted up the value I wanted to be. Then comes out the results, the texts with fades in and out when scrolling.

The video below explained better on this report.

#15 Adobe Muse New Features: Fullscreen Slideshow

One of the new features I really like in Adobe Muse is Fullscreen Slideshow which provided by Widgets Library. As its name, this slideshow will stay on the whole screen of users. In this exploration, I will use this Fullscreen Slideshow as the background of the site. When the users scroll, the background/slideshow will also changed followed the setting I have already setted.

First I used different icons to represent different section in the site. Each section will be heighten around 1000 pixels. Then I created some 100 pixels x 100 pixels different colours squares in Adobe Photoshop. Back to Adobe Muse, I inserted the Fullscreen Slideshow from the Widgets Library. The slideshow cover the whole interface of page, so I arrange it to back by right click. After that, I clicked on the little blue play-button at the slideshow's right hand side which made the setting window popped up. I unticked Auto Play, Enable Swipe and the Parts Display. So the slideshow would not auto playing the images and all the navigate buttons of the slideshow also disappeared. Then I added those colour squares to the slideshow. I just can see one colour, means one colour image at the slideshow. But if I select to view the Layers in Muse, I can see the elements that all inside the page. I confirmed that I already clicked on the slideshow and ticked on the Slideshow under Scroll Effects setting window. To make the slideshow work well at background, I unticked the Autoplay selection and chose Switch slides every 1000 pixels because each section lengthily around 1000 pixel. If I scroll down 1000 pixels already, then the slideshow will change to another slide. Yet to make the background/slideshow smoother, I setted the key position as -300 pixels, means 300 pixels before reaching to 1000 pixels, the slideshow will change.

For better explanation, I have recorded down the going through video.

#14 Adobe Muse CC Fall 2013 Update

On 13th November 2013, Adobe released an update to Adobe Muse.

According to their website, there are several new options or functions Adobe have added into Adobe Muse. The interesting one included full screen slideshow, more advanced scroll effects and social widgets in the widgets library.

So, on next report, I will explored few of the new options in Adobe Muse. References: http://muse.adobe.com/ http://www.youtube.com/watch?v=mUXZvsNcRtA

#13 Prototype Progress 1

The parallax site will be single-page-website which scroll vertical on browser. I need to adjust a lot in the scroll motion setting included key position and speed of (any) direction. These steps are to give a natural and smooth display to the viewers. The video below showed the preliminary prototype of the website. I will do more studies on the numerical setting of scroll motion next time.