How Do You Photoshop A Website? - Make your own themes

Okay, here we go...Hopefully you all understand what I mean by this, and maybe someone knows how to make it a reality.

More or less I want to design my site using Photoshop(I'm assuming I do a jpg or some other format and it will be the basis of the site). Now, afterwards, I would like each block to be able to hold information. For example,




Banner would have a banner on it,

The main area would have any real information on it.

The nav bar I'm unsure if I'll just use normal html or something else to write it. Maybe flash.

Ad1 and Ad 2 = advertisements

Footer = "2008 ????" most likely


Now I think that I can create the design, but I do not know how to get the actual information onto it. Hopefully it doesn't involve editing a lot of pictures and uploading them.

For example, in the main page, I would like to even have a scroll bar, assuming that the information I'm adding would not fit.

Now, in terms of the design, this is most likely not how it would look. I am just needing help with figuring out how to use blocked off areas to add content. Then I will work on the design itself.



I'm planning on the site(assuming I can do this) getting larger and larger over time. I have thought about using a CMS, but I just feel more comfortable using HTML, not to mention I can fully customize it.


As for the methods of adding the information to the blocks, I have a couple of questions.

1)Would I actually draw the content areas using PS, or leave them blank and mentally work information into them?

2)If anyone does know how to do this, it would be appreciated to explain it(so I can adapt it to my use), and Dreamweaver tutorials/explanations would be best. I do know how to customize/clean up code, but using DW is a faster method for a lot of things.


Thanks in advance.

If you don't really understand what I'm looking for, please ask. I would really like this to work out! Hopefully the answers I get here will help others who may have the same issue as well.

 

 

 

Comment/Reply (w/o sign-up)

Well I do understand what you want to do, and it takes just patient:

1. First of all you make your design in photoshop (just the images, for the text you use dreamweaver).
2. Once is done you cut it with the knife tool in the sections you are describing.
3. Then you go to file - save for web and a window is going to appear and you specify the type of file, the quality and then you save it. (You have to make sure that the all slices option is on, if not you're only going to save the one that is selected.
4. After that you go to Dreamweaver create a new HTML file, and then go to view - table mode - layout mode, one that is done you can use the draw layout table function that is located in the layout tab. With this tool you create a table with cells that have the exact dimension of the images you cut on photoshop.
5. One the table is create you exit the layout mode, and insert the images in each one of the cells you created before.
6. Then if you have issues making the images coincide, you have to modify the table options so there are no spaces between cells and no borders, etc.
7. After you have your layout you start to introduce your text and that's it.

Hope this can help you and it's exactly what you are looking for, any questions let me know

 

 

 

Comment/Reply (w/o sign-up)

I design all of the web sites in Photoshop first. It makes it easier to design because you know what you want when you start, so you can achieve that goal. If I was just free designing, I have no idea what I would do. That way just doesn't make sense to me. I don't understand how you could just start from nothing and add different parts with no clear goal to achieve. Having some rough sketch of what you want is necessary.

To accomplish what you want, you can take quite a few approaches depending on how the layout is designed. For all of mine, I cut up the layout to make the most efficient one possible. It usually involves taking a small portion of an image, then using CSS to format it for the page. Doing it this way, it can be expanded dynamically with the size of the content on the page. If you know CSS and HTML, you can do this pretty easily. It just involves a little bit of of coding, then adding your content. In the end, it is very simple.

If you want more info, I can create a video tut on how to do it for you.

Comment/Reply (w/o sign-up)

Just to make sure that it's clear following the preceding posts:
Use HTML for basically all of your text. If in any case you have words in a logo or image be sure to include the text somewhere in your HTML (possibly the <img alt=""> text). This is important for two reasons:

1) search engine spiders will see your page as empty if all of your text is contained in your images and you will not be able to get very good search engine results

2) a small percentage of internet users browse with images disabled. Your site my not be as pretty without images and that's fine but it should still be readable and navegable.

With that said, happing designing! I'm not as handy in using photoshop for my sites as I would like to be, but I hope it goes well for you.

Comment/Reply (w/o sign-up)

Very good point. ALWAYS use the alt tag. Without it, you technically don't have valid HTML/XHTML and spiders and people with images disabled get screwed. Also, it's good to put in the title="" tag on all links and give it a short (a few words) description of the link. It makes navigating a lot more user friendly.

But like he also said, never put text in an image. Always create it with HTML.

Comment/Reply (w/o sign-up)

its possible that i can be in assistance if you want my help =]
you need it?
ill be happy to help you photoshop and make any website you would like.

Comment/Reply (w/o sign-up)