I’ve been too busy to blog but earlier in the week I had an opportunity to work on a web site design using Photoshop. I did not create a new design from scratch. I had to modify an existing web site design which was unable to stretch vertically or horizontally. The web site was using IFRAMES for the content area which created some problems with the cookie. The cookie was getting two email address values because the IFRAME page and the parent page where both setting the cookie. Using IFRAMEs is a terrible idea so I needed to modify the web site design to eliminate them.
First I had to create a sliced PSD of the original web site design because I did not have one. Then I used a copy of that PSD to erase some images that made the page difficult to split horizontally and vertically. That required a lot of tedious blending of the background color which used a gradient.
I learned a few new Photoshop tricks involving slices while working on this project. I disliked how the exported sliced images were numbered. This is terrible for search engine optimization because the file names are not meaningful. Also, you are unable to easily find an image in the images directory if they are all named the same except for a number. The way to avoid this is to right click a slice in Photoshop and select “Edit Slice Options”. You will then see a dialog box where you can change the name of the slice and enter the Alt tag. The name of the slice will be used as the file name when you export the design as HTML. You should definitely take the time to set those slice properties for the sake of organization and search engine optimization. This is the sort of detail that web designers too often overlook.
I also picked up a few tricks on controlling my slices which can be tricky. Just one pixel more and you wind up with an additional table row with a one pixel image. I learned to use layer based slices and I control my layer dimensions by inverting a selection and deleting everything except my selection.
