| I'm often asked about ways to create eye popping | | | | footer, and an area in the middle for content. |
| web sites. Fortunately, it's actually pretty easy BUT | | | | You then use the Slice Tool (located in the flyout for |
| you have to know how to use Photoshop. The basic | | | | the crop tool) to draw slices on the finished |
| steps are simple and I'll outline them for you. | | | | Photoshop composition. This lets you specify how |
| Most people don't know that you can use Photoshop | | | | the images should be sliced and lets you pick the |
| to do web design. They just think of it as a graphics | | | | area for content. |
| editor and that it is for working on images that would | | | | If you cut it right, the content area will grow as your |
| display inside a web site. The fact is though, you can | | | | content grows, meaning the template you're making |
| create the whole website with Photoshop. | | | | will work for any amount of content. |
| First, you have to split the site up into three main | | | | Then you will save the file in the native PSD format, |
| components. The header, the content, and the | | | | so that you can edit it later, and then save it again |
| footer. The reason you do this will become evident | | | | using the option Save for Web and Devices... |
| eventually. | | | | This will bring up a dialog that allows you to make |
| You then think about the size you want for the site. | | | | selections based on quality and image type. You want |
| A good rule of thumb is around 600-700 pixels wide. | | | | JPEG and at least 80 on the quality. |
| The length of the site (vertically) will change | | | | Pick your location for the files and Photoshop will cut |
| depending on your content, which is why you create | | | | your graphic into pieces, based on your slices, and |
| the header, content area, and footer separately. | | | | assemble those pieces with an HTML file. |
| Using the enormous amount of tools available in | | | | All that is left is to open the HTML file in an HTML |
| Photoshop, you create the actual graphics of how | | | | editor and add your content in the appropriate |
| you want the site to look. Add images to the header, | | | | section. You will then have a beautiful, eye popping |
| create dazzling text, all of that. | | | | web design, done almost entirely in Photoshop. |
| Make sure you leave a nice empty section in the | | | | Here's a tip: When you open the HTML page, make |
| content area. The initial Photoshop file will be around | | | | sure to center the layout and change the background |
| 400-500 pixels high, to allow space for a header and | | | | color to match that of your new website. |