• Welcome to ZD Forums! You must create an account and log in to see and participate in the Shoutbox chat on this main index page.

Graphics How-To

Zeruda

Mother Hyrule
Joined
May 17, 2009
Location
on a crumbling throne
I'm seeing a lot of unnecessary posts and threads asking the same questions over and over:
"How do I make a signature/avatar?"
"How do I show a signature/avatar?"

So I'm going to make a thread here with some basic information on how to get yourself started if you don't already know how.

Firstly, please read the forum rules before you get started. Size restrictions on your sig can be found there.

[] AVATARS []
Avatars are the image that go below your username on your posts. As with sigs, there are size restrictions. The maximum size (in pixels) that your avatar can be is 100 x 100 pixels. You can still do any size under that (50x50, 50x80, 100x50, etc). There are also file size restrictions. The maximum is 19.5 KB.
EXAMPLES:
Ey61g.png
YItZP.png
ybzCM.png


[] SIGNATURES []
This is where you gotta pay attention. As you can read in the forum rules. the mods aren't going to be Nazis about your signature, but you do need to try to follow the rules. If you make a signature with an image that meets the maximum size restriction, that's fine, but if you go and add 3 more lines of texts or tiny images (like the popular dragon eggs), then you're going to get a warning.

Like with avatars, you can make the size different. Personally, I'm fond of 400x150 pixels. That's 400 pixels WIDE and 150 pixels HEIGHT. This makes it more like a banner rather than a big ol' block.

[] CREATION []
The fun part! Everybody starts out somewhere, but the first thing you're going to need is an image editing program such as Adobe Photoshop, GIMP, or even the simple Paint. I'm not going to go into the finer details of how to actually make graphics- you can search for tutorials here on the forum or on Google. But you need to make sure that you set the proper size for your avatar or signature as mentioned above.

You'll need to save your creation in a format that can be uploaded to an image host or to ZD. This means something like .jpg, .png, .bmp, .gif. What you choose depends on what you want the final version of your creation to look like. If there is going to be any transparency, you'll want to use either .gif or .png. If you want an animated avatar or signature, you'll need to use .gif. Personally, I prefer using .png for all of my avatars because it keeps the quality up. However, a lot of the time my creations are over the filesize limit, so I convert them to .gif to lower it. Most of the time they retain their quality. For sigs, I usually use .png or .jpg.

[] DISPLAY []
This is probably the biggest issue I'm seeing. A lot of people don't know how to use their avatar or signature! First, you're going to need to visit the proper section. To start, you'll need to go to your settings. From there, you can choose to edit your avatar or signature from the menu on the right:

ghtx.png


You have a couple choices, though:

//OPTION 1//
The simplest, you can just upload the image from your computer by browsing to the file, selecting it, and uploading it. This is the easiest and quickest way, but I don't like it because there is a lot of file compression, and your image loses its quality!

//OPTION 2//
You can direct link to your file by providing a URL. This means you'll need to upload your image to an image host like Photobucket, Image Shack, or Imgur. Most of the time, you'll need to sign up for a free account, but Image Shack is an option if you don't want to do that. Do not direct link from websites like deviantART! Free image hosts are there for a reason! If you link to a picture from some place like deviantART or a personal website, you're stealing bandwidth, so do the right thing and use one of the free hosts!

Once you create an account and upload your image, you'll be given a URL, so you'll be able to go to your image.
Example: http://img09.imageshack.us/img70/blahblah.png
You take your URL and put it into the text field in your avatar settings. You can do the same thing in your signature settings, or you can put the URL of your image in the forum's image tags (without the spaces, of course):
Example: [ img ]http://img09.imageshack.us/img70/blahblah.png[ /img ]

[] REQUESTING GRAPHICS []
So maybe actually creating graphics just isn't your thing. Or maybe you just don't wanna bother making one. There are a lot of artists here at Zelda Dungeon, so you can find somebody else and ask them to make something for you! In that case, please do not make a thread containing your request. Instead, please use the GRAPHIC REQUESTS THREAD.
 

Anemos

Master of Chaos
Joined
May 12, 2010
Location
The United States of Hysteria
Wow. Never knew that anyone thought that Abdobe Photoshop was harder than Paint.

To get back on topic, great job Zeruda. I think there are going to be less questions now...

As for mods not being "Nazis", I think it's slightly amusing that a moderator is actually saying that.

But, after my experiences at ZI, I quite agree.
 

Vanessa28

Angel of Darkness
Staff member
ZD Legend
Administrator
Joined
Jan 31, 2010
Location
Yahtzee, Supernatural
Gender
Angel of Darkness
Don't forget Zeruda once was a member without mod powers here too. She is not saying this because she is a mod but because of the experience she has with the mods on here since she joined. Let's say Paint is limited compared to Photoshop.
I also would like to add you can use Tinypic as well to upload pics. I like it even better than Imageshack but Tinypic doesn't have the thumbnail options.
 
Last edited:
Joined
Dec 12, 2009
Location
No Stalkors Please
Yep yep, I would definitely add TinyPic, it is better than ImageShack, in my opinion. Also, some websites will provide the 'Forum Code' (as it is called on ImageShack for example) which already has the link in BBCode so for some members who might be confused about this, they won't have to do it themselves.
This is what I mean:

That boxed in link would be the one to use. Other websites might not call it 'Forum Code', so just look for the link with something like or [URL] at the beginning =]
Also, you might want to throw in that Graphic designing CAN get very expensive! Adobe Photoshop CS5 currently sells for [I]600.00 USD[/I] from their website! GIMP, of course, is free, but is much much less luxurious than Photoshop. As for Paint, don't even try, your graphic is going to fail lol.

Anyways, thank you very much, Zeruda! This will clear up a lot of things for certain members :)
 
Joined
Oct 11, 2010
Location
The TARDIS
Thanks for this thread. Now I have the awesome pic below for my sig. ^_^

edit: okay... it was too big. I edited it to be smaller on my own computer, but when I go to insert the image into the signature it asks for a URL, and I can't upload the picture directly from my comp like you said in Option 1. How can I do this correctly?
 
Last edited:
A

alekSparx

Guest
The following errors occurred with your submission


  • You have included a total of 5 images and/or videos in your message. The maximum number that you may include is 4. Please correct the problem and then continue again.

    Images include use of smilies, the BB code tag, and HTML <img> tags. Videos are included with the BB code [video] tag. The use of these is all subject to them being enabled by the administrator.
    [*]Your signature cannot be longer than 500 characters [I]excluding[/I] BB code markup.



    When I try and upload :\
    any clue? because everything is fine with my signature and I am doing it correctly. Im choosing to give a link so yeah.. any ideas?
    [/LIST]
 

David

But you called me here...
Joined
Aug 6, 2010
I'd also like to add that if you have any questions on the creation of avatars and signatures, you can take a look at our new graphics resources thread. There is a ton of information there that will help with the improvement of your graphics capabilities.
 

Kybyrian

Joined
Jan 31, 2008
Location
Amherst, MA
Gender
Didn't I already answer this one?
The following errors occurred with your submission


  • You have included a total of 5 images and/or videos in your message. The maximum number that you may include is 4. Please correct the problem and then continue again.

    Images include use of smilies, the BB code tag, and HTML <img> tags. Videos are included with the BB code [video] tag. The use of these is all subject to them being enabled by the administrator.
    [*]Your signature cannot be longer than 500 characters [I]excluding[/I] BB code markup.



    When I try and upload :\
    any clue? because everything is fine with my signature and I am doing it correctly. Im choosing to give a link so yeah.. any ideas?
    [/LIST][/QUOTE]

    Copy and paste the text that you have when you try to submit your signature in the following style:

    [noparse][noparse]YOUR SIGNATURE CODE[/noparse][/noparse]

    From there we should be able to tell you what's wrong.
 

Zleda

Toon Deity
Joined
May 16, 2011
Location
Seattle WA
I'm having some issues uploading my signature to photobucket, AND image-shack. I go to upload it, its a .gif and I already tried .jpg and it keeps saying "Invalid file type."

I used my brand-new Adobe Photoshop CS4 to do it.... Someone help!

PS it's the right size and everything, 400x150
 

Junehs

[the.Jumping.Bean] ~
Joined
Dec 15, 2009
Location
New Hamster!
I'm having some issues uploading my signature to photobucket, AND image-shack. I go to upload it, its a .gif and I already tried .jpg and it keeps saying "Invalid file type."

I used my brand-new Adobe Photoshop CS4 to do it.... Someone help!

PS it's the right size and everything, 400x150

Have you tried tinypic? It isn't your file if it's saved correctly.
 

David

But you called me here...
Joined
Aug 6, 2010
I'm having some issues uploading my signature to photobucket, AND image-shack. I go to upload it, its a .gif and I already tried .jpg and it keeps saying "Invalid file type."

I used my brand-new Adobe Photoshop CS4 to do it.... Someone help!

PS it's the right size and everything, 400x150

It might also be that you saved it as a PSD. Considering that you have a brand new copy of Photoshop, you might not be doing the final step to save it as a PNG/JPEG/whatever. A PSD is a save file of all of your Photoshop work so that you can go back and edit it later, without having to redo the entire image.
 

Zleda

Toon Deity
Joined
May 16, 2011
Location
Seattle WA
It might also be that you saved it as a PSD. Considering that you have a brand new copy of Photoshop, you might not be doing the final step to save it as a PNG/JPEG/whatever. A PSD is a save file of all of your Photoshop work so that you can go back and edit it later, without having to redo the entire image.

Thanks HoM! You were right, I failed to "save for web and devices." I owe you one! :)
 

David

But you called me here...
Joined
Aug 6, 2010
Thanks HoM! You were right, I failed to "save for web and devices." I owe you one! :)

You don't have to choose "Save for web and devices." Choose "Save as..." and then there will be a drop-down near the place to enter the file name. Select one of the options like png, jpeg, or other wise. Just be sure you save another copy of the image as a psd so that you can use it for some cool effects in other signatures (there's this really cool one that I might show you in an upcoming signature tutorial that I'll make), and so that you can refer to your old work if you made a really cool effect that you want to duplicate.

If you have any graphics questions, be sure to ask me. I have a Skype, or you can PM me, or whatever. Just let me know if you need any help with your signature making.
 

Vanessa28

Angel of Darkness
Staff member
ZD Legend
Administrator
Joined
Jan 31, 2010
Location
Yahtzee, Supernatural
Gender
Angel of Darkness
Thanks HoM! You were right, I failed to "save for web and devices." I owe you one! :)
The purpose of Save for web and devices is more used when you create animations. Then you will be taken to another menu where you can check your animation in different browsers. And Animations can also be saved as GIF
 

Users who are viewing this thread

Top Bottom