|
Nicky -> =Education= [PS/General] Comprehensive Beginner Signature Making Guide (4/20/2008 3:23:44)
|
Comprehensive Beginner Signature Making Guide
Note: This guide does not provide step-by-step instructions on how to make a tag.
The primary aim is to help you to understand your program, and possibly tutorials, better.
Note-note: Section 5 onwards should bare a little relation to other programs.
Hello, and welcome. This is my current on-going project, which I hope will reap some benefits in the board. This guide will take you through downloading your Adobe Photoshop trial (of course, if you have your own version feel free to skip that section ;)), to posting your gallery on the AdventureQuest forums! (Very exciting.)
My aim for this is to decrease the number of threads asking the same question, and compact it all in one, cheerful, un-boring (I really do hope so) thread. As I mentioned before, this is still in the works, and there may be some errors throughout the post. If there are any, please alert me via PM.
If you wish to see a specific chapter or section of this guide, press Control + F on your keyboard and type in the code of the chapter. For example, the code of the contents is [CNT].
Coming Soon (Maybe):
- Installing Fonts
- Completion of the Filters section
With no further ado (maybe a little, depending what you're doing right this second), the contents:
+-------------+
..CONTENTS.. --- [CNT]
+-------------+
Chapter 1: Downloading your Trial --- [CH1]
- 1A: Adobe! [C1A]
- 1B: Sign In? [C1B]
- 1C: Downloading, Please Wait... [C1C]
- 1D: Installation [C1D]
Chapter 2: On your marks... Get Set... --- [CH2]
- 2A: Tools - An outline. [C2A]
- 2B: Brushes? [C2B]
- 2C: C4Ds? [C2C]
- 2D: Filters? [C2D]
- 2D: Renders? Stocks? [C2E]
Chapter 3: Go! - Tagging --- [CH3]
- 3A: Tags- what are they? [C3A]
- 3B: Setting Up Your Canvas [C3B]
- 3C: How To Start [C3C]
- 3D: Some Handy Tips [C3D]
- 3E: Perfecting Your Work [C3E]
Chapter 4: Go one bigger? --- [CH4]
- 4A: Say what, LPs? [C4A]
- 4B: How to work with them [C4B]
Chapter 5: Hosting and Saving your Image. --- [CH5]
- 5A: .psd Files [C5A]
- 5B: Saving Your Work [C5B]
- 5C: Uploading it to the Net [C5C]
Chapter 6: To AdventureQuest! --- [CH6]
- 6A: Getting Approved [C6A]
- 6B: Setting Up a Gallery [C6B]
Chapter 7: Epilogue --- [CH7]
- 7A: The End. [C7A]
Extra Stuff --- [ExS]
- i: Clip Masking [ESi]
- ii: Other Graphics Forums [ESii]
Let's Begin!:
Chapter 1: Downloading Your Trial --- [CH1]
In this section you will be taken through the steps of downloading your Adobe Photoshop trial and installing it into your computer. If you have your own, legal, version of Photoshop, go ahead and skip this section.
1A: Adobe! --- [C1A]
Welcome to the tutorial. First of all, you will need a program so that you can create your b-e-a-u-tiful graphics afterwards. To get to the Adobe website to download the trail to your program (We will be working with Photoshop), at this time of writing, the trail available is Photoshop CS3. I use CS2, but it shouldn't make much difference except for the layout. Things may look slightly different but for the most part it will be the same.
Okay, click here and where it looks like this, click the down arrow (inside the green box) and select the option "Photoshop [Version]" and hit "GO".
1B: Sign In? --- [C1B]
After you click "GO", you will come to a page that asks you to sign in. If you already have an adobe account, type in the box that looks like this (Yeah, that's my e-mail there :P) your e-mail and password, and click Sign In.
However, if you don't have an Adobe Account, click "Create a New Account". The button will look like this (in the green box once again). Don't worry, signing up won't take long.
Fill in your personal information in the boxes there as labeled. If you are un-easy with putting in your personal information, you can change your name and such. Only boxes marked with an * are necessary, however, so don't fill out all the boxes if you don't want too.
Select any options that you want, and newsletters and such if you wish, and to continue, hit Continue.
After that's done, you'll see the last step before you can download your program. Select your Operating System in the drop-down box by clicking the arrow, and click download!
The file will be quite big, I'm guessing around 400-500MB.
1C: Downloading, Please Wait... --- [C1C]
Probably the simplest section in the whole tutorial! Yay!
Just... wait for the download to finish.
I would actually recommend doing something else besides sitting there on your comfy chair and staring at the download. Maybe go outside, play some PS2, watch some TV, join in the madness in #aqdaas (IRC Channel), or even surf the net. Your choice really, but don't say I didn't warn you that it would take awhile.
1D: Installation --- [C1D]
This section may vary with what you download.
It should be rather easy for you to install your program, but here's a walkthrough anyway :)
I haven't downloaded the actual thing, but I hope my words are easy enough to follow.
Find your file in the folder wherever you saved it. If you weren't asked where to save it, check the desktop (the screen with your wallpaper and icons when all screens are closed or minimized) or maybe a Downloads folder if you have one.
Right click it and click Properties. If it says "Type of File: WinRAR File" or "Type of File: WinZIP File", go back to the folder and right click it again, but this time click "Extract Here".
One of the files that get extracted should be an Application file (see below). Double click this file. (From here, skip the next paragraph if you've done all these steps)
However, if the Type of File is an " Application", then just double click the file.
Once that's done, an installation window will open. Click all the 'next's', making sure you read everything to make sure it is what you want, and click Finish at the end.
Congratulations, you've downloaded and installed your new program, and completed this chapter!
On to chapter two!
Chapter 2: On your marks... Get Set... --- [CH2]
In this chapter, you will be shown some things you may need before getting into your new program. Such as brushes, the tools, and filters.
2A: Tools - An Outline --- [C2A]
Tools, they're in Paint, Microsoft Office, pretty much any program you see. Photoshop has alot of them ^^;.
Here is a picture of Photoshop's toolbar. Yours may look different, but I'll show you why later on.
If you didn't have tools, you wouldn't be able to do anything in Photoshop besides opening and saving files. Okay, maybe a few more things, but basically nothing. They are the key to application of your thoughts and ideas, how to make your artwork all pretty and colourful :).
Now, before I go in-depth about what the tools do, I want you to take a look at this. See the little arrow in the bottom right hand corner? That means that there are more tools you can use within that tile. All you have you to is right click the tool, and the other alternative ones will pop up. Here is an example. So if I show you where a tool is, but you go "OMGZ! It be not therez!!1 HEELP!" or maybe the more subtle "I'm looking where you're telling me to look, Nicky, but I don't see that particular tool." try right-clicking the tile.
To see what it is that each tool does, take a look at this little guide that I made up:
Also note that every tool as extra options or settings in the top bar when you select it. For example, here is the extra options for the Pen Tool.
However, if you're not up for looking at the images (or the links are broken for some reason), here's the text form:
Photoshop Tools... and what they do ~ Part 1
:o! It’s your tools palette! But wait, you don’t know what does what, do you? The following guide/walkthrough should help you with that, so that you can master Photoshop (and the tools palette) in no time!
Note: This guide is only correct to Photoshop CS3 Extended
quote:
Format:
NAME OF TOOL (shortcut)
Alternate Tools (Right click tile to be able to select these.)
Description
The MARQUEE tool (M)
(Elliptical Marquee, Rectangular Marquee, Single Column/Row Marquee)
This tool is useful for making selections, so that you can delete, fill, or maybe put a
pattern in a certain area. It works with a simple click-and-drag motion, and after you’ve made your selection, you can right click for more options about what you might want to do.
Hold SHIFT while dragging to create a perfect square (or circle, if you’re using the Elliptical Marquee)! Also, after you’ve finished making one selection, you can press SHIFT to add more space to it, or even create another selection next to it. After you’ve made one selection, you can also press ALT (or OPTION, if you’re on a Macintosh) to subtract from that
selection.
The Single Row and Single Column Marquee tools select a straight horizontal or vertical line, which generally is not used anywhere near as much as the rectangular and elliptical marquee tools.
The MOVE tool (V)
Need to get something to shove over? To move to somewhere else? Then the move tool is your tool.
This is another one that is very basic in it’s click-and-drag functionality. All you have to do is make sure that you have selected the layer you want to move in your Layers Palette, and click and drag to move it- easy!
This tool can also move selections that you have made.
The LASSO tool (L)
(Lasso, Polygonal/Magnetic Lasso)
This is another handy tool for making
selections in Photoshop. These can be even more precise than the Marquee’s selections.
All you have to do is click to create a ‘start point’, and then, while still holding down that click, drag around the canvas to create your selection. When you’re done, simply let go! And boom! You have a selection.
Variations of the Lasso tool is the Polygonal lasso, and the Magnetic lasso.
The Polygonal lasso only works in straight lines, and you don’t drag this one. You click once, then click in other areas to create your straight-line selection. With this one, you also have to “finish” your selection, and connect the line back up to where you started. You can hold SHIFT to make sure that your line only moves in multiples of 45* angles. (Yes, the * is meant to be a degrees sign.)
The Magnetic lasso is kind of a mixture of the two. You click to start it, but then you can let go of your click, and drag it around. But, like the Polygonal lasso, you have to join it back up to where you started. Also, this one tries to draw on any lines that might be in your canvas (from what I know, I’m not 100% sure about this tool).
The MAGIC WAND tool (W)
(Quick Selection)
The Magic wand is yet another selection tool that is used a lot. All you have to do is click, and it will select the area around your click with similar or the same colour.
You can change the tolerance in the menu at the top to try and manipulate what kind of selection you get. The higher tolerance, the more stuff it will select that might not be an exact match of colour, but the less tolerance, the more picky the tool is about what it
selects. A pretty straightforward tool, if you ask me.
The alternative to this one is the Quick Selection tool. The difference is that it works with a brush, and you can click, and while holding down the click, drag to get a large area selected. A very useful tool indeed!
The CROP tool (C)
The Crop tool. You’ve probably seen this one before. This one changes the size of your canvas, by cropping it.
All you need to do for this one is click and drag, to select the area that you want, then either click another tool (hotkeys wont work) and then press Apply, or clicking the little tick button in the top options.
A fairly simple tool, but useful from time to time.
Note that another way to change the size of your image is to go to Image -> Canvas Size.
The SLICE tool (K)
(Slice/Slice Select)
This is a must-have tool for alot of web designers using Photoshop to create their designs.
There is not much use for this to normal graphic designers, but basically this tool is used for dividing your canvas into a number of images. You do this by clicking and dragging on an area that you want. Most of it will be automatically done for you when you slice up a section. There is no visual change when you use this, and save your image.
SPOT HEALING BRUSH (J)
((Spot) Healing Brush, Patch,Red Eye tool)
The Healing Brush tools are quite... complex. They aim to “correct” your image by looking at the colours around it and decide if it needs “fixing”.
In the spot healing brush tool, you can click or drag over a section, and photoshop will attempt to “fix” it. For example, if there was a blade of grass on a black piece of paper, dragging over the grass would probably turn it black, to correct it so that it fits the surroundings.The Healing Brush is the same, except you hold ALT and click somewhere to define a spot that will be used to compare to anywhere you click after letting go of ALT, so that it can correct the image.
The Patch Tool is also a “fixing” tool. Notice that at the top when you select the patch tool there are two options- “Source” and “Destination”. If you click Source, and then click and drag a selection like you were using the lasso tool, then click -inside- your selection and drag it to another place, you’ll see that as you’re dragging your selection to another place, your original selection is changing. Let go to see that your original selection has been “fixed” according to what you dragged it onto. The “Destination” function does the opposite. This is probably a tool that you will want to test out a bit.
And last, but not least, the Red Eye tool. This is a simple one, just click on a spot on your image to tell Photoshop “Hey, I need red eye removal on this spot”, and it will attempt to correct it.
The BRUSH tool (B)
(Brush, Pencil, Colour Replacement)
This is a great tool. You need to click to make it work, and the options can be edited in many ways!
The first way is by pressing F5, where you’ll get a pop-up window with a lot of options that you can play around with are. The second is by right clicking anywhere on your canvas, which is like a mini version of the F5 menu. It is controlled mostly via the controls at the top of the screen, where you can choose different brushes, and adjust how it works. More brushes can be downloaded via websites like http://www.deviantart.com. You’ll probably be using this tool alot!
The Pencil tool works similarly to the brush tool, except the outcome is much more fine and precise. Works in pretty much the same way as well.
The Colour Removal tool... I barely use this one, so I’m not sure exactly what it does. Sorry guys :/, I’m clueless on this one.
The CLONE STAMP tool (S)
(Clone/Pattern Stamp)
The Clone Stamp is a -very- cool and... should I say advanced, version of the healing brush!
It works in exactly the same way, except when you “draw” back on your canvas in the place you want it to be corrected, it doesn’t correct itself! Instead, it actually moves the area that you clicked when you held down ALT, into the place you’re clicking without holding down ALT! Pretty cool, eh? :)
The Pattern Stamp tool works in the same way, except it puts a Pattern on the spot that you click.
The HISTORY BRUSH (Y)
((Art) History Brush)
This can be a very useful tool, depending on what you want to do in Photoshop. A very cool one, at that.
You know how pressing Control + Z undoes whatever you did before? Well, this is pretty much exactly that, but in a brush form! Just click and drag over something you did before you change it back to how it was! Pretty cool.
The Art History Brush works in the same way, just that it does a more flashy job of it. The options can again be changed a lot in the top options bar.
The ERASER tool (E)
((Magic/Background) Eraser)
If you use this tool as much as I do, you will use it a lot. This tool is the ultimate thing for.. well.. erasing things, I guess.
This works similarly to the brush tool, in that F5 works, and you can right click to change some of your options. There isn’t much to be said about the normal eraser tool.
The Magic Eraser tool works kind of like the Magic Wand, except it deletes
everything instead of selecting it. In fact, it works in the same way.
The Background Eraser works the same as the normal eraser, except it has tolerance. Why does it need tolerance? Because Photoshop needs to figure out what part of your image is Background, that you’re trying to erase. Quite useful indeed!
The GRADIENT tool (G)
(Gradient/ Paint Bucket)
The Gradient tool is a really interesting, which lets you create “shades” over your canvas. It’s also kind of hard to explain, but I’ll do my best.
When you click and drag a line across your canvas, and then let go, you’ll create a shade. The colours in your shade can be customized using the options bar at the top. You’ll probably have to experiment with it yourself to get what I mean ^^;.
The Paint bucket is the same as in Paint, or most other programs. You click in an enclosed area, and your Foreground colour will fill it. I’ll explain to you about the Foreground colours later on.
Simple, but useful!
That ends part one of the tutorial. Be sure
to check out part 2, which should be linked
along with this one is coming right up if you read on!
Photoshop Tools... and what they do ~ Part 2
:o! Your evil tools palette is back again! But this time he seems.. well, less evil. Read on if you want to fully conquer his evil with your understanding of Photoshop! Woooo!
The SMUDGE tool (R)
(Smudge, Blur, Sharpen)
The smudge tool... Woot! One of my favourite tools, yet very similar to the brush tool. This tool is actually pretty simple, it smudges stuff @_@. You can edit alot of options on this one using the top otions bar and the F5 menu. This is a really good tool for making backgrounds or effects- an all rounder!
The Blur tool is also pretty cool. As the name only but suggests, it blurs stuff. Works the same as the smudge tool, just that instead of smudging, it blurs whatever you click on.
Sharpen tool- straight forward. Replica of the blur tool, except it sharpens.
The DODGE tool (O)
(Dodge, Burn, Sponge tools)
The Dodge tool is yet another freakishly helpful one. It adjusts your lighting, and all you have to do is click to make it work. Ta-da! It can be adjusted to the type of toning you want and such with the top options bar.
The Burn tool is the exact opposite of the Dodge tool; that is, instead of brightening your work, it darkens it! Pretty simple if you understand the Dodge tool.
The Sponge tool, however, works with colour. It’s pretty much the same function as the Dodge and Burn tool, except it Saturates or Desaturates your image! Pretty snazzy, eh?
The PEN tool
(Pen, Freeform Pen) - I’m not going to go into the other Pen tools.
Ah, yes. The pen tool. A very useful one indeed. It works kind of like a the polygonal lasso, except that you can make curved lines with it. Just click, and then click another point until connecting up and the end. To make curves, simply click and drag.
Note the top options bar, how you can draw a path, or a shape if you wish. Make sure you select what you want before starting. Also, you can delete your paths by pressing backspace.Yet another tool I suggest testing out!
The Freeform Pen is the normal Lasso, but in Pen tool form. Click and drag to make your path- easy!
Now, I’m not going to go into the rest of them because there’s quite a few, and I haven’t touched them at all in my time using Photoshop :|.
The TEXT type tool (T)
(Horizontal/Vertical text, H/V Mask)
The text tool, you’ll be using this one a lot. Pay special attention to the top options bar in this one, there are a lot of options.
To make an area that you can type in, click and drag to make a box to set boundaries. On the contrary, you can just click somewhere so you can type without boundaries. Simple!
The Vertical text tool is the same, except that the text appears going from top to bottom.
The Horizontal and Vertical Mask tools are really useful for making selections that look like text! Just try this one out for yourself, it’s pretty cool.
The PATH SELECTION tool (A)
(Path selection, Direct selection tool)
The Path Selection tool, yet another one I don’t really know how to use. I’m guessing all you have to do is click to select a path. Really straightforward.
The direct selection tool, I’m not sure about. Sorry :/
Short section, not really much to explain on this one!
The ROUNDED RECTANGLE Tool (U)
(Along with many other shapes)
This is a great tool, which lets you create shapes, yay! Not really much to explain here either, but click and drag to create your shape that you’ve chosen in the top options bar. You can also hold SHIFT to create a perfect shape.
The Custom Shape tool is awesome, actually. You can go to the top options bar and pick out shape sets like brushes, and use them! So many different shapes come with Photoshop as it is, and this is a great tool.
The NOTES tool (N)
(Notes/Audio annotation)
Pretty useless, unless you want to make notes on your work if you’re giving it to someone else, or you’re going to come back to it later. Click somewhere you create a notation.
You can delete notes as well, by right clicking the square looking thing on the top left hand corner of them.
Audio annotation is just leaving notes with your voice...
The EYEDROPPER Tool (I) <--- Get it? I.. Eye.. Haha :3
(Eye dropper, colour sampler, ruler, counting)
I love the eyedropper tool. Like a colour, but don’t know what it is? Never fear! The eyedropper tool is here! Just click somewhere to make that colour your foreground. Useful!
Colour sampler tool is similar, except it opens up the “Info” palette, which examines your colour more closely.
Ruler tool lets you draw a line from one place to another, and it’ll measure that distance in your top options bar.
Counting tool seems pretty useless, actually. Click to “count” points on your work. Kind of weird, but you could find it useful.
The HAND tool (H)
This one.. eh, not much use for it. All it’s really good for is scrolling. No explanation needed here.
The ZOOM tool (Z)
The Zoom tool, fun! Just click to zoom in or out. The options at the top, are quite useful tool.
A really straightforward one again. Also note that you can click and drag to make a box, and scroll in on a particular area!
ZOOM ZOOM ZOOM!
Foreground and Background Colours (The coloured squares under the tools)
Yep. Colour. Now, you’ll probably wonder why I’m going to go onto explaining this. Its cause, well, it’s in your tools palette. It’s not a tool, but it is in the palette, so I’ll explain it anyway.
The square that appears on top of the other one is the Foreground colour. As you probably guessed, the other one is the background colour.
You can click on these squares to change your colour. When you click on them a colour picker will come up, that you can pick your colour on.
The little black-and-white square icon in the bottom left hand corner is to swap the colours back to Black and White, how it looks on the icon. The shortcut for this is D.
The shortcut for “swapping” your foreground and background colours is X, just FYI.
Quick Mask Mode (Q)
Quick mask mode is awesome! Go into it, and use your Brush tool (B), and you can draw on your canvas without drawing anything, actually. It creates a selection for you. And when you click on the button again, it comes out of Quick Mask mode, which creates a selection around what you drew on with your brush tool. In fact, the inverse of what you drew. Press Control + Shift + I to inverse the section.
Change Screen Mode (F)
This isn’t really much of a “tool”, but it changes your screen mode. Easy to try out, just press F on your keyboard! Self-explanitory :).
Well, that brings us to the end of this two-part tutorial.
Thanks for reading, hope you have learnt something!
PS. Your tools palette looks less evil now :)
There isn't much left about tools, since it has all been covered in the linked guide above, so let's move onto something just as important... Brushes.
2B: Brushes? --- [C2B]
Brushes are very useful things in Photoshop, which can be used for Painting, Drawing, Clip Masking, and many more things which I'm sure you'll learn about if you continue to learn about Photoshop. They are a very good resource for people to have, and they can save you drawing a lot of things. They are basically a means of creating art.
Where do I get them?
You can get a lot of downloadable brushes from a very popular site, called DeviantArt. If you hit the "Browse" tab near the top, then click the drop down menu called "Categories" on the left hand side of the page, you'll be able to navigate to find your brushes. Just go to Categories -> Resources -> Application Resources -> Photoshop Brushes, and click. From there you can browse all of the available brushes to download. When you see one you like, all you have to do is click the thumbnail, and then click "Download", which is located on the left hand side of the screen.
How do I install them into Photoshop?
Installing them into Photoshop is only a matter of putting the brush files in the right directory. I have answered this question many times in my Photoshop Q&A Thread, but I'll answer it again in here. This is a full walk through on how to get them, provided that you have downloaded one of the brush sets from DeviantArt.
quote:
[From the Photoshop Q&A Thread, slightly edited. (Nicky)]
If it's a .rar file, read from here, if it's an .abr file, read from the next paragraph.
Extract the brushes out of the .rar file with a nifty program called winRAR. If you don't have it, chances are there's a trial for it on www.download.com.
Right click the rar thing, and Extract -> To Here if you want the files wherever you are in your files.
Once you extract the files, you should have an .abr file (if it's in a folder, go into the folder).
Copy your .abr file (right click -> copy).
Now go to C:/Program Files/Adobe/Photoshop xxx/Presets/Brushes, and paste your file in there (Right click empty space -> Paste). "xxx" being your version number. If you're on a Mac, however, you'd want to put them into Macintosh HD -> Applications -> Adobe Photoshop xxx -> Presets -> Brushes, with "xxx" being your version number once again.
Now reload Photoshop, and your brushes should be in there.
How do I use them?
To use them, follow the section for the Brush tool in the guide above, in the Tools section of this post. Also, to change your brush just look at the top options bar. There's something that says Brush: then it has a thumbnail of a brush, right? Click the little down arrow to the right of that, then click the arrow pointing to the right to choose a new brush set. Simple, non?
2C: C4Ds? --- [C2C]
quote:
(From the Sigmaker's Dictionary)
Cinema 4D Render
A Cinema 4D render is a 3D model that is created within Cinema 4D. This usually has realistic lighting and a complex or smooth body. These are often used in signatures to create effects and lights.
There are many types of Cinema 4D (C4D) renders. These include:
-Vector Renders (Not with outstanding detail, more blotchy colours, so to speak. Has a vector-style realism.)
-Line/Wireframe Renders (Usually white with all the lines black, with no detail at all except for the use of line.)
-Effect Renders (These are mainly used on blending modes to create an effect of light or bright lines.)
-Normal Renders (The main Cinema 4D renders described in the first part of the main description.)
The quote above defines what a Cinema 4D Render is, which is commonly abbreviated to just "C4D". Cinema 4D Renders are used to create effects in pieces, or to create flow in some cases. This is an example of a "C4D" that I have made. People copy and paste them (with permission of the creator, of course) into their canvas and manipulate them to get a certain effect from them.
These are usually given out in packs, by some Cinema 4D artists. But make sure that you have the creator's permission before you use them in ANY artwork of any sort. Otherwise, you may be accused of ripping, and that would land you a ban from the Forums.
This isn't exactly a complete section. but is a very common question that is asked (What are they? Where do I get them?, etc.)
2D: Filters? --- [C2D]
All of your filters can be found by going to your Filters menu at the top of your screen. A handy note is that pressing Control + F (Apple + F if you're on a Mac) will redo the last filter you used. Look out for a guide about some commonly used filters!
- 2D: Renders? Stocks? --- [C2E]
Okie dokies. Renders. Don't know what they are? Check out the Sigmaker's Dictionary, where most things, including renders are described. Either that, or check out bolded bits of the extract I've got here:
quote:
Render
From 3-d modeling, a render is a product of applying lighting and other effects to a model to create a "completed" image, often used to show what the model will look like in-game. In sig work, the term has come to describe an image removed from the background it is set upon.
Also used to name a Cinema 4D image commonly used in tags or large pieces.
A verb form of this word is to remove an image from it's background.
Basically, renders are images that are found with no background behind them. The content of these images is usually a character of some sort, sometimes an anime character and other times a gaming character. There are many types of renders with different content. People usually place these into their artwork and modify them, putting effects and the like around them to get a nice look for their tag. If the background is transparent, it's easy to just download packs of them with transparent backgrounds and plop them into your image.
Note: Renders can be gotten from render websites that can be found all over the net. Examples of these are http://www.gamerenders.com and http://www.planetrenders.net .
If your render comes with a solid colour for a background, you might be wondering how to get rid of it so that you can have only your render in the file. That's rather easy, just read on:
How to "Render" an Image with a Solid Colour Background
Open up your Photoshop, which I hope you can do. Now go to File -> Open or press Control + O and select a file to open it. Alternatively, if you've copied your image from the internet, press Control + N (if you copied the image the size settings should be just nice for the image), and make sure the Background Content is set to Transparent, before hitting OK.
Press W to get to your Magic Wand tool (If the quick selection tool is selected, right click on the tile and click Magic Wand). Take a look at this bar that comes up at the top of the screen: http://img166.imageshack.us/img166/5921/44828767gj6.jpg
The main one that we'll want to look at is Tolerance. The higher this number is, the more precise the wand will be about picking colours close to the one that you click on. The lower it is, the less precise it will be. You might need to play around with it to get your cut out just right, but basically all you have to do is click on your background and press delete. If, after you press delete, the background all goes away and your main image is still in tact, then you're good to go and drag this image over to your blank canvas where you'll be making your artwork with the move tool (V). Here's what the render I was using came out like after I deleted its white background: http://img299.imageshack.us/img299/4062/32832143fb8.jpg
Note that if you want to save this render, save it with a GIF or PNG filetype as that will preserve the transparency so that next time you want to use it you don't need to re-render it!
Most renders come with solid colour background. However, if they have a background, and doesn't have a "cut out" look, then you're most likely looking at a "stock". Stocks (otherwise known as stock photos) are defined below, again from the Sigmaker's Dictionary:
quote:
Stock
Mostly confused with render. A stock is an image with a background, like a photograph. Also commonly called a 'Stock Photo' as well.
But no matter what you have in front of you, some people like to have images without backgrounds. Now, you may be asking what you would do to get rid of that background. That's rather easy to do, and the time it takes really depends on what image you have.
How to "Render" an Image with a Detailed Background
Alrighty, open up Photoshop and your image that you want to render. Let's say that I wanted to render this little number. Yeah, it's an eagle cause eagles are pretty darn cool. Copy it (right click -> copy) and Control + N in Photoshop or go to File -> New (the image the size settings should be just nice for the image), make sure the background contents is set to Transparent and you're ready to go.
Hit "P" on your keyboard to get to the pen tool. If the tile that is selected now does not say "Pen Tool (P)" when you hover over it, right click it and click the one that says "Pen Tool". Now set the options at the top to something like this: http://img293.imageshack.us/img293/1523/84818534li6.jpg and then the options are all set. All you have to do now, is render it!
What we will be doing is making a selection out of the actual image that you want. Then we will invert this selection so that you have only the background selected, then we'll delete the background, leaving the part of the image that you want? Ready? Okay!
I'd zoom in real close to help out with accuracy with the Zoom Tool (Z). At the moment I'm happy at around 300% zoom (you can see how far in you're zoomed with the Navigator palette which can be accessed from Window -> Navigator). You just need a zoom amount where you can still make out the detail, but you're far in enough to get a detailed selection. Back with your pen tool (P), click somewhere on the outline of the section that you want to make an anchor point. Once you have done that, keep clicking along the outline of the section that you want. Don't worry if your path is not 100% accurate- if you're zoomed in enough a little slip won't make a difference. Remember you can undo anything you do with Control + Alt + Z. Here is a little bit of the selection that I've done.
Once you've gotten all the way around (if your selection gets cut off by the bottom, you can just go outside the canvas and then bring your anchor points back in where you want to start again), click back on your starting point. This should close off the whole path and the dots representing anchor points will seem to disappear. At this point, right click in your canvas and hit "Make Selection", and hit OK without changing anything. This should make your selection a bunch of moving dots. Now, you can press Control + Shift + I to invert your selection. Now hit delete or backspace on your keyboard, and you're done! Now you can move this onto your workspace and make a masterpiece. Good luck!
Chapter 3: Go! - Tagging --- [CH3]
In this chapter I will talk about some handy tips to get you started with creating your wonderful pieces of art.
3A: Tags- what are they? --- [C3A]
Yeah. I know you're probably wondering about this thing that I've been writing about the whole way through this guide so far. Art. But more importantly at this stage, what are Tags? "Tags" is a common name for Signatures, because the canvas size is usually so small compared to any larger art (see chapter 4 about larger art), that they're tag-sized. Yup, you heard- or more like read- me right, tags are very very small. At first you might be all "What?! How the heck would you manage such a large canvas? D:<", I know I was like that at first. But that's the sad truth (mmkay, maybe not that sad), and what they are.
But after me explaining that, you might be like "Whaaat?! First you're going on about 'tags', now what's a 'signature'? Jeez Nicky, are you high or something?", but I will explain everything before long, don't worry.
Signatures are the images (or text, but this guide is all about graphics) that can sometimes appear under someone's post. This can be initiated by clicking the "Add Signature" button under the editbox when typing up a new post. More information about signatures, how to use them, and the ever-inevitable rules surrounding them, here.
3B: Setting Up Your Canvas --- [C3B]
Okay. The question that I got asked when I introduced my class at school to Photoshop to help them with the graphic side of a school project; "Nickyyy, how do you... well.. make something?". All you have to do to start is press Control + N (Apple + N if you're on a Mac), or go to File -> New at the top left-hand corner of your screen, and you'll get a dialogue box that looks something like this.
The width and height are basically how big your image is going to be. Set this to whatever you like, remembering that if you want to make a signature for the AQ forums it will have to be the same size or smaller than 500 (width) x 100 (height).
You can leave the resolution as it is now, seeing as you won't be doing any huge-scale work.
Make sure the Colour Mode is not Greyscale, if you intend to work with colour. I recommend CYMK or RGB for this bit. Usually I leave the "Bit" section of the Colour Mode to 8-bit.
The background contents can be any of the options there, I usually work with Transparent though. If not, you'll get a locked "Background" layer when you hit ok, and you'll have to double click your layer in the Layers Palette (I'll get to that one later, too) and click ok to make it editable.
Click the OK button when you've got all your settings done, and you're ready to plunge into the world of Photoshop! (Eh.. Digimon-esque, but it works :P)
3C: How To Start --- [C3C]
So; you've got your canvas setup, and you're just busting to make a creative tag that you can feel the creative glands releasing your creative steam, and your creative fingers just want to do that really creative stuff that you've been creatively wanting to do while creatively reading this creatively long guide, right? Right. Maybe not so creatively, I can understand. :d
Before you start with anything major, I strongly suggest that you play around with the tools, like "Ooh, what does this one do; I wonder! Ahh, I see. NOW I know how I'm going to do that when I need too! Gee, thanks Nicky for telling me to try all the tools before starting." :D. No, but seriously, it will help out when you don't know how to get a particular effect. Also, playing around with filters might also be some fun :).
Now you have to think about what you want to do with your tag. Do you want it to be a mainstream tag with a render? (An example of this is here. Or... do you want it to be a more creative, abstract tag, with no render? This is an example of a tag with no render. Once you decide what you want to do, collect all the stuff you'll need for the tag. If it requires a render, get a render. If it requires a C4D render, get one. If it requires a lightning bolt, get a picture of a lightning bolt.
After you've got all the stuff you need, you can copy and paste (Control + C and Control + V, or Apple + C and Apple + V if you're on a Mac) 'em into your canvas. Now that you're nice and organized, work your magic with all these tools and filters you know so much about!!
But.. wait.. don't know what to do? Check out the Tutorial Directory, featuring tutorials from fellow AQ'ers. Alternatively, check out tutorial sites such as Pixel2Life or Tutorialized.
3D: Some Handy Tips --- [C3D]
One of the things that you will certainly need to know about Photoshop is layers. What are layers, and how do I use them, you ask? This is a very good tutorial to introduce you to layers, if you do not already know what they are. Also note that you can get to your Layers palette by pressing F7, or Fn + F7 if you're on a Mac.
Simply put- Ogres are like onions. Onions have layers. Layers are in Photoshop. Thus, ogres are... in a weird way, like Photoshop :D. (Yeah, I'll give you a cookie if you know where that reference was from :p)
Shortcuts will definitely make your day in Photoshop a lot easier. Here are some of the common ones (Note: Replace "Control" with "Apple" if you're on a Mac and want to use these shortcuts):
- Control + C = Copy
- Control + V = Paste
- Control + A = Select All (Selecting your whole canvas)
- Control + D = Deselect (Provided you've got something selected)
- Control + U = Change the Hue/Saturation values of the layer that you're on.
- Control + L = Edit the Levels of the layer that you're on.
- Control + Z = Undo the last thing you did, or Redo if you've already pressed this once.
- Control + Alt + Z = Undo the last thing you did (Works infinite times).
- Control + Shift + L = Normalize the colour shades/levels of the layer that you're on automatically.
- X = Swap your foreground and background colour.
- D = Return your Foreground colour to Black and your Background colour to White.
- Tool Shortcuts = See the guide in the Tools section of this guide for all the tools shortcuts.
If you want to merge the whole thing together, so that you can sharpen it all, or use the burn and dodge tools to change the lighting, do it this way. Make a new layer, then go to Image -> Apply Image and click ok. Then you'll have copied all your layers into your new layer at the top!
3E: Perfecting Your Work ---[C3E]
There are a lot of things that you can do before uploading your art to the web. Some of these things include:
- Sharpening: Use the Apply Image method and go to Filter -> Sharpen -> Sharpen. If it's too sharp, you can go to Edit -> Fade Sharpen and put in a value of about 50%, before hitting ok. But that only works if you do it immediately after sharpening.
- Curves: Go to Layer -> New Adjustment Layer -> Curves, and change the shape of the wave with your mouse to change the light and shade in your canvas.
- Levels: Go to Layer -> New Adjustment Layer -> Levels, and move the sliders. This will have a similar effect to the Curves.
- Gradient Maps: Go to Layer -> New Adjustment Layer -> Gradient Map, and move the sliders. Double click on the sliders to change the colour on them. This will change the colours on your tag. I suggest you set this to a Blending Mode like Soft Light.
- Hue/Saturation: Go to Layer -> New Adjustment Layer -> Hue/Saturation, and play around with the sliders. As the name suggests, it'll change the Hue/Saturation on your tag.
Once you've finished your piece of art, it's time to upload it and get it on the net!! WOOT! Ugh... that is, after.. saving it. But ah yes, I'm going to talk to you about Larger Artwork before that.
Chapter 4: Go one bigger? --- [CH4]
This chapter is mainly about Large Pieces, what they are, how to deal with the canvas change, and such.
4A: Say what, LPs? --- [C4A]
LPs? OH REALLY?! YEAH REALLY! (Okay, maybe I am a bit off my nut today.) "LP" is a common abbreviation for Large Piece. It is basically a signature/tag, but on a bigger canvas. Some people would call this "real art", as opposed to tags. They are also sometimes seen as harder to do, because you have to deal with the canvas size change, as most people start graphics with tags.
4B: How to work with them --- [C4B]
The key to working with LPs is to up size your effects. Do everythign that you'd normally do, but bigger. I know, this isn't much of a section, but still... I guess it could be useful? (And not to mention my over-enthusiastic start to the chapter :P)
Chapter 5: Hosting and Saving your Image. --- [CH5]
Ok, ok. You know everything there is to know about art, but.. How exactly do you get it onto the internet? Read on.
5A: .psd Files [C5A
Yet again courtesy of the Sigmaker's Dictionary:
quote:
.Psd
A file type used by Photoshop. Usually so you can save layers seperately.
These files are used so that you can come back and edit your layers after you've saved it. Because with a .jpeg or a .png file, the layers are all merged, and it's just one layer of flat image. These files usually have high file sizes because of the fact that the layers are saved. Usually when I make a piece of art I save a .psd version of it, along with a picture file, just in case I want to edit it again.
You can save it as a .psd with Control + S or Control + Shift + S (Apple + S or Apple + Shift + S on a Mac, naturally). You can also go to File -> Save, or File -> Save As. Just make sure the file extension is .psd!
5B: Saving Your Work [C5B]
So, you know how to save your work as a .psd file, but what about an image? I mean, you can't upload .psds onto the web, so it will need to be an image. Before you get all "WHY, NICKY, WHY? WHY MUST IT BE LIKE THIS?!", don't worry. It's easy.
Just go to File -> Save for Web & Devices, or Control + Shift + Alt + S (or Apple + Shift + Alt + S), and you'll get a huge window pop up. On the right are all your options. On the left is just a preview of your file. All you will really need is the box directly underneath the "Preset" wording. This is your file type. Take your pick, and press save. Find where you want to save, and simply hit; well.. Save! :D
Ta-da! Mission accomplished. No sulking needed.
5C: Uploading it to the Net [C5C]
Once you've saved your signature (making sure it's within the size limits 500x100 dimensions for AQ. Also make sure that it's less than 50kb when you upload it), and upload it to either Photobucket (Requires registration) or Imageshck (doesn't need registration). These are two of the more popular image upload sites. Another popular uploading site is Althorne's GoCA - X uploader, located here (doesn't need registration).
When you've uploaded your image get the link. In Photobucket it will be the link that says "Direct Link", under the image. In imageshack it's also at the bottom, called the "Direct link to image". In GoCA-X it's the Direct Path to Image.
Then you go to your Profile, and paste your link inbetween [img] and [/img].
For example (using one of my tags here):
If I wanted http://i2.photobucket.com/albums/y49/nickytan/My%20Stuff/guy.jpg to be my signature, I would type:
[img]http://i2.photobucket.com/albums/y49/nickytan/My%20Stuff/guy.jpg[/img] the signature section.
Of course, that signature is way too big to use in your signature box on AQ. In Photobucket, a handy way of checking your image's dimensions and file size is by clicking on the image thumbnail. In imageshack and GoCA-X it's all on the same page with the links.
Chapter 6: To AdventureQuest! --- [CH6]
Okie dokie, it's uploaded... Wooo! Now, to get it onto that forum...
6A: Getting Approved [C6A]
If you're going to get approved, you'll need to know how to give basic Constructive Criticism. If you're about to go, "But Nicky! I'm scared of Grafh- he is for certainly going to DENY me! Then I'll be sad and all hope will be lost." then.. just drop that idea. It's not that hard to get accepted.
First up, go to this thread. Read everything in that first post. I can't stress that enough. If you don't read it properly, you will get denied. Then make your new post, and follow all 4 of the dot points there. With your Constructive Criticism (otherwise known as CC or CnC.. or C&C), you don't even have to be an artist. Just don't be vague, and write more than one or two sentences. And also don't write anything that you know won't work, such as "it's cool" or "I like the render".
The just post, and let Grafh decide if you're going to be accepted. Also, don't forget to put yourself on pending through the member list like it says in section 4. Good luck! :)
6B: Setting Up a Gallery [C6B]
Woo-hoo! If Grafh accepted you, then you're golden, and are ready to start a gallery for your artwork. Make your way to The Gallery, and click the [img]http://forums2.battleon.com/f/image/blue/replybutton.gif[/img] button. Note that the button may look different depending on what "Forum Skin" you have. Make sure you've read all of the Gallery Rules before that, though.
Some common things that galleries have are:
- Biographies: Just the basics- Name, Age, Graphics Level, Experience, etc.
- Artwork: Of course, the artwork has to be here. You are allowed up to 6 images, and the rest have to be put into link form.
- Goals: Some galleries have goals, for example, "Get the Creative! title", or "Have a Creative! person post in my gallery".
- Banner: Some galleries have a banner right at the top of the page. Remember that these can't be any bigger than 750x500 and 100kb in size.
Once you're done with that, click OK! Also, if you want to get some good posts, be sure to post in other people's galleries too! I'm sure a lot of people will return your favour :).
Chapter 7: Epilogue --- [CH7]
Wow, this turned out to be a long guide....
7A: The End. [C7A]
Well, thanks bunches for reading this. It took quite a few hours of work to make it real. Also, thanks to Relykswalton for helping me with sections of this guide.
To be honest, I actually started this before I got my Creative! title, and before I became an AK. Only finished the first chapter. So I figured a few days ago that I'd deliver ^_^. I really hope that this will help some people.. But, if my efforts are in vein, hey, it got me out of boredom during the school holidays :P.
Suggestions are welcome, of course! Feel free to post. Also go ahead and PM me your suggestions if you want. Another thing, are really busting to write something to this guide, just PM me and ask me about it first, I don't want your efforts to go to waste if I don't have much of a use for it. I won't bite ^_^. And also, just to finish up, I hope that this was cheerful and un-boring for you to read.
Cheers!
Nicky~
Extra Stuff --- [ExS]
In this section I'll be writing about some extra handy tips and tricks for Photoshop. Also sections for understanding value when people say things to you. Hope it's useful! :)
i: Clip Masking [ESi]
Clip masking is a very useful thing that they have in Photoshop, which can help you create something to the shape of another. Here is an annotated example of clip masking that I put together.
Using this requires two layers. One is the "Source", and the other is what you want to apply it to. The source should be the top layer (drag it in the layers palette so that it is on top of what you want to apply it to). Then simply click on the top layer, and press Control + Alt + G (or Apple + Alt + G) to apply the clipping mask. An alternative way is to right click on the top layer, and press "Create Clipping Mask".
Note that you can still move around the layers while the clip mask is applied to them.
Play around with this to get your clip masking skills perfect :).
ii: Other Graphics Forums [ESii]
There are many other graphic forums besides the Adventure Quest forum that you can join to broaden your skills. Don't limit yourself to only one, if you really love graphics! Many can be found by simply Googling something like "Graphics community forum", or asking around with all your friends on the forum for ideas of where to go. I did a quick Google search which came up with a handy site which has links to a lot of graphic communities out there, which is here. You'll be surprised how many of them are out there, and how many people that you might know by name on the AQ forums that run them. Check out galleries, there are usually ideas of places to go by scrolling through them.
Broaden your horizons and try new things. Dare I say it, to infinity.. And beyond!
..Yeah, that was pretty lame.
Quick Run-Down of Things Linked to in the Guide (Not including minor reference images)
http://www.adobe.com/downloads/ - Download Photoshop from here.
http://dotnicky.net/publicfiles/gfxwalkthrough/part1.jpg - Tools outline (by Nicky) Part 1.
http://dotnicky.net/publicfiles/gfxwalkthrough/part2.jpg - Tools outline (by Nicky) Part 2.
http://forums2.battleon.com/f/tm.asp?m=9415497 - Photoshop Q&A Thread
www.download.com - Download winZIP or winRAR from here if needed.
http://forums2.battleon.com/f/tm.asp?m=2533322 - Sigmaker's Dictionary.
http://www.deivantart.com - You can get brushes from here.
http://forums2.battleon.com/f/tm.asp?m=469546 - Signature information thread.
http://www.gamerenders.com - You can get renders from here.
http://www.planetrenders.net - Same as above.
http://forums2.battleon.com/f/fb.asp?m=8884163 - Tutorial directory.
http://www.elated.com/articles/introduction-to-layers/ - Introduction to layers.
http://www.photobucket.com - Upload images to here.
http://imageshack.us - Upload images to here.
http://www.althorne-online.com/gocax - Upload images to here.
http://forums2.battleon.com/f/tm.asp?m=12754647 - Approval thread for the Gallery.
http://forums2.battleon.com/f/tt.asp?forumid=24 - The Gallery.
http://forums2.battleon.com/f/tm.asp?m=12750718 - The Gallery Rules.
http://publicfiles.dotnicky.net/gfxwalkthrough/clip-masking.jpg - Clip Masking Example
http://www.graphicaddicts.net/topsites/ - List of only but some Graphics Communities.
|
|
|
|
