how-to block ads
|
|
Uniqs:
1158 |
Share Topic
 |
 |
|
|
|
 CyberRagePremium,MVM
join:2001-03-21
Jasper, AL | Photoshop Tutorials: Intermediate Level This thread is intended to offer tutorials for users of Photoshop. When I write a tutorial I will start a separate thread for us to discuss and show off what we can do using the techniques from the tutorial. The reason for that is to keep this thread as clean a possible so there isn't a lot of comments between each tutorial. It will make it easier for users to find a tutorial they would like to try. So please, if you want to make general comments, make them in the comment thread associated with each tutorial. If you want to add to a tutorial, please do so. There are many ways to do most things in Photoshop and I'd like to see what everyone else does as well as offer users of this thread a variety of ways to accomplish a task. If you make additions, do it tutorial style adding pictures if they are needed.
That being said, let's begin the great tutorial experiment.
--
Prop your feet up at Southeast Chat | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL
| Clear Edge Buttons Clear Edged Buttons
This is a cool effect to snazz up your buttons. Of course with a little imagination you will find many uses for this effect. We are going to make a button with a clear edge around a solid center. You can put anything you like in the center. I'm going to be lazy and keep it simple.  This is pretty easy to do in later versions of Photoshop. We are going to use Layer Styles to create the edge. Come on now, go ahead and fire up Photoshop and follow along with me. It's much more fun that way and the lesson will stick with you much longer... and you will have a cool button when you've finished.
You will need to know your way around Photoshop for this tutorial. You don't need to be an expert, just know where some tools are. The first step is to make a new layer either in a new document or in an existing image file. On the new layer, use the Elliptical Marquee tool (or another selection tool if you desire a different shape) to drag out a shape (I made an oval). Don't make it tiny, make it large enough to play with. Once you have your shape sized and where you want it, fill the selection with black. Deselect the shape.
Now we will make most of that black transparent. In the Layers Palette, double click on the layer with the black oval (or whatever shape you made). That will bring up the Layer Style dialog box. You can also select the oval layer and click on the black circle with an 'f' in it at the bottom of the layer palette then click on Blending options. That will get you where we are going. Also, you can go to the top of the screen and click on Layer then Blending options. When you double click on the layer, the Layer Style dialog box will open with Blending Options displayed by default. You will see that Blending Options listed on the left is highlighted. Now set all of the controls in that box like I have them set in this screen shot.
Sliding the Advanced Blending control down to 4% is what works much of this magic.
Now click on the word Drop Shadow in the list on the left. Don't just click the check box to the left of the words. By clicking on the Words you will bring up the controls for Drop Shadows in the panel on the right. Set your drop shadow settings like mine in the following screen shot. Look carefully and be sure to get all of the setting the same. Some are left at default, some are changed, but it is important to have them all as I have them here. Just click on the down arrow beside the Contour icon to change the contour.
Now click on the words Inner Shadow on the left and set your setting like mine.
I think you are getting the idea now. Click on Inner Glow and set yours like this. Click on the little box with solid yellow in it to change the color to black.
(Inner shadows and inner glows all mixed up together???) Yeah, I'm a little crazy. Adobe did us a really big favor when they made it possible to mix all of these setting together.
Finally, click on Bevel and Emboss and adjust your settings to match mine.
Okay, now that we have applied those changes you should have something that looks like this. I added a textured background to show the transparency of the button.
Here is another shot to show just how transparent it is.
You could stop here if you just wanted a clear oval button thing, but let's play some more. Hold the Ctrl key down and click on the clear button layer. That will select the pixels in that layer. Go to the top of the screen and click on Selection then Modify then Contract. Contract the selection by about 10 pixels (just type 10 in the box) if your button is about the size of mine. Adjust this value to match your needs or if you want a thinner/thicker edge. Now press the Delete key. Keep the selection. It should now look like this.
Create a new layer below the clear button layer and fill the oval selection with something. I just did a simple gradient by using the Linear Gradient tool with two shades of blue and dragging from left to right. But you can put any texture or image or effect you desire in that oval. We'll see what you guys and gals come up with in the discussion thread.
That's it. You're done. You can apply some filters to the solid oval (the last fill we did) or lighting... whatever makes you happy. It's your little button, you can make it anyway you like. Maybe just add some text and then add some effects to the text.
User your imagination and have some fun.
The comment thread for this tutorial is at this link: »Clear Edge Buttons Comments
--
Prop your feet up at Southeast Chat
[text was edited by author 2002-06-17 17:53:47] | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL
| reply to CyberRage
Glass Text Glass Text
Glass text can be used for a lot of neat effects. It makes a great watermark, looks good over scenic pictures, makes a good title intro for a slide show/video and it's just cool. Here is a way to make glass text in Photoshop using no filters, no plug-ins and nothing from the Styles palette. You don't have to use text as most any object can be turned into glass. Use your imagination.
Let's get started. Open a new document. I started with a 400 by 400 pixel document just in case I wanted to add something behind the text. You can always crop it down to size when you have the look you want. You will need to tweak the adjustments (I'll show you which controls to tweak) depending on the back ground you use. So we won't worry about the tweaks just yet, either set your background to a nice medium color like blue (hex 000FA0) or a gradient background like this example. That is just a thin slice, mine is 400 by 400 pixels.
Type your text using a bold font. I used Decipher but Arial Black or any bold font will be fine. You can use thinner fonts by adjusting the settings a little, but let's all stay on the same page for now. The previous tutorial on clear edged buttons can be used to make clear text and works well with thin fonts. You can use any color for the text you wish but using a light color will give you the option of tweaking the settings and making frosted glass text. I used hex D6D6D7. Lighter is fine.
Now for the fun part. Let's make it clear. We are going to use Photoshop's new and improved layer adjustment tools to make our glass text so, double click on the text layer to bring up the Layer Style dialog box. Click on the words Bevel and Emboss on the left side. That will change the adjustment controls on the right side of the dialog box. Change your setting to match mine. I've underlined the controls I've changed from the defaults.
Keep that dialog box open. On the left side, click on the words Blending Options: Custom. On the right side, adjust the Fill Opacity under Advanced Blending to zero. Anywhere between zero to 35% gives some nice effects. This is one of the controls you can tweak later.
That's it. Glass text. You should have something that looks like this.
As you can see, the background colors show through the text yet the text remains clearly visible. We used no filters, no plug-ins, no actions and no styles. Just us and Photoshop. If you plan on doing this often you can automate it by creating an action that will make these adjustments. Hmmmm, making your own actions. There's another tutorial idea for later.
Here are a couple of examples of sticking a different background behind the text.
Now let's explore some of those setting so you won't just be making glass like mine but can experiment to create your own vision of what glass text should be. Some of these will need to be tweaked for different backgrounds. Look at the dialog box below.
The control marked with blue can be adjusted to change the outline appearance of the glass. If you set it 41% it will appear as if there is more light shining on the glass, more white highlights on the upper side. 1% isn't a bad effect. One percent greatly reduced the outlines for a more subdued look. Experiment with that setting. Drag the slider slowly from 1% all the way to 1000%. You'll get the idea of what it can do. You can did the text into background using that control.
The control marked with red controls the amount of white highlight on the text/object. Moving it to the left reduces the amount of light reflection (white highlight), moving to the right increases the shine.
The control marked with orange controls the amount of dark border around the text. Left reduces it, right increase the dark border/shadow. Moving it to the right also darkens the text a bit.
You can also play with the blending modes for these two controls as well as change the color used by the controls. Talk about options. Try setting the one marked with red to Multiply. That's the little drop down menu currently set to Screen. Soft Light, Hard Light, and Color Dodge are also nice choices. Try setting the one marked with Orange to Overlay, Color Burn or Hue. And, you can adjust the sliders with each blend mode. You can kill a half hour playing with those controls.
Gloss Contour, marked with green, really changes things around. Just try them all. And don't forget to experiment with the other controls when you change these. I like Rounded Steps. Just hold your mouse over the contours and an info box will pop up giving you the name for each one.
Those are the controls you need to tweak the glass effect to work with different backgrounds. If your background is very dark or is splattered with light and dark blocks or over an image you may need to tweak it some. Over medium to light backgrounds you probably won't need to do much. Just use the setting from this tutorial. I'll put the frosted glass text procedure in the comments thread.
There is a very similar tutorial on PhotoshopCafe. Their setting made the glass too dark for my taste so I tweaked things a bit. Their settings do look better on some backgrounds so you may want to have a look at that tutorial as well. Here is the link: »www.photoshopcafe.com/tutorials/···lass.htm
If you have comments or want to show examples of your experiments using this tutorial, please post in the comments thread here: I plan on adding more tutorials to this thread and would like to keep all the tutorial together.
I hope someone else will add some of their knowledge to this thread by adding tutorials.
heh heh I forgot to add the comment thread link: »Glass Text Comment and play
--
Prop your feet up at Southeast Chat
[text was edited by author 2002-06-17 18:57:28] | | |
|
| Very Very nice Mr. CR, I just hit the print button and I have a nice something to read over coffee.
--
Color Me Gone! | |
 marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1
 ·Verizon Online DSL
| reply to CyberRage
Re: Photoshop Tutorials: Intermediate Level MIRRORING/REFLECTING TEXT
This is a simple effect that can be used on either text or objects in your image file.
1. First, create your text layer (after creating a new image file – background can be transparent or any color you desire). You can add layer effects, such as bevel and emboss or drop shadow, or whatever, as it pleases you.
2. Next, duplicate the text layer. Now, go to Edit>Transform>Flip Vertical. Duplicate text layer is now upside down.
[text was edited by author 2002-06-18 16:59:56] | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| reply to CyberRage
3. Position the duplicate text where you want it to be mirrored by moving the layer (click on the move tool in the tool bar and use the arrow keys or your mouse to position the layer) where you want it.
4. Next, you need to go to Layer>Type>Render in earlier versions of PS, or in PS 7, Layer>Rasterize>Type. This is necessary to convert the layer for further Transform and Distort effects, a normal type layer won’t allow these further effects.
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| reply to CyberRage
5. Next, go to Filter>Blur>Gaussian Blur. I set it for 2.0, but it’s really up to you how much of a blur you want.
6. Next, for the reflection effect – here I’m doing it as if it were reflecting imperfectly in water –
go to Filter>Distort>Ripple, and set the effect for the desired amount of distortion. Here, I
used 100%, but if you’re going for the effect as in a mirror, or on a solid color fill for your background, you might want to skip this step.
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| reply to CyberRage
7. Now the last part: change the layer opacity/transparency to around 90-95%. In PS 7, you can also change the fill opacity/transparency for this part. Again, this is subjective, use as much or as little as you wish. NOTE: If you’re using a solid color fill for the background, apply it before you make the text layers, as this will ruin any text effects, like bevel and emboss, that you apply, if you do it after.
Remember, the effect we’re going for is to make it look like the text is reflecting below, as if in a mirror, or body of water. It shouldn’t be as clear as the original text layer, if you’re doing it as in water.
That’s it – pretty simple, really. You can now play with your image, add gradients, fills, renderings (on layers you’ve rendered or rasterized), whatever you want. You can have a lot of run with this one. NOTE: This effect works best on color background fills, especially in gif format. The examples I uploaded were done on a transparent background, to keep attention on the text. The final example of the finished product is a jpeg on black background; all other images are gifs on gray and transparent matt.
[text was edited by author 2002-06-18 17:16:57] | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| reply to CyberRage
Here's two more examples, one with lens flares on the lettering, and another with too many effects, LOL. 
[text was edited by author 2002-06-18 17:45:05] | |
 PC DreamsPremium
join:2000-10-02
Springfield, MO | you folks are amazing. most of the stuff I do in photoshop is luck of the draw. Have to tinker with it until I get it to look right. Usually just get frustrated and give up | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 | I don't know about the others, but I do a lot of that, but don't give up. Sometimes I even learn something!:D
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
 cjs1ChrisPremium
join:2001-12-22
Trumbull, CT | reply to CyberRage
Layer Masks for Fun and Profit...
Ok, so I need a new computer really badly. Really REALLY badly. However, I've got no money. So, to satisfy my need for technology, I decided to make the world's best nude naked hamster web-site ever! I'll charge for access, and soon I'll be rolling in $$.
To get my venture started, I needed to design a banner for my web-site. I'll use this opportunity to demonstrate the basics of layer masks in Photoshop.
So I fired up Photoshop, created a new image (400 x 80), filled it with black, and pasted in one of my 'models' on a new layer:
My site is going to have lots of hamsters- blonde hamsters, brunette hamsters, and maybe even a guinea pig or two. I want to indicate this on my banner, so I placed a few more copies of the hamster on the same layer:
I knew I would want some text on my banner, but if I placed it right on top of the hamsters it would have been difficult to read. I used a layer mask to fade the pictures of the hamsters in the area where the text was to go.
I started by making sure the hamster layer was active. Then I went to Layer >> Add Layer Mask >> Reveal All. ('Reveal All' creates a blank mask.):
Alternately, I could have used the layer mask button located at the bottom of the layers palette:
Now my layers palette looked like this:
Note the thumbnail for the layer mask (to the right), and the link icon in between the layer thumbnail and the layer mask thumbnail. (We'll get to the link icon later.)
To access the layer mask for editing, I held down 'Alt' and clicked on the layer mask thumbnail in the layers palette. I then used the gradient tool to create a simple gradient.
The key points to note here are:
1. You are editing the layer mask only. The image itself on that layer is not altered.
2. Black areas will be hidden on that layer. White areas will be visible. Gray areas will be semi transparent- the transparency directly relates to how dark (black) the mask is in a given area.
3. You can use most, if not all, of the drawing tools, filters, etc. on the layer mask. This is one of the cool things about layer masks.
To view my results, I just clicked on the layer image thumbnail ('Alt clicking on the layer mask thumbnail works too), and I ended up with this:
Next, I added my text. I created two identical text layers- one with red text, and one on top of that with yellow text:
I then created a layer mask on the yellow layer (in the same manner as before), and filled it to about half-way up with black. Then I ran a wave filter on the layer mask, and then some gaussian blur:
I now had this:
I wasn't quite pleased with what I got. The positioning of the colors wasn't quite right. Fortunately, by clicking on the link icon between the layer thumbnail and the layer mask thumbnail, I can move one independently from the other:
So I clicked on the link icon, then clicked once on the layer mask thumbnail to select it. I then used the move tool to move the mask up a bit. The pictures of the hamsters did not move, since they were no longer linked with the mask. I then rotated the mask a bit. I ended up with this:
A few things to note about linked/unlinked:
1. You can keep clicking in the area of the link icon to toggle between linked/unlinked.
2. When the layer image and the layer mask are linked, any moving/rotating/flipping will be applied to both the layer image and the mask. This is not the case if they are unlinked.
3. When unlinked you can select either the layer image, or the layer mask by clicking on the appropriate thumbnail. Changes will be applied to whichever you have selected. (The selected thumbnail will have an outline around it.) When the mask is selected in this manner, you will still see your image normally. That is to say you will be working with the mask directly, but you will see how the results will actually look applied to the layer. Contrast this with the 'Alt click' method of working with the mask- where you are viewing the mask itself. Both have advantages/disadvantages.
Final notes:
1. You can access options for a layer mask by right-clicking on it's thumbnail. (Sorry, PC-centric  ) One of the options will allow you to disable (temporarily) the layer mask, so you can quickly view what is hidden. You can toggle between disabled/enabled.
Another option is to apply the mask. This will merge the mask and the layer. This is sometimes useful if you need to manipulate the items in a way that the separate layer mask won't easily accommodate. (Note, this will alter the image you have on that layer.)
2. When you create a new layer mask using Layer >> Add Layer Mask, you can also select 'Hide All'. This is basically the opposite of the example above- it creates a filled layer mask which will hide everything until you remove some of the black from the layer mask.
So that's it. This is really just touching the surface. Best advice I can give is to play with layer masks and see what they can do.
Oh yeah, and my business venture? Not going so well. People are already stealing the images from my web-site, and I just found out one of my models is under-age.
No hamsters were harmed in the creation of this tutorial.
--
What a fine day... for science! | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 | Re: Photoshop Tutorials: Intermediate Level Mod didn't delete your post, MD, but isn't this thing voted enough so it won't die for a while?
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
| It's not that, I still want it to be an open window for more tutorials and for some responses as well.
I know they get archive but the more things get put into such a thread, it will look really good to look back for reference. Ah, I'll hey mod myself or something.
--
•·.·´¯`·.·•Meteor Dive•·.·´¯`·.·•
[text was edited by author 2002-06-22 02:54:07] | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| Sure, but you're the one who stays up all night, the mods are either out partying or in bed.
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
 MospawWhat, too soon?Hawaiian Jellyfish
join:2001-01-08
Mile High
kudos:1
All Things Macintosh
Automotive
Rants, Raves, and ..
| I'm a very boring person in real life. Always early to bed. 
As far as the naked hamsters .... let's just say SOMEONE is pushing the envelope. (Got a URL? )
--
Couldn't you use a little Zaffix today?
-- | |
marcelle19crossPremium,MVM
join:2002-03-02
Phelan, CA
kudos:1 Reviews:
·Verizon Online DSL
| said by Mospaw:
As far as the naked hamsters .... let's just say SOMEONE is pushing the envelope. (Got a URL? )
But a naked hamster is covered in fur, Mospaw.
--
If reincarnation is real, I'm coming back as a basketball player making bank with the Lakers! | |
|
