Hello & TGIF everyone!! This fun, hands-on [Photography Q&A] blog post comes in two parts. First we’ll chat about how to make your images PERFECTLY web-ready, and then we’ll chat about how to make a good watermark and template! Ready to get your hands dirty?
[Meg] asks, “I am having a heck of a time with facebook photos looking grainy, soft, and losing color when I post them. I have noticed yours look great….Is there a secret? How do you re-size and sharpen for facebook?”
[Elissa] asks, “Hi Michelle, I’d love [a] lesson on watermarks. I guess I should start putting them on, but they mostly look so ugly. Yours look really classy and pretty though – any suggestions?”
GET ‘EM READY FOR WEB!
First, open your image(s) that you would like to blog, share, facebook, tweet, etc. into [Photoshop]. I use CS3, but CS2, or CS4 is good too!
We’ll get into watermarking & blog templates in just a minute….
Then I re-size to my appropriate blog size. My [ProPhotoBlog] is set to the standard 900 pixels wide. I wanted to have nice big, clear images – without overwhelming the viewers. (Which is why I display vertical images in sets of TWO. Having a vertical frame 900 pixels wide would be TOO TALL to fit on most screens)
THEN – This is where the magic happens! It’s SO SIMPLE! I use [Totally Rad Actions] “Sharpen for Web” from the Original Action Set.
I’ve also head that [Totally Rad Actions] “A Better Web Sharpen” from TRA2 – The Revenge, is pretty good too. I can’t really tell the difference, but you can compare between this image, and the one above. I prefer the one above!
After water-marking the images, I then upload to [Facebook]. It’s not perfect, but it does look okay. This image below, is a screen-shot from my [Fanpage].
(Facebook images never display larger than 600 pixels wide, so keeping them small, and sharpening them, will help them stay looking their best)
Wrapping up part one, here are the KEY POINTS for having good resolution images!
*Re-size your images FIRST. Make sure they are less than 900 pixels wide BEFORE you use the web-sharpen!
*Use a good action for sharpening like the ones from [Totally Rad Actions].
*Use your OWN server/ftp to upload images for your BLOG. I have found that using sites such as flickr, photobucket, or your blog’s own uploading system damages the integrity of the images. Keep reading to learn how to upload your images!
*NEVER use “save for web” in Photoshop. It does weird things to your images!
*DON’T save your JPG’s over and over again. Start with the original image (PSD or TIFF file) – then save for web. Each time you save a JPG the integrity of the image is damaged, and over time it will start to look worse for wear with each save!
It’s really subtle, but here’s a BEFORE/AFTER comparison of [Totally Rad Actions] “Sharpen for Web”. The BEFORE is on the left, and the AFTER is on the right.
WATERMARK ‘EM!
If you DON’T have a logo, or just want to use text for your web-ready watermark, then read this step-by-step guide to creating a watermark action.
If you DO have a logo, then skip ahead to the TEMPLATE IT! section.
DO keep reading if you want to learn how to create an ACTION! – They are really useful for MANY things!
*Open your photo in [Photoshop].
*Re-size for web using instructions above.
*Create a Text layer that says “Your Company Name”
*Adjust font, size, and color accordingly
*Reposition to corner you would like
*Save as .JPG
But wait, you’re thinking “Michelle, gosh, this is taking a lot of time to do!”
Well, that’s what ACTIONS & TEMPLATES are for!! Quick and easy actions to do this stuff fast, and a template to drop your images into to save for your blog!! I prefer my own personal TEMPLATES for my blog, but I know you can take your ACTION-making to the next level and fully automate those images for your blog!
Creating an ACTION!
*Open your photo in [Photoshop].
*Under “Actions” select “New Action” (if you can’t find actions, go to “Window” > “Actions” to show them on the side near Layers, etc.)
*Name action (you’ll want to make two, one for vertical images, and one for horizontal images) – then click “record”
*Re-size for web using instructions above.
*Create a Text layer that says “Your Company Name”
*Adjust font, size, and color accordingly
*Reposition to corner you would like
*(Then, we recommend using “Flatten” to squish all your layers together if you want)
*Click “Stop Recording”
*Now you have an action for that size image. Open a new image, click on the action under your list, and hit “Play”
*Repeat creating a new action for your vertical sized images.
Wrapping up part two, here are the KEY POINTS for creating a watermark and actions!
*Use ACTIONS to save time! You can create an action for your re-sizing and sharpening needs too!
*Create a SET of actions for things you do frequently, such as re-sizing, sharpening, creating a watermark, etc.
*I use ACTIONS for my blog images, creating a proof stamp for gallery images, and more!
TEMPLATE IT!
If you DO have a logo, the next best thing to do is create a “Blog Image Template”. This is an-flattened PSD file that is set and ready to go for your blog images, and you just drop your web ready files into the PSD file, then save as a JPG.
*Create a new file in [Photoshop], that is the size you need.
*You’ll want to check the dimensions, but I keep everything at 900 pixels wide and go from there.
(For example a horizontal image is 900×600 pixels, two vertical images are 900×675 pixels – each image that drops in is 450×675 pixels, etc.)
*Place your logo, text, etc. on the Template where you would like your watermark to appear.
*Add any design flourish, whether it’s a colored border, text, etc. This is where you get to be creative and create a fun looking template for all your blog images! You can use film borders, whatever, to make it unique!
*When you have everything laid out, then save as a PSD so you have the “original” template to use over and over.
-THEN-
*Use your web re-size actions you created above on the images you are prepping for the blog/facebook, etc.
*Drag images into the templates
*Save as JPG
This image for example as two vertical images sized to 450×675 pixels. My PSD file has a 5pixel line down the middle in addition to my logo in the corner. The images slip right under those layers, and voila! beautiful web-ready images.
UPLOAD EYE-CANDY TO BLOG!
LAST, but not least, you’ll want to upload those gorgeous puppies to the internet and display on your blog for the world to see!!
I HIGHLY recommend using a folder on your OWN server to get the best quality out of your images, and to protect them in the future. Places like flickr, and photobucket can affect the images, and make the color or resolution change. Plus, what if one day you decide to delete your flickr account? You’re just going to have to re-upload your images elsewhere and fix all those broken links on your blog. Yuck!
Make it SIMPLE, and have beautiful high-quality images on your blog! I’m going to teach you really quick and easy HTML!
*First, learn how to access the FTP of your website.
*Log-in via your browser, or a program like [Fetch].
(I use Fetch. It’s really simple and easy to use! Sorry PC users, I don’t know if Fetch works for you!)
*Create a folder on your site that is called something easy to remember like “Blog” or “Images”. It should end up being something like, yourwebsite.com/Blog
*Upload your blog images to Fetch. If you are on a Mac, it’s super easy! Just drag images from your computer onto the Fetch window!
NOW to use them on your BLOG!
*Create a new blog post
*Make sure you are in HTML mode
*Write your text
*Use this code to place your images
img src=”http://yourwebsite.com/Blog/nameofyourimage.jpg” just add a < in the front and a > at the end, and that will display your image! If you made your images bigger than the width of your blog, you can add a width tag to the code, and tell it how wide to display the image,
img src=”http://yourwebsite.com/Blog/nameofyourimage.jpg” width=900
Wrapping up part three, IN CONCLUSION!
Whew! You should be good to go!! I know this was SUPER long, so please feel free to jump in the comment section and leave your questions, comments, or tips with better ideas! I know everyone does these things differently, but this is what works for ME!! I hope you enjoy!! I would LOVE to hear your success stories too after you practice and have used your new skills! Thank you ALL for reading our Q&As, it makes me really happy!
Finally, please watch our little video, and submit your questions by this SUNDAY February 28th, 2010 at 10am. Feel free to ask me anything, and also, [Jenny Bowker] will be answering MAKEUP questions, so please send your makeup questions too! I look forward to hearing from you! You can use our contact form above, or by emailing us direct at [michelle@michellemoorephoto.com]. Yay! Send lots so we can make a fun video reply for you!
by Michelle Moore
28 comments