::PHOTOSHOP TUTORIAL BY SunyiNyufi::
---------------------------------------------------------------------------------------------
Step 1. - Finding a picture
So first of all you need to find a picture you want to use for your sig. I mostly use high resolution pictures, 'cos they aren't blurry, so it's easy to work with them. An other important thing is to look for a pic with possibily solid background, 'cos it's easier to make a render from... but about that later. Anyway, the pic should be bigger then the sig.
Here are some sites, where you can find good pictures:
If you never made a render before, but you would want to use one, I advise to look for one at
But as you can see, not all grey parts were cut out. They are some areas which have the background color, but you might not notice it first. So it good to make a new layer
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/07.png" border="0" />
move the layer under the layer with the character, and fill it with some dark color. Now we can see clearly where we have to cut parts out.
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/08.png" border="0" />
Oh and btw, you can select more then one area with the magic wand, if you hold down the Shift key.
Now we are almost ready with the render, we only have to get rid of the other guy's arm. (Actually we could use the pic already as it is, but if we do that I won't be able to show how to make render in a different way :P) Zooming in again, and this time we will use the Freeform Pen Tool
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/11.png" border="0" />
With the Freeform Pen Tool we carefully trace along the arm of our character, to get something like this:
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/12-1.jpg" border="0" />
After that you go around the other guy's arm too, including the edges of the picture.
If you think your render is not perfectly clean, you can trace along the edges with the eraser tool, I do that most of the time.
I have to say that making a render is most of the time not as easy as this one was. You have to practice with the pen tool quite a lot till you get the hang of it, but I think it's worth the time.
Since the guy is facing left I move him to the right side of the sig, and the updates will be on the left side. Then I make a new layer, and put it under the layer with the guy on it, this will be our first layer to make a background on.
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/22.png" border="0" />
Now fill the Background 1 layer with the color of your choice (Select color, then go Edit>Fill and fill with foreground color). I want the sig to be blue, so I fill it with #16426d
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/23.png" border="0" />
But plain bakcground is boring, so we will use textures, but not the once included in Photoshop, cos they are lame. Everyone can find nice textures at Deviantart. Why to use textures? Because they are easier to use then brushes, and look cool. I most of the time use at least one or two texture layers for the background.
I decided to use a music sheet texture first (cos the guy is listening to music). So I open the music sheet pic in Photoshop, and resize it. I mostly resize texture to 600 px width, but this time I will use a width of 750 px, 'cos the sides of the sheet are compeletly black, and I don't neet that black. So after resizing it, I select the whole pic, and copy it.
Now we have a pretty nice background, but I want it to be even nicer, so I will use a couple of brushes to put stains on the music sheet. For that I make a new layer, select white as foreground color, and click on the brush tool. Then I use several of my stain brushes (you can find brushes at deviantart). In the end it will look like this:
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/33.png" border="0" />
Of course I don't want it to be white, so I set the layer with the brushes to Soft Light.
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/34.png" border="0" />
Now I go to the guys layer, right click and select Belending Options. I want to add a nice glow to him, so I go to Outer Glow. I set the color to one of the darker colors from the background, and make the size of the glow a bit bigger, and also make it spread a bit more, and lower the opacity of the glow, and make sure it's set to Screen.
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/35.png" border="0" />
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/36.png" border="0" />
Looks nice right? ^^
Step 4. - Adding MAL part
Now we will add the MAL part of the sig. For that we will need to decide how many upadtes we want to show. I mostly show 2 rows, 'cos I have a plain MAL-sig-with-2-rows pic on my hard drive (mostly 'cos always forget the its size). I open this pic in Photoshop
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/SunyiNyufi.png" border="0" />
(How to get it? Open MAL in your browser, click edit on My Profile, go to My Signature, set the rows to your choice, the bakcground to white and font clor to something dark. Click update. Now you can see the updated sig, right click on it and save pic on your PC.)
You can find nice fonts at Dafont. I use "You are Loved", 'cos it's one of my favorites :P
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/47.png" border="0" />
You have to play around a bit with the size of the text, but I guess anyone can do it alone, so I will move on ;) Since I want the text to be on top, I move the layers for the updates (MAL layer, MAL updates layer) a bit down (to select both click on them while holding Ctrl key). I want the text to be in two rows, so I made a new text layer out of "upadtes:" and move it around.
Now I will change the text color. Use the text tool again, and click on the color
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/49.png" border="0" />
and set it to the color of your choice. I will use the color that I originally used for the MAL updates part. After that I set the text layers to Color Dodge and lower opacity to 70% (note: I moved the "Crimsonwill's" text a bit lower, so it'll be more readable)
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/51.png" border="0" />
(and I add my name on it too, 'cos I'm an egoist muwhaha >:P)
Most of the sigs newbies make are missing this. Border is not a must, but most signatures look better with it. Making a border is basically the same as it was for the MAL updates border, only that here we will select the whole canvas, and make a stroke on a new layer with the location "Inside". (Make sure, the new layer is above every other layer)
<img src="http://i112.photobucket.com/albums/n174/Zurui_Usagi/tutorial/54.png" border="0" />
Now I basically make the same thing I made with MAL border.
* If anyone has written up a tutorial similar to this using other programs (i.e. GIMP, Paintshop), feel free to PM me so that I can add yours to this post.
Mod edit: removed links
BrandonAug 10, 2018 12:44 AM
This topic has been locked and is no longer available for discussion.
Basically what you have to do is divide your sig into parts. Depending on your signature, you may have a different number of splices, but generally you would have 5 like mine.
This can be done using the splice tool in PS.
Once your sig has been divided, go to save for web
Select all the splices
Choose a folder to save. It will save your spliced image into parts. Remember the part where you want your text to go. If you can see the numbers in the image, the part where my text goes is Part number 3.
Note: When splicing the MAL sig the width is 260 pixels.
Height depends on how many list entries you want to display. But some dimensions are:
1 entry = 39 pixels
2 entries = 58 pixels
3 entries = 76 pixels
4 entries = 94 pixels
5 entries = 113 pixels
List sizes without the "recent updates" title (Thanks to SoraQuasar):
1 entry = 25 pixels
2 entries = 44 pixels
3 entries = 62 pixels
4 entries = 80 pixels
5 entries = 99 pixels
Now, if we look back at my splices, the part that says "MAL Sig" will become my background for the text to go on.
All the other parts (TOP, LEFT, RIGHT, BOTTOM), you will have to upload to a image hosting website like imageshack or photobucket. I use my DA account and put everything in my scraps.
Next part is to build the sig, i advice you to open up notepad for this.
Most people are confused as to HOW to actually use the 5 parts of the image. To put it simply, it is like lego.
The TOP goes at top, LEFT goes left and etc.
Simply when you put it together, the images need to fit like this:
TOP
LEFT MALSIG RIGHT
BOTTOM
To put it in BBcode form it would look something like this: Replace all ( ) with [ ]
(img)http: //wtf.com/TOP.jpg(/img)
(img)http: //wtf.com/LEFT.jpg(/img)(Copy and paste the "MAL Signature Code" here)(img)http: //wtf.com/RIGHT.jpg(/img)
(img)http: //wtf.com/BOTTOM.jpg(/img)
After typing that, copy all of that and paste in the Signature box:
Signature Restrictions
6) Total sizes of forum signatures that include the dynamic MAL signature image are 600px width and 140px height.
7) Your entire signature must not exceed 300kb in size.
This guide will walk you through assembling a sliced MAL signature and configuring your MAL profile settings so that your signature displays correctly. This guide does not show you how to slice a new signature, and assumes you have generated all the necessary images already in the correct dimensions.
To give you a better idea, the layout of a custom mal signature is generally a single MAL-generated signature image surrounded by other images in a grid. For example:
So, let's get started putting the pieces together!
Step 1: Save the Images
Most of the time in this club, your sliced images will be provided to you by someone else through a forum post. You should save each of them to a folder somewhere on your computer where you can get them easily later. That way you'll have a backup of them should you ever need to upload them again later.
Step 2: Configuring the MAL Part
Since we just want to use the minimum update text, we want to configure it so that MAL only produces the minimum list text for our signature, and uses our custom-sliced background image. Usually your settings will be as follows:
Image Type: Recent Anime & Manga Updates (anime or manga only works too, but nothing that says "Custom - ...")
Enter the proper number of entries for your signature
Check the option to Make rows transparent
Check the option to Remove time stamps (if your sig has space for them though, you can leave it unchecked)
Set the Text Color to the RGB color values that make sense for your signature. 0, 0, 0 is black and 255, 255, 255 is solid white. (Do the same for the Time Color, if you're using timestamps)
Check the option to Hide "My Recent Anime/Manga Title"
Finally, hit the checkbox next to Check to use a custom background and use the Browse button that appears to select the mal background image you saved earlier.
Here's an image of what your settings might look like (color values may vary):
Hit the Update Signature button to save your changes. Afterward, you should get a preview at the top of the page. Make adjustments if necessary.
Step 3: Hosting the Surrounding Images
The mal background part is hosted by myanimelist.net, but the surrounding images are not. It's likely that the person who provided the images to you has already uploaded them to an image sharing site, in which case you can probably use the image urls they provided. You can get the url for each image by right-clicking on it in the forum post and choosing to view the image properties.
If you sliced your signature yourself, you'll have to find a place to host them online, and make note of each of their image urls. If you're new to image hosting, click the spoiler for more instructions...
So, let's get these images online!.... You should have saved all the image slices to a folder somewhere on your computer already. We need to upload each of them to a public webserver so that other people on the Internet can see them. Many sites let you host images online for free, and some of the popular ones are listed below:
For each one of your images, select and upload each of the images for your sig. You'll need the "Direct" url to each image, which should be given to you after uploading each image. In TinyPic it's listed as "Direct Link for Layouts" after uploading... In ImageShack, after uploading, click to "Show Advanced Linking" at the bottom and it will give the direct link... In Photobucket, you will see the direct link by hovering over the image in your albums.
As of this writing, TinyPic has a higher bandwidth limit than ImageShack for anonymous hosting. Regretfully, TinyPic only supports jpeg images so no transparency or animations will work, which is why you may need to use one of the others.
If you're a Windows user, you may find it easier to use TinyPic/ImageShack Uploader (written by fellow mal user and resident diety Kotori), which lets you upload directly to TinyPic, ImageShack, or MessyShare. It has context menu support, so you can just right click the image's folder icon and upload more conveniently.
Step 4: Putting It All Together in BBCode:
If you've been around forums at all you'll recognize bbcode, but you'll get used to it quickly if you are new to the concept. You basically write special markers (tags) into your text that are interpreted by the forum to change how the text is displayed, or to insert special objects like images. The tags we'll be using to construct a signature are mainly the [img] and [url] tags. You can learn more about the bbcode supported by mal here.
The basic code template for a sliced mal signature:
Sometimes, there will be fewer images if the mal part is along an edge, so you may not need all of the pieces. For example, if the MAL part fits along the bottom right corner, there would be no need to have right or bottom images. Ask the creator of the signature if you need help formatting it properly.
Important Note about newlines about your bbcode: The location of the return characters (Enter key on your keyboard) does affect how the signature is displayed. Stray returns or spaces in your signature code will make spaces between images. For best results, there should be no spaces anywhere in your code except a single return after each row of images except the last.... so...
If the returns are omitted there, Internet Explorer does not wrap them properly, expanding the forum in a nasty way -- so make sure you put them in! The returns are already in the bbcode template earlier in this tutorial, so you can safely copy/paste that one to use as a starting point. Browsers other than Internet Explorer do not have this wrapping problem.
Tutorial: Generating images using php and the MAL-RSS-feed
IMPORTANT NOTE: before posting in this thread seeking for help, or writing me a IM with pleadings for help, read this tutorial carefully!!! About 80% of the questions i get via IM have already been answered in one of the first three posts of this tutorial. I am not saying that you have to read through all the sites to get a working solution for your problems but a minimum of effort should be put into searching answers by yourself.
As of now, i won't answer any messages containg phrases like:
plzzz help the script is not working. thx
how do i open and alter one of the php-files?
how can i change the appearance of my status-text?
i don't understand a thing, pls help me
If this sounds rude to you, i honeslty apologize. But i'm getting so many pointless questions or questionts that i have answered at least a dozen times that i don't want to answer them anymore.
If you have any other questions (except those few i mentioned above) go ahead and ask.
Before the show starts:
Thats the second try.I think it became a lot better. This was possibledue to some really good feedback and suggestions i got. So keep this up!. If you have any questions about this tut or you have any ideas how to improve it let me know. Improvements can never be a bad thing.
Contents of the 1st Post:
1.Starting notes
2.Requirements
3.Changes in this version
Contents of the 2ndt Post:
4.Setting up the script
5.Vital source-code parts in detail
6.Creating your own customized signature
7.Additional information
8.Possible errors and how to handle them
Contents of the 3rdt Post:
9.Frequently Asked Questions (under construction)
10.Avanced text and image handling (under construction)
-----------------------------------
Full source files of this tutorial you will need: download (contains the tutorial as pdf file)
(be sure to keep the given structure intact when you upload the files to your webspace)
[when you unzipped the source, uploaded it, and made everything correct you should get an output according to the one you see below)
This tutorial is for those of you, who want a scripted signature that uses a non-MAL custom font.
An example how it can look like:
1. Starting notes
The script we will make during this tutorial is neither the best, nor the last answer on how to create a scripted signature. There are more advanced scripts out there, which do more than just the basic things provided by this tutorial. Nevertheless you will be able to make a working, customizable scripted signature that can easily be upgraded with more functions.
For more advanced script try taking a look at the „Signature Scripters“ Club (http://myanimelist.net/clubs.php?cid=5076).
If something is unclear, or you just don't know how to do a certain step feel free to post below. Suggestions and criticisms are also welcome.
2. What you will need to successfully pass this tutorial:
a good, working webspace that meets the following requirements: (i can recommend 000webhost.com – it meets all requirements)
supports php 4 and above
phpconfig() should look like this:
allow_url_fopen: On
file_uploads: On
safe_mode: Off
GD support: enabled
FreeType Version 2.x
GIF/JPG/PNG Read Support enabled
Note: you can check if your wehost allows this by generating a simple php file. Name the file as you wish e.g. info.php. Content of the file: <?php phpinfo(); ?>Upload the file to your webhost, and acces it through a browser. Your done.
a workable ftp-client ( e.g. filezilla or any other ftp-client you like)
some enthusiasm to start with (thats the most important thing ^^)
Plusses to have on your side: basic knowledge of webdesign and or php-programming (this is not a 'need to have'); basic knowledge of ftp-clients or how to upload files on a webserver and how to alter chmod of files
So, if your still here, then you are seriously interested in how to script your own flashy signature. Thats good! Lets start then.
First of all, you will need a signature graphic that you like.
So go on and choose one. Come back to this tutorial if you have done so.
3. Changes in this version
Your reading the second version of this tutorial and as a matter of fact there have been some minor and also some major changes. First of all, there is no longer only one big file holding the script but three slightly smaller files. But don't worry if anything, the script has become easier to handle, the aim still is to keep it clear, simple and easy to handle. All changes will be marked red.
The scripts know exists of the following files
sig.php: this is the core file - you should not touch it unless you know what you are doing. For the script to work you won't have to change anything in here.
settings.php: we're setting up the script in here. Your MAL-Username and some other settings regarding what should be parsed (manga or anime list or both of them) ought to be set here.
image_output.php: the final signature-image will be defined in here. All changes regarding appearances of the image and/or text are done in this file.
Attention: For easier and faster access for those who already read the first version of this tutorial all changes i made are marked red. So if you see a red part be aware that this has changed of wasn't even supported in the last version.
One last point to mention. Because this post is kinda big, and will (if everything goes as planned) become even bigger, i will split it up in more parts. So..this post holds all information you need to start with. The second post holds the actual tutorial and the thirds posts will be dealing with FAQ's and Bonuses such as advanced image and text handling using php.
I will take you step by step through the setup process.
To start with, download the zip file from the link above and extract it. Here's the link once more: download
Fire up your ftp-client and upload all the files to your webspace. It is very important that you keep the given file-structures intact.
This done, set the following chmods:
777: signature folder
755: sig.php; settings.php; image_output.php and sig.png(if you generate it)
(Note:with a standard ftp-client you can change a files/folders chmod like that: right click on a file or folder, choose 'chmod' in the appearing contextmenu.The rest should be self-explanatory)
Open a browser of your choice and open the url: 'yoursite.com/signature//sig.php'
If your host matches all requirements, and you have done everything right, you should see something like this:
Congratulations!! You have taken the first steps in creating a custom signature...
Before we start with creating your own personalized sig, we have to do some more homework. Let's get started....
5. Vital source-code parts in detail
The following part is located in the file „image_output.php“.
Be aware that the file „sig.php“ should never ever be changed unless you really know what you do. Otherwise the whole script is likely to break.
If you open the spoiler-tag you will see some source-code of the sig-script we're using right now. Cause it is vital for you to understand this part of the script to generate your own custom sigs, i will explain it in detail.
replace „your_pic.png“ with the picture you want to pimp (must be in the same directory as your the final php file)
$font = 'Capture_it.ttf'; (ATTENTION: fonts have to be specified CASE-SENSITIVE)
[*define the font you want to use. The font file must be in the same directory as the final php file. You can use any font you want (even .otf fonts), as long as you have the corresponding file, that defines the font. E.b. For 'Capture_it' you need to have the file „Capture_it.ttf“ uploaded and in the same directory as your final-php file)
find free fonts here: http://www.dafont.com/
$colour = imagecolorexact($image,0,0,0);
the three numbers behind $image define the colour of the font used on the signature
$titles[0][0] outputs the very first anime title of your rss-feed
$titles[0][1] outputs the second anime title of your rss-feed and so on
new: you can now choose between manga and anime output (manga is, of course only avaible if you specified the script to parse your recent manga updates in the settings.php file; read point 5 how to do this)
$titles[1][0] outputs the very first manga title
$titles[1][1] outputs the second manga title and so on
this version supports the output of dates by default
settings are exactly the same as for $titles and $status be aware that you have to activate the parsing of dates in the 'settings.php' file
imagepng ($image);
simply creates the final image; this will just output the picture, but doesn't save it. You can however, use the output for your signature (but i wouldn't recommend it, cause this has some disadvantages; however if you use it like this, with the bbcode below you won't have to use a cronjob for auto updates); bbcode would look something like [img.]http://yoursite.com/sig_creator.php[/img.].
If you want the pic to be saved you will have to replace 'imagepng($blub)'(if you change it like this, you will need a cronjob[information on this comes later] for auto updates of your sig)
replace 'imagepng($image)' with:
imagepng($image, „sig.png“) imagedestroy($image)
6. Creating your own customized signature
I guess right now, you have chosen, the gfx you want to use as a signature. If not, do so now and come back when your done with that.
As before, i will take you step by step through the whole process.
Due to the fact, that we have to change the source code, you will have to open the file 'image_output.php' in any texteditor you like.
Next you have to find the part that looks like this:
//generate the image
$image = imagecreatefrompng("your_pic.png");
Now: replace ("your_pic.png") with the name of the sig-gfx you'd like to use e.g. if the png you want to use is called „flashy.png“ you would have to change ("your_pic.png") to ("flashy.png"). [easy isn't it ^^]
For now, leave the rest as it is. Save the file and upload the changed 'settings.php' and your sig-gfx to your webspace.
For information on how to change the font or how to make more than one anime title appear on your sig read point 4.
If you're satisfied with the outcome there is merely one thing left. Open the file 'settings.php' in any texteditor you like. Find the following line:
//variables
$user = "shiteiru"; //Mal-Username
replace shiteiru with your own mal nickname...thats all
Save the file.
You may notice, that there are some other settings that can be changed by you and will influence the appearance of your signature. All you need to know to make successfull working changes is explained in detail behind every line. If you still have problems understanding what some things mean or how to adjust them ask.
Once again. Upload the file 'settings.php' to your webspace. Browse to 'yoursite.com/signature/sig.php'.
If you get an error like „The Image „your-image“ cannot be displayed because it contains errors“ don't start to panic. Instead open the following url: 'yoursite.com/signature/sig.png'
If you get an output everything worked fine.
If you have chosen to save the png-output of the sig-creation process, and you want to use this saved png-file instead of the raw 'php-site' as your sig you have to do one more thin. (read under point 4 how to save the png-output)
That is to automate the update of your signature. Read under point 6: cronjob, how to achieve this.
7. More Information on how to setup the serverside direcotories and how to automate the sig-generating process
cronjob: if you want the script to automatically update your signature, you will need a cronjob. A cronjob is a long running process that executes commands at specific dates and times. You can setup your own cronjob but that isn't easy and isn't really needed, cause there are some free cronjob provider out there who already did the scripting for you and offer you easily configurable cronjobs. Find such a provider here (cronjobs.org) or here (cronjob.de[recommended for german users]).
If you want to setup a cronjob all by yourself from scratch look here for further information: http://www.aota.net/Script_Installation_Tips/cronhelp.php3
(but be warned that this is absolutely not suited for scripting beginners)
8. Possible errors and how to handle them
Error: The Image „your-image“ cannot be displayed because it contains errors
Solution: Thats not really a problem. The output png should have been compiled correctly.
Error: There is no output png saved.
Solution: Upload a file with the same name you defined for your output png. E.g. if you named it 'sig.png' upload a file 'sig.png' and start the script once more. Make sure the files chmod is set to 755.
Error: There is a png output, but no information appears on it.
Solution: Check if your hoster allows 'allow_url_fopen'. Must be set to 'on'. You can check this in the phpinfo.
Error: I get a weird looking php error. Solution: Make sure the files 'sig.php', 'settings.php' and 'image_output.php' have their chmod set to 755 and the folders chmod is set to 777 or 757
---------------------------------------------
9. Frequently Asked Questions
Question: How do you make the episodes-text part say "12/24" or "Watching @ 15/25" (like windy's, for example) etc, instead of it saying "Watching 12 of 24 Episodes"?
Answer:With the last update, it should actually be very simple. Just look inside the file 'image_output.php' there should be explained everything you need to know. Should for some reason, your version refuse to do as you please, you can find a fix for the existing version here: http://myanimelist.net/forum/?topicid=62511&show=20#msg2506546; sometime soon there will be an update of the script which will allow you to customize the look of the episodes watched text output (manga chapters will also be supporterd)
10. Advanced image and text handling
under construction
11. Sigs created using this tutorial
Some impressions for the interested one how possible outcomes can look like. Thanks to all of you, who gave their sigs away as samples.
- If you require further help and/or have questions you want to ask, please post them here.
- If you find the above a bit tricky, you could use this great free service that GreatS has kindly provided to create your own scripted signature: http://dygnatus.greatslovakia.com/
