Photoshop Coding

Sounds arse-backwards to me.

The only guarantee you have is that visitors get the HTML. Search engines cannot see images, and text browsers, screen readers, etc. do not pay much attention to images either. Nor do I if I am in a hurry - I turn off images, JS, and Flash for really fast browsing.

I suggest you get the HTML right before you do anything else. Otherwise it's a bit like painting a house before building it.

I agree with webwiz ^^

Why do you want to use PS?

If you know HTML already, then I suggest you stick to using a decent editor and code sites yourself.
A lot of people disagree with me, but I think if you hard code your site yourself, you understand it much more, and know what each file does and what each piece of code does. If you think of changing a link or function somewhere, you stand a better chance of changing all relevant things to that change if you have coded the site yourself.
That said, I also always make a personal map of my sites. List all the pages and what each does, and what links and variables are used in what pages.

Sounds to me like instead of learning PS, you maybe should start playing with CSS to get neater and more unique layouts and designs with your sites.
Also, depending on what sort of sites you are developing, maybe look at PHP tutorials.

But all that said, I suggest only learning the things that you will actually use, unless you are learning for fun/sake of learning.
For example, if you went and learned the basics of PHP but never used it, your time might have been better spent studying a range of different site layout and designs to give you a better idea of making unique sites, and what designs and layout to use for certain site types.

If you still want to learn PS, I suggest this link might help
http://www.google.co.uk/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd...

Greg

I think you guys might be misinterpreting the question...

MrCanuck, Photoshop is a great tool for designing your site. I use it to design the website exactly how I want it. I use a canvas size of 770px x 1000px and make it longer if I need to (I code fixed layouts, not fluid ones).

Quote: And then how do i code it? is there a simple way to do it?

Photoshop isn't a tool for coding your website (although, I thought it could do some HTML output). Once you get the design and layout set up right in Photoshop, then you code it in notepad or whatever.

Agreed with Matt here, think you chaps didn't really understand the question. Plus points for gratuitous use of the word 'arse' in a serious forum thread though. We should give you a Rory Award.

Photoshop isn't a tool for coding your website (although, I thought it could do some HTML output). Once you get the design and layout set up right in Photoshop, then you code it in notepad or whatever.

Just to add to this, you should chop up the Photoshop proof (or comp, or whatever you like to call it) into individual images. Generally, one for the logo, a header background, one for each drop-shadow etc. Save them as png, or jpeg for photographs.

You can usually do drop-shadows using repeated background images. Have a look at this site using Firebug if you like, that'll show you a few techniques.

Welcome to TWF.

thank you matt and Jeeves, thats exactly what i was wondering, =).

There really is no simple way of coding a website. If you want to do it properly, that is.

If you just want to hack something together you could slice up your photoshop document and export HTML (although I don't know how to actually do that anymore). This results in really bad HTML that you could tweak by hand. It might actuall display a web page but it might not display properly in different browsers or be crawl-able by search engines.

There are more discussions about this here:

http://www.webmaster-forums.net/web-design-and-graphics/tables-splices-p...

and here:

http://www.webmaster-forums.net/html-css-and-javascript/photoshop-html-a...

I'm not suggesting that a graphics editor is not useful, perhaps essential, as a tool for determining the layout, colors, etc. of a web site. That would be silly.

No, what I suggest is that the Web is much more than a graphical display. Back in the last century, when there were two incompatible browsers, and the only devices powerful to run them on were full-fledged computers, this way of designing with Photoshop comps, diced and sliced and buried in table-based layout may have seemed a viable option. I argue that this is no longer acceptable.

Today, it is possible to design web sites using correctly marked up HTML. This means headings marked up with H tags, numbered in hierachical order; paragraphs in P tags; lists marked up as lists; forms using only form elements; tabular data as tables; and so on. Citations should use CITE tags; emphasized text EM or STRONG; and foreign words or phrases identified by LANG attributes.

Why should we do this? Because we are moving toward what is called the semantic web. Page markup has to make sense not only visually, but to document processing software as well. If we do this, information can be shared and disseminated via RSS and mash-ups; search engines can make more sense of our pages and produce better search results; translation engines will do a better job translating to another language; screen readers will know how to pronounce the words; visitors with text browsers, or ancient browsers like Netscape 4, will get a usable, if not pretty page without CSS.

I would also argue that attempting to re-create a graphic design in HTML and CSS is an exercise in futility. Yes, you may succeed in reproducing it on your monitor, at your color settings, resolution, and size; on your operating system set to your particular defaults and using your installed set of fonts. But that represents only a minority. In Europe, an estimated 30% - 40% of Internet traffic is on mobile phones. With the success of the iPhone, I expect an equivalent change in N. America. Game players use their Wii or Xboxes. Lucky folks have their Apple Cinema displays. How, now, your fixed width site?

While I realize that the Web is very different from print, there are some shared fundamentals. In setting up a new issue of a magazine, for example, can you imagine an editor attempting to lay out the pages before gathering and organizing the articles and photographs? On the Web, too, "content is king". It is HTML that organizes the content, not Photoshop.

I suggest that learning to use HTML correctly is essential for every webmaster. Learn what every tag and every attribute means. By sticking to strict HTML and ignoring deprecated tags and attributes, there is not a whole lot to cover. Then, since HTML is limited in conveying semantic information, read up about micro-formats. They bring in a whole new raft of possibilities for extracting useful information from your pages.

Last year, the Web turned 15 years old. CSS turned 10. Netscape has just been pronounced dead. Browsers are converging on a single set of proposed standards. Sir Tim's vision of a semantic web is possible here, now.

Time to put away the baby toys, and create something more substantial.

Let's put the "World" back into the "World Wide Web."

This is the way I usually code layouts after developing a mock-up in a graphics program (which I think is essential because you need to come up with a cohesive graphical style, considering the content and how it will display on different devices etc.)

1. From the graphic, export any parts that need to be images in the HTML/CSS. In photoshop you can use slices to do this, or just crop and save the parts you need. I use inkscape for most of my layouts now, so I can just select the parts I need and export a png.

2. Start coding the HTML - much as David suggested, this means creating a meaninful markup for the content. This could actually be started before the mark-up is finished. In fact, these days I'm often working with a CMS and start with a pre-built template rather than coding everything from scratch.

3. Code the CSS, attempting to match the graphic layout. This is where some shifting comes in because I sometimes find that what I had in the graphic can't be replicated exactly in CSS. That's fine, adjustments can be made. The images you exported from the graphic are usually plugged into the CSS as background images, unless there's something that actually has semantic meaning (such as a logo).

To decide what should be an image in the HTML and what should be a CSS background, consider whether the image is for purely decorativer purposes or not. Any elements that are purely for decoration go in the CSS. For other things there might be a decision to make and as you gain experience you'll

Size of the mock-up

As for how big to make your mock-up, you first have to decide which screen resolution you're going to design for as a minimum. For years the minimum standard was 800 x 600, meaning your layout had to fit in that resolution without overflowing. Now many sites have moved up to 1024 x 768. I argue that since this is the most common resolution you need to make sure that your layout looks *best* in that resolution, even if you're going to make it work at 800 x 600.

If you can, you should check your site stats to see which resolutions your visitors are using - this can vary between sites, especially the number of people using 800 x 600. Now I usually find that there are many more people using larger, often widescreen resolutions (1200 x 800 or larger).

I often design quite big mock-ups, even up to 1200px wide by 1500px tall. I often work on designing the content all the way down the page, especially for a home page with a lot of content such as the A Padded Cell home page. The final mock-up for that page was 1000px wide by 1300px tall, and as you can see we coded it as a fixed width layout.

If I'm doing a really wide mockup, at 1200px or so, I'll put in guides to show where the 1024 x 768 window would be. Then I design within that frame while considering what it will look like on larger screens.

I used to do mock-ups at about the same size as the screen window 800 x 600 or 1024 x 768. This does mean that you tend to focus on the header area and not the rest of the page. Now I've started to pay more attention to the whole page, from top to bottom.

However, many forum members disagree with me and continue to design at 800 px wide. More on that in this thread:

How big are your mock-ups?

I think it's kind of silly to optimize for a resolution only a small percentage of visitors are using. Better to optimize for the majority, even while making allowances for the minority.

This might be a bit overwhelming for you. For you, I think a mockup of 1000px wide would be fine. You just have to decide if you're going to make it work at 800 x 600 or not. That depends on what type of site you have, but I think it's pretty safe to do a fixed width layout a 1000px now (most major news sites are going that wide now, as is Yahoo and many others). That's another easy way to think of it actually - what are most mainstream sites doing? You don't see a lot of new designs coming out at 800 anymore. If you want to make it work at 800 x 600, just put in guides 100px in from each edge and design in that frame.

For the height, start at 764 to fit in the 1024 x 768 window. As you're working you can always raise that if you want to work on content further down the page.

Sorry for going on so much, I suppose I was inspired by David's essay above