Hints, Tips And Tricks For Web Design Part 2: Production Techniques

Now that you have understood how to go about starting to design your site, we will now look at a few production techniques that will help you get your project going. Be it an e-commerce site or your portfolio, understanding these techniques from Part 1 and Part 2 will help beginners sharpen their skills and knowledge, and for the experts, it is always good to refresh your memory.

Production Technique

Tip 1. When to use GIFs and PNGs

Animated GIFs can get BIG

Each frame in your animated GIF can add as much to the file size as a regular static GIF. So a 10-frame animation could be 10 times bigger than a regular GIF!

Image Formats with Transparency

Both GIF and PNG formats support some level of transparency. With GIFs the transparency is quite crude, but the format is very widely supported. With PNG, the transparency is much more controllable, but older browsers do not support it.

Browsers that support GIFs

Virtually all web browers support this file format.

Internet Explorer 5, 6, 7, 8, FireFox, Chrome, Safari, Opera

GIF Transparency

Photoshop GIF

GIF Transparency is “binary”. In other words, the transparency is either on or off on certain parts of an image. It works well for simple shapes where the background colour roughly matches the image, but you can’t create subtle image-fading effects using GIFs. In these cases, PNG might be a better option.

GIF is best used for bitmap images, line art, or images with large areas of solid colors.

  • Colour depth from 1-bit (2 colors) to 8-bit (256 colors)
  • Supports transparency
  • Supports limited animation
  • File sizes are typically 20%-90% of original size

Browsers that support PNGs

Some old web browsers do not support PNG transparency. The really old ones don’t support PNG at all. Browers that support PNGs- Internet Explorer 7, 8, FireFox, Chrome, Safari, Opera

PNG “alpha” Transparency

Photoshop PNG

PNG files support “alpha” transparency. This format has an extra colour channel in addition to the usual red, green, and blue (RBG), known as Alpha Channel. This channel contains gray scale data where the shades of gray relate to the transparency (or opacity) of the image, allowing very subtle fading effects to be used.

PNG4 format was developed as a successor to the GIF, and was intended to replace it. However, its adoption has been slow and all its features are not supported by all browsers.

  • Colour depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)
  • Support for alpha channels with variable transparency
  • Support for cross-platform gamma correction
  • Support for interlacing
  • Typically compresses images 5% – 25% better than GIF
  • Note: Export your images as PNG for flash animation.

Tip 2. Using the Divine Proportion for your Layout

As strange as it sounds, maths is beautiful. I’ve never thought so in high school, because math was so inflexible and often boring. Until I started designing, I was surprised to find out that most aesthetically pleasing designs, works of art, objects and even people have math in common. We perceive visual appeal based on ratio (i.e. The Golden Ratio).

For thousands of years artists, designers, architects, etc. have either intentionally or unintentionally used a common ratio in their work that is aesthetically pleasing.  The Golden Ratio, also known as the Divine Proportion, is designated by the Greek letter Φ (phi). It is the magical irrational number 1.61803 that makes all things proportioned to it and aesthetically pleasing.

So how do we apply this concept to your layout?

Divine Proportion

Isn't it pretty simple? This proportion is all about balance. Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition.

Tip 3. Batch Processing in 3 simple steps

When you have a lot of images to process (e.g. resize or convert to JPEG format) you should consider using batch processing techniques. They can take a bit of trial-and-error to master, but it’s time well spent, especially if you have dozens of images to deal with.

Photoshop has some extremely powerful batch processing techniques. They are based around “recording” the user’s steps while work on an image, allowing them to “replay” those same steps on another image.

Step 1

Photoshop Actions

Open an image in Photoshop and open the Actions tab, under the Window menu. Add a New Folder, rename it to “Resize”, create a new action and give it a name. Click on the Record button, go to Image > Image Size > change width to 800 px. (You may change the width to other sizes.) Notice that a new line (Image Size) has appeared in the Action window.

Step 2

Photoshop Actions

With the Record button still on, go to File > Save for web (Ctrl + Shift + Alt + S). Select compression level, click Save. Create a new folder to save the resized images inside. It will retain the same name without the fear of overwriting the original. That’s why we created the new folder, and it also allows you to return to the original if you are not happy with the results.

Step 3

Photoshop Actions

Close the image, but don’t save it! Press the Black square Stop button, beside the record button. Now you have an Action that you can apply to any image. Simply open an image, select Action and click Play button. Magic!

Resizing in Batches

Make Photoshop work wonders for you in Automation > Batch

However the real fun begins when you run the Action on a whole folder full of pictures, sitting back and relaxing while Photoshop tears through tons of photos that would take you all afternoon to do by hand! Start by selecting File > Automation > Batch

Choose your Action from the drop-down near the top of the dialogue box.Select the directory of the source folder. You may need to select “Suppress Colour Profile Warnings”, depending on how your system is configured.

Photoshop Batch Actions

Under Destination choose Folder. Click on Choose and select the folder that you want to save the processed images in.

The file naming options section allows you to apply some quite complex naming tricks if you require them, but we’re going to use the same file names as the originals because we’re saving into a different folder. Click OK button and sit back.

You should see your new folder rapidly filling up with images as Photoshop does its thing. It will get through hundreds of images in minutes and it’s such a joy to watch all that hard work happening without you doing it! If the batch stops for some reason, step back through the process to figure out the problem. Bear in mind that I never got Actions and Batches to work correctly the first time, so don’t be too discouraged; it’s really worth getting to grips with it.

That’s it for Hints, Tips And Tricks For Web Design Part 2: Production Techniques. We have another post related to this article  -  7 Photoshop Tips and Techniques To A Polish Web Page. Do give it a read too.