Your Customers are Mobile, you will be too …

bandwidth

In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or CS5.5 development environment it can be used not matter what editor you are using. Even other levels of Dreamweaver can use this tutorial, even though major support has been added to Dreamweaver CS5.5 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

Photoshop CS6 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS6 but most versions have this capability and are all pretty simple if not exactly the same.

This process has been testing and works also on Adobe Photoshop CS4, CS5, CS5.5 as well as CS6. The process remains unchanged across all these versions of Photoshop.
Continue reading

Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.

In this tutorial we will show you the basic of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS5.5 development environment it can be used not matter what editor you are using. Even other levels of dreamweaver can use this tutorial, even though major support has been added to dreamweaver CS5.5 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.

Continue reading

Photoshop CS5 batch processing multiple images ready for the web

In this tutorial we will be showing you how to use batch processing to re-size an entire folder full of images you want to prepare for deployment on your web page. Rather than editing each photo individually, with one simple action we will change them all to 72ppi and re-size them all to suit your website. We all know we don’t want great big picture consuming a few meg of bandwidth each being re-sized by the browser. This is very bandwidth heavy so normally we would use Photoshop or Fireworks to re-size them etc. but when you are processing dozens or even hundreds at a time this can be quite tedious. This is where batch processing comes in. For this exercise I will be using Photoshop CS5 but most versions have this capability and are all pretty simple if not exactly the same.

Continue reading

In this tutorial we will cover how to rotate text using CCS3.This is a simple exercise designed to demonstrate how to use the transform:rotate CSS property and that unlike a lot of article floating around you can do angles other that 90, 180, 270 and 360(which would be pointless anyways). You can rotate text, images and other elements any direction and any angle you want.

Now while IE8 and down don’t have support for rotating things like text, IE9 does. And it does so without the annoying filters that we all hate. With the filters you could only apply one at a time to any given element, now IE9 has a -ms- propriety prefix like moz and webkit. Continue reading

As designers we sometimes come across situations in which we want to put a background in that consist mainly of a texture or a gradient with another image element or two that doesn’t repeat. Too often I see websites where this is done using either a large image larger than the common screen resolutions OR they repeat the background texture gradient and then place a div to hold the other image.

With the large image method this is an unnecessary use of bandwidth. It can be done better by having the background texture repeating as in the second method and using a second image (which we can use as you will see below)

With the second method the draw back to it is it can throw out a layout on different size screens particularly if you not careful. Even if you are careful this is still the long way to go round it and more time consuming than it should be. Continue reading

In this tutorial we will be explaining the best way to add a gradient to the background of any webpage element using a method that improves page loading times over other method you may currently use simply by using CSS3 (with fall backs of course)

As designers we all use gradients in backgrounds all the time. To add texture to our designs or make our menu button look fancy for example.

Up until recently this has always been done with images and the most effect method involved just a small slice of a gradient image repeated up or across the image we are adding the background too. However this method involves loading the image (bandwidth) as well the server having to handle the request to get the image (HTTP requests). If we can remove these request particularly for popular website with large amounts of web traffic we should really be trying to do so. Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: