Part 1: Questions On Making Your Own Template

[Nameless_ 1]

So, I've been looking at a few tutorials on how to create your own custom site template, but the problem with that is that the template that they are teaching you to create haven't have a lot of places where you can vary, apart from the colours and certain images, and they kinda already provide you with the coding and how to splice your pictures.

 

This is a vague idea of how I think you make your own custom template (correct me if I'm wrong):

1. Use photoshop/similar software and create what you want your site to look like

2. Splice your images

3. Code the HTML part for it

4. Code the CSS part for it

5. If you want to change it to CMS compatible, then somehow change your code?

OK. Part 1 Questions. Here they come.

 

Part 1 (a) - Canvas Size of the Photoshop Part

So, let's say I want to make my site's design completely different from the tutorial ones.

Do I just do the same and create what I want it to look like on photoshop?

Also, different tutorials indicate different canvas sizes. What am I mean to do? How big should my canvas be?

(I know that all of the tutorials say your canvas have to be 72 dpi (not sure what that means), but the pixel lengths are different and I have no idea which canvas size I should use. Does it matter?)

 

Also, lets say I want my site long so people have to scroll down. Does that mean I just lengthen the canvas size?

 

Part 1 ( - Animating Pictures/ Form

 

OK, if you want to add pictures, that's easy, right? Just copy and paste it onto the canvas from your files. BUT lets say I want flash. Or I want to insert a video from Youtube. How do I do that? Do I just draw a box and expect the video to just go there?

 

Also, if I want to add a form (not stating that I want to, but I want to learn), do I also just draw a box as the form and somehow specify the area in the coding part of the instructions?

 

Part 1 © - Slicing Pictures

 

I haven't done this bit yet, but let's say. And I mean, let's say, I've finished my photoshop thing. How are you meant to know where to splice your pictures? Because according to the tutorials, it says that how you splice your pictures are very important because it makes the structure of your coding and stuff.

 

And also, are you meant to leave some blank spaces at the sides of your image just in case your audience has a big plasma computer or something.? By how much?

 

 

That's all for now. More Questions will be flowing in. Frankly, I've got a gazillion, but I want to make this simple for you guys. Or else it'll be like spamming my thoughts onto the screen.

 

About the coding part... I'll just ask more when I get to that. I'll probably show you the design once I finish the photoshopping, if I can edit my posts and remove it once the advice is given. But I need to know how I'm meant to photoshop it first.

[rvalkass 5]

Part 1 (a) - Canvas Size of the Photoshop Part

So, let's say I want to make my site's design completely different from the tutorial ones.

Do I just do the same and create what I want it to look like on photoshop?

 

Basically, yes. Most designers create an image of what they want the final site to look like in software such as Photoshop or The GIMP. This gives you complete graphical control over the design and the power of your graphics software, while also being able to see what the finished site will look like at all times.

 

Also, different tutorials indicate different canvas sizes. What am I mean to do? How big should my canvas be?

(I know that all of the tutorials say your canvas have to be 72 dpi (not sure what that means), but the pixel lengths are different and I have no idea which canvas size I should use. Does it matter?)

 

Your canvas should be as big as it needs to be. I know that sounds like a very un-helpful answer, but let me explain. If you want to create a website that is, let's say, fixed width at 720px then you will only want a canvas slightly wider than that (say, 760px). If, however, you want your site design to be fluid-width (filling the user's screen widthways) then you will want to choose a fairly wide size just so you can fit all your design elements on the screen. You will later use CSS to repeat various backgrounds horizontally and vertically, so you can make elements change size dynamically in the final coded template. The image you create in your graphics software is a guide, an impression of the final design.

 

As for the height of your canvas, make it as tall as you need to have a comfortable working environment and to fit all the different elements into your design. As I've said, you'll use CSS to make elements expand to accommodate the text and images you want them to hold in the final template, so the sizes in your mock-up aren't all that important.

 

The 72dpi setting is just because most monitors work at 72dpi but the setting is largely irrelevant. The important number is the number of pixels width and height for your image.

 

Part 1 ( - Animating Pictures/ Form[/b]

 

OK, if you want to add pictures, that's easy, right? Just copy and paste it onto the canvas from your files. BUT lets say I want flash. Or I want to insert a video from Youtube. How do I do that? Do I just draw a box and expect the video to just go there?

 

Elements such as images, text, Flash, etc. are all added at the HTML stage. The only images that appear in your graphical mock-up are ones common to every page of your website. If you want to add example text and images to your design (a good idea to get a realistic look) then generate some placeholder text and use a random stock image to take the place of the real image. The generic placeholder for elements you intend to add later (such as Flash) is usually a box with a large cross drawn through it (such as this: http://forums.xisto.com/no_longer_exists/ ) but there is no specific reason to use that. If a grey box with "Flash Video Here" written on it works for you, use it - no-one will see it on your website.

 

Also, if I want to add a form (not stating that I want to, but I want to learn), do I also just draw a box as the form and somehow specify the area in the coding part of the instructions?

 

I would not get yourself bogged down in specifics like this while making the template unless you are creating a design which has to be pixel-perfectly replicated in the HTML for some reason. The form is created in the HTML code and will look different between different browsers and operating systems, so you can't really design it in your graphics software.

 

Part 1 © - Slicing Pictures[/b]

 

I haven't done this bit yet, but let's say. And I mean, let's say, I've finished my photoshop thing. How are you meant to know where to splice your pictures? Because according to the tutorials, it says that how you splice your pictures are very important because it makes the structure of your coding and stuff.

 

You should slice your design so that each separate repeated image is cut separately. For example, if you have a box with a gradient background, cut that out separately from the rest of the design. A pattern underneath your header image? Cut that out separately. You will also need each element you want clickable (such as menu buttons) cut separately, so each image can be clicked individually.

 

And also, are you meant to leave some blank spaces at the sides of your image just in case your audience has a big plasma computer or something.? By how much?

This is determined by whether you've created a fluid- or fixed-width design. If your design is fluid (like this forum) it will expand widthways to fill the user's browser window, no matter what size they make it. If a design is fixed-width it will remain the same size on all browser windows, gaining space either side if the browser is bigger, or requiring horizontal scrolling if the browser window is smaller. If you create a fluid design you don't need to leave any blank space as the user will never see any. If you create a fixed design, you will need to plan what you're going to fill the empty space on the left and right of your design with. Most people use a plain background colour or pattern, but more recently people are using large images and photographs as backgrounds to great effect.

[mahesh2k 0]

3. Code the HTML part for it4. Code the CSS part for it

If by any chance you have seen bani's tutoriary site then you can get some good pointers for the HTML coding part. CSS is also covered i guess. I found 2 column and 3 column template tutorials handy and i suggest them to others. So check out those tutorials if you want to know more.

For slicing part i don't know GIMP is useful or not but i use the photoshop and paintshop pro for the msot of part. Hope this helps.