Tuesday, December 30th, 2008
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.
Tags: Digital Images, Graphic Design, Image Formats, TIFF Files
Posted in Content, Tutorials | No Comments »
Tuesday, December 23rd, 2008
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.
Tags: Digital Images, GIF, Image Files, JPEG, Pixels, PNG, TIFF
Posted in Tutorials | No Comments »
Tuesday, December 23rd, 2008
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.
Tags: Design, Images, overexposure, Photoshop, silhouette, tutorial
Posted in Photoshop, Tutorials | No Comments »
Monday, December 22nd, 2008
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.
Tags: Design, graphics, handmade, Images, machines, original
Posted in Content, Design And Technology, Visual Communication | No Comments »
Friday, December 19th, 2008
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.
Tags: Design, digital, fine art, graphics, Images
Posted in Visual Communication | No Comments »
Thursday, December 18th, 2008
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.
Tags: Design, digital design, formats, media
Posted in Visual Communication | No Comments »
Thursday, December 18th, 2008
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.
Tags: Design, media, Visual Communication, writing
Posted in Visual Communication | No Comments »
Wednesday, December 17th, 2008
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.
Tags: Art, Design, Graphic Design, Images
Posted in Visual Communication | 1 Comment »
Tuesday, December 16th, 2008
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.
Tags: Images, Layouts, Photoshop, Templates, Website Design
Posted in Photoshop, Tutorials | No Comments »
Tuesday, December 16th, 2008
Chrome effects can be created in Photoshop to then be put onto objects or to be used as an effective text effect. In this tutorial I will show you how to apply a chrome effect to text or any other object.
1.) Start by creating a new image 500/500 pixels with a dark grey background, the foreground colour should be white and use the type tool to create text you would like to use to change into chrome, try and make the text as big as possible. Once you have done this choose Layer > Type > Render Layer and then hold CTRL and click on the text to select it, then go to channels palette and create a new channel.
2.) On the new channel fill the selection with white and then deselect (CTRL + D), then go to Filter > Blur > Gaussian Blur and use a radius of 8. Repeat Filter > Blur > Gaussian Blur and use a radius of 4, repeat again using a radius of 2 and then again using a radius of 1. Once this is done go back to the layers palette and click on the type layer.
3.) Now the type layer is active go to Filter > Render > Lighting Effects and use your preferred lighting effect, try and set the texture of white high and use the light type as a spotlight. Also set the sliders to a more shiny and metallic level.
4.) After this go to Image > Adjust > Curves and alter the curves to a setting which you believe looks the best.
5.) Now you have made your chrome you need to highlight using blue highlights and again having the sliders highest at shiny and metallic. Keep adjusting the levels until you have an effect that you are happy with.
6.) Once this is completed you need to resize your type down to about half the size that it is and then add a drop shadow, you can change your design by creatively ‘playing around’ with Photoshop’s other layer style to add further depth and detail.
7.) Satin is a good effect to use with chrome of you lower the default opacity and the Outer Glow, Inner Glow and Inner Shadows also work well. Gradient Overlays with low opacity can create a interesting effect and explore the blending modes instead of just sticking to normal.
8.) Exploring the different layer styles can help you to learn new ideas and effects, and when you find something the works well you can also save it by clicking the New Style button but ensue you save them when your finished by clicking styles at the top left window, click the arrow button to the right and choose Save Styles.
Tags: effects, Photoshop, photoshop CS3, Photoshop Effects
Posted in Photoshop, Tutorials | No Comments »