Web Design Resources

3D text in photoshop cs2

2009-07-27T10:48:00.000-07:00

my version in creating simple 3d effect in photoshop cs2

ok first of all is to look for a font style that is thick or fat, well it could also work in smaller fonts but the effect is better in big fonts, my page size is 500x500 pixels with a 72 px resolution....

using the type tool i type 3 and D seperately

so now we have 2 layers, 3 and D

next we add gradient to the text, make sure that the edge are darker, you can try later any color
but just for sample i use #840000 to #ff1a00 for the gradient and inner shadow with this settings

and this is what your text should look like, apply thesame settings for layer D

now for the 3d effect, click on layer 3.....
hold ctrl + alt key, then press alternately UP arrow key and RIGHT arrow key
do not stop on pressing ctrl + alt... just use the arrow keys to make the direction of the 3d effect, this is what it should look like, i created about 30 layers

ctrl + alt will copy the layer, so we use directional arrows alternately to make the effect
after creating copies of the layer, select layer 3 including the copies ang group them (ctrl + G)

do thesame for layer D but this time use UP and LEFT arrow keys, the effect will look like the D is leaning to the left just make sure to click it alternately and here is what it looks like so farall we need to do is add gradient to the top layers for each group, you can add any color you want.... and here is what i came up with and we are done
to make it a bit more fun, just copy the topmost layer and add some effects to it, here i added the glass effect from the last tutorial and added some patterns on top of it, and added a drop shadow on the bottom layer

special thanks to my family, my fans and every body who still don't know me hehehe.......

How to create a dramitic black and white images

2009-07-24T07:40:00.000-07:00

this is another tutorial that i made, a friend (ryan gd ho) ask me about how to make a good grayscale image...

i did several approach but this is what i came up with and very simple too...

ok first is copy the original layer which is the colored one and name it layer 1, the press ctrl + U and apply this settings, just put the pointer thingy to the left to make it greyscale look

and this is the image (layer 1):
after makin it to grayscale, copy the image and name it layer 2 and this should be on top of layer 1 and then click ctrl + L and make it darker, just play with how much dark you want

now set layer 2 to overlay

and its done.....
making this tutorial takes longer than making the effect. you can adjust layer 1 to make it lighter just by using levels (ctr + L) and make it the image a bit dramatic, or you cand add some effects, just copy layer 2 and add poster edges or something like that or maybe add a colored text

special thanks to ryand prader hahaha

shiny web2.0 button tutorial using photoshop cs2

2008-10-14T11:18:00.000-07:00

My first ever tutorial, a friend ask me to make a tutorial on nav button with hover effects using imageready but i was too busy and takes time to make as i am lazy in making tutorials lol.... but i have decided to make my first tutorial to all of you, its a simple tutorial and here i will show you how to make a simple but nice button... here is what it should look like, i hope...

Ok here we go, first thing is we have to create a new canvas, any size you like but make sure to set the resolution to 72 px/in as it will not look like this one if its a little higher, but you could try to different resolution and see what it looks like, here i made a 400 x 400 canvas with white background, click shift+d to reset your foreground and background color settings in your tools, choose the rounded rectangle tool and set the radius to 15 px or any value that you think looks greate, name the layer as shape 1... here's mine, this will be our base layer as we have to add some new layer on top, be sure to follow the corroect layer sequence

looks pretty awesome huh? lol

and we add some gradients, the colors are #6d0019 and #a90329, so now we have this one

wow?

now the fun part, we add a new layer on top of it, select shape 1 on the layer palette and click ctrl+j, now we have a new layer named shape 1 copy which is a copy of our base layer, rename the layer stripes. now go to layer style and add this settings:

2. deselect gradient overlay

3. you should have a stripe pattern but its ok if you don't add the stripes

here is what our button looks like so far

nice!!!

select again our base layer ang ctrl+j to copy it and rename it glass... so now we have three layers which is glass on top followed by stripes then shape 1 moving on.... here is what make's our button looks pretty cool!!! the tricky part.... select the glass layer and apply these settings

for the above gloss contour

well those are pretty much it i think... anyway here's what it should look like pretty cool right??? now we can add some text... using the horizontal type tool to add our text, type "click here" for our text on top of the glass layer, select impact as your font, add gradient to your text or you can just use a white text, here i use these vales for my gradient: #feae31 and #efe457 then add a drop shadow with this settings:

and here's our final button with the added font, you can add some graphics on the side like an arrow or something like that or some small text on top

you can use the settings of the glass buttons on my free samples here Free Web Buttons
hope to see you on the next tutorial

thaaaaannnnnnkkkkkssssss!!!!!!!!

Free Website psd templates

2008-10-07T12:19:00.000-07:00

Here is my new free psd templates, add some of your ideas to make it much more interesting, have fun....

Simplicity is the ultimate sophistication.
- Leonardo da Vinci

Free Web 2.0 Templates

2008-06-03T22:36:00.000-07:00

FREE website templates for personal or professional use. Download the .psd files for free.

Free Web Buttons

2008-05-25T20:39:00.000-07:00

Enhance your website with these quality buttons. download the .psd files for free.

Nav menu buttons with hover effect, download for free.

DVD Cover Design, CD Rom, Box Designs etc...

2008-05-21T20:03:00.000-07:00

Want to promote your products, here are a sample of my designs to advertise your products.

Free Header Templates

2008-05-21T17:25:00.000-07:00

Here are some free header templates, feel free to use it.
enjoy!!!....