Part Two in the Photo Blog How-To mini-series.
Resizing & Watermarking your images for your Photo Blog.
You will need to have PhotoShop for this process. I am sure there are several ways to do this. I like all my blog images to be the same size (it makes me feel happy. Is that sad?), and I like to make sure they are copyrighted, so this is the process I went through to create my own action to prepair my photos for uploading.
1 ] Open PhotoShop
2 ] Click “File”, “New”
3 ] You want to create a transparent document that is the exact size you want your photos to be on your blog, so it has to fit within the template [see previous post for changing your HTML to create bigger blogger photos]. I use a horizontal transparent document that is 850 pixels wide and 550 pixels tall. This will be the base for your Resize & Watermark Action.
4 ] Your next step is to add a layer to this document that has your logo watermark displayed in whatever fashion you like. I use the “E” from my logo, and the copyright symbol.
5 ] You want to save this document in an easy place to access and remember. DO NOT FLATTEN THE DOCUMENT. You want to save it as a PSD file, not a JPEG or it won’t work.
6 ] You can close that file, and go ahead and open a photo you’d like to watermark for your blog. This is the photo you will use to create your Resize & Watermark action in photoshop.
7 ] On your Actions Palette, click on the “Create New Action” icon, and give your new action a name. I call mine “Blogisize Horizontal”.
8 ] Click the “Record” .
9 ] Photoshop is now going to record the steps you want to take with your image. If you goof, you can just select the goof and delete it. Or you can delete the entire action. So don’t stress.
10 ] Step One of your action is going to be resizing the image. Go to “Image”, then “Image Size”. Set your pixel width and height (in my case, 850 and 550). Drop the resolution to 72 for faster uploading, and choose “Bicubic Sharper -best for reduction” at the bottom. Click Okay.
11 ] Step Two of your action is going to “File”, “Open” and then open your transparent watermark document you created earlier. Now you have your image resized, and you have the document it will be going on.
12 ] What you want to do is click on the little down arrow at the top right-hand corner of your Actions Palette. Go down to “Insert Stop”. This is going to allow you to move your image onto your watermark document, so click “Insert Stop” and you can write yourself a note in the box if you want that says “Click on Move Tool and move image onto watermark doc.” Click Okay.
13 ] Click on the Move Tool at the very top of your tool palette, select your resized image and move and center it onto your watermark document (it will be cropped slightly).
14 ] On your Layers Palette, select the layer that has your image on it, and move it to the back so that your watermark is on top of your image.
15 ] Last Step – go to “Layers” at your top menu bar, then down to the bottom to “Flatten”. The click the “Stop Recording” icon on your Actions Palette.
16 ] Go to “File”, “Save As”, and save your image. I always rename mine to IMGB (b for blog) and then the image number, and save them to my desktop for uploading. Once they are uploaded, I move them to a “Blogged” folder within the clients main photo folder.
Now, to use your action, just open a photo in PhotoShop, and click “Play” on your Blogisize action, use the Move Tool to when you’re prompted, then click play again to finish the action. It will run for you, then you just have to save it and go onto the next one!
There you go! A resized, watermarked image ready for uploading. I know it sounds like a lot of steps, but it’s actually so simple – especially once you have your action made.
Part Three: Uploading Bigger Blogger Photos.
This is the last part!
I know there are lots of photo sites out there, but I am extremely partial to Flickr. I like it. It gives me warm fuzzies. So I upload ALL my blog images to Flickr and then post them on my blog, and I will show you how to do that.
STEP TWO: On your home page, you’ll see a link that says “Upload Photos or Video”. Click on that, then click “Choose Photos and Videos”. Select the images you want to upload from the little box that pops up, and let send them off on their way. You can give them Titles and Tags (the tags help people find your photos when they’re searching for specifics), and put them into a specific folder.
STEP THREE: Once your photos are all uploaded and titled and everything, go ahead and click on one. Then click the “All Sizes” icon at from the menu above the photo. This will give you the big (850×550 px) photo, and you’ll notice that underneath it is a box with the HTML of that photo in it. That’s what you want. Highlight, and COPY all of that code.
STEP FOUR: In a new window, have your blog open with the new post you are going to be working on. At the top, next to the “Compose” tab is the “Edit Html” tab. Go ahead and click on that. This is where you will, one by one, paste the Html coding from each picture you want to have on your blog. I like to hit return 3 times between each block of code that I paste to give me plenty of room to write.
STEP FIVE: When you have copied and pasted the coding for each of the photos you want to post, you can click on the “Compose” tab again, and all your pictures should show up now. You can type text, etc. until you’re done and then go ahead and publish.
By uploading to Flickr first, you not only have the ability to get the full-size big images you want, but it also protects and copyrights your work. Each photo is a link to where it is posted on Flickr, so you’re good to go.
See?
Okay, I hope that was helpful to some of you! Feel free to leave a comment if you have any questions (or comments for that matter).
1 comment
Tara Sanderson - What a fantastic last image. Sorry – I know it is not what you were writing about… but beautiful.