Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Real World Example: Beveled Frame

Inner Bevel and Finishing Touches

Select the Inner Frame layer button. If you find it easier to work without the distraction of the other layers, you can turn them off with their respective Layer Visibility Toggle buttons.

Press Ctrl + D on your keyboard to clear any selections. Click in the center of the image with the Magic Wand and Invert your selection by pressing Ctrl + Shift + I on your keyboard. Select Colors | Adjust | Brightness/Contrast from the menu bar. In the Brightness/Contrast dialog box set the Brightness to 0 (zero) and the Contrast to -50 (minus 50).

On the menu bar select Image | Noise | Add... In the Add Noise dialog box type 25% Noise, select Uniform and press OK.

Select Image | Blur | Gaussian Blur..., setting the Radius to 0.60.

To add a little color back into the frame select Colors | Colorize... setting the Hue to 149 and the Saturation to 202.

Creating the Bevels

The Inner Frame is a little different from the Outer Frame. We have to work on each side independently of the other sides in order to create the beveled effect.


Press Ctrl + D to clear any selections. Using the Lasso Tool, Selection Type: Point to Point, Feather: 0, Antialias: checked, trace out the top edge of the frame. I found it easiest to start in the top left inner corner (A), go across to the top right inner corner (B), angle up to the top right corner (C), back across to the top left corner (D) and finally back down to the left inner corner (A) where I started. Primary mouse click on each corner point,(A,B,C,D). Double-click to complete the selection (A).

The top edge of the Inner Frame is in the deepest shadow so we'll adjust the Brightness/Contrast accordingly. Select Colors | Adjust | Brightness/Contrast.... Set the Brightness to -40% (minus 40) and the Contrast to -20 (minus 20).

The selection process for the remaining three sides is basically the same as it was for the top bevel selection. As each side is selected, adjust it as follows before releasing the selection and moving on to the next side.

The left side of the frame isn't in quite as deep shadow so we'll adjust the Brightness/Contrast to Brightness -20% (minus 20) and the Contrast to -10% (minus 10).

The bottom bevel receives the most light and was adjusted to a Brightness of 60 and Contrast of 0.

The settings for the right bevel were Brightness 60, Contrast -15 (minus 15). Press Ctrl + D to release any selections.

To tone down the frame I adjusted Outer Frames's Opacity level to 76. The Inner Frame's Opacity was adjusted to 81.

Drag the Center Picture Layer below the two Frame Layers on the Layers Control Dialog Box, and toggle it on. To finish up, we'll tweak the center picture layer a little to draw focus to it by adjusting the RGB color values. Select Colors | Adjust | Red/Green/Blue... from the menu. In the Red/Green/Blue dialog box set the values as follows:

  • Red - 14%
  • Green - 11%
  • Blue = 0%

Real World Example: Beveled Frame
Introduction to Paint Shop Pro 5 : Table of Contents
Introduction to Paint Shop Pro 5


Up to => Home / Authoring / Graphics / Tools / PSP




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers