Advanced Glow Effects

Hello!, we meet again in the photoshop

 tutorial. This time i would like to post for you a marvelous tutorial from Collis.PSDTUTS and also you can download the source file below to make you easier to do this tutorial.

In this tutorial, we're going to create some really sharp-looking glow effects using a combination of layer styles, the Pen Tool and Color Blending. The end effect is quite stunning and hopefully you'll pick up some tips you didn't know before.

anyway, if you want to find such a nice typeface font, you can through download it from www.1001freefonts.com/ or you can go to the http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/%20-08/40-excellent-freefonts-for-professional-design/ - otherwise you can search in uncle Google.

Step 1:

As with pretty much every tutorial I've ever written, we begin with a radial gradient. This one is pretty harsh and goes from a reddish brown color to black. Here are the exact color codes:

Foreground color - #922f00
Background color - #000000

Step 2:

In this tutorial, we actually need a pretty intense center, so what we'll do is duplicate the layer we just made and set the one above to a blending mode of Color Dodge. There are a few types of blending modes, darkening ones, lightening ones, colorizing ones and inverting ones. Color Dodge is probably the strongest of the lightening ones. As you can see in the screenshot, it produces a pretty full-on center.

Step 3:

Now in our glow effect, it helps to have a nice textured background. So we are going to create a sort of smoky haze. To do this, create a new layer, then make sure you have white, #ffffff, and black, #000000, selected as your background and foreground colors.

Then go to Filter > Render > Clouds. This will give you the same random cloud pattern as above.

Step 4:

Now set the opacity of your layer to Overlay and 30% transparency. In some instances this would be enough, but for our needs we want it even smokier looking!

So go to Filter > Sketch > Chrome and use default settings of 4 and 7 for detail and smoothness respectively. Actually you can probably mess around with those if you want, but the defaults seem to be fine.

When you're done, the result should look a lot smokier (once its overlayed at 30% transparency that is). You can see the result in the background of the next screenshot.

Step 5:

Now before we can start making glows, we need to have something to glow. Here's where we break out the pen tool. If you have used the pen tool much I suggest playing around with it a little. There are some tricky things you can do with shortcuts, but for this tutorial you don't need those.

In fact all we want to achieve are some nice curves. Fortunately this isn't too hard. I find the trick is not to use too many points. Instead rely on the Pen Tool's natural curving and drag the mouse out for each point so you get a big angle. In this S-curve shown above, I've only used three points, the starting point, the end point and one in between to give it the bend.

Step 6:

Once you have a nice curve, create a new layer. Then click on the Paintbrush Tool (B) and choose a very thin, hard brush. As you know, soft brushes are the blurry ones and hard brushes are more solid. In this case I suggest using a thickness of 3.

Note that you can have any color selected as your brush color because we'll go over it with a layer style shortly.

Step 7:

Now switch back to the Pen Tool. You must switch tools in order to do this next bit.

Then right-click and select Stroke Path. A little dialog box will appear as in the screenshot. Choose Brush and make sure there is a tick next to Simulate Pressure. This is important as it will give your curve tapered ends which will make it rock!

Next right click again and select Delete Path.

Step 8:

You should now have something like the above. Just a thin, cool swishy thing.

Step 9:

Now we add some glows. The easiest way to make our glows is to use layer styles. And the best way to tell you what layer styles to use is to tell you to download the sample Photoshop PSD from the bottom of this page and then open it up and look through them there.

In a nutshell, I've added two sets of glows. To do this I first use Outer Glow and then because I want a second glow, I change the Drop Shadow settings so that it becomes a glow (you can do this by reducing the Distance and changing the blend mode to something like Color Dodge)

Oh and also I've used a Color Overlay to make the item white so that its like the center of an intense glow.

Step 10:

So now you have the same line but with a cool glow coming off it. The beauty of using a layer style is that you can copy and paste it to other layers. To do this you just right-click the layer and select Copy Layer Style then create a new layer and right-click and choose Paste Layer Style.

Step 11:

So now repeat the same process a couple of times to make more squiggly lines.

In this instance, I made one a little thicker by changing the paint brush size before I did the Stroke Path bit of the process. I also made a third line and erased part of it and sorta made it join the other two to look like a cool triangular shape.

 

Step 12:

Here I've added some text in and applied the same layer style to the text layers.

It's important to pay lots of care and attention to your text. When you're first starting out, use simple fonts and play with spacing between letters, words and sizes. You can achieve a lot with just some small tricks. Here I've contrasted the three words by making Glow a lot larger and in regular casing, then made Advanced and FXmuch smaller, with greater space between the letters and all caps.

You can control spacing with text using the Character window. If it isn't already open go to Window > Character and it should appear. Mess about with the different settings until you learn what each controls.

Step 13:

Now we add some particles. To do this, create a new layer then select a tiny paint brush - size 3 - and just paint some dots on. It helps if they are clustered towards the center of the glow so that it looks like they are emanating from there.

You can make some of the central ones larger by doubling over on them with a second paint brush dab.

Then paste our Glow layer style on to that layer too!

Step 14:

Now that's looking pretty cool, but it will look even cooler if we give it some subtle coloring instead of this super gaudy red.

So create a new layer, and using a radial gradient, draw a blue to white gradient as shown.

Step 15:

Then set that layer to a blending mode of Color and change the opacity to 50%.

You'll see that it turns the image kind of bluish. I think that's looking much cooler already, but just to go that extra step I also created a couple of extra layers, one with some faint yellow and one with faint purple. You can see them in the screenshot above.

I set each layer to blending mode of Color and thin opacities so that they all fade together.

Step 16:

And there you have it: advanced glow effects with a cool color blend and subtle smoky background combined make for a pretty great effect.

Just remember to experiment with settings and try applying the glow to different things to see how it turns out. And try different color combinations, some surprising combinations turn out really beautiful. Good luck!

Sample PSD

Download the PSD for this tutorial

Java Programming Tutorials

Here is new tutorial for Newbie Java Programmer. Actually, it is not my specific specialty, due to several demand from my friends. But these are former tutorials from Java Sun Company which could be free downloaded (Open Tutorial).

To guarantee you're looking at the latest version, I invite you to read the tutorial at its permanent Java Sun Company home: http://java.sun.com/docs/books/tutorial/.

Here you can through download the Archive of formal Trails.

Archive	Compressed / Uncompressed	HTTP Download
Java SE Tutorial (updated to JDK 6) (last updated August 1, 2007)	34.0 MB / 55.4 MB	tutorial.zip
Java SE Tutorial (Basics, Specialized and Swing (50%) updated to JDK 6) (last updated November 10, 2006)	26.2 MB / 49.6 MB	tutorial_apr_30_07.zip
Java SE Tutorial (Basics and Specialized updated to JDK 6) (last updated November 10, 2006)	26.2 MB / 42 MB	tutorial_nov_10_06.zip
Java SE Tutorial (The Basics updated to JDK 6) (last updated Aug 4, 2006)	18 MB / 32 MB	tutorial_aug_4_06.zip
Java SE 5.0 (Tiger) Tutorial (last updated Dec 23, 2005)	15 MB / 25 MB	tutorial-5.0.zip

Enjoy the tutorials.....keep trying Newbies and Beginners!!!

My Temporary Resume

Dear Sir/Madam,

My Name Ikhmatiar, Now I'm living at Bandar Tasik Selatan, Kuala Lumpur. Currently I am studying UTHM ( Universiti Tun Hussein Onn Malaysia ) Parit Raja, Batu Pahat, Johor. I have 2 year part time working experience as a Graphic Designer, web Designer and Flash designer in software house and I have extensive working experience in Graphic Design, Flash, and Web Development. for your consideration, some of the project I have completed could be found in this link:

International ISESCO.exe

and

www.imamsuprayogo.com
www.mudjiarahardjo.com

and my last portfolio is as i posted in first posting which logo designing for Faculty of Science and Technology of UKM.

And I will send my CV and portfolio's documentation attached to your mail.

Thanking you in advance & look forward to hear from you soon.

Regards
Ikhmatiar

The Day of Resurrection

The Day of Resurrection - it looks like awful picture. this picture just abstractly illustrate how the day of judgement will be. but, everything is has been explained by our prophet that The Day of Resurrection is something which we haven't see it before and each person has different condition as they did in the world before.

you can download the psd source of this picture from link below.

download

3D Mix Vector

This is an example from 3D mix vector or typically called 3D vector. Actually this design graphic just combining between 3D software and 2D software (using photoshop is better). As you see at the picture, building and lines are seeming like not slurred due to diverse in design stuff. But you will find something different and interesting when you designed different design stuff. if look for this tutorial, i will post latter. so be patience....

Free Vector Picture Octopus

Today is your luck day, friend. It’s free octopus day from ClickPopMedia! So step up and download yourself an octopus.

Download the Vector Octopus (.ai and .eps)

Physics in ActionScript 3: Box2DFlashAS3.0

I wanted to try something fun with Flash this week, so I did a quick search for “Flash Physics Engine.” Lo and behold, I struck gold. Box2DFlashAS3 is an open source ActionScript 3.0 conversion of the C++ Physics Engine Box2D. I’m very impressed with its well coded structure and easily implemented nature. I learned a few new things that will change how I code forever just by reading through their example files.

Still, they have limited resources right now as far as help documentation goes (”Please refer to the source code from the examples provided to get an idea of how to use Box2DFlash in your projects.” — that’s the ReadMe.txt that comes with it… not very helpful,huh). I thought I might give you an example of my own and walk through it step by step.

That was the thought, but it has taken me all weekend to understand the engine well enough to explain how it works. The beauty of it though, is you don’t have to understand how it works to use it.Now to get right into it then! First of all, in order to do anything with Box2DFlash you’re going to have to include most (if not all) of the files. If you have the 349KB folder “Box2D” in your project folder, then your includes will work just like this:

// Classes used in this example

import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Dynamics.Joints.*;
import Box2D.Dynamics.Contacts.*;
import Box2D.Common.*;
import Box2D.Common.Math.*;

Easy.

Now you have to create a b2World object (source code of the class is in Box2D/Dynamics/b2World.as). The world object is the entire body of the engine. Everything is contained within it once your are done.

NOTE: The brain of the engine is b2BroadPhase.as and the heart is the Step() function withing the world object. Don’t go messing with the brain (b2BroadPhase.as) ever. You will totally mess up the engine.

The world object constructor requires 3 things:
1.) A coordinate system in the form of a b2AABB class object.
2.) A vector that defines gravity. That will be in the form of a b2Vec2 class object.
3.) A boolean variable that defines whether objects “sleep” or not. (I recommend you make it true, that they can sleep)

// Create world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.minVertex.Set(-1000.0, -1000.0);
worldAABB.maxVertex.Set(1000.0, 1000.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2(0.0, 300.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
m_world = new b2World(worldAABB, gravity, doSleep);

My examples are not my own here. The code I’m showing is an excerpt from the “Hello World” code they provided with the engine.

After creating a world object you have to bring it to life by setting its heart to beating:

// Add event for main loop
addEventListener(Event.ENTER_FRAME, Update, false, 0, true);

public function Update(e:Event):void{
m_world.Step(m_timeStep, m_iterations);
}

Running the Step() function every frame will update all the Body Definitions you add to your world.
As of right now this world is empty though. In order to add balls and boxes and any strange polygonal shapes you can think of, we need to create Body Definitions for them.

A Body Definition consists of 2, 3, or 4 things.
1.) A Shape Definition.
2.) An (x,y) position.
optional:
3.) Rotation (in radians)
4.) A pre-made Sprite object.

In the example flash movie at the beginning of this post you will notice that all the shapes are simple. That’s because everything is being redrawn every frame with only lines and no fill. That’s right, EVERYTHING is made in code. Nothing was drawn by hand.
If you want your game, or whatever, to have a little more character then that example movie, then you will probably want to associate hand made Sprites with your Body Definitions.

In the “Hello World” example, they use Sprites to display their objects. You could leave them invisible too if you really wanted. Either way they will still be accounted for in the calculations.

On to something very important. What is a Shape Definition!? We have 3 types of shape definition and they all extend the base b2ShapeDef class.

First we have the b2BoxDef class. The b2BoxDef has 4 important properties:
1.) Extents - this is a vector that essentially goes from one corner of the box to the exact center. In other words, half the width and hight. (box is a rectangle)
2.) Density - in the collision equations we use density * area = mass
A density of 0 (zero) or null will make the object static and it will never move in the case of a collision or gravity.
3.) Friction - this is used to calculate the friction between 2 objects… you should keep it between 0.0 and 1.0
4.) Restitution - this is the bounciness of the object. Should probably also stay between 0.0 and 1.0

The b2CircleDef has only one differences in it’s properties. Instead of Extents it has Radius, which is easy to remember.
The b2PolyDef has an array of (max 8) vertices instead of Extents or Radius. These vertices are just b2Vec2 vector objects.

Now Adding a bunch of objects to our world should be easy:

var bodyDef:b2BodyDef;
var boxDef:b2BoxDef;
var circleDef:b2CircleDef;

// Add ground body
bodyDef = new b2BodyDef();
boxDef = new b2BoxDef();
boxDef.extents.Set(1000, 100);
boxDef.friction = 0.3;
/*Notice that the ground object has no density like the later
definitions. That’s because it is static and we don’t want it
effected by any forces.*/
bodyDef.position.Set(320, 400);
bodyDef.AddShape(boxDef);

// Add sprite to body userData
/*We have a Sprite object in the library called PhysGround. Here
we are associating that with our body definition.*/
bodyDef.userData = new PhysGround();
bodyDef.userData.width = boxDef.extents.x * 2;
bodyDef.userData.height = boxDef.extents.y * 2;
addChild(bodyDef.userData);
m_world.CreateBody(bodyDef);

// Add some objects
for (var i:int = 1; i < 20; i++){
/*We are going to re-use the same bodyDef from before.
It doesn’t matter now, because it’s already been copied and stored
in our world object.*/
bodyDef = new b2BodyDef();
// Box
if (Math.random() < 0.5){
boxDef = new b2BoxDef();
boxDef.extents.Set(Math.random() * 15 + 10, Math.random() * 15 + 10);
boxDef.density = 1.0;
boxDef.friction = 0.5;
boxDef.restitution = 0.2;
bodyDef.AddShape(boxDef);
/*We have a Sprite object in the library called PhysBox.*/
bodyDef.userData = new PhysBox();
bodyDef.userData.width = boxDef.extents.x * 2;
bodyDef.userData.height = boxDef.extents.y * 2;
}
// Circle
else {
circleDef = new b2CircleDef();
circleDef.radius = Math.random() * 15 + 10;
circleDef.density = 1.0;
circleDef.friction = 0.5;
circleDef.restitution = 0.2
bodyDef.AddShape(circleDef);
/*We have a Sprite object in the library called PhysCircle.*/
bodyDef.userData = new PhysCircle();
bodyDef.userData.width = circleDef.radius * 2;
bodyDef.userData.height = circleDef.radius * 2;
}
bodyDef.position.x = Math.random() * 400 + 120;
bodyDef.position.y = Math.random() * 100 + 50;
m_world.CreateBody(bodyDef);
addChild(bodyDef.userData);
}

That’s great isn’t it? It’s really not that hard to add a whole bunch of objects to your world. You should know that the Step() function that we added earlier will only take care of moving and rotating our body definitions. If we have sprites to represent those definitions then we need to update them manually… they made the code for that easy and you can copy and paste it almost exactly into every one of your projects.
We just have to rewrite our Update function from before:

public function Update(e:Event):void{

m_world.Step(m_timeStep, m_iterations);

// Go through body list and update sprite positions/rotations
for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
if (bb.m_userData is Sprite){
bb.m_userData.x = bb.m_position.x;
bb.m_userData.y = bb.m_position.y;
bb.m_userData.rotation = bb.m_rotation * (180/Math.PI);
}
}/*This is an extreemly clever way to do this, and I suggest you copy it exactly in your own projects.*/

}

That’s it for now. We have objects in a world that can collide with each other and are affected by gravity. There is still a lot more to talk about, but I am just walking you through the “Hello World” first. We still need to cover Joints, Pulleys, Gears, Compound Shapes, Forced rotation (like cars tires), and a lot more… I doubt I will be able to cover all these topics anytime soon, but I will definitely write more tutorials on this physics engine in the future.

You can download my copy of the “Hello World” example project with all of my comments included (there is almost no commenting in the original).

Download Hello World w/ comments.

You can get all of the library files needed for Box2DFlash at their site. It’s free.

Credits:
Box2D - Erin Catto ( http://gphysics.com/ )
Box2DFlashAS3 - Matthew Bush (Flash ActionScript 3.0 port of Erin Catto’s work)