 CyberRagePremium,MVM
join:2001-03-21
Jasper, AL
| Okay, you now have Photoshop. Congratulations on your choice in software. Now what in the heck do we do with it? Hmmmmm.... I'd like to know that myself.  I don't claim or plan to try to teach everything there is to know about Photoshop here nor will I try to replace a good instructional book for Photoshop. I will just try to get you started along your learning journey. I'm probably not the greatest teacher in the world but maybe if I get a thread started others will join in with their own tutorials. I really believe the best tutorial thread is one written by many users as there are so many different ways to do almost anything you can do in Photoshop. Input from different users will most likely introduce different styles and methods for achieving the same task. Sometimes one technique will work better for a given project so it's nice to know the many different ways to accomplish a goal.
With that, let's get busy. Take a look at the screen shot below.
This is the way Photoshop looks out of the box if I remember all of the defaults correctly. Photoshop will change the palettes on the right around a bit depending on screen size. I'm doing this at a screen resolution of 800x600 hoping it will be easier to get a full screen shot on a web page. If nothing else, everything will be larger and easier to see no matter what size monitor you have. At 800x600 some of the palettes are combined so if you are using a larger resolution you should have more palettes with fewer options in each palette. Other than that, we should look the same. If you see options here that you don't have on your screen you can turn on more goodies by clicking on Window at the top of the screen and choosing what you want to turn on or off.
Beginning at the top you see the typical Windows style Toolbar. That's what it has been called and where it's been located since Windows was introduced so that shouldn't be new to you. I'm not going to list everything on each menu accessed from the Toolbar. You can look at the menus to see. It's pretty obvious if you want to open or save a file you click on File to find your options. If you want to make an adjustment to the image, yep, that's right.... click on Image. Find filters to apply by clicking on Filters. You get the idea.
Just under the Toolbar you see another horizontal bar. The contents in this area changes when you change tools. You can change the setting and/or select options for your tools here. You can go down the tool palette (long bar on the left) clicking on the different tools and watch the options change. It's a good idea to familiarize yourself with this area for each tool.
When we talk about picking a tool from the Tool Palette we are talking about that long bar on the left side of your screen. I've typed a few labels on my screen shot in red. Some tool buttons have multiple tools hiding under them. You can tell those by looking for a small arrow in the bottom right corner of the tool button (icon). To access the hidden tools you can right click on those buttons or the easier way, left click and hold the mouse button briefly. The other tool options open very quickly so it doesn't take long and you are ready to slide the pointer to the tool you need and release. The tool is selected.
The palettes on the right are best explained by looking at the different tabs. Color or Swatches is one place you can choose colors to work with. The Layers, Channels, and History tabs will be your most used palettes. You'll see what we do with them as we go. Since I have an image loaded in my screen shot and the Layers palette is showing I will point out a couple of things about it. If you look at my Layers palette (bottom right corner of the screen you will see that layer five is highlighted. That is, it is a different color than the rest. That indicates that layer is selected to work on. You must select the layer you with to work with. Notice layer six. That layer is turned off. If you look you will see a little icon on the left side of each layer except that layer. To turn a layer on or off, just click the box where that icon goes. When you turn a layer off, the contents of that layer are hidden.
Looking at the bottom left of the screen there is a minimized work in progress. You can have many projects open in Photoshop at the same time. If you minimize any work window it goes to the bottom of the screen as you see here.
Along the bottom there is a lighter colored bar. That's the info bar. You can view information about your image and tools in that area. It will also show some tips or options for selected tools.
That's the basic nickel tour of the Photoshop workspace for whatever it's worth. Just enough so when someone tells you to grab a tool you will know where to begin hunting.
Ready to make something? How about a ball? One of the easier things to make. I'm going to take a little longer path just so we can use more of the tools or options. First thing to do is start a new project. Go to the top left of the screen and click on File in the Toolbar. In the menu that appears click on New. That should open a dialog box that looks like the one below. BTW, these screen shots are from Photoshop version 6. Seven may look a little different but I'm sure it's close enough to follow.
If you want to give your project a name type one in the Name box at the top. If you want your project to be close to mine, set the options like I have in mine. You can just type the size and dpi numbers into the boxes. If you don't have Pixels as your unit of measure you can change that by using the menus accessed by clicking on the arrows to the right of the size boxes. I'm making mine 300 pixels by 300 pixels. When you have your choices made just click on OK and Photoshop will start a new blank image for you. You should see a box appear with a white background if you are following my settings. In the Layers palette you will have one layer named Background. That's the white background you see in the workspace.
Let's introduce the Rulers and Guides at this time. Go to the Toolbar at the top of the screen and click on View. In the menu click on Show Rulers. That puts a ruler across the top of your image and one down the left side. We could live without this and the next step but there is no reason to not make our work as best as we can. Move your cursor anywhere over the top ruler so you are pointing at that ruler. Press and hold down the left mouse button. Now drag your mouse down and you will pull a line from the ruler. Pull that line down to the 150 mark on the vertical ruler and release the mouse button. If you miss your mark you can move the guide by holding the Control key down while positioning the cursor over the guide. When you see the cursor change shapes, left click and hold then move your guide. With this guide at the 150 pixel mark, that places a nice reference line across the middle of the graphic to be. Now move the cursor over the vertical ruler on the left side, press and hold the left mouse button and drag a guide from that ruler. Drop it at the 150 pixel mark on the top, horizontal ruler. Now we have a vertical reference crossing the middle of the image added to the horizontal reference across middle of the image. Where they cross is the center of the graphic. Guides have many uses. Now you know how to make them and how to move them. To get rid of one or more guides, just drag it off the edge of the graphic. To remove them all at one time click View then click Clear Guides. You should have something that looks like this now.
You can turn the rulers off now if you wish or leave them on. If you would like to turn them off, go to the top of the screen, on the Toolbar click View, in the menu click Hide Rulers or you can hold the Control key down and press the letter "R". Ctrl+R will toggle the rulers on and off. We'll use those guides shortly so let's keep them for a while.
Let's play with Layers.
Look in the lower right corner of your screen. You should see a palette with a tab labeled Layers. If you don't see a layer named Background displayed, then look across the top of that palette and click on the tab labeled Layers. Across the bottom of the palette you will see some buttons (icons). Those will change depending on which tab is up front. Right now, the Layers tab should be on top so click on the button I've circled in red.
That will create a new layer. New layers are positioned in the layers list one layer above the layer that is active (highlighted) when you create the new layer. Remember that. As you begin to do more complex projects that info is useful. Other ways to create new layers is to click the arrow on the Layers palette I've circled in blue. On that menu the first option is New Layer. Another is to click on Layer on the Toolbar at the top of the screen. On that menu click on New then Layer. Yet another is to press and hold the Shift button and the Control button as you press the letter "N".
This should have added a new layer to your list of layers displayed in the Layer palette named by default, "Layer 1". You can rename the layer if you wish. Naming layers becomes important as your projects grow more complex and you have many layers in a single image. It helps keep track of what is where. Let's name the layer so we know how. Point the cursor at Layer 1 and right click. A menu will appear. On that menu choose the top option, Layer Properties. The Layers Dialog box will appear. (If your version of Photoshop is earlier than version 6 you double click the layer with the left mouse button to bring up Layer Properties)
Type Red Circle in the the name box..... where the red arrow is pointing. You can change the color of the layer in this dialog box, also. No real need for that in this project but if you want to change the color, feel free. Don't blame me if your screen looks different from
mine. We should look like this now:
Look to the left side of your screen to the Tool Palette. There are two color squares near the bottom. Most likely they are black and white unless you've changed them at some time. I've included a double capture of the lower half of the Tool Palette here.
If you want to set the colors to the default black over white click on the small squares I've circled in blue. I've circled the two larger color squares in read in the image on the right. The upper color (top left) is your current foreground color. The rear color (lower right) is the background color. Click on the foreground color square (black in my example). That opens the Color Picker.
If you began with the default black foreground and white background colors slide the small circle marker I've encircled with blue from the bottom left corner to the top right corner to change the color to red. Or just click in the upper right corner to set the color selection to red. Yep, this could have been done with the Color palette but that palette is easy to see. I thought I'd show you the Color picker while I was in the neighborhood. You could just click on Red in the Color palette to achieve the same results. Click OK in the color picker.
Go back to the Tool palette and select the Elliptical Marquee Tool. That is one of those tools associated with a multiple tool button.
Point at the button where I have an arrow pointing. If the button contains a picture of a square like mine, press the left mouse button and hold it down. More tool selections will open in a pop-up box. Choose the tool I've underlined. Once the other tools pop out you can release the mouse button if you wish then click on your choice or you can slide the mouse over to the desired tool and release to select the tool.
This is a selection tool. You can use it to make round selections around portions of your graphic. The tool does not draw a perfect circle free hand. You can make Ovals or circles any size you want. Even way outside of your graphic. Of course when you release the mouse button the selection will stop at the edges of your graphic but will retain the same shape. If you hold the Shift key down when you drag your selection you will draw a perfect circle. If you hold the Alternate key down while dragging a selection the marquee will expand from the point where you first clicked. You can choose the center of your selection in that manner. If you hold both the Shift and Alternate keys down, you will draw a perfect circle from the point where you first clicked.
When you move your pointer over your graphic the cursor should change to a small cross hair. Remember those guides we pulled from the rulers? Move the cross hair to the center of our graphic. When the cursor is over a guide the color of the cursor changes. So, if you move it until both the vertical and horizontal cross hairs change colors you will be dead center of your graphic. Hold the Shift and Alternate keys down, click in the center and drag away from the center. You will see your circle expanding. I made mine 239 pixels wide and high. Now, how do I know that? Look at the palette in the upper right side of your screen. If the Info tab isn't selected, click it.
With the Info palette in view you can watch the numbers I have circled change as you drag your selection. There will be numbers on the left changing also. Just ignore those this time. You can make your selection whatever size you want but it wouldn't hurt to try to use the Info palette while you make this selection for the practice. Just don't make your selection too small.
We are looking like this now. Right? Don't worry if I have a gray border around my white and you don't. I just pulled my work window out a little larger than my graphic.
Let's throw something else at you while we are here. We can get by without doing this step but you should be aware of the feature as it is very useful. Go to the top of the screen to the Toolbar. Click on Select. In the menu that appears click on Save Selection.... This dialog box appears:
Type Red Circle into the Name box (the only empty box). Now you can reload that selection anytime you need it by clicking on Select then Load Selection... then choosing "Red Circle" from the Channel drop down menu. We can actually do this project without dropping our selection but now we have it saved just in case we need it.
Let's use that red paint. With our Red Circle layer still active we will fill that circle selection with red. Go to the top of the screen to the Toolbar. Click on Edit and from the long menu click on Fill. This will fill our selection with the foreground color. The keyboard shortcut for filling with the foreground color is Alt+DEL (holding the Alternate key down while pressing the Delete key. (Just for info, Ctrl+DEL will file with the background color.) Also, there is a Fill Tool hiding under the Gradient Tool on the Tool palette that will do the same thing. Now our circle is nice and bright red and the selection is still active. Nice. Hey, that's a tutorial right there. Wanna quit Naw. Let's tweak it some.
First, let's get the guides out of the way. Click on View on the Toolbar. Then click Show. In the new menu click on Guides. In this menu, items with a check mark to the left are currently showing. Items with no check mark are hidden. Now you should see a red circle with little ants crawling around (the selection marquee is often referred to as marching ants) and no guides. The guides are still there if we need them later. we have just hidden them.
Make a new layer. You remember how to do that. Click on this button at the bottom of the Layers palette.
Name this layer Shading by right clicking on the new layer (Layer 1) and clicking on Layer Properties. Type Shading into the Name box and press Enter or click OK. Go to the Tool palette (on the left side of the screen, Toolbar is on the top) and set the colors to default by clicking on the small squares I circled in blue. There are keyboard shortcuts to do this but maybe I should back off throwing too much info at once.
Now if you look at the larger squares and just above the white square you will see a curved double pointed arrow. Click on that and the colors will reverse. White should now be the foreground color (on top) and black the background color. While you are at the Tool palette, select the Gradient Tool circled in my example.
Remember I said the options just below the Toolbar at the top change when we change tools? We need to go there now. At the top of the screen select Radial Gradient by clicking on the button circled in red. If you hover you cursor over the tool and option buttons Photoshop will display their names. Now we are ready to have some fun.
Make sure the layer named "Shading" is highlighted (is active) and move your cursor over the red circle until it is where you see the X in the above illustration. Press and hold down the left mouse button and drag the gradient toward the button right corner at 45 degrees stopping where you see the line end above. If you hold the Shift key while you drag the gradient Photoshop will make sure you make a 45 degree drag. Look at that. The red is gone but that looks kind of cool. Looks kind of like a steel ball. Neat, huh? But we wanted a red ball, right? Well, maybe you choose a different color but I wanted red.  Go to the Layers palette (bottom right of the screen). See the box I've circled?
That is where you can set the Blending Mode for a layer. We still have the Shading layer selected; click on the arrow on the right side of the box I've circled. You will see this menu.
Click on Multiply seen highlighted with gray in my menu. That will change the Blending Mode from Normal to Multiply. Now we have our red ball and you can see why we started with a very bright red. Looks pretty good, huh? Let's tweak it some more. You might want to take some time to play with the other blending modes before you move on to the next step. Try Screen. Now that's a bright light. Hard Light gives an interesting effect similar to Luminosity. Kind of a thick liquid in a globe look. You'll find Darken will look the same a Multiply and Lighten looks the same as Screen in the instance. That isn't always the case. Okay, set it back to Multiply and lets move on.
If you have lost your selection for some reason you can hold the Control key down and left click on the Red Circle layer to regain the selection. That trick selects all of the opaque pixels on a layer even if they are scattered all across the layer. Or you could load that selection we saved back in the beginning of the tutorial. Click Selection then Load Selection and pick Red Circle from the Channels list box. Okay, make a new layer. You should know how to do that by now. You click the button at the bottom of the Layers palette. Name this layer Highlight by right clicking the layer and choosing Layer Properties and type the name. We have our circle selection up and the layer named Highlight active. The last tool we used was the Radial Gradient and we are going to use it again. Keep the same colors and pull a gradient the same way you did before like you see in this example.
Again we are pulling from the top left to the bottom right at 45 degrees. Start where you see the X and stop at the end of the line shown in the example. It's just a short pull this time. In other words, pull for the length of the line in the example. There goes the red again but you know we are going to fix that.  When you pull this gradient you will notice that the white circle appears a little before the drag line. So you need to remember to start a little lower than where you want the highlight to appear. You'll quickly learn to do that. If it doesn't look right the first time just press Ctrl+Z and do it again. Ctrl+Z is the undo command. Undo can also be found in the usual place it's found in most all programs.... in the Edit menu.
We have a black circle with at white fuzzy thing in it. Not exactly what we were going for. Have you tried the different blending modes to see if you can fix it? Go to the layers palette like we did when we pulled the last gradient for the Shading layer. Click on the menu arrow again but this time select Screen. Ahhhh, a nice red ball with a bright light reflection.
I think this is a good stopping point. I would tweak it some more but I've thrown a lot of info at you in this one tutorial, probably much more than I should. I wanted to write a tutorial with enough explanation and example pics that someone new to Photoshop could follow it yet produce something more complex or nicer than a simple web site button or 2D shape. Here is what mine looks like at this point:
You may need to go through this tutorial two or three times to remember everything. The techniques used in the tutorial are some basics that will help you create some nice graphics in Photoshop. It gets you a little further down the road than a simple 2D shape with no shading. Congratulations if you just opened Photoshop for the first time and made it through this rambling tutorial. Big congratulations if your project looks like mine or better. It isn't unusual to go through a tutorial and end up with something that doesn't look exactly like the examples from the person writing the tutorial. It happens. Just go get a soda or cup of coffee, click File then New and do it again.
If you would like to post your comments or show us your projects made from this tutorial, here is a thread waiting for just that. Play Thread
I mentioned I would tweak the graphic some more. Here is how the finished project looks after my finishing tweaks.
I got to here by adjusting the Opacity of the Shading layer to 75% and the Opacity of the Highlight layer to 83%. Since it is now a lighter image I added a blurred dark border around the edge to give a hint that the curve of the ball continues around. That layer is set at 34%. I know I didn't cover Opacity in the tutorial but decided to give the numbers for those who want to try. The Layer Opacity setting is found in the Layers Palette. It's the box on the top right with 100% in the window.
--
Prop your feet up at Southeast Chat
[text was edited by author 2002-07-29 04:16:35] |
·
