Archive for Tutorials

admin | January 16, 2009
No comments

Electrical Currents In Photoshop

This short tutorial shows you how to create the effect of arcing current in the air. Because it uses the “Difference Clouds” filter, the effect can look different every time you try it, as that particular filter changes each time you use it. 

1. Open a new file. Make it 500 x 500 pixels, this is a nice size to work with for this tutorial. 

2. Next you need to set the foreground colour of the file to black and the background to a light grey.

3. Select the gradient tool and then in the tool options bar, set the gradient to Foreground to Background.

4. Drag the gradient tool diagonally across the image from one corner to another.

5. The next step choose Filters > Render > Difference Clouds, which as said earlier will give a different effect each time you use it. 

6. Now Invert the colours in the image by pressing Ctrl + I.

7. After doing this you need to choose Image > Adjustments > Levels to open the Levels dialog box. Drag the black slider to the right to dramatically darken the image, when doing this the effect of “electrical currents” should become apparent.

At this stage the electrical current looks very realistic but if you would like to add some extra colour to the image you can play choose Image > Adjustments > Variations. From the Variations dialog you can add colour by clicking directly on any of the preview images. Each time you click on the preview images the colour will change.

Category: Photoshop, Photoshop Filters, Tutorials | Tags: , , , ,
admin | January 13, 2009
No comments

Photograph Restoration In Photoshop

This tutorial will teach you how to add colour onto an old photograph that may of lost colour through fading or an image that is originally black and white or greyscale, sometimes this can take a lot of time but the more time spent the better the final result.

1.) Open up the image that you want to use and ensure that the image mode is set to RGB, you can do this by going into Image > Mode and then check its set to RGB.

2.) Press Q to go into quick mask mode and make sure that the quick mask option that is on the main toolbar are set to selected areas. Using the Paintbrush fill in the area that you would like to colourize, this area will then appear in red.

3.) Press Q again and this will send you back into standard mode and a selection will appear around the area you filled with the Paintbrush, when completing the next step your selections will be saved as Layer Masks which you will be able to restore later but you could also save your selections by going to Select > Save Selection and then name the selection after the area which you have just outlined in the image you are using.

4.) Click on Create New Adjustment Layer icon which is at the bottom of the layers palette and choose the option of colour balance from the menu, you will be given a option of highlights, mid-tones and shadows and adjust the sliders for these until you find the colour that you think looks the best, this choice isn’t final you will have the option of going back and editing using your layers palette by double clicking on the adjustment layer icon for the layer that you want to edit.

5.) Repeat this process over again for the other parts of the photo that you need to colourize, when this is al done and you have got colour using your colour balance adjustment layer you can also make further additional adjustment layers to adjust each colour layer more, you will be given a selection of options including Contrast, Shadows, Brightness, Saturation, Hue… Just load the particular selection by clicking CTRL and then clicking onto the adjustment layer, and repeat the process of adding a new adjustment layer.

Category: Photoshop, Tutorials | Tags: , , , , , , , ,
admin | January 12, 2009
No comments

Adobe Photoshop Features

Photoshop has features that adjust your photographs at the click of a button, one of these being the shadow and highlight correction tool that is under the adjustments menu. The shadow and highlight correction tool is a tonal editing option and makes adjusting pictures much easier.

The tool has a set of sliders for shadows and highlights that you adjust until the balance of tones is correct. I have found using sliders is much easier than levels and curves and gives better results.

Match Colour is another feature that will help you to make two pictures that need to be combined look like they have similar colour tones. For example if you have had a portrait taken with flash and want to combine another photograph of someone taken in sunlight. To do this you need to open both images and select the target and destination and then adjust the sliders until it’s as close as you want. The match colour tool also works if you are copying and pasting parts from one image onto another and it is ideal for people who shoot panoramas and want a natural colour transition from one frame to the next so that the entire image blends together perfectly.

Photomerge is another feature that is good for people who want to piece together panoramic photographs. The feature has been programmed to stitch together photographs that have been taken in a series such as a panorama, it automatically finds the edges where a blend should occur and merges them for you without you having to cut and blend the photos yourself.

Category: Photoshop, Tutorials | Tags: , , , , ,
admin | January 9, 2009
No comments

Adobe Photoshop Overview

Adobe Photoshop is one of the most popular design programmes used by Graphic Designers and Web Developers today, this is because of its advanced level of tools and effects when it comes to editing photographs and designing graphics.

The programme was created by Adobe and works with both Windows (PC) and Macintosh. Photoshop’s name portrays it to be a programme solely designed to edit or repair photographs but it is capable of far more than this and once you have practiced tutorials and used your imagination you can create some amazing imagery using Photoshop.

The original versions of Photoshop were produced only for the Mac that allowed image editing to become affordable and accessible on your own personal computers; now Photoshop is industry standard when it comes to image editing.

The programme contains a large selection of image editing tools alongside an advanced capability of producing numerous layers, allowing images to be added, moved and rearranged over and under each other for different effects. It will also read from and convert to a large number of formats but uses its own format for layers, which is PSD. 

Category: Photoshop, Tutorials | Tags: , , , ,
admin | January 5, 2009
No comments

Using Transparent GIF Files

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. 

Category: Tutorials | Tags: , , , ,
admin | December 30, 2008
No comments

Graphic Images And TIFF Files

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.

Category: Content, Tutorials | Tags: , , ,
admin | December 23, 2008
No comments

The Best Digital Image Files To Use In Design

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.                         

Category: Tutorials | Tags: , , , , , ,
admin | December 23, 2008
No comments

Creating A Silhouette In Photoshop

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. 

Category: Photoshop, Tutorials | Tags: , , , , ,
admin | December 16, 2008
No comments

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.

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. 

Category: Photoshop, Tutorials | Tags: , , , ,
admin | December 16, 2008
No comments

Chrome Effects In Photoshop CS3

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. 

Category: Photoshop, Tutorials | Tags: , , ,
« Older Entries   Recent Entries »