How to alternate table row colors

Just had to share a snippit. I have been trying to alternate row colors globally and haven’t had luck in IE with this bit of CSS

tr:nth-child(even) {
    background-color: #ccc;
}

It doesn’t work in most IE browsers and then I found this bit of jQuery and it seems to work like a charm!

$(document).ready(function()
{
  $("tr:even").css("background-color", "#ccc");
});

[button link=”http://www.losmedanos.edu/directory/” color=”orange”] Check it out[/button]

 

Business cards and online galleries

Business cards and online galleries

Today I want to talk about two really cool sites – one for business cards and the other for online photo galleries.

 

The fist is moo.com. Hmm well the name doesn’t really say it’s all but their product says the rest! I had never heard of them before until I attended a wacom webinar where they were talking about making “portfolio in your pocket” using photoshop tips, a wacom tablet and the printfinity pack from moo.com. They aren’t your average business cards where you have the same image on every card. You can have every card have a different image on one side in full color and your calling information on the back also in full color.

They are higher priced for your average business card but when I got them in my hands I thought they were extremely well priced! I didn’t expect such good print quality and heavy durable card stock all made from sustainable forest. Below is the picture of ones I test printed!

Read more

Native plant sale in Pittsburg CA

If you’re looking for some California native plants the nature preserve at Los Medanos College (a certified schoolyard habitat) is having a plant sale on March 27 and 28th. If you aren’t sure what you’re looking for I developed a plant ID slideshow to help you know what is what. All photographs were taken and identified by the caretakers of the center. Click the image below to visit the website. Plants range from $1 – $7.

 

Metal up your type

Metal up your type

The purpose of design is to communicate a message and therefore I believe special effects should be used only if there is a reason to use them. This means it’s probably rare that you’ll need to create metal type but as a designer you should know the concept of how to do it even if you’ll only do it once in your career.

Above is an image of a banner I did for our college website to congratulate one of our star alumni who played in the Superbowl. To match the emblem for the Superbowl it called for some silver type.

In addition to that I needed to remind students it was time to submit their applications for graduation. Both were going to be shown on the same page so I thought the gold and silver would compliment each other and contribute to the overall message that each was trying to convey.

Below are the settings I used in Adobe Photoshop CS5 to get both the gold and silver effect. You’ll have to vary it a little depending on your type face and point size. This will just give you and idea so you know how to shape the metal to your specifications!

Silver type

Type something. It doesn’t really matter the color or the type but in the case above I used Trajan and black but you can use any color. Then click on the layer style effects at the bottom of the layers palette and apply the settings for the various blending options:

For Gold type just add a gradient overlay for the gold color:

The color I used here is #cfa51a and #fff6b8 for the light color

 

 

 

Google web font plugin for Photoshop by WebINK

A little while back I posted about free web fonts from Google and how I used them in a small project.

I found a nifty free little plugin for plugin for Photoshop CS5 from WebINK that allows you design with Google web fonts right inside Photoshop CS5.

First create an account with WebINK and download their plugin. Once downloaded you’ll activate it through Window > Extensions > Extensis. You will have to sign into your account.

Once loaded you will get a list of all the premium WebINK fonts but you can switch and from the drop down menu to choose some of the free Google web fonts from the list. Google doesn’t have as big a variety as WebINK and you can’t get perhaps the exact font you want from google but now you have choices.

What helps is a visual picture of what they look like. To select you must not be in the edit mode of the type. Just select the layer with the type and choose the font. The plugin will treat all type on that layer with the font you choose. This really helps when designing to actually see what the font will look like. Below is a screen grab of just how easy it is to select.