Graphics Tutorials

[HIT_THE_TRAIL]

[align=center][/align]

i think some people are curious how i did the text on this sig. its an old trick i did often in my photobucket.com days on the text. ill share it  cause its super useful if you got text that cant be seen for some reason but your in love with the text color. also it gives your text a 3 dimensional appearance. will make the plainest boring flat text really pop.

[align=center][/align]


above is 3 layers of text the top most layer is pure black like the background. (originally chaos wanted a rebel battle flag and its ok but without it being animated not so cool looking) for text i was gonna go black and all you would see is the white outline above and then see the horses shading is blueish so i was going to have that color outline under and to the right of the black letters in the shadow blue color (i made the lighting and shadow wrong in the example above to try to give it interest and perhaps a tiny touch of chaos lol)

with the grey skull flag he then asked for the blueish light on the horse and the white and blue outlines for the black text looked wrong so i had to do something different. this flag looked squarish so i changed fonts to RDR FONT (Chinese Rocks) plus hes a newer member and most newer members seem to think its awesome cool. but how to make the weird lighting that was so wrong to my eye on the flag less noticable? make the totally black text look flagish. i set the spacing and size and position just right using a little "file" looking icon on the top of the screen(sorry dont know the name) but it pops up a window that makes working with text way easier.

i used the options in that window to set my text height, width, spacing, font choice and color. you dont have to type in values you can click and drag next to the choices like a slider. i went with it bunched together so it was like a group of brothers as one unit basically and i never seen it done around here so style points. for the text color after clicking on the color option i moved the pointer over to the area of the flag i wanted to sample with the eye dropper till i chose the "right" spot.

i then duplicate my text layer and using the little file pop up text window i choose a different text color for that layer. easy i chose white. i then just used the move tool to offset that layer how i imagined the light was coming from above and slightly left kinda how it is on the riders skull.

still didnt look right so what the hell ill try an artistic touch and select black paint and about a 10 pixel brush. choose my flag greyish layer and try to paint it. you will be warned you need to "rastersize" the layer(no clue what the word means but if you dont you cant paint on it so you gotta. lol) i free hand drew a random wiggle line across the layer of text then took the smudge tool (new thing i never tried) and smeared it around a little. looked better reminded me of the flag going from new black to sun faded grey which was the kind of flag i had to put on the sig cause a straight black one would just blend in.



[align=center][/align]


now i also had a blueish underline text layer and damn it was a hard decision whether to go with it or not but i chose not cause it looked simpler cleaner and yeah you have that it shows up but its also just a slight difference from your background thing going on as well. imo the blue underline makes the text the whole focus of the sig and not the rider and the flag. also if your subject is on the left and the text is on the right. well what ever is most right is always going to get more focus than the left. so it was over kill on the text imo. it looks more chaotic tho kinda bends the letters, so damn it was a tough call.

[align=center][/align]


heres a sig without the duplicated different color layer...pretty simple looking. for me when i make a sig for myself the images is of upmost importance and if you look at the 3 with no highlight, just white highlight then white and blue highlight...the more you make the text on the right stand out alot the less focus you have on the subject image on the left.

the no highlight text when i look at it my eye is drawn to the skull on the flag and stays there on the super highlighted text my eye is drawn to the text and it stays there.

its a balancing act i tried doing and compromise is always a part of it.

i didnt want the posses name or the posse image to be more dominate than the other. wanted both to have impact tho as well.

DBD says (and others as well ive watched tutorials of) your eye wants to read images left to right so use it or counter act it if you want. lol

want someone to really see something put it in the bottomish right side. its the last thing they will see if everythings balanced.


feel like i wrote this tutorial assbackwards. ill come back and clean it up and make it more logical as best i can.

[TheNex]

Sorry. I've been away in France on an Art Trip. Visiting all the Galleries. Cheers for the sticky DBD. I'm busy as of late, and if you are willing to take care of the links and such, then I shall not stand in your way. :]

Good work with the tutorials guys, keep it up!

[DiamondBackDylan]

No prob, dude...

And your current SIG reminds me of my Grandson...he has that look on his face most of the time...lol

[HIT_THE_TRAIL]

ok i promised a trutorial today but...man its a super simple thing to do. how do i super simple explain it?

then im asked to explain my scroller sig...lol its not that difficult really either but when you start getting detailed about it it sounds confusing and hard and its really not.
[align=center][/align]

simple answer for the BROTHERS OF CHAOS sig is duplicate your text layer and offset it. its 2 exact same text layers and i painted the upper one after locking the transparent pixels a shade of the flag and then drew a black line across it wiggly and used the smudge tool to mess it up some. i always like to pick a color from my subject if i do that technique. just "looks right" if you do imo.

double your text layers and offset them and super flat dull text can have either a "dropshadow" if black or like the BROS OF CHAOS sig a highlight oppisite of a drop shadow. or you can do both and get a cool 3d super text look. my Agony sig had that. photobucket is where i learned it.but your background cant be pure black has to be just lighter than black for the three layer to work.

EDITITING in instructions to set up your text spacing and positioning. since i made it i forget that one of the coolest looking parts is how the text is positioned around the horses head and the no spacing on the RDR FONT(chinese rocks text...available for free at dafont.com)

it was a fluke accident but one i enhanced by positioning the text with the horses head in "the hole" it just looked like it would fit nice after i put "brothers of chaos" on and knew it had to be 3 words one on top of another (altho its one layer not seperate layers for each line) it wasnt planned but my coolest sig ideas happen from freak occurences i see and capitilize on an enhance.

i recently learned there is a small mini pallette icon on the very top of the screen when working with the text tool. it looks like a funny looking file symbol to me...but its suppose to represent a pallet. if you put your pointer over it, it will say "Toggle the Character and Paragraph palletes"

HELL YEAH! YOU ALWAYS WANT IT ON WHEN WORKING WITH TEXT! assbackwards it doesnt come on unless you find the secret symbol!

to learn to use it i suggest you just toss some text on something and "place" that text in the normal basic way. select your text layer in the layers pallette and turn the Character and Paragraph pallette on and just play around with all the different settings. you can quickly change font styles, sizes, spacing, letter heights and widths, color...etc. you dont have to type in values either. if your pointer is on the left hand side of a box you can click and drag a virtual slider and adjust things.

its "HOW" i positioned my cool simple two layer text effect perfectly to my eye "around" the horse. i didnt use it to do the offset of the "white" layer tho. i just used the move tool. i had it all set up and it looked to tight to the horse so i used the X coordinate at the top of the screen with the move tool...moved both text layers over  5 pixels and walla a masterpiece to others eyes is born. lol

still dont quite see it as real cool myself..but how to make it better? idk. lol

[align=center][/align]

simple answer for the scroller sig is use guides spaced at even intervals aproximatly 25 frames worth. my guides were set at 14 pixels apart from the bottom to move from her rearend to her face in 26 frames. her face was the only open unlined with guide parts before i started animating by creating a layer from the background selecting the rectangle "marquee tool" and the top open rectangle and creating a new "face" layer by copy. then a new frame and move the huge image layer up to the next higher guide, select the big face rectangle with the marquee tool make a layer from copy. do that till her rear end gets up to the "face" rectangle.

then you gotta double your frames and make sure the layers show in reverse on the way down. if i could show and not tell, everyone could make one and with highly accurate moves like i did. the math was kinda challenging. i had a distance to move of 364 pixels and i wanted roughly 20 frames of animation to move from the very bottom to the top (about a 10 pixel move i was thinking would be ideal) and i had to find a number that would divide into 364 perfectly. 14 was the answer.


learn to use guides if your going to mess with animation. it will make it so much easier and more pro looking. know when to set snap on and to turn it off. they are both found under the "view" option. on the very top of my photoshop screen. they seem easy enough to figure out to my construction background mind they need absolutely no explanation. i just didnt for the longest time know they existed. now i do, i use them on everything it seems now. on my version of CS2 there is a "tape measure" hidden under the eyedropper tool on the tools pallette. its damn near worthless if you dont have guides set up and snap turned on to measure thing quick and easy and accuratley.

oooh. i did use a sample BS layer painted white and semi transparent with guides placed where i wanted on the very bottom at first so i could see the frame at the very bottom and set up the face frame rectangle at the very top..and damn now it sounds super pro complex and it aint at all. i figured it out all on my own! you can to with the hints ive given if you really want to.. perhaps DBD can do it and do a show and not tell tutorial.

my next goal is to figure out how to set up some of these super time consuming animation projects using "automation" save me boatloads of time.

[MrBrokenTusks.]

Anyone have any specific tutorials that they think  I should do? Any styles I use that others might want to know?

[HIT_THE_TRAIL]

Anyone have any specific tutorials that they think  I should do? Any styles I use that others might want to know?

i think your video game contest sig was pretty cool and i saw some of the behind the scenes images you used for it MBT. i think it would make an interesting "style how to tutorial"....if you do as well and its not to difficult to explain for you.

[MrBrokenTusks.]

This one you mean?



I would be up for it, but it was more using blending modes to my advantage tbh. Not really a style, but if anyone wants to know how I will write a tutorial no probs.

[HIT_THE_TRAIL]

just an idea. if you have a better sig that shows more techniques so people can learn...i say pick a good one.

maybe wait and see if DBD has a suggestion for you? you might do something he would like to know about.

[MrBrokenTusks.]

I am writing one for it in microsoft word at the moment, so I can get it right I will post it when done, but if anyone has any other ideas. I will do them, but yeah this isn't going to be a very exciting read it is just going to be about using blending modes, but still get it to look seeable instead of the common "what is that" it will also be about duplicating layers, to make things look more dynamic and enhance colour.

[DiamondBackDylan]

Great Tip on the Chaos Text and great tutorial on the scroll, TRAIL.  Will add a link to OP.

i recently learned there is a small mini pallette icon on the very top of the screen when working with the text tool. it looks like a funny looking file symbol to me...but its suppose to represent a pallet. if you put your pointer over it, it will say "Toggle the Character and Paragraph palletes"

HELL YEAH! YOU ALWAYS WANT IT ON WHEN WORKING WITH TEXT! assbackwards it doesnt come on unless you find the secret symbol!

You can also get to this panel in the Windows dropdown of the top navigation.

And I am VERY interested in a tutorial for your Games entry, Tusks!  Blending is something I have never done in PS. Well...that isn't exactly true.  There are many aspects of PS that I have not had the chance over the years to get into.  I have a million and one work-arounds and procedures for manually doing things that could be done way easier if I knew how...a result of being self-taught ...lol

So Tutor away!!! Can't wait to read it!

And I have a:

QUICK TIP

Sharpening images, especially when the final product is going to be fairly small (like a Forum Signature) can make a huge difference in the way it ends up looking.

I use a .3 Radius in Unsharp Mask to almost everything I do!

To get to the Unsharp Mask (and ALWAYS use this, not the automatic sharpeners) click >filters >Sharpen >Unsharp Mask...

This will open a Panel that will look like this:



You can make subtle changes with the 'Amount' but I usually don't use it.

Below is an example; first image is stock...second image is sharpened with a .6 Radius:



Big difference.

[HIT_THE_TRAIL]

cool DBD ill try your sharpen technique.

someone should do a borders tutorial im thinking.

 i see a few new sig makers who i think would really like to know how.

if they dont atm...they will real soon.:cowboy:

[MrBrokenTusks.]

I actually prefer the first image is that the one you sharpened?

[DiamondBackDylan]

Yea...it was a quick tutorial...I actually would have used the Sharpen 'Tool' on that particular image so the legs wouldn't have gotten over-sharpened...but it gets the point across.

Might go back and put in a better example later.  its one of those things where I use it every five minutes, but the minute I need to show something, can't find a suitable image...lol

[HIT_THE_TRAIL]

@ DBD of DWB nice old time oval table bar sig DBD i was gonna rate it but i get beat all the time when i want to tell someone their sigs real cool....and heck yeah the wolf bannaer and posse sigs you made are awesome. i saw them recently.

dude i think the last frame of all my animations is getting rushed. i thought it was a Microsoft gif animator thing but my gun twirler sig looked like i screwed up and forgot a frame and my Scrolling Scarlett at the bottom jumps a frame fast and i didnt make it that way and now my TheSigGodHTT (black knight on a horse) skips a frame fast and man it bugs me. tell me does it skip a frame for you? if it scrolls for real for you keep it to yourself...lol

nope its the very first frame on this sig...man flaws in animation bug me so much, its not my fault either. ill have to double up the first frame probably to fix it but the timing is real important to me and the "feeling" of the sig. what a pain to adjust. i bet the timings different for everyone. whats slow to me and my computer is to fast on another computer.

maybe its an imageshack problem? dude i never saw this dropped frame stuff before with photoshop, now three sigs in a row and my halloween sig are screwed up animation wise.

ill try a photobucket version before i mess with anything else.

EDIT: YEP ITS IMAGESHACK! dont use it if your gonna do animation people.

[HIT_THE_TRAIL]

@DBD a tech animation question...did you use tweening to do the fades to different scenes in the...idk what to call it. real looking but art, old west, oval sig?

i try tweening but it dont work right it seems for me always just ends up looking messed up. any tips on how to use it like a pro. i mean i didnt really even notice the fades to much until i really got to studying it intensley. it must be tweening...

[DiamondBackDylan]

Yea...a cpl tips, actually...

The first thing you could do to get a 'clean' fade is do it by hand, frame by frame.  A 20% downgrade on Tint per frame at .1 seconds produces a decent fade without the filesize going thru the roof, which I am sure you have seen happens pretty easy using tween.

So, create a frame of what you want to fade out and reduce the tint/transparency from 100% to 80%, create a new frame and reduce it to 60%, etc, etc...until down to 0%.  To get a smoother fade (in OR out), go inj increments of 10% instead of 20%.

Now, if you DO want to use the tween, this is something that is a simple fix but took me AGES to figure out (a duh moment for sure). This might be a bit difficult to explain...

Say you have 4 layers and you want each layer to be a frame of the animation, so the animation will have 4 frames (like my oval SIG has 4 frames b4 text). Now as you know already, to make each layer a frame of the animation, you would create a new frame and then make sure that the only layer with the eyeball next to it is the one you want in that frame.  Repeat this and you have your animation, but with no fade between frames.

So I believe this is where you are when you are trying to use the tween to fade one frame to another.  Its also where the 'duh' moment comes in...lol

The reason the result looks messy if you tween one of these frames to another is that there is a transparency that shows 1/2 way thru the tween cuz (and here is the kicker), there is nothing else showing UNDER the frames being tweened!  So, this means that as the first frame is fading OUT and the second frame is fading IN, there is a gap where both frames have a 50% tint, leaving the viewer to see what is below it and if there ISN'T anything below it, the whole tween kinda washes out.

To correct this, make sure that there is something showing below the frames being tweened, OR order the layers in a way that the frame fading in is above the one that is...oh hell, this is where its too hard to explain...gonna do some graphics to show what I mean...brb

-----------------

Ok...here is what we are working on:


This is what the animation Panel looks like b4 tween:


Here is the LAYERS panel for first frame of animation:


Here is Layers Panel for Second Frame:


Notice how I left the layer for the first frame visible (eyeball) and BELOW the 2nd frame.

Here is the Animation Panel AFTER Tween w/a .1 second time on each frame:


Because the second frame is kept visible during the Tween, you don't get that washed out look.

-------------------------------------

Just reread this whole thing and it isn't the clearest, but not sure how to say it any more clear than this.  Hope it helps.



Btw, just curious what you all think the 'story' is in my SIG.  I'm wondering if what I intended is coming across...

[HIT_THE_TRAIL]

yeah it does help! exactly why tweening is messed up and looks wrong...that transpearancy showing in the middle. ill mess with it and reread your tutorial...i kinda think i get it but right now my brains fried. i put in a huge effort on Frank the bunnies sig and of course its to fast when i get here i got frames at different timings so its not a simple solution and one i got no will power to tackle whatsoever atm. maybe not even for a day or two. hahahaha

[HIT_THE_TRAIL]

hey the story of the sig is...a dude arrives in town obviously comes in by train..but theres an atmosphere of "marshall law" in the town. he goes to the saloon and parties it up and wins big at poker....guessing one of the guys thinks he was cheating or just got real mad for losing all his money and a fight ensues and then the law hangs the poor guy altho it probably wasnt his fault.

am i right?:cowboy:

PS i totally understand your tutorial on fading and tweening.

see i wanted tweening to move an object from one location to another and it does kinda. but if your subject moves halway from point A to point B and then theirs that transparancy totally in the middle and you have your object at point A showing in a layer underneath your two tweened start and ending frames....(why does this stuff sound so complex and extremly difficult when you start talking about it in detail? hahahaha)well it would move almost half way and then start fading out and seem to move backward and then halfway plus a little and then materialise more as it gets to the end point. ill do one just for fun to see if im right, and post it here.

its not much of an animation aid imo the tweening of two frames altho the help instruction make it sound like its an animators magical best friend. ill mess with it some more but its not the trick i would love it to be unfortunatly so far.

[DiamondBackDylan]

Yea...Working w/animated GIFs is EXTREMELY limited.  The tween is only good for a cpl things, unlike the tween in other programs like Flash.  And filesize...its the biggest problem with GIFs.  A fairly complex animation in GIF format might be as much as 10 or 20 MEG (or more!).  The same animation done in Flash (or 3rd party flash maker like Swishmax) can have a filesize of 10 or 20 kilobytes and will run smooth as silk.

You should try Swishmax...wouldn't help any for Forums (no flash will EVER be allowed on ANY forum), but you would absolutely LOVE what you can do with it.

[HIT_THE_TRAIL]

dude i was so wrong....look! i call it WTF! ANIMATION!



tween will move a layer from a point A to a point B accuratley and with no fade!

big deal right? well im thinking maybe instesd of taking hours and alot of hard work setting up and complicated math.....a scrolling sig could just take minutes to make!