Reply
Want to join in?

Sign in to continue

I have a PSN account

Welcome back!

I'm new!

it only takes a minute or two

  • 16

    New messages in the last hour

  • Get a response within minutes

  • 92%

    92% percent of messages responded to

05 Dec 2012
By englishgolfer

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post

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

[ Edited ]
23 Replies 4,399 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!

LABELS:
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
View our house rules for posts
Post Reply Update Reply Cancel
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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...

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
Award Winner
10
/16

davylindhout

  • Award Winner
  • Offline
96%
10 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
davylindhout
Accepted Solution

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

Reply
0 Kudos

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

Beta Tester
06
/16

Nick_Bester

  • Beta Tester
  • Offline
98%
06 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
Nick_Bester
Accepted Solution

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.

 

 

Reply
0 Kudos

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

 photo Grand Theft Auto V Online Sig 1_zpsfsnvpxre.png
Beta Tester
06
/16

Nick_Bester

  • Beta Tester
  • Offline
98%
06 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
Nick_Bester
Accepted Solution

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

 

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

 photo Grand Theft Auto V Online Sig 1_zpsfsnvpxre.png
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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!

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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!

 

 

 

 

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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.

 

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

[ Edited ]
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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.

 

 

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

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!

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

[ Edited ]
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

Text/Fonts

 

Adding text to any sig is simple – Paint.net comes with a simple text tool. What I want to show, hopefully, in this post is how easy it is to combine text with effects to give a more “complete” feel to your finished work.

 

Since starting working with Paint.net five weeks ago I’ve learnt a few things. One of them is that if I make a background transparent before working with text it makes it so much easier. Like so:

 

fonts1.jpg

 

 

When you’ve opened a canvas just click the magic wand (1) and you’re good to go. Now I don’t have to use the magic wand a number of times. So I’ve started always having a transparent canvas open all the time so I can quickly go to it when I want to experiment with fonts and texts. All I want to do in this forumentary is how, with a few simple steps, you can take boring text and change it to something better. With this in mind I’ll be working with my user name:

 

font1a.jpg

 

 

The first effect I want to add to it is to make it “3D” in shape; for this I’ll need to the bevel effect. But first I need to highlight my name.

 

fonts2.jpg

 

Here I’ve added my name to the canvas and, again, the magic wand comes into play (2). When I’ve clicked the wand go up to “Flood Mode” on the top tool bar and make sure you click “Global” in the drop down menu (3). This will allow you to highlight the whole text in one go – all you need to do is click within one of the letters to do this. All the letters will now turn blue, like below:

 

fonts3.jpg

 

Once highlighted go to effects > Selection > Bevel Selection (4). Once you’ve clicked on Bevel Selection you should be greeted with a pop up window where you can change a number of options.

 

fonts4.jpg

 

If I don’t change any options, this is the result of the Bevel tool on my name.

 

font5.jpg

 

I might want to add some shadow to it. To do this, go to Effects > Object > Drop Shadow (5)

 

fonts6.jpg

 

Here’s my user name with a green shadow behind

 

fonts7.jpg

 

Again, the options are limitless. I recommend to experiment! Try using the gradient tool aswell for some cool effects. Here is my user name with just an outline around it.

 

fonts9.jpg

 

fonts8.jpg

 

To do this I changed colour to white (6), typed my name and then went to Effects > Object > Outline Object (7). Again you can choose outline colour but I went with black.

You can even have a picture inside your text, it’s not complicated at all!

 

fonts10.jpg

 

I’ve opened up a picture from Assassin’s Creed 3. I’ve then added my user name into a new layer. To highlight my user name I’ve done exactly the same procedure as before. I’ve clicked the magic wand (8), chosen the Global option in the Flood Mode (9) and then clicked on one letter. Finally, I’ve un-ticked the checkbox in the layers window (10).

 

fonts11.jpg

 

You can see in the above image that my user name is now slightly blue and transparent. The last step is to select the background image that we want to cut away. To do this go to Edit > Invert Selection (11). When you’ve done this you can cut away the back ground using the scissor icon or go to Edit > Cut.

 

fonts12.jpg

 

As a final touch I’ve added a little border around the letters. Hey presto! My user name with a picture in it:

 

fonts13.jpg

 

If you’ve downloaded the plugins that I mentioned before in this thread there are some cool effects that can be played around with your text. I won’t go into any detail with them as the best way to learn is to experiment and just mess around with them.

 

fonts14.jpg

 

To find them, though, go to Effects > Text Formations. What I will do is show my latest sig that I worked on using the Text Formation effects. All I did was use three layers. The first layer is my user name (and all the variations I have been called on these forums) multiple times. As you can see I've used swirl, spiral, wavy, drop shadow, bevel and outline effects here.

 

Untitled.png

 

I’ve used the Text Formation tools combined with some of the effects that I’ve described above in this post. My second layer was my user name (again) but I used a type-writer font from this website. I then used different sizes, making some bold, some italic, generally just mixing it up. If you're unsure of how to install fonts onto your computer, Microsoft have a very useful and simple guide here.

 

background-sig.png

 

I then layered them together setting the Blending Mode to “Difference” and the Opacity to “58”

 

fonts15.jpg

 

I finally added my “Confessions...” title in a final layer. Here’s my latest sig that reflects this week’s subject – Texts/fonts

 

font-sig.png

 

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
Beta Tester
06
/16

Nick_Bester

  • Beta Tester
  • Offline
98%
06 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
Nick_Bester
Accepted Solution

Wow... Nice stuff EG, now I'm starting to learn some things! :Thumbs: Thanks! :smileyhappy:

 

 

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

 photo Grand Theft Auto V Online Sig 1_zpsfsnvpxre.png
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution
Thanks Nick! Must say I love your SSX gif sig :D That's something I need to find out more about - adding gifs to Paint.net.
Reply
0 Kudos

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
Beta Tester
06
/16

Nick_Bester

  • Beta Tester
  • Offline
98%
06 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
Nick_Bester
Accepted Solution

englishgolfer wrote:
Thanks Nick! Must say I love your SSX gif sig :D That's something I need to find out more about - adding gifs to Paint.net.


Thanks... Bit disappointed in the size though. Made it normal sig size, but photobucket reduced it when I uploaded!

I hope you can figure out gifs in Paint.net, I couldn't... Didn't have the time & patience! :smileyvery-happy:

 

 

 

Reply
0 Kudos

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

 photo Grand Theft Auto V Online Sig 1_zpsfsnvpxre.png
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

GIFs

 

After my little talk with Nick_Bester concerning gifs I decided to investigate them some more. At the time of writing, Paint.net doesn’t support the direct importing of gifs (there are rumours that the next edition of Paint.net will allow this). However there are plugins that can be used to import gifs but this involves manually changing the file extension .gif to .agif before importing and then having to re-change it back to .gif before saving. This plugin can be found here. However, I did discover that you can make gif files in Paint.net, and combined with the use of a gif-making program, you’ll soon have working gifs – albeit in a very simple way.

 

So firstly, I want to show how to make an (annoying!) avatar.

 

avatar1.jpg

 

All I’ve done is open a new canvas 75 x 75 and then enlarged it (1) to make it easier to work with. I’ve then drawn 2 circles and filled in colours using the Ellipse and bucket tools (2).

 

avatar2.jpg

 

Once happy with your work save it, but you need to save it using the .gif file extension (3). All that needs to be done is to change the colours around two more times, like so:

  

avatar3.jpg

 

avatar4.jpg

 

Remember to save each new image with a different name with the .gif file extension. I just went with avartar1.gif, avartar2.gif and avartar3.gif (missed the spelling there!). To make them into a moving gif you’ll need a program that makes gifs. There are many out there but I went with one called UnFREEz which can be downloaded here.

 

Open up Windows Explorer and locate your saved gifs and open up UnFREEz.

 

avatar5.jpg

 

Simply highlight your gifs and drag over into the “Frames” window. Make sure the loop animation box is checked and adjust the frame delay to your required time (4). I’ve set it here to 10, or 1/10 of a second (it counts in 1/100s, so 50 is 1/2s, 100 is 1s etc). Finally click the “Make Animated GIF” button and you’ll be prompted to save your work. Simple. Here’s my avatar.

 

avartar-example.gif

 

I did say it was annoying ;) Anyway, here’s how to use the opacity of layers to make an image “move”.

 

cat-sig.jpg

 

At the moment it looks like a big mess but in actual fact there are 24 separate layers, each with a different image of a cat. I’ve put my “confessions” title as a background and then added the layers to the background. Tip: It might be handy to have a pen and paper nearby to track which layer you’re working on.

 

cat-sig1.jpg

 

What I’ve done above is on every layer, bar the first, I’ve set the opacity to zero. To do this simply double-click on the required layer in the layers window and adjust the opacity slide bar. Once done, save that canvas as a gif.  If you need a little refresher on working with opacity check my post out here for more help.

 

cat-sig2.jpg

 

Paint.net will ask you to flatten the picture, click yes. You can reverse the flattening straight away after saving. To do this simply click on the last “Layer Opacity” in the History window (6). Now simply double click on the layer that you were working on, and set the opacity to zero; then double click on the next layer, setting its opacity to 255. Save as a gif (giving it a new name). For my cat image I had to do this 24 times, one for each layer! Once you’ve saved all of the canvases open Windows Explorer and UnFREEz, following the same steps as before, transfer over your gif images to UnFREEz. Here’s my sleeping cat gif:

 

confession-cat.gif

 

I’ve also done a gif for the Sig Of The Month competition, below

 

paw.gif

 

I must say I do like that one. To stop it from being too large I was able to re-cycle some of the layers for the paw prints in the top left corner. Finally, I did a sig as a heart rate monitor that I’ll use as my new sig. Again, all I used was the opacity tool on the four separate images to make up the heart beating. Though I did set the opacity at different levels to make it “fade in and out”, like so.

 

8.gif

 

In this image, the opacity for each layer was set to 60, 120, 180, and 240 respectively. I just then added the text, using the glow effect on the heart and “75” in the bottom right.

 

Of course, all I have used is the opacity of each layer to make a moving sig. There is nothing stopping someone from using the different effects found in Paint.net to make gifs. How about using blur to bring something into focus? The best thing to do, as snow-92 wrote me on twitter, is to see experiment and see what everything does.

 

 

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

[ Edited ]
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
Beta Tester
06
/16

Nick_Bester

  • Beta Tester
  • Offline
98%
06 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
Nick_Bester
Accepted Solution

^^ Very Nice EG!! :Thumbs:

 

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

 photo Grand Theft Auto V Online Sig 1_zpsfsnvpxre.png
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

Composition

 

When I floated the idea of doing this thread amongst the other MVPs I asked for subjects that they thought would be important in sig making. Three suggestions (amongst others) were that I should cover colour scheme, focus point, and layout. I originally had them as separate points to cover but as this thread evolved I saw that I could combine them into one post, composition. I should say in advance that this post isn’t so much of a practical tutorial like my other posts; rather it is more a theoretical look at what makes a sig. I also want to say a big “thank you” to mattsimmo, Snozzelnut and Nick_Bester for allowing me to use their work in this post. You guys rock!

 

After my last post I started looking on the internet for tips about picture layout, the use of the colour wheel, and having a focus point. I also looked at what I have done these last six or so weeks in this thread, and more importantly, what others have done. I came to a simple conclusion concerning sig-making. There are no “hard” rules. In a simple moment of enlightenment, I suddenly felt that I was Elizabeth Swan in the first Pirates of the Caribbean film when Captain Barbossa was explaining to her about the code of pirates. He explained “the code is more what you'd call "guidelines" than actual rules”. And the same could be applied to sig-making.

 

With that in mind, I started making my new sig, paraphrasing Barbossa, which is below.

 

barbossa-sig2.png

 

Looking at my new sig as critically as I can, I hope to discuss the three sub-sections of composition. Let’s start with...

 

Colour scheme:

 

The colour wheel can be found in Paint.net towards the bottom left of the screen but here is a simpler version.

 

colour wheel.gif

 

Now I’m no art teacher but hopefully you can see the relationship each colour has with its neighbouring colour – called a chromatic relationship – how red becomes blue which becomes yellow which comes back to red. I won’t talk about primary, secondary or tertiary colours but instead I want to look at complementary and analogous colours. Complementary are colours that are opposite on the colour wheel, like so.

 

red-green.gif

 

Whereas analogous colours are located close together on the colour wheel:

 

analogous.gif

 

In my sig above I’ve tried to use just the colours found in the top left section of the colour wheel. One tip that I found useful is using the “Colour picker” tool so that you can use the same colour in a different place on your sig. Once I had finished Captain Barbossa on my sig I used this tool to pick my text colour.

 

comp1.jpg

 

I simply clicked on the Colour Picker (1) and then clicked on Barbossa’s cheek (2). The colour that is on that pixel is then picked and becomes the primary colour in the colour window (3).

 

Here is another sig that just uses colours that are analogous by the talented mattsimmo.

 

matt-sig.png

 

As you can see his user name and the URL are in similar colours to the predominant colour. Another great sig maker, Snozzelnut, has used analogous colours (the blue and green-yellow) in this sig, and boy is it eye catching!

 

snozzlenut.png

 

But of course, just using analogous colours is not a rule to making sigs. Nick_Bester has used blue and red (two of the three primary colours) to make this cool Crysis 3 sig.

 

nicks-sig.png

 

 

A quick note on complementary colours - if used together they should bring out the best in each other. Having a quick look around the best example I could find was one of my drake sigs in the effects post.

 

drake-hue-sat.png

 

 

The lighter green to the left on the above pic is complementary to the purple on the right (also the darker green is a complement to the red leaf), this provides maximum contrast in a picture. 

 

Focus point:

 

Anyone who is familiar with the basic skills of photography knows that there are some tricks in making focal points. These include: selective focusing, using exposure, the eyes, and using two focal points. Of course, the big rule in photography is the rule of thirds but due to the shape of a sig (a long rectangle) I feel that this isn’t so important (look at mattsimmo’s cat sig – the cat isn’t placed on a 1/3 intersection but the sig still works). So how have I used the above pointers in my sig making? Let’s take a look at the original image I used for my Barbossa sig:

 

barbossa-original.png

 

And compare it to my final sig

 

barbossa-sig2.png

 

In the original picture there’s too much happening in it (the burning ship and the barrel of his gun is showing). By using my (limited) skills in Paint.net I was able to “de-focus” the background, allowing Barbossa to come to the front through selective focusing. To make the background as I did I’ve followed different techniques that I’ve covered in this thread.  

 

I’ve also used exposure (in this case, over exposure) on Barbossa to make his face stand out against the darker background – called contrast. I did this by adding the below over-exposed black and white layer to the image and blending it with the layer below.

 

background.png

 

Take a new look at mattsimmo’s, Snozzelnut’s and Nick_Bester’s sigs. All have used exposure to create contrast in their sigs to great effect.

 

Whenever you see a picture (or sig) with an image that has eyes in it, you will always be naturally drawn to them. Again, look at the different sigs that I’ve used above and see how you focus on the eyes (or in Nick’s sig the visor – where the eyes should be - on the character to the right). Another natural phenomenon with eyes is, if eyes are looking away from you (and not directly at you), you will find that you will be drawn to where they are looking. I wish I had remembered this when I did this sig below!

 

paw.gif

 

If I am to be critical of one thing, it is that the cat is looking at a slight angle upwards and not directly left. I feel that if you follow the cats eyes you end up above the sig and not in the sig. Luckily, I feel I got away with this mistake because I used two focal points.

 

The paw prints are the second focal point in my cat sig. It is quite common to have two focal points in sigs but it is important to remember that they shouldn’t be of the same size otherwise the eye will “dart” between them. Nick’s Crysis sig is a great example of using two focal points. The character to the left is smaller and is also in the background because of his use of selective focus.

 

I hope you’re seeing my Captain Barbossa reference in a better light now – that there are no rules, only guidelines in sig making. Also, I’ve said it before, and I’ll say it again – experiment! For example, Paint.net has the film effect that is useful in highlighting a focus point, like so:

 

drake-film.png

 

Though, being critical again, I feel I placed the film effect a little too high so my eyes are drawn more to Drake’s forehead (just above the right eye) and not his eyes.

 

Layout:

 

Even though I have a section in this post dedicated to layout I feel that I’ve already covered it, albeit in an indirect way. I wrote a while back that it was useful to have a goal in mind when designing a sig. Do you want to include text? Then make sure you have enough space for it. Do you have too many focal points? Then perhaps you need to take something away. I needed to do this with my latest sig. I tried to place my “confessions” title in the sig but no matter where I placed it I found I lost the balance between the focal points: the quote and Barbossa. So I took the decision to axe it. So I guess my last guideline is if you’re not happy with what you have, don’t be afraid to step back, think, and re-work your sig again. Oh and don’t forget to save your work regularly. Though that isn’t a guideline but a rule.

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

[ Edited ]
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
Award Winner
10
/16

davylindhout

  • Award Winner
  • Offline
96%
10 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
davylindhout
Accepted Solution

Another great post EG! :)

Btw, you can also use a colour from a certain picture to make another layer on top of it blend in (by screening it)

As an example I'll use an old Crysis sig I made a while ago:

Crysis3.2.1.png

 

as you can see, the main character blends in with the background (you almost wouldn't notice that there are two seperate layers involved) The way I did this was by using the colour picking tool to achieve the right tint of green, which I then used to overlay on the character, causing it to blend in.

I did the same thing to the crysis logo, here's a "before" signature to show you what the logo looked like before "screening" it

 

Crysis3.2.png

 

I tend to use this "thechnique " a lot since it's very usefull! 

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

MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

davylindhout wrote:

 

As an example I'll use an old Crysis sig I made a while ago:

Crysis3.2.1.png

 


Another great tip! Thanks davy :Thumbs: I'll certainly give this a go - though I wonder if I'll ever be finished in learning how to make sigs like you guys. Incidentally your sig also fits in great in what I was saying about composition. The red visor and green text are complementary colours that provide a great contrast, along with having white on the left and gradually fading to black on the right. If I'd have seen your Crysis sig I would have used it as well as an example. 

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

Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
16
/16

englishgolfer

  • MVP
  • Offline
100%
16 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
englishgolfer
Accepted Solution

Adding links

 

Originally I was going to call this post “HTML” but as there are already a few threads on the forum concerning the use of HTML I decided to change direction slightly. There are, however, no threads that show how you can get multiple links into one sig. So that is what I want to show you how it can be done (hopefully!). But before I cover that I should provide the links to the different threads that cover HTML.

 

Oo_Alias_oO has a great little guide to HTML concerning sigs here. In fact it pretty much covers it all, though Envisager has another thread here that is also worth a read.

 

Again, I stand indebted to a number of forum users who have been very patient with me these last few days as I bugged them for their secrets and help. loonytoon1982 introduced me to the idea of using multiple images in one sig; Snow-92 very kindly allowed me his HTML code so I could study and use it; and finally TalllPaul for providing feedback and encouragement when I felt like pulling my hair out!

 

OK, to work. Below is the sig I want to use. I used two different Union Jack flags (though I did have multiple layers of one of the flags, blending them in different modes). I then added all the text following the steps in this thread. Of course you don’t need to add text, you could use images just as well. For example, the twitter bird for your link to twitter. I must say I’m really proud of this sig!

 

union-jack-sig160.png

 

As you can see I have four different texts in each corner. I’m going to add links to each one so people will be able to access the different pages if they so choose. What I first need to do is divide the sig into different sections, like so:

 

union-jack-sig160-breakdown.png

 

I’ve only used black lines to show how I want to divide the sig up – in real life they won’t be there. I now have 7 different sections. What is important here is to note how many rows I have.

 

Row 1 = sections 1, 2, and 3

Row 2 = section 4

Row 3 = sections 5, 6, and 7

 

Tip: Have a pen and paper handy to write down coordinates!

 

Firstly, Let’s work on row 1.

 

html1.jpg

 

I've enlarged the sig in Paint.net to make it easier to work with. Then I selected the Rectangle tool (1) and positioned the cross-hair in the top most left corner of the sig (2). This position is 0,0 on the x,y coordinates. Check down in the bottom right hand corner (4) to make sure you’re on 0,0. Simple click and drag until you’ve high-lighted the area (3) you want to be used as section 1. Make a note of the coordinates for the bottom right part of this section! Mine are 99,19. Copy this highlighted image (edit, copy) and open a new canvas (file, new). Paste in the image and save it with the number 1 in the name (trust me – it makes it simple! I just went with section1.png).

 

Now we need to highlight section 2. Here you need to remember the coordinates from the first section.

 

html2.jpg

 

When you position the cross-hair at the top left of the next section (5) you need to be one pixel to the right of section 1. As section 1 was 99 pixels wide I need to line up the cross-hair on 100,0. It is very important that you don’t miss a pixel! Again drag to make a new area but don’t drag down vertically more than the depth of the first section (in my case this is 19 pixels). Again make a new note of where the bottom right of section 2 is (6) using the coordinates at the bottom right of Paint.net (7). My coordinates are 311,19. Again copy, make a new canvas and paste, saving it as section2. Rinse and repeat for the third section but remember to start one pixel to the right!

 

Section 4 will need to start one pixel under the sections in row 1, for me this is from 0,20.

 

html3.jpg

 

Again, make a note of how many pixels you drag down (125 for me according to the coordinates). Then simply copy, open a new canvas and paste and save as section4.

 

I won’t show how row 3 is done as it is simply to follow my guidelines for row 1. But as section 4 ended at 125 pixels, all of row 3 sections will start at 126 pixels on the coordinates. Once you have cut up your sig into the required amount of sections upload each individual section to your image hosting site (I simply use the gallery provided by the forum).

 

Here are my finished sections:

 

Row 1

 

section1.png

 

section2.png

 

section3.png

 

Row 2

 

section4.png

 

Row 3

 

section5.png

 

section6.png

 

section7.png

 

A little tip loonytoon1982 shared with me (if you don't want to use the x,y coordinates like I described) is to change colour of the single pixel in the corners of the different sections - this would aid you in lining up the cross-hairs. As it is only one pixel big it shouldn't be noticed.

 

For an quicker way of dividing your sig, please look at my new post here.

 

Now we need to add the html. I’ve found that Notepad is best for this - even if you might need to scroll left and right a lot.

 

html4.jpg

 

Right click on the above image and open in a new tab to see a larger image of it. Remember I said before that it was important to note how many rows you will be working with? I have three rows in my document on notepad. Each row on notepad corresponds to a row in the sig. Even if you want to use the “enter/return” key on your keyboard half way through a row, don’t! Only use the return key when you are going to start a new row otherwise your sig will be all broken up. Once you have added all the URLs, copy the text and paste it into the signature field in the “My Settings” on the forum. Presto! You should now have a sig with multi links! Good luck!

 

If you’re interested here is the final HTML code for my latest sig. It’s in three sections, to correspond to the three rows. I should say that I also added the tags target=”_blank” (opens the link in a new tab) and title=”any text here” (for when you hover over the links) afterwards. If you have any questions, please ask!

 

Row 1

<a target="_blank" href="https://twitter.com/englishgolfer"><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551812i6C24AC9E645385E5/image-size/o..." title="Follow me!"></a><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551814i281F49EA885251B5/image-size/o..."><a target="_blank" href="http://community.eu.playstation.com/t5/PlayStation-Home-Events-and-Fun/The-Poker-Rangers-League/m-p/..."><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551816i1462B1FCD4695996/image-size/o..." title="All in?"></a>

 

Row 2

<img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551818i8303499A2769B5BB/image-size/o...">

 

Row 3

<a target="_blank" href="http://community.eu.playstation.com/t5/Sport-General/%C3%9Cber-Tuesdays-The-SSX-League/m-p/15333711#..."><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551820i2563AEB11884CEDD/image-size/o..." title="Snowboards at the ready!"></a><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551822i0DDF0DE1B2240FC6/image-size/o..."><a target="_blank" href="http://community.eu.playstation.com/t5/Fan-Art/Confessions-of-a-sig-noob-or-a-documentary-of-how-I-u..."><img src="http://playstationeu.i.lithium.com/t5/image/serverpage/image-id/551984i188381B5EC67652D/image-size/o..." title="Secret Confessions"></a>

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

[ Edited ]
Forum Events | Community Twitch Channel | S.O.T.M.

Down with nested replies, bring back quoting
MVP
13
/16

QuietlyWrong

  • MVP
  • Offline
95%
13 Rank
Progress
Playstation Staff

Problem Solved

View Original Post
QuietlyWrong
Accepted Solution

Cool sig EG! :)

 

I would note that if you can carve your sig up into a regular 'table' (i.e. rows and columns - even if they have different widths and heights) it will make it much easier to slice it up correctly. Think about it when designing your sig...

 

EG you might have simplified things a little by going with a 3x3 grid. In the design phase, anyway.

 

I would also ask whether there definitely isn't a paint.net plugin that can do an image slice for HTML link purposes...

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

[ Edited ]
-------
Advanced
You must be signed in to add attachments
View our house rules for posts
Post Reply Update Reply Cancel