Wednesday, June 25, 2008

 

Web Design and Graphics Resources

A new web design video tutorial demonstrates masking photographs to clip the background, and then combining two photos for a web graphic illustration. This client purchased a stock photo of a boxer being punched and wanted to convey a message about new internet users being abused in an upcoming web design. The second photo overlay in this web design graphic adds a business shirt and tie to the boxer's bare chest to look more like an internet user.

Next, a new custom business card artwork gallery #2 features 50 more full color business card examples. Most include the business card front and back to show how card backs may be used for small ads, or a call to action. The gallery uses an advanced web design technique in CSS to display 50 cards larger than actual size in half an open browser window. Enlarged business card views display instantly as you mouse over the thumbnails, and do not use javascript or flash. In addition, each card has a caption describing the company business product or service in plain text for added SEO value.

Finally, both card galleries have a new comment for clients who want to order fewer than 5000 new business cards. The printer I recommend now offers 1000 2-sided full color UV coated cards for $30 plus tax and freight.

Watch the advanced photo edit video for web graphics on my main site, or view 100 examples of business card artwork in the original 50 card gallery or new Gallery 2 with 50 more designs, and then email me from any page with questions about custom graphic art for web design or print.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Wednesday, June 18, 2008

 

Post Card and Flyer Gallery Redesign

The new photo gallery display web design technique in CSS on the main site was used to redesign the post card and flyer gallery page. The old version was converted to pure CSS in perfect XHTML with CSS2 and zero code errors. This advanced web design method includes similar features to the recently created business card artwork gallery as follows:

(1) 3 rows of 6 post card and flyer thumbnails (18 examples)
(2) enlarged views of each post card on the same page
(3) seo friendly caption in actual text in enlarged views

A key advantage of this web design technique is the old design showed just 6 examples of artwork that required scrolling to view the entire page. The new css web design method displays 18 examples in approximately half the open window browser for easier viewing by visitors. An added bonus is the seo or search engine optimization of the enlarged views with descriptive text captions that may be indexed by search engines.

View these 18 graphic art examples of full color custom designed post cards and flyers as displayed on this gallery page. Gorgeous post cards or flyers in full color 2-sided designs allow cost effective advertising to mail or hand out. This Post Card and Flyer Artwork Design Gallery includes front and back enlarged images of custom flyer and post card artwork.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Tuesday, June 17, 2008

 

Business Card Gallery Converted to CSS

As part of the web design makeover of the Small Business Resource Center website I converted the custom business card gallery in pure CSS. The thumbnail graphic of each of the 50 business card examples has been reduced in size, and the CSS layout renders enlarged versions of each, and all within a half page area. Unlike web design techniques in some photo galleries using javascript or flash, the business card gallery renders enlarged views instantly without a popup window or redirect to a JPG on a new page.

View the following screenshot from this gallery of custom business card artwork, and note that the card thumbnails and enlarged version (larger than actual size) takes up very little space on the page. The sequence of encircled numbers in the graphic below point out (1) the 5 rows of 10 business card thumbnails as contained in an area 550 pixels wide by 180 pixels high, the (2) enlarged view of one of the business card designs as displayed below the gallery rows, and (3) the seo friendly caption in actual text that appears under each photo.

custom business card gallery in css

(1) the 5 rows of 10 business card thumbnails
(2) enlarged view of one of the business card designs
(3) the seo friendly caption in actual text

This improved web design technique with CSS allows having 50 photographs with enlarged views in half an open browser window. The caption under each photo adds search engine optimization value to the web design because the text can be indexed by search engines. The caption text is visible to visitors for improved usability, also, which helps people viewing the business cards identify the company and their business for each design.

View the Graphic Art | Business Card Design Gallery to see this advanced web design technique for creating a business card or photo gallery with CSS. The enlarged views of the 50 cards are each 400 pixels wide, so presenting 50 cards in such a small space is a big improvement over the previous version of that page.

Finally, the web design of this page is complex yet meets W3C standards compliance with perfect code in XHTML and CSS2. A revised gallery of post cards and flyers will be next using this same technique. Unlike the current design with a handful of examples, the post card gallery will include 18 custom post card designs in a similar small space. Readers interested in a compact photo gallery web design for their small business website are welcome to email me for a quote.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Sunday, May 04, 2008

 

Royalty Free Photos of People

This site includes a directory of royalty free photo websites for small business owners to use for web design or printed marketing material. Royalty free photographs of people require special consideration. Royalty free does not mean free to use without limitations even when offered for commercial production of websites, print, or multimedia.

Creative works are intellectual property, and if a photographer posts photos on a royalty free website, it does not imply transfer of ownership if you download from their gallery. There are sites who charge a one time fee for use in one application, others who charge recurring royalty fees, and then those in my directory that are truly royalty free. If a photo includes people, each person's rights cannot be overlooked.

Anything royalty free has restrictions for use, including those without any fee. Always look for and read the license to avoid any legal copyright issues, and be cautious about using pictures from sites without any license information. They may have accumulated photographs without caring about copyright. Sale or redistribution of royalty free photos whether singles or collections is illegal.

It is your duty as a small business owner to stay within the law when downloading content for fair use. A photo that includes real and identifiable persons is especially tricky, and should never be used without that person's consent including a written model release.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Friday, April 25, 2008

 

Website Tabbed Heading Graphics in CSS

A novice small business website owner questioned how heading backgrounds with rounded corners are created and referenced a real estate website using the technique. This was a custom website design using css with graphic design of background images, and explains the technique used.

The sample real estate site was done in HTML plus CSS for layout without tables which provided an excellent example of what can be done creating a tableless web page. Before looking at the code my guess was the page was done with tables, so I was surprised (and impressed) with their layout. Here's a graphic of three sets of links with a top heading and text in pure css that only appears to be created using tables.

sample css header background

The headings were done in CSS and each is a background image which consists of just two graphics which allows text headings. For the ones in question, right clicking on the rounded corner at the left and selecting "view background image" in FireFox (on the real estate site... not this graphic here) allows a visitor to view the corner only. In IE you may not have the view option and might have to save-as to see the square with the upper left corner in white.

Next, right clicking on the far right to view the rest of the background image you would see it is a single thin vertical line with shading to match the horizontal highlight at the top of the rounded corner. The "square" is used once, and then the vertical slice butts up against the "corner" and repeats horizontally as many times as necessary to fill the space.

Attributes in the CSS call out "no-repeat" to place the corner once and "repeat-x" for the vertical line which repeats (x = horizontally) until it reaches the end to fill in the background. The outside border was done using the "border" attribute and specifying the color.

After visiting the site, and for such a well designed page, I was surprised the home page had over 100 code errors. The designer mixed HTML with XHTML creating most of the errors, and if they had validated the code at W3C the errors could have been easily identified and fixed.

In summary, the technique for a heading background and box outline requires advanced design methods in HTML with CSS, plus the graphic skills to create the matching corner and vertical repeating graphic. The person making the inquiry mentioned examples used elsewhere with gradient fills. These use the same code technique except a different custom matching set of graphics.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Sunday, April 20, 2008

 

Two New Card Designs with Custom Logos

The custom business card gallery on my main site features more than 50 designs done for clients, yet it has not been updated in at least a year. Here are two recent card designs with custom logos for a real estate company and an insurance company. Graphics are shown larger than actual size in low resolution.

Real estate card of Green Investment Group, LLC

custom realtor business card artwork

Insurance card design for Einstein Insurance and Investment Group

custom insurance business card artwork

Each features custom logos from sketches provided by the client, and then rendered in a unique way or color scheme in vector graphic art for print to match their corporate image. Clients needing a business card, custom ad, or print advertising yet don't have logo artwork can email me a scanned image. As part of my small business services I can reproduce just about any logo in vector art for print or online.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Wednesday, April 09, 2008

 

CD Cover Artwork for Newly Released Album

I just completed custom graphic artwork of a CD cover, CD insert, and CD label for a newly released album, Back to the Basics, from Shizz Entertainment and featuring 21 songs of indie artists in the Philadelphia area. This comes less than a week after designing a one page website for them and creating posters, flyers, and other printed marketing materials.

Shizz Entertainment, a small business and Philadelphia independent artist recording studio, also does production and promotion for solo artists or groups, and specializes in gospel, r and b, jazz, and poetry whether vocal, instrumental, or both.

Below is the music album cover design and other artwork shown approximate actual size in low resolution.

cd album cover artwork

Next is the cd album insert showing tracks of these independent musical artists and groups in order of their appearance: Shizz, Young Don the Don, Young Leek, Nuckles, Scrooge, Geezz, Lord Dom, Millz Banks, Black Card, Kanard, Mac Money, 12 Gage, Crazy Ink, and O.C.S.

cd album insert artwork

Finally, here's the look of the finished CD label simulated as printed and placed on a production CD. The look matches the album cover and includes all 21 track titles and the names of each artist or group for every song.

cd album label artwork

The artwork was custom designed for this promotional music CD, and free downloads of all tracks are scheduled for released on the Shizz Entertainment website later this month.

Readers interested in affordable custom web design or matching graphic artwork for print are welcome to email me from any page for a no obligation review and proposal.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Friday, February 08, 2008

 

Comparing Dots Per Inch and Pixels Per Inch

Quality photographs for print or online are often a frustration for small business owners. A photo that looks great on an illuminated computer screen may not be suitable for print materials. Let's compare a photo business card design for print as one example with advice comparing dots per inch (dpi) and pixels per inch (ppi).

Standard US card widths are 3 inches. The preferred camera resolution is 300 dpi for print. At 72 dpi a photo will look great in a website design, but cannot be used for print. Graphic artists will usually tell clients they need a 300 dpi resolution photo, or better. Print shops think in terms of lines per inch or pixels per inch, and again, 300 ppi, or better is necessary. High end printing may require 1200 ppi.

To calculate the resolution of a photograph for a 3 inch wide business card, view the dimensions under the size column in My Documents for the photo you intend to use. Divide the card width in pixels by 3 (for the 3 inch width of the card) to see if you hit the magic number. A 300 pixel wide photo divided by 3 yields 100 pixels per inch, so at 100 ppi it would have to be enlarged to fit the card, and at 100 ppi it is not suitable. The enlarged version would be blurry when printed.

This same calculation works for larger print projects, also. For a 6 inch wide post card you can reverse the math to figure you need 6 x 300, or an 1800 pixel wide photo. That same 300 pixel wide photo that looks great on a computer screen would yield 50 ppi for our 6 x 4 post card flyer test.

So despite requests by your graphic artist for 300 dpi photos for print, a 300 dpi postage stamp size photo just won't work on a highway billboard sign, let alone a small post card. A bigger photograph is always better when designing printed marketing materials.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Wednesday, January 30, 2008

 

Website Design PayPal Payment Options

My commercial site now has the option for new small business clients for custom website design to pay for services online. The PayPal verified logo is included in the top banner on each page of the main website. Unlike some online shopping websites that have products at fixed pricing, customers for my services need an agreement for projects before proceeding.

A single payment button on the price list page is set in increments of $50 USD, and payments may be made through PayPal or using major credit cards from Visa, MasterCard, American Express, and Discover. You do not need a PayPal account when using your credit card even though PayPal is the secure payment processor. No additional fees are incurred by the client for this method, so the amount for design services is all that is charged.

Besides custom small business website design, you may now pay for other design services including custom blogger design, custom graphic artwork, plus custom video and audio production, also.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Wednesday, January 02, 2008

 

Chinese Character Logo in Xara Xtreme

I recently created a logo design that included Chinese characters for a new client in Orlando, Florida, whose core business is services to restaurants, especially Chinese restaurants. The client furnished a handwritten version of the characters for their logo which I then recreated in Xara Xtreme.

before and after chinese logo

Their printed marketing materials will be in English. The top view shown above is the handwritten scanned version they provided, and below that is my finished version that was integrated into their logo for the benefit of clients who read Chinese. The phrase has meaning for the majority of their customers without being dominant, while the look is decorative rather than literal for the other restaurants.

Duplicating an existing design or sketch into a finished logo is just one of the services that I provide for custom small business artwork for print or online. This client confirmed the rendering was perfect and easy to read, so with some imagination and Xara Xtreme vector graphics software, graphic designers can achieve professional results.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Thursday, December 20, 2007

 

Custom Site Launch and Special Logo

I finished and recently launched a new one page custom website design for Accelerated Lending Group, Inc of Orlando, Florida including a special logo. The 3 separate line drawings of the custom logo for their website are shown to the left of their business card that I also designed, and were rejected.

Sometimes extracting the mental vision that a client wants in a web design or piece of matching artwork is a challenge!

logo for custom website

The owner wanted a symbol similar to ancient Greek ruins with columns and decided they preferred a realistic building, so I created the near photograph effect which was approved. The logo was done in Xara Xtreme vector graphics software which is my choice for custom website graphics and matching artwork for print.

Once the logo and color scheme were approved, a matching 4 x 6 custom flyer post card was created, also. The website is modest yet allows them to have their www domain name on the printed materials, and new web pages will be added in the near future. A one page custom website may be perfect for other small business owners on a limited budget, or just starting up.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Thursday, October 25, 2007

 

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.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Saturday, September 29, 2007

 

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.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Friday, September 28, 2007

 

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.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Wednesday, September 05, 2007

 

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.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Tuesday, August 21, 2007

 

Free 2008 Business Card Calendar

Last February I released free artwork of a 2007 business card calendar for the benefit of my small business clients. The 2008 version was released today.

This free 2008 business card size calendar artwork in 300 dpi JPG is yours to download with no obligation. The file is in a zip folder (336kb) and the artwork is 3.625 inch x 2.125 inch to allow for trimming to the US standard 3.50 x 2.00 business card. You do not have to register or reveal your email address and may download immediately from this link:

business card calendar thumbnail

Right click on card and "save target as" to download now.

If you need 2007, the free 2007 calendar artwork download is still here.

handwritten signature of Jim Degerstrom

TAGS:

Labels: ,


 Digg  Del.icio.us  Technorati  Spurl  Google  BlinkList  Blogmarks  Reddit  Simpy  Yahoo! Myweb  Furl  StumbleUpon

Friday, August 17, 2007

 

Platinum Author Mug Illustration

The coffee mug shown in the photograph below was in a surprise package received from Chris Knight of EzineArticles.com in recognition after they promoted me as a platinum author. I once mentioned this item to a client who said they'd love to see the mug and then suggested I post it on my website.

The customer is always right, so a smaller version of the photo is now featured on my Directory of Small Business Articles Published Online, and the graphic art tutorial that follows explains how the coffee mug was edited using Xara Xtreme to create the dynamic look and special effects.

EzineArticles.com coffee mug photo

By combining graphics and digital magic, this is how a photograph of a simple item like a coffee mug can be enhanced. The photo edit took less than an hour using Xara Xtreme which is perfect for creating professional illustrations for your small business website or advertising artwork for print.

photo edit tutorial illustration

The left photo (A) is just the mug held at arm's length outdoors, and the center photo (B) was a recent Florida sunset that I snapped and chose to use for the background. I took each photograph with a Canon PowerShot A80 digital camera in auto mode. The right photo (C) shows the 6 elements that were combined as layers in Xara Xtreme, and then placed on top of the golden sunset photograph for the finished illustration. Here's the tutorial showing how the 6 elements were created:

1. The coffee mug was precisely traced in Xara Xtreme and the background removed
2. The glass table top effect was done using a black rectangle overlay with 75% transparency
3. A clone of the coffee mug was cropped and flipped to create a partial mirror image
4. The shadow of the mug and handle was applied in Xara Xtreme at 38% black
5. The shadow under the mug was done as a black ellipse with 4.4px feathering
6. Part of the sunset photograph was cloned, cropped, and flipped to create the reflection

If you are interested in a cost effective vector graphics software program, Xara Xtreme is my choice for custom graphics and photo edits. Download a free 30 day trial of Xara Xtreme here.

UPDATE: Download this illustration as free desktop wallpaper here (250kb JPG zipped folder). Readers do not have to register or reveal their email address, so just right click the link and "save target as" for your copy.

handwritten signature of Jim Degerstrom

TAGS:

Labels: , , , ,


 Digg  Del.icio.us  Technorati  Spurl  Google