Kash-if Mushtaq

XHTML Challenge

XHTML Challenge is a freshly launched project by Valentin Agachi, which enables you to create challenges between two websites. The script will analyze the sites’ XHTML markups and return a report for the visitors to vote. The signup process and overall workflow is very simple. Within a minute, I created a challenge between Best Web Gallery and CSS Remix (see the challenge).

Read the rest of this entry »

Event: FITC Toronto 2008

If you are serious about your web career, don’t miss out on this upcoming festival in Toronto - FITC 2008. It will take place between April 19^th - 22^th. For those who don’t know about the festival, “FITC is now entering its 7th amazing year, and is the only festival of its kind; combining cutting edge technical and creative speakers from around the world”. The speaker list is endless, so I’m just going to list my favorite ones: Si Scott, Joshua Davis, Rob Chiu, Scott Hansen, and Julian Dolce (see full Speaker List).

Read the rest of this entry »

Photoshop: Hand Drawn Design

In case you haven’t noticed yet, the hand drawn style is one of the hottest design trends. There are several ways to create hand drawn images — you can create it from scratch in Photoshop or you can scan an actual hand drawn sketch. Personally, I like to use a scanned drawing because you get a realistic drawing texture. Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel.

Read the rest of this entry »

SEO Guide for Designers

According to a poll I conducted, just over 1 out of 10 people don’t think SEO (Search Engine Optimization) is mandatory as a designer; and what really surprised me is about 24% don’t even know what SEO is! If you’re among the quarter of people who don’t know what SEO is or understand how it can help you, you should really read this article. This is an SEO guide for designers who want to learn about making it easier for websites or blogs to be found by search engines. I’ll explain the common mistakes made by designers and developers. Then I’ll provide some basic tips that you should be practicing to optimize your site for search engines.

Read the rest of this entry »

Simple Double Quotes

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.

Read the rest of this entry »

Future of Web Design

Don’t miss out the hottest upcoming design event, Future of Web Design 2007, New York, USA. It will take place November 7, 2007 at the Javits Convention Center, New York (read the venue page for details). There will be numbers of great web designers sharing their thoughts on the future of web design. Some of the speakers include: Joshua Davis, Jeffrey Zeldman, Andy Clarke, Khoi Vinh, David Martin, and Elliot Jay Stocks (see the speakers page for more). The conference pass is $195 and student pass is just $50. Visit the Future of Web Design official site for more information.

Read the rest of this entry »

CSS: Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Read the rest of this entry »

Typographic Contrast and Flow

As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.

Read the rest of this entry »

CSS: Decorative Gallery

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

Read the rest of this entry »

Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

Read the rest of this entry »

CSS: The All-Expandable Box

In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it’s list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.

Read the rest of this entry »

Photoshop: Secret Shortcuts

It is proven that by using software shortcuts can boost up productivity. Here are 30 secret Photoshop shortcuts that I’ve learned from years of experience. Well, what I mean by “secret” is that these shortcuts are not documented in the menus. Keep reading and you will find how these shortcuts can speed up your productivity. I bet you don’t know all of them.

Read the rest of this entry »

Startdrawing.org

I recently visit this site, startdrawing.org, and I would like to recommend to you. They are a web portal that showcase the talented artists and illustrators in Asia. It is a great place to search for illustration inspirations.

Read the rest of this entry »

How to Design Mini Icons

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that used to create over 320 icons within a day.

Read the rest of this entry »

Copyright 2008. Kash-if Mushtaq. All rights reserved

• Home
• Who I Am?
• Contact