Working with Photoshop: Uncheck Embed Color Profile Save for Web & Devices

I’ve been working on my design portfolio this week and was, yet again, playing around in Photoshop. When designing a background image that is not plain white or black in Photoshop for your website, you want to make sure that you also set a background-color to take into account different browsers and sizes. If you set a background color, the image and the background color, no matter what the browser size, will seamlessly blend together. Your CSS should look something like this:

body {
    background: rgb(112, 255, 205) url('../Homepage.jpg') no-repeat;
    color: rgb(102,51,0);
}

The url finds the image, and the rgb or hex code is the background color.

As I was designing oogeeyot,(UPDATE 7/31:  I’ve totally redesigned the site, and it is no longer using these images) I noticed that the color in the image and the color in the background, although set to the same rgb value, were looking differently in Safari. The color discrepancy was not apparent in Firefox. Here’s how it looked before:

After doing a quick google search I found this thread to be really helpful. Basically, the key is when saving your PSD as an image file, uncheck the box that says Embed Color Profile. With an embedded color profile, Safari tries to read the colors from the image, rather than taking the picture at face value.

UPDATE:  Based on Ann’s comments below, and talking to other web designers, the best thing to do is Save for Web & Devices, choosing which GIF, PNG, or JPG fil you need for image quality.

XML and Resume Writing

When I was a first year graduate student at the ischool, I took a course called XML Foundations. At the time, the final homework assignment was to write your resume in XML, apply an XSLT transformation that makes HTML code and then attach a CSS. Well, I designed a CSS that I liked, so I stuck with that method to update and maintain my resume since then. Yes, that’s right. I write my resume in XML.

Let me back up and do some explaining for anyone looking for more information. Back in the day, the day being when I was an undergraduate, I would struggle using MS Word to edit my resume. There was a lot of spacebar, returning, tabbing, aligning, fixing the margins, etc. It was difficult to get the years to right align on the same line that the project was left aligned, etc. At the same time, if I ever decided to redo the look and feel of my resume, I would have to go through all of these struggles again. That’s where CSS makes your life easier. You can declare in the CSS that all dates should align right and all job titles should be italic. The CSS automatically does it all for everything your mark as a date, and everything you mark as a job title.

In my XML Foundations class I learned about separating the content from the design. XML is simply the wrapper for the content, and I believe its fairly easy to read. Here’s a sample piece of code:

<Education>
<higherEd>
<institution>University of California – Berkeley</institution>
<program>
<school>School of Information</school>
</program>
<degree>
<highestDegree>Masters in Information Management & Systems, Management of Technology Certificate, GPA: 3.67</highestDegree>
</degree>
</higherEd>

</Education>

You can read that this is the XML for my education at UC-Berkeley. Each “tag” that looks like <tag> is named in correlation with the piece of information it represents. So the <institution> is UC Berkeley and the Program > School was the School of Information. There’s a lot more explanation for this piece of code, but I’m going to leave it at that.

So, the advantages of doing it this way include:

1. I can easily redo the design of my resume without modifying the content (you will see examples of this later when I offer up multiple designs)
2. I can produce my resume in HTML which ensures consistent formatting (except for cross-browser problems – which I haven’t had yet).
3. I can easily post it on the web and share it with a link rather than passing an attachment around through email.

Index:

• XML: The content of my resume.
• XSLT: The transformation of that content to HTML.
• CSS: The design that makes it look like a resume, versus a magazine cover.

It’s a Busy Morning when You’re Tummy Hurts

I’ve been in bed now for about 5 hours.  I read 20 pages of my book, wrote a blog posting, upgraded word press, installed google analytics on my blog, and now I’m changing the theme.  I’m trying an out-of-the-box theme for this month before I go and write my own CSS.  I think I should focus on my dev sandbox and portfolio for the month of January.

Making Your Website Look Pretty

Making this blog look pretty can be easy, or you can make it a little harder (more interesting, but harder). Fortunately, this is part of what I do for a living (especially last week at work). Let me introduce you to the technology called Cascading Style Sheets (CSS). All you need to know right now is that CSS makes the web look pretty. Once I get an idea of what I want my blog to look like, I will post more on how to do this with the WordPress out-of-the-box (OTB) HTML code.

But, it’s Christmas Day, and I feel like lounging. Enough tech-geekiness for today.