Archive for the ‘Tutorials’ Category

Cross Processing Graphically Challenged

Monday, March 16th, 2009

The March Graphically Challenged at DSP is to ‘cross process’ a photo and create a layout with that photo. Cross processing is a traditional still film photography technique that can produce some really striking results, however you can achieve similar effects in photoshop without messing with those stinky chemicals!

I have done a tutorial to demonstrate how to achieve the effect in photoshop. The challenge is to create a layout using the cross processed photo and have it take up the entire page.

I decided to scraplift a layout done by Klamb1111 because I loved the affect she created on her layout with the tutorial and had the perfect photo to use after Jasmine learnt how to ride her bike without training wheels over the weekend!

Anyway, here is my layout using the technique, using the cross processed photo, blend modes and a background paper from my Altered Heart Page Kit.

learningtoride-web

Saving an Image for Viewing on The Web in Photoshop & Photoshop Elements

Saturday, June 21st, 2008

For those of you new to digital scrapbooking communities and galleries, you may never have had the need to save images for viewing on the web before. Read on to find out how to save your images for web use to enable fast viewing and to be able to upload to online galleries.

mages viewed via the web do not need to be the same resolution as images saved for printing, as the maximum viewing resolution on a monitor is 72dpi. Images should also be compressed to allow for quick displaying of images when viewed via the internet. The image should also be smaller in size than that to be printed out, as viewing size on a monitor is much smaller than that being printed out.

This tutorial explains how to save images for sharing on the web or in online galleries.

When you layout is complete, the first step is to flatten your layers. Doing this prevents your layer styles from needing to be rescaled when your image sizes is reduced, which can happen on occasion, particularly in Photoshop Elements.

To flatten your layers, go to the layers palette and click on the more button in PSE or in Photoshop, the small button with a triangle pointing to the right of your screen.

1-FlattenLayers

From the menu which appears select flatten image.

2-FlattenImage

This will flatten all the layers in your layout to a single layer.

After you have done this it is time to resize your image. In the digiscrapart.com gallery, the maximum size you can upload to our gallery is 600×600pixels, and 125kb. In your image menu, select Resize> Image Size. (or in Photoshop just select Image Size)

3-ImageSize

In the window that appears, you can select the size you wish to make your image.

4-ResampleImagePixelDimensi

Firstly ensure that Resample Image is checked so that you are able to access the pixel dimensions portion of the window. (constrain proportions should also be checked) In the Width and height the maximum amount of pixels should be 600. You may make it smaller if you wish however 500-600pixels is a good viewing size for the web. For a square image, you can resize it too 600×600 pixels, and for rectangular images, the maximum Width or Height is 600pixels. Just change the largest Dimension to 600 and providing Constrain Proportions is checked, the other dimension will change automatically. Once you have changed the amount of pixels to 600 or less, click on ok. This reduces the viewing size to a suitable size for viewing on the web.

5-SaveForWeb

Next we need to save our image for the web. This allows us to reduce file size as much as possible without reducing viewing quality. (do not use this method for layouts you wish to print)

Go to your file menu and choose Save for Web.

6-SaveForWeb

A new window will appear with two versions of your image. (in Photoshop you may need to click on the 2 Up tab) On the left is your original image and on the right is the sample of the image as you adjust its compression settings.

In the Preset box, ensure that you have JPEG selected in the box for file types. To the right of this box is a Quality box. This is where you adjust your compression level. Adjusting the level in the Quality box directly effects the file size shown under your sample image. The aim is to get the maximum viewing quality possible, with minimum file size. Play with the levels in the Quality box and see how it affects your sample image in comparison to your original image. Brightly coloured or high contrast images tend to be large file sizes than lower contrast images.

To be able to upload your image to the digiscrapart.com gallery, your image file size must be less than 125k. Check the file size under JPEG shown as above below the sample image. Generally speaking you should be able to keep your images under 100k for most layouts. If you need to zoom in to get a better view of the effect of the compression, you can click on the magnifying glass at the top left and click on your image to zoom in. (hold down the alt key and click to zoom back out)

Once you are happy with your adjustments, click on the Ok button.

7-SaveForWeb

Be sure not to overwrite your high resolution images by saving as the same name. You might like to put -lowres or -forweb at the end of your file name to indicate that the image is a low resolution image for web/email viewing.

Once you have named your file and chosen an easy to remember place on your hard drive to save it, click on Save, to save your new, low resolution version of your image.

Tip: When going back to your image in PS or PSE, remember not to resave your original as your full printing size will be lost. You may wish to undo your sizing and layer changes before saving again, or in Photoshop you can click on Revert in the File menu to revert to the last saved version.

Happy Gallery posting!

© Robyn Gough 2006

All Rights Reserved

Not to be reproduced without express written permission.

Using Drop Shadows for Realistic Looking Layouts

Saturday, June 21st, 2008

Drop shadows can have a dramatic affect on your layouts and can provide a variety of different effects and looks. Adjusting a drop shadow can really make your layout pop, or can spoil it. The trick is creating the right type of drop shadow for the effect you are trying to create.

Below is a photo with six different drop shadows to illustrate the different effects a drop shadow can give.


DropShadows


The first image has a subtle drop shadow, a short distance from the image, with the shadow being heavier on two sides of the photo, illustrating that the light source is coming from the top left. The small size of the shadow also suggests that the photo is likely to be directly on top of the background paper as it might be on a traditional paper layout.

The second photo has a heavier and larger drop shadow again heavier on two sides of the photo indicating that the light source is coming from the top left. The increased size and softness to the drop shadow makes the photo appear that it might be further away from the background paper. Such a shadow might also be used for objects such as page pebbles, or other embellishments which would appear to be thicker in real life than a photo. In this instance, used on a photo which is less than a millimetre thick, it makes the photo appear to float on the page.

The third photo has a very large drop shadow and is much softer looking than the previous two. The shadow has dispersed just as shadows do in real life when an object is a distance from something. The closer the object is to where the shadow is being cast, the darker, smaller and sharper the shadow will become. This shadow makes the photo appear as if it is floating some distance above the page and does not lend itself towards a realistic looking paper style layout as much as the first shadow does.

The fourth photo has a small brown drop shadow with the colour altered from black to dark brown. The shadow is set at zero distance giving an even size around the photo and indicating that the light source might be directly above the photo. This form of drop shadow gives a lovely soft look and is useful for creating a realistic and soft looking shadow around the photo. This effect is particularly useful for freestyle layouts and a variety of other effects and looks.

The fifth photo has a larger, softer drop shadow, at zero distance with the colour altered from black to dark brown. The shadow has also had noise added to give a less even look. The size of the drop shadow does not lend itself to a realistic photo on top of paper look, however it does almost give the appearance that the photo is set behind the paper instead of on top of it. To enhance this effect you may wish to reduce the opacity of the shadow and include an inner shadow on the photo itself. It is another style of drop shadow which may be useful for freestyle layouts.

The sixth photo does not look at all like it has a drop shadow but like it has a frame around it or that the paper may have been embossed. This look was achieved by using zero distance, changing the colour to dark brown and experimenting with the contour of the drop shadow. Once again, not a very realistic looking drop shadow, but perhaps an interesting effect to experiment with!

Knowing how to make the most of your drop shadows is a very useful tool to have under your belt and it can be fun to experiment with them. Why not give it a go in your next layout?


© Robyn Gough 2006

All Rights Reserved

Not to be reproduced without express written permission.

Zipping And Unzipping Zip Files

Saturday, June 21st, 2008

One of the most fundamental aspects of digital scrapbooking is being able to unzip the files you download. Read on to find out how to zip and unzip zip files.

Creating and Extracting Zip Files

In digital scrapbooking there are many occasions where you might have to deal with creating and extracting (opening) zip files.

Most digital scrapbook kits you download, whether you buy them or whether they are freebies come in zipped files. Zip files are normally a way of compressing files to keep down the size of them as well as keeping them together in a single file rather than several separate ones. With graphic files, zips do not normally reduce the file size much, if at all, however they are a very good way of keeping a collection of files together to enable easier downloading and uploading on the web.

Windows XP now provides it’s own zipping facilities, but if you do not have Window’s XP there are several zipping programs out there, such as WinZip or WinRar (which has the ability to compress in various file types such as Zip and Rar).

For the purpose of this tutorial, since most people tend to use Windows XP we will explain how to zip and extract files with Windows XP.

Extracting Zip Files

Firstly open Windows Explorer

Start> All Programs> Windows Explorer

Locate the zip file you wish to extract the files from and right click on the file. From the menu that is displayed, choose Extract All

The Windows extraction wizard will open. Click on Next to continue and you will come to the window below.

Here can select a destination for the files to be extracted to. You can click browse to find a folder on your hard drive, or type the path of where you want the files to be extracted to. The default is a folder named the same as your zip file, usually in the folder the zip is contained in.

If you are happy to have your files extracted to the default directory and folder, click on next to continue.

This completes the extraction of your files, check the box next to ‘Show extracted files’ if you wish to have a window open showing the extracted files.

Note: Double clicking on a zip file will show you what is inside the zip file but will not extract them.

Creating a Zipped File

Firstly open Windows Explorer

Start> All Programs> Windows Explorer

Add all the files you wish to zip into a folder. Right click on the folder and choose Send to> Compressed (Zipped) Folder, from the menu that appears.

Your zipped file will appear beneath the folder you right clicked on.

Your zipped files are now ready to upload to the web, send to someone else or do what you will with!

This article is © Robyn Gough (clikchic) 2007
All Rights Reserved
Not to be reproduced without express written permission

Dreamy Photo Look In Photoshop

Saturday, June 21st, 2008

A wonderful technique for softening the look of your photos and reducing the effect of blotchy skin is to use the diffuse glow filter in Photoshop. You can take advantage of this wonderful filter to make a dramatic change, or just a subtle adjustment.

Firstly open the photo you wish to apply the filter to. For the purpose of this article we will work with this photo.

Image1-StartingImage

To apply the filter, go to the Filter menu > Distort > Diffuse Glow (Note: that your background colour on your colour swatches must be set to white for this to work effectively.)

Image2-DiffuseGlowMenu

You may need to adjust the zoom settings on the bottom left of the window to enable you to view enough of your image in the window provided.

By adjusting the Graininess, Glow Amount and Clear Amount you can experiment with the settings to get the desired effect, depending on how dramatic a change you would like to achieve. I usually like to make the change a little more dramatic and fine tune the changes by using the Fade setting in the Edit menu. Once you are happy with the result, click on OK.

Image3-DiffuseGlow

As mentioned above you can fine tune the changes by using the Fade Diffuse Glow option in the edit menu. This option is no longer available once you make any further adjustments to the image, so should be done immediately upon applying the Diffuse Glow filter.

Image4-FadeDiffuseGlow

You can fine tune the Diffuse Glow settings by using the Opacity slider. Doing it this way enables easier control of the effects and allows you to better see how the adjustments effect the image.

Image5-FadeWindow

In this instance I reduced the opacity by 69%. You may prefer a different setting depending on your image and how you applied the filter originally.

It is also possible to adjust the Mode settings to get different effects. One of the effects is shown below.

Image6-Experiment

However, in this instance, I want a much softer look, and have left the Mode setting set to normal, giving the end result below.

Image7-FinalImage

© Robyn Gough 2005
All Rights Reserved
Not to be reproduced without express written permission.

Tinting Your Photos to Make Them POP in Photoshop

Saturday, June 21st, 2008

One of the great advantages of digital scrapbooking is being able to edit your photos.

If you have ever had trouble matching your photos to your layout, kit or if something just doesn’t look quite right, tinting your photo might be just what you need to do to make your layout pop.

When opening an image, always use SAVE AS to save a to a new image file name so that you are not working on your original.

In this tutorial we will start with this original photo.

KyanSleeping210505-1

To start with it isn’t a bad image but there is room for improvement. Making an image monochrome can really make a difference to it. Tinting it a color such as sepia can make it suit your layout perfectly. Sepia of course isn’t the only way to go, there are many different colors you can tone your images to help suit your layout.

Firstly to tint an image it must first be made black and white. The way I find the easiest is to desaturate the image. To do so select Image> Adjustments > Desaturate.

Desturate-2

Usually when desaturating an image it is necessary to boost the contrast a little. An easy way to do this can be to use the Auto Contrast tool in Image> Adjustments > and then select Auto Contrast. (also shown in menu above)

As an example here is the desaturated image below.

Desturated-3

The contrast on this image hasn’t turned out too badly but often there are no real blacks and the image can look a little too grey. Boosting the contrast will give it more punch.

If you wish to have a bit more control over the contrast it is sometimes more effective to use the brightness/contrast.

Contrast-4

As you can see below, the second image has a bit more punch.

ContrastBeforeAfter5

As is the image already is greatly improved on the original but it is only the beginning of what you can do.

Sepia toning is an age old photography technique. Photographers who did sepia toning would all have their own techniques and preferences in regard to the color of their sepia work. The digital age makes it much easier for us to experiment with sepia tones along with a myriad of other monochrome color effects.

Probably the easiest method is to use variations. Image> Adjustments> Variations

Variations6

This gives you a selection of thumbnails where you can assess the color changes and easily choose the color change by clicking on the appropriate thumbnail.

VariationsThumbs7

You can choose the extent of color variation by adjusting the Fine – Course slider. Simply adjust the image by selecting the appropriate thumbnail and clicking until you have achieved the desired colour tone and then click on Ok.
For sepia toning you are mainly working with the red tones. I like to adjust the slider to the fine level as it gives you more control and you can make the changes more gradually. Each click of a thumbnail adjusts the tonal change further.


To achieve a sepia look, you would mostly use the ‘More Red’ thumbnail to achieve the desired look. You may also like to add some yellow to make it a more yellow sepia, or more magenta to make it a bit more pink. On the sample above the tonal changes are quite dramatic as the slider is set at halfway. The changes will be a lot more gradual when set at the fine end of the slider. On the example below, I set the slider to fine, and clicked on ‘More Red’ several times to get the desired effect.

Sepia8

You can achieve a variety of colors by experimenting with the variations. Sometimes it might be useful to make the image blue, green, purple or whatever color you wish. It really is up to you. Some images really benefit having a funky tone added to them and it can really boost your layout to have an image tone in with it.

In the layout below I used blue as the main tone for the image, and then also made use of sepia to make my son really stand out.

Layout9

My favorite method of adjusting colors in images is using Hue and Saturation.

Hue-Saturation10

I find that this method gives you a great deal of control over the tonal range, shade and saturation of the color tinting.

Hue-Saturation11

To colorize an image you need to ensure the ‘Colorize’ box is checked. You can then adjust the sliders to achieve the desired result. The Hue slider allows you to select the hue or color you would like to adjust to. You can use the rainbow strip at the bottom to give a guide as to the color range and its position on the slider.

The saturation allows you to adjust how much of that color is added to the image. The lightness slider allows you to adjust the brightness of the image overall. It is good to experiment with the effects of Hue and Saturation to see what you can do. It is a very versatile tool, not only for your photos, but your layouts, backgrounds and elements as well.

Once you have achieved your desired result, simply click on ok and save your image.

© Robyn Gough 2005
All rights reserved.
Not to be reproduced without express written permission.

Realistic Paper Tearing in Photoshop

Saturday, June 21st, 2008

Have you ever wondered how to tear digital paper and make it look real? Learn how to do realistic paper tearing in photoshop.

Realistic Paper tearing in digital scrapbooking is something that can be done in many different ways, here my version of digital paper tearing. This tutorial is done in Photoshop CS, however the basic principles will apply in other versions of Photoshop and Photoshop Elements. You may also be able to apply the principles to other software packages.

Select the layer you wish to apply the torn edges to by clicking on it in the layers palette. Then click on the ‘Add Layer Mask’ button at the bottom of the window (second from the left) to create a layer mask. Creating a layer mask allows you to make changes that can be easily removed from the layer at any time. To make changes to the layer mask, click on the square showing to the right of your layer thumbnail. This is your layer mask thumbnail.

image1-addmask

Using black on your layer mask will erase from the layer much like the rubber tool and using white will bring it back. This makes it is easy to correct any over brushing by using white.

image2-brushtool

Select your brush tool from your tools menu on the left hand side.

image3-roughroundbristle

I like to use the Rough Round Bristle for creating my torn edges but it is worth experimenting with different brushes to see which you prefer for the effect you are after. Adjust the brush size according to your layout and the size needed for the desired effect. For this layout I set mine at about 150px.

Make sure you have selected black from your colour palette and begin brushing the edges of your paper, photo or matt. Ensure that the brush opacity is set at 100%.

image4-brushingedges

With this particular brush it is usually necessary to go over any dark pixels that have not been properly erased to ensure you have a clean torn edge. Once you have finished creating your edge with the black brush select the layer in your layers palette below the one you are working on and then create a new layer. This will place a new layer underneath the layer you are creating the torn edge on.

image5-newlayer

To do this click on the little arrow in a circle on the top left of your layers window and select new layer.

image3-roughroundbristle

I like to once again use the Rough Round Bristle for the under portion of the torn edge. Once again you might like to experiment with different brushes to get different effects. This particular brush gives a nice textured effect to this portion of the torn edge.

Select an appropriate colour to match your paper or photo. In the case of photos I like to use white as photos are printed on white paper and give a white torn edge. For coloured paper I would use a slightly lighter shade of the same colour.

Choose a brush size for your desired effect. I used approx 150 once again.

image7-layerstyle

Begin painting the torn portion of the paper on the layer beneath your photo or paper by dragging your brush along the middle of the edge of your torn paper. You may wish to tidy up the edges with your rubber tool and by selecting the same brush.

Once you have completed the edge on your photo or paper you may wish to apply a drop shadow to this layer.

image7-layerstyle

To apply a drop shadow select Layer, Layer Style and then Drop Shadow from your menu.

image8-dropshadow

Adjust the settings to suit your layout. Different colours will require different shadow strengths and the further the paper away from the layers below the softer and larger the shadow will be. The closer it is the darker and smaller the shadow will be. For the sake of realism in a paper style layout I prefer to keep my shadows quite small and subtle. Fiddle with the Opacity, Distance, Spread and Size settings to achieve your desired effect.

image9-loweropacity

You may wish to apply further effects on the torn edge portion of the paper, in this case the white portion or the layer beneath your paper or photo. You may wish to apply textures similar to that of the above layer, or a texture to simulate torn paper. Some people like to add noise. Personally I do not think this technique requires any further textures or effects but this will differ according to taste and the style of your papers and layouts.

I also like to slightly lower the fill opacity of the white torn edge. Again this is a matter of taste and may not suit your paper or layout. You may prefer to use the rubber tool for this purpose with a lowered opacity to brush over the edges to simulate the effect of the thinned edge of torn paper.

image10-finalimage

There are many different methods of creating a torn paper edge, and this is the one I like to use for my layouts and kits.

© Robyn Gough 2005
All Rights Reserved
Not to be reproduced without express written permission

Creating a Blinkie in Photoshop Elements

Saturday, June 21st, 2008

Anyone who joins the online digiscrapping communities will notice the popularity of blinking avatars and ‘blinkies’. This tutorial teaches you how to easily create you very own blinking avatars and blinkies in Photoshop Elements. This tutorial was written in PSE4, if there are any changes in later versions, please do let me know so I can update the tutorial.

Creating Blinkie’s in Photoshop Elements 4

You will be amazed at how easy it is to create blinkie’s in PSE4. It works a little differently to PSCS, so if you are using PSCS check out our article on creating blinkies in PSCS.

First we need to start with the images we wish to use for each frame of the animation. In PSE each frame of the animation must be a single layer. Below I have saved each combination of layers as a jpg file to enable each frame to be combined into a single file. Each file must have exactly the same dimensions. Open each of the .jpg files you intend to use for each frame.

Once you have all your frames ready, you need to compile them into several layers of one file.

To do so click on and drag the second frame on top of the first frame. Then drag the third on top of the second. Do this as many times as you have frames in order that you wish them to appear. Make sure each layer is lined up correctly. For this blinkie there are only going to be 3 frames.

Once you have done this, you will see the three layers in your layers menu. Make sure that each frame is in the correct order. If they are not, you can correct them by dragging the incorrect layer into the correct position on your layers palette.

Once you have your layers ready to go it is time to Save For the Web. In the file menu, choose Save For Web.

A new window will open up as below.

The Optimised File Format needs to be set to GIF. Click in the Animate Box to select Animate. Other settings at the top of the screen can be left as is. IF you wish to compress your file size to make it smaller you may wish to adjust the colour setting to a smaller number.

If you wish to adjust the viewing size of your image you can do so using the settings in the ‘New Size’ section.

Next we need to set the animation settings.

Ensure that the loop box is checked. I recommend a 0.5 sec delay as an optimum length of time to set the frame delay at.

Once you have set the frame delay click on ok and save the file to a easy to find place on your hard drive. Your blinkie is now ready for use.

This article is © Robyn Gough (clikchic) 2006
All Rights Reserved
Not to be reproduced in any way without written permission

Creating a Blinkie in Photoshop CS, CS2 or CS3

Saturday, June 21st, 2008
Anyone who joins the online digiscrapping communities will notice the popularity of blinking avatars and ‘blinkies’. This tutorial teaches you how to easily create you very own blinking avatars and blinkies in Photoshop CS, CS2 or CS3.

There are a few more steps to create a blinkie in PS CS than in Photoshop Elements but once you know how you will be creating dozens of blinking avatars and blinkies! The blinkie size I have used in this instance is 125×60 pixels, another common blinkie size is 150×50 pixels. The avatar size limit on on most scrapping forums is 125×125pixels so this is a good size to create your avatar’s at.

Firstly you need to create your design, and this needs to be a layered image, as showing and hiding the layers enables you to create each frame of the blinkie.

For the purpose of this tutorial I will be using the top three layers as ‘blinking’ layers for the blinkie. You can use any combination of layers you wish to create a frame for your blinkie. In this instance I will keep it simple and only ‘blink’ the top three layers.

Once you have all your layers ready to go you then need to begin the animation process. To do this, go to the file menu and choose Edit in ImageReady.

Note: This step is unnecessary in Photoshop CS3 as animations are now done within Photoshop itself. Simply click on the window menu and click on Animation to open the Animation window while still in Photoshop.

Image Ready will open up (this can sometimes take some time to load) with your image in it, and no longer in Photoshop. If you need to go back and fix something you can just choose Edit in Photoshop from the file menu of Image Ready. Be warned however if you do this you should do so before you begin the animation process as it can play havoc with your frames. If you need to do it after you have started adding new frames, first delete the extra frames and then do your editing in Photoshop before coming back to Image Ready.

Next you need to open the Animation window.

Go to the Window menu and ensure that the Animation option is checked. This will ensure you have the animation window open.

To create each frame we need to turn on the layers we want visible and off the layers we don’t. You can do this by clicking on the eye next to each layer. If there is no eye next to the layer, it means the layer’s visibility has been turned off. In the above sample we have turned off the ‘Love’ and ‘CD’ Layers which will be for the first frame of our blinkie. For this blinkie the first layer only has the ‘I’ layer visible.

Here we have the Animation window visible. This is where we create each frame of the animation. Here we need to ensure it is set to forever. This allows the blinkie to continue blinking. If it is set to once, it will only go through the frames once and then stop.

The frame delay is the length of time in seconds the frame will appear. You can set different time values for each frame if you wish. For instance if something takes a little longer to read you can make it a longer frame delay. If it is just an outside border which flickers, you can set it to a short delay so that it blinks quickly. For the purpose of this tutorial we will set all the frame delay’s at 0.5 seconds.

Once the first frame is set, following new frames are defaulted at the same value, but can be changed if you wish.

We already had the first frame ready to go, and just had to adjust the frame delay. Now we are ready to create the second frame. First we need to click on the New Frame Icon circled above.

Next we need to make the layers visible that we want to appear in the second frame of the blinkie. Above shows the second layer we want visible.

Here is the third frame we wish to have for the blinkie, showing the layers which are visible for this frame. We have now finished creating the frames for the blinkie and it is now ready to be saved into gif format.

Note: In CS3 this step is now done through Save For Web & Devices. The settings are on the right hand side of the window. If you wish to view the quality settings, click on the two up tab. This allows you to view the Original file on the left, and your adjusted settings on the right. You can use the play button at the bottom right of the window to view your animation before saving. Once you are happy with your settings click on save and save to your computer.

Photoshop CS3 Save For Web & Devices

Back to prior photoshop versions…

Next we need to make sure that gif is selected in the optimize palette. If you need to compress the image a little further and reduce the file size you can try adjusting the number of colours, however this can reduce the viewing quality of the image. If file size is not an issue you will not need to adjust any of the other settings.

For the purpose of this tutorial I have left all the settings at their defaults.

Now it is time to save our image! Go to the file menu and choose Save Optimized As. Choose an easy to find spot on your hard drive to save your blinkie and you are done!

This article is © Robyn Gough (clikchic) 2006
All Rights Reserved
Not to be reproduced in any way without written permission

Using Brushes in Photoshop CS (+2 & 3)

Wednesday, June 18th, 2008

In this tutorial we will learn how to load brushes into Photoshop as well as some of the basics in regards to using them and making them work for your layouts. This tutorial is suitable for both Photoshop CS and CS2 and is probably suitable or adaptable for other versions as well.

First we need to load our set of brushes. Photoshop comes with several sets or you may have purchased a set. Check out my GRUNGE ME range of brushes in store.

For the purpose of this tutorial I will be using my original GRUNGE ME! Photoshop brushes set.

First copy your .abr file into your C:/Program Files/Adobe/Adobe Photoshop CS/Presets/Brushes folder before loading your brushes. Brushes saved to this folder will load each time you start Photoshop. (If you do not wish to have them load every time you start Photoshop, you can save them to a different folder and load them as you need them.) Please note that your drive letter may vary from this and your Photoshop folder may have a slightly different name depending on the version of Photoshop you use.

We now need to ensure our brushes tool is selected by clicking on the brush/pencil tool and holding your mouse button down to get the pop out menu. Click on the first item, Brush tool to select brushes.

Now click on the brushes tab at the top right of your screen.

If you are unable to view this tab, you can show it by going to the Windows menu and clicking on brushes. You should then be able to drag it to the box containing the other tabs so that it appears each time you open Photoshop.

We then need to load your brushes. To do so click on the small arrow next to the word brushes on the brushes tab and a menu will appear.

Select Load Brushes from the list of options.

Brushes for Photoshop come in .abr files. So in your download, look for the .abr file you copied to your presets folder.

Browse for your brushes file in your Adobe/Photoshop CS/Presets/Brushes folder. Once you have found the file click on it to select it and click on the Load button. This will load your brushes into the Photoshop brushes collection.

You should now be able to view your loaded brushes in the brush selection menu.

Tip:- In the above preview I have my brushes set to show as large thumbnails. There are several viewing options. To choose your favourite, click on the arrow on your brushes tab again and select your viewing option from the menu that appears. You may prefer small thumbnails or one of the other options, try them and see!

The next step is to choose a brush to use. For the purposes of this tutorial I am going to put white inked edges around the edges of a photo. Brushes are very versatile and have a HUGE number of uses, from painting, grunging or decorating papers, to inking edges on photos and papers or even editing photos. You can use brushes with your eraser tool and dodging and burning tools to name a few. Then you have the option of experimenting with blend modes to enhance the effect of your brushwork. Once you start to experiment with brushes, they become very addictive!

I have several inked edge brushes to choose from, and in the sample below I have used a few of them, but you can just use one and change the rotation of the brush to suit each side of the image. I have also used some other of my GRUNGE ME! brushes to achieve the effect I am after.

Now to choose the brush!

To choose a brush, find the brush you wish to use and click on it. This selects your brush choice. You can then change the size of the brush to suit your purpose using the Master Diameter. Alternatively you may wish to use the menu that appears when you click on the dropdown arrow next to your chosen brush at the top left of your options toolbar.

Tip:- Create a new layer before beginning your brushwork so that it can be easily erased if need be by deleting everything on the layer or the layer itself.

I am editing a 400×575 pixel photo in this tutorial, and will need to adjust my brush sizes accordingly. You can reduce or increase the size of your brushes to suit your needs using the Master Diameter setting.

As you can see below, I have selected white from my colour palette and have begun my brushwork on a new layer by clicking on the areas of my canvas that I wish the brushwork to appear, much like ’stamping’ the image on the screen. In the sample below you can see the outline of the brush as an indicator of how it will appear on the canvas.

Your brush will not always be angled in the position you wish to use it, to rotate your brush to suit the angle you require, click on the Brush Tip Shape option to the left of the Brushes palette. Here you will find further options for editing your brush. To change the rotation of the brush, you can click on and drag the arrow to an angle that suits, or enter the angle into the Angle box. You can also edit the diameter of your box in this area.

You may notice the other options down the left side of your palette. There is great scope for experimentation here, however these will not be covered in this basic tutorial.

Below is the finished product, with several different brushes applied. (some inked edges & a crayon line brush).

If you want to take it one step further, you can experiment with blend modes and additional brush work to create different effects. Below are the blend modes I have used for my Ink Edges layer and also a second layer of grunge brushwork I have done on the image following.

Below is the end result of the above blend modes (Exclusion - Layer 1 & Soft Light - Layer 2) and an extra layer of additional brushwork.

Or for a more defined border, I have changed the blend mode on the inked edges layer to Difference.

The techniques you have learned in this tutorial can be applied to your favourite background papers or photos and even when designing blinkies. The possibilities are endless! You can add layer layer styles, vary the opacity and apply further effects as well to add further enhancements to your work.

This article is © Robyn Gough (clikchic) 2007
All Rights Reserved
Not to be reproduced in any way without written permission


Digital Scrapbooking Top50 Aussie Scrapbooking