Uag Sep Issue

UNITED ARTISTS GUILD Think . Create . Inspire

Issue 01.b Jamah Mazjid (Delhi, India)

Photoshop Starters Effects Understanding

GAUSSIAN B L U R

HGE 2D ENGINE Gaming Graphics made easy

TRANSFORMERS I N S I D E

BEHIND THE SFX

Whats Inside

Photoshop Tut Gaussian Blur

Gaming Graphics HGE 2D Engine

Movie SFX

Transformers: Behind the scenes

Creative Block Logo Design

Photoshop Tuts Understanding Gaussian Blur

R U BL

R U L B

U L

Gaussian Blur

“Doctor sahab mujhe kuch saaf nahi dikh raha!” NO, this is not what gaussian blur is about

When you’d start working with Adobe Photoshop or even any other image post production software you’d realize that how addicted we become to the blur tools, especially Gaussian blur. Because we end up using it so much I wanted to write a small insight into this effect and a basic tutorial on how to get started on it. Sadly many of the graphic designers and users would just look away from the real meaning of “Gaussian Blur” and what makes it work. But honestly enough its critical for anyone passionate enough to know what it’s all about and what makes it work on our computer screens.

Gaussian blur works on an image blurring algorithm which produces concentric circles for every pixel used for transformation. This in normal English means that if I have a point which I want to blur, I’d draw a circle around it with the point as its center. Now the point in the center is given the highest rating and the points away from it going outwards in the circle are given lower rating respectively. The color of the central point is distributed according to the rating of the points given above. This hence produces a blur.

Gaussian blur is typically used to reduce image noise and reduce detail levels. The visual effect of this blurring technique is a smooth blur resembling that of viewing the image through a translucent screen. Now if you searched Wikipedia for Gaussian blur you’d have found complicated formulas and mathematical values. If you have understood those then great (you must be one of those bright students who come in cornflakes advertisements) but if you haven’t understood or just closed the page on the first sight of numerical values then read what comes next.

Single Pixel Point Blurred The rating decresing outward as shown by gradient inside the concentric circle

1

Lets work through one of the effects reachable though Gaussian Blur, called “DoF” or “Depth of Feild”. DoF is generated in cameras when the focal length of the lens is small enough to keep one subject in focus and the other one out of focus. Hence the part in focus is clear and the rest is out of focus. But the problem is that if you end up using a small lens camera like a cell phone cam or a small digicam then you can not achieve this effect.

Use 3.5 Blur on the image. Press ok to continue. Notice how the edges of the image have dissapeared. This is one problem we have to solve. For this we shall use a mask on the image.

Tutorial

2

Getting Started

Take the original image and make a copy of it in a new layer. This can be done by dragging the base layer and dropping it on “New Layer” button.

3

4

Once you have the blur layer on top, we need to rub out the part which we want in focus. Layers are like a sheet of paper over another. Hence to bring out the clear image below we need to rub the one above.

6

Tutorial

5

Getting Started

Take a soft eraser and rub out the area like the shaded one above. We wish to keep the girl in focus and the rest in blur.

So now you have all the idea of how Gaussian blur works and how to make it work for you. This tool could be used to generate glow or sometimes even to remove noise or create a very dreamy or heavenly scene. So enjoy blurring your way through images, its one of the best things photoshop has to offer. Images Copyright Akshay Bhoan

And finally we get the above result. Its a false DoF fully computer generated. While you could achieve this effect in a software like 3D max for your models with passes but for 2D images there is no such filter.

Got Comments? [email protected]

Gaming Graphics HGE Engine So you’ve been tortured through your computer classes or maybe college to learn so called “computer fundamentals” which are practically no use to you when programming. But surely by now you have realized that studying those god forsaken languages was not that bad. Once you start working with C you’d have surely fallen in love with it. It’s like an episode of CSI. The more you dig in, the more irresistible it becomes. But just when you thought you and C could accomplish just anything, there came in gaming. You tried and tried but just wouldn’t get near Direct X or Open GL. And just when you tried to build up the courage to try again you see the review of the new “Half Life” and its “life like graphics” and just give up. So if that is not your story, I’ll say its mine. As a gamer and a programmer I’ve been trying to get into developing games for a long time. But there are problems. As this is a newsletter dedicated to graphics and not code, let’s focus on the visual part of the problem. There are not many feely available engines for games online. When I say freely, I mean FREE-ly. Engines are the heart of any game. Like the Unreal engine by ID made the games like “Medal Of Honor” breathe life back into soldiers of WWII on your screen. Half Life’s engine made graphics of such high quality that you actually felt the characters. Technically speaking, engines are tools which will render your image on

screen in real time. The better the engine the better the graphics of the game are, similarly the resolution and the frame rate also are directly proportional to the engine’s capabilities. I assume that you are not filthy rich and your company is not willing to spend thousands of dollars in trying to buy or develop a brand new engine. Hence for starters, I bring you HGE: The solution to your problems! Yes, a 2D engine, free of cost and no need to slog over hours and hours of code in Direct X or Open GL (which would happen one day inevitably if you prepare to move on to actual game programming in 3D), but for now it serves much more than its purpose. HGE makes an impression that even you’d be impressed with.

HGE of Haaf’s Game Engine (Haaf is the name of the lead programmer of the engine) is a hardware accelerated 2D engine. Now I’m sure that you know what 2D is but just to make sure:

It ends up supporting BMP, DDS, DIB, JPG, PNG, TGA file formats; windowed and fullscreen modes. That means you can now move beyond those problems of a single type file generation.

“Bachon*, 2d stands for 2 dimensional. This means only X and Y axis for rendering. In conclusion it means that you can make sleek games like “Worms Armageddon” or “Mario Super Bros” but no where get near to Doom or Quake.”

Silimar to other engines it also works on vector data, drawing lines and filled shapes. And for advnced effects rendering to texture; direct texture data access; clipping regions; various blending modes; alpha channels and blending; tinting; global scene transformations; Z-buffer.

Now let’s talk about the good parts of HGE and skip the boring halves. I’m sure that you’d end up cursing me if I went on to just copy paste the user manual so I’d just point out what this little baby can do.

That and more. The amount of documentation with the engine is pretty good. No need to hunt around for tutorials as it comes packed with basic fundamentals in its help files. The only thing you’d probably need would be a “computer graphics” textbook from one of your computer engineering pals to understand the basic concepts behind Z buffer and alpha effects a bit.

It’s totally free. This means that you don’t have to pay anything to acquire it or even to publish games designed on the engine. This is great for amateur programmers and artists because you’d be able to put out beta versions of the demos and works without going illegal.

This could be your games main screen with HGE.. or maybe something like this :)

Some of the best RPG and strategy games have used 2d engines like Simcity, Red Alert, Tiberian sun and even Commandos

HGE makes a grand appearence and with it your game or presentation will just be amazing. Try it out. We’d be looking at using HGE in future tutorials but first you just need to get introduced to it. HGE web site: http://hge.relishgames.com Latest HGE version: http://sourceforge.net/projects/hge

oye! je mere kol vi UAG type da magzine hunda tah I, Mr Teetu Singh vi animator hunda..

Adobe Photoshop . Corel Draw . Macromedia Flash . 3D Studio Max . Softimage . Deep Paint 3D . Gimp . Macromedia Dreamweaver . Adobe After Effects . Autodesk Combustion . Maya Fusion . Maya . Toon Boom Studio . Animo 3D . Microsoft Frontpage . Adobe InDesign . Adobe Page Maker . Poser 3D . SoundForge . Quark Express . FreeHand . Illustrator . Adobe Photoshop . Corel Draw . Macromedia Flash . 3D Studio Max . Softimage . Deep Paint 3D . Gimp . Macromedia Dreamweaver . Adobe After Effects . Autodesk Combustion . Maya Fusion . Maya . Toon Boom Studio . Animo 3D . Microsoft Frontpage . Adobe InDesign . Adobe Page Maker . Poser 3D . SoundForge . Quark Express . FreeHand . Illustrator . Adobe Photoshop . Corel Draw . Macromedia Flash . 3D Studio Max . Softimage . Deep Paint 3D . Gimp . Macromedia Dreamweaver . Adobe After Effects . Autodesk Combustion . Maya Fusion . Maya . Toon Boom Studio . Animo 3D . Microsoft Frontpage . Adobe InDesign . Adobe Page Maker . Poser 3D . SoundForge . Quark Express . FreeHand . Illustrator . Adobe Photoshop . Corel Draw . Macromedia Flash . 3D Studio Max . Softimage . Deep Paint 3D . Gimp . Macromedia Dreamweaver . Adobe After Effects . Autodesk Combustion . Maya Fusion . Maya . Toon Boom Studio . Animo 3D . Microsoft Frontpage . Adobe InDesign . Adobe Page Maker . Poser 3D . SoundForge . Quark Express . FreeHand

(UAG)

Designed to be used “creatively“

TRANS-FORMERS THE TRANSFORMATION FROM CARTOONS TO 70MM SCREENS

If you’ve recently been around any cinema then you know what is raging through the movie screen now days. Everyone is talking about the groundbreaking effects in Transformers, the latest adaptation of the 80’s cartoon by Paramount Pictures and DreamWorks. Left : Cover shot of one of the Transformers Generation comics from Mid 90’s. Below : One of the promotional screens of Transformers Game

Probably one thing you’d realise by the end of this article is that we are basically spell bound. Micheal Bay truly transforms an creative idea from a cartoon and comics to brutal metal machines on screen.

THE TRANSFORMATION FROM CARTOONS TO 70MM SCREENS

And if you’re wondering how exactly did they come up with such amazing life like Autobots and such intricate details on the transformations then the only people who can answer that are the special effects experts at ILM or Lucas Arts Industrial Light and Magic.

Working for over 2 years with over 350 engineers and over 15, 000 automotive parts ILM made the tiny fake robots seem larger than life itself and maybe most believable — effects achievement in movie history: Transformers.

With an mind boggling budget of $150 million, Michael Bay and ILM took 6 months to imagine and re-engineer the way Hollywood looks at CGI (Computer Graphics Imagery) turning everything from helicopters, F22’s to Hummers into humanoid alien robots with lightning fast reflexes.

Come to think of it, 40% of all employees in ILM are Indians. So maybe this inspires you more than anything else !

THE TRANSFORMATION FROM CARTOONS TO 70MM SCREENS

How are we gonna get this thing from a car into the robot and back in a believable way?" White, the film's digital production supervisor, asked the Transformers crew in 2005, when, after their back-and-forth with toymaker Hasbro, the F/X plan consisted of little more than robot sketches and shiny new Hummers — and not much in between. "Of course, Michael Bay wants a lot of energy, he wants ninja-fighting warriors that can punch and put their arms over their heads and do all this crazy stuff," White says. "So we had to design these really complicated systems — how do all these systems match together and fly over each other to keep it looking real? And that was a huge challenge."

It started with ILM's creature development team (well versed in children's movie animals but not so much in carburetors) heading to the autobody shop in early 2006 and lifting up the hoods of real-life cars to develop as many real-looking car parts as possible. These formed the innards underneath the exoskeleton provided to the animators. But building a design system that allowed the animators to move all those pieces quickly — and to fit them into the finished robot, designed almost a year earlier, without banging parts into each other — was the real headache.

THE TRANSFORMATION FROM CARTOONS TO 70MM SCREENS

What ends up on the silver screen today is not plain cinematography. Behind every shot there are hundred of people working tirelessly to realise the visual dream and portraying in front of audience. "It's been a struggle for all of us in this business to get the computer graphics looking as good as they are now, and I really do believe Transformers is a new high-water mark for making materials look good," says Farrar, the visual-effects supervisor and Bay's right-hand computer geek. "It's surprisingly complicated in the world of computer graphics to make objects look like what everybody in the world sees every day."

Article adapted with refrence to Popular Mechanics. Images Courtesy of Paramount Pictures and DreamWorks PicturesPublished on: July 3, 2007

Original Logo By Navreet Singh Editing and fooling around By Akshay Bhoan

Logo Design from sketches to visualization Honestly speaking, this was not our main article. B u t a s w e l o o k e d i n t o N a v r e e t S i n g h ’s c r e a t i v e profile, a logo he made came into focus. We ended up playing around with the logo and the results were so good that we wrote a tutorial for you.

Logo Design from sketches to visualization

Fact File

TIP You can use the same procedure for most text based logos. Just it would be a lot easier if you always kept in mind the proportions when drawing a logo on paper. A properly drawn logo is a lot easier to work on

Navi / Navreet Singh orignally designed this logo. The logo features letters “NAVi” in 3d geometry, surrounded by shapes like L’s, cubes and an arrow. Navi said “this illustration was made long ago in one of my diaries, i had to put it out, photoshop it, and here it is, gorgeous, isn't she”. Well, its nice but we had something else in mind ;)

Now the problem here is even if you do end up retracing the whole figure, its madly out of refrence propotions. Even keeping in mind that the logo is 3d and has depth, the original design can’t be just retraced. Hence we’ll take the original idea and make a new text all over again. To redraw the text we need to re-write the 3d text. If you have 3D Max you could do this in 2 seconds but here we have to make it in Photoshop. We chose the “Impact” font and wrote the letters in a new file. Here Impact is taken because is closly matches the font Navi has used in his logo. We’ll look at the other geometry later. The next step is to re-arrange the letters as to form the exact logo shape.

Logo Design from sketches to visualization

Fact File

TIP An very powerful tool for all your designs would be Fonts. The more varied kinds you have on your system the better it is. Download fonts whenever you’re online or try getting one of those 1000 Font cd’s, they are worth it.

If you notice the N-A-V-i in the logo are tightly joined. Hence to get that effect our font too should be tightly compressed. Right click the font layer and rasterise the layer. Using the marque tool select “A” and “N” and delete them. Select “V” using the same marque tool and copy it. Paste it, press Cltr + T and click “flip vertical” to get your new A without the center line.

Now we need the “N”. For that click on the type tool and write “I” in Impact font. of the same size. Paste the V on a new layer and move it close enough to make a new “N”. (above image shows the before and after with ‘I” & “V” and them joined together) Paste all the layers in one file and put them together. The image here shows the text with a bit of space in the middle. We now take the “i” and press Cltr + T to get into transform and right click to skew. Bend the “i” to match the “V”. Transform function is something you’ll use a lot in photoshop. The hot key to it is Cltr + T. Remember that, try to get used to hot keys. They end up saving huge amount of time.

Logo Design from sketches to visualization

Fact File

TIP Refrence lines will always help you define proportion for any drawing. Always draw refrence lines in a new layer as they are always temporary. If you are an engineer you’d surely know their importance

Put together all the alpahbets. Now we have the text as we want it. The next part is to join it together and form a single layer. But before that just leave enough space for one sinle line to pass between alpabets. To merge them into a single layer, press Cltr + E till they come in a single layer starting from top to bottom

So now if you’re confused about the change of color and the shape, here is the explanation. Once you have the text ready, transform it with “prespective” and “skew” to make the text settle in place above the logo. Use the basic drawing as refrence. Try to make it as close as possible but don’t distort the text to make it match. If it starts to look like some weird old game its ok. Draw a few refrence lines in a new layer. This will help you make the frame of the 3d text once we start. We’ve dicided to leave out the rest of the geometry of the logo (arrow, cube and L’s) because they end up making the logo messy. Trace the outlines of the text in a new layer with the LINE tool (width 2 px). Try using a different color for the lines.

Logo Design from sketches to visualization

Fact File

TIP Try to rename the layers with names as you go along. It makes them easier to identify specially when you’re working with 50 layers on top on one another. Just give them names so that you’d understand.

Draw the frame for the text. This is mostly approximation but you’d find it quite easy with the refrence lines in place. Once the frame is ready we move on with higher effects.

Make a new file 800 x 600 res. Drag the frame layer into the new file. Close the previous file (saving it is your choice). Select the frame layer and select on Image > Adjustment > Hue & Saturation from the main menu. Select colorise in the bottom and make the frame blue in color (use only saturation & hue controls) After the above process, double click on the layer and add “Outer Glow” with Blue color “#1FB8CB” (use value directly) to get the above image. Copy the layer and transform it (skew) and join them to form a pair. With a bit of rotation and skewing you’ll get this effect here. Merge the two layers and save file.

Logo Design from sketches to visualization

Logo Completion

Fact File

TIP Keep a stock art archive. This will help you when you run out of all ideas and effects.

Make copies of the main logo pair and rotate them to put them in this way. This completes the logo for us. Try making the backdrop for this. If you can’t (or you’re too much in love with the one we made) then wait for the next issue of UAG. Cheers and thanks to Navi for his logo

Try using a high res picture of earth instead of the circle in the center. If you don’t have that pic, try the NASA website.

Pss.. The backdrop is made using rectangles which are “sheared” (see distort) and a circle in the center. This is then used with Inner Glow and Outer Glow layer blending options. Lens flare (along with gaussian blur) is added with “Vivid Light” setting. Watch out for next issue of UAG for complete tutorial and more effects.

Tutorial By Aky B comments : [email protected]

(UAG) T h i n k

.

C r e a t e

UAG Internet Issues are free for distribution by any reader / user. No part of the issue may be reproduced or editied commercially without the permission of UAG.

Credits Concept and Design : Akshay Bhoan Front Page and Tutorial images copyright of Akshay Bhoan (2007) Creative Block images copyright Navreet Singh (2007) Transformers images copyright Paramount Pictures and DreamWorks, USA Games images are copyright respective companies and Relish Games

.

I n s p i r e

United Artists Guild has been created for the sole perpose of creative education for individuals with profound artistic thoughts. As we are still on very infant stages of this internet issue, we are currently NOT* charging for any advertisements or promotions related to this feild. If you as an company or even as an individual are interested in this please contact us at:

[email protected] *Conditions apply