Photoshop: Create Web 2.

0 Button

Buttons Photoshop tutorials are probably one of the hottest categories in any Photoshop tutorials site and since Web 2.0 is such hot topics now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Tutorial after jump.

Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call bg01. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

Call up the Blending Options of bg01 and adjust the following styles: Drop Shadow Opacity: 40% Distance: 0px Spread: 0% Size: 6px

Gradiant Overlay Color stop: 0%, #d00031 Color stop: 100%, #ff2b5d

Hold CTRL, left click on bg01 Layer Thumbnail to select its shape. Go Select -> Modify > Contract and enter the value 2px. This will shrink the selected area by 2 pixel.

Create a new layer call bg02 and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on bg02 to launch up the Blending Option and tweak the following style. Gradiant Overlay Color stop: 0%, #c6002f

Color stop: 100%, #c6002f

Create another new layer for text, call it txt. Insert your buttons text. Ill use an alphabet to represent. The fontstyles Im using here are as follow: Rounded Arial Bold 150pt

Same, after deciding your text, double click on txt to launch the Blending Options and tweak the following styles. Drop Shadow Opacity: 25% Distance: 0px Spread: 0px Size: 5px

Inner Shadow Opacity: 10% Distance: 0px Choke: 0 Size: 10px

Bevel Emboss Depth: 1px Direction: Down Size: 0px Softten: 0px Highlight Mode Opacity: 32% Shadow Mode Opacity: 32%

Gradiant Overlay Color Stop:0% #d2d2d2 Color Stop:100% #f0efef

Button is almost done. Lets give it a little glow over the top part. Hold CTRL, left click bg02 Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter15px for the radius. Create a new layer, call it glow and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like the image below.

Something Extra..

Glass Button in Photoshop

Picture 1. Web 2.0 style glassy button.

01.11.2007 Category: Photoshop

These days glass buttons seem to be very popular. You can find glass buttons in Windows Vista and all around the Web. Other popular buttons are metallic and plastic buttons. All these buttons have one thing in common: They are all shiny. Some people call these kinds of buttons Web 2.0 buttons. Here I cover the creation of two different glass buttons in Adobe Photoshop CS3. Both glass buttons utilize the same principles. Once you have completed this tutorial you should be able to apply the same principles and

create many different kind of glass buttons. In this tutorial I give you the exact measurements and values to make things easy but feel free to try other settings as well.

Rectangular Glass Button

Picture 2. Create black basic button on the new layer. Create a new picture the size of which is 400 x 180 pixels. Create a new empty layer. Activate the Rounded Rectangle Tool and set the Radius to 10 px in the Options panel. Select black color and create rounded box (140 x 50 pixels) on the new layer according to picture 2. (You can see the size of the box in the Info panel while drawing.) Probably the most common way to create a glass button in Adobe Photoshop is to use layer effects. Next we are going to apply several different layer effects to the button to make it more glassy:

Gradient Overlay Inner Glow Stroke Drop Shadow

Gradient Overlay

Picture 3. Gradient Overlay settings in Photoshop.

Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn Gradient Overlay on. Change the color of the right end of the gradient to 50% gray (#808080) according to picture 3.

Inner Glow

Picture 4. Inner Glow settings in Adobe Photoshop. Turn Inner Glow on. Change the color of the glow to pure white. Change Opacity to 40%. Change Size to 8 pixels. The button should now look like in picture 4.

Stroke

Picture 5. Stroke settings. Turn Stroke on. Change Size to 1 pixel and color of the stroke to 50% gray (#808080). The button should now look like in picture 5.

Drop Shadow

Picture 6. Drop Shadow settings.

Turn Drop Shadow on. Change Distance to 0 pixels and Size to 8 pixels. The glass button should now look like in picture 6. Click OK to close the dialog.

Button Text

Picture 7. Button text. Create the button text with Type Tool. Select white color for the text and create 1 pixel wide black stroke for it. Align the text to the middle of the button. The glass button should now look like in picture 7.

Highlight / Glare

Picture 8. White rounded rectangle will become the highlight.

Picture 9. Complete glass button in Adobe Photoshop. When creating a glass button the highlight (reflection of the light source) is the most important element. Create a new empty layer on top of the text layer. Select white color and create new Rounded Rectangle (136 x 23 pixels) on the new layer according to picture 8. Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn "Blend Interior Effects as Group" on. Turn Gradient Overlay on. Change the color of the left end of the gradient to 25% gray (#404040) according to picture 9. Click OK to close the dialog. Change the blending mode of the new layer to Screen and Opacity to 90%. Now the glass button is complete and it should look like in picture 9. This is a black and white glass button but using the same principles you could create a glass button of any color. Part 2: Glass Bead in Photoshop See glass buttons in action. The glass buttons of www.filmgator.com have been made according to this tutorial

Light and Glow Effect In Photoshop

Picture 1. In this tutorial we are going to create the picture above using several different Photoshop effects. Click here to see a larger version.
29.10.2008 Category: Photoshop

In this Photoshop effect tutorial I cover the creation of several different light and glow effects in Photoshop. In this tutorial we are going to recreate picture 1. The effects inpicture 1 consist of smoke, light trails, sparkles, stars and bokeh effects. Luckily it's pretty simple to create each of these effects in Photoshop.

Smoke Effect in Photoshop

Picture 2. Overlay blending mode.

Picture 3. Colorful smoke effect in Photoshop. Let's start with the smoke effect in the background. The smoke effect is created by rendering clouds and coloring them with an overlay layer: A. Create a new image document (600x500px).

B. Fill the background with black color (Edit > Fill...) C. Create a new empty layer (Layer > New > Layer...) and select it. D. Use Elliptical Marquee Tool and make the following selection to the center of the image: Width:
350px Height: 250px Feather: 80px

(you can set these values in the options-panel in the top of the screen when the Elliptical Marquee Tool is selected.)

E. Select black as foreground color and white as background color. Create clouds into the selection
(Filter > Render > Clouds). (Clouds are rendered randomly. If you are not satisfied with the clouds you can just click undo and render them again.)

F. Create a new empty layer on top of the clouds layer and select it. Change the blending mode of the
layer to Overlay like in picture 2.

G. Select #06c2ff as foreground color and #00ff7d as background color. Use Gradient Tool and fill the
new layer with gradient. The result should be similar to picture 3.

Overlay Text

Picture 4. Overlay text. Next we'll create some text on top of the smoke. Use Type Tool to create some text. Change the Blending mode of the text layer to Overlay. Now your image should look similar to picture 4.

Light Trail Effect in Photoshop

Picture 5. Brush stroke along path produces a light motion trail. Next we'll create light motion trails with the help of a Pen Tool. The Pen Tool can be tricky if you don't have previous experience with it. You'll probably need the following tools found from the Pen Tool flyout button: Pen Tool - Use this tool to draw the curve in the first place. You can click and drag to create curves on the fly. Don't worry if the curve is not perfect, you can modify it later. Add Anchor Point Tool - Use this tool if you want to add an anchor point to an existing curve Remove Anchor Point Tool - Use this tool if you want to remove an anchor point from an existing curve Convert Point Tool - Use this tool to convert and move anchor points and to control their handles: Click on any smooth point to convert it to a corner point. Click and drag on any corner point to convert it to a smooth point. By pressing CTRL in keyboard you can move anchor points. Click on the curve to control handles associated with the clicked segment At this point it is just a path. Next we are going to create a light trail out of it.

A. When you are comfortable with the Pen Tool, draw some smooth curve for example like in picture 5.

B. Create a new empty layer on top of the text layer and select it. C. Select Brush Tool. Right-click anywhere on the image and set Master Diameter to 3px and Hardness to 100%. Select white as foreground color.

D. Select Pen Tool and right-click anywhere on the image and select Stroke Path... from the menu.
Make sure that Simulate Pressure is checked and click Ok. Now there is a brush stroke along the path. Let's hide the path. E. Hide the path by unselecting it:

Open Paths window (Window > Paths) Click on Paths window below the path to unselect it.

F. Let's add some glow to the stroke. Right-click on the layer and select Blending Options... from the
menu. TurnOuter Glow on and change the color to #16b5e5. Now your image should look similar to picture 5.

Sparkle Effect Adobe Photoshop

Picture 6. Glowing sparkles along the light trail. Next we are going to add some sparkles along the trail. This is very easy to do. Just select the light trail layer and use Brush Tool to create small dots to it. Use Brush sizes of 1-4px. Now the image should look similar to picture 6.

Motion Blurred Glow Effect

Picture 7. Subtle motion blur effect is added. Let's add some motion blur to the light trail:

A. Right-click on the light trail layer and select Duplicate Layer... from the menu and click Ok. B. Now there are two similar layers and the trail appears brighter. Select the lower layer (original) and
add motion blur to it (Filter > Blur > Motion Blur...) with the following settings: Angle: -30 Distance: 40

C. Change the Opacity of the motion blurred layer to 40%. The effect is pretty subtle but in my opinion
creates nice sense of motion to the image. Now the image should look like in picture 7.

Star Effect in Photoshop

Picture 8. The process of creating a star in Photoshop.

Picture 9. Star effects applied to the image. The next of the Photoshop effects we're going to create is stars. First we are going to create a simple star and then apply some layer effects to it. The following process is illustrated in picture 8.

A. Create a new layer and select it. B. Set foreground color to pure white. C. Set the Brush size to 3px and Brush hardness to 100%. D. Use the Pen Tool and draw 100 pixels high vertical path. (Use info window to see pixel coordinates while drawing)

E. With Pen Tool still selected right-click anywhere on the image and selectStroke Path... from the
menu. Make sure that Simulate Pressure is checked and click Ok. Now there is a brush stroke along the path. Hide the path.

F. Make duplicate of the star layer (right-click on the layer and select Duplicate Layer... from the menu) G. Rotate the new star layer 90 degrees (Edit > Transform > Rotate). H. Merge the two layers into one (right-click on upper layer and select Merge Down from the menu).
I. J. Make duplicate of the star layer. Rotate the new layer 45 degrees.

K. Scale the new layer down to 70% (Edit > Transform > Scale).
L. Change the Opacity of the new layer to 70%. M. Merge the two layers into one. N. Scale the star down to 40%.

O. Copy the layer style from the light trail layer to the star layer (you can copy and paste styles by rightclicking on a layer). Modify Outer Glow by changing the Size parameter from 5 to 2. (Right-click on the layer and selectBlending Options... from the manu and go to the Outer Glow section)

P. Now the star is ready. Make duplicate of the star layer and move stars to suitable locations.
See picture 9.

Bokeh Effects in Photoshop

Picture 10. The final image with many different light and glow effects made in Photoshop. Click here to see a large version.

Picture 11. Photoshop light and glow effects applied to a photo. Click here to see a larger version. The last thing to do in this Photoshop effect tutorial is to add some simple bokeh effects to the image: A. Create a new empty layer and select it. B. Use the Ellipse Tool to create a 50 pixels wide circle.

C. Right-click on the layer, selectBlending Options... from the menu, and add the following layer
effects: Color Overlay: light gray (#cccccc) Stroke: Size: 2px | Position: inside | Color: white

D. Rasterize layer styles: Create a new empty layer below the bokeh layer. Right-click on Bokeh layer
and selectMerge Down from the menu.

E. Add 1 pixel Gaussian Blur to the layer (Filters > Blur > Gaussian Blur). F. Change the Blending mode of the layer to Overlay and Opacity to 14%. G. Create two copies of the layer and place the three bokeh circles as you wish. Picture 10 is the final
image. By using your imagination and combining each effect in Photoshop you can create multitude of different images filled with different kind of light and glow effects. Here are some nice Photoshop effect tutorials

Glass Bead in Photoshop

Picture 1. Web 2.0 style glass button.

01.11.2007 Category: Photoshop

Next i'll show you how to create different kind of glass button. It's going to be round bead and it has some color in it. I use same kind of ideas and methods as on the previous page. You can still use the same picture and create the glass bead next to the black glass button.

Create a Black Bead on a New Layer

Picture 2. Create basic round button on the new layer.

Create a new empty layer and use Elliptical Marquee Tool to select round 80 x 80 pixels area. Select black color and fill (Menu: Edit > Fill...) the circular area on the new layer with black color. Now the button should look like in picture 2.

Gradient Overlay

Picture 3. Gradient Overlay settings. Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn Gradient Overlay on. Select #baff9c as color for the left Color Stop and drag it to 25% location. Select #0e2f00 as color for the right Color Stop and drag it to 75% location. The button should now look like in picture 3.

Inner Shadow

Picture 4. Inner Shadow settings in Photoshop. Turn Inner Shadow on. Change the Opacity to 100%. Change Distance to 0 pixels. Change Size to 30 pixels. Change the Contour to Gaussian preset. Now the button should look like in picture 4.

Drop Shadow

Picture 5. Drop Shadow settings in Adobe Photoshop. Turn Drop Shadow on. Change the color of the shadow to #3a6228. Change the Distance to 0 pixels. Change the Size to 8 pixels. Now the button should look like inpicture 5.

Highlight / Glare

Picture 6. Gradient for the highlight.

Picture 7. Complete glass bead in Adobe Photoshop. Create a new empty layer. Use Elliptical Marquee Tool and select 40 x 20 pixel area. Use Gradient Tool to fill the selected area on the new layer with black and white gradient according to picture 6. Change the Blending Mode of the layer to Screen and change the opacity of the layer to 90%. Now the glass bead is complete and it should look like in picture 7. Buttons created with Photoshop's layer effects are very easy to modify. I recommend you to save the PSD file so you can modify the button later. Part I: Glass Button in Photoshop

PHOTOSHOP BUZLINE BUTTON LOGO ICON

[1]-First of all Open New Document of Custom size,Height & Width 400400 pixels,Resolution 72 & Mode RGB Color

[2]-Now Open New Layer & then create the following shape with the help of Pen Tool,right click select Make Selection

[3]-In Make Selection Feather Radius should 0 pxl,Tick on New Selection & then Ok & your image should look like as shown below

[4]-Now fill the selection with c4a89dcolor & then select Burn Tool shading like as shown below

& create the following

[5]-Now select Dodge Tool

& Highlight the some parts like below this

[6]-Now go to Blending Options,select Drop Shadow & use the following settings Photoshop Technique-How to use the Drop Shadow feature

[7]-Now select Inner Shadow & use the following settings Photoshop Technique-How to use the Inner Shadow feature

[8]-Now Open New Layer & then create the following selection with the help of Elliptical Marquee Tool

[9]-Now fill the selection with f19e14color & then create the following shading with the help of Burn & Dodge Tool & your image should look like as shown below

[10]-Now select Brush Tool & use the following Brush & settings

[11]-Now select da8c18 color in Forground & then create the following shape with the help of Pen Tool right click select Stroke Path

[12]-In Stroke Path select Brush & then ok

[13]-Now your image should look like as shown below

[14]-Now set the 2 pxl Brush & then select fffffacolor in Forground & create the following shape with the help of Pen Tool right click select Stroke Path

[15]-In Stroke Path select Brush & tick on Simulate Pressure & then ok

[16]-Now like this create the other & then Open New Layer & create the following selection with the help of Pen Tool

[17]-Now fill the selection with fffffacolor & select Erase Tool & use the following settings

[18]-Now remove the some parts with the help of Erase Tool & your image should look like as shown below

[19]-Now select Brush Tool & use the following Brush

[20]-Now create the following shapes with the help of Brush Tool

[21]-Now like this create the Others & your image should look like as shown below

[22]-Now select Layer2 & then go to Blending Options,select Gradient Overlay & use the following settings Photoshop Technique-How to use the Gradient Overlay feature

[23]-Thanks for read this Photoshop Tutorial.I hope this is a good tutorial & u can use these Photoshop Techniques in your Graphics Design Project

Make Your Own Button for Your Blogger Blog!

A few weeks ago, I posted about my new button and promised I would give easy directions on how to make your own button, so here ya go! 1. Create your button picture: Begin with a picture or your logo, no larger than 150 pixels wide. Why 150 pixels? Most sidebars are only 200 pixels wide, so any larger and your button will be cut off on one or both sides. You'll probably want to include the title of your blog, as the point is to help increase your blog traffic, right? Most of the buttons I've seen have been squares--150 x 150--but my button didn't look right as a square, so a vertical rectangle it was! Tip Junkie's buttons are all horizontal rectangles. I created my button picture in Photoshop 7.0 (which I'm still plodding my way through). 2. Host your picture:Find a place to host your picture. I use Picasa for all my normal blog pictures, but I couldn't find direct links to my pictures on Picasa, so I usedPhotobucket. I made a new account for this blog and it was quick and simple. I uploaded my button to Photobucket and copied the direct link to the photobutton. Here is a screen shot of my photobucket album showing the direct link you'll need to

copy.

3. Create HTML for your button: Copy the following code and replace yourblogURLwith your blog's URL and yourimagedirectlinkURL with the direct link URL in Photobucket (the quotation marks are necessary).

4. Place the button in your sidebar: In your blog, choose Layout or Customize and in your sidebar, click Add a gadget and choose HTML/Javascript. In the title area, you can write whatever you'd like--Take a Button, Grab my Button, or don't use a title at all--whatever suits your fancy. Then in the HTML box, post your HTML from the previous step. Save it and preview your blog to make sure your button shows up on the sidebar and that the button takes you to your blog. Here is a screen shot of my button

HTML

5. Create your text area for your button: Again, choose Layout or Customize and in your sidebar, click Add a gadget and choose HTML/Javascript. If you leave out the title, the text box will appear directly under your button. In the HTML box, paste the following code: <textarea rows="4" cols="20"> Then paste in your HTML from step # 3 and close with </textarea> Click save. and now, drag this HTML box under your button HTML in page layout. View your blog and make sure the two appear together. Here is a screen shot of what my

text area looked like in Blogger. VOILA! You now have a button for others to post on their blog! Please let me know if you have any questions and also if you use the instructions to make a button!! Enjoy!! p.s. It isn't 100% necessary, but I'd really, really appreciate your link back to me if you make your own button! THANKS!!