« January 2009 | Main | March 2009 »

3 posts from February 2009

Wednesday, February 25, 2009

Raw v. Jpeg - What's Really the Difference?

6568 Number 1 JPEG

By Dr. Sheila Cason
               


If you’re wondering what this whole talk about shooting “RAW” is about, then listen up because I’m about to tell you.

Basically it all comes down to data. When you take a photo, all that your camera grabs is data. If you choose the JPEG  then your camera processes the data automatically inside the camera and saves it into a JPEG format.  When you choose RAW then your camera does nothing with the data and merely hands it over to you.  It’s now left up to your computer to process the data so that you can view the image.

Better? Not quite?

Ok here’s a little more info.

A RAW FILE

A RAW file can be thought of as a digital negative. For the beginning photographer, shooting in RAW can save you from some common mistakes with exposure and white balance

RAW files are uncompressed because it saves all the data that the camera’s sensor reads, even if you don’t want or need all that data.

RAW files take up a lot of space.

By batch processing, you have the option to convert all your photos from RAW to JPEG.

RAW files show highlights and shadows better but can be flatter appearing and not as sharp.

RAW files must be processed by your computer to be viewed. 

 


A JPEG

A JPEG is an image that is available immediately.. It needs no post processing to be shared or spread through the web.

JPEG images are compressed. All the extra data you don’t want or need is thrown away.  Therefore you get a smaller file size and it’s easier to move around.

JPEG is lower in dynamic range but is  higher on contrast, and often sharper than a RAW file image.
Each time you open it and edit it, data is lost.

If you need to play around with exposure and white balance it’s tougher to do and often doesn’t lend itself to such good results.

Better now? Ok let’s compare a few untouched photos.  Here are a few that I took both in RAW and in JPEG.

Here’s the JPEG:

6568 Number 1 JPEG



Here’s the RAW (converted to JPEG with no changes):

6568 Number 2 Raw to JPEG



And here they are up close.
This is the JPEG:

JPEG Number 3 Up Close


This is the RAW File:

Raw Number 4 up close


So as you can see if you’re happy with the exposure and white balance they can appear pretty close to each other. I think the JPEG actually looks a little better with the contrast. But if you want to open it up and tinker with it, it is not so easy.

Check out my exposure mistakes. Here’s the original JPEG:

IMG_6526 Number 1 JPEG No Change



And here’s the original RAW:

6526 Number 2 Raw to JPEG No Change

 


I tried to adjust the contrast in the JPEG and it didn’t quite work.

6526 Number 3 JPEG Brightness and Contrast Adjusted



So I opened up the Raw file and additionally adjusted the exposure.

6526 Number 4 Cropped Exposure Brightness and Contrast adjusted in Raw

This is better though not as good as if I’d gotten it right in the first place.  Now when I mess up with white balance I can adjust it in RAW.  Last year I took over 600 pictures in the wrong white balance.  I know - rookie mistake!



Musical Chairs SOOTC
(Musical Chairs SOOC)

This photo is nice all warm and soft but I didn’t want the warmth- at least not in all 600 photos! So I changed it.



Musical Chairs Adjusted
(Musical Chairs Adjusted)

So what should you do?

Do what works for you. I’m a lover not a fighter so I won’t argue the point with you.  Seriously, all you need to do is just google Raw vs JPEG and you’ll see irate opinions running amok!  There’s no need to get upset.  It’s not a moral decision.  It’s a personal preference.

My personal preference is the RAW format. I like the options that RAW files offer me and if I’m running low on time then I can batch process them and convert them to JPEG.

Ultimately my goal as a photographer is to take a good photo from the get go and not rely on the computer to save me.  Having said that though, it’s nice to be able to experiment and save those less than perfect shots.  Also I find that it’s hard for me to purposely accept less data and limit myself.
But the choice is yours to make.  So tell me-which do you shoot in- RAW or JPEG?

- Sheila

NOTE: Dr. Sheila Cason is a contributing Author here at Raisin Toast.  She is a practicing Pediatrician, the mother of 3 beautiful children, and a Navy wife living with her family in Guam.  She has her own website DrCason.org where she talks about her life, her children, her practice of pediatrics, and her love of photography! 

We are proud to have Dr. Cason as a contributor to our Photography section.  I've learned a lot from her and know you will too! 

 

SusansButterflySignature 

Tuesday, February 24, 2009

Photoshop and Banner Creation Part 2 (And a Contest for You at the End! Woohoo!)

ChocolateCake

WE HAVE A WINNER!  My Sponsor handed over the job to me and Random.org, so I ran the magic number and the winner is ...

Doesn't that chocolate cake look good? 

Don't you just want a piece?


All right already!


RandomOrg 

We had 26 readers who commented for a chance to win Photoshop CS4, and I am happy to say that 16 is the Winner! 

So, who is 16?  Well, I counted 12 times to make sure I got it right.  And, the #16 is:

Catherine B.!  

CatherineB

Congratulations Catherine B.!  You've won Photoshop CS4.  


Email me at [email protected] to claim your prize. Be sure to provide your shipping address! 

Thank you to all who entered.  The odds were pretty good.  Keep tuning in for more great contests!

Have you created some banners in Photoshop yet?  Have you had a bite of that cake?  Talk about needing a chocolate fix - that slice up there will do it for sure. 

Getting back to reality - There is so much you can do to be creative in designing banners or sidebar items for your blog.  Personally, I think creating banners is fun.  All you need is Photoshop - hint hint.  And, now that I know how to rotate those image banners every time the page is refreshed, I want to share the knowledge with you. 



PeterMax

Since I am sharing the Love in this post, I thought I would share a little of Peter Max in the process. 

Yesterday's post taught you how to create a 160x600 banner in Photoshop, but don't feel limited by yesterday's lesson - the information is there for you to create banners of any size to suit your website or blog.  So, let's say you've created several banners of the same size and you want them to rotate on your site when the page is refreshed.  You know that this will keep things interesting and new and will bring energy to your site.  if you're like me, I wasn't going to be happy until I figured out how to do this with my TypePad blog. 

I realize something about myself - that even if I had a Wordpress blog, I guarantee there would be something that I would need to learn to do or I wouldn't be satisfied with it.  So, I'm stickin' with TypePad.  Not only have I been able to create a nice blog for myself, but the knowledge base and customer support have been excellent.



WebDesignMess

I only recently decided to learn how to use Advanced Templates within TypePad  so that I could customize my blog.   I did not like the way it looked and wanted to add a professional look and feel to it.  I also wanted it to reflect my personality.  The only way I could do this was to learn some web design and understand the fundamentals of CSS and html on my own.  And, if any of you have been here a while, you know why - because we're broke!  Big Bear has been busy looking for a job since his layoff and, well, I don't have thousands of dollars to spend on a blog redesign, so I had to figure it out myself or forget it.  Even that wasn't enough for me, though.  I wanted that stinkin' random image thing in my sidebar.  I'm persistent. 

Well, thanks to that persistence, I learned how to accomplish this within a TypePad blog, and the good news is that you can add this script to your blog too.  If you don't have a TypePad blog, you may have to contact your blog's customer support if you don't know where or how to add the java script to your sidebar, but here, I will explain how to do this within TypePad, and then you can figure out how to use the script within your blog if you use Wordpress or Blogger or some other blog platform.



Let's get started.  Here are some banners that I have created in Photoshop:



TuckThemIn160x600 ILVMYCHILDRENBANNER160X600
TKASTROLL160X600BANNER BigBearBanner160x600 copy

Despite how it looks, each banner is 160x600.  After you have created your banners in Photoshop, you will want to save them to a folder on your computer where you can easily find them.



TypePad1

Now, open up your TypePad account (if you have one) and click on your "Control Panel" tab.  If you use another blog platform, you will need to go to the area of your blog where you can upload images that will be used for placement within your blog.



TypePad2

Once you are in your Control Panel, click on the "Files" tab.  In TypePad, this is where your folders and images are kept that are used within your blog. 



TypePad3

Click on "Browse" to upload your banner images, one at a time, to your File Manager.



TypePad4  

Click on the image or images that you uploaded into your File Manager (one at a time) to get their url (web address).  I like to have multiple tabs open in my browser rather than multiple browser windows.  In this case, I opened up each image that I had uploaded into a tab of its own in my browser making it easy to copy the url when I need it to put into the random image generator script.



TypePad5

In another tab, open up your TypePad account and click on "TypeLists."



TypePad6

You will want to "Create a new TypeList"
  
    1. List Type: Notes
    2. List Name: (Give it a name that will identify what the TypeList is).

When you give your TypeList a name, if you put the following code ( <!--YourTypeListName--> ) before and after the name, it will not be visible on your blog.  In other words, your banner image will show up, but the name of the list itself will not be in text above the banner image on your blog.  Hope that makes sense.  So, if you don't want the name of the TypeList that your image banners are in to show up (and I didn't), then write the List Name like this:

<!--TYPELISTNAMEGOESHERE-->

Otherwise, just type in the name of your TypeList and forget the dashes and symbols before and after.  By putting the symbols as you see here (in red) before and after the name you give your TypeList, the name will not show up on the page with your image.  Don't you just love sneaky little tips like this?



TypePad7

Now that you have created a new TypeList "Notes"  List, you want to place the script for the random image generator into the box.  (Note: Leave the box "Label"  blank.

Here is the script that you will put in your TypeList 'Notes' box:

<!-- BEGIN CODE FOR RANDOM SIDEBAR BANNER -->
<div align="center">
<SCRIPT LANGUAGE="Javascript"><!--

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
//
// Modified for use in CSB and Trellix by Samantha Conway
// MUST change gEMDIR to GEMDIR before using code!!!
// ***********************************************

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE1.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE2.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE3.jpg' border='0'>"
image[number++] = "<img src='http://yourblog.typepad.com/IMAGE4.jpg' border='0'>"
// keep adding items here...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
</div>
<!-- END CODE FOR RANDOM SIDEBAR BANNER -->


Everything that you see above in GREEN is part of the script and needs to be in the box.  The only change you will make to this script is the url (web address) of each of your images that you want to rotate.  And, remember, we opened up your images in individual tabs in your browser so that you know the address of each image and can copy and paste it fast and easy.

Put the url for each image (image 1, image 2, image 3, image 4, etc...) into the script.  These are the images that will rotate on your blog.  So, if I put this TypeList in my left (alpha) sidebar, the images, each of which are 160x600 in my case, will rotate every time the page is refreshed.

Now that you've created a TypeList with this script and you've added the url's of the images you want to rotate on your blog to the script ...  Now what?

Click "Save"  then click on the tab that reads "Publish"



TypePad8

As you can see here, all of my Templates in TypePad are Advanced Templates.  It wasn't always like that.  I had the basic templates for a long time and yes, they are a lot easier to use, however, you are limited in the customizations you can make within a basic template.  If you want to really get down to the nitty-gritty of customizing your TypePad blog, you'll want to be in Advanced Templates.  For me, I just had to swallow my insecurities and believe in myself enough that I could learn how to design a blog that was uniquely my own within Advanced Templates.  It was scary at first, but I did it, and I am happy with the way Raisin Toast looks and functions - at least for now. 

When I find new things that I want to add to my site, like wanting my image banners in the sidebar to rotate when the page is refreshed, I have to learn how to do it myself.  And when I learn it - I'm going to share it with you, so you, too, can add some cool features to your blog!



TypePad8

Now, see that Template Tag that the red arrow is pointing to?  Copy that Template Tag.

Open up your blog's template, beginning with the Main Index Template, and place that code exactly where you want your images to show up in your sidebar.  In my case, my images pop up on the Homepage in the left (alpha) sidebar. 

That's it!  It really isn't as difficult as it looks.  You'll get the hang of it. 

However, because I love you all for dropping by and taking the time to visit my little corner of the web, I have a surprise for you just so that you can start creating some really great banners for your site or for advertising, or both! 



AdobePhotoshopCS4

How would you like your own copy of Adobe Photoshop CS4?  I thought so.  Just answer this question in the comments:

What drives you to be creative? 

Now, here's the deal, because I am starting this contest at 2am (I had a rough day yesterday - sorry for the late Monday, now Tuesday, post), I am going to end this contest at 12pm (Noon) EST on Wednesday.  This is a sponsored contest and the sponsor has indicated to me that he wants to choose the winner from his basket of tricks which is fine with me.  The winner will be announced on Wednesday evening around 9pm EST. 

So, tell your friends, tell your family, call up your buddies, call up your kids, and tell them to stop on over to Raisin Toast  to learn how to create cool banners for your sidebar and to enter this great contest to win Photoshop CS4! 

One Entry Per Person please.

Contest entries will be closed at 12pm (Noon) EST on Wednesday, February 25th.

Winner will be announced at approximately 9pm EST Wednesday evening.

Good Luck!  Yippee! DeeDooDah 

 

SusansButterflySignature 

Monday, February 23, 2009

Photoshop and Banner Creation

ChocolateCake

I don't know about you, but I get all excited and happy when I learn something new.  Especially when it is something that I have been trying to figure out how to do for well over a week.  I'm sure you want to know what it is that I've learned how to do that has given me so much thrill today?  Random images.  Hey, it doesn't take much to make me happy, and thanks to Brianna over at TypePad, I'm as happy as if I had a slice of chocolate cake with chocolate fudge icing right about now.

If anybody reading this has a blog or a website, you know that keeping things fresh is important to keeping your audience.  But, as a TypePad blogger, we don't have the luxury of "plug-ins" like you have over at Wordpress.  However, we have a lot of other things that make TypePad great and easy to use once you get the hang of it.   I love TypePad, and know that it has just as many full featured abilities as Wordpress - you just have to pick it apart a bit and learn a few tricks to figure it out.

You can find many of these tricks over at TypePad Hacks.  I think I've just about hacked that site apart trying to figure out how to do things in Advanced Templates.  Fortunately for me, though, I've had fun doing it.  One thing I could not find was a script for creating random images so that every time you refresh the page, a different image pops up.  Until today.

Thanks to Brianna at TypePad, she has worked with me over the past several days trying to find a script that works to generate random images.  She found it.  I put the script into my TypePad TypeList 'Notes' and wah-lah I've got me a random image generator in my sidebar.  Pretty cool. 

The reason I am telling you this is because I am going to make this post about creating your own personal banners for your site, since in order to have random images in your sidebar where you place your banners you need to first know how to make the banners.  It'll be fun!  You'll see! I'll begin by showing you how I create a sidebar banner (which can also be a way to create your own advertising banners as well) and this will be Part 1 of my tutorial.  Part 2 will be tomorrow, and I'll show you how to upload images into TypePad and create a random image generator for your sidebar.  Sound like fun?  I hope so.  Let's get started ...



PhotoshopBanner1

Open Photoshop.  The first thing you want to do is click on 'File' and then 'New' thereby creating a new file within Photoshop.



PhotoshopBanner2

Give it a Title like "Banner160x600" or something like that.  You can give it any title name you want.  I, however, like to put the Banner dimensions in the title so that it is easy to locate in my folders on my computer.  In the Dimensions make sure you give it the Width and Height that your finished banner will be.



PhotoshopBanner3

Click "OK" and you will have a new file open within Photoshop that is the dimensions you specified.



 PhotoshopBanner4

Next, open up the image or images you want to use in creating your new banner.



PhotoshopBanner5 

Once you've opened up your image or images, you will want to adjust their dimensions to suit your banner.  In my case, the Width is more important than the Height as I will be using several images in the creation of my banner.  Also, I will need to click on the box that reads "Constrain Proportions" so that my image does not become distorted. (Unless you want it that way, in that case have at it ). 



PhotoshopBanner7 

Click on the 'Move Tool' in the top of the Photoshop Toolbar.



PhotoshopBanner6 

Next, hold down your mouse button with the Move Tool over the image you want to move.  Then, while continuing to hold down your mouse button, move the image to your banner where you want it to go.  In other words, just drag and drop it.  Repeat the last few steps until you have designed your banner with your image or images.



PhotoshopBanner8 

As you can see, I decided to use 2 images for my banner.  I also decided not to change the Width or Height of their original size, but rather, just move them to the 160x600 Banner and move them around until they were placed where I wanted them to be.



PhotoshopBanner9

Next step, click on the 'Rectangle Tool.'  We're going to use this as a background for some text.  You don't have to do this step if you don't want to.  I like it, though, in the creation of my banners.  You'll see why in a minute. 



PhotoshopBanner10

I placed the rectangle shape at the top of my banner, clicked on the color box that indicates the color of the rectangle at the top of the Photoshop toolbar, and then the 'Pick a solid color' box opened.  From here, I decided to choose a color for my rectangle that is within my images.  That's easy, if you move your cursor over your banner image, you will see that it has turned into an eyedropper where you can choose a color from within your image.  I clicked on a part of the tractor that was in shadow and the red color came up.  I like it.  I think I'll use it.



PhotoshopBanner11 

Now you can adjust the Opacity of the rectangle to be as strong or as transparent as you want.  I adjusted mine to be 50%.



PhotoshopBanner12  

Click on the 'Text Tool' and we'll write something clever in the banner where I placed my transparent rectangle.



PhotoshopBanner13 

Now that I have my Text box blocked out where my transparent rectangle is located, I will want to go to the top of the Photoshop toolbar and choose a Font and a Font size before I just start typing something clever.  At least I hope it will be clever.  It may be boring.  I haven't figured out what to write yet, so while I'm thinking about this and deciding what font to use, I'll go pour myself some sweet iced tea.  I'm thirsty.

Okay, I'm back with my tea.  Aaaahhh, refreshing.  gulp.  Hold on, I have to prop up my feet on the ottoman and get comfortable again.  Now, let's see.  What to write?  hmmm.  I'm thinkin.  Patience. 



PhotoshopBanner14 

There you go.  That works for me.  Done with my banner.  Now all I have to do is save it as a .jpg and I've created another banner to add to my set of 160x600 banners that I am going to use in my random image generator for my sidebar. 

So, get started on creating some banners for your site, and then tomorrow, we'll learn how to create a random image generator for TypePad.  If you don't have a TypePad blog, don't fret.  This code can be used to create random images on any site. 

 

SusansButterflySignature 


  • Etsy




  • Creativity for Kids! Creativity for Kids!


  • Subscribe to Raisin Toast

    Enter your email address:

    Delivered by FeedBurner









  • A Site for You