Posts Tagged ‘Tutorials’

Chinese language tips for web 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:

  1. 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;
  2. Standard chinese sans-serifs are: Hei, HeiTi or “Microsoft YaHei”
  3. Standard chinese serifs are: “Fang Song”, or “宋体”
  4. Set a meta tag to display chinese charset: utf-8. <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=”utf-8″>

References:

A dream web design class

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…)

Photoshop CS3+ Letterpress Tutorial

Sunday, May 3rd, 2009

letterpress tutorial finished

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…)