Going Overseas for Sometime

Thursday, November 20, 2008

Hey guys, I will be going overseas for a holiday from Nov 20 - Dec 1.
As I don't have a laptop, I am not able to update my blog till then.

Wish you a happy December and take care. =)
Labels: Miscancellous

posted by text21 @ 1:08 AM : Go to top

Flash: Contrast Fade

Wednesday, November 19, 2008

Today, I shall make a simple flash tutorial.
Take a look at this slideshow. Notice the smooth transition from picture to picture.

This transition is actually achieved through a simple, but well hidden function in flash.

Firstly, import the image you want into flash. You can simply drag and drop the image into flash to do this.

Now, you can right click on the image and convert it into a symbol.

Lets make this symbol as a Movie Clip. Don't make it as a graphic nor button. Only Movie Clip symbols can make use of the filter functions to make the contrast fade.

Now, in the timeline, add a KeyFrame on Frame 20. Right click Frame 20, and click "Insert KeyFrame".

Then, go back to Frame 1 by clicking on it in the timeline.

Next, click the picture and go to "Filters" in the bottom panel. (By default, it should be on the bottom)

Click the "+" symbol and click "Adjust Color".

Adjust the Brightness and Contrast sliders to 50 Each. Too much will make the transition too unnatural. Too little will make the transition too faint.

Then, right click anywhere between the first keyFrame and the last keyFrame in the timeline, then click on "Create Motion Tween". This will make Frame 1 (one with extra brightness and contrast) morph into Frame 20.

After creating the Motion Tween, go to the properties at the bottom panel, and change the "Ease" to 100 out. Easing Out the Motion Tween makes the transition looks smoother.

Of course, the image must stay on the screen for a while after the transition. On the timeline, make a new keyFrame at Frame 100. If you want the image to stay there for longer, insert the keyFrame at a further Frame.

Because this transition is very blocky when the Framerate is low, we have to increase the Framerate. Right click on the workspace and click on "Document Properties". Change the Framerate to 30. At the same time, click on Match: contents to resize the document to fit the picture exactly.

Thats all for the tutorial. You can repeat the steps for a different image and combine the Frames together to from a picture slideshow like the one shown in the beginning.

I believe that looking at source files is one of the best alternative ways to learn. If you are unable to understand something or want to see the details up close, you can download the source file here: contrastfade.fla (386kb)
Labels: Flash

posted by text21 @ 3:48 PM : Go to top

Lesson From Google: Provide Layout Choices

Tuesday, November 18, 2008

This morning, when I hit the mozilla button on my desktop, I got the shock of my life. My homepage, igoogle, had a supposedly improved, but worse layout! Lets take a look.

The old igoogle. Notice the position of the boxes (aka. gadgets).

The new igoogle. OMGWTFBBQ! What is the blank on the left side?! Why waste screen pixels people had paid so much for?! People read from left to right, and unfortunately, this meant that the pesky blank space will always be noticed by their eyes.

I went into hysterics! I searched high and low for a "revert back to old layout button"! I searched google itself of ways to go back to the old layout.

But, unfortunately, I can't. I mean, google dosen't allows a switchback!

So, I took out my weapon to counter the worse layout. Stylish for Firefox! It allows users to provide additional CSS tags to format the page to their favor. I found a good webpage that provide me with the CSS codes needed to do just that. http://hicks-wright.net/blog/fixing-igoogle-with-user-styles/

When I searched the web, I also noticed that an amazing number of people protesting about the new layout. Many are threatening google to boycott their services if they do not provide an alternative to go back to the old layout.

Anyway, google revert back to the old layout later on for me.

From this, I learnt a very important lesson on webdesign. You don't choose what you want for the layout, its the Users who choose what they want.

Yesterday during lunch, my friend told me that the scrolling space for r-factor was too small for his screen, and this kinda pissed him off. But others with larger resolutions told me that I did a very good, compact layout. So, now I had a dilemma. I am one of those people who had larger screens, so I overlooked those with smaller ones. So, I did a search for how to provide alternative CSS layouts.

And I came across this page. http://www.alistapart.com/articles/alternate/ It has a good tutorial on how to do this for most modern browsers.
So, I followed it, used it and it worked! Now, people can choose whether they want to scroll the whole page, or scroll by the sections! Internet Explorer 6 users need not use this, as their browsers can only scroll the whole page automatically.

Notice the two tiny links at the top left on this page? If you are not using IE6, you can try them and see if the difference is better. I hope this will make r-factor easier and better to read for you.
Labels: Web Design

posted by text21 @ 6:32 PM : Go to top

Blender 3d: Rendering Outlines Separately

If you have been using Blender 3d for a while, you may know the edge settings that can be used to create lines on your image. It can be found by Render -> Edge.

Here's a image I made with the toon looking lines. Notice the black outline of the objects.

BUT, what if you somehow want the lines to be rendered separately? Maybe you need it for some design blueprint, or other effects.

Now, I will teach you how to render the outlines ONLY!

For this tutorial, I will be using the model I've just shown you.

Firstly, make a copy of the original file. This is so that you can save the lines only file for future usage, and also to prevent any changes to the original file in case things goes wrong. As for me, my original file is called snow.blend.

Click anywhere on the 3D view and press Space. A menu should popup. Click on Add -> Mesh -> Plane.

Go to the materials settings. (You can press F5 for a shortcut) Click the tiny little button besides the "Add New", and select the first material from the list.

Adjust the alpha slider to 0.000. this will make the material Completely transparent. You need not adjust the other settings as the material won't be seen.

Once you have finished it, move on to the next material on the list and adjust the alpha slider to 0.000. Do this for all the materials on the list, till all are completely transparent.

Go to the World Buttons. (Press F8) We will have to make the entire background only one color. To do this, select white as the background color, (the one on the left).

Then go to "Map To" and make sure "Blend" and "Hori" are de-selected. Then, on the Preview pane, de-select Real, Blend and Paper.

Go to the render settings. (Press F10) Make sure the Edge button is selected. Then, adjust the edge settings to what you want. More Eint means lines will appear for more edges. Lesser Eint means that the lines will only appear on a few distinct edges. You can also edjust the color of the lines.

As for the format of the image, I would recommend PNG at 100% quality. You may want to erase the background of the lines render for something else later, and only PNG supports transparent backgrounds.

Press "Render" and wait for render to load. You can now save the render image by pressing F3 and saving the image in your folder.

So, what can one make with the separate outlines? Look at this simple effect I have made with a bit of Flash and Erasing of the background by Paint Shop Pro.

Possible Improvements and Suggestions:

- Use Blender like AutoCAD! Designers can actually use the outlines as orthographic drawings. To do this, select the camera in the 3D view click on the Orthographic button, then render.

-To render the thiner lines, you can render at an enlarged size, and resize it back down. For example, if you want to render a 800x600 outline picture, you might render at 1600x1200 and resize it by 50%.

- People proficient in flash can infact make the outlines "draw themselves out", like a drawing being drawn real time on paper. I have yet to try this, but I think it will be difficult but pretty cool!
Labels: Blender 3d, Graphic Tutorials

posted by text21 @ 1:08 AM : Go to top

Blender 3d: Modeling Realistic Trees

Monday, November 17, 2008

Today, I think I'll make a tutorial about modeling trees in Blender 3d. Maybe its not so much of a real tutorial, but more of an introduction to a plugin.
For this tutorial, I assume you know some Blender 3d basics. (You should know how to render, add new meshes, add materials, etc.)

Now, take a look at this render. (Sorry for the unrealistic environment, as I could not find a good background. )

If you have noticed clearly, the shape of the tree looks almost real but rather complex!
So organic, so many branches, so many leaves spreading out in almost life like randomness!!

BUT, what if I tell you that actually, I modeled it within just 2 minutes?

Let me introduce you to a blender plugin called the tree generator. It uses a special algorithm to generate life like models of trees. You can download it here.

Once you have finsihed downloading the plugin, unzip it, and copy the gen3.py and the gt folder into you blender scripts folder. The default folder should be C:\Program Files\Blender Foundation\Blender\.blender\scripts .

Now, in Blender 3d, go to the scripts window at the bottom panel.

Then, click on Scripts and go to Misc -> Gen3 . (That's the tree generator script)

If everything went perfectly, you should see many controls appear in the panel. For this tutorial, I will use an preset called Black Tupelo. Click on the Black Tupelo button and click Generate! (Generating will take a while. It took me about 1 minute for my 3.2 GHz PC. For those with slower machines, please be patient.)

Congratulations! You have just modeled a very life like tree in a couple of minutes!! Now, you may want to add some color to it.

You can actually select the leaves and branches separately and give them a touch of color. As for the leaves, I used 78A75b for the Color, A8C082 for the Spec, 0.58 for Ref, 0.29 for Spec, and 133 for hard. Other settings are left at default.

You have to create a new material for the trunk and branches. I used 674E1B for the Color, 0.80 for Ref, 0.09 for Spec, and 133 for Hard.

As such, this tutorial has reached its end. I hope that you can find this tree generator useful in other projects that require you to make trees.

Possible improvements you can try out:

- If you are comfortable with Blender materials, you may want to improve from my settings. I believe that almost every material can be made to be more realistic. Maybe you can tweak the colors to be more accurate or add textures, for that extra lifelike-ness.

- Try playing around with the settings for the tree generator. Maybe, you can make your ideal tree by tweaking the values. You can also decrease the quality of the tree model if you feel that the presets are too much for your computer to take.

- People with very powerful computers can even generate many more trees and make a whole forest out of it. Unfortunately, about 10 trees are enough to bring my machine down to her knees.
Labels: Blender 3d, Graphic Tutorials

posted by text21 @ 1:27 AM : Go to top

Sterotyping in Graphic Design

Saturday, November 15, 2008

When I mention the words: Graphic Design, what is the first thing that goes through your mind? Adobe Photoshop? All the while, I have noticed that most people think of Photoshop whenever they see a cool graphic stunt, a nice digital graphic, an awesome digital artwork, an unusual photo edit and or a beautiful website.

Recently, when I was surfing the net, I came across some job advertisements for website designers. They ALL had one thing in common. ALL of them are looking for Photoshop users...

There are the blacks and there are the whites.
There are the PCs and the macs.
There are the Photoshop users, and the Paint Shop users.
...All these stereotyping... they must be stopped!

Because I don't use photoshop! I use Paint Shop Pro.
hahaha... Just Joking.

3 reasons why I don't use Photoshop:

1. There are too many complex menus,
as well as sub sub sub sub sub menus in Photoshop that only Geeks and Pros can Understand. And more menus = MORE Time Wasted Dicking around with Controls. Plus, I think the user interface sucks. I love toolbars! I don't want floating menus blocking my cursor from the work!

2. Learner Unfriendliness.
When I first started out graphic design, I found that Photoshop was extremely learner unfriendly. Everywhere I clicked, I just couldn't get any results. But when playing with Paint Shop Pro, I did quite a nice job by merely experimenting around. So, I thought, I'll rather stick to Paint Shop Pro!

3. Photoshop is more Expensive.
Price is a problem when you are still stuck in full-time school. Unless someone is willing to sponsor the funds.

If you have watched the "I am a PC, I am a MAC" videos, here is a similar one to put my views across:

Paint Shop Pro vs Photoshop -- Keep Reading

Now, a Question for you: Do you think Photoshop alone can make the banner of my blogskin?

No way.. it was made with Blender3d, Paint Shop Pro and Flash.

I know there are those tutorials on how to make simple 3d effects in Photoshop. (eg, boxes, 3d logos)
But mind you, those are never never and will never be authentic 3d effects. How would they know the exact shading, the exact colors or even the exact reflections? Famous painters through the ages could not even replicate real life shading perfectly. Even modern computers need hours to stimulate real life 3d conditions.

People who think that Photoshop is the best, universal, all in one, most professional solution to digital art know NUTs about digital art.
Labels: Graphic Tutorials, Rants

posted by text21 @ 11:49 PM : Go to top

Anime Wallpaper (Moetan)

At the beginning part of this year, I was very very addicted to anime.
One particular anime that I liked a lot was Moetan. It didn't really have a very solid storyline I can put into words, but one thing I am very sure about is that it is just too cute. This is one that every lolicon fan must watch.
http://en.wikipedia.org/wiki/Moetan

Hence, I made a wallpaper of it. You can click on it to view the full wallpaper.

But, since the source file (.psp format) is too big, I cant upload it to my host. (Its 30 MB file size) And as much as I can remember, it was quite a complex job, so no tutorial for it. Unluckily, I forget the steps I took... it has been 8 months afterall !!

Anyway, if you are into anime things and like design as well, here is a website that has loads of background-less pngs for you to use. http://www.aethereality.net
It also have loads of other stuff like brushes (photoshop ones), blogskins, etc. Kudos to them for the cleaned up image for this wallpaper.

Hmm, being in graphic design for rather long, I noticed that many avid designers are anime fanatics. But I can't quite seem to make a link between those two. Maybe it has things to do with artistic genes favoring anime and digital art? ;)
Labels: Anime, Graphic Tutorials

posted by text21 @ 11:22 PM : Go to top

Release of R-Factor Version 2

Yo all, the new blog skin has more or less been finalized.
And now, I shall announce the release of R-Factor Version 2.

There are some prominent features in this release:

1. Flash banner with integrated features.
It has a mp3 player and tag box integrated into it. This integration feature is only found in a few professional portfolios sites around the world.

....... But this is not a portfolio, nor a website trying to sell goods.
...... Its a blog. And that alone makes this blog one of its kind.

2. It is 100% styled by CSS and table-Less.
Tables have been the staple for layout of many websites in the world. However, they face compatibility issues and are not friendly to search engine crawlers.

3. This page is friendly for all resolutions 800x600 and above.
It works across most modern browsers, though auto resizing of the layout is not possible for IE6. But this won't affect functionality at all.

4. The CSS is also validated and 100% mistake free
...except for the parts inserted by Blogger for the NavBar on top =P (Blogger, you got some correction of your codes to do...).
But as for validation of the HTML, I cant be bothered. Blogger itself automatically produces syntacally incorrect HTML's across the whole page.

Now, what I got to do is to add more tutorials and update the layout a bit every now and then.

To make such a layout has been my dream for the previous few months, and now it has been materialized. At first, the plans to integrate a mp3 player and a tagbox together seemed daunting enough, with those CSS limitations I have to face....... it seemed almost impossible for a time limited student like me. But after 5 rows of SLEEPLESS Nights. I have achieved it.

If you have a dream, that seemed almost impossible, would you want to give it up or fight for it?

GO FOR IT, I would say. =) Fearing the difficult is the easiest path to failure.
Labels: Web Design

posted by text21 @ 5:46 AM : Go to top

Delays..and Obstacles

Friday, November 14, 2008

Wow... AT FIRST I though things are gonna get easy once i finish the flash banner and 3d model.

But ... my hopes for a straight straight path to success.. is BLOCKED by some... BIG obstacles.

You see, i have this idea of making a purely css layout.. haha. All the formating is 100% css. No tables! (Most Web Designers use tables for almost everything in their sites.) Everything is styled and positioned, and resized by css. I got this inspiration from http://www.csszengarden.com. You can go check out their purely css designs which will surely impress.

But here comes a difficulty. CSS has no tables. EVERYTHING is in <div>. <div> are somesort of like text boxes you drag around in powerpoint, but you need to summon them and manipulate them with code. And in my case.. a worse case senario. Using them to mimic tables..

I don't have dreamweaver. Only a old copy of frontpage (incase i forget the codes)... and NOTEPAD. But let me tell you this... in website making... there's only... ONLY 3 softwares you really need.

1. Notepad
2. IE
3. Firefox
.. and maybe a copy of netscape

The browsers help you find codes from the internet. Notepad is for editing.
May sound geekish. But really.. those expensive softwares don't help much once you have graduated from using premade templates.

But.. there are some compatibility issues. For example, you can dynamically resize the <div>'s height to fill the page mozilla, but in IE 6.. you cant. (If you have BOTH, you can try viewing my blog and see the difference for yourself) Which leaves me thinking of ways to make it can.. or at least.. looks good.

Javascript to auto resize? Its not very browser frendly in the first place. Better off doing tables.
Tables? At the very last resort.

So.... i came out with a cheater technique....... Putting a background that looks like the table, and creating an illusion that IE can at least make things look ok.
Labels: Web Design

posted by text21 @ 6:15 AM : Go to top

Progressing With New Skin

Wednesday, November 12, 2008

The new design apparently takes lots more than the current one.
More time is needed. More focus is needed.
But anyway, i post some screenshots of my desktop to show some of the mess.

I am sure those Pros out here have to deal with more crap than me...
Anyway or another... Its really messy in my computer. But the result will be in one neat piece.

Flash Actionscript is really... a pain in my ass.
Labels: Web Design

posted by text21 @ 7:22 PM : Go to top

Sneek Peek

Monday, November 10, 2008

Yo all.. I am back after a long torturous year. =D

Hm.. Joshua asked me to redesign R-factor.
I srsly think i should.

Here is a sneak preview. (I reused a 3D model, cuz I am lazzzy. =P)

HOLD on... having some files made dosen't mean my new design will be a success.
Who knows, sometimes things go wrong. and things will have to be scrapped.

Anyway, the host for the flash mp3 player seems to have been... shut down? WdF?
zz... this sucks.. i am a student and don't have money to get a good reliable host.
Labels: Web Design

posted by text21 @ 8:48 PM : Go to top

.

Graphic tutorials, blender 3d, paint shop pro tutorials. High quality, fast loading and free.