Learn how to create very professional smooth beveled boxes, a great effect to learn if you want to get into webpage design. Category: Web Layouts

Learn how to create very professional smooth beveled boxes, a great effect to learn if you want to get into webpage design.

Step 1: Start off with a new 400x400 px document, with a white background. Set your foreground color to "f1f1f1."

Step 2: Switch to your channels pallete, and create a new channel, by clicking the "Create new channel" button near the bottom. Make sure you select the new channel "Alpha 1."


Step 3: Take your rectangular marquee tool, and start by creating a similar selection like below. You can hold shift to make multiple selections. Fill the selection white, and deselect.


Step 4: Now go up to Filter > Blur > Gaussian Blur, I blurred it around 18 pixels to get a big blur like below.


Step 5: Now go up to Image > Adjustments > Levels. This part is important, tweak the sliders like below, but make sure you get the smoothing on the white box perfect, just mess with it!



You should have something like this (Remember, yours might be different):


Step 6: Now you need to select what you just created, you can use the magic wand, but I like to hold Ctrl + Click on the layer.


Step 7: With your selection still made, switch to the Layers pallete. Create a new layer, and select the new layer, you should now be back to normal view, with a white background and your selection.


Step 8: Now fill it with your foreground color you set in the beginning, it should be a very light gray, my gray is a bit darker, but I change it towards the end to the one I tell you to use. Once you fill the selection on the new layer, deselect (Ctrl + D).


Step 9: Now set an "Outer Glow" on the layer, you can add this effect by simply click this icon near the bottom.


Step 10: Now add a "Drop Shadow" on the same layer.



Now you have created your very own smooth beveled box, the possibilites are endless. Be creative, you can create totally unique designs with this effect!

home: photoshop tutorials