Nov
25
2008

  Changing Colors Took Awhile

I've been tired of the spring colors on this site for awhile now, but I haven't been able to change them easily. I made my own "theme" for this site using the spring colors. The nice thing about Drupal (my content management tool) is that it is easy to switch between themes. Unfortunately, that doesn't mean it's easy to create different themes. I thought it would at least be easy for me to switch colors in my existing theme, but I was wrong.

I finally stopped procrastinating and decided to figure out how to change the colors. I had to make a new template in Adobe Illustrator. Originally I had the template all chopped up so the main piece of each layer was the right size for the individual .jpg bits I need for the site (for example, the part up top with my name and menu bar is one .jpg, the middle of the page is another, and the bottom part where the white section ends is yet another, and there are a few more miscellaneous in addition to that). But when I went to change the colors, I discovered that I couldn't get the drop shadows to line up correctly anymore, and the sizes of my bits were all wrong.

I decided to use the "help" function of the program (imagine that), and lo and behold, there was an entire section about how to best optimize your illustrator files for the web. Apparently, it is very common for website designers to have to chop up their graphics into bits to make them display correctly on the internet. Adobe Illustrator has this tool that "slices" your image into various parts, and then in one fell swoop you can export all the bits at once as many individual .jpgs or .gifs or whatever you need to optimize your website background images.

I've been using Illustrator for years, but primarily for good old fashioned print designs. I know all about settings for color separations, spot colors vs CMYK and stuff since I do send some designs to actual offset printers from time to time. But I have never used the "slice" tool before. So now I know what it's for, and more or less how to use it. I muddled through, and my exported images were off by a pixel here and there-- I have no idea why, I kept checking in the program to make sure I had the correct settings, but it kept cutting off a pixel with the slice. But overall I'm pretty pleased with myself for learning a new technique.

Once the graphic bits were ready, I still had to adjust the hex color codes in my css style file. I don't know how to use variables within my style sheet or even if it's possible; I think I vaguely recall that I would have to refer to another file completely for variables but I really don't understand it. So I just had to rather painstakingly go through the mumbo-jumbo and replace the #D1B78A with #C47E5A sort of thing, and I eventually got through it with only a little bit of trial and error.

Next time I want to change the colors (say, if I want to use new colors for next spring) I think I'll try to learn how to do global colors in my style sheet. One thing at a time. No need to try to learn everything at once.