image

A common web design pattern is to incorporate an image into the design of the page. This creates a tighter integration with the image and the rest of the page.

The main issue in designing a page around the image is that the colours of the page must match the image. Otherwise this creates a dissonance between the image and the styles of the site.

In this article I will look at extracting a colour palette from an image so that it can be used in the design of a web page.

I was watching a video from NDC by Dylan Beattie the other day on The Story of Typography and a particular section stood out to me.

The talk ranges from the initial start of writing symbols to the formation of typography as an art form and the creation of eInk displays. Well worth a watch if you have some time to spare.

The part that was interesting to me was then discussing early word processors and the ASCII character standard. Early word processors couldn't store the amount of data required to fully render a font, so characters were rendered using a bitmap system.

A parabolic curve is a type of curve where every point is an equal distance from a focal point. There a number of different way to generate this sort of curve using math, but one of the simplest is to use straight lines to create the illusion of the curve.

The curve is created by diving two axis into equal points and then drawing a line from the first point on one axis to the last point on the opposite axis. Each line of the curve is drawn in the same way, repeating the process of drawing a line between opposite points for every point along the axis.

To desaturate an image means to remove all non-greyscale colours from it, essentially creating a black and white version. To do this you can use the function imagecopymergegray(), which is part of the GD image library. This function is a little difficult to figure out, but what is does is sample one image into another and optionally changing the amount of colours that are kept during the sampling process. The function can be made to sample just a section of the image, or the whole thing. The parameters of the function are as follows.

Use the following snippet to convert any jpeg image into the equivalent image in ASCII format. It works by loading an image using the PHP GD2 library function ImageCreateFromJpeg() and then figures out the height and width of it. It then uses these values to loop through every pixel in the image and figures out the colour of that pixel. It uses this value to create a "span" element that uses the text colour of a # to change the colour of the text.

An additional time (and space) saver for this function is that it detects any pixels that are just off white and simply displays a   character instead.

One thing that comes in useful when linking to other websites is to use a little thumbnail of the site as part of the link. Although it is possible to do this it usually involves having command line access to the server so that you can install various different programs and extensions.

The simplest mechanism accomplish this is to use third party sites to create the thumbnail for you. Here are a few examples of free thumbnail services.

www.thumbshots.org

Thumbshots provides access to small images (thumbnail size) of many different websites. However, they are very small, with no way to change this, and can often be weeks out of date if the site has had a redesign. You can access Thumbshots from any webpage by using an image with a source that reads from the Thumbshots website.

The Exif/IFD0 functions in PHP work with images to pull out meta data associated with them. Most image applications and digital cameras will produce an image with a certain amount of meta data present. This is obvious stuff like file size and creation time stamps, but you can also get stuff like copy right notices, camera name, date picture taken and even things like location if the camera was linked to a GPS system. This meta data can be used to sort or categorise images.

Installation

On Linux systems you must configure exif support with the command --enable-exif when calling the configure script.

On Windows all you have to do is uncomment the lines in your php.ini file for the DLL's php_exif.dll and php_mbstring.dll. However, you must ensure that the php_mbstring.dll DLL is loaded before the php_exif.dll DLL. So you will need to edit your php.ini file so that php_mbstring.dll is located above php_exif.dll.