GameAmp Fansite Network Gamer Shirts, GameAmp T-Shirts
Change Game Sites   
About GameAmp, Inc GameAmp Staff Register for a free account
GameAmp Login GameAmp Password
GameAmp Homepage
GameAmp Game MapsGameAmp Game ListLatest Video Game NewsVisit the Video Game ForumsGame Item AuctionsFind Gamer FriendsGame Screenshots
Video Games Subnav
GameAmp Information

GameAmp: Tutorials: Photoshop for Dummies

clear gif
Forum >> Team >> Guild Work Studio - Public Forum >> Tutorials: Photoshop for Dummies

 
User Message
Mimori Profile
Mimori
View Profile of Mimori
GameAmp Staff
Posts: 11
Joined: 11/27/2005
Credibility: 0 pts
Tutorials: Photoshop for Dummies  

Thank you for taking interest in my ongoing project. I plan to layout the basics of Photoshop here to help you learn the program.

Most people get frightened or overloaded with information when they open Photoshop for the first time…but perhaps, after reading this tutorial you will understand the basics of the tools offered to you…and be able to create some imaginative pieces of art.

But enough with a silly introduction!
Let’s get started with learning Adobe Photoshop.

The easiest way to learn the program and unique tricks is by playing around with it or reading tutorials.

I’m writing this tutorial using Adobe Photoshop CS2.
Other versions of Photoshop will differentiate in the details.






This is your default work station.
I snapped the photo when Photoshop was condensed in size…History and Actions are normally on a separate box.

This tutorial will briefly cover over the usage of most of these options. If you have any questions or concerns, please feel free to comment, Thanks!
-Mimori

PS: of course that dorky little drawing isn’t there…I just got bored!






The Table I created below is laid out exactly as the Photoshop tool bar. In my table you’ll find some insightful information about each tool.


Marquee

Marquee is used to select an area on the document; either by selecting a Rectangle, an Elliptical (Circle), Sing Row (Horizontal Selection), or Single Column (Vertical Selection).Upon selecting you’ll be able to apply any effect, change color, change setting, and even cut or paste that portion of the document.
Move Tool

My favorite way to move things around, the move tool, you simple drag the image/layer wherever you want.

By using ctr t , you activate free transform which will resize or rotate what you have selected.

Utilize your tools by selecting an area first and then transforming and moving it… However, when designing signatures for the site and what not…I just use the move tool and crop too to place the “main picture” where I want and work from there.
Lasso

Usually the default is the freehand lasso (Labeled Lasso in my version). Where you’d use your mouse to select an area… Magnetic Lasso is probably the most useful. If you have a picture that the background is pretty plain and doesn’t blend too much in with your focus area (example: your character in guild wars). Then you can use it to easily select your character and cut/copy it into a new layer or document. This way you can work with just your character.

I suggest doing a feather selection however; which will blur the edges of your selection to whatever setting you apply. If you right click when you have an area selected (using any selection tool) you’ll notice there’s a feather option. Click there and a box will open up asking you to type in a number. Until you move the picture, like, cutting and pasting it into a new layer, you will not see the effects of the feather.
Magic Wand

This tool will select an area based on the color. To be more accurate, it selects common pixels… So if you had a huge gray area… you could select the gray and delete it. (Cut it/color it/etc). Hold down shift key to continue selecting different “colored” portions of the picture.
Crop

This is where whenever you finish an image you can select your cropping tool to make your document size the exact size you selected. It crops your document to whatever you have highlighted. Keep in mind, the crop tool uses a rectangular shape.

You can drag the corners to extend the area you want saved. Any area not selected (highlighted) will be deleted.

The crop tool affects the canvas size!! Whatever is left out of the highlighted area will be deleted. So if you had any images hanging off the page to edit…Hold off on cropping till you’re finish with your editing and know what you don’t mind losing.
Slice Tool

Most likely you won’t be using this tool, but it breaks up an image into smaller pieces. I used this tool in making my website template that I transferred into Dreamweaver…It’ll make an area “selectable” for links/texts/etc.

Healing Brush

The Healing Brush allows you to fix any imperfections in an image. Blemishes, scratches, age, etc. You basically sample another area in the document and it’ll blend the color into the image.
Brush/Pencil/Replace

Basically are your drawing tools. I usually use the brush tool..and have different designs downloaded to paint with.

Keep in mind, the foreground is the color you’ll be painting with. And you’ll want to keep track of the settings you’re using on the main bar to change the effects you’re painting with.

Use the keystrokes [ and ] to increase and decrease your brush size quickly.

If you’re worried about painting outside of the lines (like in kindergarten) then select an area first and it won’t matter if you do. The area outside the selected portion won’t appear.
Stamp

It does just as the name implies, it will duplicate an image. You “stamp” a portion of the image as the reference and the new one will be a clone of the original.

Hint: if your keys don’t seem to be working for some reason, turn off any programs running in the background…We learned in class that it may cause some issues.

Art History

Basically it utilizes the information in the history palette and applies it to the current active layer.

I really don’t bother with it. But if it’s used correctly, it can be an effective tool.

Eraser

This tool removes an area of the picture as you drag it. Keep in mind; in your toolbar (located at the top of your workstation) there are modifications you can make to erase in different ways. You can edit the type of brush you’re using to soften the edges or removing with a hard block brush, changing the opacity will erase a little bit at a time, making the area transparent as you drag. If you want to be careful how much you erase at a time, modify your flow settings. Lowering the flow will make the effect more restrained. There are also three different types of an erasing tool: The basic eraser, magic eraser, and background eraser. The magic eraser will work very similar to the magic wand, removing the selected color in the area. The background eraser will basically sample a color automatically and as you drag it’ll erase that color.
Paint bucket/Gradient

The paint bucket tool you should be familiarized with, but the gradient maybe new to you… You can change the settings of the gradient too at the top property bar. Your options are: Linear, Radial, Angle, Reflected, and Diamond gradients. The gradients cover up the entire layer you place it on. So if you don’t want to lose the image your working on, create a new layer before applying a gradient so you can change the settings of that layer to not “destroy” your main focus. You can utilize your selection tools to apply a gradient to a selected area.

Blur/Sharpen/Smudge

The Blur, Sharpen and Smudge tools are used for retouching an image. Each tool can have its settings altered to your preferences. If you want to reduce the speed you’re applying these tools, reduce the strength setting in the options bar (located at the top of the work station). Personally, I use the blur tool to smooth over an uneven transition or to minimize the areas I want less effective (A common reason would be to help the clone stamp in receiving a more accurate sample). The smudge tool can be extremely helpful in moving the color needed for the healing brush to be more effective as well. (Of course, use a small brush to do this effect).
Burn/Dodge/Sponge

Burn, Sponge, and Dodge tools are more tools that are used to edit an image further. The Burn tool darkens an area, while the dodge tool lightens it. The sponge tool increases/decreases the color saturation. Color saturation is basically the intensity of the color.

Tip: Use your Flow/Opacity settings.
Path Selection

These tools are used for other tools, such as the pen tool and shape tools. The Direct Selection Tool will select a single path segment (meaning the box on the line you made with either the pen/shape tool). It’s used to move/reshape that selection and path. You can also create new anchor points to edit this way. (An anchor point is basically that box I was referring to that appears).
Text Tools

Pretty much self explanatory, the text tool is where you’d put text! (Gee Wiz).

However it does offer other things. Like typing mask that you maybe unfamiliar with. The mask tool basically creates an outline of the text. This is like creating a “text” selection to where you can fill in an image with, for example.

Pen Tool

The pen tool is fun to use when you get used to it. It’s used for creating paths, outlines which can become selections, filled with color, or stroked. Don’t worry about this tool if you’re a beginner to Photoshop…practice with other things before getting into more “intermediate” tools.
Line/Shape Tools

This is where you can make geometric paths. If you didn’t know, paths are outlines which can be used to make selections, stroked, or filled with a color/filter.

The vector objects in the listing are restricted by pixels. Meaning, when you reduce and increase the size…the quality won’t be affected.
Notes Tool

Pretty much, the notes tool will add almost a ‘post-it’ looking image to your document. Basically, you can collapse the text box that it created and it will leave behind a small icon (a box). The icon created will appear on the image for other users to view and read your note.

Eyedropper/measure

Basically the eyedropper takes a sample of a color and replaces your foreground color with it. You can select anything on the current canvas, or one on a different canvas currently opened up in Photoshop.

Just so you know the color sampler tool is basically to monitor color values. Be careful you aren’t using this tool… you’ll create dots if you do!

Hand Tool

The hand tool can move your image around as if it were a scrollbar. All you do is click and drag to use this tool.

(I hardly bother with it honestly)

I prefer the move tool...
zoom!
If you don't know what the zoom
tool is, you fail. =)

Background/Foreground

In the “Toolbar” example above…The black color is my current foreground. If you click on the square you’ll access the color palettes and if you noticed, moving your cursor off the palette will result in the “eyedropper” tool appearing. This can help with you want to select a color already in an image. You can switch the background and foreground colors back to the defults by clicking the little black and white box to the lower left hand side of it. The two arrows pointing at the two main boxes are to reverse the two colors back and forth.
Standard/Quickmask Modes

The quick mask tool makes it awfully easy to select an area you want by pretty much painting it. To quicken your “painting” making a quick selection with the lasso tool around the area you’ll want to touch up the mask. However, you don’t have to use the lasso tool to activate Quick mask mode! =)

Use the black color on you background/foreground options which will result in a red coloring. You’ll use white basically as an eraser. If you paint the image with a different color you’ll receive a transparent look almost…However, you can still get this effect by changing your opacity settings while painting with the black color. When you have painted the mask to perfection, click on standard mode and you’ll notice that basically you were making a selection area more precise.

Screen modes

The screen mode option is basically a way to view. You know how in word you’d go to View-Full screen to see your outcome? That’s basically what you’re doing here. It’s multiple ways to view and work on your image.

Edit in Image Ready

Photoshop offers a quick jump to the image ready program. –At school, I have extended which already includes image ready inside the basic Photoshop. But in my home version, you have to flip back and forth to edit. Image ready is used for animation…Keep in mind, you can always use the Image ready button to switch back to Photoshop to edit a mistake you noticed.



Update: I’ll be adding more information here at people’s request.

~*~In my upcoming Photoshop signature guides I will be expecting you to know the basics and where to find the tools.~*~

-Mimori



***THIS POST HAS BEEN EDITED***
05/17/08 01:44 Login to rate this user's post!
Master Delphi Profile
Master Delphi
View Profile of Master Delphi
Posts: 4
Joined: 05/18/2006
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Oh cool, This is what i needed, Thanks mim =)

What i want to know is (Stupid Question,Excuse Me), How do you make something like the first Picture in this "guide" ?

Plain simple Picture and overlay with text or something ?

Thanks,


~Delphi




Signature by:Mimori
05/17/08 03:28 Login to rate this user's post!
Saint89 Profile
Saint89
View Profile of Saint89
Posts: 3
Joined: 04/29/2007
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Thx for sharing some of your wisdom ^_^ +cred



05/17/08 03:53 Login to rate this user's post!
Mimori Profile
Mimori
View Profile of Mimori
GameAmp Staff
Posts: 11
Joined: 11/27/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

QUOTE
Oh cool, This is what i needed, Thanks mim =)

What i want to know is (Stupid Question,Excuse Me), How do you make something like the first Picture in this "guide" ?

Plain simple Picture and overlay with text or something ?

Thanks,


~Delphi


Not exactly…Hehe. The background is always merged down whenever I’m making a “guide”…Cause its too early for me to get into folders and organization, so I was kind of rushing it. But the tint had to be on a separate layer because I used a different opacity then I did for the boarder. I applied different affects to everything.

The font all has the same properties applied: A 1pt white stroke with drop shadow effect.

The “Title” text also has a stroke, but other effects applied as well. Such as overlay with a red (usually its default, but I liked it :p) …but bevel and Emboss, Contour, Outer Glow and drop shadow was applied to those fonts as well. =))

I even stroked the toolbar image…I liked the darker blue...

Example Screen Shot of how I was working:




05/17/08 03:54 Login to rate this user's post!
Aileen Profile
Aileen
View Profile of Aileen
Posts: 0
Joined: 05/14/2008
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Nice, I rated your post 10. I have given up on sigs. :(



Delta Formation[DF]
I click all of my skills, which allows me to smash my space bar harder, thus dealing bigger damage.
05/17/08 07:24 Login to rate this user's post!
Forumite Profile
Forumite
View Profile of Forumite
Posts:
Joined: 12/31/1969
Credibility: pts
RE: Tutorials: Photoshop for Dummies  

Can you perhaps show how you made the background for it, especially the shine/bloom effect on those half circles and such, im looking to mix some new techniques and such.

+ Kudos.



05/17/08 08:16 Login to rate this user's post!
Blazings Profile
Blazings
View Profile of Blazings
Posts: 86
Joined: 10/17/2006
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

They're probably white brushes =D With different opacies.
Just search google for "photoshop brushes" and you'll get a shitload you can download and place in your photoshop folder ;)




IMPORTANT LINKS:

• Forum Rules
• Forum FAQ



MY GUIDES:

• Change your GW pass
• Farming IDS
• Texmod Exploring
• Template Folders


05/17/08 08:22 Login to rate this user's post!
stranger of kryta Profile
stranger of kryta
View Profile of stranger of kryta
GameAmp Staff
Posts: 3
Joined: 05/11/2006
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

I have been waiting for someone to do a thread/guide like this for a while now and this one is very indepth, well layed out and just all round an excellent way for people like me to try and come to terms with the mysteries of photoshop, If I could Id of given you more than the +10 cred because you deserve it well done mim





I believe what doesnt kill you only makes you STRANGER!!?
05/17/08 10:30 Login to rate this user's post!
Mimori Profile
Mimori
View Profile of Mimori
GameAmp Staff
Posts: 11
Joined: 11/27/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Hehe, glad to see that some of you needed this =))
This is just a stepping stone. I’ll go more in-depth on how to design things and using the different tools in basic images later on. I was falling asleep when I was making the end of the table. =p




05/17/08 16:59 Login to rate this user's post!
bman_rules Profile
bman_rules
View Profile of bman_rules
Posts: 2
Joined: 11/13/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

well this is...amazing
very nicely laid out and all. i will definately be coming back to this thread often to see any updates :)
and +credz




05/17/08 21:18 Login to rate this user's post!
Skittle Cody Profile
Skittle Cody
View Profile of Skittle Cody
GameAmp Staff
Posts: 42
Joined: 12/04/2006
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Great guide, Mim.
Too bad I use Paint Shop Pro =]

Mim for prez!




Buy me a giraffe <3
05/17/08 22:41 Login to rate this user's post!
Sabriel Letifer Profile
Sabriel Letifer
View Profile of Sabriel Letifer
Posts: 1
Joined: 12/30/2007
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Thanks, Mim! Hopefully some of this will translate to GIMP since I don't have photoshop (I believe it will - familiar looking tools, etc.).

In any case, this is very timely and much appreciated. I even logged back in to give you +cred for a job well done and I'm looking forward to your updates. ^.^





05/18/08 00:19 Login to rate this user's post!
Mimori Profile
Mimori
View Profile of Mimori
GameAmp Staff
Posts: 11
Joined: 11/27/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

I’m thinking that “Working with Layers” will be next, and then a quick rundown of the menu tools at the top. (Explaining the property bars more, Filters, Levels, Transforming, etc;) Hehe, I’m debating what ya’ll might need to know first.



05/18/08 12:55 Login to rate this user's post!
hat-of-doom Profile
hat-of-doom
View Profile of hat-of-doom
GameAmp Staff
Posts: 492
Joined: 12/06/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Nice tut Mim, definitely useful for anyone that uses Photoshop, let alone beginners.



"Quis custodiet Ipsos custodes. - Who watches the watchmen?"
05/18/08 12:59 Login to rate this user's post!
Forumite Profile
Forumite
View Profile of Forumite
Posts:
Joined: 12/31/1969
Credibility: pts
RE: Tutorials: Photoshop for Dummies  

QUOTE
Nice, I rated your post 10. I have given up on sigs. :(


I can make one if you want, i dont have any Design projects going on at the moment, im sure i can put an hour aside to make sumtin'



05/18/08 17:56 Login to rate this user's post!
Mimori Profile
Mimori
View Profile of Mimori
GameAmp Staff
Posts: 11
Joined: 11/27/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

Updated May 18th: Just the beginning…Added the Default Workspace Image and banner for the tutorial.



05/18/08 19:42 Login to rate this user's post!
Health_Kill Profile
Health_Kill
View Profile of Health_Kill
Posts: 1
Joined: 09/27/2005
Credibility: 0 pts
RE: Tutorials: Photoshop for Dummies  

I like using Paint.net, its a free program and easy to get. Only problem would be doesn't have as many features as photoshop but then again, free is always nice.



Woof!
05/18/08 20:56 Login to rate this user's post!

clear gif
Don't Forget! - Rate users posts to reward or demerit their posts with Credibility!
GameAmp Footer