|
|
|
|
|
|
|
|
|
 Posted: Fri Sep 19, 2008 5:15 pm
Original credit goes to badloki for creating this tutorial< - Making Guild Banners! - > Since some of you guys may be wondering how to make some spiffy banners for your guild, we decided to throw this thread together to help! You may also use this thread as a central location to discuss guild banner making-related topics! In this thread you will find: Step-by-Step Tutorials
Helpful Links
FAQs
Discussion
Assistance THREAD RULESFollow guild rules, Gaia's ToS, and Gaia's R&G.
NO spamming. None at all.
No debating or off-topic chatter. Take unrelated/off-topic debates or discussions to PMs.
No page stretching! If your image is going to stretch the page (horizontally or vertically) then PLEASE post it as a link!
No advertising or requests for banner services in this thread! We have a whole subforum you can use for that! Any posts found in violation of these rules WILL be deleted along with further consequences if necessary. More rules may be added at anytime.Any and all new banner-related topics posted outside this thread WILL be locked from now on. There is no need to have repeat topics now that there is a sticky that covers this subject. Do NOT necro old banner-related threads.NAVIGATIONPost One Intro Post (You are here!)
Post Two Guild Banner FAQ!
Post Three MS Paint Tutorial!
Post Four Super Quick Photoshop Tutorial!
Post Five Making Graphics with Macromedia Fireworks!
Post Six How to Host your Guild Banner
Post Seven Help with BBCode!
Post Eight Super Helpful Banner and Graphics Related Links!
Page Two Reminder of the rules and commencement of discussion
More content may be added at anytime.
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:16 pm
< - Guild Banner FAQ! - >
Got a frequently asked question? We've got your frequently answered answer here! What size are guild banners supposed to be? No larger than 200 pixels wide by 40 pixles high.
Are there any filesize restrictions on guild banners? As far as I know they can be any size. Though I would not recommend taking extreme advantage of this as larger file sizes will cause the page and image to load slower... especially for those who use dial-up. This could possibly discourage potential members!
What filetypes can guild banners be? I recommend using either .PNG, .JPG, or .GIF. Do watch your compression and filesizes though to ensure they're not too large!
Can we have animated guild banners?
Can we have randomized guild banners? You may randomize your banners as well. I'm not going to go into how to randomize them, but there are PLENTY of tutorials floating around on Gaia, particularly in the Gaia Guides and Resources subforum. So you should be able to find out how rather easily. Using Web-Specific Features When Making GraphicsThe following is an excerpt from Web Design in a Nutshell, Third Edition by Jennifer Niederst Robbins, published in February 2006 by O’Reilly Media, Inc. © 2006, 2001, 1999 O’Reilly Media, Inc. All rights reserved. I highly recommend this book for anyone interested in any level of web design. Taken from Chapter 28: Web Graphics Overview. Jennifer Niederst Robbins Use Web Graphics ToolsNearly all commercial graphics programs—both bitmap image editors and vector drawing programs—include some function for saving or exporting graphics in GIF and JPEG format. But if you are serious about creating high-quality images at small file sizes, it is highly recommended that you invest in a tool with web-specific features, such as Adobe Photoshop and ImageReady or Macromedia Fireworks. If you work on a PC and are on a budget, you might want to try out Corel Paint Shop Pro, which has many of the same features as Photoshop, but at a much lower cost. Without a doubt, the de facto standard for creating web graphics is Adobe Photoshop and its web-specific sidekick, ImageReady. Since Version 5.5, Photoshop has included many web-specific features such as a Save to Web option that shows previews of your graphic in different file formats and at different compression rates. The other major contender is Macromedia Fireworks, which has similar web graphics features as ImageReady with the addition of vector drawing tools. As this book goes to print, the fate of Fireworks is unclear as a result of Macromedia’s acquisition by Adobe. One of the greatest benefits of using these tools is that they offer previews of your optimization settings (even providing side-by-side comparisons), so you can make adjustments to the settings while keeping an eye on the resulting file size and overall image quality. Both offer very similar controls for file format, color depth, palette dithering, loss, and color palette editing.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:17 pm
< - MS Paint Tutorial! - > MS Paint is the default image editing software that comes with any Windows OS (for this tutorial, I am using Windows XP). This program isn't quite as large and powerful as Photoshop, but it's free and it'll do the job. STEP ONEOpen MS Paint. To find MS Paint on your computer, go to "Start" (down in the bottom left-hand corner of your screen), then you'll want to hover over "All Programs". A huge list of most of the programs on your computer should show up. Look for a selection that says, "Accessories". Hover over it until another, smaller menu appears. Find "Paint" and click on it. Viola! You're now in MS Paint! STEP TWOUp in your toolbar at the top, click on where it says "Image". From the drop-down menu, select "Attributes" (or you can use the Ctrl + E shortcut). When you click on "Attributes" a small window like this should pop up: Click here for example image! Set your attributes to the same as I have mine set. Then press "Ok". This will now give you a 200 x 40 area to work with. Just the right size for a guild banner! Click here for example image! STEP THREENow you can use all of MS Paint's fancy tools and such to make a shiny new banner! Add a background color, add some text, add some other stuff. It's all up to you! Being that this is a simple tutorial, I'm not going to go into all the intimate details of actually designing a banner. Nor shall I sit here and try to explain how to work MS Paint. If you need help using MS Paint for making graphics, then please search the web!! There are many tutorials for MS Paint on the internet. Use them!! STEP FOUROnce you have designed your banner to your liking, you'll need to save it. To do this, go to File and press Save As... A window will pop up asking you to specify where you'd like to save this on your hard drive. I will trust you know where you'd like to save it (if you don't, I recommend "Desktop" that way it'll be kind of easy to find). You will also be able to choose what filetype you'd like to save it as. I recommend using either .PNG, .JPG, or .GIF. STEP FIVEAnd you're done! All you'll need to do now is host it somewhere, but I shall cover that in a post later on. Scroll down to it if you'd like.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:19 pm
< - Super Quick Photoshop Tutorial! - > Many people like to use Photoshop for constructing graphics. It is a large, flexible, and fun program to use. For this tutorial, I'm using Photoshop 7.0 although more current versions of Photoshop are available. Also, these same steps can be followed for Photoshop Elements (as it is very similar to the other versions). STEP ONESTEP TWOYou'll want to make a new document. To do this, you can either press Ctrl + N or, from the top tool bar, press File then New. A window looking like this: Click here for image example! should appear. You'll notice you have some options as far as settings go. As you can see in my image example, I have set my "Preset Sizes" to custom, my width to 200 pixels, and my height to 40 pixels since that is the official size of all guild banners. You can make them smaller in dimension if you wish, but I'm teaching the standard here.
For this example, I have also set my resolution to 72 pixels/inch and I have RBG Color selected as my Mode. I have also set my Contents to Transparent. This means that my background will be transparent rather than solid white or some other background color. You may absolutely use the Solid White or Background Color options, but I personally like Transparent.
Now that we're all ready with the settings press "ok". If you'd like to change a setting, edit it before you press "ok". After pressing "ok", you should see something like this: Click here for image example!. STEP THREENow you can use all of Photoshop's fancy tools and effects to make a shiny new banner! Add a background color, add some text, add some other types of effects. It's all up to you! Being that this is a simple tutorial, I'm not going to go into all the intimate details of actually designing a banner. Nor shall I sit here and try to explain how to work Photoshop. If you need help using Photoshop for making graphics, then please search the web!! There are literally thousands of tutorials for Photoshop on the internet. Use them!! STEP FOUROnce you have designed your banner to your liking, you'll need to save it. To do this, go to File and press Save for Web... (you can also use this shortcut Alt + Shft + Ctrl + S).
Upon pressing it, you should see this: Click here for image example!
To the right (nearish to the top and under where it says "Save" "Cancel" "Done"), you'll see Settings. This is a drop-down menu with many different options to choose from. I personally prefer to use the .PNG-24 filetype, but you can use whichever filetype you like.
Once you have your settings as you like them, press "Save". Another window will pop up asking you to specify where you'd like to save this on your hard drive. I will trust you know where you'd like to save it (if you don't, I recommend "Desktop" that way it'll be kind of easy to find). STEP FIVEAnd you're done! All you'll need to do now is host it somewhere, but I shall cover that in a post later on. Scroll down to it if you'd like.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:25 pm
< - Making Graphics with Macromedia Fireworks! - > This is a tutorial for using Fireworks to create a graphic that can be used in your guild. Fireworks is a program for making web graphics. It has extensive export options to give you great control over the kind of file you publish. Fireworks was made by Macromedia, Inc. which was acquired by Adobe Systems in September 2005. Adobe's entries in the graphics market include Photoshop and ImageReady, but Fireworks is planned to continue alongside these products and is confirmed for at least a Version 9 update. Fireworks is currently in Version 8 and in my opinion it is the best web graphics program anywhere today. It provides cutting-edge features in a simplified work environment, so it's much easier to use than Photoshop or ImageReady if you're just starting out, and it makes everyday tasks much faster no matter how experienced you are. In this post I'm just going to breeze through the process of setting up an image and then I'll skip straight through to taking advantage of the export options. I'll briefly touch on using some of the tools in the program to create your graphic, but this is a very easy program to learn from by experimenting. Practicing your skills in this program obviously leads to developing new ones and extending what you can do, but with Fireworks that happens ten times faster than with any other graphics program I've ever worked with. For this tutorial I'll be referring to Fireworks 8, but if you have access to Fireworks 5, Fireworks MX or Fireworks MX 2004 you should be able to extrapolate something useful from these notes. smile Open Fireworks. Graphics on your guild home page can be up to 640px wide, so let's make a nice big welcome banner. Specify the width as 640px and the height at 200px. Set the background colour to white. Click OK. Extension readingCheck out these sources from adobe.com's Fireworks Developer Centre and Adobe's Edge newsletter. Product informationVisit these places to learn more if you're considering buying Fireworks.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:32 pm
< - How to Host your Guild Banner - > In this section we'll talk about what to do with that banner once you've saved it to your hard drive. In order to get your pretty banner onto the internet, you'll have to " host it". This means you'll have to upload it somewhere on the internet before you can use it in your guild. There are many fine hosts out there to use. Some cost money to use, some are free. You may even already have your own webspace in which you may store your banner in. If you do, this is great! Just use it and you'll be good to go. However, if you do not have your own webspace and need somewhere free to host your banner, then here a few good free hosts you can use: Some of these places require a membership and some do not. Please be sure and read over their FAQs, Terms of Service, and other requirements before you host through them!Once you've got your banner hosted, you'll need its URL. URL means Uniform Resource Locator. That'd be the web address of your banner. For instance, here is an example banner I made: Here is the URL for that same banner: http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleBanner.png This is the kind of URL you'll need to use to add your guild banner to your guild settings. Once you have the URL, you'll need to go to your guild's Moderator Panel. Then click on " Edit guild settings". Then all you will need to do is copy and paste the banner's URL into the space you see marked " Banner". Do NOT include any 
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:33 pm
< - Help with BBCode! - > BBCode means Bulletin Board Code. This means, it's the kind of code you would use on bulletin boards, or forums.... like Gaia. It's similar to HTML, but much more basic and less flexible. Many people use BBCode to make their text look cool and to format posts a certain way. BBCode can also be used to make links and post images. In this post,I will post the BBCode specifically for linking and images as they pertain directly to banners. All other BBCode can be found int his handy BBCode Guide: Click here for BBCode Guide For all intents and purposes, the image and URL I will use in my examples is this one (you'll need to use your OWN URLs in your codes though for them to work correctly): Here is the URL for that same banner: http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleBanner.png TEXT LINKSTo make a text link to that image, you'd type the following code: [url=http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleBanner.png]Click here to see my banner![/url] That code would generate this: Click here to see my banner!Click it! You'll be taken to my example banner. IMAGESTo add an image to your post or to a signature, you'd type in this code: [img]http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleBanner.png[/img] That code would generate this:  There you see I have posted my example banner using the [ img] tags. LINKING IMAGESTo make your image into a link for your signature or a post or whatever, you'd type in this code: [url=http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleB
anner.png][img]http://img.photobucket.com/albums/v64/badloki/Stickies/ExmpleBanner.png[/img][/url] That code would generate this: Click it! It is my banner linking to.... my banner! And those are the basics of linking and images for BBCode. Please post to this thread if you have more questions!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Fri Sep 19, 2008 5:34 pm
< - Super Helpful Banner and Graphics Related Links! - > Because this thread has barely scratched the surface of banner making, here is a good list of banner and graphics related links you may want to look at for further assistance. TOPICSFORUMS and SUBFORUMSCaptains Market - This is our own guild's subforum dedicated to requesting/offering services. Many people offer to make banners in here, so check it out! You can also post your own request for one in here. Read the stickies first though!!
Personalized Graphics - This subforum is dedicated ENTIRELY to graphic making services. This is an EXCELLENT place to go to buy/request graphics from another Gaian. WEBSITESBBCode Guide
Wikipedia BBCode Help
The GIMP homepage - GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.* * This descriptive blurb is taken from the GIMP's website. Credit for that short description goes to the website's author!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
