In January on Ask a Designer! – Photoshop: Can’t afford to hire a model for that photo shoot, now you don’t have to. I’ll show you how to take your product photo and put it together with or on a stock photo model.
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
Watch a clip from a previous Live Photoshop Session:
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:
<a href=”http://www.designleap.net”><img src=”image_name.jpg”></a>
replace www.designleap.netwith 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)
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:
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
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
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.
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.
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.
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.
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.
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.
Announcements, Working with Images | admin | 
December 28, 2010 10:53 am | 
Comments (0) 
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.
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. 
Before we get started, you need to rename the “background” layer. 
Ok, now you’re ready to remove that background layer.
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.
After everything is selected, hit delete on your keyboard and your background will be removed. Notice instead of your background you see the 
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.
Subscribe
