Jump to content

Beginner's Guide to Forum Graphics


GlennThomas

Recommended Posts

http://tinyurl.com/cwnr9lt

 

Welcome to my Beginner's Guide to Forum Graphics.

 

Found this guide via a Google search? Not a registered member?

 

Sign up to the forums today!

 

The purpose of this thread is to educate members on the fundamentals of graphic design. In particular, learning how to make your own forum signatures and header/banners for use on forums such as PS3T.

 

I am aware that the majority of community here take pride in their forum signatures and trophy guide banners/headers. You only need to glance over at the User Generated Content section of the forums to see all of the member created galleries, which contain fantastic pieces of art. Whilst there are already a handful of skilled designers on the site, there are also many who say they would love to learn how to make their very own artwork. Many individuals on the site have asked me personally for some tips and advice. So I decided to create a general tutorial thread which I hope will prove useful for any novice designers who are just starting out.

 

Just to clarify, I'm not a professional graphics designer. I am just simply sharing all of the knowledge and skills I have picked up over time, in hope that it will be helpful to those who want to learn.

 

Practice Makes Perfect

 

First of all, don't be disheartened if some says they don't like something you have designed. It is all part of the learning curve. As with anything in life, practice makes perfect and it will take time to learn. It took me a long time to get familiar and confident using programs such as Adobe Photoshop. I've been designing graphics for this site for almost a year and a half, and I'm still very much learning. The important thing is to keep trying different things out, and sometime push yourself out of the comfort zone. It will help greatly in terms of developing your skills, and also finding your own unique style as an digital artist.

 

Below are some of the most important tips I can offer to anyone who wishes to learn forum-based graphic design.

Edited by GlennThomas
Link to comment
Share on other sites

Layers

 

One of the most important things with graphics and effects (particular in Photoshop) is learning about layers. This is the fundamental process of designing any sort of project. The basic idea is that any image you create is done in a step by step process, and each aspect of the design is isolated.

 

Take a forum signature for example. Typically you will have several layers.

  • Layer 1 - Background Layer (a stock image which can be found of the internet. It can be something as simple as just a coloured background)
  • Layer 2 (∞) - Render Layer (this is where your render or character will be placed. Technically you can put as many different renders in as you want. Just make sure you make another layer for each image)
  • Layer 3 (∞) - Effects Layer (this also usually consists of more than one layer, especially if you are using different types of effects. These will purely be used for creating effects)
  • Layer 4 - Text Layer (This is where you text will be located, and nothing else. Typically, this layer will be used for adding someone's ID or username, for instance.

This all might seem a little confusing up to now, but once you do a little research on layers, you'll soon get the idea.

 

Layer Order

 

The ordering of the layers is also very important. For instance you need to make sure that a render layer is above your background layer for it to show. This will mean that the render will show on top of what you have in your background layer. If you do it the other way round, the render layer will be behind the background (therefore making it invisible)

 

The simple reason why everything is "layered" and split up is for your editing convenience. Say for example you made some text and didn't like the look of it. To delete it you would also have to erase whatever else you could see on that layer, e.g the background. That's why we work in layers. If you created the text on a separate layer to it's background, you could simply delete the text layer without it effecting any other aspect of the design (the background)

 

Renders

 

This is a term you will hear a lot, once you starting learning about graphics. A render is simply an image which has been cut-out from it's original background, just leaving the object or character's body. Renders are typically saved in the Portable Network Graphics format (.png) To read more about the use of the .PNG format, click here.

 

See spoiler tab below for an example of a render.

 

[spoiler=renderexample]

Here is an image/wallpaper of the new Tomb Raider game, set for release in 2013.

 

http://tinyurl.com/c2flsoj

 

Now you can see that Lara Croft has been "cut-out" from the background, and is now transparent on any background (such as this forum)

 

http://tinyurl.com/bu2ujtx

 

Once you find a render like this which you would like to use, all you need to do is right-click and save the image to your PC. Then open up the image with your graphics program. The image will now look like this with a checkered background, indicating that it has been "cut-out" and rendered.

 

http://img690.imageshack.us/img690/7338/renderexample.png

 

See further sections of the tutorial on how to edit, resize and place your render.

 

Recommended Render Resources

 

Here are two of my favourite sites which offer a wide variety of "free-to-download" renders.

Alternatively, you can always search for a particular character/image on Google Images. Just be sure to include the term "render" or "renders" in your search.

 

Top Tip!

 

Look for images with small crests or watermarks on the image. This will usually just be a small tag indicating who did the original cutout/render of the image. Also remember to take note of the file/image format.

Edited by GlennThomas
Link to comment
Share on other sites

Fonts

 

As you may or may not know, the font/text can often "make or break" an image. Therefore it is important to give your text a lot of careful thought and consideration. Many people who want to start making their own graphics often fall into the trap of only using standard/stock fonts that are found on your PC. To make yourself stand out from the crowd and give your design that edge you need to start thinking about downloading a range of different font typefaces. In doing this, you will build up a great collection of fonts to suit any sort of theme or genre for your project.

 

Top Tip!

 

One of the most common techniques used when making trophy guide banners/headers for instance, is to find an image of the game (e.g the official cover art and/or logo) and try to replicate it's style of font in any additional text that you add to that image. Not only will the text fit in perfectly, it also makes the design look more professional and authentic.

 

Most official fonts can be found via a simple search. Just enter the key words into a search engine, for example "Uncharted Font"

 

This might seem very difficult at first, as this technique usually requires a fair bit of knowledge on text effects. Remember, it doesn't have to be perfect to look aesthetically pleasing to the eye. You only need to look at it from a basic level. See spoiler below for an example of how to implement suitable fonts/text into your artwork.

 

[spoiler=fonttutorial]

Take the Uncharted Logo for example.

 

http://tinyurl.com/c7b7tnw

 

As you can see the typeface/font is rather thick, large and bold. It also looks damaged and broken up to suit the nature of the game.

 

If you can't replicate the logo exactly, just try to find a font which is very similar, in terms of all the characteristics I mentioned above.

 

So in this case, I would recommend that you avoid using thin fonts, if you plan on using it alongside the text above.

 

Here is a font I have found which has a very similiar look. All you would need to is change the font colour to white, and write your text in capitals and it would look fitting when coupled with the Uncharted logo.

 

http://tinyurl.com/cgh9nok

 

To download the "Very Damaged" font, click here.

 

Installing Fonts on your PC

 

Downloading and installing fonts on your PC is simple. Some fonts cost money, but there is a huge collection of typefaces which you can download for free. All you will need is a zip file extractor such as WinRar, in order to open and install the fonts.

 

Note - This process will install the chosen font on your computer. You will then have that particular font at your disposal for use in a range of different programs such as MS Office, Photoshop or any other software that allows you to create and modify text.

 

  • Step 1 - Install a zip file extractor such as WinRar on your PC.
  • Step 2 - Find a font that you like on one of the sites mentioned above.
  • Step 3 - Click the download button.
  • Step 4 - Once the download has finished, open the file in WinRar. (this will be the name of the font and a file extension usually .ttf)
  • Step 5 - Click and highlight the item, then press "Extract To" button at the top of the window.
  • Step 6 - Choose where you would like to extract the file to on your PC. I always extract to my Desktop for convenience.
  • Step 7 - Once the process is complete, locate where you extracted the file too, and double click the item.
  • Step 8 - A window should appear giving you a preview of the font, and an option to either "Print" or "Install". Click Install.

The font will now be installed on your PC. Here are a few sites which I recommend for downloading free fonts.

To see a complete list of all the fonts on your PC, click Control Panel > Appearance and Personalization > Fonts.

 

Working with the image quality and dimensions

 

No matter what image or graphic you are trying to create, it is paramount that your stock image (whether that be a render or a background) is the ideal/optimum size and quality.

 

Top Tip!

 

When searching for an image or render which you intend to use in a graphics project, categorise your search as "Large" for image size. This will filter to only the largest (which are also the highest/best quality) images.

 

This can be done on Google Images. See below.

 

[spoiler=imagesearch]

http://img801.imageshack.us/img801/3108/imageseachsize.png

 

Upon finding a suitable image for you project, please refer to the "Maintaining Aspect Ratio" below section, for tips on maintaining the quality of your image, despite reducing it's size.

 

Maintaining Aspect Ratio

 

This is very important. If you don't know what this term means, let me explain. It is a very simple, but effective way of achieving an impressive looking graphic.

 

Some graphics programs are different, but all you need to do is hold the shift key, when grabbing the corner and resizing an image. This will maintain the "aspect ratio", which basically means the image height and/or width won't be distorted or stretched, but resized proportionality. If you fail to use this method when editing an image, the outcome will most likely look very unrealistic and out of place.

 

Cinema 4D (C4D)

 

A C4D render is a 3D graphic or picture that has been made with a program called Cinema 4D. There are lots of different types, sizes, shapes and colours of C4D which can be used to enhance the look of graphics such as forum signatures.

 

You can find lots of C4D renders here, just through a simple Google search.

 

One of the most common and effective way of using C4D renders is by placing them in a separate layer above your background or character render, and setting the C4D layer to overlay in the settings. This will create an outline of the C4D on your image, rather than it just blocking out the contents of your other layers. It is also worth taking note that C4D effects will not work or appear on a plain white background.

 

Brush Effects

 

Just like fonts, you can download a diverse range of different brushes for use in programs such as Photoshop and GIMP. They are easy to find through a quick search on the internet. Brushes can enhance the look of your graphic greatly. They are commonly used to mimic natural elements such as splatters of mud, blood or even weather effects snow, by using the correct size and colour of brush.

 

I recommend that you do a little independent research around brushes yourself, as it depends on entirely on what you are aiming to create or design. Splatter brushes are used a lot in forum signatures nowadays, as they create an eye catching effect, almost as if you have painted your work, instead of designing it on a PC.

Top Tip!

 

If you want to create a painting/spatter effect on your render, I recommend that you learn and get familiar with the eye dropper tool. Most graphics/image editing programs have this feature and it comes in really handy when you want to make your forum signature looks like a real painting.

 

You can use the eye dropper tool to take a sample of the colour used a particular area of an image. All you need to do is simply select the tool and click the area with the colour you want to use. Then the colour will appear in your colour palette. You can begin adding brush effects with that colour around your image. After a bit of practice, you can even use brush effects to make it look as if your focal/render is being splashed with paint.

 

See below for two video tutorials. The first video is a brief introduction to the eye dropper tool, and the second is a tutorial for one of my favourite brush effects.

 

[ame=http://www.youtube.com/watch?v=IpuuJtl_rPA&feature=related]Photoshop Tips - Eyedropper Tool - YouTube[/ame]

 

[ame=http://www.youtube.com/watch?v=JUjXJ5ZPO5M]Fractured image effect - Photoshop - YouTube[/ame]

Recommended Graphics Programs

 

Thank you for your time, and I hope this tutorial will prove useful for the community here.

 

Finally I wish you all good luck with any graphics projects you undertake in the future.

Edited by GlennThomas
Link to comment
Share on other sites

Great guide mate. Very thorough and informative. One tiny thing thing caught my eye though. For your font example, you used the "Very Damaged" font to be similar to the Uncharted font. I have found one that's even closer to it. It's called Base 02. Check the spoiler to find an image for it.

 

[spoiler=as;ifljafl]http://www.dafont.com/img/illustration/b/a/base_02.jpg

 

 

 

 

Other than that small item, I'm very impressed with the guide. Again, well done

Link to comment
Share on other sites

Great guide mate. Very thorough and informative. One tiny thing thing caught my eye though. For your font example, you used the "Very Damaged" font to be similar to the Uncharted font. I have found one that's even closer to it. It's called Base 02. Check the spoiler to find an image for it.

 

[spoiler=as;ifljafl]http://www.dafont.com/img/illustration/b/a/base_02.jpg

 

 

 

Other than that small item, I'm very impressed with the guide. Again, well done

 

Thanks.

 

Yeah, about that. I was trying to get the point across that if you can't find the official font, it's quite easy to find a similiar, next best alternative which will still look the part. The font from Uncharted is indeed Base 02, but some other game fonts aren't as easy to find with a simple search, and you may need to find use something that looks similar.

 

That's what I was getting at with this...

 

If you can't replicate the logo exactly, just try to find a font which is very similar, in terms of all the characteristics.

 

http://img571.imageshack.us/img571/1397/postlinep.png

 

Looks great mate. Might download GIMP and start giving sigs a try, they seem fun if I can get good at them.

 

Thanks. GIMP is a great free alternative to Photoshop. It has a lot of the same features.

 

Just to let every know, I am planning to keep adding further tips and information to the thread when I can.

Link to comment
Share on other sites

  • 2 weeks later...
Thanks.

 

Yeah, about that. I was trying to get the point across that if you can't find the official font, it's quite easy to find a similiar, next best alternative which will still look the part. The font from Uncharted is indeed Base 02, but some other game fonts aren't as easy to find with a simple search, and you may need to find use something that looks similar.

 

Oh ok. I understand what you mean. I have had that problem before. I try to use the font from the series each time I make a signature from a game or movie series but, like you said, they're not always available, which is rather frustrating :p

Link to comment
Share on other sites

Oh ok. I understand what you mean. I have had that problem before. I try to use the font from the series each time I make a signature from a game or movie series but, like you said, they're not always available, which is rather frustrating :p

 

Yeah, that what the point I was trying to make. Sometimes the typeface/font used in game fonts are custom made, and cannot be downloaded commercially. Having said that, you can usually make a pretty good near replica, but other times it's much more difficult.

Edited by GlennThomas
Link to comment
Share on other sites

Yeah, that what the point I was trying to make. Sometimes the typeface/font used in game fonts are custom made, and cannot be downloading commercially. Sometimes you can make a pretty good near replica though, but other times it's much more difficult.

 

Usually if I can't find the right one, I'll just use whatever I think looks cool.

 

Most of the time I click on what looks like the right one in the google search but it just takes me to that site's forum post of someone asking about the font I'm looking for :p

Link to comment
Share on other sites

  • 2 weeks later...
Looks great Glenn! Hopefully this will lead to an increase in forum artist activity.

 

I've always been interested in trying my hand at graphics, but I just don't have as much free time as I used to.

 

Thanks for the feedback, slamma.

 

Yeah, that's kind of the main purpose of this thread really. Very pleased that it got a sticky so fast. :D

 

If you need any help with anything graphics-related in the future, feel free to leave a post here or drop me a PM. That goes for anyone who's interested too. :)

Edited by GlennThomas
typo
Link to comment
Share on other sites

  • 2 months later...

Maybe someone here could help me out. I use CS5 and for some reason, I can't get transparent backgrounds to work.

 

I've tried a new document with background set to transparent. I've tried deleting the white background of images. I've tried adding a layer and set it to transparent. I've saved the image as .PNG and .GIF. I've tried the 'For Web' save option. The transparent option was checked.

 

Whatever I do, I end up with a white background. The weird thing is though, when I open the image in Sony Vegas Pro (video editing), it's transparent.

Link to comment
Share on other sites

Maybe someone here could help me out. I use CS5 and for some reason, I can't get transparent backgrounds to work.

 

I've tried a new document with background set to transparent. I've tried deleting the white background of images. I've tried adding a layer and set it to transparent. I've saved the image as .PNG and .GIF. I've tried the 'For Web' save option. The transparent option was checked.

 

Whatever I do, I end up with a white background. The weird thing is though, when I open the image in Sony Vegas Pro (video editing), it's transparent.

 

How very strange. That's shouldn't be happening given the steps you've stated.

 

Are you aware of the Quick Selection Tool? (keyboard shortcut - W) That is often used to cut out backgrounds and renders. Once selected you will see some options appear on the toolbar at the top of the program. One will have a little plus icon next to the brush (Add to selection) and the other a minus (Subtract from selection) This will basically do the same thing as selecting "Transparent" in New, but it's used when you want to make more specific edits or changes to an image.

 

Also make sure that Colour Mode is set to RGB Colour, and that Background Contents is Transparent. Then all you need to do is save it as a .PNG and it should render transparent wherever you use it.

Link to comment
Share on other sites

I've tried all that, but none works :(

 

EDIT: I might know what the problem is. Let me test it out.

 

EDIT 2: Found the problem! Wow, it was so simple. All this damn time. I upload my images to my Flickr account and it automatically converts my images to .JPEG, which doesn't support transparency. Tried my photobucket account which doesn't do that and what do you know, the transparency is there!

 

EDIT 3: Now I wonder which site I should use. Flick is pretty nice, but obviously sucks for the reason given above. Photobucket isn't bad, but that one has a 10gb monthly bandwith limit. Is imageshack a good website to register on? I've used it before, but never had an account and it seems you need one right now.

Edited by Vuule
Link to comment
Share on other sites

Glad you've sorted it out. Who would have thought it could have been something as simple as that!

 

I highly recommend ImageShack. It's the best file/image hosting site, in my opinion. I've used Photobucket but the constrained bandwidth limits just didn't work for me. I think you can store 400 or 500 images on one ImageShack account, which is awesome for me as I regularly upload my graphics on the site.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...