Since the evolution of web design the options have increased. My instinct is to create the design in photoshop then build it in dreamweaver. It is going to be a professional sight with graphics, photos and video. Is this the best route? There are so many software programs and ways to create web pages now I am not sure where to start. Any help on this matter would be appreciated.
ah! ok - i gotcha. ya - that's a great way to start, and most importantly you should do what makes you comfortable. if you work well that way then by all means do it... :-)
(i do prefer the window in photoshop to start with - i have all the tools i need and i typically end up with 40+ layers of ideas that turn into a template that then goes out to the web page when i'm happy with it)
This is really good stuff... There are so many of us video people who don't know web design tools, but who are experts with graphic design tools such as PhotoShop, Combustion, AE, etc. Can you possibly outline a simple workflow with some simple rules of thumb for us non-webbies?
For instance, which elements would you build in PS, which in the web design software? And, can you elaborate on the guidelines for choosing the proper resolution for the elements created in graphics program?
Thanks Brian, I may just get that book... But, I was really hoping Curtis would just write a short cheat sheet... He's so very good at what he does... Such a fine fellow... So professional... etc., etc., etc....
i hope this still gets read - was on vacation for a few days there... :-)
i am personally a hand-coder, so what i do is start with a blank canvas in ps - usually about 900x700 or so to replicate a "typical" browser window (assuming 1024x768 res). then a few guides to 800x600 and i just dive in with an idea. usually that comes from a design i've seen somewhere (http://coolhomepages.com or http://cwd.dk are great places) and i start my own piece. it all stays in photoshop the entire time until i get a template that i think is good enough, and then i'll take parts and put it into html. what i might do is turn off all the content areas and save it as a huge jpg and then make that the bg of the page for mockup. then build a few simple tables to place content in that and i have something to show a client...
after that, i'll break it all out into more bits (at that stage, i might use image maps for nav before making each item) and do other large chunks to make it easier. then if everybody likes it, it gets fully broken out into the final site...
but that's just me...but i find it's immensely easier to play in photoshop with a canvas because i can move images around and adjust stuff to my heart's content without needing to worry about html or previewing, etc...
hope that helps! feel free to fire back anything that comes to mind...
I have one word to add: CSS
Cascading Style Sheets are an amazing design tool. They're cross-broswer/cross-platform safe. They don't go weird when viewed in finicky browsers like tables do. They allow absolute positioning, almost as specific as layers in Photoshop. Or they can be used in a very scalable way (with percentages).
...and this is only for element placement. Also, if you set up a style sheet for your text, the whole site will look more professional. If in doubt, spend an hour or two with a typographer once your (graphic) design is in the final stages. You'll be glad you did. Think of it as the lighting (nothing can replace a good DP) of web design.
When you're thinking of your designs, try to think that your users will all be at different resolutions. Try to conceive something that is scalable.
As for the CSS... look up the CSS Zen Garden http://www.csszengarden.com/ It will really help you to see what you can do with very clean code.
i will totally agree that css is a great way to go to control site design, although i would offer a few things based on your notes:
[isotrope]"They're cross-broswer/cross-platform safe. They don't go weird when viewed in finicky browsers like tables do. "
while css is indeed certainly cross-browser, it will act differently between ie and firefox and between windows and mac. this is due to different interpretations of the w3 spec, and ie/win tends to be much more forgiving about things like padding, margin, etc. on elements. but there are easy workarounds...the only thing to make sure is to check your site carefully in as many browsers and platforms that you have access to. this will help ensure that they all look as you'd like them to...
[isotrope]"They allow absolute positioning, almost as specific as layers in Photoshop"
on a general level, i really recommend against using absolute positioning - it's very tempting as you have seemingly endless control, but the more you lock down now, the harder it becomes later to change the site and make updates. i recently helped out a friend with a site where the original developer had absolutely positioned _everything_ on the site, from the top nav and logo to the bottom menus. this was all well and good, but i needed to add a bit of copy to the pages and a nav item. what would have been a few hours in a non-absolute environment turned into a 1+ day struggle to figure out the code and also adjust all the layer pixel placements to fit the new layout.
there is no layout that would seemingly benefit from absolute positioning that cannot be done even with old-fashioned tables. there is an old (very old) trick of making a 1x1 pixel transparent gif and stretching it to a size that will force and hold neighbor elements in place in any browser, yet still let the site grow and change over time. i still frequently make use of that transparent pixel gif, and it does wonders compared to absolute positioning.
[isotrope]" Or they can be used in a very scalable way (with percentages)."
this is a _great_ thing to bring up - using font sizes with percentage values as opposed to pixel values is something that i've recently started forcing myself to do. as a designer, it is hard because you do give up some control, but it really is extremely user-friendly and a usability plus. this is because if you say a font should be 12 pixels, it will be 12 pixels no matter what, whereas if you say a font should be 90%, it will be 90% of whatever they currently have their fonts at in their browser. however, it will ensure that the user can see your content and read it and be able to use your site, and isn't that the goal after all?