Archive for the ‘graphic design’ Category

Class 10 – Favicons

Saturday, December 5th, 2009

Favicons are the little icons that show up in the address bar of the web browser for some websites. For example, the favicon for blogger.com is the little orange square with the B in it.

Favicons are totally optional, but a well-designed favicon can add a slightly more sophisticated feel to your site, even though the user may not ever realize it is there.

So of course, you will want to create a favicon for your own sites. Favicons are 16 pixels wide and 16 pixels tall.  They are saved in a special .ico image format that is not natively supported by graphic design programs like Photoshop. This article has a good explanation of how to download a Photoshop plugin that lets you save favicons in .ico format using Photoshop.

If you don’t have Photoshop, you can still create favicons by using a variety of website services that convert standard .jpg, .gif, or .png image files into .ico format. For example, here is one such site.

To use your favicon once you have created it, make sure the file is named favicon.ico, and put it in the root folder of your website. Then add the following code into the <head> of your XHTML code:

<head>
  ...
  <link rel="shortcut icon" href="./favicon.ico" />
  ...
</head>

Tags:
Posted in graphic design, xhtml | No Comments »

Class 3 – Homework Assignment

Friday, March 6th, 2009

I just realized that I haven’t yet made an “official” post about the homework assignment for this week, but you all are no-doubt already working on it.  For the record, the homework this week is to convert these two design comps into actual XHTML and CSS code:

Design comp for BlackBook Guides app

Design comp for BlackBook Guides app

Design comp for MTV Music Videos app

Design comp for MTV Music Videos app

All the images you will need for each design are in my folder under class3/assignment2/images/ and class3/assignment1/images/.  Please make a copy of these images and use them in your own pages.

Try to get your pages as picture-perfect as possible.  It might help to use the trick of placing the actual design comp as a background image behind your page as you work on it.  This will allow you to easily compare the placement and size of the elements you create in code on the page with those that were originally in the actual design comp.  The former will be superimposed over the latter.

Tags:
Posted in assignments, css, graphic design, xhtml | No Comments »

Class 3 – A Tip When Working With Design Comps

Saturday, February 28th, 2009

As you work on the in-class assignment today, you will find that you constantly need to compare your work in XHTML and CSS with the original design composition (called a “comp”) to make sure the widths, heights, and styles of each of the elements matches those in the design comp.

There are several ways to do this.  One easy way to do this is to apply the original design comp as a background image to the container div.  That way, as you are working, you will constantly have the original design comp as a backdrop to your page.

Here is an example of applying the design comp as a background-image to the container div.

You will want to check out both the XHTML and the CSS files.

Tags:
Posted in css, graphic design, xhtml | No Comments »