Pop-Out Framing

Make your photos pop-out of the framing a little with this little frame trick. This is simply done by by isolating the subject area that you want to set outside of (or on top of ) the area of the frame you want it. In this example, the lower portion of the teddy and dish are sitting "above" the lower portion of the frame. Are you ready to begin?

Step 1 is to create a new document with a transparent background of the size you'll need for your image..

Choose your background. In my image, I chose a solid background of the same colour the original image was. I also added a smaller framed version of the teddy bear as part of the background.

This is done by copying your image (open the image to copy, choose select all, choose "edit" and then "copy" - minimize the image, and maximize your new background, select edit and paste) and pasting it to a layer above your background. You can resize this image by selecting "edit" and "free transform", and then "scale". Hold down the shift key, grab one of the corner nodes and resize this to fit in your background. (Note: if you need free frames and photos to practice with, visit Free-3D-Textures.com and grab what you need for free)




Copy your frame to a layer above this little image using the same method as above and sizing your frame to fit the small image.


Minimize the new image with this small picture and maximize your original image. Select all, edit, copy, minimize and then maximize your new image. Now select edit paste to paste this layer just above your background. Size it to fit within the area you want to frame.


Now open your frame again, and copy and paste it (see method above) to just above the layer you just added. Size it to fit your image using the edit/free transform function.


Select the portion you want to isolate from the image and isolate the part you want to pop outside of the frame. In the case of my image it was part of the teddy's leg and the bottom portion of the candy dish. I used the quick mask to do this, but you can use any isolation method that you find comfortable.

To isolate using the quick mask, select the quick mask, paint over the portion you want to move outside the frame. Turn off the quick mask and you'll see a selection. This selection will be everything except what you want to copy. Select the "select" option from the menu, and then choose "inverse". This will select the portion you "painted" in the quick mask. Now select "edit" and "copy", and then select "edit" and "paste". This will copy the selected part to a new layer.

Now that you have the "pop out" part on a new layer, you want to duplicate the layer if you want a shadow. What you'll have is two layers of the small portion. Move to the bottom of the two layers, and using the levels (image, adjustment, levels) move the sliders all the way to the right, making the image black. Pull this below or to the side of the layer above so you can see as much shadow as you want visible.

Use the blur tool (filter, blur, gaussian blur) and blur this shadow layer. Reduce the opacity of the shadow layer to suit your own taste.

That's pretty much the final step. Once you are satisfied with the image, save it as a .psd file in case you want to make future edits, then flatten it, and save it as a .jpg.

News Flash

BLOGGER IMAGES DISAPPEAR IN THE BLINK OF AN EYE!

Blogger's image storage seems to have gone for a poop - all my blogs are missing all the images from the Picasa Web Albums - including blog headers and profile pics.

Hopefully blogger can restore these - the thought of having to reupload hundreds of pictures for the tutorials and the image files for all my other blogs is giving me nightmares...and a gigantic headache.

Google seems to have a ton of issues lately, from deleting blogs for being spam that aren't spam and don't resemble spam, to creating a gigantic mistake with the release of Buzz, to their phones that don't appear to work so well, to suddenly having all the images in the Picasa Web Albums disappear.

What's next? Should we run a contest or Poll and see who wins?

What Is A PNG File Anyway?

...and what can I do with it? Ah, well that's a question that quite a few people wonder. A PNG file is a graphic file format that has similarities to both the popular .jpg format and the older .gif format. It can be the same as a .jpg and you can use the same way as you use a .jpg file. It has has the ability to save a file with transparency, like the .gif file, but PNG (or .png) handles photographs very well and allows a wider colour gamut than .gif does. That's the basic and simple explanation, but if you want to know more about the .png format you can find the technical stuff here.

I don't save straight forward photographs as .png files, because for web use, the .jpg is perfectly fine. But, if you do collages or image compilations (creating one image using many elements from others) then the PNG file can be very useful if saved on a transparent background.

Here's one example. We've got this picture of a tree branch with leaves and green berries on it, but we want to add something to it. Like maybe a garden snail - a giant snail.


In photoshop we open the image of the branch as our background. Now we open the snail picture which is a .png file, saved with a transparent background.


With the snail as your active image choose "select all" from your menu. Then choose "edit", then "copy". Now minimize the snail picture and click on the background image (in our case the branches). Now select "edit" again, and then "paste". This will paste the snail onto a new layer in your background.

Once it's there you'll see it's just the snail - no backgrounds to remove. Move the snail around until it's in a spot you like, or make it smaller if you want a more realistic representation. Once you're satisfied with it's placement, flatten your image and it's ready to go.


No fiddling, no erasing or isolating necessary.

The .png file format using transparency is particularly useful for saving things like photo frames. The transparency then makes it easy to place this frame over any photo, the same way as we inserted the snail above.

But where does the .png come from? There are a few places on the internet where you can find free files in the .png format with transparency, but not too many. Right now, it doesn't seem to be a popular file format, but in my books, it should be much more popular than it is. Large numbers of people use the photoshop native file format (.psd) for saving isolated objects with transparency, and while this is an excellent thing to do if you are using your own saved files, not all versions of photoshop may be able to use .psd files from newer versions, and of course, not everyone uses photoshop.

There are other graphic and photo editing programs out there that support layers and transparency, but may not support the .psd format. However, many of these other programs will be able to use the .png files, making them useful for a wider range of people. PNG files can also be used in some 3D-modelling programs, while they can't use the photoshop files.

Because of that, some of my files that are isolated objects or individual elements are saved in both the .psd format (for my own use) and the .png format for others to use. The PNG format is not as large in terms of file size (the image size can be the same in both a .psd file or a .png file, but the .png file size will be smaller), making it easier to upload and host on a web server, and faster to download for those using them.

You can make your own .png files if you know how to isolate something from a photograph or graphic (see the tutorials on how to do that). Open the file you want that has an object you want to isolate. Using the pen tool, create a new path, isolate the object, load the path as a selection and copy it to a new layer. Delete the background and you'll see the object on a new layer with a transparent background. Save this file as a .png and you're ready to roll anytime you need this object in another image it's ready to go.

All in all, this is a relatively versatile file format which is currently under used.

Stormy Night Tutorial for Photoshop

It Was a Dark and Stormy Night...sort of

Make a broken down shed or abandoned house into a spooky image with this simple trick in photoshop.

Start by selecing an image to "spookify" and do your image editing first - add things or remove things you don't want. Now make a duplicate layer (right click on the background image in the palette and select "duplicate layer".

Using either the Levels or curves function (image, adjustment, levels or curves) darken your image to a gloomy tone. You can either use your colour image, or use a black and white conversion filter or simply desaturate if you want a monotone. In the sample image I added a child, since this was just a picture of an old shed door, and a misty ghost-like head on the right side.

To start the spooky feeling, create a new layer and while on the new empty layer select "filter, render, and clouds" (make sure your background and foreground colours are set to black and white in the colour boxes in your tool menu). You'll have a funny black and white layer here. Now, select edit, free transform. Reshape the cloud layer by dragging the nodes up or down (vertical) or horizontally to give you the feeling of misty clouds. In my example image, I decided to have the mistiness rising up from the ground. When you are satisfied with the shape, select enter. Select screen as your layer blending mode.

Now use a large, soft eraser brush to erase the mist from any areas you don't want, and to soften the squared edge along the top or bottom. Now select filter, blur, and gaussian blur. Blur the cloud layer until you are satisfied with the way it looks.

How much of this mistiness you keep is up to you - or you can omit this layer and step altogether if you don't want a mist.

Now create another new layer above the clouds and fill it with white using your paint bucket tool. Select filter, then noise, and ad noise. Set it for 120%, and select gaussian, and monochrome from the options in the ad noise box. Select enter. Note that how much noise you ad is up to you - you can use less, or you can use more

To turn this into rain we need to use the blur filter again, this time select filter, blur, motion and select your settings - set the angle of rain to match the other elements in your image, if you have any. Set your percentage of blur to anywhere to give the look of pouring rain - this figure can vary depending on what you want and how much noise you used.

Now you will need to adjust the levels on this layer. The goal here is to make the rain white, and the background black, so adjust your levels to give you as close to a black background as you can get, with white streaks running through it. Now set your layer blending mode to screen. And you're done.

I've added a layer of lightening to mine, but it isn't necessary if you don't have it and don't want to draw any.

Simple Website Header Tutorial

Start by opening a new file of the size you require for your banner. For this tutorial we are going to use a standard width of 800 pixels. That's because there are still users with screen sizes at 800 pixels. You'll need to find out the size of your website header to create a suitable size. How high you set the pixels at is going to depend on the space you have to place your header in - in many applications you can set the height at your own choice and the website will adjust the header the space to fit. You'll have to know a little about your website or blog to decide on the height.

On this blog (the standard blogger template called Minima), the header is 650 pixels in width and I have set my image size at 648 pixels. That's because if you set it for 650, it covers the right edge of the frame. You can set the height and almost any size for the Minima header, and it will automatically adjust, so you can have a taller header than the one I am using.

The first thing we need is an idea. What is your website about? Gardening, biking, sewing, photography, fashion - whatever it is, your website header will be what identifies your site branding. You'll notice that all the headers on my different sites have a very similar design style - the header alone becomes identifiable as a site belonging to me. Those blogs and websites are "branded" with my style and logo, even though their names are different.

Once you've come up with an idea, then you need to decide on images. Naturally, this tutorial is about using images in your header, though website headers don't have to contain images. You'll also need to decide on a colour scheme - if you plan to use both a blog and a website, your colour schemes should be the same. This blog, one photo blog, my personal blog and my business website are all the same colour scheme - black and white with touches of yellow. A texture blog using a similar header is white and black, and the website it links to is also white and black. Keeping the same feel throughout your sites and blogs immediately gives visitors who travel through your sites the feeling that these are by the same person - that's branding. When someone can tell a blog is yours by it's header design and colour scheme then you've succeded in branding your business. This same style and feeling should be carried through to your business cards, letterheads, invoices, contracts, etc.

Here I've created by website header at 800 pixels wide by 450 pixels high. That's a little high for my taste, but may be too short for others. What sizes you use really depend on your own personal taste and design style, the space allowed for the header, and the page design.

My (fictitious) business is Motor-My-Cycle - restoring, buying and selling motorcycles. So I want a header that's got something about motorcycles. I've got my images chosen and my color scheme - black, blue, white and silver.

Open your first image, and size it to fit the height of your header - crop away the parts you don't want to use. Then choose "select all", then select edit and copy. Now minimize that image. Click on your blank (new) image and paste the first image into it (edit, paste). Don't worry about where it lands at the moment, unless this is the only image you plan to use.

Continue opening the images, sizing, cropping and copying them into the new image until you've got all you want. If your header is relatively small, you won't likely want too many. These images basically create the background for your text.

Once they are all loaded into the new image on their own layers, you can close all the other images. Now you being sorting out the arrangement and placement for your images. This is going to be a matter of taste, but in order to learn these simple methods, just follow the tutorial. You can rearrange your images once you've got the hang of it.


I've decided rather than having my pictures straight up and down and square I'm going to angle them for interest. To do that, make sure you have the layer active that you want to rotate (click on the layer). Now select "edit" and then "free transform". Grab one of the corner nodes and rotate your image to an angle you like. Hit "enter" to save the rotation. Move your image into the space you want it.

Simply continue transforming images - using either rotate or skew or distort - any of the transforms will work. Saving them as you find what you like. Here in this one, I've simply rotated the second image on the same angle as the first, and left the third image as it is. I've already decided I'm going to cut off some of the bottom because I found the 450 pixels too high for my liking, so I'm careful to make sure the parts of the images I want to keep are above the area I plan to cut.

If you want parts of your image transparent, make sure you are on the correct layer and use your eraser to remove the parts you don't want.

Play with your layout, turning, rotating, moving things until you've got something you like. Once you've got there, you'll be ready to add the text.


I've decided to reserve a large portion of this header for text, and that I want to a frame work to separate the images from the text. I've added a new layer where I'm going to create this frame.


I want the frame to be a silvery colour, so I've chosen a light gray to start with. On the empty layer, use your square selection and create a rectangle of the width and height for one section of your frame.

The one you see here is going to be a dividing line between text and images. Fill your selection with the colour you've chosen for your frame. Continue framing the header by selecting the other edges the same way, and filling them with your colour.

Here you can see my frame in place and ready to be embellished or styled.


I've decided I want part of the black motorcycle out over the frame, so I've copied part of the tire (draw a selection around the area you want to copy) and pasted it over the frame layer.


Now I've added the "bevel and emboss" style to layer with the frame on it. This one uses the inner bevel style, and I've selected "down" - you'll notice it seems to make the images pop off the page a little.


The last step is to add my text. Choose a font style that suits you and your business. For instance, it isn't a good choice to choose an elegrant script for my text on this image - unless of coursee the owner of the business is a woman, and she opts to do that to give this branding a feminine feeling. Try to choose somethat suits both the business and the person.

Okay, I've got my text in place, and I'm ready to save it. First, save your file as a layered .psd file. This allows you to make changes and adjustments later. Once you've saved the .psd file you can flatten the layers and save it as a .jpg to upload to your website or blog.

New Template & Photo Frames

I've been working on setting up a couple of new sections on our Free-3D-Textures site; I mentioned this in a previous post that contained the tutorial for using the free photoshop edges (if you missed the tutorial, you can find it here.

It just seemed a lot simpler to set up individual sections for the edges & frames, and one for the template files than having to search through various tutorials to find the downloads for those files.


Now, we've got a section started for Photo Edges & Frames, and one for Photoshop Templates.

The Edges & Frames section has some new photo frames uploaded for you - these are in .png format with transparent backgrounds. At the current time, I think we have nine free photo frames ready to use - all of them designed to print at 8 X 10, or 8.5 X 11. Most can be up-sized a little without losing too much quality and of course all of them can be downsized to fit your photograph.

The templates page mostly contains the 2010 calendar templates, including the forever calendar and the folding pocket calendar. More will be added as I get time. You'll also find two templates for seed packets - one is the wedding seed packet from one of our previous tutorials, and one is a new design - a garden seed packet. This sample one includes the nasturtiums images, design and texts, but because they are on photoshop layers it's going to pretty simple to replace these with your own text and designs.

Hopefully you'll find these new sections will save you some time when you are looking for a specific file from one of our tutorials.

Creating a Text Logo in Photoshop

One of the recent requests I received was how to create a text logo in photoshop. This tutorial will show you how to create a text logo on a transparent background and saved as a .png file to preserve it's transparency.

Saving your logo on a transparent background opens it up for all kinds of uses, from image logos and watermarks to t-shirts and hats. In order to make a multi-purpose logo you need a good design idea to begin with - this doesn't have to be just text, it can include both text and image or graphics. Then you have to make the original file large enough to be suitable for print.

Anyone working in logo design would normally design their logo in Adobe Illustrator, creating what's called an eps file. This is a file type that is not based on the same technology as the .jpg files we create in photoshop. Photoshop files are based on pixels. Because we are dealing with beginners here, we are going to be working in photoshop (besides, although I do have Illustrator, I'm not very good with it).

You'll be creating a design that you can print at 8 X 10 inches. Since it isn't very likely you'll be putting this design on a billboard (at least not right away), this size is more than suitable for marking your printable posters, or for using on your business cards, letterheads, invoices and contracts, and can still be printed large enough for a tee or hoodie. And on top of that, this one design can be used as your website header, or part of your website header and your custom watermark.

An "all-in-one", good-for-everything (almost) image or logo that represents you or your business, or both.

The most difficult thing you'll be doing in this tutorial is typing text and arranging it into a suitable placement. Make sure you select font styles and text layouts that are unique, or that blend well together to create a look that is all your own - after all, you don't want your logo to look just like someone else's - you want it to represent you and your own style.

You can download the tutorial in .pdf format from this link. PLEASE REMEMBER: the tutorial is locked to prevent hotlinking from other sites. If you want to share this tutorial, please just link to this page. The unlock password for this tutorial is: notheft

Using Photo Edges & Frames in Photoshop

Here's a quick and easy way to add some fun framing to your digital photos using photoshop and these free photo edge designs.

Give your image a faded edge look using one of the blurred designs, or give it an old-time framed look. There are currently 8 new edge designs uploaded on Free-3D-Textures.

Oh, did I forget to mention we're adding a couple of new sections over the next month or two. One will contain photo edges in .jpg format and photo frames in .png format, and the other will contain template files for things like the various calendars and other projects we have on this blog. Having the files available on their own download page will make it a lot easier to find the one you want.

Here's what one of these photo edge files looks like. These are black and white for a reason. Wherever you see the black will be transparent, and whatever is white is the design that will appear on your image. These are pretty simple to use. You copy the file to a new layer above your image. Select "screen" as the blending method, and voila - a photo edge or frame. These have been around for quite a while...they were pretty popular back when I was first learning photoshop, but I haven't actually seen any for quite some time. These 8 files are brand new - with designs suitable for a variety of home uses. These can be used to frame a greeting card design, or for use in preparing images for collage. You can resize these frames over your image by selecting the "edit" option from your photoshop menu, then select "free transform" option and drag the frame to fit your image.

Depending on the image used as the background, some of these will create interesting effects if you use other blending methods. Have a look at this one which used the "difference" blending method.

Because the frames are white, you can also make some colour adjustments using the layer styles and colour channels. This one shows the frame as yellow by changing the colour channels (to see the settings, click the small images to open the larger size). Or, if you're in the mood to add some texture, use the texture option in the layer style.




Just because these are designed to work as white finishes doesn't mean they have to stay that way. Have a little fun experimenting with ways to use these frames.

I almost forgot! To download all 8 photo edges in full size go to the Photo Edges page on Free-3D-Textures.com.