Sincronos.net Forums

Sincronos.net Forums

Nothing is permanent, everything is constant.
 
It is currently Fri Nov 17, 2017 11:31 pm

All times are UTC - 6 hours [ DST ]





Post new topic Reply to topic  [ 7 posts ] 
Author Message
 Post subject: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Sun May 30, 2010 5:10 am 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:24 am
Posts: 937
Location: Oregon, USA
And to open this particular forum....A redo of the GIMP avatar creation guide. I use GIMP because, well, it's free. I like free. :-P Admittedly this method doesn't produce the fanciest avatars in existence...but I like them, and "fancy" doesn't necessarily mean "superior" anyway.


So, let's start with a premise: That CWS is using one of the official Mass Effect 2 avatars, and the mass of text along the bottom is horribly jarring, as are the hard edges of the image against the page background. The solution, of course, is deleting the avatar via the admin control panel making a better one for him to use.


Step one: Find a base image. Seeing as the one CWS is using now (according to the premise, of course :geek: ) features a krogan, let's go with another such image. I decided to crop from this one.

One of the nifty features in the current version of GIMP is the ability to constrain the aspect ratio when creating a selection box. We'll use this to ensure our selection is square (1:1), and thus not get distorted when shrunk down to avatar size:
Image
Figure 1a: Settings to fix the aspect ratio of a selection

(You can use the same feature to keep the height, width, or both constant by using the dropdown; but I find the aspect ratio to be by far the most useful setting. It's especially handy for scaling down images for things that have oblong dimensions, like sig banners.)

After getting the selection the way you like, right-click and select "Edit->Copy", then right-click and select "Edit->Paste As->New Image" (if you'd rather use hotkeys, it's Ctrl-C followed by Ctrl-Shift-V); this will paste the selection into a new image:
Image
Figure 1b: The selected portion of the base image


Step 2: Scale the image down to the desired size, altering it if necessary. Going with forum standard sizes, we'll be making a 100x100 avatar. Right-click the image, select "Image->Scale Image..." and put in values of 100 pixels by 100 pixels. And...scale!
Image
Figure 2: Scaled down image
If the image looked blurry, we could apply a filter to sharpen it here (right-click, "Filters->Enhance->Unsharp Mask"), but it looks fine here so we'll just move on.


Step 3: Get some imagery for a border. While it's easy enough to just use a solid color or one of GIMP's patterns here, I find it helps add some distinction to take part of a somewhat related image to make the border from. I decided to go with a piece of the krogan homeworld, as the colors blended well and the surface patterns were reasonably interesting looking.

Since we just went over selection I won't describe that again. Here's the piece I selected:
Image
Figure 3a: Selected portion of image for border

And since we just went over scaling too I won't describe that again either:
Image
Figure 3b: Scaled selected portion


Step 4: Place the border image over the base image, and remove desired portions. Here we add the border image as a layer to the base image, and we "cut a hole" in it to show the base image underneath. Right-click "Edit->Copy" (or Ctrl-C) the border image, go to the base image, and right-click "Edit->Paste" followed by right-click "Layer->New Layer" (or Ctrl-V followed by Ctrl-L) to add it as a new layer. True, you could've done right-click "Edit->Paste As->New Layer" instead, but I find the paste followed by new layer to be more intuitive.
Image
Figure 4a: Notice the layer dialog

For the next part, make sure the border image is the active layer (click on it to be sure; if you can't see the dialog, right-click "Windows->Dockable Dialogs->Layers"). Then, right-click "Select->All" (or Ctrl-A); then right-click "Select->Shrink...", select 6 pixels and make sure "Shrink from image border" is checked, then shrink it.

If all you want is a plain square frame, that's sufficient right there. I wanted to add a little something in the upper-right corner though, since the base image was so bare there; so I ended up cutting out a larger chunk out of that corner. Not going to cover that here, though.

When you have the selection for your hole, right-click "Edit->Clear" (or Delete) to "cut" the hole out. Right-click "Select->None" (or Shift-Ctrl-A) to remove the selection so you can see the whole thing without the animated selection border over the top (Remember to do this; I'm not going to repeat this after every single step :-P ).
Image
Figure 4b: Image and basic border

Normally we'd be done with this step, but I wanted to add a little more to the border first. Specifically a scaled-down version of part of the Mass Effect 2 logo. Not going to repeat myself on scaling here; once you had it the size you want, you'd copy it (like we did with the big border image), then you'd right-click "Edit->Paste" (or Ctrl-V) it in the main image, drag it where you wanted it to go, and click somewhere outside the pasted copy to attach it to the layer. You can see what I did here:
Image
Figure 4c: Now with improved (nonzero) logo quantity

This is a good time to start periodically saving your work. Use GIMP's XCF format, as it'll maintain useful information like layers.


Step 5: Add a bevel the border. A bevel allows for a simple 3D-looking effect with minimal effort. In the layer dialog, right-click the border layer and select "Alpha to Selection", this makes a selection out of the nontransparent portion of the layer (ie skips the hole). Then in the image, right-click "Filters->Decor->Add Bevel...", we'll go with 3 thickness and have both boxes unchecked, then apply the bevel.
Image
Figure 5: With bevel border action


Step 6: Add a shadow outline to the border if necessary. Depending on the colors of the border and the base image, as well as personal taste, you might wish to have some shading around the inside of the border. Here, I thought it was worthwhile.

Back to the layer dialog, right-click on the base image and select "New Layer". We want the fill type to be transparency, the defaults should be fine for everything else.

In the layer dialog, right-click the border layer and select "Alpha to Selection", then click on the newly created transparent layer. Then in the image, right-click "Edit->Stroke Selection...". We want a width of 1 pixel here; there's a ton of options under line style if you want to experiment but nothing necessary here. Click OK, and assuming your foreground color was the default black you'll have a slight black shadow around the edges of the border:
Image
Figure 6: Just a hint of darkness


Step 7: Add text. Just to differentiate it somewhat. As an added bonus, having something like a username makes it harder for someone to steal it and claim it as their own. Avatars are an identifying mark, after all.

The fun part about text in images is fonts; personally I look on http://www.dafont.com/ for fun free fonts, most of the time. Here, I decided to go with a font that resembled that used for the Mass Effect 2 logo, for thematic appropriateness.

In the layer dialog, click on the border layer to select it, so our text will go on top of it instead of under it. Using the text tool is pretty straight forward (it's the tool with the letter "A" as its button): click, type, tweak various things in the tool settings (like font size) until you're happy with how it looks. Move it around with the move tool (the cross with that looks like four arrows) if desired.
Image
Figure 7: Text


Step 8: Bevel the text, if desired: We already covered beveling, so I'm not going into it again; the only difference here is I made it thickness 1, so it's hardly noticeable:
Image
Figure 8: Beveled text...really


Step 8.5: Pretend this fixup was a planned step all along. ...I discovered after I got this far that I didn't like where I put the text. So I moved it, using the move tool.
Image
Figure 8.5: Because even screwup evidence deserves visual aid


Step 9: Add a shadow outline to text, if desired. We went over this already, too; and besides, it wasn't desired in this case.


Step 10: Render final image for avatar. This one's pretty easy. First, save your work again (you have been saving, right?). Next, right-click "Edit->Copy Visible" (or Ctrl-Shift-C) then right-click "Edit->Paste As->New Image" (or Ctrl-Shift-V), to get everything in a single, one-layer image. Right-click "Image->Flatten Image" to get rid of the default transparency, as this can save us some trouble later.

You can save it as a JPEG or PNG right now if you want, right-click "File->Save As" (or Ctrl-Shift-S) and give it the appropriate extension. I, however, want to save it as a GIF, and I don't like the default conversion options so I'm going to convert it manually.

Right-click "Image->Mode->Indexed...", and select optimum palette and 256 colors (should be the default) and no color dithering. It might not look good due to the color limitation; if so, undo the conversion with right-click "Edit->Undo Convert Image to Indexed" (or Ctrl-Z), then decide what nonpaletted format above you want to use.

This one looked fine though, so now right-click "File->Save As" (or Ctrl-Shift-S) and save it as a GIF. Last step, if you get the prompt for file options, let's set some copyright information for Mass Effect 2. You know, credit where credit is due and support for fair use and all that.

Image
Figure 10: We didn't claim ownership of the game, honest


And...we're done!
Image


Hopefully all this verbosity will be of some use. While on the subject, if you're concerned by the length of this post, you don't need to be. In all likelihood, reading this post would probably take longer than the steps of combining the images and stuff, it's not usually time-consuming. Of course, you can (and should!) experiment with various steps and settings, to see what exact settings and approaches appeal to you personally. And avatars aren't the only thing this works on either, sig banners and other images can benefit from this treatment.

_________________
Image


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Sun May 30, 2010 8:49 am 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:17 am
Posts: 3164
Location: NoDak, U.S.A.
Awesome tutorial, thanks! 8-)

_________________
Image
Image Image
Snow banner by Synkopated; Family banner by The Phiend


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Wed Mar 27, 2013 12:31 pm 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:17 am
Posts: 3164
Location: NoDak, U.S.A.
Okay, GIMP question (because none of my old Adobe software is compatible with Windows 7, evidently). Is there a way to extract individual frames from an animated .gif?

_________________
Image
Image Image
Snow banner by Synkopated; Family banner by The Phiend


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Wed Mar 27, 2013 3:31 pm 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:24 am
Posts: 937
Location: Oregon, USA
CWS wrote:
Okay, GIMP question (because none of my old Adobe software is compatible with Windows 7, evidently). Is there a way to extract individual frames from an animated .gif?
Yes. When you open the GIF with GIMP, each frame will be a separate layer. Generally you'll want to follow this up with a right-click and Filters->Animation->Unoptimize, to replace any partial frames with full frames (frames in animated GIFs can include only changes from the previous frame, saving in filesize but making it harder to work with; the Unoptimize reverses that).

Then you can simply select the layer you want, copy it (Control-C) and paste it as a new image (Control-Shift-V). Alternatively, if you don't want to mess with the layers dialog, a right-click with Filters->Combine->Filmstrip (with "Fit height to images" checked) will make a single image with all the layers side-by-side, and you can use the ordinary selection tools from there.

_________________
Image


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Sun Aug 20, 2017 11:07 am 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:17 am
Posts: 3164
Location: NoDak, U.S.A.
...And four years later, I can't seem to figure out how to create an animated .gif, from scratch. :oops:

_________________
Image
Image Image
Snow banner by Synkopated; Family banner by The Phiend


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Wed Aug 23, 2017 9:36 pm 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:24 am
Posts: 937
Location: Oregon, USA
CWS wrote:
...And four years later, I can't seem to figure out how to create an animated .gif, from scratch. :oops:
For a simple animated GIF?

Assemble all the frames in one image in GIMP as layers (each frame will be its own layer). When you export it as a GIF, the dialog after you choose the filename will give you the option to save it as an animation (and what frame delays to use, whether it repeats indefinitely or not....). Before saving, you can use the playback filter (Filters->Animation->Playback) to try different speeds, there's a dropdown on the bottom of the playback window that lets you set the frames per second (fps). The frame delay when you save is in milliseconds, so the number will be 1000/fps .

_________________
Image


Top
 Profile  
Reply with quote  
 Post subject: Re: The Phiend's Guide to Avatar Creation Using GIMP
PostPosted: Wed Aug 23, 2017 9:48 pm 
Offline
Site Admin
User avatar

Joined: Sat Jan 16, 2010 12:17 am
Posts: 3164
Location: NoDak, U.S.A.
The Phiend wrote:
CWS wrote:
...And four years later, I can't seem to figure out how to create an animated .gif, from scratch. :oops:
For a simple animated GIF?

Assemble all the frames in one image in GIMP as layers (each frame will be its own layer). When you export it as a GIF, the dialog after you choose the filename will give you the option to save it as an animation (and what frame delays to use, whether it repeats indefinitely or not....). Before saving, you can use the playback filter (Filters->Animation->Playback) to try different speeds, there's a dropdown on the bottom of the playback window that lets you set the frames per second (fps). The frame delay when you save is in milliseconds, so the number will be 1000/fps .
Ah, so that's it...one of the graphic editing programs I'd used previously had an option to convert all the images in a given folder into frames in an animated .gif, so I was expecting to have to do something like that, I guess that was what threw me off. Thanks!

_________________
Image
Image Image
Snow banner by Synkopated; Family banner by The Phiend


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 6 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Template made by DEVPPL