Tuesday, June 21, 2011

Flip Animation

By Magesh Kumar   Posted at  2:37 AM   Android No comments

Main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical" android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:text="@string/hello" />
      <ViewFlipper android:id="@+id/viewflipper"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <LinearLayout android:layout_width="fill_parent"
                  android:layout_height="wrap_content" android:orientation="vertical">
                  <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:text="First Screen" />
                  <Button android:id="@+id/button1" android:layout_width="fill_parent"
                        android:layout_height="wrap_content" android:text="Flip to second page" />
            </LinearLayout>
            <LinearLayout android:layout_width="fill_parent"
                  android:layout_height="fill_parent" android:orientation="vertical">
                  <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content" android:text="Second Screen" />
                  <Button android:id="@+id/button2" android:layout_width="fill_parent"
                        android:layout_height="fill_parent" android:text="Flip back" />
            </LinearLayout>
      </ViewFlipper>
</LinearLayout>

Main.java
package com.magesh;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;

public class Main extends Activity {
               
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final ViewFlipper MyViewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
        Button button1 = (Button)findViewById(R.id.button1);
        Button button2 = (Button)findViewById(R.id.button2);

        Animation animationFlipIn  = AnimationUtils.loadAnimation(this, R.anim.flipin);
        Animation animationFlipOut = AnimationUtils.loadAnimation(this, R.anim.flipout);
        MyViewFlipper.setInAnimation(animationFlipIn);
        MyViewFlipper.setOutAnimation(animationFlipOut);
       
        button1.setOnClickListener(new Button.OnClickListener(){

                                                @Override
                                                public void onClick(View arg0) {
                                                                // TODO Auto-generated method stub
                                                                MyViewFlipper.showNext();
                                                }});
       
        button2.setOnClickListener(new Button.OnClickListener(){

                                                @Override
                                                public void onClick(View arg0) {
                                                                // TODO Auto-generated method stub
                                                                MyViewFlipper.showPrevious();
                                                }});
    }
}

In res/anim/flipin.xml
Flipin.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
      android:interpolator="@android:anim/decelerate_interpolator">
<translate
      android:fromXDelta="-100%"
      android:toXDelta="0%"
      android:duration="500" />
</set>
Flipout.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
      android:interpolator="@android:anim/decelerate_interpolator">
<translate
      android:fromXDelta="0%"
      android:toXDelta="100%"
      android:duration="500" />
</set>

X-Files Effect

By Magesh Kumar   Posted at  12:35 AM   Photoshop No comments

You've seen X-Files, haven't you? And you liked the effect they use for their title? Something very mysterious, right. Well, it isn't as complex as you might think. All you need is Photoshop and a little bit of patience.
Start with a RGB image and make the background black. Type something. If you are using Photoshop 4.0, hit Ctrl-E (Cmd-E on Mac) to merge type layer down. Now, open Channel Palette (Window>Show Channels) and  drag any of the channels to a New Channel icon. This will create channel #4. Double click it and rename it to "original type".
Drag original type channel to a new channel icon to duplicate it. Double click channel #5 and rename it to "white". Then Ctrl-click (Cmd-click on Mac) on the channel to load it as a selection. Now we have to expand it a little. Use Select>Modify>Expand with setting of 2 pixels. Edit>Fill with white. Remove the selection (Select>None).
Filter>Blur>Gaussian Blur... with setting of 2
Drag the white channel to a new channel icon so we can have one more channel. Double click channel #6 and rename it to "yellow". Ctrl-click it to get the selection. Again, Select>Modify> Expand... and enter value of 2. Fill it with white and remove the selection and gaussian blur it all by 3.
Finally drag yellow to a new channel icon. Rename it to "green", Ctrl-click it, and expand by 6. Fill it with white, deselect, then blur by 10 pixels. Now, preparations are ready. Let's do it.
Switch to channel RGB. Select>Load Selection... choose channel "green". Now pick some nice green color as foreground color. Here, this setting is used R:0 G:255 B:0
Edit>Fill... with foreground. Do the same for the "yellow" channel but use R:128 G:255 B:0 color.
Repeat the process for the "white" channel but use plain white color.
Finally, load "original type", Select>Modify>Contract by 1 pixel and fill with black.
You are X-Filed!


Oil Effect

By Magesh Kumar   Posted at  12:27 AM   Photoshop No comments

1.
Start a new file.
 File | new...
Choose a suitable size and make sure you are in RGB mode and that the resolution is set to 72 dpi. Use Black as background color.
Type in a optional text with white color.
Layer | Type | Render Layer
Blur the text with 1,0 pixel. Filter | Blur | Guassian Blur....


2. Layer | Flatten Image
Image | Rotate Canvas | 90 CW
Filter | Stylize | Wind... Check Wind andFrom the left
Filter | Stylize | Solarize
Image | Rotate Canvas | 90 CCW






3.
Now, colorize the image by doing this:

Image | Adjust | Hue/Saturation... CheckColorize and test these settings:
Hue: 23, Saturation: 67 Lightness: 0

Dripping Slime

By Magesh Kumar   Posted at  12:16 AM   Photoshop No comments

 
Use this tutorial to create rust, slime, or blood dripping from holes, pipes, or text.
1
Create a new image with equal height and width. For example,
 500x500 pixels. 

While holding down
 Ctrl, click on the layer you want the dripping applied to. This will select the layer's opacity.

In this case I've selected some text created with the type tool.
2
Press
 Q to enter Quick Mask Mode, and then press Ctrl+A to select all. 

Edit > Transform > Rotate 90o
 CW
3
Then, in the menu go:
Filter > Stylize > Wind...
 
Press
 OK.

If you want the rust dripping farther down, press
 Ctrl+F to repeat the Wind filter.

Edit > Transform > Rotate 90o
 CCW

4
Now, press
 Q to exit Quick Mask Mode. In the Layers window, click on the layer right under the text, or object you are applying the drips to. In this case it's the layer named Background. Now, click on theCreate New Layer button  , to create a new layer. 

Select a Rust color as the foreground color, and then press
 Alt+Backspace to fill the selection.

Press
 Ctrl+D to deselect.


Monday, June 20, 2011

Crystallize text

By Magesh Kumar   Posted at  11:51 PM   Photoshop No comments



Like all other times we create an black image and write with an white big bold font somthing on it! Like all my images I used the word GIZMO.

NNow we use the old great Effect WIND. First we make an WIND to the right. Then to the left. Then to the right (fading it a litte bit) and then to the left (fading it again!). Now it looks like this:



     Step 


Now we make the same steps again! But first we rotate the image 90°. Then we make WIND ;)
It should looks like this now:



Looks pretty nice, or not?
 
Do you remember the froze text. We do the same here.
 

We convert the image to grayscale, then to indexed colors and the last step is?
Right -> We use the Color Table and create a bacltoblue table.


My own Black to Blau Table isnt perfect ... you see? But it is soo late ... I cant do it better this time ;)

Use an gaussian blur with radius 0,5 for the last step. Finish!

Friday, June 17, 2011

Creating Grid Lines

By Magesh Kumar   Posted at  10:35 PM   Photoshop No comments

Creating grid lines with photoshop is easy, and can be used to make your imagery look tight and froody.

STEP 1


Go into the channels window and create a new channel. Make a square selection about 20 pixels wide with the marquee tool. Fill it with white.
quick              
TIP
Pressing the Alt and Backspace keys at the same time will automaticly fill the current selection with the foreground color.


STEP 2


In the menu, go:
SELECT > MODIFY > CONTRACT > Contract by: 1 pixel 

Then, fill the selection with black. It will now look like a small white outlined box. 


STEP 3


With the Marquee tool still selected, nudge the selection up and to the left, 1 pixel.

In the menu, go:
EDIT > Define Pattern 


STEP 4


Clear the selection (Ctrl-D) and create a new channel.

Open the Paint Bucket options window and set the contents to PATTERN

Fill the new channel by clicking with the paint bucket tool, and a grid texture will magically appear. 


STEP 5


Drag the grid channel onto the "Load channel as selection" button. [] 

Go to the layer window. Create a new layer and fill the selection. (Alt-Backspace) 


STEP 6


Enjoy the attractive imagery you and your new-found skills have just created and celebrate over a steaming bowl of re-digested monkey-brains.

Monday, June 6, 2011

Gradient dividers in Android

By Magesh Kumar   Posted at  3:35 AM   Android 1 comment

Many of Android’s screens use attractive dividers with gradients that fade from black to white to black.  Here’s how to create one of your own.

1. Create a file called “black_white_gradient.xml” in /res/drawable. Paste this into it.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#00000000"
      android:centerColor="#FFFFFFFF"
      android:endColor="#00000000"
      android:angle="0" />
</shape>
2. Create a view in the target layout and apply the gradient as the background.  The “black_white_gradient” in “@drawable/black_white_gradient” refers to the file name of the shape above.
<View android:id="@+id/divider"
    android:background="@drawable/black_white_gradient"
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_below="@id/someOtherThing" />

Back to top ↑
Connect with Us

What they says

© 2013 MaGeSH 2 help. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.