Transparent GIF’s in Photoshop

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 –

• 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.
• 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.
• 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.
• 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.
• In Channels make a new channel and fill the selection of the image with white, then press CTRL & D – this will deselect.
• 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.

Posted: September 14th, 2008 under Tutorials, design, web design.
Comments: none

Cutting Up Images In Photoshop For Web

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.

• 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’.
• 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.
• 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.
• 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.
• 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.
• 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.

Posted: September 14th, 2008 under Tutorials, design, web design.
Comments: none

Chrome Effects in Photoshop Tutorial

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.

• 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.
• 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.
• 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.
• After this go to Image > Adjust > Curves and alter the curves to a setting which you believe looks the best.
• 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.

• 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.
• 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.
• 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.

Posted: September 14th, 2008 under Tutorials, design.
Comments: none

Adobe Photoshop Example Effects

The majority of Photoshop’s effects are most effective when used on photographs, but they can also be used on other types of images. One feature effect that works well on photographs is the lens blur filter, is uses effects that are similar to actually lens used on cameras e.g. focal distance, specular highlights and Iris. These effects are attached to sliders where you can adjust the size of the aperture, as you would do on a camera, the curve of the blades and the number of blades. And then you apply the adjustment to the area that you want to blur, the effect the acts as a depth of field control tool. After this you adjust the specular highlight control which then makes the catch lights white again, this process works on a alpha channel by creating a gradient mask and this means you can pin point focus to a certain plane in for example a landscape to make the foreground and background appear out of focus.

The crop and straighten tool is perfect for photos which have been scanned but haven’t been align properly by the scanner, there are scanners available which automatically rotate a skewed photo and crop it but if your scanner doesn’t have this feature then the crop and straighten tool saves a lot of time aligning photographs. The tool rotates the photographs so they are straight and then removes and surrounding frame which is left, this tool is also good for doing screen grabs and if you want to crop around a window.

Photograph filters is a feature which professional photographers will appreciate! The photograph filters are automatic colour correction filters and applying these will automatically add a preset filter and then you pick the colour you would like to add using the colour picker option, the intensity of a filter is controlled by an opacity slider and fade option, automated photograph filters will pick which filter would work best for your image without you having to have any input, although once the filter is added you have the option to change its settings.

To view any of your created images it is best to use the file browser in the toolbar menu, different buttons on the options bar will give you a number of ways to view your images one of which will allow you to quickly open up the browser and view high quality images alongside custom-sized thumbnails. If you are making numerous adjustments to you’re images involving using a lot of layers your best option is to use layer comps, these will let you capture configurations of a document by recording the position, visibility and blending options of the layers which means you can later find a layer comp from the palette and reuse the setting and way everything was set at that stage.

Posted: September 14th, 2008 under Tutorials, design.
Comments: none

The design process in terms of design on the computer at present uses the human designer to complete the majority of the work, and the computer helps throughout this process by correcting any mistakes and providing a range of tools to help with the design, also giving suggestions as to where things should be, colour palettes, sizes, layouts etc… the computer is merely a clever tool used to design on and helps to produce the human designers expectations. As technology and computers become more advanced I believe the role of the human designer and the computer will change dramatically, the computer will be given the job of completing a design and the human designer will be an observer ensuring the design was produced correctly. This way the human designer suffers no stress and simply has to provide small instructions to the computer of they need to – the computer does all the hard work. Computers will have a far more active roll in the production of the design and will ask questions of the designer to problems which the computer believes it cannot handle itself, so the designer will still be making small decisions but only when needed, drawing work will be being completed by the computer and small changes will be being made by the designer if they are needed, computers will be participating more in the design process and this will also help the human designer to stop producing similar work over and over, making them to stay out of ‘routine’ work. Based on the assumption above I think it is clear that a machine can design and there will come a time when all the human designer does is supervise the work of the computer which will be programmed to be able to complete design work whilst supervised by a human designer, perhaps computer aided design is actually the future of the digital world? If this is the case then there may come a time where the human designers are not even needed to supervise the design process because the work completed by the computer is somewhat better than the human design and human input into the computers work, or it may be found that human and machine interaction produce better design solutions than human design alone or computer design alone. Computers continue to shock us with what they are actually able to do, machines are now being able to do things which humans thought only they would ever be able to do, all of these are factors which prove the development of technology and artificial computer intelligence. I think that the design industry doesn’t necessarily want computers to be able to do everything that human designers can do, but setting certain challenges for computers can help to aid the human designers so they can focus on work that needs more human input and information from a human source. Also using machines to do some of the hard things that humans do can help us develop a broader knowledge of the abilities of the human brain and help us learn more about the human race and if there is a high need for artificial intelligence.

If machines do become as creative and intelligent as humans, in the future will there actually be any need to further education after school? Education is there to help broaden a persons knowledge of a subject with exploration of certain topics and issues, in order to have an advantage over others when it comes to getting a job, but within the design industry if it is machines that do all the work and there is no need for human input, post-graduates regardless of their knowledge, fresh idea’s and possibility of input to a brief will not be needed, machines may be used for all aspects of the process of design causing knock on effects within the vacancy for jobs in the creative industry.

Posted: September 14th, 2008 under design.
Comments: none