Star Wars Roleplay: Chaos

Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

[Guide] Edit Your Own Image, Dammit!

HK-36

The Iron Lord Protector (Neutral Good)
Greetings and welcome to the first episode of Do It Yourself, Dammit, I'll be your host HK-36,

In this Guide I'll go over the basics of digital image editing and instruct you how to crop, refine, and edit images which can later be used in construction of custom signatures, banners, or avatars. Such skill is rather useful, on and off forums, and it is rather easy to learn, at least the basics of it, I find it to be more tedious than difficult.

Whether the methods I use to edit images in this Guide are correct can be questionable, as I am no master of the Photoshop and indeed an idiot, but they do work, they are simple and quick to pick up, and they do give results.

Everything done in this Guide is completely free and available to you just few clicks away, the program I will be using to edit the image is called GIMP 2.8- The GNU Image Manipulator Program (Link here) completely free, you can download it and use it in just few minutes.

The image I will be editing is called Savage Tales- Red Sonja Cover by Nebezial (link here), as requested by [member="Darth Praelior"] I was to color the skin on the image pink, the hair purple, and darken the shade of blood so the image can be made into an avatar.



Part 1 Cutting The Image
1. To start things off, once you have your image loaded you need to cut out the rough portion you will be doing the edits on, this can be done by the use of Scissors tool, as seen in red circle on the right.

Guide_1_1.png
2. To use the scissors you need to click on the image where you want to place the initial point, then place a second point in a straight line to outline the counters of the object you want to select. The line will automatically adjust and mold to outline the nearest contours, whether the line outlines the proper contours you want to select depends on number of factors, such as the shape of the object, color, shade, and saturation differences, and the distance between it and the Scissor Line you've placed.

Guide_1_2.png
3. The Scissors Line can be modified by clicking and dragging the white points that mark the end of each segment placed, just as well additional points can be placed on the line to modify it further by clicking on the line and dragging it. Using these methods you can shape the line rather close to outline the object you wish to modify.

Guide_1_4.jpg
4. While you can attempt to outline exactly the image you want to modify it will be often tedious, and difficult, if not impossible, without use of additional tools, which I will cover further on.

Guide_1_5.jpg
5. So, to complete the selection you must complete the circle, click on the initial starting point of your Scissors Line and the selection will be made, the sign of it is the black and white flashing line which you will see further on.

Guide_1_6.jpg
6. Now with the selection made we can freely copy the image, easily done by pressing Control and C keys together, and we can move on by clicking the File tab and choosing New option, seen in red circle, this will create a new image into which we can paste our selected portion.

Guide_1_8.jpg
7. When creating new image what most important to me are is the Width and Height options seen in Red Circle and Fill With option seen in blue circle, the Width and Height shown in image was the one of the current image from which the New option was chosen, this is done automatically and at the time it fitted with our needs, however for Fill With tab I had to choose Transparency, otherwise the image would be placed on a background of the background or foreground color, which could interfere with further editing of the image.

Guide_1_9.jpg
8. If done correctly the new image should be just a shape with background of squares in different colors of gray, as seen in the image below.

Guide_1_10.jpg
9. Now to add the new image go to Edit tab, then choose Paste As option and finally Paste As New Layer, as seen in the red circle, that will make the image easier to edit, able to move around and be edited without interfering with other images. Also, as you can see, Ilias was online.

Guide_1_11.jpg
10. Now as you can see that is the portion I have selected with the scissors tool, while its rough shape is there, there are chunks of background still visible, something which we will have to remove by refining the image with more selection tools such as Fuzzy Select and Free Select.

Guide_1_12.jpg

Part 2 Refining The Image
11. Since the image I was editing was to be used for an avatar, I did not needed half of it, while it was something I could have done while selecting the image with the Scissors I decided to show off another selection tool, the Rectangle Box. Very simple in use simply click and drag to make a rectangle or square, as seen in red circle, once the selection is made you can Cut or Clear to remove the image you have selected by the Rectangle. You will be seeing this tool later on when making simple Boarders for avatars and signatures.

Guide_1_13.jpg
12. Below you can see what it looks like, I usually use the Cut command to clear away large portions of the image like that, that way if I'll screw up, which happens often enough, I can always paste the portion if for some reason the Undo command is not working.

Guide_1_14.jpg
13. Now we will use another useful tool, Zoom, seen on the right in red circle, you can also use it via Z the shortcut for it, simply click left mouse button to Zoom In, click again while holding the Control button to Zoom Out.

Guide_1_15.jpg
14. Now is the time to introduce one of the heroes of image editing- the Fuzzy Selection tool, seen on the right side inside a red circle. This tool selects continuous regions of the image based on the colors used, very useful when clearing away the background left in the image.

Guide_1_16.jpg
15. As you can see below in red circle with one click I was able to select a larger chunk of the background portion, shown by black and white flashing line. There are few dots unselected in there, which will happen often, they can be added to selection by holding Shift button and clicking on the dots. The fuzzy selection is a much more precise tool than Scissor or Free selection but it is more tedious to use when clearing away segments where there are many colors involved, as plenty of clicking will be involved.

Guide_1_17.jpg
16. With more clicks I was able to fully select the segment I had previously highlighted and another segment seen in red circle, while you can clear things away as you go I always find it quicker to select large portions and clear them away large swats at a time, selecting larger regions is especially useful when re-coloring specific parts of the image, as otherwise it could happen that you change the color of the same part twice by accident and, believe me, it messes things up badly especially if you don't notice at first. When selecting more regions in the same selection remember to hold Shift, however if you release Shift and the selection disappears, don't panic, you can use the Undo command via Control and Z buttons to restore the selection.

Guide_1_18.jpg
17. In this next image you can see in the red circle that I have selected a wrong portion of the image via Fuzzy Selection on purpose (presumably). If something like this happens to you it can be undone in two ways, by holding the Control button and clicking on the selection made, this comes in handy when clearing large selections from portions of images you don't want selected, or by using the Undo option. Also you can see that the image starts to progressively lower, that was me being an idiot and not noticing that happen when taking screenshots and pasting them into Paint until it was too late.

Guide_1_19.jpg
18. And as you can see in this next image, the selection has been removed from the gauntlet and I could continue on with my work.

Guide_1_20.jpg
19. Plenty of curses and clicking later, all of the large swats of background have been selected by the Fuzzy Selection tool.

Guide_1_21.jpg
20. And with one click it was all gone. As you can see there were few groups of dots from background still left even after all of that selecting, so I decided to do away with them via Rectangle Selection tool.

Guide_1_22.jpg
21. As seen below in the red circle with one selection I was able to get all those small groups of dots and remove them with tactical use of the Cut command.

Guide_1_24.jpg
22. And this was how the image looked after all of that, I used the Fuzzy Selection tool to check for any more outlying groups of dots I could have missed, I did that by clicking on the transparent background, highlighting it and as result any dots around the image as it would surround them in the flashing black and white border.

Guide_1_25.jpg
23. However, I was still not done with refining the image, as you can see in the red circle around the hair of the barely clad lady there were still spots of green from the background, and I was not going to have any of that. So, I zoomed in on the image until I could tell the pixels apart from each other and I started clicking away with the Fuzzy Selection tool.

Guide_1_26.jpg
24. It was more or less self-inflicted torture but finally I was able to find as many spots of green background left in the image and erase them, finally concluding my efforts to refine the image and prepare it for editing. That's where the real tedious part of this guide came into play, the Free Selection tool.

Guide_1_28.jpg
Part 3 Editing The Image
25. After a nap and letting your wrist rest, we start off this section by selecting the Free Selection Tool as seen on the right side of the screenshot below in the red circle.

Guide_1_29.jpg
26. This tool works on a basis similar to that of Scissor Selection, first click makes your initial point, second click lays down the line, you continue on until you make a full circle and that changes into selection, indicated by flashing black and white border.

Guide_1_30.jpg
27. While you certainly can use it just by making shapes out of straight lines, here's the kick of the Free Selection tool, you don't have to. You can just hold your left mouse button and continue to draw the line as if it was the Pencil tool in MS Paint, as such you can make abstract selections tracing the portions of the image as accurately as you can.

Guide_1_32.jpg
28. Then you complete the selection by completing the circle and it's done, hold shift to add to the selection by another loop and you can continue the process. I used this tool for all my editing in this project since the image contained wide range of colors, making use of tools such as Color Select or Fuzzy Select inefficient for detail editing as when clicking on the hair it would also select portions of the bracer, because the colors used in some of their shades are the same. The irregular shapes of the strands of hair do not make the whole job easier.

Guide_1_33.jpg
29. None of this would be quick to do, at least not by my methods although at the time I'm not aware of any other that would make this job easier. Anyway, long strings of curses and few mistakes I'm not proud of (at one point I forgot to hold the Shift button so I had to do a portion of the hair all over again) later I finished selecting all the hair on the image I could find, and I was ready for some real editing, "yee-haw" as Cira would say, or "rawr", whatever.

Guide_1_34.jpg
30. The editing I had to do with the hair was recolor them and make them purple, pretty easy thing once you have the hair selected, simply click on the Colors tab and choose the Colorize command.

Guide_1_35.jpg
31. You will get sliders with options to change the Hue (Red Circle), Saturation (Blue), and Lightness (Green) of the selected portion, Hue changes basic color, Saturation adjusts the shades of it, and Lightness changes how dark or light it is, I have found that the perfect color for what I was looking for, Dark Purple, was at 324, 100, -32.

Guide_1_36.jpg
32. But with the hair edited my job was not done, far from it, I still had to trace Blood and Skin in the image and edit them as well. And here was where I made a mistake, I decided to edit the Skin before the Blood, the reason that was a sucky choice was because, while it made my job bit easier when editing Skin, I had a harder time seeing where the Blood was after the skin was edited. Below you can see me sensually tracing a boob cup, pondering that my life has came down to tracing pixels and despairing.

Guide_1_37.jpg
33. Few years later, I finished selecting all of the skin segments visible on the image, it was more or less the same process as with editing the hair of the image.

Guide_1_38.jpg
34. Once more I used the Colorize command, this time turning the skin a shade of pink, and as you can see on the face of the semi-naked lady, I really should have done the Blood first as finding the streaks of it was not going to be easy.

Guide_1_39.jpg
35. Now came the Blood editing, it was a mix of the Fuzzy Tool and Free Selection tool, Fuzzy marked the larger segments of the blood trails and with Free I cleaned it all up, removed what shouldn't be there and added what should.

Guide_1_40.jpg
36. For editing Blood I have chosen the Hue-Saturation command from the Colors tab, I turned down the Lightness and cranked up the Saturation to make the blood streaks as dark as possible, I have found that this way the portions modified would not come out distorted as they sometimes did with Colorizing same portions twice in a row. (Dark purple becoming extremely dark to the point of being black)

Guide_1_41.jpg
37. Then I selected two streaks on the lady's ribcage that I saw on the original picture, rinse and repeat.

Guide_1_42.jpg
38. And with that my edits were finished, if you have came this far then you know the secrets of picture refining and editing, and if you have followed along with my instructions, then awesome, you've just re-colored your first picture, congratulations. Now, for homework, go outside and enjoy the day, spend some time with your loved ones, ask how their day was (don't worry, you don't have to actually listen).

Guide_1_43_Final.jpg
Darth_Praelior_Recoloring.jpg
So as you can see, there isn't that much to editing pictures, it's pretty easy to pick up as long as you have patience for it all. Thank you for reading, in the next episode of Do It Yourself, Dammit, I'll go over creation of Avatars using refined pictures as seen today.

And remember, next time you'll want your picture re-colored or edited, you don't have to ask somebody to do it for you.

Just do it yourself.

Dammit.
 

J3C0

Guest
J
Oh what do you know, when i open the links to them they work, i think you're right in the size thing.
[member="HK-36"]
 

HK-36

The Iron Lord Protector (Neutral Good)
[member="Darth Mierin"], [member="Daella Apparine"], [member="Fatty"]

The one that worked should be the last one as it was uploaded separately and smaller,


Let me know if you see the first five now
 

HK-36

The Iron Lord Protector (Neutral Good)
[member="Daella Apparine"], [member="Matsu Ike"]

Alright, so it was sizing issue, few more minutes and all of them will be working :p For future reference if you want to put images on the site, don't go past 800x600 size :3 Keep forgetting that one
 

Users who are viewing this thread

Top Bottom