Hello, dear reader! If you're reading this it means you're interested in being able to quickly and easily make your own avatars. I've seen a lot of people need help with simple image modifications which they could do themselves with a minimum of effort, and that's one of the reasons why I decided to write this guide (the other is that I've made so many of the damn things for people that my hands are likely to fall off any day now).
This tutorial is aimed at Facepunch users. There's some specific things you'll need to know before we start:
- [B]Facepunch avatars can be a maximum of 80x80 pixels. Anything above that will be resized down. If your avatar has transparency, it'll be lost if Facepunch resizes it.[/B]
- [B]They must be below 29.3 KB. I've never actually hit this limit with a static avatar, but if you use an animated APNG then you might have problems. In any case, avatars you make with this tutorial will fit easily under the limit.[/B]
- [B]They must end in the extension .jpg or .png. In almost every case, you'll want to use .png and NOT .jpg as it will result in horribly bad quality.[/B]
- I'll be using the free, open source Photoshop-alike [url=http://www.gimp.org/]The GIMP[/url] for this tutorial. Feel free to use your own alternative, but some of the labels, menus etc. may be different. If you're moderately intelligent I'm sure you'll work it out. :smile:
[highlight]Let's get it on! Lesson One: Basic Resizing[/highlight]
Here I'll be leading you through the very simplest task: Cropping, resizing a picture, adding a simple border and converting it to .png. This will take you, at most, ten minutes.
[B]Step Uno: Start Something[/B]
Start up GIMP (or your alternative of choice.) Open up whichever unfortunate image you'll be modifying. I say unfortunate because you're about to viciously slice it apart. Make sure you've got the toolbox out and that you're comfortable with how the windows are placed on the screen.
(warning, moderately large image)
[media]http://www.cubeupload.com/files/3f7400step1.png[/media]
Aw, what a cute puppy! There's a lot of wasted space to his sides, though. Let's cut him down to size. :)
[B]Step 2: Canine Cropping[/B]
Select the Crop Tool. In GIMP, it'll be in the toolbox - the icon looks like a scalpel. This is used to remove the parts of an image that you don't want.
[img]http://www.cubeupload.com/files/bcd600step2.png[/img]
Click and drag on the picture to create a box - this'll be what's left of it. Try to get it as square as you can - this'll leave you with a bigger avatar when you resize it later. You can check the exact dimensions on the bottom bar.
[img]http://www.cubeupload.com/files/cc0200croppingdimensions.png[/img]
Letting go of the mouse button doesn't immediately crop, though - you can click and drag on the box to move it around and make small adjustments. Once you're happy with the area you're removing, press Enter.
[img]http://www.cubeupload.com/files/54600croppeddog.png[/img]
(I cropped it slightly more than in the above example to remove the watermark on the bottom right.)
Check it out, you've done it! That was probably the hardest part of this very easy tutorial. :smile:
[B]Step 3: Microsize Me[/B]
Now, you've got a square picture, but it's still far too big for Facepunch. How do you fix this? Simple!
Hit the 'Image' button on the top bar, and go to 'Scale Image...' in the drop-down menu that results.
[img]http://www.cubeupload.com/files/69600pushmybuttons.png[/img]
This results in a window containing a few values. You can ignore the bottom part for now - we just need the top three boxes. Change the menu to the side to 'Pixels', as it's easier to edit it for Facepunch's standards that way - remember, we have a maximum of 80x80.
[img]http://www.cubeupload.com/files/e25000squaredance.png[/img]
Change either Height or Width to 80 - the chain symbol means that they're linked and one will automatically change when the other does, to maintain their ratio. If your image was rectangular or the two values were otherwise different, you'd change the largest one.
Then, hit Scale. :smile:
[img]http://www.cubeupload.com/files/dce00tinydog.png[/img]
Hey look, he shrunk! You could finish now, but don't you think it'd look better with a border? :)
[B]Step 4: Borderlands[/B]
Zoom in on the picture, either by opening the View > Zoom... menu, or use the simple shortcut of holding down Ctrl and scrolling the mouse wheel upwards.
[img]http://www.cubeupload.com/files/fb9000bigdog.png[/img]
Select the Pencil tool from the toolbox. This is used for creating simple, clean lines. Select the 'circle (01) brush' - this is the smallest size and will colour individual pixels.
[img]http://www.cubeupload.com/files/159c00pencilselection.png[/img]
Click once in the very corner of the image, colouring a single pixel black.
[img]http://www.cubeupload.com/files/462000cornerdot.png[/img]
Hold down Shift and click on each corner of the square in turn. Holding shift makes a line between the two points you select and it's an easy way to colour the whole side.
[img]http://www.cubeupload.com/files/1fcc00borderlands.png[/img]
And you're done! Time to save - but what's this? .jpg? This'll lead to your avatar being of the shittiest quality possible. Save it as a .png to make sure it looks good. Ignore any windows that pop up and hit Save.
[img]http://www.cubeupload.com/files/40ea00how2save.png[/img]
And you're done! Upload the image to a site of your choice or select it directly from your computer to use it.
Next week - Transparency! :smile:
[img]http://www.cubeupload.com/files/124e00checkcheck.png[/img]
I still love you even though you told me all this in a PM
:D
Still Not in a gay way though. :q:
Awesome.
GJ man.
Hey thanks man I just made myself my first avatar.
[QUOTE=TheMercWithAMouth;18187682]Hey thanks man I just made myself my first avatar.[/QUOTE]
And very nice it is too! :smile:
Nice, I'm definitely gonna remember this thread. Could you possibly make a tutorial on creating .apng's in GIMP too?
[QUOTE=That Ninja;18192398]Nice, I'm definitely gonna remember this thread. Could you possibly make a tutorial on creating .apng's in GIMP too?[/QUOTE]
I think there's a Addon for that in Firefox. Ya, its called .APNG Editor. You pretty much follow these steps and the editor is pretty self explanatory.
[editline]01:44PM[/editline]
here it is
[url]https://addons.mozilla.org/en-US/firefox/addon/5519[/url]
Most of the requests ask for transparency, it would probably be helpful to include that in this tutorial.
Hopefully people'll learn to use borders now.
[QUOTE=war_man333;18200827]Hopefully people'll learn to use borders now.[/QUOTE]
Borders aren't always good
use when appropriate, not all the time
[QUOTE=Rusty100;18201132]Borders aren't always good
use when appropriate, not all the time[/QUOTE]
I dislike them totally as an avatar maker. D:
[QUOTE=DuncanFrost;18187003]
Click and drag on the picture to create a box - this'll be what's left of it. Try to get it as square as you can - this'll leave you with a bigger avatar when you resize it later. You can check the exact dimensions on the bottom bar.[/QUOTE]
Just set the aspect ratio of the crop tool to 1:1 and you won't have even have to worry about getting it perfectly square.
[QUOTE=Rusty100;18201132]Borders aren't always good
use when appropriate, not all the time[/QUOTE]
true but it's not used a lot even when it [B]is[/B] appropriate.
If your image doesn't have any transparency then add a border
[QUOTE=war_man333;18202792]true but it's not used a lot even when it [B]is[/B] appropriate.
If your image doesn't have any transparency then add a border[/QUOTE]
Yeah, that's what I do.
[QUOTE=Analog;18200768]Most of the requests ask for transparency, it would probably be helpful to include that in this tutorial.[/QUOTE]
It'll be in the next tutorial, covering use of the Magic Wand, Lasso and Select By Colour tools. :smile:
When's the next part of the tutorial gonna be put up?
When I don't have assloads of homework i.e. for five minutes next month
[editline]08:33PM[/editline]
But really, I'll try to get it up when I can. :P
[QUOTE=DuncanFrost;18206062]When I don't have assloads of homework i.e. for five minutes next month
[editline]08:33PM[/editline]
But really, I'll try to get it up when I can. :P[/QUOTE]
I can make the transparency tutorial? that's one of the things i [b][i]CAN[/b][/i] do.
:q:
Thanks, look at the sexy avatar I created.
Puppy :)
Badass Guardian much?
[QUOTE=xpod1;18216421]Badass Guardian much?[/QUOTE]
:confused:
If you're talking about my ava, it's Nine Toes.
Fuck I was hit by the hoff again.
[quote=perfumly;18216493]:confused:
If you're talking about my ava, it's nine toes.[/quote]
[b]YOU WOKE THE WRONG DOG[/b]
caps
[QUOTE=Tugger;18222224][b]YOU WOKE THE WRONG DOG[/b]
caps[/QUOTE]
Not anymore now it's the guy from Zero Punctuation.
[QUOTE=Perfumly;18223360]Not anymore now it's the guy from Zero Punctuation.[/QUOTE]
I think it'd look better with transparency.
I like my shitty grungy backgrounds thank you very much.
I mean without the black stuff, the blue looks good :smile:
Well I'm gonna change it back to my nine-toes avatar when I get back home, the one I have right now is just a result of being bored in english class.
Sorry, you need to Log In to post a reply to this thread.
