 |
PhotoshopForce.com
»
Tutorials
»
Drawing
»
Tool Tip Tutorial
Tool Tip Tutorial
This tutorial will explain how to create those snazzy tooltip balloons that you see everyone using on their websites these days. This effect is commonly used with Ajax interfaces but can be applied to all sorts of web applications.
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 202
Warning: include(http://www.photoshopforce.com/inline-tut-inc.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 202
Warning: include() [function.include]: Failed opening 'http://www.photoshopforce.com/inline-tut-inc.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 202
Page 1 of 1
Create a new document of any size, l'm using the dimensions 300x200 pixels, and set the background to White (#FFFFFF).
Get the Rounded Rectangle Tool, and apply these settings:
With the Rounded Rectangle Tool in hand, drag out a rectangle similar to the image below:
Press 'L' on your keyboard to get out the polygon lasso tool and click in one spot, drag to another, and keep doing this until you have a triangular selection.
Press the keys 'D' then 'X' on your keyboard.
While holding CTRL, press Backspace to flood fill the selection with white.
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 260
Warning: include(http://www.photoshopforce.com/inline-inc.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 260
Warning: include() [function.include]: Failed opening 'http://www.photoshopforce.com/inline-inc.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/coastalw/public_html/photoshopforce/tutorials/toolTip/index.php on line 260
Double click this layer, and apply the following blending options:
Drop Shadow:
Inner Shadow:
Color Overlay:
Press OK, and some text, and voilą! Pixel fonts seem to compliment these the best, if you do not have any, you can download them in our downloads section. I hope you've enjoined this tutorial and thanks for reading.
Here's how my final result ended up after adding text:
 Download Tool Tip Tutorial Source Package
Author: Nick Berlette
Website: http://www.digitalflamestudios.net
Discuss this tutorial on the PhotoshopForce.com Forums
|  |
