Browsed by
Month: May 2006

Glass or Shiny Plastic Interface Orb in Photopaint

Glass or Shiny Plastic Interface Orb in Photopaint

Comments 4 comments

We’ve all seen them! Those glass orbs that I myself am currently addicted to making but for all you Photopaint users, you were sh** out of luck finding a tutorial on how to make them! P2L itself has dozens of orb tutorials for Photoshop, but what about the few and proud Photopaint people?! Well I’ve come to put you out of your misery! Here is how I make my Glass or Shiny Plastic interface orbs in Photopaint! There are tons of variants when doing this, so feel free to play around as you go. Here’s what we’re going to make:

user posted image

The orb has a number of subtle effects that combine to create the illusion of shiny glass or a plastic surface, so we’ll go through each filter step by step. Lets dance!

Step 1: Let’s start off by creating a new document. Here are my personal preferences whenever I’m making a new graphic that will be web or screen based. (Create a new document by clicking on File > New or Ctrl-N)

Step 2: Now to create the base gradient color of our Orb. Double-click on the fill color on your toolbox bar to open the Select Fill box.

Step 3: Once the Select Fill box opens, click on the gradient button and click edit

Step 4: Here’s where the fun starts. You can click on the Presets arrow and scroll through a number of preset Circular configurations. For this tutorial, I chose the Green 01 Preset and I set the Horizontal percentage to 0% and set Vertical to 22%. I left the colors default, but you can change any colors by clicking on the arrow just above the color and click on others. The little squares just above the ends of the color blend bar are the start and end colors. You can change those as well by clicking on the box and click Others. You can add additional colors by double-clicking on the square and moving the new arrow into the desired position. The preview box on the top right shows you the changes as they happen. So pick your colors, be sure to use a Radial Type and click OK. This will bring you back to the Select Fill box. Click OK to close it.

Step 5: Time to draw our orb! Select the Ellipse Tool from the Toolbox bar or simply hit F7.

Step 6: Click and hold the mouse button and drag the mouse over to create the circle. Release when the desired shape is achieved. If you only get an outline or the circle doesn’t appear, be sure to check your shape tool settings and make sure Fill is on and Outline is off.

Step 7: Now, change your fill color to white by right-clicking on white on the color palette and draw a second Oval Ellipse on top of the orb. This will be the shine on top of the orb.

Step 8: From the toolbox bar, select the Interactive Object Transparency Toll (Or type 1)

Step 9: Click and hold the mouse button at the top of the shine and drag your mouse to the bottom. Release the mouse button and right-click on the image and select Apply. You will now have the shine effect on your orb. It’s a bit bright for my tastes, so lets tone it down a bit in step 9.

Step 10: Right click on the shine and select Object Properties. Change the opacity to 80 to tone it down just a bit and click OK.

Step 11: Now create another white oval with the Ellipse tool at the bottom of the orb a bit smaller than the oval we created for the shine. This is an optional step that will create the “inner glow” effect on the orb.

Step 12: Now we apply a Gaussian Blur to the new oval to really blend it into the orb. Here are the settings I used in this tutorial – just click OK when you have it set to what you like.

Step 13: Now right-click on the inner-shadow oval and set that opacity to around 60. We don’t want this too bright or the effect is somewhat lost. Different colors require different opacity, so you’ll have to play around to get it to your liking.

Step 14: Now for the finishing touches. We’ll create a small dark rim around the orb to “sink” it into the page a bit. Click on the main orb to select it with the Object Pick Tool (Type O) and hit Ctrl-C then Ctrl-V to copy/paste a new one on top of the other objects.

Step 15: Now we want to completely darken the image for our sink in effect. You can do it by either selecting black as your fill tool and bucket fill the object, or as I like to do, click on Image >Adjust > Brightness/Contrast/Intensity (or type Ctrl-B) and turn the brightness all the way down. Just a weird habit I picked up someplace.

 Step 16: After you click OK, you’ll then have a black circle on top of your orb, shine and inner glow. You’ll need to apply a Gaussian Blur to the black circle with about a 2 pixel radius. Click OK to apply the blur.

Step 17: Now grab the Black Circle object in your Object Docker (You can open the Object Docker by clicking on Window > Dockers > Object Docker) by clicking on the object and holding the mouse button down. Drag it all the way to the bottom of the object list and release. The circle is now under your orb and detailed effects. Do another copy/paste of the black circle and move the second one to the bottom of the list.

Step 18: Here’s where you should be at so far! Almost done… now let’s add some final details and call it a tutorial 🙂

Step 19: In my final version, I added some text in the center and a simple drop shadow. The drop shadow can be done the same way as Step 11, but just turn down the opacity of that third black circle to about 50 or 60%. Enjoy your orb making!

user posted image

Thanks!
Dan

Please be sure to check out my complete tutorial list for more great articles!

Blended Text Tutorial – Create Text that Blends into your Sig’s Background in Photopaint

Blended Text Tutorial – Create Text that Blends into your Sig’s Background in Photopaint

Comments 0 Comment

We’ve all seen the tutorials all over the place on how to blend text into the grunge or 3d render background of sigs in Photoshop. This style is extremely popular these days and looks great for pretty much any kind of background. In fact, to emphasize this point, I’ve randomly selected a background from one of the tutorials in the P2L index to show you how this can be done with any image in Corel photopaint!

For this tutorial, I’m going to use the background effect in this Photoshop signature tutorial titled Star Explosion – Create this interesting Exploding Star / Nebula effect. Here’s what it looks like.

Here’s how to add your blended text:

Step 1: With your image open in PhotoPaint, select the Text tool (Type ‘T’) and add some text with decent width and size.  Don’t make your text too tacky by going HUGE, but keep it a good size so the effect comes out properly.  If your text is too thin, the effect is lost somewhat.

Step 2: Once you’ve completed your text, create a mask from the text (Mask from Object) by hitting ‘Ctrl-M’ and this will form a mask around your text.

Step 3: In your object docker, select the background by clicking on it once or simply click on the background itself with the Object pick Tool (hit ‘O’).  This will ensure that the next steps will apply to the background rather than the text object.

Step 4: Select the Rectangle Mask Tool by hitting ‘R’ – this will then tell PhotoPaint that any further steps will be applied to whatever is within the mask on the current object rather than the entire object currently selected, which is the background at the moment.

Step 5: Now you need to run a quick copy paste… you can either hit the copy icon, then the past icon, or use the hotkeys, which are ‘Ctrl-C’ then ‘Ctrl-V’.  This will make a copy of your text, but using the background, and it will become your top object.

Step 6: Clear the mask by hitting ‘Ctrl-R’ or clicking the Clear Mask Icon.  One the mask is cleared, any additional steps will apply to the entire object rather than just what’s within the mask.

Step 7: Time to start playing with effects to bring out the text from the background.  We want it to be blended, not completely invisible!  To start, we’ll apply a plastic texture effect to our new object by clicking Effects > Texture > Plastic from the main menu.  Here are the settings I used for this tutorial, but feel free to play around.  You can really achieve a variety of blending strength by playing with the depth and highlight settings.

I have previews turned on so you can see what the effect looks like before actually applying it.

Step 8: We’ll want to add a slight Emboss to give the text a nice subtle 3D enhancement with shading.  You can do this by clicking on Effects > 3D Effects > Emboss from the main menu.  Here are the settings I used, but again, play around until you find something you like:

Step 9: At this point, let’s not forget we have the original text that we typed out in Step 1!  We’re going to use that text to add a subtle dropshadow to our text.  This will help bring out the text just a tad more to ensure it’s at least readable.  This is especially effective if the text is a bit slimmer.

So once again go to your object docker (If you don’t have your object docker open, you can do so by clicking on Windows > Dockers > Objects on the main menu.  You still won’t see it because the blended text is over it, but now we can apply some effects to it.

Step 10: Let’s darken up that text so it can be used for a dropshadow.  Click on Image > Adjust > Brightness/Contrast/Intensity or just hit ‘Ctrl-B’ to bring up the adjustment tool.  Move the Brightness bar all the way left to make the text back.

Step 11: One you have that done, we’ll apply a slight blur effect to the text to help blend it into a shadow that doesn’t have a harsh line.  Click on Effects > Blur > Gaussian Blur from the main menu to apply the blur.  You probably want to use a setting of 1 – 3 pixels, but as usual, feel free to play around!  Here’s what I used:

Step 12: We’ll now move the shadow into place.  For this tutorial, I simply moved the object a couple of pixels to the left and down.

Step 13: The shadow is a bit dark, so we’ll add a transparency to soften it a bit.  Simply right-click on the shadow and click properties to bring up the properties window.  I used a value of 60%:

Step 14: We’re DONE!  That was pretty simply huh?  For additional dramatic effect, we can add some new elements to bring our the text such as a lens flare.  I added a Northstar 4-Point Flare for the heck of it:

Final Image:

Hope this helps you Corel folks 🙂  Please post any questions!
Dan

Action Blur – Give static photos a sense of motion and action

Action Blur – Give static photos a sense of motion and action

Comments 2 comments

Today’s tutorial is a rather simple effect that I’m sure pretty much anyone has seen, either as a Photoshop tutorial, or an effect used on a poster or some other form of printed media. It’s a simple but very effective way to add some dynamic motion or action to an otherwise fairly static and boring image. The tutorials I’ve seen for this trick all use the radial blur in Photoshop, so I thought I’d whip up a quick tutorial for the Corel PhotoPaint minority out there. We’ll basically need to do some tedious masking and run a filter and that’s the end of it. Nothing strenuous here folks!

Before we go any further though, I just want to point out that this tutorial has a few extra steps involved that what is truly necessary. I’m going to be masking and copy/pasting new objects as I work through the tutorial. Those steps aren’t really necessary, but if you plan to do some photo manipulation once you’ve applied the blur, you’ll need the background and object on separate layers. If you just want to create the effect without all the steps, just mask off the object, invert the mask and then apply the blur.

But hey, I like to complicate things, not to mention it’s my tutorial 😉

Let’s get started!

For this tutorial, I figured why not apply this filter on a Photo to create something you see quite a bit. A car ad! So just for this tutorial, I grabbed my digital camera, opened the front door and snapped a photo of my car. This just goes to show you how you can apply this to pretty much anything you want.

So here’s our photo:

STEP 1 – Creating the mask
A) First thing we need to do is create a mask around the car so we can start duplicating the foreground and background areas to apply the blur. So go ahead and select the Freehand Mask Tool from your toolbar or simply hit ‘K’.

B) Zoom right in (300% or more) and click on the spot when you want to start your mask. In the case of this tutorial, I started the mask on the back of the rear left tire and I’m going to work my way around the car clockwise.

Now you have two ways to use the Freehand Mask Tool, and it really doesn’t matter how you decide to do it. Just use a technique you’re comfortable with. Method 1 involves the truly freehand method. Click and hold the left mouse button where you want to start your mask and then start to move the cursor around the edge of the object. The mask will draw itself as you move around the edges. To stop drawing the mask, release the button and you can move the mouse freely without drawing the mask. Click back down again to start drawing the mask out from where you left off. When you’re done, double-click the spot where your mask ends (should be right next to where you first started) and the mask will close itself and you should now have a complete mask around the object.

Now, I personally hate this method and feel that you have to have the steady hand of a neurosurgeon to pull it off. I definitely use method 2 unless I”m in a huge rush and don’t care if things get sloppy.

Method 2 is essentially the same thing as method 1, except rather than drawing the mask with your mouse, I click my way around sort of like a game of Connect the dots. I click on the spot where I want the mask to start, move to the next spot and click again to join the two points together. It’s a slow way to do it, but it’s precise. The more curves you have, the more you have to click to keep those curves smooth. When you’re done, double-click the spot where your mask ends (should be right next to where you first started) and the mask will close itself and you should now have a complete mask around the object.

STEP 2 – Let’s add the car to it’s own layer now that we have it all masked off. Hit Ctrl-C then Ctrl-V to copy/paste the masked off portion as a new object. You can see in the object docker that we now have a background layer and new object layer with the car in it.

STEP 3 – Next we will need to clean up the new car object layer slightly and then add the background we want to blur to a new layer. Click on the Invert Mask button on your toolbar or hit Ctrl-Shift-I.

STEP 4 – When I pasted the car as a new object, my cursor changed to the Object Picker tool, but we still need to make changes to the masked area, so select your Freehand Mask Tool icon again.

After you’ve selected the mask tool, hit Delete and this will clean up the edges of the car object layer. When you invert a mask, the mask itself moves a couple of pixels over onto the object you had masked off initially. When you delete, you’re cleaning up a 2 pixel edge or so. To see what I’m talking about, zoom in to the edge of the car and hit Ctrl-Z to undo the delete. You’ll see the edge that you are removing with this step.
So once you’ve cleaned up the object’s edge, move on to the next step!

STEP 5 – Click on the background layer on your object docker.

STEP 6 – Hit Ctrl-C then Ctrl-V to copy/paste the background we want to blur as a new object. You?ll see a third layer has now appeared on the object docker:

STEP 7 – Remove the mask by clicking on the Clear Mask button or just hit Ctrl-R.

STEP 8 – Time to run the blur! Click on Effects > Blur > Zoom and play around with the blur intensity until you find a setting you like. Here’s my settings:

All done!

Your boring photo should now have an optical effect that provides action or motion to the overall feel of the image. Add text and some other effects and you can put yourself together a nice little ad and start selling your car (Or your parents’ car) 😉

Here’s the final result without any playing around:

Hope you enjoyed the tutorial, please feel free to use the buttons below to share or comment on this tutorial!

Dan

Slicing and Coding a Content Box in Photopaint and Dreamweaver

Slicing and Coding a Content Box in Photopaint and Dreamweaver

Comments 0 Comment

This is one of my first tutorials I ever wrote a couple of years ago, and it’s quite popular because so many new designers fine using tables to be confusing for layouts. Now I know the latest craze is pure CSS layouts, but I’m old school and still use tables. So, this is a concept that is a bit confusing for the new DreamWeaver users. I will show you how to slice up a basic content box and use DreamWeaver to create the tables and format the box to accept content without displaying a mess whenever the content is too much or the size of the browser window is changed etc…

First off, I will use Corel Photopaint to slice up the content box, but you can certainly do this in any graphics program, including Photoshop or even MS Paint.

Here is the content box I made:

As you can see, this is a very basic content box with a header, footer and content area. For a HUGE and very complete guide to slicing, check out my massive slicing tutorial guide at www.slicingguide.com, which shows you step by step how to slice up an advanced layout. This tutorial is so big, it’s basically it’s own website!

If you’re new to slicing and using Dreamweaver, then start off with this simple concept tutorial, then move on to more complicated adventures is slicing land.

We will need to cut the box up into 3 sections… a top piece, middle section and bottom piece. I’ll start by masking the top section, copy it to clipboard (copy or ctrl-c) and create a new document from the clipboard.

We’ll name this header top.gif (click to view)

Next we do the same thing to create the middle graphic.

Name that middle.gif (click to view)

Last we do the same for the footer graphic…

Name that bottom.gif (click to view)

So now we have our 3 sections of the content box, time to load up DreamWeaver. Create a new document and start by creating a new table with the following settings:

For the width, you should put the width of the actual total image length. So for this content box, I know that it’s 517 pixels wide, so that will be the table size.

You should end up with a new table that looks like this:

We now have 3 rows to fill up. Click on the top row (Just click once anywhere in the row itself and you’ll see your cursor blinking in the row). Let’s insert your top.gif by clicking on Insert > Image and browse to the image you want and double click it. Top.gif should now be in the top row of your table.

Now click on the bottom row and do the same thing for bottom.gif

You now have this:

Now we insert the middle portion so that it fills up the middle portion properly as your tables changes height depending on content. Click on the middle row like you did the others. On the properties bar, click on the folder icon marked as “background URL of Cell”: (If you don’t have a properties bar, click on Window > Properties on the main menu to open it.)

Browse to your middle.gif and double-click to select it and voila! You now have the center row with the middle.gif set as the background image so you can write whatever you like, insert images etc…

Now to add some content. You can go ahead and type stuff or add images to the middle row as is, but the text will be jammed right against the edge and won’t look to hot. So we can create a table inside that row with a bit of padding to keep the content off the edges of the box. Once again, click the middle row so that your cursor is in it and click the new table button. Use the following settings:

Hit ok and you can start adding your content to that new padded table. Your box should now look like this:

Hope that helps clear up some of the DW slicing mystery 🙂

Dan

Please be sure to check out my complete tutorial list for more great articles!

Free Shiny Button Pack – Use as you will!

Free Shiny Button Pack – Use as you will!

Comments 9 comments

This is just a quick shiny button pack I made this evening after someone asked how to make the small buttons on Digg (half the corners are square, the other two are rounded). The zip includes both a layered .PSD for Photoshop folks and a layered .CPT for Photopaint. I included the basic button along with various color samples.

Here’s what’s in the pack:
user posted image

You can download the pack HERE!

Terms of Use:

Do whatever the heck your heart desires with them!

Dan