cadburys_egg

Me too! I'm looking to see if I can will my parents to buy me a nice Titanium 400 cc Driver. Right now I have to use my dad's and it's a little big for me. Though, I drive nearly 200 yards with it (4'10'' ftl!) :lol: Possibly another hybrid too. <3 my 5 Hybrid club. *fluffles 460cc Ping G5* ^_^

I prefer Robot Rock to technologic. :P

It's no longer a case of "want"... It's a NEED. Isn't the helmet just a TV with a fish bowl?

Well ofcourse they're easy, it's just a matter of patience with a maze like that. :P

He's trying to hotlink from dA, which you cant do. Here; [*:2v1dfzww] Render isn't blended, it's just put behind a (few) C4Ds. [*:2v1dfzww]C4D'ing like that doesn't leave a whole lot of room for improvement. [*:2v1dfzww] "Spellforce" and yet she's holding a sword? [*:2v1dfzww] Why blue? The render is a sore thumb there.

Epic win steaks for you. Seriously, why post this?

Your outcome is totally different from the tutorialist's outcome. :? The tutorial isn't even very good. Nasty borders that belongs in the '80s. Random zoom blurring. Random "grunge" effect over the top. (I used the term grunge here lightly) Not a whole lot of contrasting. No sense of depth. 80%+ of the signature is the picture (not render). Read better tutorials. :|

Argh, it's not out in the EU yet. I NEED IT SO BAD.

It's the normal persons equivalent of you getting DVDs for christmas. :P

Look along the bottom and in the middle. ;)

Spoiler. Kay, that was a fairly hard maze, amirite? Now try this; Uh, yeah. Some people have too much time to do things like this.

Probably money. Golf stuff. Games. I don't know, and for reference, you can check my signature for countdown to christmas. :P

It's true. A quick, simple manip just emphasises this; Can you tell what i've done? :) Great photos as usual, Woopi.

..what? Blue wood texture - Noise - Superman with thunder effects behind him - Noise. Flat colours. Why? Illegible text Bad border Points for animation, though.

Didn't you already have a topic showing "your signatures"? Kew eff tee. Alot of the backgrounds look fine, then suddenly you meet the text and render. Three words spring to mind here; Not. A. Clue. If you don't know what you are talking about, do not post. Also, why did you have to go and quote the post?! People would take this post much more seriously if you used correct grammar and didn't sound like a bawling 5 year old. In the biz, we call this an OHSNAP and ZING.

It makes no sense. You just cut out some gaia avatars from a generator, put them on a background which looks like some random colour streaks and a blur and added some text. Plus you've bevelled and embossed the avatars! Why?! It makes them look really bad. Dear lord, do not start this. You don't have the first clue how to make abstracts. 1. Don't bother trying to start a flame war, you'll get banned faster than you can read this post. 2. Stop pasting your signature for every post. Set it as your signature in your profile. You look like an idiot.

You keep reminding me of things to put in. :lol: Ok, the chequered background stands for trasnparancy. An image with a chequered background when saved as a GIF or PNG will have no background. To move a render, make sure you have this tool selected; (V) If you do have this selected, make sure you are on the right layer; If this still doesn't work, make sure you've pasted the image onto a new layer, pasting it onto the clouds isn't going to let you move the render independantly. Hope this works! :) Good point, I need to change all of the sizes and alter some BBCode first though.

About 2~3 days in total. Mainly because I had other things to do in the mean time. The longest part was getting all of the images and uploading them. If it had been an all-text tut, it would've taken me about 2~3 hours. :) Thanks for the comments, and thanks for adding it to the FAQ, MXM. I will probably update this every so often, with things like jargon busting and possibly adding more. (Such as teaching how to make pop-outs.)

Hello to all who come to read and learn from this guide. Please read the whole post before asking questions. Content: 1 - Choosing a render. 2 - Creating a canvas. 3 - Making the signature. 4 - Blending the render. 5 - Effective ways of colouring. 6 - Choosing the write font. (I'm so witty) 7 - Creating effective text. 8 - Bordering the edges. 9 - Saving. 10 - Uploading. Note; if you want to go straight to a particular part of this tutorial, press CTRL+F and copy and paste the content number and title. ---------------------------------------------------------- 1 - Choosing a render. Choosing a render can be either the hardest or the easier part of creating a signature. If you know what you want the render to be, it makes the selection process that much easier. If you don't, however, it makes it sometimes a long search for the one thing that tickles your fancy. Important tip: You should always find the render before you start making the signature. This way you can shape the signature for the render. Generally, most renders are easy to use. But there is always some that really aren't. Here are a few examples of typical bad renders: [*:2sgypn5r]Bad Render #1. Although this render has no bad cropping or jagged edges, it wouldn't work well in a signature for one simple reason. Lack of colour. Although it has colour, there is no variation in it. The render would blend too well and fade too far and become unnoticable. [*:2sgypn5r]Bad Render #2 This render dodges the first rule and has plenty of colour variation. But it destroys another one. This render ends in all 4 corners. If you were to use it in a signature, it would always have one bad edge. Now, for the purpose of this tutorial, I will be using this render. It features a good variation of colours; browns, silvers, purples and whites. (There is green and orange, but not alot of it) This render also never touches an edge which means I can freely place and alter sizes of it. As a last point, it also has a sense of motion which can help the signature feel less flat. ---------------------------------------------------------- 2 - Creating a canvas. This should be pretty much the easiest part of the whole creation of the signature. For this signature I will use the following settings; [*:2sgypn5r]Name: Self explanatory, this is what the file name that it will be saved under. (This is changable) [*:2sgypn5r]Image Size: Don't worry about this, you can set the file size manually when you need to. [*:2sgypn5r]Preset Sizes: No need to worry about this either, if you want to make a particular size then you can use this as a shortcut. There is a way to save your own presets, but I can't remember how to now. [*:2sgypn5r]Width: This is how far from left to right you want the signature to be. Remember; we work in pixels (px). [*:2sgypn5r]Height: This is how far from top to bottom you want the signature to be. Remember; we work in pixels (px). [*:2sgypn5r]Resolution: No need to worry about this, it only affects when printing an image. [*:2sgypn5r]Mode: Make sure this is either RGB (Red-Green-Blue) or CMYK (Cyan-Magneta-Yellow-Black). These modes will allow you full use of all tools. Other modes will restrict you from certain tools. [*:2sgypn5r]Contents: This can be anything you like, it doesn't matter since you can easily change it anyway. I use either white or transparent. The canvas size can be anything, but to comply with TIF rules it must be within 450(px)x175(px)x30kb. Generally try to use a rectangular size one, length = height x 2 + Z. Also try to keep it divisible by 5. (No, 453x134 or something). ---------------------------------------------------------- 3 - Making the signature. Now here's where it gets interesting. Your screen should look like this (or similiar); (Thumbnail'd to reduce loading time, click to view full) Be sure your colour swatch is like this; If it isn't, press D on your keyboard. I will be using the following brushes to create this signature; (Once again, thumbnail'd to reduce loading time, click to view full) You can get the brushes i'm using HERE. (If this link becomes out of date or becomes broken, please PM me so I can re-upload) If you are unsure how to load brushes to use in Photoshop; Then just browse until you find the file. (Make sure it's unzipped!) Now is the time we form the signature. To start off, on the first layer (name it "Background" or "Clouds") go to Render -> Clouds and repeat until you find something you like. It should not be too contrasting, but not non contrasting. Here's mine; Then we should place the render; Try not to center the render. This can leave you without space to put text, but there are certain renders that should be centered. Here's mine; To shrink your render, go to Image -> Image Size; [*:2sgypn5r]Pixel Dimensions: Don't worry about this, it's just saying how big the file size will be. But you can change this later. [*:2sgypn5r]Width: This is how far the image will be from left to right. Make sure it is set to pixels! [*:2sgypn5r]Height: This is how far the image will be from top to bottom. Make sure it is set to pixels! [*:2sgypn5r]Document Size - Width: Leave this, it does exactly the same as above but features other measurements such as inches or centimetres. [*:2sgypn5r]Document Size - Height: Once again, leave this. [*:2sgypn5r]Document Size - Resolution: Again, leave this. This setting will only affect when printing. [*:2sgypn5r]Constrain Proportions: Make sure this is ticked. If you set the height to something, it will automatically calculate what it's width will be (and vice-versa). Vital if you want the image to look normal. [*:2sgypn5r]Resample Image: I'm not too sure myself what this does. You can set it to anything, but I recommend to keep it as Bibubic. If you are using the same render as me, I have set this render's height to 150px. If you want to experiment a little more, do something like this (on a new layer); To get this effect, simply duplicate the render, make it slightly bigger and set it to 50~80% opacity - as shown below; Important Tip: These should all be on seperate layers; clouds (background), render and the big render. To move your render about the canvas, make sure you have this tool selected; (V) Then, make sure you are on the correct layer; Once you have that right, you should be able to click and drag the render to where you want it. (Remember, the render must be on a seperate layer!) Some of you are having trouble rotating the render (if it's needed) without rotating the whole canvas, to rotate a render without rotating the canvas there's two things you can do. Edit -> Transform -> Rotate...; OR Edit -> Free Transform (Ctrl+T); This way is actually a lot quicker. Simply click outside the box area and drag to rotate it, click on the squares and drag to expand/shrink or click and drag inside the box area to move the render. Holding down shift while rotating will make it move in 15 degree intervals. Holding shift while moving and it will only move in one direction; either left/right or up/down. And holding shift while resizing will hold it's proportions. Now to the brushing: If you are using the same brushes as me, you can easily do things similiar to me. Before we begin brushing, make sure your brush settings are similiar, or the same as mine; Important Tip: Make sure you create a new layer for every brushing part. First of all, use some swirly/firey brushes and focus them around the render like so; (Note; mine so far is 3 different brushes on 3 different layers.) Use about 5 layers (1 brush per layer) to focus around the render. From then on, dot some other brushing around the rest of the canvas. (Do around 10 layers) Mine looks like this so far; Now set all of the brushing layers to soft light, overlay or hard light. (Use soft light the most.) This be mine so far; Now create a new layer on top of the brushing, but below the render(s). Then grab the gradient tool (G) and use these settings; Now create a gradient from a point on the render. This point should not be too far to one side and should usually be from either a top half or bottom half. Here is what I will do; Now you should have something that looks similiar to this; Set the gradient layer to overlay; And you should get something similiar to this; The gradient has focused the brushing and set some lighting around the render, this is vital to get a good effect. But, it hasn't focused it alot, so I will duplicate this layer; (Thumbnail'd) And now it should look similiar to this; But this is not good enough! No, it isn't focused enough, let's duplicate it once more; Now this is much better, the brushing has become much more focused around the render. But now the big render seems out of place and stands out too much on the empty space. We can sort that by setting it to overlay. (I moved the big render a slight bit more to the left.) Now some of you are probably thinking we have alot of blank, empty space on the right side. That is not a bad thing, just because we have space doesn't mean we have to use it. One thing not to do on an abstract signature is to go overboard and have too much going on. Now we have the base of a signature, it still looks too flat. We can quickly remedy this by using an adjustment layer. Adjustment layers are tricky. There are simple-to-use ones such as Brightness and Contrast, and there are much harder-to-use ones such as Levels and Curves. Now since this is going to be a fairly straight forward tutorial, we'll just use the Brightness and Contrast layer for now. Select your top-most gradient layer, which should be just below your render(s). Then go to Layer -> New Adjustment Layer -> Brightness and Contrast. As depicted in the below image; (Thumbnail'd) Using a B&C (Brightness and Contrast) layer can be quite tricky, but once you know how it can make your signature look a lot better. When you first set the layer, you should get a settings box like this; These are the settings I am going to use, default is +0 contrast and +0 brightness. The trick is to not use too much contrast and not too much brightness. The most brightness you will need to use is about 5~10. The contrast is the only thing that varies alot, this should normally be between 10~35. And so, after the B&C layer, you should have something similiar to this; ---------------------------------------------------------- 4 - Blending the render. Blending a render is one of the trickier things to learn how to do, but once you know how, it makes the signature look a whole lot better. To start off, duplicate your small render 2 times. You should now have 3 layers of the render; Now on the bottom render layer (as shown in the above picture), apply a gaussion blur (Filter -> Blur -> Gaussion Blur) of about 3~5 px; (First image is thumbnail'd) At the moment you shouldn't notice a huge difference; Now, from here you should start to notice a difference. First of all, select the render layer above the one you have just blurred and load it's selection (Select -> Load Selection...); (Thumbnail'd) And then simply apply a feather of ~3px; You should notice that the selection becomes slightly smoother and may overlap a part of the render. This is normal. Now you must inverse the selection (Select -> Inverse); Now hit the delete button. The edges of the render will look a slight bit smoother. Now de-select the selection (Select -> Deselect). Now do the same for the top render, but use a feather of 5px. Also, remember to do this for the big render (if applicable). But use a feather of 10px and a blur of 5~10px. Now after all of this, your signature should be looking something like this; (Remember that the big render was already set to overlay. If it looks too saturated, set the blurred one to 50% opacity, and the top one to ~75%.) If the above image looks nothing like yours, compare the layer settings; ---------------------------------------------------------- 5 - Effective ways of colouring. Now by effective, I mean more than just a simply H&S (Hue and Saturation) layer. There are 2 ways of getting a good colour to the signature. Important Tip: You should only use one of the following techniques in a signature. Effective way #1 Using the render I actually learnt this from MagicTV's tutorial he created a while ago, so i'm giving him credit for this; Duplicate your render a number of times in different angles and sizes; (Thumbnail'd) Then merge all of the duplicated renders as shown; (Also Thumbnail'd) Once they are all merged, apply a gaussion blur of ~5px. Then move this layer below the original renders and set it to overlay; (Thumbnail'd) The main problem with this is... it doesn't always cover the entire signature. Although you get a good colouring, it can leave blank spaces and the colours aren't manually pickable. End product using this technique; Effective way #2 Using the render's colours This is my way of colouring, it's really an adapted version of MagicTV's tutorial. I find this way of colouring easier and can still get the same results. First of all, create a new blank layer below the render but above the adjustment layers. Then select the eyedropper tool (I) and, using the settings as shown in the below picture, select 2 contrasting colours; (Thumbnail'd) Then simply create a clouds layer (Filter -> Render -> Clouds); (Thumbnail'd) And then set the layer to overlay; (Thumbnail'd) (Note: I have done something else which is explained in the picture, but it is not necessary.) And this concludes this section on how to effectively colour, onto the text. ---------------------------------------------------------- 6 - Choosing the write font. Choosing an appropriate font is usually a big downfall for most signature makers. A good font can sometimes make or break the signature and the choice must be taken into consideration. Here are some examples of a bad choice of font; [*:2sgypn5r] Bad font #1 - It's quite simple why this is a bad font. The signature is a smooth, light one but the font kills it with a sharp, trashy look. [*:2sgypn5r] Bad font #2 - This is pretty much the opposite. A dark, grim looking signature doesn't look good with frilly curls In the end, choosing the font is down to your own perception. Using a pixel font, or a basic one such as Arial, is bound to go with anything but is often a cheap way out. I have chosen to use the font - Bayou. It's not too over-bearing. It's got a certain exotic-ish feel. Curvey, it fits with the render's movement. Now let's move onto making the text look good. ---------------------------------------------------------- 7 - Creating effective text. Creating effective text is about as hard to do as finding appropriate text. For sharper fonts, you'll want the text to emphasise this aswell. An easy way to do this is to duplicate the text and apply a motion blur, then lower the opacity slightly. It will sharpen the text and (as the name implies) add a small sense of movement. But for smoother fonts, you won't want to use a motion blur. You'll want to use the gaussion blur. Here's a common technique I use: Place your text where you would like it and set it to about 60~90% opacity; (Note; my text is at 80% opacity) Now duplicate the text, and apply a gaussion blur to the bottom text layer. Have the gaussion blur strength to about 3~5px; That's about it for text, although you can add a little line under it if you like; Simply use the line tool and add a slight motion blur (25~40px, 0 degree). ---------------------------------------------------------- 8 - Bordering the edges. Borders can vary greatly. They range from a simple 1px black, to a ~5px bevel and to tech borders. Bad tech border; I suck at making tech borders, but this just emphasises why you should not use them on a signature like this. I'm not going to bother making a mini-tut for these, there's no point. Basic 1px black; The basic of basic. These borders will go with anything. If all else fails, use this. No wait, just use this. Simply go to Select -> All and then Edit -> Stroke (on a new layer); Cinematic border; This is the type of border I usually use. It only differs by having the top and bottom stroke being ~5px rather than 1px. It just helps to focus around the render. Simply draw (with the penci/brush tool) a 5px line on the top and bottom line on top of the 1px border. That's it for borders, now to save your masterpiece! ---------------------------------------------------------- 9 - Saving. Pretty simple. In this part i'll just quickly explain how to save your signature so it can be used here on TIF. First, go to File -> Save for Web...; Then click the little arrow and select Optimize to File Size... You should then get a little box pop-up. Set it to the following settings; [*:2sgypn5r]Desired File Size: Set this to the size you want the file to be. The higher this number is, the better quality and vice versa. For TIF, the file size must be below 30kb. [*:2sgypn5r]Start With - Current Settings: Generally, don't select this. If you want the image to be PNG or GIF purposely, choose this. [*:2sgypn5r]Start With - Auto Select GIF/JPEG Usually you should use this. It will get it closer to 30kb (and thus, higher quality) but it pretty much always uses JPEG, which is bad if you want transparency. [*:2sgypn5r]Use - ... Ignore this. This is only applicable when slicing an image to make it a website. Now you've got your work saved, you need to upload it to post! ---------------------------------------------------------- 10 - Uploading. I'm going to show you how to upload to ImageShack. This is because it requires no sign up, and if you have a Photobucket etc. account you should know how to upload anyway. Firstly, go to http://www.Imageshack.us. Then, click the Browse button and find your signature you wish to upload. Click open once you have selected the image you wish to upload and then click Host It!. Once it has been hosted, you will get this screen; To post: Copy the bottom link and just manually add tags; [img=Link Here] ---------------------------------------------------------- And there you have it! Cadbury's complete signature tutorial is complete! If you've not understood anything and would like extra learning help, check out the Tutorial PSD; http://www.psd-up.com/files/tutorial psd_uAw.psd Learning purposes only, ripping will not be tolerated and will result in removing of face. Please post any and all comments, queries or criticism towards the tutorial! Complete tutorial designed, created and posted by Cadburys_Egg of Tip.It forums. Accept no imitations. Thanks for reading! .: Updates :. 12th November '06; - Originally posted. 13th November '06; - Added how to install brushes. - Added how to move render. 15th November '06; - Added how to rotate a render without rotating the whole canvas. 14th December '06; - Added the Tutorial PSD.

That didn't make sense. "The text takes up alot because on a different board the sig size is 300x100"? We said the text is nasty and the render takes up too much space. Your signature backgrounds (if you made them) are fine, they look like C4Ds. But then you kill it (no pun intended towards the render) with a render which has no blending and some random font.

Make the characters send the other way around, it doesn't make sense to read the "love the outfit" last.

I highly doubt it was made with paint. It looks very much like a blue-to-black gradient with a twirl filter on it.

If you only play flash games that make a front page, you must no get a lot of variety. How many MMOs do you play that don't require a download, apart from Runescape? By MMO I mean non-text. My girlfriend laughs at your girlfriends low quality, her name is cutesy.png Oh, Nadril, what do you get up to?

Im not so good on photomanip tutorials... But if you happen to use Photoshop 7.0 or higher, I can provide you with a PSD of one. All the layers of it have been named accordingly and could be of some help. http://www.psd-up.com/files/enter the light_4S8.psd (Won't hyperlink, just C+P) "Enter The Light" - PSD

I'll use a scenario to express what I meant; "OMFG PRO SIG MAKER USES B&W TO MAK SIG LUK GUD!!!1" *Does B&W version* "AM PRO SIG MAKER NAO?!??!?!?"