Design Leap » Working with Images

Quick Tip: How to Make a Banner Clickable

admin — Thu, 04 Mar 2010 10:34:10 +0000

To make any image such as a banner clickable you will need to add HTML code to that image.

Here’s an example code that you can use:

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)

Tweet This Delicious Digg This Facebook Stumble This

Quick Tip: Use an ALT tag for your website images

admin — Thu, 07 Jan 2010 10:33:45 +0000

For search engines an image is just a block that they cannot read. So to help search engines recognize images on your business website you have to include an ALT tag in the HTML code. To check if an image has an ALT tag just hover your mouse over an image and if you see text appear next to your pointer, then there’s an ALT tag associated with that image.

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

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

Tweet This Delicious Digg This Facebook Stumble This

Quick Tip: Removing Checkered Background in Photoshop

admin — Thu, 01 Oct 2009 12:54:45 +0000

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.

Checkerboard pattern in Photoshop

Background removed

Tweet This Delicious Digg This Facebook Stumble This

Brand Recognition: Creating a Custom Twitter Background

admin — Tue, 08 Sep 2009 10:19:55 +0000

Brand Recognition: Creating a Custom Twitter Background

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!

Tweet This Delicious Digg This Facebook Stumble This

Quick Tip: Removing white background from logo

admin — Tue, 18 Aug 2009 14:16:14 +0000

To remove white background from logo successfully, you need to make sure you save it correctly. Save only as .png or .gif file. To get a better quality save as .png. Saving as a .jpg or .jpeg file will automatically add a white background even if you have removed it.

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

Tweet This Delicious Digg This Facebook Stumble This

Free Alternatives to Photoshop

admin — Thu, 25 Jun 2009 13:14:13 +0000

I use Photoshop on a daily basis, but not everyone is a designer nor can everyone afford it. Here’s a list of few free web based alternatives to Photoshop where you can either use them to create a new graphic from scratch or just do basic photo editing from your existing photos. I haven’t really used them to test all the features and tools, but I came up with the pros and cons based on my quick evaluation. First three are similar to Photoshop in a sense that you can create a graphic from scratch or open your own photo to work with. The last three are basically photo editing, meaning you will need to upload a photo to work with it.

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.

Tweet This Delicious Digg This Facebook Stumble This

Images on the web vs. Images printed explained

admin — Mon, 01 Jun 2009 22:03:00 +0000

There’s a huge difference when preparing images for web use and preparing images for printing purposes. The major difference is in color type and resolution.

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.

Tweet This Delicious Digg This Facebook Stumble This

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

admin — Mon, 06 Apr 2009 22:26:00 +0000

It’s best to use the “Magic Wand” when you’re working with an image that has a high contrasting color between the main graphic and the background. It works best when the background is a solid color.

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/

Tweet This Delicious Digg This Facebook Stumble This

Adding Images to Your Website

admin — Tue, 03 Mar 2009 09:06:26 +0000

Pictures and images make a web page pop and add color and visual interest to your web page. They illustrate your products so that customers can see what they are buying, they attract and entice people to stay on your website and they provide helpful clues if you are describing a “how to” process.

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.

Tweet This Delicious Digg This Facebook Stumble This

4 Color Printing and Understanding Color Management in 5 Ways

admin — Fri, 27 Feb 2009 12:39:00 +0000

Majority of the print materials is done through offset printing that is integrated with 4 color printing or four-color process printing. It has gained a following of many small businesses and entrepreneurs who are looking for high-quality prints in the most cost-effective means.

It produces photographic quality full color prints at cheaper cost per unit, compared to inkjet printing, and other printing processes.

However, as popular or common this process maybe, some people still fall into certain pit traps. Some people set certain expectations to find they have actually been asking too much.

Things to Consider with Color Management

Think about how colors work. Think how the colors you’ve worked on will actually appear on print. There is a discrepancy with what you see and what you may get. Computer screens and prints are different media. Think about these and other things that would affect your prints.

1. Color limitations
The CMYK can only but closely match itself to the closest possible colors projected on the computer screen. The color gamut of CMYK, although relatively large, is not enough to encompass the thousands of color hues there are.

2. Monitor Calibration
What we see in our computer screen is different from what will be printed out on presses and even in desk jet printers. The computer monitor has a different color profile and produces color through RGB. Prints that are printed in CMYK cannot fully capture the colors present in RGB although it can match accurately up to a certain point or degree.

3. Machine Calibration
To maintain colors or color profiles of your design, from the pre-press department’s computer to your print out, a printing companies machines and computers are calibrated. This means it will preserve the original look and colors of your design throughout.

Added to this, whatever the material you choose, be it a 100 lb. Gloss Text paper or a 14 pt. Gloss Cover stock, the presses are still calibrated to maintain consistency in the print output. The presses are configured to recognize the properties of these paper stocks to produce prints in premium condition.

4. File Conversion and Compression
Some or part of your data can get lost along the way in the process of translation. Your files for offset printing works differently from that of your desk jet printer. The latter can process your RGB files and print it out automatically. In offset printing, you need to work in CMYK mode or convert your RGB files into CMYK.

For file compression, you may risk the image quality of your file because data compression like files saved in jpeg may lose some information. In return, the image quality of the file may be affected or compromised. Avoid this problem by saving in lossless files such as .tiff or .eps.

5. Paper finishing.
Matte paper has a polished but dull surface that gives it a natural feel. Because the paper surface is different from the standard gloss and high-gloss, matter paper absorbs more light without reflecting it back.

Gloss paper, as the name indicates, has a polished smooth surface that possesses a soft gloss. The High Gloss coated stock or UV coated gives your prints a striking and reflective surface with the sheen or gloss it has. It also has the ability to make colors more vibrant unlike the two other paper stocks.

Manage and know the issues concerning color management. And let your 4 color printing companies find the best suitable conditions to bring out the richness and vibrancy of your colorful prints. Contact your printing company now and work with the experts who can capably make your prints more brilliant.

Article Source: http://www.articlesbase.com/printing-articles/4-color-printing-and-understanding-color-management-in-5-ways-279178.html

About the Author:
This writing provides information to the readers about 4 Color Printing processes and the products and services provided with the use of this printing method. To know more about Offset Printing you may visit Color Printing Wholesale

Tweet This Delicious Digg This Facebook Stumble This