Tutorials/Where to begin

From CGWiki

Jump to: navigation, search

Note: this article is for starting the code and layout of your comic. If you want more general advice on how to get started with Comic Genesis, read this article instead.

Making your comic site look better than the bland white default is sometimes the first thing that a webcomicer wants to do. However, before you do, there are a few things to consider:

Contents

Do you know any html?

Comic Genesis does not come with any default templates that the user can just pick and choose at their leisure. In order to allow maximum freedom and creativity, Comic Genesis allows it's members to use html code to create their webpages virtually from scratch.

That's fine if you happen to be good at coding in html, but if you're an art student then odds are you won't know a whole lot about it (or you may, it depends on the individual). If you don't, there are several resources available to you.

  • html Generator: Made by c.w. (a member of the Comic Genesis forums), the html generator will give you a good overview of basic html and at the same time provide you with the code necessary to get your site running. Easy as cut-n-paste!
  • htmlgoodies: A great place for the absolute novice, with the ability to jump ahead for those who already know a bit of html.
  • W3Schools: Very good for basics, with examples and a sandbox for you to play in.
  • Comic Genesis Help Center: Best for specific questions, there's normally a few people around to give you some help. Make life easier for yourself (and increase the chance of getting quick, effective answers) by reading the Help Center FAQ (includes copies of the default templates in case you lose them)
  • New! Template Library has a variety of different templates that are ready for you to just download and install on your account.

If you can't be bothered learning html, it's always possible to ask someone else to do it for you. Have look in the CG Webdesigner Yellow Pages and see if someone is willing to do it for you. Remember to follow instructions, and be careful who you give your login details to.

Where to begin?

Okay, so you know some html or have roped someone into doing it for you. Where do you start?

A better question might be "where do you end"? Some people try too hard and end up putting too many things on their site. They look at a famous (or at least bigger) webcomic and think that their own is too bland and empty in comparison.

Well, there's a reason the famous webcomic has all that stuff on the page. It's normally a lot of ads and / or links to other things. Why do they have the ads? Normally to pay for hosting. Why all the links and vote buttons? Because they are cross-linking or supporting other comics. Do you have to do the same? Short answer: no!

Don't lose sight of the fact that the reason people come to your comic is to read your comic!

A nice, clean layout will help the reader focus on your work. Keeping the number of images down will help lower the bandwidth, making the comic load faster. Getting rid of (or not having it to start with) all that debris will make people more likely to want to read your comic.

Okay, so where to begin?

The first thing that you need to consider is will your comic be black and white or in colour? If it's in colour, which colours will you use? Will the colours of the site make your comic stand out or blend in?

Most of the questions are basic design points, but the main idea is to work out how you want it to look. Grab a pencil and paper and draw out a few boxes to show where you want the comic to go, where the banner will go and anything else that you want to have.

Remember to KISS: Keep it simple! (What the other "s" means will vary, make up your own mind)

What goes where?

There are a variety of different things that you can have on your comic pages apart from the comic itself.

  • Do you want your readers to give you feedback?
  • Do you want to use a shoutbox, a forum or simply provide them with your email address?
  • Do you want to have a news box to tell your readers what is going on in your life?
  • Do you already have a blog, online journal, deviantart account or other medium to share?
  • Do you have your comic listed on any ranking sites? And if so, will you have vote buttons / vote incentives?

Once you have a good idea of which optional extras you want on your site, you need to figure out where you want them. And more importantly, what html tags you will need to put them there.

Since there are so many bajillions of possible combinations, any attempt to give examples would be woefully inadequate. So the advice? Practice on your computer!

Practicing at home before going on-line

In case you didn't know, it's easy and possible to try out your site before uploading it to the web and see how it will look. This requires a bit of knowledge of html, but it's also a great way to learn as you will be able to instantly see what the result is.

For the Keentags, you can create placeholder images. How does this work? Well, you should know that the ***advertisement*** Keentag will place an ad at the top of your page. So you can open up any drawing / paint program and create a little ad.jpg image to put in that spot. Before you upload the html file to the server, just remember to replace the image with the proper Keentag.

  1. Set up a folder in your computer somewhere. For this example, we'll use 'MyComic'.
  2. In MyComic, create a folder called 'images' (note: all lower case - trust me on this one).
  3. In the folder 'images', place a few sample graphics. You can also put placeholder images here.
  4. In the MyComic folder, create a new html file. The easiest way is to use a basic text editor (such as NotePad), then save the file as name.html (just be careful to name it whatever you want .html and not .html.txt which is easy to do. Use the drop-down "Save as file type" option)
  5. Create your code. Link images with <img src="images/filename.jpg"> and you will be able to see them. Plus, if you want to upload to the server, all you need to do is add an / at the front and it'll work the same on the server as on your computer.

You're now pretty much set to go. In the html file you can play with the code and have the file open at the same time with a browser and a text editor. In the text editor you can make a change, save the file then jump over to the browser and click 'refresh'. You'll instantly see the new version and see how the change you made affected the page.

Get thee a variety of Browsers!

Why should you have more than the default browser installed?

Because you are no longer a web user. You are a web creator! It's your responsibility to make sure that as many people as possible can see your work. How can you be sure of that if you don't check what your pages look like on different browsers?

Sure, you could tell people "use Browser X to view my comic", but you won't change anybodies mind that way. It's much better to make sure that your code works across several browsers, or at least the more popular ones.

It's also reasonable to keep up to date with the current standards and which tags are still suitable. You might use a tag expecting it to do one thing, only to have it behave markedly differently in another browser.

The main browsers to have installed (or at least be able to have someone use to check your site with) are:

  • Internet Explorer (it's the default for a lot of users as it's standard on Windows)
  • Mozilla Firefox (Mac, Windows and Linux)
  • Opera (Mac, Windows and Linux)
  • Safari (Available for both Mac and Windows)

There are also dozens of other browsers available, but generally you will only need to worry about the most common ones.

Return to the Tutorials page


This article is a stub. Expand it, post haste, or we'll break your thumbs!