http://community.theswitchboards.com/tutorials/category/1-business-website-tutorials/ Thu, 17 May 2012 04:11:12 +0000 1800 Anything to do with running your own website http://community.theswitchboards.com/tutorials/article/8-taking-professional-looking-photos-without-a-professional/ The Setup:
When taking your own photos, you want lots of light - but not direct light. Direct light will cause harsh shadows, which you don’t want. DO NOT USE A FLASH! Flashes wash out colors and details – and even the entire photo if you are taking close up shots. Professional looking product photos have soft shadows and a subtle background. To achieve this effect, you want soft, diffused light. You could buy a fancy "photo tent" or “light box” to diffuse the light for you... but who wants to spend that much money? What I use is a semi clear, frosted plastic Rubbermaid container. Choose a size that fits what you are photographing. Obviously, this container method will only work for items that will fit inside the container. The frosted plastic of the container serves to diffuse the light somewhat. To do so even more, drape a layer of white interfacing over the container (you can get this at any fabric store - about $1.50 a yard.) You could also use a white sheet. I have two clip on lamps attached to the container, and another lamp in the front of the container with a piece of interfacing draped over it. Be sure to use Daylight light bulbs - they produce a much nicer light than normal incandescent (which produce a yellow cast) or fluorescent (which produce a green cast) light bulbs. You can buy these inexpensive bulbs almost anywhere. Look for GE Reveal light bulbs.

For the background, trim a piece of white matte poster board and curve it inside the container. This serves as your seamless background. You can use any color matte poster board for this – though I personally think white looks the most professional, and is also easier to work with later on.

Here is a photo of the setup I use:


The Camera:
If you can, get and use a tripod. Most people cannot hold their cameras steady enough for slower shutter speeds – and a shaky hand creates a blurry photo. You can get cheap, small tripods on places like eBay.

Know your camera and how it works. The two main settings you will be dealing with are shutter speed and aperture. Many digital cameras give you the option of manual settings – consult your manual and if you do, learn how to adjust them on your camera. For those of you who don’t know what these settings are, here is a quick summary:

Shutter Speed: The length of time your film (or digital chip) is exposed to light. The longer the shutter speed, the more light is let into your camera, and the brighter your photo will be. A shutter speed of 1/30 (sometimes just 30) means your shutter is open for 1/30th of a second. This is considered a relatively slow shutter speed.

Aperture: The diameter of the opening that allows the light to enter the camera. The bigger the opening, the more light is allowed to enter your camera. NOTE: I know I said the bigger the opening, but this setting often seems backwards. Larger numbers (8, 11, 16, etc.) mean smaller openings and less light, whereas smaller numbers (2.8, 4, etc.) actually let in more light.

Other features/settings you should be aware of:

ISO/ASA (film speed): If you have the option to manually select a film speed on your camera, resist the temptation to choose 400. The “faster” the film, the more “noise” will be in your photo. Noise on a digital camera makes the photo appear grainy. Try to use a film speed of 50 or 100 for the best quality photos. Do note, however, that by reducing the speed of the film, you are reducing its sensitivity to light. This is why it is so important to have good lighting in your photo setup. You need more light to compensate for the slower film speeds.

Macro Mode: This is the ability of your camera to focus very close to an object – sometimes within centimeters. This is an especially important feature if you are photographing small items like jewelry, or just want a close up detail shot of an item. This mode is usually indicated by a tulip icon. Learn how to turn it on, and the how close you can get before you need to use it. (For example, my camera focuses in macro mode when the distance between the lens and the subject is between 5 and 26cm).

Light Meter: This is the feature on your camera that tells you how much light enters the camera. A light meter’s sole purpose in life is to create photos where the average is middle gray – an 18% shade of gray to be exact. That is, the average of all the tones in the photo – from pure black to pure white – will average out to middle gray. This is exactly what the “auto” feature on a camera creates – an “average” photo. Sometimes this works, sometimes it doesn’t. That is why it is nice to be able to control your own settings. For example, if you were photographing a white purse on a white background, you would want the end result lighter than average (more white tones than black). For this photo you may want your light meter to read +2/3 or +1.

A light meter comes in many different forms. Mine is a + or – number in the corner of my screen when I push the shutter button down half way. Other light meters may be more similar to an odometer. A zero or center reading will produce an average photo. Start out by trying to get your meter to read zero. You do this by changing the amount of light entering the camera – in other words by changing your aperture and shutter speeds. Experiment with different settings and see what combinations of apertures and shutter speeds will produce a zero reading in certain lighting conditions. Once you get to know your light meter you can begin to adjust the light as necessary for the particular photo.

White Balance: Most digital cameras have a white balance feature that will adjust the colors depending on the lighting conditions. The names of the settings are not often accurate. I recommend setting up your photo container with lights and an item, and take one photo with each of the whit e balance settings (usually auto, tungsten, fluorescent, halogen, daylight, etc.)… and see which one looks best. If you are using a white background, see which background looks whitest (as opposed to orange or green, for example). Remember this setting and use it. For example, under my lighting conditions and with my camera, the fluorescent setting produces the best photos… go figure.

Taking Your Pictures

When taking your photos, don’t rush. Take multiple photos of each item. Reposition the item, get closer, farther away, choose a different perspective - take photos with a light meter reading of average, a little below average, and a little above average (this is known as bracketing). Photography is often a game of odds - the more photos you take, the better your chances are of getting a good one. And that’s what’s nice about digital – you can delete the bad ones later on.

Making Your Photos Beautiful with Photoshop
Photoshop will soon be your new best friend. If you don’t have it, I highly recommend you buy it. Don’t want to spend that much? Buy Photoshop Elements – you get pretty much all of the same features as the normal version for about $80.

When editing photos for your website – consistency is key. Have all your photos with the same background, and the same size/proportions. Once you download your photos from your camera, go through and decide which ones are best (you did take multiple photos of each object… right?) Look for the best color and focus. When editing photos, compare the backgrounds from one photo to the next. Try to get them all the same. I am guilty of this – making some backgrounds more gray and some more white – the brighter photos will always stand out. The more similar your photos, the better.

Editing the Photo: Step By Step
Note: This tutorial was done on PhotoshopCS with Mac OS X. Other platforms/versions should be fairly similar – though not identical.

The original photo I will be demonstrating with, that needs a lot of work:


Open the photo you want to use. Crop it to your desired size and resolution with the cropping tool (this tool, if you aren’t familiar with it, allows you to make all your photos an identical size.) In my example, I’ve cropped this photo to 5” by 5” with a resolution of 72 (typical web resolution – for printing purposes, use a resolution of about 300). To crop, click on the crop tool… type in your desired height, width, and resolution measurements in the top boxes (circled below).


When you have selected the section you wish to crop (you can resize this selection by clicking and dragging the corner boxes) either double click inside the selection or click the check mark on the menu bar.


Your image will probably shrink – since you’ve changed the resolution. Go to View>Actual Pixels to see the actual size of the photo.


Make sure your layers palette is open by going to Window>Layers.


The palette should look like this:


On the bottom of the layers palette, click on the icon that looks like a two toned black and white circle. Select "curves" from that menu.


You should have a window open that looks like this. To see the effects of the curve on your photo, be sure the “preview” box is checked.


So What Exactly is a Curves Layer?
Curves is one of the most versatile features in photoshop – you can improve the quality of (almost) any photo. It can do much more than brightness/contrast and levels adjustments. It can brighten, increase contrast, decrease contrast, improve color, change color, increase or decrease saturation, and more. The diagonal line you see is your RGB curve. There are three other curves for a color photo – one each for Red, Green, and Blue (you can view these by clicking “channel” and selecting your desired curve).

A combination of adjustments to these menus can do wonders to a mediocre photo. Basically, each point on the curve represents a pixel value – 0 (pure black in the lower left corner) to 255 (pure white in the upper right corner). Put your mouse anywhere on the curve plot – underneath, you’ll see an input and output value. The input is the value of the pixel – the output is what the value of the pixel would be if you dragged the curve to that point. Now, click and hold anywhere on your photo – you’ll see a small bubble on your curves graph. This is the value of the pixel you’ve clicked on. Drag your mouse around the photo – and see the values change.

Why Use Layers?
Granted you can access the same curves window through Image>Adjustments>Curves. So why go through the layers palette? Using layers will give you more flexibility. Think of layers as a stack of paper. If you were to drag another picture on to the one you have open now, it would obscure it – it is lying “on top” of your current photo. But adjustments layers are like clear paper. They adjust your photo in various ways – by adjusting color, contrast, effects, etc, but they are not attached to your photo. You can delete them at any time and go back to your original photo. Another benefit, you can also drag an adjustment (curves) layer onto another photo. If you took more than one photo of the same item – open both photos, and drag the curves layer from one onto the other. It should have the same effect on both pictures. This is much easier than manually trying to reproduce the same corrections for multiple photos.

Anyways -

Click the "Auto" button and see what happens to your photo.


Now, sometimes that doesn’t look very nice…. Sometimes it may look downright weird. What the auto function actually does is take your lightest pixel and makes it pure white, and your darkest pixel and makes it pure black. The reason this function can often look funny is you don’t have a pure white or pure black in your photo. Want this function to work better? Make sure you have a pure black and pure white in your photo… easy as that. If your background is white, you’re set on that part. If you need something black, try placing a black object (I use a piece of black nylon webbing) somewhere in the edge of the frame (where you know you will end up cropping it out). If you are doing this, just do the above steps in a different order (curves first, then crop… as the black piece will be no good if its out of the picture).

Anyways, if the auto function looks decent, keep the window open. If the auto curve is way off, cancel the curves layer and open a new one to start from scratch. Sometimes the auto curve is so far off its easier to start over than try to fix it. When working with curves, focus on the object itself. We’ll work on the background later. And remember, since you are using layers, you can come back and adjust the curve any time (just double click on the curve layer in the layers palette to do so.)

Now it’s time to adjust your curves. You do this by clicking anywhere on the curve line and dragging a point to another position. Experiment and see what happens to your photo when you drag the curve around. For example, notice the shape of the curve and the effect on the photo. Generally, if you drag a point up, it will get lighter. Down and it will get darker.




Try dragging just the white point left along the top – this will lighten just your highlights and increase contrast. Drag the black point right along the bottom – this will darken just the shadow values and increase contrast. Experiment with various shaped curves in each of the 4 colored curves – and note the effect on your photo. If you are fairly familiar with what effect a certain action on a curve will produce, then you will be able to make your photos just as you’d like them.


A Few General Rules When Working With Curves:
- The STEEPER the curve, the GREATER the contrast. Remember this, because sometimes higher contrast will make a picture look nicer. If you have a smooth curve, like say the 2nd one above, you may have more contrast in some areas and less in another. In that curve, the highlights (upper half of curve) are less steep – so have less contrast. The lowlights (lower half of curve) are steeper – and will have more contrast.
- You want a smooth curve. Nothing that looks even remotely like a rollercoaster.
- Utilize all 4 curves on a color photo. Just want a little more blue in a photo? Drag the blue curve up (make it lighter). Less red? Drag the red curve down (make it darker). And so on…

Ok – so adjust your photo. Since your photo will be different than mine, I can’t tell you exactly what adjustments to make. If you’ve used the auto curve, I sometimes find it a bit too contrasty. Go into each of the colored curves and drag the white point back to the right to reduce contrast. This will make the photo darker. If you want it lighter, drag a point in the middle up a bit. Vice versa if you want it darker.

Here are the current adjustments on my photo:


Results in:

Like I said above, just worry about the object itself in this layer. I tinkered with the curves until I thought the pinks were the right shade, and the belt was the right brightness and contrast.

Now, the background needs to be “whitened.” To do this, select the magic wand tool, and click to select the background. If you don’t get the whole thing on the first click, hold down the shift key, and click again in the area(s) of the background that were not selected. Repeat until all of your background is surrounded by ants. Don’t worry if you also select parts of your item (this will happen if parts of your item are of a similar color/tone as your background. You can fix that later. When selected, there should be a little trail of ants marching around your image.


Now go to the select menu and choose feather.


Set the feather to 1 or 2 pixels. This softens the edge around your selection.


At the bottom of the layers palette, click the black and white circle icon and select curves, like you did before. However this time, by having part of your picture selected, you are creating a mask – that is, only the selected portions of your picture will be affected by the new curve.


The curves window should open, and you should see a new layer added to your layers palette, with a black blob in the shape of your object.


Now, fiddle with the curve. This one is easier than the first curve, because it is only a white background (this is why I recommended a white background for your photos – it would be harder to achieve uniformity in your photos if you were always trying to match a particular shade of blue, for example). I usually just lighten a point in the middle of the RGB curve, and pull the white point a bit to the left. If your white is not completely “white,” you can edit the other color curves as well.


Now, if your selection was messy, you will see that some of your object is affected by the curve or that some of your background is not affected by it. You can fix this by using the paintbrush. Be sure the background curves layer is selected. Then with a paintbrush (choose an appropriate size for what you’re trying to fix)… paint on the curve layer with either black or white. Instead of showing up as opaque black or white, the paint will either add to or subtract from your mask. If you are painting with BLACK, you will be adding to the mask (any area under a mast will NOT be affected by curves.) For example, if I painted over my background with black:


The opposite is true if you painted with white. Think of white as clear or as an eraser – if you paint over a masked portion, it will erase the mask and the curve WILL affect the image in the area you painted. For example, I painted with white over some of my object:


What you want to do is either add or subtract to the mask. If, when you selected your background, you also selected part of your object (some of my stripes on the belt were selected, for example), then the curve is affecting a part of the image that you don’t want it to. So in this case, I would paint over the affected stripes with black. If you missed a part of your background when selecting, paint over it with white so it will be affected by the whitening curve.

Sometimes your mask can be hard to see. You can’t quite tell what parts of the image are affected by the mask and what parts are not. To see your mask better, on the layers palette, click the “channel” tab. You should see 5 layers: RGB, Red, Green, Blue, and Curves. Poke the little eyeball in the square next to the curves layer. Your object should turn red.


The red is the curves mask – the portion of your photo that is NOT affected by the curve. You can paint with black to ADD to the red mask, or with white to REMOVE the red mask. When you’re finished, the red mask should cover just the item and none of the background. Poke the eyeball again to turn the red off.

You should now have your final image:


Now, I recommend you save your image twice. Once as a .psd file. This will leave all your curves layers intact in case you need to change something… and you don’t have to start from scratch. The other way you should save it is for the web (if you will be using the image on a website). To do this, go to file>save for web.


When the save for web window is open – choose the format and quality of your image. The lower the quality, the smaller the image. I usually save mine as a JPEG image, quality Very High or around 80. I use a lower number for less important images.


And TADA! You’re done! You’ve just created a professional product photo without a professional! Congratulations! I hope this was helpful. Please let me know if anything in this tutorial is confusing or unclear – and I will try and expand a little more (as if this wasn’t long enough already!) Hope this helped! Good luck!

Visit Lindsay Landis and all her fantastically photographed products at Purr Design.]]> Fri, 11 Mar 2011 05:58:44 +0000 8 Linds 1 http://community.theswitchboards.com/tutorials/article/5-are-you-the-master-of-your-domain/

Here is a MUST do list to protect yourself.


1. Purchase your domain name yourself, this way you own it and control it. Make sure to keep records of the username and password for the domain so you can give your host access. Use Go Daddy or any other reputable Registrar.


2. If someone else registered your domain name for you, make sure to get the username and password for the registrar account and make sure you are listed as the domain owner.


3. Make sure you get FTP access to your site. Yes, this should be a given, but surprisingly, a lot of small business owners do not know how to FTP to their sites. Heres the info you will need to know: Host, Username and Password. Most hosts send FTP login info. in the Welcome email when you sign up.


FTP Programs you can try:
SmartFTP (Freeware)
CuteFTP (Shareware)


4. Backup your site - you need to complete #3 before you can do this, but once you do, get in the habit of backing up your site whenever you do an major update. This way, if there is ever a problem, you have a local copy you can use if you need to.


5. Get recommendations. Talk to people privately. Most people don't want to say bad things in a public arena until its too late. Find out about their total experience. Ask about customer service, timeliness of responses, quality of their work and how long they have worked with the company/person in question.



By Nadine Gilden, owner of Curious Light has been designing and building websites since 1994. She offers high quality, affordable sites for small businesses.

Copyright 2006]]> Fri, 11 Mar 2011 04:38:43 +0000 5 curiouslt 1 http://community.theswitchboards.com/tutorials/article/1-ten-common-web-design-mistakes/
1. Mixed Messages
Why do you have a website? Is it to sell something? If yes, then that should be the focus of your home page. Show potential customers a sample of what you have to offer. Make them want to look further. Very large logos and too much text detract from that purpose.



2. Unclear Navigation
Is your navigation too small? Does it stand out enough from the background? Are the most important areas of the site given the places of most importance? Navigation is your tool to get users to view your site. If you make it difficult, they won't bother.



3. Too Many Clicks
How many clicks does it take the user before he or she can actually order a product? Their patience may run out before they get there.



4. Poor Graphic/Image Quality
Are your product images pixilated, too dark, and blurry? Poor image/graphic quality will reflect on the quality of your product. Also, include the width and height of your images in your image tags - this allows the browser to account for the dimensions of the image and load the page as intended.



5. Too Much Text
Most users don't read web pages, they scan. Having too much text overwhelms them. If you must have more than a paragraph, make sure that the text contains links so that words get highlighted and the text is interactive. Of course, sites that are informational only are expected to have lots of text. Just try to break it up as stated above.



6. Never Updating Your Site
Users will feel reassured if they see you have changed content - especially on the home page. They will run for the hills if you still have events listed from 1999.



7. Spelling/Grammar Mistakes
We are all guilty of this. Spelling and Grammar mistakes cause your site to look unprofessional. Have someone else proof your site. Hopefully, you know an English teacher.



8. Using the Wrong Fonts
If the font you have specified for your text is not installed on the user's computer, they won't see it. That is why it is necessary to specify a font that is available on both Windows and Mac.
They are:
Arial
Comic Sans
Courier New
Georgia
Times New Roman
Trebuchet
Verdana



Georgia, Verdana, Trebuchet were specifically designed for the screen.



When you create graphics, you can use any font you think looks good because it doesn't need to be on the user's computer. Sometimes, especially with navigation buttons, you need to use small text. There are also fonts specifically designed to work at small sizes - Mini7 is a very popular one.



9. No Privacy Policy
Do you collect email addresses for a newsletter or for ordering? Assure your customers that you will not share their addresses with anyone. People are leery of their email addresses being sold.



10. Didn't Test Site/Don't Know Stats
Did you check to see what your site looked like in multiple browsers? What looks good on your computer in one browser can look like a mess in another browser; eg. text overlapping images, alignment out of whack, things breaking out of their designated areas. Familiarize yourself with the current web statistics for browsers. Ex. 1024x768 is about 50% for screen size, but 800x600 is still about 30% - You don't want to make your site too large for 30% of your potential customers.



Bonus Mistake
11. Using Bells And Whistles Only As Bells And Whistles
Flash is fantastic, but are you only using it to say you have a cool, hip site that uses Flash? If it doesn't add any benefit to the user, what's the point? If you are really attached to your Flash Intro, make sure you offer the user a way to skip it. They don't need to see it on their 10th trip to your site. If your site is purely for showing off your designs, and not to sell, Flash is a great way to go! See #1; know the purpose of your site.



Nadine Gilden, owner of Curious Light has been designing and building websites since 1994. She offers high quality, affordable sites for small businesses.


By Nadine Gilden; Curiouslight.com
Copyright 2005]]> Fri, 11 Mar 2011 03:49:59 +0000 1 curiouslt 1