AnimeSuki Forums

Register Forum Rules FAQ Members List Social Groups Search Today's Posts Mark Forums Read

Go Back   AnimeSuki Forum > Anime Related Topics > Fan Creations


Thread Tools
Old 2007-01-13, 12:12   Link #1
Join Date: Dec 2005
Location: event horizon
Post BlackCat's lil' Workshop

Ok this my lil' workshop, everything I create here is totally free.

If you wish for things like site banners or anything else like avatars and sigs that you wont use on AnimeSuki then please post your requests here and not in the lil' stick above. If you post above it will cause confusion and will most likely get ignored.
Guidelines for Requests
  • Must be Anime or Manga. (I can do the other stuff, but I refuse to do so :P)
  • If you think you have a good pic to make whatever you want from then post it here I'll try to use it, if I can. If not then just give me nice description of what you would like.
  • Please specify all the parameters: Maximum Size, Colors, Dimensions stuff like that.
  • And last but not least, I don't mind if you write gibberish or use l33ty talk or use weird colors/fonts or punctuation, but please structure your request, it's very hard to read & understand big buffy chunks of text. (even when it's grammatically correct english)

Besides mass-posting free stuff from now and then I'll place lil' tutorials that wouldn't fit anywhere else on the forum.


-: Catgirl Avatars :-
-: Catgirl Signatures :-
-: Miscelanous Avatars :-
-: Akira Kogami Caps :-

-: Website Building - Slicing & Dicing :-
-: Website Building - Basics of (X)HTML :-
-: Website Building - CSS Styling Primer :-
-: Website Building - PHP Simple Uses :-

Links in the index will open a new tab/window with only that post,
use it if you have problems loading them all.

-- Open This Post In It's Own Window --

Last edited by felix; 2007-04-23 at 17:15. Reason: Updates.
felix is offline   Reply With Quote
Old 2007-01-13, 12:13   Link #2
Join Date: Dec 2005
Location: event horizon
I would love to hear which are peoples favs would help me improve.
Yeah this is my hobby... but there's no harm in getting better :P
If anyone wants to save them to their hdd here they are prepacked:
Standard .Zip Archive [RapidShare] | Self-Extracting .7z Archive [RapidShare] | Self-Extracting .7z Archive [DataFile] |
Self-Extracting .7z Archive [FileCrunch]
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Last edited by felix; 2007-04-24 at 08:37.
felix is offline   Reply With Quote
Old 2007-01-13, 12:14   Link #3
Join Date: Dec 2005
Location: event horizon
. . . . . . . . . . . . . . . . . . . . . . . . . .
felix is offline   Reply With Quote
Old 2007-01-13, 12:15   Link #4
Join Date: Dec 2005
Location: event horizon

felix is offline   Reply With Quote
Old 2007-01-13, 13:05   Link #5
Senior Member
Join Date: Jul 2006
Location: Australia
Age: 29
Wow... Just wow...
There's so many... They're all Catgirls... And they all look... So nice... O_O
When did you start making them? :O
saphyre is offline   Reply With Quote
Old 2007-01-13, 13:10   Link #6
Zu Ra
✖ ǝʇ ɯıqnɾl ☆
Join Date: Feb 2006
Location: Mortuary : D
Kudos on the avatars . They look Super Sugoi
Zu Ra is offline   Reply With Quote
Old 2007-01-13, 14:00   Link #7
Join Date: Dec 2005
Location: event horizon
@ saphyre

The avatars took around 3 or so hours to make in total (333 of them were done in 2.5 hours, I know since I remembered the time, when I started, at the time when I finished them). Uploading them on the other hand... well, I'm a fealing a lil' shaky just thinking about it.

@ Geta Boshi - Thanks
felix is offline   Reply With Quote
Old 2007-01-13, 14:05   Link #8
Asuki-tan Kairin ↓
Join Date: Feb 2004
Location: Fürth (GER)
Age: 36
Heh crazy, did you use some sort of regExp browser/editor (e.g. vim) to create your Ava posts?
Folding@Home, Team Animesuki
Jinto is offline   Reply With Quote
Old 2007-01-13, 14:14   Link #9
Join Date: Feb 2006
I'm guessing... you like cats
kayos is offline   Reply With Quote
Old 2007-01-13, 14:26   Link #10
Join Date: Sep 2006
Location: My room
Age: 27
wow your avatars are awesome!i love the catsgirls may i please request a sig if you dont mind of course
image: close up on sayuri
Text:Sleeping Beauty
Size:Animesuki Safe
thanks really would appreciate it
desertlily is offline   Reply With Quote
Old 2007-01-13, 14:42   Link #11
Join Date: Dec 2005
Location: event horizon

The close up of Sayuri is hard to get and doens't produce exiting results.

@ Jinto Lin - How does that work @_@ //adds to notes..
felix is offline   Reply With Quote
Old 2007-01-13, 14:49   Link #12
"Show it to me"
Join Date: Dec 2005
Location: In solitude, where we are least alone
So many catgirl avies Thanx for letting me save most of them
~~ Project Cyz ~~
"There is no spoon"
Currently Watching:
-- too lazy to put it together --
Current sig:
Takanashi Rikka from
Chuunibyou Demo Koi ga Shitai!
Big thanx to Patchy for the sig
Cyz is offline   Reply With Quote
Old 2007-01-13, 14:50   Link #13
~ You're dead ^__^* ~
*Graphic Designer
Join Date: Apr 2006
Location: uk, England
Age: 26
Send a message via MSN to Deathkillz
Originally Posted by BlackCatXIII View Post
. Uploading them on the other hand... well, I'm a fealing a lil' shaky just thinking about it.
thats really scary...and seem like you did it the hard way but wow soo many neko mimi O.o you must have a sep folder labled "catgirls" great job ~

Siggy: hohohohoho~ | AnimeHistory welcome to our blog ~ | Summer2009 early review
Under the radar series Summer2009: Kanamemo, GA Geijutsuka Art, NEEDLESS
Deathkillz is offline   Reply With Quote
Old 2007-01-13, 15:28   Link #14
Peek a boo
*Graphic Designer
Join Date: Dec 2005
Hey, at least photobucket has a "bulk upload" feature.
If it's imageshack... *shudders*

Great avatars btw. :3
Riker is offline   Reply With Quote
Old 2007-01-13, 17:26   Link #15
Asuki-tan Kairin ↓
Join Date: Feb 2004
Location: Fürth (GER)
Age: 36
Originally Posted by BlackCatXIII View Post

@ Jinto Lin - How does that work @_@ //adds to notes..
Spoiler for How it works:
Folding@Home, Team Animesuki
Jinto is offline   Reply With Quote
Old 2007-01-13, 18:21   Link #16
Join Date: Dec 2005
Location: event horizon
Ahh regular expresion that's what you meant by regXp, for a moment there I was going WTF.

Yeah I get it. But I didn't want to place them on a server. Doing that would have been a lot easier to do, but I just didn't want to. Further more I specificly wanted to have them uploaded to photobucket. I like keeping records.

If I went that route I would just have to go to notepad and write 2-3 lines of php to generate the stuff. But yeah Deathkillz is right I was a lil' tired when I got to uploading them and didn't notice that photobucket links aren't randomized, hence I could have just generated everything instead of copy/pasting links like crazy >.<

That guide is pretty intreting tho @_@
@ Riker - Don't forget the click text instant copy feature
felix is offline   Reply With Quote
Old 2007-01-13, 18:55   Link #17
Join Date: Oct 2004
Location: Sheffield
Age: 31

cats girl from hells
pro:a lots to choose form^^
con:not very personise,and you just can tell the quality are downs a bit of beening resize downs

keeps' up ^^
master of cat girls?
chison is offline   Reply With Quote
Old 2007-01-13, 18:55   Link #18
Join Date: Sep 2006
Location: My room
Age: 27
Originally Posted by BlackCatXIII View Post

The close up of Sayuri is hard to get and doens't produce exiting results.

@ Jinto Lin - How does that work @_@ //adds to notes..
wow it looks awesome thanks alot
desertlily is offline   Reply With Quote
Old 2007-01-14, 20:50   Link #19
Join Date: Dec 2005
Location: event horizon
Post Website Building - Slicing & Dicing

For this tutorial the following programs are needed: Photoshop and ImageReady (which is prepacked with Photoshop)
Download Link: 7-zip Self Extracting Archive (the result + every other file)
Note: I limited the tutorial to slices thus I made the simplest and most pathetic easy to understand site I can make.

Pre-Requiered knowledge.
Here's what you need to know.

First, you should be able to use the mouse.
Seccond, you need to be able to draw. No special drawing skills are required, super pathetic level is OK
That's it...
Extra Details
In case it's not 100% clear above...

You DO NOT need to know how to write: (X)HTML, CSS, JavaScript, PHP, ASP, XML etcetera etcetera.
Basic Concept.
Teh simple explanation...

You draw something that looks like a website, and we turn it into a website.
No the site won't be a picture, links and text content, roll-overs are discussed.
Tutorial Details
Lotz of bla bla bla...

The process is called slicing, and besides making a website you could for instance apply it to create a composed of different images, when the process becomes too complicated and hard to get right. Different as in, one image is .jpg another is .png another is .gif.

You would want this to maximize quality or to augment the frame rate and quantity of a jif, without it growing out of proportions. For example if you have two different jifs for sig with different timing they will complement each other. It doesn't matter what animation is used even a simple name animation will work.

Note : In the tutorial I won't talk how to apply the knowledge to signature. It shouldn't be very difficult to figure out.
The Fundamental n00by Problem.
Everyone suffers this... at some point...

Basically you try to make a site, lets say your making one of those personal sites home page things. You want to make a nice site, but well there's no content you try to write it but lets face it it's awkward for some pages and hard to write.
Silly obvious stuff...

1. Don't force it and write what you want and what you think people would want to see. For example let's say your uhh a painter or something. How would a personal page have to look like?

Well a layout would be 2-3 short line of what the site is all about in the home page, along with things like news. For example his latest sketches, his latest finished paintings, his latest projects etcetera. Then you could have a gallery, followed by a links page to other sites , portfolio page etcetera. If you have problems writing the about page ( the page that nobody seems to want but everyone seems to need) just write stuff like site history, career history (you can make it really anonymous you don't have to give out names of ANYTHING and it will look good, actually better :3 )

2. If something ain't working your not gettin' what you expect or want then your thinking too "hard".

3. If you have no frikin' idea of what your site should be about and just want something there to work with, some text that looks like normal text, for you to use as a template for styling your future content, then get Lorem Ipsum. explains things quite nicely. (Lorem Ipsum History & Generator Site)

All the above are NOT necessary for this tutorial but they will help you... someday...
Back to business.

Quick Note
Just in case...

If you want to apply as you read, first go into your favorite graphics editor and draw something that looks like a site.

Otherwise if you want to follow with me here are the RAW files. (I did a little work but it basically what's going to be covered)

The site I used as an example is complete simplicity. It's structure is a follows: Home, About, Gallery (flash gallery to be exact), Links, Diary.

No, you do not need to have Adobe Flash, we are going to make the entire flash gallery using only Adobe Photoshop.

Simple stuff simpler.

We take it (our template) mark the basic elements, then save it. Ok it's a little more work then it sounds :P

To get either open :Prime-PS-File in and open it in ImageReady. Or save your drawing of the site and open it in ImageReady.
  • Basic Slicing
    Easy stuff...

    Windows Needed: Tool Pallet only (screen). // you can open windows via the Window Menu

    First we need to separate all the pic elements.
    Select the Slice tool and proceed to mark all the elements. (Hint: You click and drag)

    If the your slice seem to snap to the outline of another (and you don't want this) then go to View and Snap, this will disable the behavior.

    If you downloaded the RAWs,
    First, mark with a nice big square the banner. (the pic of the trio)
    Then, mark with as best as you can the buttons.
    In total you should have created

    Example output Nav+Banner -Slices

    Just so we don't have to slice anything anymore, go ahead and slice a nice big piece on the left, size isn't very important. (you'll understand later on)
    This will be where the text content will be.

    Ok now, your slices should look like this.

    Complete Slices

  • Slice Info
    Some things you should know about slices.

    Roughly slices just seperate your pic into diffrent pieces that you can then save as a webpage (as in a .html file) for example, you can also save them as pictures.

    The Blue Slices are the ones you made. The Grey ones that popped up as you added the blue ones are auto-generated. Basically ImageReady considers that the picture must at any given time be covered in slices, so as you make slices it fills the holes with the grey ones. Don't worry about it we're not going to use them.

    The numbering on the slices is generated each time you create or a new one or modify the edges of one. Basically the numbering is like this, from left to right and top to bottom, starting with 1. The numbering would be useful for some people. Generally for troubleshooting info, in case there one useless unnoticeable 5 x 1 px slice in there. We don't care about it.

    Slices do not cut each other they overlap, so if you have a slice before and you place one on top to partially cover it it will not delete that slice it will only overlap. Thus if you eventually delete it you will find that the one it was covering is still there.

    To select/manipulate/delete a slice use the Slice Selection Tool located next to the Slice Tool itself.

  • Dicing The Slices Part I
    Setting up who's what..
    Windows Needed: Optimize Window (screen). // you can open windows via the Window Menu

    First select the Slice Select tool, this will be the last tool you're going to select in this tutorial.

    Now what we're going to do in this section is set what saves in what format, obviously we can save the banner for example as a .png or .gif or .jpg ^_^
    Since there's no point to use transparent we're going to save it as a jpg.

    With the Slice Select tool selected, select the banner slice, now in the optimize panel set it as a jpg. (just like in the pic I mentioned above)

    Proceed the same way for the rest of the blue slices. (don't bother with the grey ones)

    Ok now ImageReady should know what you want to save the lil' pieces as.

  • Dicing The Slices Part II
    Setting up who's who..
    Windows Needed: Layer and WebContent Windows (screen). // you can open windows via the Window Menu

    In this part I'll talk how to add effects to buttons.

    Ok select the home button,
    Now left click on it and select Add Rollover state.
    What is happening, by default you will be adding a Over state. An over state is how the element is suppose to look when your mouse is hovering over it.

    So how do add one. Well you already did but it just looks the exact same way as the normal state, so...
    Select the Over state in the WebContent Pallet, and in layers add an effect to the home text. (for example a stroke).

    Now here's the thing. If you click back to the normal state you'll notice that the effect disappears from the layer, but if you go back to the over state you'll notice it pop's back right again. That's because the states are like a entire separate instance of the document.
    And that's how you get an over state, if you want to add effects when the user clicks on the button etcetera just add another roll-over state, for example if and Over state exists an Down state is created.

    Using the above do the rest of the buttons.

  • Dicing The Slices Part III
    Setting up the page content
    Windows Needed: The Slice Window (screen). // you can open windows via the Window Menu

    Ok now's time to make the buttons actually do something usefull.
    Select the Slice Selection tool.

    First Select the banner.
    Ok, the Slice Pallet basically defines what the slice you have selected is going to be. It can be an image or it can be pure content (as in "No Image" ^_^ they like to use silly names).
    Ok so for the banner slice.
    Type: Image
    Name: SiteBanner //Note - You can use whatever name here but use something this will mean that the end result has clean easy to read code. (It's a GOOOD thing )
    URL: index.html //Note - It's not a button but we're going to make it so when someone clicks on it they get redirected to the Home page. I'll talk why it's called index.html and not home.html in the next section.
    Target: _self //Note - this means that the page will open in the current browser tab for the user that clicks it, if you set it to _blank the browser would open it in a new tab (or window for versions of IE < 7)
    Alt Example R US //Note - this is basically a little description.

    Leave the Dimensions and Cell alignment alone.

    Set the Background to whatever color is appropriate, in my case white.
    Even tho' it might not be necessary there's no harm in adding it.

    Status Bar Message: Example R US
    Do the same for the buttons. Replacing the at the URL with links.html about html etcetera. When you get to Gallery, use gallery/index.html (since we're going to place it in a subfolder)

    Now there's just one slice left. The one that's going to hold all the text.
    The settings for that one are as follows:

    Type: No Image
    Text: <Copy/Paste whatever text you want for the page>
    Text is HTML: Unchecked if you leave it checked you will need to insert html code.
    Dimension : Set the measurements for width ("W:") and height ("H:") to percentage and the values to 90 each
    Background: You may not set it, as in use none, but highly don't recommend it for text content. Just to give an example if you decide you want to change the background and your text content is surrounded in some graphics if bg was set to none (because it coincided to the BG of the page) then when you change the BG of the page you will be ruining the BG of the content.

    Ok all done. Time to save it.

  • Outputting

    Before we save it there are a few settings we need to make.
    Go to File > Output Setting and select the first settings set HTML. Now look at the pics and copy.

    Spoiler for Settings:

    After you're done.
    1. go to Save Optimized As..
    2. Save the page somewhere. If it asks to override say yes.
    3. Go back to step one until you've created all the pages except the gallery. Besides the Gallery there is another exception, the home page isn't saved as home.html but as index.html. Basically when you upload everything to a webserver there has to be a way to tell which file it should open, and most often the condition is that that page must be called index.html or index.php

  • Making a Flash Gallery

    First in the folder where you created your pages create a folder gallery.

    Ok in the initial files there should be some images for you to use to make te gallery if not then just grab some pics from somewhere to use. Or... open the Adobe Bridge (comes with Photoshop) go to your to the place in your hdd where you've got pics and select some.

    Now click Tools > Photoshop > Web Photo Gallery a dialog box should pop up. Select Flash Gallery 2 to get the same result as me Set everything up, you can even set thing's like adding your signature on every pic etcetera. Then confirm creation and save the gallery to the gallery folder you made earlier. Now you should see Photoshop quickly opening and closing windows. Basically what's happening is that Photoshop is resizing, generating thumbs and applying any other settings you may have chosen. It could have been a progress bar but it seems they didn't bother

Final Notes

And that's how you make a site in 60s with 0 coding knowledge. (it's 60s only because of the time eating gallery creation I tell you :P )

The problem is... well just look at the content, all unformatted disorganized and all. Tsk tsk not good. Read the tutorial about CSS (coming soon) to get into the simple world of CSS and be able do something about it.

Last edited by felix; 2007-01-15 at 11:41. Reason: Typo
felix is offline   Reply With Quote
Old 2007-01-15, 11:40   Link #20
Join Date: Dec 2005
Location: event horizon
Post Website Building - Basics of (X)HTML

Bla bla bla time...

First, I'll start by mentioning that WebPages (in the beginning) weren't more then simple text documents. Basically WebPages were just a sneaky way to communicate articles to other people. This lasted for a while, until enthusiasts started making them just for fun. And so the modern over-pimped-out barely accessible webpage was born.

What does what...

Using (X)HTML and CSS you can make nice WebPages with nice graphics.
Basically the (X)HTML with CSS is like graffiti on a wall, where (X)HTML is the wall and CSS is the graffiti. In other words all you can make with (X)HTML is plain somewhat boring wall, but without (X)HTML you wouldn't have anything to put the graffiti on.

Some more bla bla bla...

The basic concept is still that it's suppose to be like a text document.
However the HTML page is a lot more primitive then a text document. Ok I won't go into how text documents work to explain this things here, just know that the basic difference in concept is that you have to clearly mark things you want in a certain way.

For example I want to point out in my document that a word is emphasized I have to cleary mark it as such by placing it in-between an <em> ... </em> tag. BTW em comes from Emphesize, all the html marking tags are abbreviation of an word, keep that in mind it will help a lot.

All you need to know...

Tags are the things in-between the lour then sign ("<") and greater then sign (">") e.g. <tagname>
Tag attributes are placed in the tags and define the property for that particular tag e.g. <tag attribute_name="propriety for this attribute go in here">

Ok, here we go, there are 3 types of tags.
  1. There are the Open/Close lil' bastards like the em one above that basically encompass a text and give it meaning or attributes.

    They are very simple. You start place a <tagname>, then write the text that's going to be affected, then you write a </tagname>. All done.
    Rule #1 - all tags and tag properties must be written in lower case. (in your content you can use anything you want)
    Rule #2 - Things like <SomeTag> don't show up when you (or your visitors) open your in a browser they only appear when opening the file in a text editor.
    Rule #3 - To write a comment, your personal notes as you build you page, you write the content in a comment tag <!-- ... -->.
    Rule #4 - You can not write characters like "<" , ">" or "&" in your content as these are reserved characters used to define tags, to write them you must escape them by writing &lt; (for "<"), &gt; (for ">") and &amp; (for "&"). Similarly you can introduce characters that you normally don't have access via the keyboard by inserting they're code as in &#nr; (replace nr with the character’s code number)
    Almost all the tags of this type you need to know.

    Spoiler for Content:

  2. Then there are nested bastards. They work similar to the above... buuuut... unlike the above they have one extra condition, namely for them to work they have to be inside another tag.

    For example to define an element of a list you write the <li> ... </li> but you must first write a <ul> ... </ul> tag (that says that there is a list here) in which you will write all your <li> ... </li>.

    Why?! You might be wondering why there's so much hassle in it. Well let's say you had two list one after the other, how can you, but more importantly the browser, tell where one starts and ends. (I mean there would be only <li> ... </li> over and over)
    Almost all the tags of this type you need to know.

    Spoiler for Content:

  3. And last but not least there are the easy and super powerful self sufficient tags.

    Basically they don't affect anything, you place them and they do something, like place an image etcetera.

    The syntax is: it's <tagname />
    Simple isn't it...

    Rule #5 - In (X)HTML spaces are ignored (to forcefully insert them use &nbsp;). Beside spaces enters are ignored too >.< you insert them writing the <br /> tag. (read bellow)

    Almost all the tags of this type you need to know.

    Spoiler for Content:
That about covers syntax, you can test it by opening notepad, type in the code, save it as something.html and then opening it in your browser to check the results.

In this tutorial I omitted the tags that are dependent on other knowledge like <div> ... </div> or <span> ... </span> who are CSS dependant or the <form> ... </form> which is PHP dependant etcetera
(I will discuss them when the time comes)

Other tags that were omitted are those that have been deemed obsolete/deprecated/annoying/useless etcetera.

Basic Webpage Structure
The non-critical stuff...

The code will run perfectly without this but it don't hurt and it's standard stuff to do. So... Place all your content in the <body> ... </body> and use all the tags above only in the <body> ... </body> tag. (you don't need more then one body tag)

Like the files on your computer html files have metadata. Before the body tag insert an <head> ... </head> (read this as Header ), all the metadata will be inserted in there.
Note - What's metadata?! For example, for the files on your computer metadata is stuff like what's the file called, how big it is, when it was created when it was modified etcetera. Same goes for html files.
To finish it off lets clearly define that the content is html so place a <html> ... </html>, "html" as in HyperText Markup Language (the name of the code above)

Metadata Tags
All are writen in the head section...

Quick F.A.Q.
Q. How do I tell search engines what to say when they list me.
  1. First, to tell them the site's name (this will also tell browser what to display on top of the menu bar) you place:
    <title>The Name Of Your Site</title>

    Second, to tell them what description they should use for your site you place:
    <meta name="description" content="Please come visit my site..." />
Q. How do I stop search engines from searching the contents of a page? (and eventually listing it)
  1. To stop search engine spiders from crawling in one of your pages, place in this in you sneaky page:
    <meta name="robots" content="noindex" />
Q. How do I create/add those little icons that appear in the address bar and next to the bookmarks.
  1. To create an favicon, first create an image that you'd like faviconised in a graphics editor, then go to FavIcon from Pics, that web app will generate your favicon (the .ico file) the code you need for it, as well as an animated version (scrolling effect).
felix is offline   Reply With Quote

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -5. The time now is 12:35.

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
We use Silk.