Interested in learning how to create great web pages using Adobe Photoshop? Obviously there are many ways to create websites. Some developers prefer to create separate graphics and develop their concept before moving into coding HTML. Increasingly more webmasters (like myself) are moving toward a more graphical & visual approach to the design and layout by using Photoshop to create an image and then using the software “slice” tool to “cut” the site into pieces of HTML code.
Before I discovered that Photoshop was capable of doing this, developing a website was a chore. I can now create a design and have it in code in less than an hour in most cases. Let’s break up the process in steps to make it easier. Most of my clients (like myself) are very visual people. I find it easier to start with a conceptual mock-up graphic when I design a Website, and these are the basic steps I follow every time I start a new project:
STEPS:
First, open your copy of Photoshop CS4. Based on your client’s notes and recommendations, create an image that mimics the general layout you’d like to use for your site. Be as thorough as possible. Work with textures and colors to keep the design interesting but to make your HTML code more useable, leave a wide open area in the “content” area of your mock. This is where you’re text, images, and other content will be placed. You should create the design to allow for plenty of room for content. This is most important since you don’t want to have to rearrange the layout and re-slice the site to accommodate additional content.
SAVE A .PSD VERSION OF EVERY MOCK YOU DO!
Once you have created an image that your client is happy with (this should be a final representation of the site itself), the hard part is pretty much over. With your .PSD file open, it is now time to “slice” it up for use on the web. For this part of the job, you will need to have a working knowledge of very basic HTML, particularly HTML tales. Using the “slice tool” (in CS4 it is located under the “crop” tool icon), drag out regions of the site you want to turn into HTML. Pay special attention to the area where your text content and navigation will appear in the site as you want to be sure you have plenty of room. You can always use “nested tables” to fill in gaps or align content later.
When you have the site sliced in Photoshop, choose “File” > “Save for Web & Devices”. Once you’ve done that, you’ll be taken to a tool which will allow you to alter the output settings of Photoshop. For your first time, keep the output in tables and the images as .jpg files. Once you get the hang of it, you’ll be able to work with more complex CSS and .png files to create more dynamic websites.
Click “save” (not the DONE button).
Choose (or create) a folder on your computer to place the sliced files in and name the file as you see fit (I usually name my sliced file index.html).
In the “save optimized as” dialogue box, hit the drop-down menu labeled “Save as type”. Because you’re going to slice out the HTML & images separately, this is the option you’ll need to select. If you skip this step, or forget to make a selection in the drop-down, you’ll have to start all over again.
To finish up, click “Save”. Depending on how large the file is and how slow your computer is, it could take as much as a few seconds to receive the sliced and exported files. If you open index.html in a browser, or an HTML editor, you should be able to see your finished design! Alter the tables further (by making images backgrounds or otherwise) to accommodate your content, images, and navigation structure to complete the site and go live!
