Color Depth / Alpha Channels
No Reply
January 31st, 2008
Datis Design Weblog
Designing for Communicating
Color depth is number of bits per pixel that can be displayed. Every bit can have 2 value 1 and 0. The more bits in a pixel will represent the more color. For example a 1 bit color image can have only two colors, 4 bit color image can have 16 colors, 8 bit color image can have 256 color, 16 bit color image can have 16,777,216 colors and so on.
Each channel in true color image has 8-bit color depth. For example RGB image have 3 x 8-bit color which will be 24-bit image. A CMYK image will have 32-bit color because it has 4 channels.
Alpha channel is 8-bit channel, which you can use them to show images through them. They can have values from 0% which is fully transparent and 100% which is fully opaque (Or we can tell because it is 8-bit channel it has 256 range of colors, so 0 is transparent and 255 is opaque).
Because Alpha channel will use another channel, when we use it in RGB image it will become 32-bit image (24bit + 8-bit), and it is known as RGBA (A for Alpha channel).
Pixel Dimension
First of all we need to know what is pixel dimension ?
Pixel dimension is total number of pixels in both horizontally and vertically. For example an image with 640px width and 480px height has 307200 pixels in total.
There is another concept named DPI (Dot Per Inch), for example you have an image with 15″ x 10″ with 300dpi, pixel dimension for this image will be
15 x 300 = 4500 pixels in width and 10 x 300 = 3000 pixels in height, and total pixels in this image will be 4500 x 3000 = 13500000 pixels.
Read More
Images in computer world fall into two categories, Vector images and Raster images. Programs like Adobe Photoshop can create Raster graphics and Adobe Illustrator can produce Vector graphics.
But what is the difference ? Read More
Maybe you have heard CSS box modeling before, it is a simple concept. Look at this picture :
As you see in this picture, the orange box is our content, taken its space, if we gave it padding, it will appear like the green box in image and add space between our content and its border, then border will appear and take space as you see the blue border in the image, then margin comes and add extra space to it, the space between blue line and white dashed line.
In nutshell, padding is space between content and its border, or it is space inside content block. Margin is space outside the content block.
The whole width or height will be margin + border + padding + content. So when you are designing with CSS always remember the box modeling.
Nowadays it is recommended to use Semantic HTML and CSS to create structure for a web site. It is very good to create navigation system based on CSS and style it as we like, so if users turn off the styles or can not use the styles for any reason, then they see the navigation easily.
So in this simple CSS tutorial I am going to show you how to use HTML lists with CSS to create a horizontal navigation.
Read More
Maybe you had this problem before, You have designed a web site and wanted to see it on different browsers, especially when you have installed Internet Explorer 7 and wanted to test it on Internet Explorer 6, because as you know there are many users that still using this version.
I have searched many times, some says that you should install Virtual PC to run a separate version of Internet Explorer. But I have found a simpler solution for designers and developers !
I have found a software that can install all version of Internet Explorer in one package ! Multiple IE can do it for you ! I have tested it and find it useful. Hope it will be useful for you too…
In this tutorial I am going to tell you how to create a clock with Adobe Flash Actionscript programming, you need to know some basic level knowledge of Flash and Actionscript programming to fully understand this.
Create Graphics
First create a new file in flash (AS 2.0), We need 4 movieclips, one for clock body, one for hour hand, one for minute hand, one for second hand and one for clock body. Also we need a text box for showing the time. Create some graphics as you like and convert them to movieclips, you can see this picture for example :
Please note that when you are converting your graphics into movieclips, choose the right registration points like the picture that I showed you.
Read More
You can install PHP on Windows machines (98,ME,NT,2000,XP,2003,VISTA) with Apache and MySQL.
But on Windows 98 and ME you may have some problems with Apache.
In other way you can install these all in one packages :
WAMP (Windows, Apache, MySQL, PHP)
Block elements always arrange vertically, that means they take whole page width for themselves.
Inline elements always arrange horizontally, that means they take space as their width.
To control this property of elements we can use Display property :
- display : inline; arrange element in inline format
- display : block; arrange element in block format
- display : list-item; arrange element in list format (<li>)
- display : none; won’t display element
- display : inherit; element will inherit property from its parent
CSS Rule
Selector defines which element should be styled.
Declaration Block is always inside { } which includes Property and Value.
If you are using Inline Style the you should apply the style like below, you can add as many styles as you want and separate them with semicolons. For example :
<p style="color:blue; font-size:12px;" >This is paragraph</p>