Design For Quality

The format GIF’s can be transformed to create a transparent background or element to the image, meaning a background colour or image of the website you are using your GIF files on can be seen through the particular areas which you define to become transparent. To create transparency first you need to –

1.) Open the image that you would like to add transparency to, if the image has already been highly compressed to prepare for use on the web when you zoom into the image you will notice all the pixels are distorted around the edges, pixilation will be especially high if the compressed image was originally saved as a highly compressed JPEG format. If the image was originally created in Photoshop and saved as a PSD then pixilation wont be a problem but if the image has come from another source then it will more than likely have this problem.

2.) Before you can start working on the image you will need to get rid of all the extra dots around the edges so you can make a clean selection around the image itself, the cleaner the edges of a image the easier it will be to later get a perfect selection with the Magic Wand Tool. The same applies if your image is part of a larger image; everything surrounding it needs to be removed

3.) Using the Zoom Tool zoom into your image so you can see all the edges clearly and then use to Eraser Tool to remove the extra pixels from the edges of the image, including any extra white space, the more precise you are the better your final transparent GIF will be, especially if your final outcome is going to be placed on a contrasting coloured background.

4.) Once you have cleaned up your image use the Magic Wand Tool to select the white space around your image and you should have a perfect selection around the white space (non image) area of the document, drag this layer onto the New Layer Icon and this will make a copy. Select the new copy of the layer and press Delete which will remove the surrounding white space, then click onto the background layer and go Select > All > Delete, click on the eye icon on the background layer and this will hide the layer and show you the transparent areas – CTRL & CLICK on the new layer and your selection will appear back around the image.

5.) In Channels make a new channel and fill the selection of the image with white, then press CTRL & D – this will deselect.

6.) Return to the layers palette to make your image layer active, go to Image > Mode > Indexed Colour and click OK, then go to File > Export > GIF89a. A drop down will appear called Transparency from, choose Alpha 1 and you should see your image turn greyed out in the preview, showing the areas which will be transparent, click OK and then test your image on your web page. 

Graphic images do not normally have a continuous tone unless a gradient has been used within the graphic. Graphics are drawings are not like photos plus they usually use few colours, less than 16 colours in the whole image. In a colour graphic cartoon, a particular area of colour will use one shade, where as in a photograph there may be numerous shades of one colour.

A map is produced using graphics and only uses 4 - 5 map colours plus 1 - 2 colours of text and then blue water and white paper, so these types of graphics use less than 16 colours, Graphics like this are ideal for Indexed Colour.

The TIFF file format is the best image file to use when best quality is required, and this is why the TIFF is common in professional and commercial printing environments. High Quality large JPG images are also good too, but they can be ruined if they are made too small. The 2D digital image is split into two parts, images know as ‘bitmapped’ are usually used in image making programmes such as Photoshop or painting packages, bitmap images are usually made up of rectangle picture elements known as pixels and each pixel is a colour, if the image is enlarged you can see these pixels and the image appears jagged, this can be improved by increasing the number of pixels per inch, known as a higher resolution image.

The other part is known as a ‘vector’ image and these are used in drawing and illustration programmes like Adobe Illustrator, a vector image is made up using lines and shapes, if the vector image is enlarged the quality will not degrade and the smoothness of the final image is only determined by the output device used to print the image.

There are four most common image files which are used in design today, these being – JPEG, GIF, TIFF and PNG. These image files have their own individual ways of storing colour modes. A JPEG image using RGB mode will store 24 bits per pixel or 8 bits per pixel in Grayscale mode.

A GIF image file provides indexed colour at 1 or 8 bits per pixel. A TIFF image using RGB mode will store 24 or 48 bits per pixel or 8 or 16 bits in grayscale mode and at indexed colour holds 1 or 8 bits per pixel. A PNG image file using RGB mode will store 24 or 48 bits, grayscale 8 or 16 bits and indexed colour 1 or 8 bits.            

Photographic images usually have continuous tones within the image, this means that pixels that are positioned close together usually have similar colours, and for example, a photo of green grass will contain numerous shades of green. A JPEG photographic image is usually 24-bit RGB colour, or 8 bit grayscale, and a typical colour photograph may contain around 100,000 colours, out of the possible set of 16 million colours in 24-bit RGB colour.  

Website pages require JPG, GIF or PNG image types, because that is all that online browsers can show. JPG is the best choice on the web for photo images as it is the smallest sized file and website pages tend to use the GIF format for any graphic images e.g. logos or line art.                         

This tutorial is to help you learn how to create a silhouette from a photo that didn’t quite have the right exposure for it, or to create a silhouette from any photograph that you would like to have the silhouette effect.

If a photo was supposed to come out as a silhouette but it was a little too overexposed this technique will work well for any photo that has a bright light source in the background.  The tutorial is for work that is being done in Photoshop.

1. First you need to open up your image in Photoshop and then create a new layers adjustment layer (Layer   - New Adjustment Layer - Levels).

2. Adjust the outside sliders so they fit the whole color range. 

3. Adjust the exposure so it is more balanced and on the verge of being a silhouette. 

4. Create a New Brightness/Contrast Adjustment Layer (Layer - New Adjustment Layer - Brightness/Contrast).

5. Decrease the Brightness and then you need to increase the contrast, usually the number that works best for this is roughly around 40.

The process and the amount of adjustment that needs to be made will be different for other photographs, but once you have got used to this technique you will get a good idea of which level of settings work best and create the most realistic silhouettes. 

Before machines became so advanced and mechanical reproduction was introduced, duplicates of art works high in demand were made by being copied by hand, the artists would sometimes create numerous versions of a painting or made very similar replicas, but the usual occurrence would be that students, apprentices or assistants produced the copies.

Handmade copies were using just as sort after as the original, but there were obvious drawbacks to this technique being the artist would have to pay the person who produced the copies a good wage, so it was expensive, time – consuming and involved hard labour. And still there is only a few of the copies made and they were never exact but usually just a translation or an interpretation of the original.

The need to multiply an image or a design has become more popular as the design world and industry has developed, it is hard to believe that people would actually sit and reproduce the same thing over and over by hand now we are living in a world full of high quality colour printers and photocopiers, we take for granted the easy method of reproduction, you can scan a piece of work into a computer and print it 1,000 times over in a matter of a few minutes.

This also is a example of how the digital era is making us as human creatives lazy, and the appreciation of an original piece of artwork or design is becoming almost unheard of due the fact artwork is repeatedly reprinted in art books, on canvas and even onto cups and mouse mats, all these factors result in loosing the ‘special’ element of seeing the artwork. 

With digital reproduction becoming more popular is any work actually produced as a ‘one off’ anymore? Pieces of contemporary fine art which have survived for hundreds of years still do exist but alongside thousands of images which are produced and then reproduced with the aid of machines.

Fine Art and contemporary pieces are now available for everyone to view, one form of this being the introduction of the internet, another development in technology, where you can just type in a name of a piece of work and it appears there in front of you on screen, you don’t have to go and visit a gallery or a museum, although sometimes it takes seeing the original piece there in front of you to appreciate just how special a ‘one off’ piece or original is.

There now appears to be a secondary system of recording where artworks can be reproduced and put into books, journals and magazines, shown through moving image in the form of films and television shows, advertisements and replica’s of sculptures sold at museum shops, art is available to more people than ever and in many more forms than the original due to the development in technology. 

The digital revolution which is continuously taking place all the time has made it possible to encode any information which makes up a image, sound or a piece of text, so anything can be broken down and taken ‘back to basics’ due to the development of technology, clever use of technology can make it possible to manipulate, break down or connect any electronic images, sounds or texts.

This digital revolution makes grids, colours, formats and typefaces easy to process and then store and then these could be broken down and joined together with other pieces of information. As this evolution of technology continues more devices are produced which supports the electronic screen, which leads to more possibilities for information to be exchanged and re-produced, the sound of something can change e.g. a tone of a voice can be changed or modified so it is mixed with another voice.

Images can be broken down and put back together using parts of other images and photographs can be changed by manipulation if the pixels, the impact of electronic procedures are continuing to change the original outcomes and the culture of visual and verbal communication. 

In the world of writing and the media, objects of design and design works have created opportunities for the construction of books and essays and developed the use of verbal as well as visual communication. This not only being the actual writing itself but the punctuation which comes with pieces of writing e.g. paragraphs, symbols, pauses, silences, comma’s, question marks, brackets, visual signs all relate back to design in some aspect even though they are part of verbal communication.

Writers verbally communicate using a typeface that was once designed in order for them to be able to write, the entire processes of visual and verbal communication link in together and compliment each other, different grids, typefaces and symbols in a piece of writing are important for their formal qualities but also play a symbolic role and help us to regulate our interpretation of the text as we read.

All of these aspects used in verbal communication have been produced by a designer to visually communicate within everything from magazines, books, journals, dictionaries and encyclopaedias, and as the development of design and types of media used continues to progress, these graphic symbols are also being seen on corporate images, posters, television and the internet. 

Graphic designers and artists have been visually communicating for many years, their work has been made up from their own opinions and imagination, which they introduce socially by displaying their work – bearing their soul, this then leads to the work being structures of thought, interpretations made by critics and a source of discussion.

The visual nature of a piece of work is mostly what makes it culturally important, this is why images are so widely used to communicate a message - visual communication – images are a powerful way of communicating a point and are logical, most people would prefer to look at a image to receive a message instead of reading through page after page of information. 

The majority of images are visually pleasing too, hence why people enjoy to visit galleries and exhibitions as a past time, it is enjoyable and also in our culture it is a way which we are familiar with to receive information, the symbolism of visual communication is predominantly social. 

Images which are used for website layouts and templates, tables, JavaScript enabled menus and interfaces need to be cut up differently, to ensure they are proportioned correctly for what they are going to be used for, this tutorial will show you how to cut them up correctly and then input them into HTML tables ready for use on the internet.

1.) Begin by opening up the image which you want to cut up and use the shortcut CTRL & R to turn the documents rulers on so you have a guideline, drag the edges of the image out so you also have a grey work area to ‘play with’.

2.) Click on the ruler at the top of your page, hold down click and drag down with the cursor, this will make a blue line appear and then drag this line to the point that your want to make a cut and then let go, the final point you stop at doesn’t need to definitely be where you want the cut to be, you can still change the position if the line using the Move Tool to drag the line around.

3.) Use the same process only using the ruler on the left hand side of your image and your image should now be divided into four sections by the blue lines, you need to keep repeating this process until all the areas that you want to cut up are surrounded by blue boxes.

4.) If you want to animate a section of your image you need to make sure that the area is marked to be cut out and this will reduce the file size for your image ensuring the whole image will not need to be loaded numerous times for the animated section, also choose the Snap To Guides option in the view menu.

5.) Using the Marquee Selection Tool make a selection box around the area of the image that you want to cut out, when the area you want to cut out is selected press CTRL & C to copy the selection into memory and then create a new blank document using CTRL & N and the new dialogue box will show the dimensions of the piece you copied, press CTRL & V and this will paste the selection you have copied, save the new image and then go back to the original image.

6.) Repeat this process for every section that you wish to cut up and now the image is separated into usable pieces they will need to be reassembled so they appear to be one whole image again, this will be done using HTML TABLES. You will need the cell spacing, cell padding and border attributes to be set to ‘0’ and the width to be the same as your image as a whole, then all the images should appear lined up like they were still one single image.