fireydeviant
10-28-2005, 03:04 PM
Here is a list of tutorials I have found that are really helpful. They cover layout, some effects, and slicing.
http://www.zymic.com/view_tutorial.php?id=120
-This tutorial covers creating a full website, going from design, to slicing, to modification in Macromedia Dreamweaver. I have done this tutorial and found it pretty easy to do. Something fun to do with this one is to change the grad. overlay to other colors, giving it another accent color.
http://www.purephotoshop.com/view.php?id=53
-This is a nice one on clean content boxes.
http://www.websiteicons.com/about/analysis-of-a-professional-website-design.html
- This one isn't so much a tutorial as it is an explanation of unified design. It explains how unity and cosistency can help a webdesign look professional.
http://www.tutorialwiz.com/navbar/
- This one is a nav bar tutorial.
I find it nice to start with an image no smaller than 700x800 px
Also note that if you decide to code the design yourself, that to get images seperated by invisible tables, code like this should be used:
<body bgcolor="#333333" link="#336699" vlink="#336699" alink="#336699" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
(this tells the browser that the body of the site should line up with the edge and top of the browsing window)
AND
<table width="713" border="0" cellspacing="0" cellpadding="0">
(this tells the table not to put space between cell edges and their contents. Allows for images to line up and flow.)
When in photoshop, try to organize your layers. Create groups for content boxes. This allows you to place them as a whole.
Do this so that when you come back to modify the design a month later, or incoperate old elements into a new design, it is easy to find the specific layers, instead of scrolling through 60 layers.
When going from PSD to HTML, photoshop creates a lot of images. Many more than you need. While editing the design in your html editor, make sure to remove useless images, such as black areas wher you could easily fill the table with a black background color. This cuts down on bandwidth usages and speeds up your web site.
Remember to pick the right colors for your website. Make sure people can read your content and that it won't burn your eyes from ultra-bright colors.
There are alot of nice fonts to mess with in photoshop. Just try not to over do it. Make sure your font fits with your website.
Also, if you want an image repeated, cut out a small part of it and set it as a background. When the area is streched with it. The border of the forum here is a good example.
Make sure to practice. Create websites that may never be used. You figure out a lot of nice ways of doing things by expirementing.
http://www.zymic.com/view_tutorial.php?id=120
-This tutorial covers creating a full website, going from design, to slicing, to modification in Macromedia Dreamweaver. I have done this tutorial and found it pretty easy to do. Something fun to do with this one is to change the grad. overlay to other colors, giving it another accent color.
http://www.purephotoshop.com/view.php?id=53
-This is a nice one on clean content boxes.
http://www.websiteicons.com/about/analysis-of-a-professional-website-design.html
- This one isn't so much a tutorial as it is an explanation of unified design. It explains how unity and cosistency can help a webdesign look professional.
http://www.tutorialwiz.com/navbar/
- This one is a nav bar tutorial.
I find it nice to start with an image no smaller than 700x800 px
Also note that if you decide to code the design yourself, that to get images seperated by invisible tables, code like this should be used:
<body bgcolor="#333333" link="#336699" vlink="#336699" alink="#336699" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
(this tells the browser that the body of the site should line up with the edge and top of the browsing window)
AND
<table width="713" border="0" cellspacing="0" cellpadding="0">
(this tells the table not to put space between cell edges and their contents. Allows for images to line up and flow.)
When in photoshop, try to organize your layers. Create groups for content boxes. This allows you to place them as a whole.
Do this so that when you come back to modify the design a month later, or incoperate old elements into a new design, it is easy to find the specific layers, instead of scrolling through 60 layers.
When going from PSD to HTML, photoshop creates a lot of images. Many more than you need. While editing the design in your html editor, make sure to remove useless images, such as black areas wher you could easily fill the table with a black background color. This cuts down on bandwidth usages and speeds up your web site.
Remember to pick the right colors for your website. Make sure people can read your content and that it won't burn your eyes from ultra-bright colors.
There are alot of nice fonts to mess with in photoshop. Just try not to over do it. Make sure your font fits with your website.
Also, if you want an image repeated, cut out a small part of it and set it as a background. When the area is streched with it. The border of the forum here is a good example.
Make sure to practice. Create websites that may never be used. You figure out a lot of nice ways of doing things by expirementing.