You will learn:

• Where to find good, free and low cost Stock Photos
• What to look for in a stock photo when combining with your product
• Tips and Tricks on how to make your photos realistic

January 7 and 21, 2011 2 Sessions : $50.00USD – monthly 24 Sessions : $550.00USD – yearly Register to Watch Full Videos of Previous Sessions!

Watch a clip from a previous Live Photoshop Session:

January 7 and 21, 2011 2 Sessions : $50.00USD – monthly 24 Sessions : $550.00USD – yearly Register to Watch Full Videos of Previous Sessions!

Here’s an example code that you can use:
<a href=”http://www.designleap.net”><img src=”image_name.jpg”></a>
replace www.designleap.net with any website where you want the image to link to
replace image_name.jpg with your image name (if your image is in a subfolder make sure you include the correct location)

Here’s a sample HTML code for an image that includes an ALT tag:

<img src=”image.jpg” alt=”image description goes here”>

Go ahead and mouse over on the image to the right to see the ALT tag in action.

In Photoshop, a checkered background represents transparency, when you save your work, the checkered pattern will not show. The only way to remove it, is to add an actual background on the layer under your image. Here’s a tutorial of How to Remove Checkered Background in Photoshop

Checkerboard pattern in Photoshop

Background removed

When you have a business, you want your brand to be recognized in everything that you do. Having your business on Twitter is no different. By creating a custom Twitter background you will instantly stand out, bring credibility to your brand and leave a lasting impression to your visitors.

There are no set rules on how your background needs to look or what size it needs to be, but here are some pointers on what to do to keep that professional image.

• Keep all-important information on the left-hand side of the page.
• Always include your logo.
• Include your actual photo, this way you bring more trust and can result in more followers.
• Use colors that are similar to your brand to keep consistent.
• Use relevant images/graphics.
• Do NOT hard sell!
• Do list links of your websites, blogs, and other networking site where you can be found.

How to determine what size to make your Twitter background

The best way is to look at your website’s analytics program and see what are your visitor’s browser screen resolutions. Take a look at the top two and based on that, you can choose what would be the best size for your background. Keep in mind that the smaller the resolution, the less space you have for design.

The best approach to designing a custom Twitter background

Create everything in layers (it’s easier to make changes when you’re working with layers). This does not mean that you need to have Photoshop to do this. There are many free alternatives to Photoshop that perform just as great. I am recommending the “Phoenix” by Aviary.com as it’s very similar to Photoshop.

• Your first layer should be the main image, color or gradient that will serve as the pallet for your design.
• Next few layers don’t have to be in this order. You can start with the top banner that’s where you can add another color or gradient. This is where the Twitter logo and menu will sit so keep in mind the visibility when choosing colors.
• The last and most important step is to add your information to the left-hand side of the page and it’s best if you place this on it’s own layer.

Use one of these templates as a guide on proper placement of your information

1024 x 768 Template	1280 x 800 Template

Quick tip: Do NOT place important information below 600 pixels in height no matter the screen resolution size. This is because some users might have extra tool bars on their browser window, which pushes all the information down.

After you download the background template, open it in the design program of your choice and use it as bottom layer to server as a guide for you to place your information. When you’re done with your design, delete the layer with template. Save your design as GIF, JPG, or PNG format. Then go to your twitter page and follow these steps:

• Select Settings
• Choose the Design tab
• Click on Change background image
• Upload your image
• Make sure that tile background is NOT checked
• Save changes

That’s it you’re done!

See how to remove the background of an image in Photoshop using the Magic Wand tool

http://www.pixlr.com/editor/ – The interface looks almost identical to Photoshop. Has all the features that you would need to do basic photo editing. Recently released, so it’s still in its growing phase. Pro: Loads really fast. Con: Doesn’t have rulers or guides.

http://www.splashup.com/ – Looks similar to Photoshop, but is a little tricky to use. There are no rulers here either. Pro: Interface similar to Photoshop. Con: A little tricky to use.

http://www.aviary.com (Phoenix Image Editor) – Was happy to see that this one has rulers and I can drag guides. Also has tutorials and explanations of the tools. Pro: Easy to use, has lots of tutorials. Con: Can’t think of any cons.

http://www.drpic.com/ – If you’re use to Photoshop, this one is a little hard to work with. Pro: Has a batch resize feature (in more tools section below all the main tools). Con: Takes a while to load, also has annoying ads.

http://fotoflexer.com/ – Another photo editor that doesn’t really look like Photoshop but is really easy to use. Has ads, but if you click on the Full Screen mode all you see is the editor and no ads or browser toolbar. Have easy-to-follow tutorials to help you along. Pro: Easy to use, great for scrapbookers. Con: Can’t think of any cons (but I haven’t tried everything).

http://www.picnik.com/app – Another one that’s great for scrapbookers. Of course anyone can use it that needs to edit their photos, lots of cool features and effects. Pro: Easy to use, looks like you can spend hours playing with all the features. Con: Not really a con, but you’ll need to upgrade to premium to use all the extra features.

There are a lot more, but these are the few that stood out. If you’ve used any of these and have your own pros and cons please leave a comment to share those with everyone.

How is CMYK different from RGB
Images online use color combination known as RGB (Red, Green, Blue) and images that are printed use color combination know as CMYK (Cyan, Magenta, Yellow, Black). What this basically means is that the colors of an image/graphic that you see on your screen will NOT be exactly the same as when you print that image/graphic. Images on the monitor will appear lighter then the once that are printed. This is due to the monitor being lit from the back to light up your screen. The colors that are seen on screen will vary from one monitor to the other because each individual sets their monitor to their liking.

Image resolution, 72dpi vs. 300dpi
Resolution for images online is recommended to be no more than 72dpi (dots per inch) vs. resolution for images that are printed is recommended to be at least 300dpi. As you can see there’s a big difference between 72 and 300. Basically, the dpi will determine how clear the image will look and this is most concerned for printed images. Web images need to be on the low scale because the resolution affects the loading time. Online users don’t have patience for an image to load. The smaller the image, the faster the website/blog/email will load.

Preparing your images for online use
Best practice is to prepare the image the size that you need it to be before you upload it online. Uploading a huge image to your website and then scaling it, will NOT make the physical image smaller, it will only appear smaller, thus still slow down the loading time. Take look at this short video on how to make your image smaller using FotoFlexer.com

Once you’ve made your images physically smaller, you can go ahead and use them online.

Preparing your images for printing
It’s best to have a professional prepare your images for printing. There are a lot of things to consider when getting your images ready for print.

Before we get started, you need to rename the “background” layer.
This is the most important step to get this process right.

When you open your image you’ll notice that your layer in the Layers pallet is named “background.” You need to rename this layer to anything else besides “background.”

Here’s how to do this:

Double-click on the “background” layer, a pop-up window will appear, name the layer anything that you want or just leave it as Layer 0 and hit OK.

Ok, now you’re ready to remove that background layer.

Choose the “Magic Wand” tool and then start selecting the background. In our case it’s the blue sky behind the yellow flowers. Hold the shift key to select multiple areas at once.

NOTE: If you’re image has the high contrasting colors between the image and the background like we have, it’s best to set your “Tolerance” level to 100 and keep Anti-alias and Contiguous boxes checked. This will let you select the background easier.

After everything is selected, hit delete on your keyboard and your background will be removed. Notice instead of your background you see the checkerboard pattern; in Photoshop this means that the background is transparent.

That’s it you’re done!
Just don’t forget to save your hard work.

If you want to practice with this same image, you can download a copy at http://www.flickr.com/photos/77682540@N00/3414300515/

Finding good graphics for your site can be time consuming and costly. It is not as simple as searching on Google Images and downloading whatever you find. Most pictures, images and in fact any content that is visible on the internet, is protected either explicitly or implicitly by copyright. We do not recommend downloading pictures that you find on the internet unless you have either paid for them or the site explicitly tells you that they are available for public use. Just because you don’t actually see a copyright notice on a web page or image does not mean that anyone can use it. There is a wealth of information available about copyright laws, but for the best information, go straight to the source at www.copyright.gov

There are some good websites that publish photos and pictures expressly for public use. Some of these require payment. The cost of graphics can vary widely from completely free to hundreds of dollars. Purchase price depends on size but you can find great photos for just a dollar or so. Try www.istock.com for some great pictures at reasonable prices.

Here are some handy links to free image sites (but be sure to check their rules also), or you can go to www.everystockphoto.com which searches multiple free sites for you.

Free sites for images:

www.sxc.hu
www.morguefile.com
http://flickr.com/creativecommons
www.stockvault.net
www.photogen.com
www.freedigitalphotos.net
http://public-domain-photos.com
www.freerangestock.com

Taking your own pictures:

While it is convenient to use pictures that already exist there is no reason why you shouldn’t also incorporate your own. The most obvious reason you would do this is if you want to include a photo of yourself or your team on your web site. With today’s digital cameras taking great shots is not as hard as it used to be. Here are a few tips for taking great pictures

• If you’re going to use the photo you take only for web purposes, make sure you set your camera to the lowest megapixel resolution (no less than 1MP). This will prevent you from uploadling large files that can slow down the loading of your website.
• Keep the background simple with no clutter and a single color that contrasts well with your foreground image.
• For faces, don’t get too close and experiment with taking shots from different angles, not just straight on.
• Don’t zoom. Using the zoom can produce a fuzzy picture unless you are using a high quality camera.