Gaming Renovation of my website - design issues

[Redemption]

[size=1]Having never posted in this form before, I apologise if I've put this in the wrong place.

Anyhow, here is the situation. I'm planning to remodel my bishounen site ([url]www.geocities.com/reiku_mg[/url]) over my winter vacation. However, I have one idea but its very complex and for a site that only provides 5MB of space to do all of this in, it's going to be difficult (I'm going to solve the problem by either convincing my parents to get a real website, or use multiple smaller sites, dividing the site into pieces).

My site is about bishounen of anime as well as some of my stories and fan-fictions.

My idea is thus:

Since the site is about bishounen and anime, I decided to try and make the sight into some like a manga book. The main page being like the cover of a manga book and the other pages being like the inside pages of a manga book with the comic strips.

How do you think I should implement this? Using tables or CSS (which I don't know how to use)? Or Flash even (I have some experience with Flash)? And I only have basic Photoshop and Illustrator skills.

Or do you have any other ideas for the renewal of my site?[/size]

OOC: Sorry its so long.

[Morpheus]

Definately use HTML. There is no point in trying to go beyond yourself for something this simple. On the issue of space, host your images at a free host like Imageshack.us.

[Redemption]

[size=1]Ok. But how should I use it?

In manga comics, they use a lot of irregular polygons for the scenes. I plan to include information in these, but how would I lay them out? I was wondering what would be the best method to implement these?

Tables? CSS? Anything else?[/size]

[Petie]

[font=Verdana][color=blue]You say you have Photoshop which means you have ImageReady as well. I realize this may take some time but your best bet to accomplish what you want in the easiest way possible would be to design the layout in Photoshop, import it to ImageReady, slice it (there's a slice tool which is pretty simple to use), and export as HTML. This will automatically create the layout for you. It creates quite a few images though so you'd have a lot of uploading to do. And as Morpheus said, host your images somewhere else, though I'd suggest [url=http://www.photobucket.com]Photobucket[/url] for this site since it lets you keep the normal file names (though ImageShack might too - I can't remember now that I think about it).[/color][/font]

[Redemption]

[size=1]When you say 'Export as HTML', how and what does it export it to?

Such as what kind of format does it export it to? Does it export it as table or what?

You can use some technical jargon here if you feel like you can't explain it better. I will understand most of it hopefully (I should since I'm studying this sort of stuff at university).[/size]

[Petie]

[font=Verdana][color=blue]Export as HTML does just that. It will export a file laid out with a table which contains each of the images that it creates when you slice the layout. So, you should have one .html file (which you can edit if you need to - for instance, to just copy the table) and a bunch of images (the number changes based on the complexity of the layout.[/color][/font]

[Redemption]

[size=1]Ok. Sounds good.

I'm a little worried about that slicing tool though. I've tried to use it in Photoshop and I got extremely confused. Do you have any tips to use it?[/size]

[Redemption]

[size=1]Having never posted properly in this form before, I apologise if I've put this in the wrong place Retri.

Anyhow, here is the situation. I'm planning to remodel my bishounen site ([url]www.geocities.com/reiku_mg[/url]) over my winter vacation. However, I have one idea but its very complex and for a site that only provides 5MB of space to do all of this in, it's going to be difficult (I've had some good suggestions for the solution of this problem from the PC/MAC forum).

My site is about bishounen of anime as well as some of my stories and fan-fictions.

My idea is thus:

Since the site is about bishounen and anime, I decided to try and make the sight into some like a manga book. The main page being like the cover of a manga book and the other pages being like the inside pages of a manga book with the comic strips.

What do you think of this concept? Do you have any other ideas?[/size]

[center]==========================================[/center]

[quote name='bluemarble']Since you're trying to save space what I suggest you do is after you've set up the cover image which leads you to the main page on the website you use one illustration of a page with panels and create hot spots in the different panels which lead you to a different page on the website. Each panel respectively an image that corresponds with the page it leads to, duuuh.[/quote]

[size=1]It's kind of what I'm looking for. But I can't seem to grasp the concept you're trying to explain. I'm a visual person so could you give me an example of a website that does this, or maybe make a sketch in Paint or scan one in.

By all means, you don't have to do this if its too much trouble for you. I just can't seem to quite understand what you're meaning.[/size]

[quote name='matt3402']I add however, you can make it have two different "pages," left and right, if you like. That way it has some alternation, but it should work just as good with one "page" with straight edges and a header on the image.[/quote]

[size=1]By two pages, do you mean as in what you see when a manga book is left open? Sorry, but I'm also a very literal person, so you need so spell it out to me at times.[/size]

:animeswea



[size=1]A style attribute huh? Hmm...

Where exactly do you place the style attribute in the coding? In the <table>? Or somewhere else?

I just need to explore my options. Lucky I have 5 weeks to do this in. It sounds like it may take this long![/size]

[color=#4B0082]I combined the double post that resulted from the thread merging. And I also removed the < and > signs in your post and replaced them with &lt; and &gt; so it wouldn't break the page layout. HTML is enabled in this forum, so don't write out the actual tags without using those instead, or using the [c[i][/i]ode] vB tag. - [i]Desbreko[/i][/color]

[bluemarble]

Well that sounds like a good idea, it's been done before so it shouldn'nt be too hard.

Since you're trying to save space what I suggest you do is after you've set up the cover image which leads you to the main page on the website you use one illustration of a page with panels and create hot spots in the different panels which lead you to a different page on the website. Each panel respectively an image that corresponds with the page it leads to, duuuh.

I'm not sure if this is what your lookin' for but this is my idea, if you need more help or explination just ask.

[Retribution]

[size=1]Since this is more of a web design operation, I'll move it to the [B]Web Site Workshop[/B]. I was thinking about moving it to the Manga Workshop, but it's more of a website thing.[/size]



[size=1]You can try searching for tutorials - I find that they actually explain it well. My favorite tutorial site is [url=http://www.pixel2life.com][b]Pixel2Life[/b][/url]. In addition, don't be afraid to hit the F1 key for tips from Adobe.[/size]

[color=#4B0082]Combined posts 'cause of the thread merge. - [i]Desbreko[/i][/color]

[matt3402]

This sounds like a very interesting concept. I've never personally seen it before, but it should be very interesting, and I doubt that it's never been done before.

As to bluemarble's suggestion to save space, I second it. I add however, you can make it have two different "pages," left and right, if you like. That way it has some alternation, but it should work just as good with one "page" with straight edges and a header on the image.

If that made no sense, don't worry. I'll probably look at it later and realize it made no sense!



I realize that I might be a little late, but I'd like to throw my suggestion into the mix:

You could use a repeated background for a main table and then use GIFs or PNGs with transparencies to make any irregular shaped scenes, that way it has the static background of a page, but it has the capability of having any number irregular polygons and such.

That's also [b]very[/b] simple to implement. You'd just have to make your table and give it a [i]style[/i] attribute similar to this one:
[code]... style="background-image: url('My Url To An Image That I'm Repeating as a Background.jpg'); background-repeat: repeat;" ...[/code]

Then you can have any manipulation of the table's cell sizes without worrying about an whitespace or having to keep it to a fixed number of frames/scenes per page.

If this makes absolutely no sense at all, let me know...

[color=#4B0082]And again. :animestun - [i]Desbreko[/i][/color]

[Redemption]

[size=1]Well, here's an update on my planning for my website.

I've come up with a basic design and a title. I'm basing the design off the picture attached and the font I chose for the title.

The title will be 'The Written/Boy Emotion'. I'm not sure it says what I want it to say, but at the moment, it's the best I've got. If you've got any suggestions for a title, then post them! Any help will be much appreciated and credited.

If you see the attachment at the bottom, you can see a guy with a gradient pink/purple background and sakura blossoms. Basically, the background of the main page (home page) will be that gradient of pink and purple. That picture will be in the top right hand corner. I plan to extract the sakura blossoms out of that pic and use them for design purposes in the site too.

The font is called 'Beyond Wonderland', so if you have it, you'll know what I'll be talking about next. Anyhow, this font is very elegant and has its own unique style. It has a lot of curls and curves in its design so I'll be using that element to make the essence of the layout of the site (eg. dividers, borders, fonts).

I'm still going to be working on the idea of making it a manga book metaphor (gah! last semester at uni is coming back to haunt me!!). You know how they have chapters within a manga book. Well, for the sub-main pages, I was thinking of doing the same design as the front page, but making them in grayscale, with small bits of colour in the page just to highlight certain things like links.

For the bishie pages, they'd look like a normal manga page, with all the irregular polygons and the such.

For the writing pages (fan-fics/original stories), well... haven't worked that out yet.

Comments? Suggestions? Constructive criticism? All are welcome.[/size]