Synchronize your video and slides to produce a unified and compelling interactive experience. Watch your presentation from start to finish; slides auto-advance as your video progresses. Or shuffle between slides the way you’d choose chapters in a videodisc.
The selected powerpoints slide remains in sync with video playback. Synchronization lets you simulate a live presentation and watch it just as you would in real life.
Nowadays, people love things to be done in second, like assemble your own furniture in minute – think of IKEA. Or, makes coffee drink with 3-in-One packing. Now, deliver a website with design and CMS engine ready – TemplateMonster.
Through this project, I realized that Thailand will be another new hub for GEW (Global Entrepreneur week) in Asia. So far, there was Gew Malaysia, Gew Indonesia etc. So I was going to work on this portal ‘Gew Thailand’.
After a few discussions with client and expected GEWThailand.com had to be ready as soon as possible due to a big event coming soon on November, so that client could start inviting partners and participants to register. Well, was it possible to be up and ready with design plus CMS engine running in 2 weeks time?
From pass experiences, most efficient way and make things easier, preferable towards those ready templates such as TemplateMonster.com. Another issue was about which platform to be used? Since GEWThailand’s contents were not comprehensive. Well, personally still prefer WordPress rather than Joomla or Drupal. Coz I found it much more user friendly for clients.
Picked a few templates, which personally think it was suitable for GEWThailand structure such as Events listing, feature articles etc. After clients glanced through and gave some explanation, and quickly make decision and go ahead for the purchase.
After familiar with the template, found out few missing part such as events listing has to be customized and other minor modification on the original template. Luckily managed to get some helps from our internal developer who was quite experience in WordPress.
Week 1, pick the template and run on the hosting sites. Manage the contents and such as new menus, new slider.
Week 2, customized the events listing and registration form which based on Joget Workflow instead of putting efforts on the existing wordpress form wizard. Touched up the final contents and files, finally it has ready to showcase.
So, what was exactly my task? To complete the mission I have to be a Designer, Project Manager, Web Master and Quality Controller!
So far, I’d done few videos for Joget Workflow but this time to produce a video with VO (voice over) plus smooth animation; it was kind of new to attempt it.
Few weeks back, I’d posted about the leaflet design for ‘Simplify your business’ earlier, continue the efforts to get ready a 2 minutes video before Demo Spring, while the team members were heading to US, I’d estimated my time for 2 weeks of production.
Firstly, I’d been through the scripts with the team many times, easily more than 6, 7 times to rewrite the storyboard outlines. With such a short presentation, not to make things long ‘winded’, it was more challenge than 20 minutes storyboard.
After few rounds of cutting down the words here and there, finally we had a ‘Stream-down’ version. Based on the scripts, I was able to draft out the storyboard in frames format.
Well, time was clocking and decided to use Adobe Flash to produce these 2 minutes animation. Putting some efforts with the effects, but later my designer has encountered a major problem while exporting the video directly from Flash to AVI.
After exporting to AVI, we realized the animations were not smooth and the frames were missing. Because Adobe Flash using capture screen method to render video, and once it was a fast frame per second, complicated effect will be wiped out. One of the weaknesses in Adobe Flash, the video’s output (AVI) has the scene with “Jumped Frame”. Other than that, AVI file size was large; it was ridiculous for a 2 minutes video with 400mb over file size!
In fact, we had put so much time and efforts; definitely not a good idea to use something else beside Flash. Searching through Google and finally found a solution to solve the lacking.
Moyea SWF to Video Converter Pro is one of the best SWF to AVI Converters that can interactively convert flash to AVI with 32-bit RGBA transparency and Alpha Channel. Furthermore, the file size was much smaller compare to AVI or Quick-time.
And I recommended it due to the output format and file size was pretty acceptable.
Come to VO (voice over), Jack has proposed to use something FREE from AT&T Labs Natural Voice. It’s a Text to voice software. Well, demo so what you expected! The sound was not ‘natural’ and very robotic.
However, I’d been digging and trying some ‘Text to Voice’ software from the net, finally I found NaturalReader (www.naturalreaders.com). Good stuff always has to pay the price! Nothing is free if you need something better.
It has nice interface with simple button to export wav or mp3 format. And there was a speed control as well.
After I’d output the voice over. Some of the final adjustment has to be done in Flash again; need to be re-adjusting time frame so that it synchronized with the animation.
Here’s the final results posted into Youtube.
Someone had recommended for a corporate shooting. Few portraits shot for their internal employees, purpose of the photos to be used for their corporate printing like Poster and PowerPoint presentation/PPT Cover.
Client had briefed me with specific photo’s brief and also gave sample of what their regional office has done. Things like photo position, background and photo dimension. The main points have highlighted was “…a natural setting. The photo should have a documentary feeling, not a studio photo. ”
Here’s some sample.
For PowerPoint cover, I should provide a wide background with the subject positioned far right.
Where would be the best place for the photo shooting? Either we choose office or warehouse. But again, to get the natural out of focus background, the depth of fields has to be more than 10m so that I could get more blur effects.
Planned to use flash Speedlite to bounce back the light, but due to the height of the warehouse it might be not a good idea. Furthermore, limited natural light is another concern.
Finally found some idea to give enough natural light to the portrait, I bought a piece of car sunshade, cardboard with alum foil and cost only RM18.90. It worked fine as a reflector.
Choice of lens, I was looking at the bigger Aperture such as F1.4 or F2.0. Before the actual day, I have ‘assigned’ my little girl as part-time model. By using my prime lens 135mm F2.0, without any flash, just hanged the reflector with both tripod at the site, and she was standing right middle of the reflector.
See Results:
On the actual day, I have brought 4 tripods, 3 for reflector, and one Manfrotto for my camera. I’d spent few minutes at the warehouse and tested out some shots before calling the ‘models’ (employees) to get ready. Looked for a good position and used masking tape to mark the standing spot. Once the setting has up, it was easily taken less than 10 minutes for each individual.
Follow by the brief given, to have the wide background and position the portrait on the far right. Only solution was to snap extra 2-3 blank with manual focus (Blur-mode) while moving camera parallel to the left. So that I could matched them and combined into one complete piece.
First shot on portrait with a reflector on the bottom. Yeah, some of them have to manually hold on to it 
Moving on my camera with 2 to 3 shots to left side with same focus (set to Manual Focus).
After the RAW proceed, I’d used Adobe Photoshop to match them together easily.
More shots with the same setting. Click to see large version.
If you looking for web design resources or references, I have these blogs to share with; it was like a main hub of information not just about web design, but photography, CSS coding etc.
So far, there’s many blogs and forum you can search and try to dig great stuffs. Well, I have “Filtered” them, and here I have 6 blogs provide great inspiration and ideas for my works.
Recently I was setting up a website for my church (PKCMC); and decided to signup the hosting package from 3ix (www.3iX.org) which only cost RM146 for 2 years.
One of the reasons I pick 3iX was because it has this “Fantastico”, Fantastico (wikipedia) is a commercial script library that automates the installation of web applications to a website. And wordpress is one of the features that had ready.
After installing and looked simple till I realized something not right when using Chinese Character and it display “?????”; well, I don’t have this problems on other blog (creadaq.wordpress.com). Searching through google and found out there were many type of answers.
Most commons from WordPress Support, however, it doesn’t help and I keep on looking at some blog with the same file (wp-config.php) which it have this code…
define(‘DB_CHARSET’, ‘utf8′);
define(‘DB_COLLATE’, ”);
But it was working fine. So, don’t remove or replace it. It might corrupt your WP database.
Then I found out some resources about SQL database setting for WP. The main issue is that for most systems when you create a database, the collation is set at “latin1_swedish_ci” as default. You’ll need to change that to “utf8_unicode_ci” for all the tables where you plan to include Chinese characters in.
If you have cPanel, try look for mySQL Database or PhpMyAdmin
Well, first I though it was changed by just select it from the drop down. NO! There was many more to be done. Let me show the steps and screens. Please click screen to enlarge.
You’ll see something like this, might defer from yours as some plugins will add their own tables.
Anyway, on this screen, under the “collation” column, if you see latin1_swedish_ci, you’ll need to change that to utf8_unicode_ci!!! Click on the button 2nd from left on the column that says “Action”.
You’ll reach a page that says Structure as shown below, check everything that says latin1_swedish_ci, then click on the edit button which looks like a pencil.
You’ll reach another page like the one above, change everything to utf8_unicode_ci, then click Save.
Then, when you finished saving, go to the tab that says “Operations”.
Change again setting to utf8_unicode_ci, then press “Go”.
Repeat steps for all that are not “utf8_unicode_ci”. Make sure you click each of the list on the left menu.
Finally, you should be able to write in Chinese characters now. See pkcmc.org.
Choosing the right colors for your web design is a decision that should not be taken lightly. Color is the first thing viewers notice on a webpage. It can evoke a variety of strong emotional reactions and each color can contain a different association. Although everyone’s experience and taste can vary greatly, there are still some basic tenants one can follow when working with color:
Consistency
This applies not only to font and background color, but also to the images and other cursory elements. It would be awkward to have a black and white image on a site full of bright, colorful backgrounds. It is typically best to choose colors that go along with the company branding and it is important that the brand identity seamlessly fits into the design. Also, limiting the design to just a few main colors—2 or 3 main colors and 1 or 2 accent colors—is usually a good standard and helps to maintain the consistency. Too many colors can cause your design to become erratic and visually confusing to the viewer.
Contrast
If you use colored copy, make sure that it contrasts well with the background to be easily legible. Stark color contrast is a powerful tool and can draw the eye, so make sure the most important elements have the most contrast in the design. Having muted colors for your title copy and a bright bold color for the body would be a poor use of contrast, applying viewer focus to the wrong element.
Complements
Complementary color choices are also extremely important. And it’s not just the literal complementary colors that are key, but also colors that complement each other as an accent or highlight. There are many different types of color balances and every designer should be very familiar with color theory and its impact on design. Well, I suggest you can use some online tools such as Kuler Adobe (kuler.adobe.com) to deal with the best combination.
Sometime keep one-two colors . Less color which easy to manage the content and contrast of the branding.
Color Theory
Some designers feel that it is enough to just have a feel for the right colors and that color theory is unnecessary. While having a good eye for color can certainly help develop a good design, color theory is still important. It is important to know what types of emotions your colors will convey so that you cater to your target audience. Click here for more information on color theory. See Color Theory from ColorJack (www.colorjack.com).
Since when I was engaging with twitter, thanks to my old friend KCtang recommended. It was a great tool and so many people was engage with it, “have you twit lately?” soon it become a habit and you might feel uncomfortable if you don’t twit. Oh no! I think it was different type of “Bird-flu” spreading so fast….
Recently I realize some of user has done great design to personalize their designs on twitter. There has already been a range of quality designs showcased on various sites, which has shown an emergence of trends such as the ‘sidebar’. Let’s take a look at some of the best practices around Twitter background design and get to work creating our own.
There were 3 different types of background approach:
1) Using repeating background pattern
http://twitter.com/daniesq, http://twitter.com/msphotogirl and more
2) Background Graphic fading to background color
http://twitter.com/bittbox, http://twitter.com/GordyMac/ and more
3) Extra Large Background Graphic
http://twitter.com/ijustine, http://twitter.com/betterinpink and more
However, you could also get some customize background or template that provided by twitter, http://www.twitip.com/custom-twitter-backgrounds/
Personally I prefer 2nd approach that background graphic fading to the background. Using a single graphic on your profile can help add some visual interest. And it load much faster with less graphics. Let’s start to do my own background on my Sidebar!
First of all, click on profile setting and go to “Change design colors”. Well, brown is always my first choice, change the tone from background, links, text etc. Immediately you can preview the colors from screen. Save the settings once you have decided.
Once I have done that, I get the measurement which is width 460 and height 600; copy the exact background color and start my own theme.
First thing in my mind – Top view on my sidebar; it was easier to arrange my elements such as paper, camera and most familiar’s top view – a cup of coffee.
Just find some of the picture from Google images. Or royalty free images from Stock.xchng (http://www.sxc.hu/)
For example, nice quality of Pencil – http://www.remarkable.co.uk/downloads/wooden_pencil.jpg
Then, rotating and reshape my “ingredient” on PS (sound like frying and cooking, yeah!). Used a lot of drop shadow and simple effects such as rotate and wrap the graphics. Other than that, it was quite straight forward.
Once I have done that and save in JPEG, go back to the settings and click on “Change background images”. Browse and save changes. Done!
Take a look at http://twitter.com/twentyplus
Recently, I was researching and did some works on CSS and new photoshop technics. And I found some of the useful tutorials site that provide a very good steps and even trick to improve your website.
Tutorials 9 (www.tutorial9.net)
Kailoon Design (kailoon.com/category/tutorials/)
PSD tuts (psd.tutsplus.com)
PSD Rockstar (www.psdrockstar.com)
CSS Library (www.dynamicdrive.com)
CSS Drive (www.cssdrive.com)
LAYERS Magazine (www.layersmagazine.com)
Part of the design, part of creative, part of essays… without a typo, it will be not perfect. Typography is a must of the design elements; wrong used of it or apply the appropriate typography can be easily misleading the audience.
Typography is DEFINATELY one of the most important aspects of design. DEFINATELY!
Don’t underestimate the power of well placed and well edited type to be the driving force of a page. Properly emphasized type can drive a page’s design all by itself; carefully weighted type (through color and point size) can form a coherent visual unit without the use of graphics of images.
I have searching and did talk about free fonts before. This time I would like to share one of the great blog that talk about typography – I love Typography.
ILT has updated frequently, almost every week it has posted some article that inspired me.
