Hi I'm new here, just started to give web designing a try. I'm OK with HTML/CSS but design wise is a bit iffy. Basically when I made a layout in Photoshop and completed it, I used an image hosting site to upload the PNG of it. However it is only half the size i created it to be. Can you not make a full layout in Photoshop? Because whenever I upload the layouts they are nowhere near the size of an average website, even though i set them up to be.

Hi I'm new here, just started to give web designing a try. I'm OK with HTML/CSS but design wise is a bit iffy. Basically when I made a layout in Photoshop and completed it, I used an image hosting site to upload the PNG of it. However it is only half the size i created it to be. Can you not make a full layout in Photoshop? Because whenever I upload the layouts they are nowhere near the size of an average website, even though i set them up to be.

 

What exactly do you mean when you say layout, are you using tables? Or is it an image for background, element, etc?

What exactly do you mean when you say layout, are you using tables? Or is it an image for background, element, etc?

 

it's a layout completely created in photoshop, containing everything from the background, content boxes etc. I think one was around 1000x1000px however it shows up as an image about half the size. is it not supposed to fit the browser?

 

forgive me, im really new at this, just looking for basic understanding of designing.

If I have the wrong end of the stick, then please forgive me

 

You don't build a website like that, How much html and css do you know?

it's a layout completely created in photoshop, containing everything from the background, content boxes etc. I think one was around 1000x1000px however it shows up as an image about half the size. is it not supposed to fit the browser?

 

forgive me, im really new at this, just looking for basic understanding of designing.

 

I think you're gettling a little confused with how it works mate. The sites you see which fill the full width of the browser. They're not single image files. Layouts created in photoshop will first need to be sliced and coded in a way in which they will fill the browser window. A single image file will be scaled down to fit your screen when viewed in a browser, whereas if you slice your photoshop layout into sections and use css to position the images. You can code it to your needs. For examples on how this is done, you can check out slicing guide.

If I have the wrong end of the stick, then please forgive me

 

You don't build a website like that, How much html and css do you know?

 

 

Oh okay. Im very confident with html and have used it alot at college. same with css. im just not sure how people get these amazing websites from just the languages. is there no photoshop involved or designing of the layout in some sort of program?

 

sorry im completely new at this!!

I think you're gettling a little confused with how it works mate. The sites you see which fill the full width of the browser. They're not single image files. Layouts created in photoshop will first need to be sliced and coded in a way in which they will fill the browser window. A single image file will be scaled down to fit your screen when viewed in a browser, whereas if you slice your photoshop layout into sections and use css to position the images. You can code it to your needs. For examples on how this is done, you can check out slicing guide.

 

heh that makes sense. i've only ever worked with code and never made a website before. just wondering how to get it started as I am quite a good designer but wasnt sure where to start. i'll look into the guide, thanks alot for you help.

Oh okay. Im very confident with html and have used it alot at college. same with css. im just not sure how people get these amazing websites from just the languages. is there no photoshop involved or designing of the layout in some sort of program?

 

sorry im completely new at this!!

 

Right, I think I understand now.

 

With my site, I coded my site using html and css (content, links, sizes, divs etc) I only used photoshop to create the header image, a small body image and a background image.

 

So basically you create the image you desire in photoshop, then you use html/css to put iit where you want it to go.

 

An example

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="verify-v1" content="iNdqzK2HUpK9hlKD2jvF+sRZgU3aVYRmIN1fjNELroo=" />

<title>Title here</title>

<link href=" style.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="wrapper">

<div id="menu">

 

</div>

<div id="header">

</div>

<div id="content">

</div>

<div id="footer</div>

</div>

</body>

</html>

 

Then you use css to style your divs and add the images you created in photoshop.

 

I hope I'm makig sense.

Right, I think I understand now.

 

With my site, I coded my site using html and css (content, links, sizes, divs etc) I only used photoshop to create the header image, a small body image and a background image.

 

So basically you create the image you desire in photoshop, then you use html/css to put iit where you want it to go.

 

An example

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="verify-v1" content="iNdqzK2HUpK9hlKD2jvF+sRZgU3aVYRmIN1fjNELroo=" />

<title>Title here</title>

<link href=" style.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="wrapper">

<div id="menu">

 

</div>

<div id="header">

</div>

<div id="content">

</div>

<div id="footer</div>

</div>

</body>

</html>

 

Then you use css to style your divs and add the images you created in photoshop.

 

I hope I'm makig sense.

 

 

That makes sense and helps alot, thanks so much! just to be sure, most people use photoshop or other design programs to create their images such as header, borders (sometimes with shadows, etc), and all that kinda stuff and then use the code html/css to place the images where they want?

 

Thanks again, great help.

 

Oh also, what is slicing and what is the difference between slicing and coding images?

That makes sense and helps alot, thanks so much! just to be sure, most people use photoshop or other design programs to create their images such as header, borders (sometimes with shadows, etc), and all that kinda stuff and then use the code html/css to place the images where they want?

 

Thanks again, great help.

 

Oh also, what is slicing and what is the difference between slicing and coding images?

 

Slicing is basically cutting up an image so that the web browser knows to use only that sliced section to do a certain action. For example, in the image you made in photoshop, you might have a navigational button. You'd slice this (using a program such as Fireworks) so that the browser knows where the outsides of that button are.

 

Coding the image is basically just the html/css stuff that you say you already know to tell the browser where/how you want the slices to display.

 

To be honest (and i'm not having a go at you because i did this once when i first started web design) the WORST way you can design a website is like this. It causes so many problems. It's aright when doing it on a small scale but not for whole pages. I'm not very artistic but i find i can make a good looking website without looking at it much; i just stick to coding it and it usually turns out better with fewer problems this way. Just use images/photoshop for actual images (such as the banner) that you want on your website, not for making the whole thing.