My Site Build It Journey

Strawberry crepe - Mexican style

So how does this picture look? It is the second one posted on my site at www.cooking-Mexican-recipes.com If this picture looks like something you want to eat, you can get the recipe there.

I do think the picture adds visual interest to my website. Now I want pictures on every page.

I used a Canon Digital Rebel for this picture. I am a definite novice photographer but I do know that lighting is key. I don't have any special lighting and just used natural light for this picture. I set up a card table in my backyard with a nice light colored tablecloth.

When you use an approach like I did, you have to play with the sun a bit. I chose to get my dish ready around 2:30 pm when the sun was lower in the sky and not directly over head. This makes for softer light and doesn't wash out the picture. We had clouds the day I took this picture so the sun was hiding off and on. The pictures were better when the sun was out.

Take a lot of pictures. With digital you have the luxury of taking all you want, basically for free so shoot away. I took about 25 on this one plate and it was a good thing I did. Only 3 or 4 had good lighting.

With Site Build It it was super easy to add my picture. I was pleasantly surprised. I just uploaded my picture using the graphic library first. Then when I went to the page to add the picture, I added it where I wanted it with a graphic block. I was able to choose whether I wanted it centered, left, or right on the page. I also had the option of whether I wanted the picture to be a link. I chose no link. And that was it. I previewed it and built it. Couldn't be easier.

I kept my picture size around 20KB and the width was 281px by 300px for height. This size seems to load relatively fast.

Optimize a Picture With Photoshop

I use Photoshop to resize my pictures. Unfortunately I don't know how to do much else with that program. In Photoshop I click file> open. Click on the photo I want and click open. With the picture now open I can resize it. Click on image > then scroll down to image size. The image size window opens up. Where it says width I change the numbers to 300. The height changes automatically to keep the picture proportunate. Click ok. Now the picture is smaller. I like to maximize the picture so I can see how big it will look. So click the mazimize button or square at the top of the picture.

Go to the navigator window on the right side of the screen and click on the little triangle that says zoom in when you hover your mouse over it. As you click this triangle you will see the size of your picture increase. Take it up to 100%. This is how your picture will look in size.

Now go to the top of the screen and click file > save for web. On the save for web window click 2-up near the top of the page. You will see two pictures on the page. One is the original and the one on the right is the one you are optimizing for your webpage. On the right side of the screen, make sure you click JPEG. I've heard pictures are better in JPEG in terms of colors. JPEG supports 16 million colors. Where GIF only supports 256 colors.

Keep in mind though that JPEGs lose detail when compressed so always save the original photo and work from it if you need more than one size. You don't want to resize a picture and then reasize that one again. You lose picture quality.

Click on the quality button and a little slide bar pops up. This controls the quality of the picture based on size of file. Slide it and let go to see the changes at the bottom of the picture on the right side. I adjust the quality so that the size of the picture is around 20K. The smaller you pick the faster the picture will load.

Click save and the save as optimized window pops up. I add a letter or number to the picture name that's highlighted at the bottom so that I know my picture is optimized for the web and is different than the original picture. Remember you want to save the original as it is.

After you change the name a bit click save. Now you are back to the main window with your picture displayed. Click the x to close the picture. A window will pop up asking you if you want to save changes to what ever the name of your picture is. It is asking about the original picture. Say NO. This is important. This saves your original picture.

And that's how you optimize a picture in photoshop.

I added one more picture to my website for guacamole dip.
You can see how it turned out here and get the recipe if you like.

Success to you,
Robin