You are browsing through Design
Friday, May 14th, 2010
Recently I needed to work with some Chinese and we had tons of trouble trying to figure out which fonts to use and how to specify them in CSS. After a lot of detective work and comparing long font lists we found some basic font choices that should work on both PC and Macs that have Chinese language packs active. I want to archive them here just in case I need to reference this ever again since it was PAINFUL…
Some Chinese Website tips:
- Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters. font-family: futura, arial, Hei, “Microsoft YaHei”, “MS Yahei”, “宋体”, sans-serif;
- Standard chinese sans-serifs are: Hei, HeiTi or “Microsoft YaHei”
- Standard chinese serifs are: “Fang Song”, or “宋体”
- Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=”utf-8″>
References:
Tags: Chinese, fonts, Tutorials, webdesign
Posted in Design, Tutorials, cs, css, programming, solution | 5 Comments »
Tuesday, July 7th, 2009
I have a question to poll the audience: If you were to create a new Web design intro class, what would you teach? There were plenty of holes in my knowledge left to fill after my first class (still are plenty of them), but what would you propose adding? Here’s my take on an intro web design class. Do you have anything to add/remove? Let’s be brutal!
(more…)
Tags: courseoutline, Tutorials, webdesign
Posted in Design, proposal, website | No Comments »
Monday, June 1st, 2009

I finally decided to try my hand at the music album cover design challenge. The rules make it so that you get a random picture, band name and song title and then design a cover for such a selection. Ivan describes the exact rules in his post.
Here is my cover art for Pogonomys Championi, playing their hit single, “homework formerly eaten by the dog”. I liked the idea of pairing the light quirky background with the dark silhouette of a laughing dog. I tried to convey indie rock band with mayan flavor. The band logo is of course their champion mouse.
References: Pogonomys Chamioni is a tree mouse. The song title is a quote from Doug Larson, “Home computers are being called upon to perform many new functions, including the consumption of homework formerly eaten by the dog”. Original Photograph by ATLITW.
Tags: band, cover, drawing, fun, photoshop
Posted in Design, sketch | No Comments »
Sunday, May 3rd, 2009

Here is a simple way to get a letterpress effect in Photoshop CS3 and above.
To summarize, you apply a bevel and emboss layer style to the area around the ‘imprinted’ art. For this tutorial, I will show how to make the effect and then use smart objects to warp it non-destructively. (more…)
Tags: cs3, Design, effect, letterpress, photoshop, Tutorials
Posted in Tests, Tutorials, photoshop | 11 Comments »
Monday, December 15th, 2008

Here’s something I’m proud of: A card with 12 images on it. What does that make this? a dodecatic? whatever. Just a fun(?) exercise. I remember making things like this in school.
Tags: exercise, practice, school
Posted in Design | No Comments »
Tuesday, November 11th, 2008
I should be asleep now but I was having too much fun sketching in photoshop… Just a reminder to everyone to have fun every now and then.

Tags: fun, photoshop, pikachu, pokemon
Posted in photoshop, sketch | No Comments »
Tuesday, August 19th, 2008

I have no idea how this happened. Somhow the png got really messed up…
Tags: corruption, photoshop, picture, png, saving
Posted in Design, photoshop | No Comments »
Friday, May 9th, 2008

Saw the movie- I thought it was really good and decided to spend a bit of my free time sketching. Is it me or does iron man’s mask thing make it look like he’s frowning all the time?
Tags: drawing, ironman
Posted in sketch | No Comments »
Wednesday, May 7th, 2008
Ok. Here’s a quick tip on how to make your stage transparent in flash.
- Go to publish settings: File > Publish Settings or Shift + F12
- In the HTML Tab, Find the Window Mode setting and select Transparent Windowless from the drop down menu.

Source: Adobe’s tech help site
Tags: Flash, stage, transparent
Posted in Design, Tutorials | 1 Comment »