Welcome to the
icon_tutorial FAQ! (Version 2.0.) Read. Learn. Love. Pass it on.
To learn how to post to the community,
click here.
FAQ Part I: Choosing, Finding and Using Graphic Design Programs
What program should I use: Photoshop, Paint Shop Pro, or something else? I need a better program. Where can I find a copy of Photoshop, Paint Shop Pro, or The GIMP?FAQ Part II: Finding, Identifying, and Installing Resources
What is this font? Where can I find fonts? What is the brush in this icon, and where can I get it? Where can I find brushes? Where can I find gradients? Where can I find images or movie clips to make icons from? How can I use new fonts in my graphics program? How can I use new brushes in my graphics program? How can I use new gradients in my graphics program? I want tutorials for graphics bigger than 100x100, like a header.FAQ Part III: Common Problems
How can I make it so you can see through my icon? My font is huge even when I set it to 2 point! (Also, my font is tiny even when I set it to 200 point!) Can I use PS brushes in PSP, or PSP brushes in PS, or either in The GIMP? I can't install these gradients! How can I make a picture into a gradient? When I try to right-click-save icons, they only save as *.bmp! What's wrong? My animated icons are always over 40k. How can I make them smaller?FAQ Part IV: LiveJournal and Etiquette
How can I post my user picture, or make those little name things, or put this in my layout? How can I do that grey background under icon posts that everyone else is doing? How do I credit someone else for making an icon? What is hotlinking, and how can I avoid doing it? PART I
What program should I use to make graphics: Paint Shop Pro, Photoshop, or something else? What program you should use depends on what you want to do in graphic design, what financial resources you have, and a host of other personal preferences.
Adobe Photoshop is industry standard for graphic design professionals. It's an amazingly powerful program, and once you know your way around the tools, it's amazing what you can do with it. There are a whole host of reasons why one might want to use PS. However, there are also two very compelling reasons why one might not want to. The first is that Photoshop can have a bit of a steep learning curve. Even with tutorials, the program is just so vast that it can take a while to learn your way around. The second is the cost; a new copy of the newest version of Photoshop runs about $700. (See the next question in this post for information about finding cheaper copies.)
Jasc Paint Shop Pro is another very good program. At $50-100, it's much more affordable than Photoshop, and so has a large presence in the icon-making world. Though very advanced graphic designers may find its capacity limited, chances are 99 in 100 that anything you want to do online -- backgrounds, wallpapers, icons, banners -- you can do every bit as well in PSP as you can in PS.
A third alternative, less used but daily growing in popularity, is The GIMP. The GIMP works a lot like Photoshop or PSP, and has the major advantage of being 100% free. That's $0 now, $0 later. Overall, graphic designers tend to think of it as powerful and well-made, but lacking a few of Photoshop's capabilities. If you don't have experience with PS or PSP and would be learning from scratch anyway, or if you're looking for a change, The GIMP may be a very good choice for you. Like PS or PSP, it will easily let you do anything you want to do in terms of designing graphics for web use.
For a lengthier discussion of the various programs' capabilities and merits, the
Choosing and Finding Graphics Programs section of the memories has several member opinions archived.
I need a better program. Where can I find a copy of PS, PSP, or the GIMP? The best place to start looking for a program is on the company's website. For Paint Shop Pro, that's
Jasc.com; for Photoshop,
Adobe; for The GIMP,
GIMP.org.
We recognize that these programs, particularly Photoshop, can be expensive (except for The GIMP, which is free). For legal alternatives to spending $700, we recommend trying
eBay,
Amazon.com used retailers, or other trustworthy purveyors of used and/or discounted software. Don't forget to check out all the good old-fashioned brick-and-mortar stores in your area. In addition, you may be eligible for educataional software discounts if you are a student; check with your school. Purchasing an outdated version of the software (say, Photoshop version 5) and then buying a legal upgrade (to version 8/CS, at the present moment the newest) is drastically less expensive than simply purchasing the newest version. Also, you may find that Photoshop Elements suits all your icon-making needs. It's a smaller and less extensive program, but for hobbyists (which most of us are, as opposed to professionals) it should suffice, and generally a copy of PSE runs under $150.
Under no circumstances should you be asking for or offering to provide illegal copies of any software in this community.
Among other things in the
LiveJournal Terms of Service, you agree not to:
Upload, post or otherwise transmit any content that you do not have a right to transmit under any law;
Upload, post or otherwise transmit any content that infringes any patent, trademark, trade secret, copyright or other proprietary rights of any party;
Interfere with or disrupt the Service or servers or networks connected to the Service, or disobey any requirements, procedures, policies or regulations of networks connected to the Service;
Intentionally or unintentionally violate any applicable local, state, national or international law ... and any regulations having the force of law;
Promote or provide instructional information about illegal activities;
This translates into including cracked, hacked, or otherwise illegal software. What you do on your own computer or in your own journal is no-one's business but your own, but don't bring it to
icon_tutorial. Simply put, we can't talk about it here because it might get the community suspended. As of this writing,
icon_tutorial has well over 5000 members; we're too big to slip under the radar. Don't be the one to ruin it for everyone! If you make a post or a comment asking where to find an illegal version of any program, or a post or comment offering to provide such, it will be deleted and you will be placed on the community watch list. If you persist in trying to share programs or links to illegal software in
icon_tutorial after having received a warning, you will be banned. As of this writing, we haven't needed to ban anyone yet; don't be the first.
PART II
What is this font? This community is the wrong place to ask to have a specific font identified! If you are trying to see what a particular font is, the first thing you should do is check against the
Pixel Font Reference Guide, the
Script Font Reference Guide, and the
Serif, Decorative, and Other Font Guide. Nearly all of the common LiveJournal icon fonts are found on one of those references.
If the font you're looking to identify isn't on those resource guides, you have two more easy things to try. (1) Ask the person who made the graphic what font s/he used, if possible. (2) Try a community like
fontaddicts that specializes in fonts and font identification. Posts to this community that consist solely of a "what is this font?" question will be deleted.
Where can I find fonts? There is a
List of Commonly Used Font Sites in the
icon_tutorial userinfo. In addition, communities like
fontaddicts have useful resource lists.
In accordance with the LiveJournal TOS, as described above, and because of a wish to keep the community functional, accessible, and organized, the trading of font files within the community is now strictly against the rules. If any posts or comments are found to contain a link to a user-uploaded file (such as on yousendit.com), or an offer to e-mail/instant message a file to someone, the post/comment will be deleted and the user placed on our watch list. Repeat offenses mean banning, so don't do it, because we don't want to ban anyone.
What is the brush in this icon, and where can I get it?As with fonts above, if you are looking for a specific brush ("I want this filmstrip brush," or, "I want this heart brush") we are not the best place to ask! First, ask the person on whose icon you see the brush! Secondly, try browsing through the memories of
100x100_brushes and asking at
brushaddicts.
brush_location exists for the sole purpose of brush identification and related questions. There are other brush communities as well; see the next question. Posts to this community that consist solely of a "what is this brush?" question will be deleted.
Where can I find brushes? There is a
List of Commonly Used Brush Sites in the
icon_tutorial userinfo. In addition, communities like
100x100_brushes,
brushes_list_,
brushaddicts,
icon_extras and several others are good resources.
100x100_brushes in particular is an extremely popular resource for LiveJournal brushmakers; virtually everyone you've ever heard of posts their brushes there.
Where can I find gradients? icongradients is probably an excellent place to start.
icon_extras also frequently has gradients posted. Several user resource posts (of which we have
a list) also list their favorite gradient-makers on LJ and their favorite gradient websites. As of this posting we have no master list of favorite gradient websites, but a quick Google for "Paint Shop Pro gradients" or "Photoshop gradients" or "Gimp gradients" should lead you to a bunch of sites super-quickly.
Where can I find images or movie clips to make icons from? There is a list of
Commonly Used Screencapture and Movie Clip Sites in the
icon_tutorial userinfo.
dtissagirl's
well-known icon resource post also contains a long list of image sources for a variety of fandoms.
cap_it has screen captures from a very wide variety of sources, and a well-organized archive to browse. Many icon-makers keep a list of their resources for others to browse, and many themed icon and fan communities (celebrities, movies, tv shows, etc) also maintain lists of relevant image sites. Beyond that,
Google really is your friend.
How can I use new fonts in my graphics program? The thing to remember here is that you are not really putting the new fonts into you Photoshop, PSP, or GIMP: instead, you are installing them into your operating system.
On a Windows computer, the file might first need fo be unzipped (decompressed and extracted), for which you will need a program like
WinZip or
WinRar. Newer versions of Windows may include an unzipping utility, as well.
To maximize how happy and functional you can keep Windows, the best way to install fonts is as follows:
1.) Go to Control Panel.
2.) Double-click on "Fonts."
3.) Go to "File -> Install New Fonts..."
4.) Browse to the font file you just unzipped; select it.
There are other ways: once you have extracted the zipped file, you can simply drag the *.ttf or *.fot files into your Windows fonts directory, which is generally C:\Windows\Fonts or C:\WINNT\Fonts. Following the control panel installation process, in individual cases, seems to provide no tangible benefit, but should, in general, keep your computer functioning more smoothly.
After installing fonts, opening any application (like Photoshop) should show them as available.
It is, however, possible to use fonts in certain applications without actually installing them on your PC; see
this archived post for a discussion. In addition, you may wish to consult the
Downloads and Installations category of the
Memories.
On a Mac, you can often just double-click the font file you've downloaded, and Mac OS will take care of the rest. When that won't work (for example, on *.ttf files) run FontBook. To install a font, click on "all fonts" and then on the "computer" icon. Drag the font file you just downloaded into the Font Book window. This will set up the font and, if necessary, convert it. Other types of fonts (Mac-native) will work simply by dropping the file into the Fonts folder inside your Library folder. After you've done all this, the fonts should appear as useable the next time you open your graphics application.
How can I use new brushes in my graphics program? the
Downloads and Installations section of the Memories contains several useful posts on how to install brushes into your pgorgram. The short answer is that your brush file needs to go into your program's brush folder. For example:
GIMP: *.gbr file into C:\Program Files\GIMP-2.0\share\gimp\2.0\brushes
PSP: *.jbr file into C:\Program Files\Jasc Software Inc\Paint Shop Pro 7\Brushes
PS: *.abr file into C:\Program Files\Adobe\Photoshop 7.0\Presets\Brushes
Your directories may not be the same, but if they aren't, then you probably know enough about your computer's file structure to know how to find the folder you need anyway.
All these programs also have a function enabling you to load brushes from elsewhere on your hard drive; usually when you're using your program's brush selector, there will be a Load Brush... or similar option. You can use that dialog to browse your computer for the *.abr (*.jbr, *.gbr) file you want. For questions about PS, PSP, and GIMP brush comparibility, image packs, and the rest, consult the
brush compatibility section of the FAQ.
How can I use new gradients in my graphics program? Gradient installation is a lot like brush or font installation: you need to put the file in the right folder, and then re-open your graphics program. You may often need to unzip the file first; see the
font installation section of this post for an explanation of that.
Once you've unzipped the file and have a gradient file, you just need to put it in the right place. Examples of default directories are:
GIMP: *.ggr file into C:\Program Files\GIMP-2.2\share\gimp\2.0\gradients
PSP 8+: *.pspgradient file into C:\Program Files\Jasc Software Inc\Paint Shop Pro 8\Gradients OR My Documents\My PSP8 Files\Gradients
PSP 7: *.jgd file into C:\Program Files\Jasc Software Inc\Paint Shop Pro 7\Gradients
PS: *.grd file into C:\Program Files\Adobe\Photoshop 7.0\Presets\Gradients
Of course, your directories may vary, as may your versions of the software. Still, using these directories as guidelines, your directories shouldn't be difficult to find if you just apply a modicum of logic.
Once you've got the new gradients installed, it should be fairly simple either to find a drop-down menu or a "load gradient" option in your program of choice; each is slightly different but none are too difficult to find.
I want tutorials for graphics bigger than 100x100, like a header. First and foremost,
check the memories. There are two good reaasons for this: first, many of the tutorials in the archive were, in fact, written for larger graphics. Second, and more important, is the idea that concepts translate universally. In other words, don't consider coloring or brushes or patterns to be different things because of the size of the graphic. A layer is a layer, and the idea behind
icon_tutorial is to teach users the theory and practice of graphic design & photo manipulation software, rather than to slavishly reduce hordes of LJ users to creating the exact same 100 icons over and over.
In other words: even if a tutorial in the memories is for an icon, read it -- it will help you learn to make any and all kinds of grpahics.
Part III
How can I make it so you can see through my icon? This is called transparency. The basic principle here is that you need to make a transparent image, then only fill in part of it or, conversely, cut holes in it. Then you need to save it as a *.gif file, generally. (Microsoft Internet Explorer does not support transparecy in *.png files;
see this post for more.)
For fun transparent shapes -- little squares, hearts, grids, and the rest -- the key word is template. The
Transparency and Templates section of the memories contains many useful posts and tutorials on template use in PS, PSP, and GIMP.
My font is huge even when I set it to 2 point! (Also, my font is tiny even when I set it to 200 point!) This problem is common, and has an easy solution: the resolution of your image is off. It needs to be set to 72 pixels/inch. There are several posts in the memories describing in detail how to chenge the resolution of your image; one of the best is
here.
Can I use PS brushes in PSP, or PSP brushes in PS, or either in The GIMP? The answer is: sometimes!
Here's a quick breakdown:
-PS CS brushes can only be used in PS CS.
-PS 7 brushes can be used in PS7 and PS CS.
-PS 6 brushes can be used in PS 6, PS 7, and PS CS. (Are you sensing a trend?)
-PS (versions 6 and below) brushes, when renamed from *.abr to *.jbr, can be used in PSP version 7 and below.
-PS versions 6 and below, and PSP versions 7 and below, can be imported into PSP8+ (
explanation).
-PSP (versions 7 and below) brushes can be used in PS by renaming the brush file from *.jbr to *.abr.
Many brush-makers also include image packs with their brush packs. These are essentially *.jpg or *.png versions of brushes, which you can open in any graphics program and define as brushes yourself, thus saving your own compatible brush sets. For information about defining and saving brush sets in GIMP, PS, and PSP, check the
Brushes category of the Memories; there are several thorough and descriptive posts in there to help you.
I can't install these gradients! How can I make a picture into a gradient? The issue is most likely one of file type or compatibility. Gradient files are only somewhat compatible across program platforms, so changing a file extension may not work, as it sometimes will for brushes. If the gradient file you downloaded is for Photoshop CS and you run Paint Shop Pro 7, it's not happening. The following coversions do work:
Change a *.jgd file to a *.pspgradient file to make it work in PSP 8+.
Change a *.jgd or *.pspgradient file to *.grd to make it work in PS CS+.
In addition, LiveJournal-based gradient makers have taken to making "image packs" of gradients. These are 100x100 images with a gradient applied on them, usually *.jpg or *.png files. You can use these as layers in an icon on which you are working, but they are NOT gradient files. You can use the eyedropper tool and the gradient tool in your own graphics program to re-create the gradients on your own if they are simple (only a few colors), or you can
define it as a pattern, but there's no "define gradient" tool in any program at the moment that can just look at the 100x100 image and magically make the right gradient for you. So make sure that you have an appropriate file type in the appropriate folder (
see above).
When I try to right-click-save icons, they only save as *.bmp! What's wrong? Nearly all of the time, this means that your MSIE cache ("temporary internet files") needs clearing out.
Here's a quick description of what to do.
My animated icons are always over 40k. How can I make them smaller? You need to reduce the amount of information stored in the file. This means reducing one of three things: the number of colors, the number of frames, or the size of the image.
There are ways to sacrifice size without sacrificing too much quality, but it can be tricky.
Here are some tips for Image Ready, and the
Animation section of the memories should be useful all around.
Part IV
How can I post my user picture, or make those little name things, or put this in my layout? This community is 100% the wrong place to ask these questions. We're here to help you learn how to make graphics, and that's about it. However, these questions get asked so often that we feel it's helpful to link to the
LiveJournal FAQ, which has all the answers you could ever need about pretty much anything. The FAQ is a bit dense; if you find that it's too dense to be really helpful to you, you may find
this post to be better. It's full of useful information that will make your Internet experience easier.
How can I do that grey background under icon posts that everyone else is doing? That is HTML, and it is a table with the background colored in a certain shade of grey. This is NOT the right place to get HTML help, and if you ask, your post will be deleted and you will be directed elsewhere. However, Google and other LJ communities can help you. You want to look for beginner guides to HTML and beginner guides to table-making. You also can use "view source" on a webpage that has the effect, to see what the code is. And if you want to stay on LJ, there's a
very thorough tutorial here.
And as a LiveJournal user rather than a community mod, I beg of you: make tables properly, or not at all. A bad table can screw up a LiveJournal layout of friends page beyond belief, and it'll confuse the hell out of most web browsers. If you want to do them, take the time to learn how to do them right.
How do I credit someone else for making an icon? The first thing to do is to stay organized when you're saving icons. Generally, it's best to save it to your computer with the name of the person who made it as part of the file. For example, if I were saving this icon, the filename might be icons_by_etoile - eowyn estel.jpg. That way, you don't lose track of who made it once you're ready to upload it to LiveJournal.
When you do upload, there are handy fields in which you can enter information. There's a very concise and well-written visual guide
here that should make the process easy as pie.
Credit is a matter of etiquette; some people demand it and others don't care. It's always in your favor to say who made something, when you know. It generates more "work" for the person in question, and you don't receive any nasty false accusations about trying to pass something off as your own.
What is hotlinking, and how can I avoid doing it? Hotlinking is also known as "direct linking." Essentially, it's the act of linking directly to an image rather than to a page or site.
Bandwidth is the major issue with hotlinking. Every site owner has a specific, concrete amount of bandwidth -- the amount, measured in file sizes, that the site is allowed to transfer. For example,
EtoilePB.com has a 10 gb per month cap. Your mileage may vary; if you open an account at
Photobucket or some other file hosting service, you should make sure to learn what your bandwidth limit is.
Every time you or someone else links to an image stored on your server, it counts against your bandwidth. So if I post a 40 kb icon on my icon journal, then link it in a bunch of icon communities, 40kb worth of my bandwidth gets used up every time someone looks at the post.
Of course, if I'm the only one linking directly to my icons, I can plan for it, even if the page on which I'm displaying them gets a lot of hits. But let's say that someone in another community likes the image so much, they post it on their page too. Suddenly, I'm using much more bandwidth than I have planned for, and I'm going to hit the cap a lot sooner. When you hit the cap, one of two things happens (depending on your provider and arrangement): either your images are rendered inaccessible until the period is over (usually a month), or you're charged extra for the bandwidth you use. It's analogous to going over your cell phone minutes.
That's why hotlinking is called "bandwidth theft." Someone, somewhere is paying money for it, and if you steal it, they're going to get pissed off.
And now, for the technical information:
Direct linking an image is any time you put < img src="
http://servername.com/imagename.jpg" >. If it's your own server and image (for example, when I make an icon post linking from
http://www.etoilepb.com/graphics), it's not theft. If it's someone else's server, it is.
The best way around this is to have your own image hosting space. When you see an image you like, save it to your own computer! Then upload it to your image hosting space before you display or link it anywhere. This will keep everyone much, much happier.
In addition to the FAQ, please consult the
guide on how to use the Memories; it'll make your life a lot easier. Also if you see a question popping up a lot in the community and think it should be in here, or spot an error in this FAQ, drop me (
etoilepb) a line and I'll get on it when I can.
Thanks!