DIY framing in Photoshop

DIY framing in Photoshop

Make your own remarkable frame

diy framing in photoshopThere are tons of free frames available on the Internet. They’re fun to use. But wouldn’t it be great to make your own frame? If you have a photo program that works with layers, it’s not that hard.

I have made the frame in the accompanying picture with a bristle brush. I love the imperfection of a handmade drawing. Of course there are ways to make it digitally though you will probably need a drawing tablet to get a similar result.

I’ll explain step by step how you can make a frame like the one shown here. And I’ll also give alternatives, so you know how you can customize it to your own liking.

I use Adobe Photoshop, but Photoshop Elements or any other program that works in layers will do. Gimp and PaintShopPro seem to give good results, although I don’t know them myself. I am an Apple user by religion 🙂

What do you need?
A picture you want to level up

red tulips
Tulip fields in april in Holland

The picture can either be a really good one, so you want it to stand out extraordinarily. Or it can be a picture that isn’t very good, but that has others reasons to be handled with extra care. For instance, it’s a picture that resembles great memories and you want to combine several of those memories into one image.

A self-made frame
Try to think in layers on forehand

painted frames
Self-made frames, paint on paper that was spanned on plywood

Although I adore my computer I am from the age of paint and stained fingers. So I make my frames with real paint or ink as in this example. But in any photo program there are tools to make similar quadrangles and spots in a digital way.

The tricky part when painting
Wet paper crinkles easily

crinkled paper
Wetted paper will not dry flat

Paper that is not supported in any way will stay bubbled after getting wet and drying. You can easily prevent this by adhering the paper on the edges. (Have a look at this painting in Museum Insel Hombroich – talk about crumbled paper!)

The easy way
Which is of course more expensive

If you can afford it, you can buy a block of quality paper. It’s quite expensive but the color and the surface are really grand. Because the sides are pressed together it doesn’t matter that the paper gets wet: it will dry flat every single time. It’s for sale in any good art supply store.

[bol_product_links block_id=”bol_56ac90bdedc6a_selected-products” products=”9200000048036533,9200000015710699,9200000038490164″ name=”framing” sub_id=”mag” link_color=”003399″ subtitle_color=”000000″ pricetype_color=”000000″ price_color=”CC3300″ deliverytime_color=”009900″ background_color=”FFFFFF” border_color=”D2D2D2″ width=”600″ cols=”3″ show_bol_logo=”undefined” show_price=”1″ show_rating=”1″ show_deliverytime=”1″ link_target=”1″ image_size=”1″ admin_preview=”1″]

The difficult way

And more affordable with the same or even a better result

I use water-resistant plywood to span the paper. As you can see I pull the old layers of paper tape off and use the board several times.

  1. Gather the following: plywood board, paper tape, a sheet of paper, a sponge and a bowl of water
  2. Use a sheet of good quality paper and wet it with a non-marking sponge. The paper will swell. Make sure the paper is wetted evenly
  3. Let it rest for a couple of minutes
  4. Tear the paper tape to the desired length. Wet the pieces of paper tape and let them rest for a moment too
  5. Place the paper on the plywood and rub it gently from the center to the sides
  6. Paste one long side with a strip of tape
  7. Rub the paper again on the board until it’s more or less flat and adhere the opposite side. And then the two short sides
  8. Let it dry completely, before you paint on it

spanning paper
I use water-resistant plywood to span the paper. As you can see I pull the old layers of paper tape off and use the board several times.

Good preparation is half the job

Collect the right tools for the other half of the job

tools of the artist
Usually I’ll try both ink and paint with different kind of brushes, because they will give a varied texture

Once the paper is tight and flat in front of you, draw all kind of frames on it.
The paper will swell again of course, but because of the paper tape it will dry up nicely time and again.

Sometimes I draw rectangles in the ratio of the photographs I am going to use. Sometimes I draw freeform shapes. You can do whatever is to your liking. Just make sure that the contrast between the color of the paper and the color of the ink or paint is high enough.

From old-fashioned to new media

Scanning, choosing, masking

making a frame diy
For the intro picture I chose a painted, stripy blot.

I scan all the frames I have made and choose which one to use after that. The reason to scan also the frames that are not completely right is to be able to digitally copy and paste parts of them.

Open the scan in your editing program.

magic wand in photoshop
The magic wand in Photoshop or another photo program

I am a huge fan of Adobe Photoshop, but any other photo editing program if fine too.
By varying the value of the magic wand you can select as much of the smudge as you want.

magic wand photoshop

Layers make my life so much easier

framing in photoshop

Copy the selection and paste it in a new layer on your picture.

masking in prhotoshop
I made the mask yellow so you can see what I selected

Invert the selection and activate the layer with the picture. And throw away the selected part.

frame diy photoshop
The result

I added another layer that I made yellow, well, kind of yellow. The main reason being that it supports the explanation. Generally I would make that layer white to make the spot stand out more.

Layering

My article about a selfmade card is also about layers in Photoshop.

DIY How to create your own personal card with layers in Photoshop

DIY: How to create your own personal card with layers in Photoshop

I made this article about a way to use layers in Photoshop in March, right before Easter. But you can apply the tips to any kind of card, in any season.

Sweet memories

easter eggWhen I was a kid my mother used to paint eggs together with me. I have to admit, she wasn’t very creative. So the painting meant putting dye in a saucepan with boiling water and cooking the eggs in it for 7 minutes.

Noticing my mother was not very creative is a finding in retrospect and didn’t have any influence on the warm, cozy feelings I still have for the activity. It is a cherished memory!
I haven’t painted a real egg since childhood, but I still decorate eggs. On my screen and I print them either on thin cardboard or on photo paper.

Let’s start simple

I make my drawings either in Adobe Illustrator or in Adobe Photoshop, but any program with the possibility to work in layers will do. In this example I drew the egg in Illustrator and added the other stuff in Photoshop.

layers in photoshop

Step 1

Fill the first layer with a light color you like.

Step 2

Draw an egg on the second layer in a color that is a different and darker color than the first layer.

drawing

Step 3

In the next layer draw as if you are decorating an Easter egg. Don’t mind going overboard, we’ll fix that later.
I love decorations that are not very precise and geometrically, but if you do want it precise or even symmetrically, then Illustrator would be a better place to draw. (You can copy and paste it later in Photoshop).

selections in photoshop

Step 4

Select the egg in layer 2 and invert the selection.
Menu Select > Load selection > Channel transparancy > check button invert.

photoshop layers

Step 5

With the selection still active go to layer 3 and hit the backspace button on your keyboard.
Now you have thrown away all the extra frills and created a flawless egg.

adding text

Step 6

Before entering the text, add a new layer first. You’ll discover why in the next step.
You can select the text the same way as we selected the egg (don’t invert this time). But you can also use the magic wand tool.

adding shadow

Step 7

The card in step 6 is pretty straight forward, don’t you think? Let’s make it more interesting by adding a shadow to the text.
After selecting the text make sure you are going to layer 4. Use the feather tool. The number of pixels depends on the measure of your card, so you’ll have to experiment a little bit. Than fill the selection with black or grey. Finally move the layer a little bit to the right and the bottom.
Want to move it to the left? No problem, it’s your choice.

There is an easier way of making the shadow by using layer effects. Usually I prefer the separate layers to be more free and add or erase parts if I want to.

layer in photoshop

Step 8

Step 7 could be the final step, but if you’d rather have a 3D egg, you can go on.
Add a layer behind the egg. Select the egg, feather, fill with black or grey. So far this is the same procedure as we did with the text. But if we would leave it like that, it would look like a shadow on the wall. A shadow that is on the ground looks more natural.
You do this by distorting the shadow to a much smaller size.

3d drawing

Step 9

The shadow must not be too dark, so you either make the layer more transparant, or you use gray to begin with. Move the layer in the same directions you used for the letters.
To make the illusion complete there has to be a little shadow on the side of the egg.
Make a new layer on top of the egg. There are two ways to add the shadow:

  1. You can use a feathered brush and apply thin layers until it looks good;
  2. Or draw the desired form with the lasso tool, feather and fill.

changing the color

Step 10

After step 9 you can again make the decision that you have had enough. Or you can really go wild and add more eggs.
We still have all the different layers, but for this step it is more convenient if you make one layer of all the layers that are part of the egg. Than you can easly duplicate the layer as many times as you want. You can resize the egg. And a really cool tool is changing the hue. For this go to menu Enhance > Adjust Color > Adjust Hue/Saturation and play as much as you want.

Results A B and C

card1card2card3

Which card do you like the most? Let me know in the commentbox below.

I am a big fan of Adobe Photoshop

As a graphic designer for my profession and fanatic photographer for my hobby I am an intensive user of Adobe Photoshop. I started working with it in 1991 (version 2!) on a computer that had a 4Mb working memory. 🙂
If you only occasionaly crop a picture or change the colors a little bit Adobe Elements will be sufficient. But if you want to work in layers, have absolute control on the effects that you add and want to use channels and masks, then Adobe Photoshop is the best choice. Don’t let all the possiblities overwhelm you, but start with step-by-step tutorials for a specific product, like this card.

Do you want your own favicon on your website?

A favicon is a small image identifying a website. Depending on your browser you see it in the tab at the top or in front of the web address. Mine is an image of the 2 c’s of CleverCreating. Have a look at the top of this page!

This only works on a website to maintain yourself. Not on for instance a blogger-website or a wordpress.com-website.

favicon by CLEVERcreating

A favicon as my gift to you

I made 36 favicons for you to choose from. 🙂
Download a zipfile using this button:

User’s Guide:

  1. Choose a nice favicon.
  2. Download the zip-file with all the favicons in it.
  3. Open the zip-file by double-clicking it.
  4. Right-click the chosen letter or number and change the name to favicon.ico
  5. Put the ico-file into the root of your website.
  6. Usually, you will see the favicon at your web address (if necessary, refresh the browser). Sometimes your index page needs an additional code. Ask me for it if you don’t see it after refreshing the browser.
  7. P.S. Please only use it personal. These are not meant for selling!

If you are interested in more information then have a look at this wikipedia page.