photoshop

Create Web 2.0 Style Buttons in Photoshop

Ever wonder on how to create a web 2.0 style buttons with such nice glowing effects? Today I’m gonna show you how to create one.

First, we’ll create a 100 by 40 pixel image. Open Photoshop (I use CS4) then File > New then specify the width to 100 px and 40px in height.

Step 1

Select Rectangular Marquee Tool on the toolbox or just press CTRL+A to select the entire work area.
Then, click Gradient tool on the toolbox. (Ctrl+G) or if it is not shown press press CTRL+G then Shift+G to show.

Pick your desired gradient color. I pick fading color blue.

Step 2

Continue reading »

The EMO thingy!

I was looking around my friendster account and I found my old, old blog way way back October 2008. There’s pretty number of posts there and I was reading them. My friend ask me about certain post about “emo”-ish thing. I wonder what is it and I found out that it was the wallpaper I’ve created back from my old work.

It was a pretty free time there and I don’t have any job to do so I decided to draw human-like creature but I really don’t draw, at all haha.. My office mate seen my drawing and said to make it in photoshop instead. Maybe they didn’t like my drawing that’s why. So, the Photoshop loads and I started my creation. It took me almost 1 hour to finish it and I am amazed to the output.

EMO Wallpaper

Maybe it looks like newbie to you but for me its such a cute little emo-ish thing. hope you like it.

Edit/Alter GIF Animation in Photoshop

Recently I posted about creating simple animation in photoshop. Today, I will show you how to edit GIF Animation.

First, Open Photoshop (CS4) then click File > Import > Video Frames to Layers…

Step 1: Open existing GIF Animation

WARNING: You cannot use this feature without the QuickTime 7 installed on your system. Though we are not using this format, Photoshop still required this and I don’t know why.

Next step, you see that GIF format is not on the list but it’s okay, we’ll just copy and paste the location and filename After you select your existing gif animation, a window will open for preview and for further settings that you want to import.

Step 2: Select Range to Import

Since my work has only 2 frames then I import all the frames. Click OK to continue. As you see, all frames are imported and treat each frame as new layer. Go on and add more frame if you want

All frames are imported

As an example, I added new frame and create a text field.

Edit or alter animation

Added some layer

Then, if you’re done, just open the animation window from Window > Animation.  Then after, compile the animation by saving your work by clicking File > Save for Web and Devices.

A window will open, click on the GIF as file format and adjust the setting according to your need. If you want to view further instruction, just read on my post about creating a GIF animation in Photoshop here.

The final output

With this, you can also import movies to save as gif animation. Just have a proper codec and be sure to lower down the final image resolution as it may cause too much bandwidth to load. And, photoshop limits animation frame to 500

Have a nice day!

Create GIF animation in Photoshop

You’ve created a nice graphics on Adobe Photoshop and you’ve decided to animate it. But how?

I’m using Adobe Photoshop CS4, I don’t know if the previous version of Photoshop has an Animation capability.

So, to start: open Adobe Photoshop

Create your desired graphics. I’ve created a simple red-green light animation. See screen shot to know much better than my explanation. I suck at explaining if you all know :p

GIF Animation: Frame 1

GIF Animation: Frame 2

Create your first frame. This frame will be the initial graphics you will see on your animation. Then create your sencond frame.

Photoshop: Animation Window

Add frame to animate

After you create all frames needed for you animation, Open Animation window. Click

Window > Animation

The animation window will then show on the bottom of the Photoshop window.

See that theres already a first frame. This frame is the current frame visible on your work area.

click new layer in the animation window and select your second frame.

Adjust the speed

You can adjust your frame speed by clicking the number on the animation window.

GIF Animation: Looping

If you want to loop your animation click on the drop-down box on the left side of the animation controller.

GIF Animation: Save your animation

After you finalize your work. Save it by clicking File> Save for Web and Devices

A preview window will then pop out.

GIF Animation: Save image

I assume that you know this windows. Choose GIF as your file format and in the animation field click your desired loop preference (Ex. 3 times, forever, etc.)

After you set everything. Click Save. Now you’re done. I will include my finished graphics here as well as the psd format.

GIF Animation: Output

heres the link:

http://files.ishiefloyd.com/public_files/photoshop/SimpeGIFAnimation.zip

Digital Bokeh in Photoshop

I’ve been fond with bokeh the last day but I don’t have any SLR camera. So, I’ve searched the net and I found a cool tutorial to make some cool digital bokeh in photoshop.

This is my final result:

Digital Bokeh

Thas was quite easy and I found it very fun  

To create your own digital bokeh just click on this link or copy-paste this into your browser: 

http://abduzeedo.com/awesome-digital-bokeh-effect-photoshop

I’m sure that you’ll be liking this too Have fun creating your bokeh!