Lounge

General Discussion

General Discussion

Reply
05 Dec 2012
By: englishgolfer MVP 19570 Posts
Level 7
Offline

Confessions of a sig noob (or a documentary of how I used paint.net)

[ Edited ]
23 Replies 2796 Views edited 06-02-2013

Confessions of a sig noob

 

Since the time I joined these forums I have always been impressed with the high quality of art work that can be found, mostly in peoples’ sigs. The standard is very high. Whenever I’ve needed a sig I’ve always asked others to do it for me, mainly the super mattsimmo. I don’t consider myself “arty” at all and the idea of creating art on a computer is as foreign to me as the possibility of finding a three-legged scuba diving goat. Until now…

 

With recent threads like Wretched_Hawk’s SOTM and GTA Chop Shop I’ve wondered if I could give it a go. I then had the brainwave of an idea – why don’t I document what I learn? So this is going to be a forum documentary – forumentary* – but I just don’t want it to be just me. I’m hoping sig-making veterans will contribute their tips and tricks but also noobs, like me, can ask questions and feel that they can show what they are working with. Every week (ideally it will be every week but we’ll see) I want to take a new subject that is needed to make a sig. I’ve got a list of subjects (see below) I want to go through and as this thread evolves I’ll add links to the list so it will be easier to go directly to that point in the thread. So what do I hope I will be covering?

 

-Transparency
-Layering
-Blending

-Plugins
-Effects

-Text/fonts

-GIFs
-Composition
-Adding Links
-Icing on the cake

 

Some of the subjects I might bring together in one post. If you can think of anything that would need to be covered let me know and I’ll see if we can add it. Seriously, I know very little about using programs like photoshop, gimp and paint.net. I’ve decided to use paint.net for two reasons: 1) it’s free, and 2) I don’t own photoshop. However, in my limited knowledge I believe a lot of paint.net’s terminology is the same as photoshop’s and therefore even if I am using paint.net someone could use this thread and still follow along in photoshop if they use some common sense and logic.

 

You’ll see that I will be using a lot of screen dumps to explain what I’m doing. Please don’t assume that this thread is a tutorial for everything concerning paint.net but more of a catalyst for people to explore and experiment. Of course, it goes without saying (but I will anyway), that these new skills I’ll be learning are not just for sig making but can be used in whatever.

 

Two thoughts before I start. Firstly, if you want to post advice make it simple to understand and try to stay on the week’s subject (I know you might need to explain something else to reinforce an idea but I want to avoid, as much as possible, having subjects spread out all over the place and in no apparent order). Secondly, if you have never used paint.net before a simple interactive program that describes what the menus and icons do can be found here. A great place to start! 

 

* I've invented a new word - off to the copyright office I go!

Please use plain text.
Message 1 of 24 (2,796 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

Transparency

 

I wanted to challenge myself (and hopefully some of you!) with making sigs, or anything else that involves a photo editing program. I started by looking at this thread here on the forum and even if it explains how to make great sigs it assumed that the reader was already a user of photoshop. I wasn’t, and I found some of the terminology foreign. So before trying to tackle what some of the thread showed I had to go and find the basics of photo editing. These first few “forumenataries” will show what I have learned. I encourage anyone to experiment, use the internet for source and push yourself in photo editing! The first skill I tackled was how to make a background transparent. I must say, from the start, that even if I’m trying to document what I have learnt, I found it very easy to slip into “teaching mode”. Therefore I apologise if I go back and forth between first and second person pronouns.

 

Making a background transparent, or invisible, will help when putting it onto another picture (called layering). This picture of Mickey Mouse, believe it or not, has a white background.

 

 

 

I’ve opened (file, open) the picture in paint.net and as you can see now it has a white background.

 

trans1.jpg

 

The first thing to do is click on the Magic Wand icon (1), this will turn your pointer into a wand. Next you will need to adjust the Tolerance by sliding the bar (2) to the desired amount – in this case I’ve taken 50%. Next click anywhere on the background and you should see it turn light blue.

 

trans2.jpg

 

One way to cut away the background is by using the Scissor icon on the top bar, or go up to edit and select cut (3). You should now see a chequered background, like so:

 

trans3.jpg

 

The chequers are there to show that the background is now invisible. All you need to do now is save your picture.

 

A second way to make backgrounds transparent is with the Lasso icon. When you click this icon you can then free draw around the object you want to separate from its background. Make sure you have a steady hand!

 

trans4.jpg

 

Here I’ve taken a picture of my dog. On the tool bar on the left, click the Lasso icon (4). If you want to enlarge the picture to make it easier to use the lasso you can click the drop down menu or the magnifying glass at the top (5). Once you have drawn around your object you should see it “highlighted” in blue.

 

trans5.jpg

 

What I want to do is highlight the background as it is that I want to make transparent. To do this, go up to Edit and select “Invert selection” (6). Now the background should be highlighted in blue and your object “de-selected”. Like with the Mickey picture cut the background away by going to Edit, Cut. Here’s my final picture of my dog which I can save if I want to.

 

trans6.jpg

 

If you look closely you can still see some background grass that I didn’t get with the lasso. The final way I have found to make backgrounds invisible is with the Eraser icon.

 

trans7.jpg

 

 You select the Eraser icon on the tool bar (7). I’ve enlarged the picture (8) to make it easier to see where I need to use the Eraser. Finally, I can adjust the width of the Eraser (9) to the size I require. Tip: Don’t try and erase everything in one go. Instead erase small sections in case you slip and erase too much. Then all you need to do is “undo” your last action. Here is my “finished” object.

 

trans8.jpg

 

In my next forumentary I shall explore layering – how I can use multiple images and combine them into one image. Until then feel free to discuss transparency of images and if you know any other useful way of making a background transparent please share your knowledge! Till next time...

Please use plain text.
Message 2 of 24 (2,795 Views)
Level 6
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

Hmm, the transparency tool from paint.net seems to be a bit more enhanced than the gimp version.

Best (Ex)Community Moderator: Wretched_Hawk

Please use plain text.
Message 3 of 24 (2,690 Views)
Reply
0 Kudos
Level 3
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)


davylindhout wrote:

Hmm, the transparency tool from paint.net seems to be a bit more enhanced than the gimp version.


 

Not sure about gimp's version Davy... But it does works well.

 

 

 photo H1Z1Sig_zps9321a55f.png
Please use plain text.
Message 4 of 24 (2,652 Views)
Reply
0 Kudos
Level 3
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)


englishgolfer wrote:

Transparency

You select the Eraser icon on the tool bar (7). I’ve enlarged the picture (8) to make it easier to see where I need to use the Eraser. Finally, I can adjust the width of the Eraser (9) to the size I require. Tip: Don’t try and erase everything in one go. Instead erase small sections in case you slip and erase too much. Then all you need to do is “undo” your last action. Here is my “finished” object.

 

trans8.jpg

 

In my next forumentary I shall explore layering – how I can use multiple images and combine them into one image. Until then feel free to discuss transparency of images and if you know any other useful way of making a background transparent please share your knowledge! Till next time...



Hey EG... Nice thread!! :smileyhappy:

 

I'd like to add a tip at this point... There are many user created Plugins available via paint.net forum & additional info. on how to intall & use these Plugins... Link: http://forums.getpaint.net/index.php?/forum/7-plugins-publishing-only/

I know Plugins are probably way off topic at this point & should probably be dealt with later once the basics are covered, but they can also be a blessing & encouragement to the aspiring artist... I know some are for me!

 

There's a specific Plugin pack that I recommend called dpy's pack which can be found here: http://forums.getpaint.net/index.php?/topic/16643-dpys-pack-2012-08-26/

 

One of the very useful Plugins within this pack which will come in very handy is called AA's_Assistant which softens the edges after using the magic wand tool or eraser tool!

I decided to suggest it now, as I know how frustrating it can be to try work with an image with rough edges when you move onto layering.

 

This is basically what it does:

AA_Assistant.png

 

 photo H1Z1Sig_zps9321a55f.png
Please use plain text.
Message 5 of 24 (2,647 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)


Nick_Bester wrote:

 

There's a specific Plugin pack that I recommend called dpy's pack which can be found here: http://forums.getpaint.net/index.php?/topic/16643-dpys-pack-2012-08-26/

 

One of the very useful Plugins within this pack which will come in very handy is called AA's_Assistant which softens the edges after using the magic wand tool or eraser tool!

I decided to suggest it now, as I know how frustrating it can be to try work with an image with rough edges when you move onto layering.

 

This is basically what it does:

AA_Assistant.png

 


Great tip! Thanks Nick. :Thumbs: I'll be getting this one for sure!

Please use plain text.
Message 6 of 24 (2,642 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

Layering

 

Hopefully by the end of this forumentary I’ll have done my first sig. It won’t be anything ground-breaking but it should show that even after following two posts in this thread, how easy it is to make a sig. Firstly, just as a refresher, it would be good to read the forum house rules concerning sigs, here. Secondly, I should have written this in the “Transparency” post but if the images are a little too small in this thread for you to read simply right click on them and open in a new tab.

 

As you can see in the picture below I’ve already opened paint.net. Up in the top right corner I have the pictures that I worked on in my first post concerning transparency. I’ve also opened a background that I found on the internet that I want to use in my sig. There are plenty of sites out there that offer free images (thanks google!) that we could use.

 

lay1.jpg

 

 

The first thing I did was click the Rectangle Select icon (1) and then dragged the mouse over the section of the image I wanted. When I was happy with the size and image inside the rectangle I cut it out (2). Finally, go up to File (3) and in the drop down menu click on New, and then paste in the cut-out image. You should then see this imagine:

 

lay2.jpg

 

What I want to do is now click on my Mickey picture that I have in the top right hand corner.

 

lay3.jpg

 

Firstly click on the Rectangle Select icon (4) and highlight the area you want to copy (5). In this case it is the whole picture. Go up to Edit and select Copy (6). Finally click on the cut-out image (7) to bring that back up in the work area.

 

lay4.jpg

 

What you need to do now is to go up to edit and click on “Paste into New Layer”. A dialogue box might come up stating that the image you are trying to paste is larger than the canvas you have. I clicked on the “Keep canvas size” option and was greeted with the following image.

 

lay5.jpg

 

To make the Mickey image smaller click on the little circle in any corner of the image (9) and drag till you are happy with its new size. I can also move the Mickey image around and place him where I want. Tip: By right clicking on the mouse you can also rotate the image by dragging the mouse up or down.

 

lay6.jpg

 

Here above I’ve placed Mickey where I want to. To remove the square box around Mickey, go up to Edit and click “Deselect” (10). Now I want to add the image of my dog to the picture. I do this by following the same steps as I did to add the Mickey image (points 4 – 10). I should now have the following image.

 

lay7.jpg

 

I’ll be covering working with fonts and text later on in (hopefully!) more detail. Until then I can add text by clicking the Text icon (11) and then clicking anywhere in the picture (12). I can also move the text around by clicking and dragging the cross symbol (12). At the top of the page I can change the size and font of the text (13). I’ve added three sets of text to my new sig; my username, the thread title and a bit of humour. Here’s my first home-made sig!!!

 

sig1.png

 

So there I have it! I’m still a noob when it comes to this but things are moving in the right direction. Any sig makers out there that can share their tips and tricks when it comes to layering please post them here! Next week I shall try and tackle Blending – I know for a fact that the experts will have to help me in that one!

 

 

 

 

Please use plain text.
Message 7 of 24 (2,457 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

[ Edited ]

Blending

 

I’m now moving onto using effects to make sigs look more “snazzy”. In one sense, blending is “just another effect” – something I’ll be covering in my next forumentary. But as the blending tool is separate from the drop down menu for effects I feel it warrants a section dedicated just for itself. So what is Blending? I guess the best way to describe it is the merging of two layers together and how they interact with each other to provide a ghost-like transparency.

 

Before getting into the nitty-gritty, I think when making any form of sig (or for that matter anything with a photo editing program) that you have a goal in mind. It will help considerably! My goal for this week is to “honour” a game series that got me re-hooked on modern day gaming consoles – Tomb Raider. The first one on the PS1, in my opinion, is the best though I’m really looking forward to the new game that comes out with the younger Lara. So with this in mind I went out onto the internet and searched for images I could use. Here they are below.

 

young lara.jpg

 

tombraider-1-orginal.png

 

Tomb-raider-logo-orginal.jpg

 

What I want to do is take an image from the first picture as my background and superimpose (blend) parts of the other two images over it. I’ve already covered in this thread how to select different sections of a picture, how to make a background invisible and how to layer so I won’t go over these steps again in much detail. However, here are the pictures in their “finished” setup.

 

young lara background.png

 

Here I’ve simply cut out a section of the original picture.

 

tombraider-1.png

Tomb-raider-logo.jpg

By using the eraser and magic wand icon I’ve made the backgrounds transparent on both of these pictures. Right, to work!

 

blend1.jpg

 

The first thing I want to do is actually take away the blue leaf that is floating to the left of Lara (1) as it will get in the way later on. I click on the rectangle icon (2) and then draw a little area on the white area to the left of the leaf.

 

blend2.jpg

 

Once I’ve drawn the square (3) I can go up to edit (4) and select copy. Then I can paste in the copied square onto the image and move it so it is covering the leaf. I can then go to edit and deselect.

 

blend3.jpg

 

What I want to do now is layer my pictures so I’ll just quickly explain what I’m going to do but you can find a detailed walk-through here. I want to open the Tomb Raider logo and select the area I want to copy (5). Finally reselect the background image (6). Remember that when pasting an image onto another image you need to select “Paste into new layer” in the edit menu. After resizing and positioning the logo I now have this image.

 

blend4.jpg

 

What I want to do is use the blending tool to make the logo “ghost-like” – so you can see through it. Double-click on the layer in the box to the bottom right of your work area (7) and you should be greeted with this window.

 

blend5.png

What I want to focus on is the “Blending mode” drop down menu and the “Opacity” slide marker. If we start with Opacity, this just means how much light, or in our case the layer below, we want to let through. The greater the number (255) the less we can see through the layer.

 

In the Blending Mode menu we have 14 different options to choose from. Each has its own characteristics – too much to explain here – so for a more in depth explanation of what each mode does click here. I went for the multiply blend mode and set the opacity level to 50. Here’s my result.

 

blend6.jpg

 

I can now add the 2nd image of Lara to the background by following the exact same steps as before.

 

blend7.jpg

 

I’ve now got a “ghost” of Lara. As you can see in the box in the bottom right I have my background and two layers. If I’m not 100% happy with one layer I can simply double click on that layer and bring up the Layers Properties menu again. As I finally touch I’ve added two layers with my username and my “confessions...” title (cutting out the letters using the magic wand and the eraser) and “blended” them into the sig as well. Here’s my latest sig!

 

tomb-raider-sig2.png

 

If anyone out there has any tips on Blending please feel free to share them. Next week I’ll be looking at other effects and how I can use them in making sigs.

 

Please use plain text.
Message 8 of 24 (2,253 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

Plugins

 

I did say at the start of this thread that I am a noob when it came to Paint.net and sig making, and that if anyone had any tips they were to share them. Thankfully Nick_Bester shared a tip about a plugin that has helped him. The basic Paint.net program is, I found, a good place to start when it comes to photo editing. But it is the user-created plugins that take it up a notch. I’ve downloaded four sets of plugins that different people have created. Each has some amazing effects and usages – it’s just a shame that I haven’t found just one plugin that covers it all.

 

The first thing to do is probably to read on how to download and install plugins. It’s really quite easy but here is a website from one of the plugin designers that has an easy step-by-step guide to installing plugins.

 

The first plugin I downloaded was the one Nick_Bester recommended. Nick described one great effect called AA’s assistant that I must say I’ve used a lot when I have pasted an image into a new layer. This plugin (and a description of all its effects) can be found here.

 

The next plugin (and description) is found here. Again there are many tools and effects in this plugin but two I’ve used are Outline and Bevel. I’ll be using them more when it comes to working with text.

 

The third plugin has a popular tool included in it – Smudge! It also has many other effects and tools that can be used in sig making including Border n Shapes and Film. All this, and more, can be found here.

 

The fourth and final plugin that I have used has the Drop Shadow effect – an absolute gem of an effect. This plugin is slightly different from the others as it comes with an installer, making your job easier. Description and link to download it can be found here.  

 

Finally, these guys have worked many hours on these plugins and have offered them for free download. But if you are willing you can donate via paypal to them. I know they’d appreciate it!

 

Right, let’s see what effects we can do with these plugins.

 

 

Please use plain text.
Message 9 of 24 (2,012 Views)
Level 7
 

Re: Confessions of a sig noob (or a documentary of how I used paint.net)

[ Edited ]

Effects

 

All I want to do in this post is take a look at some effects that are present in Paint.net. I’ve used some effects that come with the basic program and from the plugins mentioned in the above post. As such, this post won’t be a “walk through” of my steps as I’ll only be repeating what I’ve written already in previous posts. However, I hope to show you how easy it is to use simple effects to create different results from one picture. I’ve decided to use a picture of Nathan Drake from the Uncharted series. All I’ve done is take the original picture below

 

drake-orgin.jpg

 

and cut-out Nathan from the background like so:

 

drake.jpg

 

I’ve then gone back to the original picture, and applied different effects to it. Once I was happy with the result I took the cut-out picture of Nathan and pasted it into a new layer of the picture. I used the AA’s assistant to soften the edges around the cut-out Nathan when I pasted in the layer. Once I was happy with the results I renamed the picture so I could re-use the original again with the next effect.

 

Dents (Effects > Distort)

 

drake-dent.png

 

Crystallise (Effects > Distort)

 

drake-crystal.png

 

Twist (Effects > Tools)

 

drake-twist.png

 

Hue/Saturation (Adjustments)

 

drake-hue-sat.png

 

Oil Painting (Effects > Artistic)

 

drake-oil.png

 

Smudge (Effects > Tools)

 

drake-smudge.png

 

Drop Shadow (Effects > Object). Slightly different routine as I had to apply shadow to the cut-out drake first before layering it onto the background.

 

drake-shadow.png

 

Outline (Effects > Stylize)

 

drake-outline.png

 

Frosted glass (Effects > Distort)

 

drake-frosted.png

 

Quite liked the result of the frosted glass so decided to use it as my next sig. As such I added my user name and “Confessions” title.

 

Here are two effects that I liked the result of. I didn’t add a layer of Nathan on top of them as I felt it spoilt the results.

 

Dream (Effects > Artistic)

 

drake-dream.png

 

Film (Effects > Photo)

 

drake-film.png

 

Best stop there! There are many other effects that can be used – I suggest you experiment. Of course, you can also use different effects in different layers and blend them together. The options are, literally, limitless!

Please use plain text.
Message 10 of 24 (2,011 Views)