PDN Fanatics

I saw this signature which belonged to some random on some random forum, and i was so attracted to it i saved it. i want to recreate it, can anyone help?

(this is also posted at the Paint.NET forums)

Aralox wrote:I saw this signature which belonged to some random on some random forum, and i was so attracted to it i saved it. i want to recreate it, can anyone help?

(this is also posted at the Paint.NET forums)

Sure...let's dissect it (that's pretty much what this section is for...image dissection is handy for people who want to learn technique and how to look at an image and figure out how to reproduce an effect).

From back to front, we have:

1. A white background
2. A faded black (or grey) graphic
3. Black text with a linear gradient (transparent at top, opaque at bottom)
4. A red-tinted drop shadow, no horizontal offset...just vertical
5. A non-filled red circle, transparent to some degree, with a 40-50px thickness
6. Another circle, exactly the same size, that fades from grey at the inner and outer rim to transparent in the middle of the stroke.
7. A gradient (white to trans) in a circular shape at the top outer edge and bottom inner edge of the circle.
8. A red rectangle, tilted at an angle
9. A second rectangle, exactly the same size, that fades from grey at the inner and outer rim to transparent in the middle of the stroke.
10. A linear gradient (white to trans) at the same angle as the rectangles.
11. White text with a grey outline at the same angle as the rectangles.

That's what I see when I look at it...actually, I look at pretty much all images that way anhymore...constantly trying to figure out how they were made. When I find a technique that I can't figure out how to approach, I'll typically ask the artist what they did to accomplish it. When I started doing chrome borders, it was one linear gradient from black to white, and then numerous others on top of that from black to transparent, on their own layers, and with varying opacity. Curves became my friend after a hint from BarkBark...and I learned something about unfocus, too, but I'm getting off track.

I went through this process a lot when trying to figure out how to use Paint.NET. My Helio-style avatar tutorial was one result of this type of investigation.

Taking what we observe above (and please chime in if you see the layers differently...I see what I know I would try to recreate), you go layer-by layer and try to build something reasonable.

If I were going to attempt this (and I might), I'd probably start with a square canvas large enough for the entire circle to fit, and work from there, trimming it at the very end.

Here's my quick stab (15 minutes) at it...I skipped the background text and drop shadow. (You *must* have the circle centered for most of this to work. Just create a symmetric circle, select it, crop to selection, and resize canvas with it anchored in the center).



Start with a 400 x 400 canvas.

For the background, do whatever works for you. a couple of filled circles and outline followed by a couple of straight lines and some outline should do the trick for the shape...then adjust brightness, contrast, etc.

For the red ring, setting the blend mode to "multiply seems to work best to give that sense of translucence.

The shading for the rings...make a new layer above the red circle, and make your selection be everything *but* the red ring. Fill the inside and outside of the selection on the new layer with black, deselect, and gaussian blur at 30px. select everythig outside of the red circle again and delete that from the new layer, then radial blur to smooth the edges.

The highlights (which I need to adjust if I do a tutorial) start out as 5px-wide rings about 5px in from the inner and outer edge. Make each on its own layer, and cut the bottom 1/2 off for the top highlight and the top 1/2 off for the bottom highlight. Radial blur at about 20-30, and gaussian blur at 4 for each highlight.

For the red bar, it's basically the same as the red circle, after creating the initial shape. Make a red filled rectangle that is just slightly longer than the inside diameter of the red circle, and center it as best you can.

Do the same steps for the shading as for the circle.

For the highlight, create a new layer, draw a 5px white line about 5px from the top of the rectangle, and gaussian blur at 4px.

Now we rotate and crop.

Flatten the layers for the rectangle, and use rotate/zoom on that resulting layer at an angle of -40 degrees.

now flatten everything down to a single layer. Rezize your canvas with the anchor set to "center"...change the height to 120px.

For the text, I used "Impact" at 16pt bold...foreground color to white. Outline at 1px width, light grey, full softness, and rotate/zoom at -40 degrees angle again, then move the text to the appropriate place over the red rectangle.

Wow. its really nice of you to put that much work into this :)

I did everything you said, but i just cant get past this stage. :?

Aralox wrote:Wow. its really nice of you to put that much work into this

I did everything you said, but i just cant get past this stage.

I think the img tag only respects .jpg, .png, and .gif as extensions...

That said, you have almost everything done except for the red circle...did you make the red circle and move it under the shading layer?

If the shading is in its own layer, select it, and magic-wand select the inside and outside of the shading circle, then invert the selection ([ctrl]+[i]), so you just have the circle selected.

Make a new layer, and fill it with red (or blue, or chartreuse, or whatever)...de-select everything, and radial blur it, then change the layer mode to multiply and move it beneath the shading layer.

I'll put up an actual tutorial (or edit that last post to be one) when I get a chance, for clarity's sake.

Thanks for the explanation!

I have reached this stage>

Aralox wrote:Thanks for the explanation!

I have reached this stage>
...

Looking good Now you need some highlights.

...hmm, actually, I can't see the background through the red. Did you change the red ring's mode to "multiply"?

Yep got that done.
I dont really get how to do the highlights...

Can you email the .pdn file to drakaan(at)gmail(dot)com...I'd like to check a couple of things out.

Never got solved, so I'm going to close this thread.