Archive for the ‘photographs’ Category

Unique 50 Photo Website Gallery

Following up on the Monday release of the SolarusUSA integrated blog, my design of their main awning products website launched earlier today featuring a unique 50 photo website gallery. Imagine a visitor viewing 50 large photos as shown below in this post, and being able to view every photo on one page without scrolling down the computer screen.

awning gallery screenshot photo

Each awning photo displays 495 pixels wide by 356 pixels tall, so viewing 50 without moving down the screen may sound unbelievable until you actually see it. The photo above is slightly larger because it includes a border and outline, plus a full text caption at the bottom of the photo. Search engines cannot index graphics, however, the text caption on their website is real text, not a graphic. The search engine optimization, or seo, value of this design is an added benefit of this custom website design technique.

Finally, some photo galleries can come close to this performance, but they depend on a script or flash to present the series of photos in one place, and those techniques have zero seo value. Search engines ignore scripts and they cannot read flash website content. The photo gallery that I developed for SolarusUSA is a breakthrough enhanced technique being offered as part of my custom website design services, and the layout is done completely in XHTML 1.1 and CSS2.

Despite the complexity, the page code complies as valid to W3C standards without errors. View the photo gallery for solid color awning fabrics here, and the striped pattern awning fabrics here.

Small Business and Digital Design Copyright

After paying a fee for a custom digital design such as a website, multimedia production, logo, or graphics for online or print, most customers will assume they own the contents of that project. In most cases they do not. The intellectual property and creativity to produce your project belongs to the designer with very few exceptions.

For small business clients who use independent contractors to create custom works for online or printed marketing materials, the question of copyright ownership must be understood. Except in instances where your designer is a direct employee, you do not retain the copyright of custom designs created on your behalf unless the designer specifically transfers the right of ownership to you.

Designers who produce creative works such as websites, multimedia, or printed marketing materials, establish copyright ownership the moment the work is created. Customers should consider the consequences of content they provide, also. Here’s an excerpt about copyright from the order page of the Small Business Resource Center:

Customer Provided Content and Copyright

The customer by placing an order for design services unconditionally guarantees that they own the copyright, or have permission from the copyright holder, of any content they furnish including text, graphics, photographs, audio, video, designs, trademarks, or artwork submitted for use in the website, multimedia, or printed marketing materials.

Design services are provided as an independent contractor, and projects are therefore not “work for hire” as would be the case using a direct employee. As the creative design service provider, Jim Degerstrom retains all rights to any original design of graphics, video production, or programming code created on behalf of the customer. Therefore, customer rights of ownership are limited to fair use of designs in the original intended use only, whether in print or online.

Clients using independent contractors have an obligation to provide content that does not violate copyright law. For example, the term royalty free photographs does not imply free and unlimited use of a photograph. Even photographs from sites such as those listed in my Royalty Free Photo Directory that allow free commercial use without a one-time or recurring fee do not transfer ownership rights to you.

In addition, digital works such as websites, multimedia, and designs for print carry further obligations. Once the designer creates your project they naturally deliver the results for your fair use. They still own the design. Changes or further use of that content without written permission from the independent contractor may be a violation of copyright law, also.

While this post discusses general copyright issues, small business owners and other readers must seek professional legal advice for answers to questions about their specific circumstances.

Video Intro with a Surprise

After experimenting with video recently, I decided visitors deserved a more personal introduction and a closer look behind the scenes. The bonus surprise is a series of rare photos of George Bush taken in 1988 when my wife and I met him in San Diego, California.

While watching, consider the value of a website video for your small business. Screencast and video production have been added to my list of services. Show people details of your small business products or services and provide a permanent ad or demo on your website.

Thanks for watching. Please contact me to discuss your small business needs for custom website design, custom blogs, matching artwork for print, or video production.

Video Version of Photo Tutorial

By popular demand, yesterday’s text tutorial for masking photographs in Xara Xtreme has been recorded as a video, so now visitors can watch and listen to me present the lesson. Play time is 5 minutes and 25 seconds. In that time I mask and clip a photo of my dog to remove the background, and then pull in a sample new background. Yes! Just 5 minutes!

The technique shown in my video tutorial is a fast method for cropping part of a photograph using Xara Xtreme. The amazing part is the effect starts with a rough outline using straight lines. This simple method should be easy for all skill levels including novice graphic designers.

You may view the photo masking tutorial on YouTube, or watch and listen here.

Practical ways to use a cropped photo include business cards and other printed materials, or for website graphics. My previous lesson for techniques using error diffusion to create clean transparent gif graphics may become a video tutorial soon.

Deleting Photo Backgrounds with Xara Xtreme

After an inquiry from another Xara Xtreme user who needed help cropping the background of a photo, I decided the reply would make a good tutorial. Here’s a lesson for masking and deleting photo backgrounds with Xara Xtreme to use for creating custom graphics for online or in print.

Update: Hate to read? This tutorial is a featured video lesson on YouTube or watch this lesson in masking a photo with Xara Xtreme on my blog.

To summarize the technique, I begin with the Freehand Pen Tool to remove backgrounds and have become quite proficient at tracing complex shapes to create the mask. Next, I use the Shape Editor Tool to drag the straight lines into precise curves going point by point around the border of the mask area. Finally, once traced you select the mask and photo (hold shift+click on each), and then crop what you outlined with the shortcut command CTRL-3. Here are the detailed steps for this tutorial.

For a small photo enlarge it 400% to make it easier to trace. Use the Freehand Pen Tool and hold the ALT key to make a perfectly straight line from two points on a curved shape on the photo. Continue with connected straight lines for each curve to the next point before it begins to curve in another direction. You’ll end up with a lot of straight lines. I usually set a contrasting line color depending on whether I have a dark or light photo.

I don’t use the handles to pull the straight line into the shape of the curve except for minor adjustments. Instead, once all the straight lines are done going around the object I use another tool, the Shape Editor Tool. Here’s more about drawing the straight lines.

Basically you trace the object you want to keep completely with straight lines until you return to your starting point and connect the ends. This fills the traced object with your default fill color to create the mask. The filled shape confirms you have a continuous line without any breaks. Next, and with the filled outline active (selected), find the small white square with diagonal cross lines in the lower left of the work area of the Xara screen. Right click on it and select “Clear Fill Color” so you’re back to just the outline of straight lines that you just drew around the object.

Next, select the Shape Editor Tool which is the next one below the Freehand Pen Tool and use it to form curves out of the straight lines you’ve drawn. With the Shape Editor Tool your cursor turns into a plus symbol until you actually move it over a line, then it turns into the standard pointer cursor. If you left click on a line and release the mouse, it adds a new point. You don’t want that. Instead, press the left mouse button down and hold it onto the first line you want to change to a curve without releasing the mouse button. This allows you to drag the line into a curved shape. Depending on the shape you need to outline, you learn over time the best spot for “connecting” on the line before you drag. If you make a mistake just press CTRL+Z to undo the error.

Once a curve is added to one straight line segment in the outline, continue dragging each straight line segment to fit the shape you want to keep as you move around the object. With experience you can do this quite quickly. Experiment with the point of contact on the straight line where you want to drag. Connect on the straight line close to the curve you just created, try the middle of the straight line, and connect away from the last curve to the opposite end before the next point. In time you will be familiar with the best point to drag for a given curve, and in what direction. Once the outline has been dragged to precisely trace the object, select the line and photo (hold shift+click on each) then use the CTRL-3 key combo to cut the traced object.

Once the object you want to keep is cropped, I usually hold the CTRL button and drag a dark color (usually black) onto a blank place in the work area. The default white background becomes all black and any errors in the tracing jump out at you. You can easily pull and push the outline of the cropped object using the Shape Editor Tool, also. If you see a piece of background that didn’t get cropped properly, you can use the cursor to “push” the offending line in towards the object you intend to keep. With the dark background you can see immediately when you’ve pushed the line just right to remove the unwanted segment.

This may seem complicated at first. The person who inquired about how to mask and delete photo backgrounds in Xara Xtreme initially had problems, but eventually solved it and contacted me again within 24 hours. They successfully created their custom graphic, and it didn’t take weeks to learn. It was done in a day.

EzineArticles Desktop Wallpaper Download

A blog post at EzineArticles.com shows the mug illustration from the graphic tutorial I posted on August 17, 2007. After reading the warm comments, I decided to create a custom high resolution version of the mugshot available for download for EzineArticles platinum authors, and others.

View the tutorial and custom photo illustration used for the wallpaper from my previous post, or right click and save target as to download the free EzineArticles mug desktop wallpaper here (250kb JPG zipped folder). Unlike some free downloads, you do not have to register or reveal your email address.

Article writing is a great way to increase backlinks, and the desktop wallpaper is a friendly reminder to keep writing.

Photograph Optimization Tutorial

Small business website designs that depend on uploading photographs for online stores or sites like real estate will be more effective with photograph optimization. Too often site owners upload original digital photos taken at high resolution, and then the load time is intolerable for visitors on dialup because of the file size. They won’t stick around waiting for pix to load.

Fact: More than 50% of USA internet users are on dialup. This number dwindles as high speed options become more affordable. Why disappoint half your visitors with slow loading photographs and increase the chance of losing a potential sale?

For this tutorial you may want to read the IrfanView photo edit freeware review previously posted on this blog. The owner of the recently launched e-commerce website for Mainstream Memorabilia downloaded IrfanView and learned this lesson in about 15 minutes total, and was very pleased with the ease of use. The online store is easier to manage, and IrfanView will be used on the Mainstream Memorabilia advice blog, also.

You should consider downloading the free software for this photograph optimization tutorial from IrfanView if you don’t already own it.

Once installed, go to any large photo in My Documents and right click on the file name and select “Open with…” and then select “IrfanView” from the menu list. Here’s a sample photo and screenshot of the open window.

irfanview photo edit software screenshot

In the main window menu (see top arrow) select “Image” and then “Resize/Resample” or use the shortcut keys by holding the CTRL button and pressing the letter R. The next window as shown below summarizes the file information, shows the current photo width in pixels, and the resolution in dots per inch, or dpi. Enter the desired width to match what you want on your site, and then select “OK”.

irfanview photo resize options graphic

When you select “File” and then “Save as” a new window appears as shown below. The sliding bar controls the quality of the final photo, and may be adjusted from lowest to best with 100 being the highest quality. Experiment with the bar in this last step until you have the smallest file size which still displays well on your screen and use that on your website.

irfanview photo resolution options graphic

To summarize, the steps are as easy as 1-2-3 within IrfanView. Select image-resize/resample, enter the width before doing save-as jpg, and then experiment with the slide bar until the file size is reasonable. Anything less than 50Kb file size will display well on your small business website, so taking your 1 meg photos and reducing them may keep visitors on your site longer and help make more sales.

Stock Photo Directory Update

The directory of royalty free stock photographs at the Small Business Resource Center has been updated to add four additional websites. Our directory rates sites from 5 star down to 1 star, and we now feature links to 22 sites. More than 150 websites were reviewed to save visitors time finding stock photos with limited restrictions for commercial use.

While many stock photo directories use “free” to describe their photographs, caution must be used. There is a subtle yet important difference between copyright, publicity rights, and privacy rights. The US Library of Congress provides an excellent comparison of rights: copyright, publicity, and privacy here.

A photo of a person, famous or otherwise, requires a model release to avoid infringement or violation of fair use. Photographs of famous places or product logos may be in violation of the law, also, even if you took the photograph.

Some stock photo sites may not explain copyright versus publicity or privacy rights, so please read the license of any photograph you are considering from these websites and then for reference review the Library of Congress legal notice to avoid violations.

Visit the Small Business Resource Center free stock photo directory here.

Xara Xtreme Digital Design Tip

The artwork in this custom door tag photo edit tutorial was created using Xara Xtreme, and illustrates how combining techniques allows designers to get some interesting special effects for printed marketing materials.

For this client a plain photograph of their truck and trailer was received after I designed their custom logo, and before the new logo was added to their fleet.

The vehicle is typical for their business which is lawn service, power washing, and landscaping. They were anxious to order a custom door tag immediately, and I suggested using this photo and letting me add the logo digitally.

Here’s how the finished photo for the ad was designed with the final look displayed in the photo of the last step.

Step 1 – Original photo received from the client. A duplicate clone was created so I had two copies in Xara Xtreme.

door tag design lesson illustration 1

Step 2 – Using one copy of the photo I precisely traced the truck and trailer to create a clipping mask, and removed all the background leaving the truck/trailer only.

door tag design lesson illustration 2

Step 3 – Using the second original photo I applied a 20% blur so it would fade into the background when the clipped truck and trailer were added later.

door tag design lesson illustration 3

Step 4 – Next, the logo vector art was imported and placed on the clipped art along with the phone number in several areas, and then the Xara handles were used to warp the perspective to match the photo for a more realistic look.

door tag design lesson illustration 4

Step 5 – A 55 pixel wide portion of the entire left side of the blurred version of the photograph was removed to create an illusion and add a 3D effect when the final step was completed.

door tag design lesson illustration 5

Step 6 – The clipped truck and trailer were placed precisely over the blurred version of the truck/trailer in the photo so the truck front protruded off the photo to the left and appears to be driving out of the photograph and onto the page.

door tag design lesson illustration 6

The effect was a success and used immediately for the printed custom door tag, and will be incorporated into the custom website design next for a consistent look in print and online. Designing with Xara vector graphics software makes creating professional results so easy that I’ve been using their programs for almost 4 years.

Novice designers looking for a cost effective alternative to the $500 to $1000 software packages will appreciate the price of Xara Xtreme starting at just under $100USD. Download and try Xara Xtreme free for 30 days, and you’re welcome to send me samples of your work, too!

You may want to view the complete custom door tag here to see how the photo was integrated into the advertising piece.

Digital Magic in Xara Xtreme

This lesson in photo edits and creating custom graphics using Xara Xtreme includes a bonus item. First let me explain how the first photo below was created from two photographs. The zoom function and tracing allows graphic artists to create some pretty cool effects.

seagull

The wooden seagull in our front yard was purchased by my wife because it was on sale for $1.00, and once it was planted I took the photo shown minus the real seagull. Using the photograph closeup (below) that I took on the Maine coast several years ago, I clipped and resized just the gull.

seagull

Tutorial: I outlined the seagull with the pen tool by zooming in 5x and using a contrasting line before converting it to the dotted red line shown. Once outlined I clipped the gull from the original photo and resized it to fit the fake graphic version. The background has transparency added to better illustrate the cropped portion.

What’s the bonus? My wife wanted the top photo saying it would be a cool wallpaper for the computer desktop, so I created a high resolution version. The free wallpaper includes more of the foreground for better proportions to stretch on your desktop. You may download the free seagull wallpaper here (right click and save target) to add this to your collection. The wallpaper is in a zipped folder, 677Kb.

Experiment in Xara Xtreme with a free 30 day trial and try clipping portions of photos as shown in this lesson. The technique works great for business cards, and most other printed marketing material.

Search Just This Website

   Google Custom Search

Questions? Contact us
About Jim Degerstrom
Jim Degerstrom photo Web design full-time since 2004 and giving freely helps me learn what customers need.
Call today for no obligation web design advice.
Post Categories
Post Archives