Article Archive by Author

January 25 2010

Universal Selector in CSS

by

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 {
margin:0;
padding:0;
}

– OR –

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

* {
margin:0;
padding:0;
}

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

by

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

by

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  

photo-original

Original Image.

photo-jpeg70percent

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

photo-jpeglowquality

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

photo-gif256colors

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

photo-png

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

 

Compressing Flat Color Graphic Elements  

free-gift-original

Original image

free-gift-original

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.

free-gift-50jpeg

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

free-gift-png

Png.
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.

 

© 2018 MoreVisibility. All rights reserved