How do I create a website in Photoshop?

I am new to creating websites in photoshop.


I know how to save it, but what size do I start with. Whenever I save it, the website is HUGE! Can someone give me a size in pixels?


Easy 10 points!How do I create a website in Photoshop?
Photoshop is actually for creating graphics AND for creating websites. It's a common misconception that it's only for creating graphics.





Create your graphic, then save it as a jpg - but from the dropdown menu, choose 'HTML and Images' - Photoshop will render the HTML code and the graphics for you. It will place the graphics into an image directory, and the html file will be named whatever the PSD file has been named.





To create 'sections' of your sites for tables, use your slice tool to divide your graphic into sections and give it properties , and then use the above method to save your graphic as ';html and images' -- Photoshop will then save it as separate images and tables. Then open the html file in Dreamweaver or another editor to add text to that section.





As far as size goes, I've always felt the content section is good at 1000 pixels wide, then adding a background to the edges. Nobody has the same screen resolution, so someone is always going to be left out -- 1024 is pushing it to the limit, and your user is likely going to have to scroll slightly left and right to see the comple site if you go with that width. 1000 is your best bet. As far as the 5% of users who have 800x600 resolution? Who cares.. ....


----





updated --








By the way -- you'll see a lot of negative ratings on all of these - everyone's an 'expert.' You wanted a Photoshop solution... Regardless of what some of these guys will tell you (including the one with 15 years experience that seems to think a 'great number' of people still use 800x600 resolution - laughable), Photoshop WILL save HTML for web. Best web solution? No -- but it will get the job done quick...How do I create a website in Photoshop?
960 pixels wide, and around 600px high for your most important content. You can have it a lot taller than this, but your most important information should fit within the window on a 1024x768 screen resolution.





Create your ';concept design'; in photoshop.





Never use photoshops export tool to create your actual web-site. This is the wrong way to go, and anyone giving you that advice is not a professional.





The best way is to cut out the graphics you want. For example, your logo, background images and borders. Then take these images and add them into your html via css styles. Make sure the site is fast loading, clean and accessible.





Here's a sample to get you started


http://files.cogocreative.co.uk/sample.z鈥?/a>
Photoshop is for creating graphics, not creating web pages.





';Can someone give me a size in pixels?';





On what monitor? What operating system? The variables of user viewport are so far and wide it's impossible to say ';one specific size'; and have it work for everyone. Anyone who does is an amateur (or a spam-boy who could care less about your problem, as the previous two link droppers are . . . )





In terms of designing your graphics in Photoshop. you should have one area of the design, like a bar top and bottom, that will be a background pattern for the ';bar'; that will allow the container to stretch or contract accordingly without exploding your design. Here's your easy answer: start with 1024, but don't set your design at that statically.





The optimum solution here: currently monitors of 1024 width resolution are common and getting larger daily, but a great number of your visitors will still be on 800 width resolution. If you go with ';100% width'; on those large monitors your lines of text will be so wide it will be as hard to read as if you made the type so small. So . . . set your width for 95% width and apply the max-width and min-width properties via CSS. These don't work in IE6, but that's the breaks . . .





#container {


width:95%;


margin: 0 auto 0 auto;


min-width: 800px;


max-width:1024px;


}


........


%26lt;div id=';container';%26gt;


Your content


%26lt;/div%26gt;





Of course, the margin:auto will not work if your document doesn't validate:


http://validator.w3.org/
You do NOT - I repeat: NOT - design a ';website'; in Photoshop, EVER!


You design IMAGES, and nothing else.


You can, if you want, designe the ';layout'; of your site, that is, how you would like it to show ';in the end';.


Look at this page: this would be a ';layout design'; (how it will ';look';), but although you may keep and print an image of it as reference, you do NOT use that image as ';website';.


You cut it into small pieces... (This is where the fun begins).


What ';images'; do we have on here?


- A background image (the greenish oblique stripped thing): make a small image, 50x50 pxls, and you will use a repeat function as %26lt;body%26gt; background. It is small, so it load FAST: VERY IMPORTANT!


- A top-nav-bar with the words ';Yahoo | My Yahoo! | Mail '; etc...


This is just a bit of a table or a div with a background colour and a series of clickable LINKS: no image required!


- Below is the Yahoo logo: that's an image by itself.


etc etc...


Look at your screen: each bit that you can ';cut'; as one entity is one split part of you global design.


You arrange them using CODE to look like your desired layout, AT ALL RESOLUTIONS: you have to check it with 800 (5% users), 1024 (most common), 1280 (regular), 1660 (newest).


Hard?


Yes, it is hard to make tat layout to look the same at all resolutions.


But you can do what yahoo did: no width wider than 800 pixels, then center it. Easy way out.


If you do that, I'll call you lazy or incompetent. (Yahoo ARE lazy in their designs, but they attach more importance on functionality, so they are forgiven).


SO...


NEVER make a single image wider than 800 pixels wide (unless you accept that 5% of users will have a horizontal scroll bar. When the see it, they leave...)


Good luck!
You are going to regret it trying to use Phtoshop to make a web page. Try these others and use PS for the graphics design.





Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders:


http://www.thefreecountry.com/webmaster/鈥?/a>


Free Online Editor Tool: http://htmledit.squarefree.com/


Free Flash Website Builder (Online): http://www.wix.com/





Mac users might want to download BBedit Lite, a more powerful, and free mac text editor: http://www.barebones.com/products/bbedit鈥?/a>
72pixel and trust me, you should use dreamweaver to make the website. Photoshop is only a tool for editing a photo and your website should no be a full image. The search engine never craw the image, people will never find you. So what is the point you make this website.