I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).
The Frontend conference I spoke at last year is hosting again this year in Oslo, Norway between October 10-12th — Frontend 2011 (@frontend_conf). Unfortunately, I won’t be attending this year. However, I have a free conference pass to giveaway. To enter the contest, all you have to do is write a comment about your thoughts on the event in this blog post. The contest ends on August 19th, 2011. Then a random winner will be drawn from the comment list.
In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. So what are the options for implementing web fonts? I’m going to review the three main methods of incorporating @font-face and explain the pros and cons of each method.
Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn’t, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.
Four of my illustrations (Koi, Peacock, Abstract Pheonix, and Japan 11-03-11) are now available at Society6 for sale as print media. They are available as: sketched canvases, posters, T-shirts, hoodies, laptop and iPhone cases. Society6 offers high quality printing on fine material. Or if you are looking for inspiration, check out the website for awesome art works done by artists around the world.
Let’s face it, ask most designers what their dream project would be and I bet none would mention designing and coding HTML Email. Designing email has a special place in my heart and I am excited to communicate with people through this challenging medium. So here’s 5½ improvements you might consider making when you revamp or greenfield your next template.
Note: This article is a guest post by Josh Rubinstein.