Archive for the ‘xara’ Category

This tutorial about digital photo edit magic explains how an ordinary palm tree being sniffed by my dog was turned into an elephant leg for a humorous effect. The photograph collage below includes 4 photos marked A, B, C, and D that are used to explain the final step D (shown here smaller than actual size) as posted on the Corky the Shelter Dog Blog.

Photo A: The original untouched digital photo of Corky the Shelter Dog sniffing a tree before any edits are done.

Photo B: An elephant leg photo is cropped and superimposed over the palm tree in a rough outline before detailed edits.

Photo C: Details marked 1, 2, and 3 on the elephant leg point out details done as follows:
1. The photo is cropped to fit the tree, lightened, and given transparency.
2. More leg is cropped around Corky’s head to make it appear behind the dog.
3. Additional edits of the foot allow grass blades to show for more realism.

Photo D: The finished illustration and digital effect is ready for Corky’s site, so take a look at the full-size dog photo edit on his blog.

The graphic software for the edit is by Xara. While capable of creating vector graphics artwork similar or equivalent to PhotoShop, the price is around $100 USD and suitable for creating novice to professional results. You may download Xara Xtreme trial software free for 30 days to see how versatile it is for all types of online illustration or artwork for print.

An email received today was from a customer who watched one of my graphics tutorial videos recently where I use Xara Xtreme, and then asked for a comparison of Xara Xtreme and Photoshop for creating website graphics. Here’s my reply.

I chose Xara based on price and functions after downloading trial copies of each. Both are vector graphics software. Photoshop is the “standard” for high end professional design, yet for what I do designing web graphics and artwork for print, the cost and functions of Xara were more than sufficient and made it a clear choice.

It’s easy to understand why the advanced print artwork capabilities of Photoshop are needed for full time graphic design. Based on need, Photoshop had more than I needed or would ever use, while Xara was sufficient without more technical functions or a steeper learning curve.

View examples of my artwork for a feel for what can be done in Xara. 9 out of 10 logo designs on my site including these 50 custom business cards and another 50 card designs were drawn freehand in Xara to ensure crisp clean lines in the final artwork.

The video flash animation in the intro and outro of new videos done for my puppy’s Life with Corky website used Xara. Here’s an example 23 second puppy video on YouTube to demo flash creation and export. Special effects for the moving text and puppies popping up was created with Xara.

If you’ve only seen the first photo edit tutorial, an improved video of photo masking techniques shows more detail of how to use Xara for photo edits including cropping backgrounds, so that may be of interest, too.

I’ve been using Xara Xtreme for more than 5 years with professional results online and in print. Photoshop is excellent, yet more than I need for web and print graphics.

This advanced photo edit tutorial in Xara Xtreme shows an example of how to hide unwanted portions of a photograph for web graphics in custom web design. The process from start to finish took 5 minutes. In this case the web graphic needed to be revised to remove the toddler playing in the hallway. Here’s how the photo edit was done in a series of 6 illustrations marked A to E:

Photo A (below left) shows the original photo taken by the client which displays the toddler to be removed. Viewing the carpet, floor trim, and wall to the right of the baby, I selected a vertical portion taller than the person, and created a rectangular clipping mask as shown in photo B (below right).

Photo C (below left) shows the cropped vertical section of the carpet/trim/wall taken from a cloned duplicate of the photo. The original photo placed in the background has 65% transparency applied in preparation for the next step.

Photo D (below right) shows the carpet/trim/wall clipping stretched horizontally to cover the toddler and part of the background decor. To create a realistic graphic, solving the problem of the clipping covering the planter and leaves will be next.

Photo E (below left) shows less transparency on the background, and some transparency of the carpet/trim/wall for an enhanced view, and then the clipping mask drawn precisely over the planter and leaves without revealing any of the toddler. Select the mask and carpet/trim/wall graphic and use CTRL+2 to crop the masked portion.

Photo F (below right) shows the final web graphic after removing transparency of both pieces to digitally create the new photo. The carpet/trim/wall piece has feathering applied so it blends in better with the background, and now the photo is ready to insert in their custom web design.

Users of Xara Xtreme may use shortcut CTRL+K for cloning and CTRL+B and F to send pix front or back during the edit. Select the mask and photo then use CTRL+3 to crop. The only other feature needed in Xara is the feathering tool. For higher quality work for print rather than in a web design, use the steps in this photo edit tutorial to begin, and then zoom in for more precision.

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.

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.

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.

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.

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.

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.

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.

Do-it-yourself small business website designers are sometimes graphically challenged, and the pixel trash around logos or text in their GIF website graphics is not uncommon. This short tutorial for website design and online graphics is a lesson in overcoming that problem. There is an easy solution once you understand a technique called “error diffusion” for creating transparent graphics that blend into the background.

We’ve all seen examples of tiny jagged off color squares around the edge of logos or clipped photographs used for websites. First impressions are critical to keeping visitors interested in staying on your website. Taking care to create professional graphics without the pixelated trash may be the only difference between you and a competitor, and fixing the problem is not really difficult.

Here’s a portion of a customer’s logo done with and without error diffusion. Both graphics were created in Xara Xtreme which allows selecting error diffusion during the export to GIF process. The difference in quality is subtle yet obvious.

You will need a vector graphics software program. Some are expensive. Xara Xtreme is my choice for professional designs for print or online, and their program is perfect for novice designers or full time pros. The price starts at less than $100 and you may download a free 30 day trial of Xara Xtreme here. As your skills advance, you can use Xara to create animations and smooth flash graphics, also.

Error diffusion is an option for exporting graphics to GIF format that intentionally picks up a small amount of the background color so that the finished display is crisp and clear. The secret is placing the graphic over a block of color that will not be exported yet it is the same color as the background. This explains why the same logo shown above looks so much crisper when error diffusion is applied.

I recommend investing in a vector graphics program so you can create cleaner graphics to display online. The improved look in your website design could repay the modest software investment with just one decent sale of your products or service.

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.

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.

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.

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.

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.

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.

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.

Graphic artists are welcome to download this custom door tag template created in Xara Xtreme (4Kb zip folder, right click and save target as). This is another in the series and it’s the large standard half page size of 4.25 inch by 11.0 inch. No registration, email capture, or signup required. This download is another in my series of free resources to help individuals or small business owners with do-it-yourself custom artwork.

Short tutorial: The template is color coded to identify the safe area for text, the bleed area, and margins. Standard guidelines are in place for easier layout. You may use the entire area for the background, but limit text within the green safe area.

The red box in the template is the doorknob hole section and nothing significant like text or important photos should be placed here because they will be hidden once the door tag is placed on the customer’s door knob. The dotted outline is the centered placement of the die cut for the hole, and most printers will slit the tag at a 45 degree angle to the edge.

Once you understand the safe area for text and other limitations you may want to remove all the reference colored blocks from the template to begin your design. Email me with any questions or requests for any special templates.

The above illustration is a reduced size low resolution version of a 2-sided full color door hanger artwork done for a landscaping, lawn care, and pressure washing service company in Orlando. The large blank area near the top is to accommodate the die cut 1.5 inch hole for the door knob and the 45 degree angle slit after printing.

The portion lost in the die cut explains why the top of the front and back do not have real content. One third will be cut out, but I chose to add color in what will be left in the finished door hanger.

Note: You may want to view the photo edit tutorial here to see how the truck and trailer effect was created.