From RoyalTutorial Images

You can create widgets to display your photos on your blog in interesting ways. Flickr calls this a badge. You can create an HTML badge or a Javascript badge and add them to your blog. I created a couple of different sized badges that I provide to other bloggers so they can share my Photo-A-Day photos on their blog. IT is a really easy thing to do. First you have to find it. Scroll to the bottom of your Flickr page and locate the link to Tools.

From RoyalTutorial Images

From there you are going to go to the page where you can download the Flickr uploader and other tools for posting photos to Flickr, but what about expanding Flickr. For that you need to locate the link to Hey! Where is the badge?.

From RoyalTutorial Images

At this point you are presented with a choice. Will you create an HTML badge or a Javascript badge. Let’s opt for the HTML badge, more compatible with many of the free services that won’t allow javascript. Pick your poison (HTML or javascript) and then we can pick the flavor (content).

From RoyalTutorial Images

You can now choose to display your photos, a group’s photos or everyone’s photos. If you are looking to just display photos from your own set then you can choose that set. I decided that I wanted to display all of my photos that were tagged with “photo-a-day”

From RoyalTutorial Images

Once you’ve chosen the content for your badge you are presented with options to choose how that badge is going to look, will it be vertical or horizontal, will you use square images, thumbnails or mid-size images. How many images would you like to display (1,3,5 or 10). Do you want the most recent or a random selection of images? And, do you want your buddy icon (avatar) on the badge. You can also junk everything and style the badge by yourself, but that would be in another tutorial)

From RoyalTutorial Images

Once you have made your selections you can then choose the colors for the badge. You can change the background, border, links and text. You can also remove the background and border. This is a great way to match your new Flickr badge to your current blog theme. Once this is complete you can get the code so that you can post it to your site.

From RoyalTutorial Images

On the code page all you can do is copy the code. You cannot edit the code on this page because it will always revert to the code that Flickr supplies. So copy the code and then post it to your blog, there you can make any edits that you wish. Here is one of the options that people can post to their own blogs of my final badge.

From RoyalTutorial Images

I tweaked the code a bit myself and can probably do much more with CSS however for the basic user going through the steps should take care of most people’s needs.

First fill your page with a dark green color, similar to the chalkboard.

From RoyalTutorial Images

Next grab the Text tool and write on up some words. Make the color something like an off white or a light yellow, the color of chalk.

From RoyalTutorial Images

At this point you can do a couple of things. You could simply simplify the text layer or you could create a selection from the text and continue from there. I suggest that you make a selection from the text because you will have a little more control with what we will do next.

Next select your paintbrush and choose the dry brushes set. Choose the last brush in the set. This is the Pastel Medium Tip.

From RoyalTutorial Images

With this brush selected you want to go and change the more options area for it. What we want to do is change the spacing on the brush to 40%.

From RoyalTutorial Images

At this point you are going to color on the new layer within the section that was made from the text. Make sure that you turn off the layer of the actual text.

From RoyalTutorial Images

Now you can see that the writing looks a little more like Chalk. You can use that same brush to draw on the chalkboard.

From RoyalTutorial Images

And then suppose that you don’t really like how it came out, you can erase what you made but to make the chalkboard more authentic you can erase like a chalkboard eraser. Go to the Smudge tool and pick another Dry Brush, this time pick the first one the Pastel on Charcoal Paper one. Set your strength around 50% too.

From RoyalTutorial Images

You can use the smudge tool to make the board look like it was erased with an actual eraser, it will get that haze that can only be cleaned with some water, and even then it never gets quite that clean.

From RoyalTutorial Images

Have fun with this one and if you want find an image of a real chalkboard and cut out the board part to add your creation into.

From RoyalTutorial Images

To make your photos into works of art is very easy. You simply go to Dumpr.net and choose Museumr. There you pick your photo or upload a photo and then choose museum you want to hang your photo in.

From RoyalTutorial Images

Once you choose Museumr then you have to decide where to get your photo. You can upload one from your computer, grab one from Flickr or even from any web url you can find. So you can do some very cool stuff with other people’s photos and send them to those people. Be creative and have fun.

From RoyalTutorial Images

Once you have selected your photo and museum then you get your finished product.

From RoyalTutorial Images

At this point you can choose to upload the photo to Flickr, save it to your computer or e-mail it to someone. Here is one of my final products.

What will you make?

From RoyalTutorial Images

1. Start with an image.

The idea that I had for my first image for my photo-a-day project year six was to put my eyes on Optimus Prime and also include the image of the 25th anniversary G1 DVD set as the Matrix of Leadership.

From RoyalTutorial Images

2. Scale down your additional images.

I took a photo of myself and then scaled the image down and lined my eyes up with Optimus’ eyes. To do this I set the opacity on the image of me down so that I could see my eyes over Optimus’ eyes.

From RoyalTutorial Images

3. Scale down any additional images.

I also wanted the box image of the DVD set to serve as the Matrix of Leadership on Optimus.

4. Create a blank layer.

You will move the layers like the eyes and the matrix above the background layer of Optimus Prime. Then I moved my mouse to the layers toolbar and specifically to the spot between the blank layer and the face layer. I hold down my alt key and then the clipping mask icon (see image at the left) comes up, I click my mouse and the eyes layer indents and you no longer see that layer. Make sure that you now click on the blank layer and you can start painting on that layer, this allows the image of the eyes to show through to the image of Optimus Prime. You can also stack multiple layers above that blank “painting” layer and that is how I created hte overall final image.

From RoyalTutorial Images

5. Painting on the Clipping Layer

By painting this layer I can easily add paint to reveal more of the underlying layers like the Face and the Matrix. I use the eraser option to put back more of the layer of Optimus. This gives you great control over what to reveal in your images. Also it doesn’t matter what color you use to paint on the clipping layer. So if you are blending multiple layers it is actually easier to organize by using different colors to correspond with the multiple layers.

From RoyalTutorial Images

6. See your final image

Here is my final image before I added some extra enhancements not related to the clipping mask.

From RoyalTutorial Images

7. Add some additional enhancements (if you want)

I didn’t think the image above was dynamic enough so I added a few lens flares and some difference clouds to give it a little more depth and interest. So, below is my final image.

From RoyalTutorial Images

From RoyalTutorial Images

This is one of my Transformers, Hot Shot. I like the image but maybe I wanted to crop in tighter and make an image where you only see one arm but that leads you up to the head and the helicopter.

From RoyalTutorial Images

That is okay but I really want to give a sense that this guy is a badass so I want to focus on this head and shoulders, the body is positioned to for action and it looks like he is ready to attack in the cropped shot below.

From RoyalTutorial Images

So as you can see I can do a lot just by taking away part of the original image and shifting the focus to other areas, it changes the whole tone of the image. I actually like the image above this one better, it gives a much better sense that this character is powerful.

So, how do you crop? What is cropping and what do I need to do to crop my image? First you need to make a setting change to the Image Size routine.

From RoyalTutorial Images

The reason that you need to go here is that you need to make a setting change that will allow you to crop and retain the detail and beauty of your image. You want to make sure a few things are checked off on the screen.

From RoyalTutorial Images

Checking off Scale Styles and Constrain proportions makes sure that you crop still looks good and your image does not get distorted in the cropping process.

More importantly than that is making sure that you check off the Resample image feature and choose Bicubic. I’m going to let Wikipedia explain more on that, it is math related and well I just know it works and that is good enough for me. Using that feature has never steered me wrong. When you check off Resample image then the Pixel Dimensions box becomes available for you to use, this is good because when you are making graphics for your blog you’re going to care about pixels not inches.

From RoyalTutorial Images

Once you have made those setting changes then you can go back to the work area, click on the crop tool and crop your image. Like this:

From RoyalTutorial Images

You may want to have some more control over your crop so you are going to want to make some changes to the tool settings depending upon what yo want to crop and how you want it to look. So this is these are the options that come up when you click on the crop tool.

From RoyalTutorial Images

With this tool you have control over Aspect Ratio, Height and Width as well as resolution. You can also quickly change the values in the height and width boxes by clicking the arrows in between those boxes.

There are some pre-defined choices under the aspect ratio box, using this you can make images that fit very specific sizes or you can just do your own thing and set the no restriction on the crop and just crop with your eye.

From RoyalTutorial Images

If you choose one of the pre-defined options then as you drag the crop tool across your photo the box you create will be the size of the final crop. I had been cropping my images to 8×10 but changed to 5×7 because I can get a wider crop, or at least is seems that way.

From RoyalTutorial Images

I use a custom crop each week for the post image for every Royal Tutorial article I write. That custom is 200 pixels X 200 pixels. I can easily set that as a custom crop with the crop tool. Like this.

From RoyalTutorial Images

So that is it, cropping make easy and less scary. Experiment and tell me more about how your images look after being cropped.

The first thing you need to do is head to Dumpr.net. On the main page click on Photo-to-Sketch.

From RoyalTutorial Images

This will take you to the next area where you can select your photo. Here you can upload a photo, pull in a photo from a url or link directly to your Flickr account. I link directly to my Flickr account because I can also upload my new creation right away. So here I click on a photo from my photostream. The only issue is that you can only select from the past 40 or 50 recent photos.

From RoyalTutorial Images

After I select my photo I click continue and instantly my photo is rendered into a very cool looking sketch. I’ve noticed that sketches of people work much better than other items. Each one I made up of my daughter Eva worked fantastic. When I tried her teddy bear it didn’t work very well at all.

From RoyalTutorial Images

Once the photo has been rendered into a sketch Dumpr.net gives you a ton of options with which to share your cool creation. There are social bookmarks, the ability to send it as a card, or just e-mail it as an attachment or even upload directly to your Flickr account (required that you authorize Dumpr.net as an entity able to upload to your account.). I choose to upload to Flickr and the photo appears right in my photo stream.

From RoyalTutorial Images

Try making a few of these and please leave me links to your creations in the post comments. What will you create?

From RoyalTutorial

Open that up in Elements. So now you have your logo open in Elements.

From RoyalTutorial

Then open your image. I take photos every day and this is the first year that I’ve started adding a watermarked logo to my images. I’ll use this photo of the sky as my example. I then pull that image into Elements.

From RoyalTutorial

The next thing you are going to need to do is drag the logo into the image of the sky. Make sure the image of the logo is the one that you are on then switch to the pointer tool, click and drag that image onto the Sky image. The logo will appear on the sky photo as a new layer.

From RoyalTutorial

Now take a look at the layers. Layers are your friend, they are not scary and you can do so much with them.

From RoyalTutorial

Now position the logo somewhere on your photo by clicking and moving the layer with the pointer tool. You can also stretch it out so that it is the size you would like it to be. I like my logo to be prominent so I usually put it as a large size in the corner of the image. Once my logo is where I would like it I then change the opacity of the logo layer. This gives it that watermarked or ghosted look. The opacity is on a slider so just move it to where you are comfortable and what looks good to you. I start at, and mostly stay at, 50%.

From RoyalTutorial

And then I save my image.

From RoyalTutorial

Now you are done, and you have a great watermarked and branded photo.