Monday, January 5th, 2009
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.
Tags: Design, GIF files, graphics, Images, transparent
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 »
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 | No Comments »
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 »