Communications Network
Vast Empire  -  New Posts  -  Search  -  Statistics  -  Login 
 
ComNet > Engineering Corps > Engineering Corps ComNet > Graphics for the n00b- featuring GIMP
 
 
 
Author
Topic:  Graphics for the n00b- featuring GIMP Post New Topic  |  Post Reply
Aeos
ComNet Disciple
 
Aeos
 
[VE-ARMY] Sergeant Major
[VE-DJO] Krath Adept
[VE-VEEC] Engineer
 
Post Number:  2099
Total Posts:  2192
Joined:  May 2005
Status:  Online
  Graphics for the n00b- featuring GIMP September 3, 2008 1:24:45 PM    View the profile of Aeos 
Rightio.
Well, graphics lies pretty close to my heart, and thus, makes me want to be all mushy and share my experience.

When I started out here in the VE, I was pretty much screwed up with graphics. Couldn’t do anything, nada.  I remember, I was quite overwhelmed with everything the VE graphic members did, and I pretty much tried a lot to come near their skill level.

I’ve seen various members here trying their hand with it as well, and in the process make some small yet very basic mistakes that influence the quality of their work.

Everything, in this thread will be done using the Gimp program, a freeware tool that anyone can download.  Here: http://www.download.com/GIMP/3000-2192_4-10073935.html

I myself, haven't really used Gimp, so this is a learning curve for me as well considering software. But I hope that with this thread you will be able to learn more about some basic design principals, because that really makes a difference.

Basic design principles includes some of the following:


  • Composition
  • Color
  • Concept
  • Quality

As I stumble upon more random thoughts concerning these principles, I'll mention them.


A designer’s success doesn’t depend on the flashy fancy program he uses, but most obviously his skill. The flashy program is just the cherry on the cake I believe.

I’ve seen amazing things being done in MSpaint for example.

I will not be doing this tut in one go, but rather do it, week by week, day by day, give other fellow members to post their own set of hints and tips, or for others to ask questions. For the members who are posting their hints and tips, please take in mind that while you may have photoshop or Fireworks, it doesn’t mean everyone does, so keep your advice friendly, unless another member has a specific software related question.

So, what involves the process  from going from this:
Imperial Network Star Wars Image

to this: ?
Imperial Network Star Wars Image

One of the most common problems I’ve encountered on this forum with images is the following:
Imperial Network Star Wars Image

The problem here is the following:
  • The font is blurry and just not easily readable.
  • The image itself is scaled in wrong proportions, and just simply squashed.


All in all, it looks ugly and dysfunctional.

What most likely has happened here is either:

  • You applied font to the image while it was still in its original size.
  • You then merged the layers or whatever before scaling it to 100x120
  • After that, you noticed that your image didn’t fit in with the size limits of the Comnet, so you most likely brought down the quality as well.

This is how you could have approached the process:

1.If you’re image is very wide, crop it a bit till the height is more dominant in size.

2.That means going from:

Imperial Network Star Wars Image

To this:

Imperial Network Star Wars Image

All with simple cropping. So now, the image is still big.

3.Next, size it down to the 100x120 dimensions.
4.Now you can add text without the risk of text going blurry.

5.Merge the layers, save it as GIF and this would be the end result:
Imperial Network Star Wars Image


Hi, now, it aint flashy, but lookie, the text looks alot better, though I'd say the composition and size definitely needs a bit of jazzing up.

Ah...you've noticed the grainy texture as well?
I exported the Gimp image to Gif. It doesn't have the same compression capability as JPEG, and somewhere along the line, you lose that tiny bit of image quality. That's why its important to beforehand pick an image high quality. Take a look at the original image, you'll already notice it is grainy as well.

Of course, there most likely is a way around the grain issue, by fiddling around with your image modes and compression types, but for now, lets stick to the basics.

Thank you for reading this far.
ANyone is welcome to ask questions, post comments as well as post their own set of tips and hints what helps them, I will continiue to tackle this thread with new information regualry.
Until then,

Happy third of September
PC/SGM_Aeos/2PLT/1COM/1RGT/1BAT/VEA/Tadath[LoR][ES2C][CoR][CoS][SC][EW:1][RCoD][GRoM][GRP]
CPO_Aeos/(=*A*=)][MC1](=*SA*=)
TRN/ADT_Aeos/Training 1-1/Lopen/VEDJ/VE[/font]
Imperial Network Star Wars ImageImperial Network Star Wars Image
[This message has been edited by Aeos (edited September 3, 2008 2:09:27 PM)]
[This message has been edited by Aeos (edited September 3, 2008 3:22:40 PM)]
Hunter-Morrell
ComNet Cadet
 
Hunter-Morrell
 
[VE-NAVY] Leading Crewman
[VE-VEEC] Word Slinger
 
Post Number:  249
Total Posts:  503
Joined:  Jun 2008
Status:  Offline
  RE: Graphics for the n00b- featuring GIMP September 3, 2008 3:26:16 PM    View the profile of Hunter-Morrell 
I thank you for posting this cause I had absolutely no idea how to do graphics other than basic stuff.
'Whats done is done, so shut up and keep moving.' -Hunter Morrell
==============================================
Vast Empire Imperial Navy
Leading Crewman Hunter Morrell
FM/LCRW Hunter-Morrell/Kaph 2/Wing 1/mSSD Atrus/1Flt/VEN/VE/
Imperial Network Star Wars Image
==============================================
Vast Empire Stormtrooper Corps
Private Jori Lekrif
TRN/PVT Jori/Hellgate/STC Academy/Tadath/VEA/VE
==============================================
Vast Empire Engineering Corps
Word Slinger Hunter Morrell
Author/WS Hunter-Morrell/Lotaith/VET/VE
RK
ComNet Member
 
RK
 
[VE-ARMY] Sergeant
[VE-VEEC] Journalist
 
Post Number:  565
Total Posts:  663
Joined:  Apr 2006
Status:  Offline
  RE: Graphics for the n00b- featuring GIMP September 3, 2008 4:15:53 PM    View the profile of RK 
Whoa, I'm so glad you posted this. I took your advice almsot instantly after reading it and update dmy Avatar, as you can see on the Left.

I really enjoy working with GIMP, I guess it's an addiction. (Though I haven't gone through convulsions without it, so I don't think it's that severe.). Anyway, enough of the small talk, I do have a question:

I am big on Fonts, I think the best part of making an avatar is putting someones Nick on it( which to me is like personlaizing it, and that just; I don't know makes me feel like I've accomplished something.) But I was wondering, how do you give lettering special effects, like make them look shiny, or three-d ish?
TRP/SGT RK/3SQD/1PLT/1COM/1RGT/1BAT/Tadath/VEA/VE [ES 2nd Class] [CoR] [GRP]

Imperial Network Star Wars Image

"You are still too weak. You don't have enough hate. And you know something?...... you never will." -Itachi Uchiha

"Be careful when you fight the monsters, lest you become one." -Friedrich Nietzsche
[This message has been edited by RK (edited September 3, 2008 4:18:29 PM)]
Aeos
ComNet Disciple
 
Aeos
 
[VE-ARMY] Sergeant Major
[VE-DJO] Krath Adept
[VE-VEEC] Engineer
 
Post Number:  2100
Total Posts:  2192
Joined:  May 2005
Status:  Online
  RE: Graphics for the n00b- featuring GIMP September 3, 2008 6:07:36 PM    View the profile of Aeos 
On a quick note here: This is not a tutorial where I paste purdy little screenshots. I’m not going to circle the paint bucket tool in red and paste a damn picture of it. I’ll try and keep things simple and basic though.

Getting that glowing letters:
Such as:

Imperial Network Star Wars Image

1.Open a new project.

2.Size it any way you want.

3.Fill the background color, green, blue, though for the practicality of this post, let’s opt for black.

4.Grab your text tool, choose text color, in this case white for practicality. Font size it biggish, bout 55-65 is good. 
5.Type something down.

6.Next, select your text layer. Make sure it is selected. Go to the layers menu of your image window. Scroll down till you see .“Transparency” Select- “Alpha to selection”

7..Next.  In your image window, go the “Select” in the menu options.

8.Scroll down till you find “grow” Enter 3.

9.Add a new layer WITHOUT deselecting.

10.In the new layer, grab your pain bucket, select a cool green, yellow or blue and fill the selection.

11.Make sure your new layer is positioned between your background and your text layer.

12.Make sure nothing is selected, and apply a filter to the new layer. Select blur, and under that tab, select Gaussian blur. Add a value of 20.

Yay. You have glowing letters.
Imperial Network Star Wars Image
Ultimately, you can use this method with a bit more skill to make lightsabers to

EDIT: Forgot to include the 3d letters request.
RK, google is also a handy tool
I'll be covering 3d text and general font principles in my next thread, though I wont be crash coursing on how to make 3d text
PC/SGM_Aeos/2PLT/1COM/1RGT/1BAT/VEA/Tadath[LoR][ES2C][CoR][CoS][SC][EW:1][RCoD][GRoM][GRP]
CPO_Aeos/(=*A*=)][MC1](=*SA*=)
TRN/ADT_Aeos/Training 1-1/Lopen/VEDJ/VE[/font]
Imperial Network Star Wars ImageImperial Network Star Wars Image
[This message has been edited by Aeos (edited September 3, 2008 7:25:45 PM)]
ComNet > Engineering Corps > Engineering Corps ComNet > Graphics for the n00b- featuring GIMP  |  New Posts     Post New Topic  |  Post Reply
 

All times are CST. The time now is 5:08:47 AM
Comnet Jump:

Current Online Members - 5  |  Guests - 107  |  Bots - 6
Aeos, AlanRJ, Assassin, Kanderin Draken, Trix
 
< Contact Us - The Vast Empire >
 
Powered by ComNet Version 5.2.8
Copyright © 1998-2008 The Imperial Network
 

 
This page was generated in 0.277 seconds.