Article Archive by Author

January 25 2010

Universal Selector in CSS


All browsers have built-in margins and padding for html and can impact the meticulous layout of a design. Browsers such as Internet Explorer, Firefox, and Safari may all render the spacing of the H1, p, ul, li,etc. differently.

To alleviate this problem and force the design to the margins and padding we specify, we must first set all of them to 0 pixels. This cancels out browser defaults. Now we can set our own heights and widths where needed. Below are two ways to accomplish this:

1.  List all elements of the html and set the margin and padding to 0 pixels like this:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {

– OR –

2.  Use the Universal Selector which does the same as above, but in much lest code.

* {

Keeping your code clean and simple can decrease file size and ensure your pages load quickly.

January 12 2010

Creating a 3D Catalog Graphic in Photoshop


In this tutorial, we will take a flat catalog image and create a more exciting 3D version.

Prepare your catalog image in a Photoshop layered file.

From the top menu select Edit > Transform > Perspective

Select the right bottom handle and slowing drag up a few pixels and you will see the perspective of the image change. When you get it to a similar angle as below, press Enter on the keyboard to accept the change.

Make a new layer. Select Layer > New > Layer

Select the Rectangular Marquee tool and draw a rectangular box on the left side of the image. This will be the spine of our catalog.

Choose a color from the Foreground Color picker.

From the top menu, select Edit > Fill
Make sure the Foreground Color is selected and click ok.

Your image should look like the one below.

From the top menu, choose Select > Deselect

Next, from the top menu, select Image > Transform > Perspective.

Select the left bottom handle and slowing drag up a few pixels, just like we did on the cover image. Press enter on the keyboard to accept the change. (If you have an actual image of the spine you can do the same technique to add perspective and align it with the cover.)

Lets finish it up with a nice drop shadow. Make a new layer. Select Layer > New > Layer

Select the Lasso Tool from the side tool bar and draw a shape similar to the one below. Control click on the PC, Command click on the Mac. Fill the selection with black and then deselect.

Now, let’s soften the edges of the shadow. From the top menu, select Filter > Blur > Gaussian Blur. Drag the slider until you achieve the look you want.

Adjust the opacity of the Layer to 15%.

Click and drag Layer 3 below layer 1 and you’re finished!



December 9 2009

The Basics of Optimizing Images for the Web


When it comes to the optimization of images for the web, it is important to know when, why and how to compress them. This short tutorial will help you get the most out of your images and will keep your file sizes smaller for faster page loads.

The main image compression formats:

Jpeg —use when compressing an image such as a photograph or illustration.

Gif — use when compressing images with flat color, such as a logo, chart or other graphic. A transparent background can be used with gifs, however, there will be a ragged edge of pixels around your image.

Png — use if a transparent background is required. Most browsers accept transparent pngs with the exception of Internet Explorer 6.

Compressing Photographic Images  


Original Image.


Jpeg at 70% quality.
File size: 13K
Very close to the high quality of the original and file size is acceptable.
Best option


Jpeg at 5% quality.
File size: 3K
Quality is unacceptable.


Gif with 256 color max.
File size: 26K
Good quality with some pixilation but higher file size.


File size: 93K
Great quality but file size too large.  


Compressing Flat Color Graphic Elements  


Original image


Gif with 16 colors.
16 colors were used instead of 2 because the pixels around the text are transitional colors to give the appearance of soft edges.
File size: 3K
Best option.


Jpeg at 50% quality.
File size: 6K
Poor quality, not acceptable.


File size: 5k
Good quality but larger file size.

You can clearly see from the above examples that optimizing your images correctly can make a huge difference in look and load-time. Stick with these examples as a guide to compressing your images and you’ll be up and loading in no time.


© 2019 MoreVisibility. All rights reserved