Announcements: Introducing INK, the Writer's Currency » RPG's New Design Team » Now Open: RPG Staff Applications » 10 Years of RPG: Share Your Story » Can't Send PMs? Need Your 10-Forum Posts NOW? » A (Friendly) Reminder to All Romance RPers. » The Newbie's Guide to RolePlayGateway: Read This First! »

Picture-editing: a tutorial

a topic in Discussion & Debate, a part of the RPG forum.

Moderator: dealing with it

Have a subject that you'd like to debate that isn't about roleplay? This is the place.

Picture-editing: a tutorial

Tips: 0.00 INK Postby miyumi on Thu Sep 14, 2006 2:14 pm

Eric has been having a hard time finding someone else to help me edit the gundam pictures, so he has asked me to write a tutorial on how to do them. Thus, this is where it will go. Hopefully, I'll have the whole thing done by tonight so I can go back to working on the gundams. After all, the sooner I get them done, the sooner they'll be available in the garage.

Whoever ends up reading this, please keep in mind that I was told to write this under the assumption that the person will have absolutely no experience editing computer pics. So, if some of the directions seem like common sense, well, they probably are, but we all know just how common common sense isn't. Also keep in mind that the instructions you think are common sense might not be the ones I'm refering to there, because everyone has a different idea about what is obvious.

Tip jar: the author of this post has received 0.00 INK in return for their work.

User avatar
miyumi
Member for 13 years
Conversation Starter Author Conversationalist Friendly Beginnings

Tips: 0.00 INK Postby miyumi on Thu Sep 14, 2006 5:22 pm

So here it is:

IN WINDOWS:

Use Paint. Don't scoff, it really is the easiest tool to use for this. Just, remember that it will not be transparent afterwards, so you need to open in a different program and add the transparency in later.

The first step is looking through all those files. You should find that many gundams are repeated, with an extension at the end like .Sh. These are simply the same gundam, with accessories added on.

Example:
http://gwing.net/album_page.php?pic_id=206

(Read the following step and the next before saving)

This gundam simply has a shield. Next, you save the original picture as Main Pic, and then again and again as the different parts: head, torso, left arm, right arm, legs, wing.... the .Sh you want to save as main pic and shield. If the .Sh has a gun on the other arm, also save it as gun.

Here's my folder (it needs to have the boosters added in, but it gives you the idea.)

http://gwing.net/album_page.php?pic_id=208

Notice that they are saved as png's. You want to save it as something that most computers can read, PNG, JPEG, or GIF are the most common that the internet will accept.

http://gwing.net/album_page.php?pic_id=207

For my examples, I'm going to work on the head. The first thing to do is hit "ctrl a" to select the whole picture. Then, move the picture so that the part you are isolating is at the top left-hand corner of the paint window. You may have to move it a bit, let go, scroll, and then finish.

http://gwing.net/album_page.php?pic_id=209

At the outside edges of your pictures are little gray boxes. When you move your mouse over them, it becomes two arrows facing opposite directions. Use these buttons to shrink your picture down. It will give you a gray line so that you know what will be broken off when you shrink it. I like to use the one in the corner to pull both sides in at once, but you may feel more comfortable doing one side at a time.

The gray lines:

http://gwing.net/album_page.php?pic_id=210

And shrunk to that line and back some more:

http://gwing.net/album_page.php?pic_id=211

If you accidentally shrink it too small and cut some of it off. hit ctrl z to go back one step, don't try just pulling it back out again, there will just be white. Also, paint only allows for three undos, which is the reason I had you keep a main copy of the picture. You can always delete and start back over from the original save step.

Now. click on the magnifying glass, and make the picture big enough to see every pixel. It automatically does six, but I prefer eight. So, my example will be in six, but the final picture will be in eight.

Click on Magnifying glass:

http://gwing.net/album_page.php?pic_id=212

Use mouse with magnifying pointer to click on the picture:

http://gwing.net/album_page.php?pic_id=213

Now, you can reposition and continue the shrinking of the size, until the piece you want is the almost touching the boarders.

http://gwing.net/album_page.php?pic_id=214

Next, use some tools to help you delete anything that is not part of the piece of gundam you want, but was too close to crop off.

There's the eraser, for precision cropping:

http://gwing.net/album_page.php?pic_id=215

The paintbucket, which fills any pixel that is touching the pixel you click and is the same color:

http://gwing.net/album_page.php?pic_id=216

And the pencil and lines:

http://gwing.net/album_page.php?pic_id=218

Which I like to use to outline the part so I don't accidentally delete pieces with the paintbucket.

Also useful is the rectangle tool, just make sure that you have the right option on it clicked, or else all it will draw are rectangle outlines. The one you want is the bottom one:

http://gwing.net/album_page.php?pic_id=217

Play around with the tools until you find what you are most comfortable with using.

http://gwing.net/album_page.php?pic_id=219

Make sure you are consistent with your cropping, that the pictures in the same gundam will go together, as well as pictures from many different gundams, because of what Eric plans on doing with them. When doing the weapons and shields that are being held, delete the arm and hand holding them as well as the rest of the gundam. Lastly, since they will be combined with the pictures I am doing. I'd suggest you use the same naming conventions. I have been calling the "left arm", the arm of the gundam that is on the left to the gundam, not the one that is on the left side of the screen.

Tip jar: the author of this post has received 0.00 INK in return for their work.

User avatar
miyumi
Member for 13 years
Conversation Starter Author Conversationalist Friendly Beginnings

Tips: 0.00 INK Postby miyumi on Sat Sep 16, 2006 8:42 am

IN MAC OSX:

Use Pixen. Run a search for it, it's easy to find and free to download. While working with it, make sure you save very often because it has an annoying tendency to quit in the middle of something, but that's really the only bug I've found.

So, the first step is to save all the files. You want one file for each part, but you also want to keep a copy of your main files. A look at my file system is here:

http://gwing.net/album_page.php?pic_id=220

As you can see, I have a folder for the original pictures, and then seperate folders for the individual gundams. I leave the name of the gundam in the filename of the part, simply adding the name of the part I will be isolating on the end. (If you're curious, PearlLyrics is no longer available, but Colloquy is my irc client and that's available as a free download)

So, when you open the picture, the first thing you want to do is make sure you have the picture as large as possible while not being covered by the toolbars. There are many of those that you'll want to see. The ones that I have on the left of my screen come already visible. To get the ones on the right, simply double click on any tool in the left tools and then any tool in the right tools. The window will automatically change with tools.

http://gwing.net/album_page.php?pic_id=221

Before you do anything else, click on the eyedroper and then click on a part of the white space, so that you have the transparent as the color you will draw with. Then, change the tool so that you don't accidentally pick another color when you go to edit. I do this so automatically, I forgot to screenshot it, but you'll see what the rectangle that shows the color looks like in the other pictures.

Next, go to edit-->Resize Canvas. If you move the thumbnail of the picture, you will see numbers. This is how many pixels difference there are between the edge of the picture as it is and the edge of the picture as it will be. Use these to determine how far you want to crop.

http://gwing.net/album_page.php?pic_id=222

http://gwing.net/album_page.php?pic_id=223

http://gwing.net/album_page.php?pic_id=224

Then, you want to make sure that the picture is properly in the outline before clicking resize.

http://gwing.net/album_page.php?pic_id=225

And voila, it automatically adjusts the view so that the picture takes up as much space as is available while still seeing the whole picture. This is why I had you resize the window first.

http://gwing.net/album_page.php?pic_id=226

Since the gundam I'm dealing with has a lot of off-white, I'm going to change the background. This allows you to see what is transparent. Always choose a color that is not in the gundam anywhere. I use either light pink or light orange, depending on how much normal pink or red is in the gundam. At the top of the main window is a button that says "Background". Click that.

http://gwing.net/album_page.php?pic_id=227

It's pretty easy to figure out how to work this window. Click on the block of color to the right of the background window, and the colorwheel will come up. Choose your color.

http://gwing.net/album_page.php?pic_id=228

Now that it's all set up, it's time to start editing the picture. I prefer to start by outlining the picture using the line tool. You may need to adjust the size of the picture.

http://gwing.net/album_page.php?pic_id=229

Then, I'll use the paintbucket to take care of large areas of color.

http://gwing.net/album_page.php?pic_id=230

http://gwing.net/album_page.php?pic_id=231

Next, I use the rectangle tool. Here is where those tool options windows come in handy: make sure the fill rectangle box is checked. By default, it isn't. Also by default, when you do check it, it will fill the box with the main color that you already have selected. You can change that if you really want to, but for the purposes of editing the gundams, it is best if you just leave it so that it will fill as transparent.

http://gwing.net/album_page.php?pic_id=232

Okay, now that you've gotten those giant blocks out of the way, select either the line or pencil tool, whichever you're more comfortable with, and clean up the edges a bit.

http://gwing.net/album_page.php?pic_id=233

And then, you can go back and resize your canvas some more to cut down on the space the picture is taking up. For this time, due to the miniscule amounts being cut off, I find it best to simply move the picture to the bottom left of the selection box, and then use trial and error to get the right dimensions. Remember, they are not implemented until you hit "resize", so if you overshoot and take off too much, you can fix it quite easily.

http://gwing.net/album_page.php?pic_id=234

Lastly, it's a good idea to make sure that the parts fit together nicely. For example, I noticed when I was doing the right arm after having created the pictures for this tutorial that a part I had been unsure of really did go with the arm, so I had to go back in and delete it.

http://gwing.net/album_page.php?pic_id=235

Tip jar: the author of this post has received 0.00 INK in return for their work.

User avatar
miyumi
Member for 13 years
Conversation Starter Author Conversationalist Friendly Beginnings

Re: Picture-editing: a tutorial

Tips: 0.00 INK Postby aeleon on Sun Nov 25, 2007 9:40 am

I don't know if anyone even sees this anymore, but all the links are outdated.

Aww, the old days. :]
As you recall, you know I love to show off,
But you never thought that I would take it this far.
What do you know?


Fancy a Butcher's?

Tip jar: the author of this post has received 0.00 INK in return for their work.

User avatar
aeleon
Member for 12 years
Conversation Starter Author Conversationalist Friendly Beginnings


Post a reply

RolePlayGateway is a site built by a couple roleplayers who wanted to give a little something back to the roleplay community. The site has no intention of earning any profit, and is paid for out of their own pockets.

If you appreciate what they do, feel free to donate your spare change to help feed them on the weekends. After selecting the amount you want to donate from the menu, you can continue by clicking on PayPal logo.

 

Who is online

Users browsing this forum: No registered users and 0 guests