[Discussions] SOTM #30 - April 2015

[xyzapy]

BTW, your entry is so cute#^_^#

When I saw it, I immediately thought I should use it for the sotm. And yes, it's very cute.

 

[nanashi1]

When I saw it, I immediately thought I should use it for the sotm. And yes, it's very cute.

Well, it fits to you really, without kidding - I'm glad that you joined have...

 

[Dark Angel]

i change my entry with my Tail Red SOTM sig ;)

 

[Ignis]

I gotta agree. That's such a cute Flareon ( ´ω`)

1st: Hi Ignis!

2nd: But these decorations making the SOTM (even other threads of you...) so unique... BTW, there maybe a suggestion of me: At main page of ASF can maybe at SOTM a colorful banner additional with a cute figure on that give, because to be honest, the SOTM-blox disappears between General Site Topics- and Social-box. - Newbies can may easily overlook that...

3rd: "sir."? Please don't call me so, call me rather Shi - it's simple and short...

Hi nanashi. Yeah, I know what you mean. I thought of making something like that; it's just that I kinda neglected it after I took care of the three SOTM that was still open and made the threads for entries and discussions. I'm also planning to revamp the Hall of Fame thread. I'll look into it this weekend.

That "sir" thing was just a joke, obviously. ;)

Hm... you have a point i made some changes though i like to keep this Font it come more close to Digitial in my mind.. psyhological

Anyway how does it looks now compare to the older ?

Spoiler: Sig Comparison

Old Sig

New Sig

I play with opacity & i add inner shadow 2x pix 2x distant 30%opacity effect of orange color and the layer is at 85% opacity.

Indeed, the overall imagery has a 'digital' feel to it. The new version looks more subtle, which in my opinion is better. :) The inner shadow isn't that visible due to the background and the fact that it has a colour similar to its surroundings (orange), but the soft touch of lower opacity is nice.

 

[Dark Angel]

Indeed, the overall imagery has a 'digital' feel to it. The new version looks more subtle, which in my opinion is better. :) The inner shadow isn't that visible due to the background and the fact that it has a colour similar to its surroundings (orange), but the soft touch of lower opacity is nice.

Well i am done with tweaking any more further the sig. So i replaced with the last one.

 

[LioNeeZ]

I think I should have had another idea in mind before making a siggy, well hopefully next time I wont save in the end the entire image as .png

 

[nanashi1]

Finally in ASF, fucked DNS case...

Edit:

Hi nanashi. Yeah, I know what you mean. I thought of making something like that; it's just that I kinda neglected it after I took care of the three SOTM that was still open and made the threads for entries and discussions. I'm also planning to revamp the Hall of Fame thread. I'll look into it this weekend.

That "sir" thing was just a joke, obviously. ;)

This sounds nice, I wish for you much success...xD We looking (voltaged) forwad on that master-work of you...

 

[unownHGSS]

This SOTM is so lively

 

[LioNeeZ]

This SOTM is so lively

Indeed it is, it is fun to watch

 

[Dark Angel]

it's lively because we have a the best person who is hosting it ;) [MENTION=2]Ignis[/MENTION];-sama!

 

[Ignis]

You guys are giving me too much credit! (｀・ω・´)

I didn't do much for the competition itself; I only put some decorations here and there; I didn't even go to the LPW and tell everyone to join. It's thanks to you guys. And I should thank nanashi too, because he was the one who made me aware that the SOTM had been left unattended. (I admit I didn't pay really much attention before.)

 

[LioNeeZ]

Such a cute ticket to this SOTM

 

[nanashi1]

You guys are giving me too much credit! (｀・ω・´)

I didn't do much for the competition itself; I only put some decorations here and there; I didn't even go to the LPW and tell everyone to join. It's thanks to you guys. And I should thank nanashi too, because he was the one who made me aware that the SOTM had been left unattended. (I admit I didn't pay really much attention before.)

But you earn it...xD


And, I'm glad how always on serve to be Ignis... - And don't be so harsh about yourself, because such things are humanly...


Edit: /me hopes that no disconnection gives to net...>_>

Edit2: Is really a nice banner, further so...^_^!

 

[Ignis]

Thanks :) The banner is pretty simple; it only consists of 10 layers, 7 of which are text.

By the way, let me know if you guys need any input on anything related to your entries and signatures in general. If it's something within my knowledge, I'll be glad to offer any help I can.

 

[nanashi1]

Thanks :) The banner is pretty simple; it only consists of 10 layers, 7 of which are text.

By the way, let me know if you guys need any input on anything related to your entries and signatures in general. If it's something within my knowledge, I'll be glad to offer any help I can.

Ah, really? I thought on 8 layers.

And probably at the gif-siggys, because there gives it still some trouble at this area at me (Like once mentioned...).

 

[Ignis]

And probably at the gif-siggys, because there gives it still some trouble at this area at me (Like once mentioned...).

Hmm, I don't remember if you've ever asked anything about gif signatures before. Is there anything specific you needed help with? (Note that I'm personally not a fan of gif signatures, however, so my opinions may differ from what you think are good.)

As a general suggestion, I'd advise against using too many colours. Harmony is one of the most basic concepts of colour composition, and doubly so with animated images. You can use tools such as https://color.adobe.com/ to help finding colour palettes that are adjacent and harmonious to each other (for any purpose, not just making .gif or even static signatures).

Next, of course, is the elements themselves: I think animations have little place with signatures as only subtle ones (like blinking eyes) would look good. If you want more, you could make animated background parallax effects such as falling leaves or moving glitters. It goes without saying that this is more difficult to accomplish by orders of magnitude, however, not to mention that such effects would look horrible if badly animated. Finally, if you insist on having effects such as cutscenes from an anime episode, it may be better to 'frame' the animated part to look like the entirety of your signature is a slideshow window.

 

[nanashi1]

Fuck, finally in ASF after the shit DNS-case...>_>


And...

Hmm, I don't remember if you've ever asked anything about gif signatures before. Is there anything specific you needed help with? (Note that I'm personally not a fan of gif signatures, however, so my opinions may differ from what you think are good.)

As a general suggestion, I'd advise against using too many colours. Harmony is one of the most basic concepts of colour composition, and doubly so with animated images. You can use tools such as https://color.adobe.com/ to help finding colour palettes that are adjacent and harmonious to each other (for any purpose, not just making .gif or even static signatures).

Next, of course, is the elements themselves: I think animations have little place with signatures as only subtle ones (like blinking eyes) would look good. If you want more, you could make animated background parallax effects such as falling leaves or moving glitters. It goes without saying that this is more difficult to accomplish by orders of magnitude, however, not to mention that such effects would look horrible if badly animated. Finally, if you insist on having effects such as cutscenes from an anime episode, it may be better to 'frame' the animated part to look like the entirety of your signature is a slideshow window.

...I did mentioned few time in VM - check out if you wanna...

I use GIMP, where I can't use PS...

And, my problem at gifts are, that they their softness at the colors lose (If I the siggy or a random image as gif make) -> They turning to a color-mass, what e.g. fire/aura-effects not more half-way transparently is or whatever.

 

[Ignis]

Ahh, that. Sorry, didn't think you were referring to that. I thought that was taken care of already as I suggested to use "matte". That's how I usually deal with transparent gifs. I admit that I had never really checked out the GIMP manual up until now (I wanted to use it too so I can get away from Photoshop, but I can't get used to it), and I see that GIMP doesn't seem to have the feature I suggested. I'll elaborate more below.

Also, off-topic, but if you're having DNS problems, try using a third-party DNS service if you don't already. The popular ones are OpenDNS, Google DNS, and Comodo DNS. Alternatively, you could check out WikiLeaks for non-US-based DNS services that may be closer to your area: https://wikileaks.org/wiki/Alternative_DNS

And, my problem at gifts are, that they their softness at the colors lose (If I the siggy or a random image as gif make) -> They turning to a color-mass, what e.g. fire/aura-effects not more half-way transparently is or whatever.

Colours, animation, transparency. You can only have two out of the three. You can have an image with plenty of beautiful colours, but if you want to make parts of it transparent, keep it as a png and don't make a gif out of it. You can have an animated gif with a lot of colours, but if you have any transparent areas, they will look broken. You can have an animated gif with transparent parts in it, but you should avoid having too many colours touch the transparent areas. Unlike png, gif doesn't handle transparency nearly as well and doesn't support features such as alpha channel.

With Photoshop, I use what's called "matte" to help with transparency. This is a feature that makes the outermost parts of an image―if transparent―blend/fade into a certain colour with the goal of making the finalised image look better on a background of said colour. This is how to do it with Photoshop (for reference, or perhaps this could be useful to others who do use Photoshop as well):

Spoiler

First, make your gif. Be aware that your canvas will always show you your image at its prime quality, akin to an unfinished rendering of an animation. Your canvas does NOT show what your work will look like once it's finalised. This is especially true for animated gifs. See, for example, how my image looks smooth and has no jagged edges even though it's transparent:

To see what the finalised version will look like, you need to open the save dialogue box and enter the exact settings you want your final image to be in. This is akin to the "print preview" function in word processors. Once you get there, the illusion of smoothness shown in your canvas will be visible if you have no matte configured. Look at how jagged the edges are. This IS how your final image will look like if you proceed to save with these settings. Take caution.

To prevent this, add a matte colour. This needs to be the EXACT colour of the background area your gif image will be on. In my example, the user rank badge will be positioned on the postbit area (the area left to a post with your username, user title, post count, etc), which has a background colour of #f2f6f8 in hex. This is the value that I need to use as my matte colour.

See how the edges become smooth again? Look closer and you'll see that it's not totally transparent this time: there's a thin, fog-like area surrounding the image. That's the matte colour. Obviously, if you picked a more visible colour such as #ff0000 (that's pure red), it'd be more visible. In short: if you've got a relatively complex image―which means anything that isn't too simple like a spinning loading image―you can't really animate it and expect transparency to stay intact. Matte is a way to route around this. It's essentially tricking the people viewing your image into thinking it's transparent when it's not and is actually just surrounded by a colour that's identical to the background.

Now, I don't think GIMP has this feature. The documentation doesn't seem to list a way to add matte colour to a gif image. Or maybe it's somewhere else and I just haven't looked enough. If anyone here is a GIMP veteran, it'd be nice if you could pitch in. In any case, this isn't the end of the world. Just like how the Photoshop method makes use of matte colour to trick viewers into thinking an animated gif is transparent when in truth it's not (it simply blends better into the background), you can do the same with GIMP, just without matte: don't make your animated gif transparent at all.

Add a background layer beneath everything and fill it with a colour of the area that will be the background of your image. To make it smooth, you need to find out the EXACT colour of this background area. For example, if you plan on using it as a signature, then you need to find out the hex colour code of the signature background area. If you plan on using it as an avatar, you need to find out the colour of the postbit area. For a profile picture, the colour of that area on your profile page, and so on.

Doing this is pretty simple: take a screenshot of the area whose colour you want to find out, open the screenshot image with GIMP (or Photoshop or whatever your image editor of choice is), and use a colour picker tool to sample the colour of the area you want (any image editor worth mentioning should have this kind of tool). Use this colour on the background layer for your animated gif and that's it.

 

[nanashi1]

[OFF-TOPIC] ASF was for me from Saturday until evening-Monday (yesterday, after 6 pm...) unreachable: Because the DNS couldn't find the servers of ASF, nyaa.se, subbers (like HorribleSubs etc.) and almost all anime-video-stream portals (like animefushigi.com) - I thought at first that this maybe an late-bad April Fool action of Checky is, but as I noticed have that even the other important websites as well so are, then went my thought: That maybe the anti-piracy action from USA-Europa-Japan been started, because the mentioned sites all with (in their eyes) illegally actions involved are... Did fought then with the net, but finally seems all again okay out...

Also, off-topic, but if you're having DNS problems, try using a third-party DNS service if you don't already. The popular ones are OpenDNS, Google DNS, and Comodo DNS. Alternatively, you could check out WikiLeaks for non-US-based DNS services that may be closer to your area: https://wikileaks.org/wiki/Alternative_DNS

Colours, animation, transparency. You can only have two out of the three. You can have an image with plenty of beautiful colours, but if you want to make parts of it transparent, keep it as a png and don't make a gif out of it. You can have an animated gif with a lot of colours, but if you have any transparent areas, they will look broken. You can have an animated gif with transparent parts in it, but you should avoid having too many colours touch the transparent areas. Unlike png, gif doesn't handle transparency nearly as well and doesn't support features such as alpha channel.

With Photoshop, I use what's called "matte" to help with transparency. This is a feature that makes the outermost parts of an image―if transparent―blend/fade into a certain colour with the goal of making the finalised image look better on a background of said colour. This is how to do it with Photoshop (for reference, or perhaps this could be useful to others who do use Photoshop as well):

Spoiler

First, make your gif. Be aware that your canvas will always show you your image at its prime quality, akin to an unfinished rendering of an animation. Your canvas does NOT show what your work will look like once it's finalised. This is especially true for animated gifs. See, for example, how my image looks smooth and has no jagged edges even though it's transparent:

To see what the finalised version will look like, you need to open the save dialogue box and enter the exact settings you want your final image to be in. This is akin to the "print preview" function in word processors. Once you get there, the illusion of smoothness shown in your canvas will be visible if you have no matte configured. Look at how jagged the edges are. This IS how your final image will look like if you proceed to save with these settings. Take caution.

To prevent this, add a matte colour. This needs to be the EXACT colour of the background area your gif image will be on. In my example, the user rank badge will be positioned on the postbit area (the area left to a post with your username, user title, post count, etc), which has a background colour of #f2f6f8 in hex. This is the value that I need to use as my matte colour.

See how the edges become smooth again? Look closer and you'll see that it's not totally transparent this time: there's a thin, fog-like area surrounding the image. That's the matte colour. Obviously, if you picked a more visible colour such as #ff0000 (that's pure red), it'd be more visible. In short: if you've got a relatively complex image―which means anything that isn't too simple like a spinning loading image―you can't really animate it and expect transparency to stay intact. Matte is a way to route around this. It's essentially tricking the people viewing your image into thinking it's transparent when it's not and is actually just surrounded by a colour that's identical to the background.

Now, I don't think GIMP has this feature. The documentation doesn't seem to list a way to add matte colour to a gif image. Or maybe it's somewhere else and I just haven't looked enough. If anyone here is a GIMP veteran, it'd be nice if you could pitch in. In any case, this isn't the end of the world. Just like how the Photoshop method makes use of matte colour to trick viewers into thinking an animated gif is transparent when in truth it's not (it simply blends better into the background), you can do the same with GIMP, just without matte: don't make your animated gif transparent at all.

Add a background layer beneath everything and fill it with a colour of the area that will be the background of your image. To make it smooth, you need to find out the EXACT colour of this background area. For example, if you plan on using it as a signature, then you need to find out the hex colour code of the signature background area. If you plan on using it as an avatar, you need to find out the colour of the postbit area. For a profile picture, the colour of that area on your profile page, and so on.

Doing this is pretty simple: take a screenshot of the area whose colour you want to find out, open the screenshot image with GIMP (or Photoshop or whatever your image editor of choice is), and use a colour picker tool to sample the colour of the area you want (any image editor worth mentioning should have this kind of tool). Use this colour on the background layer for your animated gif and that's it.

[Back to topic] Well, I can't PS use, because I don't have it, and I've no money for that unhappily - What then the alternative for me GIMP is.

Actually, I wanted fire/aura-effects use before the girl-layer with several-differntly layers... But it seems that this with GIMP doesn't work...

But I'll nevertheless sometime later some screenshots show, how I it meant have... So far thanks Ignis for your efforts in me...

 

[unownHGSS]

[MENTION=2]Ignis[/MENTION]; That was really helpful, thanks for showing
And I've been meaning to ask. It about the ASF Banner. How did you get the parallel diagonal lines on the banner? As well is it fading out a bit at the part with the text.
I've tried several ways but I just can't seems to duplicate it
Not planning to blatantly copying it but I'd like to expand my knowledge. It just adds that bit more to it <3

 

[xyzapy]

I don't know how it is done in the banner but I have an idea how it could be done. The parallel diagonal lines could be made with a pattern and for fading out effects I would use a layer mask.

 

[Ignis]

[OFF-TOPIC] ASF was for me from Saturday until evening-Monday (yesterday, after 6 pm...) unreachable: Because the DNS couldn't find the servers of ASF, nyaa.se, subbers (like HorribleSubs etc.) and almost all anime-video-stream portals (like animefushigi.com) - I thought at first that this maybe an late-bad April Fool action of Checky is, but as I noticed have that even the other important websites as well so are, then went my thought: That maybe the anti-piracy action from USA-Europa-Japan been started, because the mentioned sites all with (in their eyes) illegally actions involved are... Did fought then with the net, but finally seems all again okay out...


[Back to topic] Well, I can't PS use, because I don't have it, and I've no money for that unhappily - What then the alternative for me GIMP is.

Actually, I wanted fire/aura-effects use before the girl-layer with several-differntly layers... But it seems that this with GIMP doesn't work...

But I'll nevertheless sometime later some screenshots show, how I it meant have... So far thanks Ignis for your efforts in me...

No, April Fool's or not, we'll never do any joke that involves crippling your accessibility to the site. Whatever the root cause was, if you're certain it was DNS, changing your DNS into a third-party provider should help as this will also bypass DNS-based filters.

I've seen people make amazing stuff with GIMP, so I wouldn't say it lacks features; however, I can't get myself used to it yet. I can give general suggestions on how to accomplish something (e.g. "how to avoid having jagged edges with transparent gifs?" "add a layer with the colour of the background below!"), but not how to specifically perform those functions with GIMP. I can give step-by-step suggestions on how to accomplish certain tasks only with Photoshop.

[MENTION=2]Ignis[/MENTION]; That was really helpful, thanks for showing
And I've been meaning to ask. It about the ASF Banner. How did you get the parallel diagonal lines on the banner? As well is it fading out a bit at the part with the text.
I've tried several ways but I just can't seems to duplicate it
Not planning to blatantly copying it but I'd like to expand my knowledge. It just adds that bit more to it <3

You're welcome! Glad I could help. And I don't mind being copied if it helps others. After all, what's a better way to learn than beginning by copying or imitating others?

Anyway, xyzapy got it right: I used a pattern to make the lines. The pattern itself is pretty simple. Here's how:

Spoiler

First, make a small canvas. In the example below, I made a 3x3 one and zoomed all the way to 3200%. If the lines end up looking too tight or too close to each other when you apply the pattern, make a bigger canvas such as 5x5, 7x7, etc. Just make sure it's an odd number (not even). Use the pencil tool to draw diagonally-aligned dots like the following, preferably in black, because it's easier to apply filters to the finished pattern later when you're actually using it than worrying about the colours and such now. When you're done, go to Edit → Define Pattern.

Now add a new empty layer and apply the pattern you've just made. You can also overlay existing layers (or parts of them) with the "pattern overlay" layer style, of course.

To make the lines fade out, I used what's called "feathering". It's like deleting certain areas in a layer, except that the deletion eats into the areas adjacent to it, resulting in those other areas having a fadeout effect. In the example below, on the new layer that I've just filled with the newly-made pattern, I'm going to place a random chibi image and feather around it. The wider the radius, the wider the areas that the deletion effect will eat into, and the more apparent the fadeout effect will be. There's no defining parameter, however, so which areas to delete and how wide in pixels entirely depend on your sense of aesthetics.

When you're done, press delete. The more times you press delete, the less apparent the fadeout effect will be, until it's totally invisible. As is with the areas and radius, this is a trial-and-error operation that greatly depends on what you want to accomplish. After you get the right fadeout effect you want, you can apply layer styles to the pattern, including colour/pattern overlay, transparency, etc.

 

[Dark Angel]

[MENTION=2]Ignis[/MENTION]; I was making my self all this time those line by my self making a file with multiple lines and copy them and placed them after making a good amount i copy this amount and past them to a new layer at 1920x1080. So this way i made this effect by my self. I haven't thought the way of making pattern

Spoiler: Stripes Layer

I add this layer when i want to use that effect and i blend it with the other layers and i change it's color i used that effect also at many signatures also in the last SOTM this this effect is a bit visible not in all areas but it is ;)

 

[nanashi1]

No, April Fool's or not, we'll never do any joke that involves crippling your accessibility to the site. Whatever the root cause was, if you're certain it was DNS, changing your DNS into a third-party provider should help as this will also bypass DNS-based filters.

I've seen people make amazing stuff with GIMP, so I wouldn't say it lacks features; however, I can't get myself used to it yet. I can give general suggestions on how to accomplish something (e.g. "how to avoid having jagged edges with transparent gifs?" "add a layer with the colour of the background below!"), but not how to specifically perform those functions with GIMP. I can give step-by-step suggestions on how to accomplish certain tasks only with Photoshop.

Will try an different DNS, if the currently again bad to me is: Then kick him off...xD


BTW... Indeed, I've also still much learn about GIMP's applications, just it takes a lot time...y_y - But hey, there is still no master from sky fallen. And without effort, no successful project...^_^


And again, thank you very much for your help...

 

[Ignis]

I'm a lazy person, so making patterns manually is out of the option for me. Besides, there are many resource sites out there, from sites like deviantArt to personal blogs and graphics design tutorial sites, that provide pre-made patterns you can seamlessly apply to backgrounds or whatever.

And good luck on your quest towards mastering GIMP, nanashi :) I guess it's all about getting used to; if I weren't too used to Photoshop already, maybe I'd find GIMP's interface less alien and easier to navigate through...