A random post.. ya, life's tough

Wednesday, April 25, 2007

Hey ppl. I know that this blog has few tutorials. You guys want me to upload more stuff. I also want to upload more tutorials too. I am desperately using all the time i can afford to do so. I can't just copy tutorials from sumwhere else in the net and post it here, like many other websites do... it is a sucky thing to do. Really. I am sure you wanna see good original tuts, not those typical things you see everywhere else.

But, I need to revise for the coming semester exams and my june o'lvls.. To be frank, my parents aren't happy about me spending too much time on the com, and they r scolding me all the time (Actually, i told them i wanna check the web to do my science homework, so i can write this post). I am not a guy who is free all day and got nothing to do. I am a student, a one who don't wanna flunk exams and suck in studies. I hope you understand. (actually this blog is written by 2 persons. Both r students)

Erm, i've heard that you guys are thinking that the blog layout is kinda squeezed to the left, and a lot of blank space on the right... I did try to center the whole content before. It does not look good. Besides, I have to consider about those ppl who don't have gigantic 19++ inch monitors. Those ppl who don't have high resolutions. My screen resolution is quite high too, as you can see from the screenshots. Quite a lot of ppl actually still have a resolution of 800x600.

Our sidebar has a lot of blank space. It is for links and ads we'll add later... but we have no time to compile those now, cuz of school. We need to wait till the coming vacation before we can do that. For the links, we'll be compiling some of the good graphic sites we find (Not the sucky type). We'll also need you to tell us your website (if it is about graphics), so we can be link affiliates. The ads are for... money. We need cash. Really.

Labels: Rants

posted by text21 @ 2:13 AM : Go to top

How to make animated virtual lightning, with realism

Sunday, April 22, 2007

Today, we will put on a tutorial to teach you guys how to synthesize lightning to put into your animations, websites, blah blah. This technique has been along for quite some time, but those tutorials you see out there can't teach you how to make realistic virtual lightning. We got pissed off, of course, cuz we wanted to create animated lighting that is realistic. So, we spend some time observing the lightnings in the storms, and we've thought out a way. Check it out.

Note: Due to limitations in our monitors, we can't really mimic the brightness and intensity of a real life example. But we have at least produced the most realistic artificial example on the net. ;) We'll use marcomedia flash for the animating part, cuz' it is the best software for making animations so far (unless you're doing a movie). So if you don't have it, we recommend you to download the trial version.

1stly, we went to google and did a search for lightning images. Then we got this one.

2nd, we pasted it in paint shop pro, and erased the background to retain only the lightning image. We did it using the magic wand tool to select bits of the background and delete them off, the used an eraser to erase the fine bits of background. Be sure to make the top and bottom parts of the lightning to fade away, by erasing them using a soft, large circle brush. After all the bits of background are erased, we greyscaled it by colorize the lightning and put the saturation to 0.

If you are just too lazy to do that, we've uploaded a cleaned up one for you! Ya, we guys are lazy, but we tried our best to clean it up ourselves. Right click, save it to your folder.

3rd, we did a google search for a image of storm clouds. Dark, gloomy ones, so the lightning can contrast with it enough. As you know, our monitors can't show the powerful blasts of light you can see in real lightning. So that's why the background must be dark enough to give the viewer a false impression that the lighting is bright.

4th, we copied and pasted the cleaned up image of the lightning glow in to a new layer. We resized it to fit the clouds and the ground. We also duplicated the lightning and adjusted its proportions to create another variation of it. As lightning gives a nearby clouds a glow, we used a soft circular brush to add some translucent halos for the base of the clouds.

5th,we copied the two lightnings and glows and pasted them as three separate new images. The we save them as .png with alpha transparency.

Now, time to open up marcomedia flash. Because it is kinda tedious to explain everything we did in flash (due to too many frames and stuff), we've included a .fla file to let you see what's inside of our animations... feel free to tweak it in anyway you like. Right-click here to and click save to download it.We would appreciate it if you can give us a backlink if you happen to use integrate the .fla to in your website or animations.

We'll examine the different layers of our animation in flash. Remember to convert all images to symbols with a registration at the middle, to help you animate and resize it easily. Our frame rate is 30 frames/s, fast enough to deliver the speed of the lightning, but moderate enough to run with no lag in most computers.

In the 1st and 2nd layer, we've increased the background's brightness whenever there's a lightning flash, and left it fade away to its original darkness whenever the lightning's is over.

In the 3rd layer, we've the lightning blots fading in and out. This is done by adjusting the alpha settings of the lightning symbol at each keyframe. The starting and ending keyframes is 0 alpha, and the middle one is 50-100. Be sure to make the process of fading in and out fast.

The 4th, 5th and 6th layers contain the glows in the clouds caused by lightning. Do the same fading in and out thing you did to the lightning bolts. But for the glows, make it fade in and out with the lightning. Sometimes, when there is no lightning showing, add it to other parts of the clouds. These are the glow caused by cloud to cloud lightning, the type of lightning that you can't usually see.

The 7th layer contains a black rectangle which has a gradient that is transparent at the bottom and is opaque at the top. The helps make the clouds "shadier" so the lightning looks more realistic and you can put text later.

At the top most layer, we have the text.

Erm, thats all. It may seem hard, so if you don't know how to do the basic things in flash, (eg. motion tweening, making new layers, resizing....) pls search it up in the help function in flash. If you noticed any other element about lightning that we can put into our animnation to make it more realistic, pls share with us by posting in the tagbox. Observing lightning is not easy, it's too bright and fast.

Labels: Flash, Graphic Tutorials

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

Forum signature tutorial... Example 1

Friday, April 13, 2007

Ok guys, since its a weekend without much crappy homework, we can put up a forum signature, a.k.a. siggy, tutorial. If you don't know what is a forum siggy, it is something pepople put at the end of every of their forum posts. Even you don't have a need to make 1, just read on... because you can learn some stuff out of it.

We know that everyone has their own style. Retro, grunge, natural, 3d, pastel, cute... you name it. But for this tutorial, we will touch on a bit of a techy and trendy style. Well, this was made for a friend some time ago when he was playing maplestory, some not so popular game now... but who cares? We are here to teach you graphics, not talk about games. Now lets take a look at the pic 1st.

Well, it make look like quite complicated. But we will again make things as simple as we can. In this signature, we use some cheap, makeshift methods. After seeing tutorials and people who do things in "professional" style, we decided to show you how simple methods are cool as well. Anyway, who cares about doing things the proper, pro-like way all the time? All we want is something nice, right?

Note: This tutorial requires some basic knowledge of paint shop pro, or if you use photoshop, know how to do the basics. (eg. using text, erasers, brush textures, duplicating layers). If you don't know, look it up in the help section of the program you are using. Besides, you need some thinking of your own to complete this tutorial. Afterall, if you are smart enough to read this blog, you should be able to understand.

1st, we make a new image in paint shop pro, 300x130 pixels. Kinda small, cuz of forum limitations, and you may wanna type some text after your pic.

2nd, we took a screen shot of a visualization in winamp (ctrl + prtl scrn, then paste in your graphic program), our favorite media player. If you are using windows media player, fear not. Winamp is free for all, and i recommend you to download it. We like to use it to generate nice looking backgrounds using a visualization plugin called r4. Winamp users can download the plugin form winamp.com by searching for r4 in the visualization section.

3rd, we paste the screen shot in paint shop pro, then we drag it so that we can only see the visualization effect.

4th, Convert the selection to a layer. Then duplicate it. Apply a motion blur. Use an eraser at around a size of 70-100 and hardness at 0 and erase the center parts so that only the borders have the motion blur. Use a paint brush, with color as black and texture as grid, to brush slightly around the edges. The screen shot shows how we set our brush in paint shop pro and what we achieved after erasing and brushing.

5th, we made some arial text in a large size, with the text body color as transparent and the line color as yellow. We set it as a layer and duplicate it again. Then we go to the layer below and apply a motion blur with a strength of 30.

6th, After that, we make some rectangles in a new layer. And make text in another new layer and blur it. The text is arial and is black now. We made the two new layers slightly transparent.

7th, we create a new layer and make some yellow rectangles in a nice, tech like position. We add some arcs made by showing part of large circles. Remember to turn on anti-alias for all the shapes in this tutorial, for easy viewing. You can check out what we mean in the screenshot.

8th, we have to create a black box for the text. We do this a rectangle across in another new layer. Besides, we add a few lines along the bottom of the pic and above the box.

9th, we use a circle brush of size about 60-80, black color, hardness 0, and brush the sides a bit to create a "shady" feeling. Then, we created some micro text on the top left in another layer and duplicate it, then motion blur it with a strength of 75. Then, we drew some intersecting lines of width 1.5 to give it a more "techy" look as well as anti-aliasing it.

10th, we go make a new layer and make a yellow rectangle across, and a smaller one below. We can select a bit of the small rectangle in the bottom right and delete them, cutting squarish parts out of the rectangle, thus making a "techy" feeling. Use an circle eraser of hardness 0, and erase parts of the small rectangle to make it slightly translucent. You should be able to know what we mean by examining out screenshot carefully.

Now, we've completed the background! Feel happy for yourself. We hope that you have learnt some new techniques and effects (eg. like duplicating text layers and motion bluring the bottom one; brushing the sides in a darker color to make the pic "shady"). In the following steps, we will learn how to put the image and text in an attractive way. :)

11th, we copy the image of the character and clean up the background by using the magic wand tool to select spots of background and deleting them. Then we select the cleaned-up character image using the magic wand tool and apply a drop shadow effect, opacity 90, horizontal 2, vertical 2.

12th, remember how you apply the motion blur effect to the text in the previous steps? Now, instead of motion blur, we gonna use the wind effect after duplicating the text layer, as it gives a nicer finish in this case. In paint shop pro, it can be found under effects> distortion> wind. After applying the effect, we lowered the transparency of the layer that we applied the effect. The font we use is called hooge 05_53. You can download it at http://wint.virtualplastic.net/download/font.zip.

13th, or the last step. We added the pics of the skills of the character. For this example, we cleaned it like what we did to the character, invert the colors, and added a drop shadow effect. We added some small text on the right in a new layer and duplicated the layer and Gaussian blurred it at a strength of 2.

With this, this tutorial is completed. While we don't expect you to use exactly our style, our main purpose of putting up this tutorial is to let readers learn some effect techniques and how to use shapes and text to convey the feeling you want to let your pic have. You can try to use other visualizations in your desired color and some other interesting shapes combinations. Maybe next time, we can make a tutorial about grunge signatures.

Labels: Graphic Tutorials

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

Hiatus

Thursday, April 12, 2007

Due to school and exams, we will have little time to update this blog. We would try our best to post some tutorials in the coming vacation.

We hope you guys understand.

Labels: Miscancellous, Rants

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

The 1st tutorial, Color Combinations

Before I start on those tutorials that require your graphic program, I wanna say about color combinations. The ability to combine colors correctly is a thing required for every digital artist. Ever seen a graphic that has a color combination that looks ugly? Thats why, this color combination thing is vital. We know that not everyone reading here knows art theory, so we try to make things simple...

1st think hard about your subject, the main focus of a digital graphic you want to make. What your theme is about. What feelings your subject gives. The main impression you want to give. Is it more to the darker side or the lighter side.
Because all designs are either light or dark, or somewhere between. So, decide if your picture is more of white or black.

2nd, choose the hue that represents your design... you can go somewhere in between hues or two and more suitable ones. Refer to what you think of your subject often. Do not choose a hue just because it looks nice. Like, if your subject hints about bloodshed, maybe you wanna use red. If your subject depicts fun, you wan to use orangish yellow. Afterall, digital art is a way of conveying your feelings.

Now, think of which color style depicts your topic the best. We have given a few common ones used in modern webdesign here. For other forms of graphic design, you may want to try your own style, but please make sure it looks nice to you and ask others as well. Try to use your own colors. Don't just take what is here, because we're sure you have your own taste as well.

• Striking. Uses contrasting hues and shades. Saturation is mostly high. Something like this blog. Used mostly in blogskins or fansites, as it depicts energy and blodness.
  

• Monotone. All in 1 hue. Only difference in saturation and brightness. It may seem a bit boring and dull, but if shades are correctly chosen, a calming effect can be prodeced.
  

• Corporate Style. The typical color style depicted in those company websites. Colors are slightly paler and combines to give a smooth feeling, as they are quite similar in hue. Can be used to create more of a professional look.
  

Apply it. When you use the tools in your image program, use the colors you have thought of or predefined in your color scheme. If you are plain lazy, or skillful enough to choose a good color on the spot, you may just change the colors on the spot till it looks good. If you do not have much experience in graphic editing or art, you may need some time to cultivate or find your preferred style of combining colors. Anyway, a good color scheme should have good contrast in terms of saturation and brightness. This is the way for your design to captivate viewer's eyes.

We have found a good color scheme maker here
http://wellstyled.com/tools/colorscheme2/index-en.html
Some of the terms used may be unfamiliar, but you can try and play around and get what you want! If you really like a particular result, copy the hex values into your favorite image editor.

A simple guild line: When you are making a website, please note that the content text and background should not contrast each other in hue to greatly (eg. red and blue), but instead contrast more in terms of saturation and brightness (eg. Blackish green and Pale white green). This is a rather important factor to make your text look soothing to the eye/easy to read.

Labels: Graphic Tutorials

posted by text21 @ 5:31 PM : Go to top

Testing

Saturday, April 7, 2007

Testing post... If you see this this blog works.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida nisi eu ligula. Vivamus elit massa, malesuada vel, cursus ac, iaculis quis, augue. Nulla rhoncus neque vitae felis. Aenean et lectus. Vestibulum lectus risus, tincidunt vel, euismod ac, tincidunt eu, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam faucibus nibh id felis. Pellentesque lorem lacus, lobortis non, commodo eget, aliquam condimentum, est. Integer vel metus sagittis ante fringilla rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas ultrices. Cras lacinia sagittis lorem. Integer molestie nibh. Cras gravida fermentum ipsum. In hac habitasse platea dictumst. Nam sapien. Proin magna. Ut commodo, tortor eget sagittis aliquet, mauris nunc pharetra velit, eu dictum lorem felis a augue. Sed vestibulum, eros vel tristique malesuada, est nunc rutrum nisl, et ullamcorper leo urna a lectus. Vivamus a est. Mauris lacinia euismod nisl. Suspendisse commodo, arcu at placerat cursus, leo tortor ullamcorper ligula, nec elementum pede orci nec mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lobortis nisi sit amet nibh mattis posuere. Nam augue dui, semper ac, commodo vel, rutrum quis, mauris. Suspendisse nec lacus pretium sem accumsan luctus.

Etiam fermentum, nibh vitae pulvinar sollicitudin, erat metus ultrices sem, non hendrerit nibh lorem ut ante. Mauris consequat fermentum tortor. Curabitur sed urna. Nam semper tellus. Donec molestie justo id lectus. Ut rutrum pharetra urna. Quisque et turpis eu mauris semper volutpat. Nullam sed quam ut quam vulputate lacinia. Mauris eget nulla in urna lacinia faucibus. Curabitur sit amet nibh. Ut tincidunt orci nec orci. Proin sit amet elit eget pede luctus ornare. Nam ac sem. Duis rhoncus lobortis leo. Morbi mollis gravida dolor. Pellentesque fringilla gravida risus. In commodo egestas risus. Nunc sed erat.

Labels: Miscancellous

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