Vector, pixel, HTML, presentation, video, 3D and DTP…

The program has many basic things build into one application, I like that. Everything you create in it is vector based, except of cause if you work with pixel based elements like photos. At my work where I implement websites in CMS systems I use Xara for many types of graphics operations. I might design buttons where I get automated scaled versions which also have mouse hovering and selected states. They are vector based, so scaling them up and down is very easy. I can use theme colors which makes it possible to reuse them on other websites. I can add popup layers to them and links. I simply export it, and Xara Designer Pro 7 produces a HTML page in seconds containing exactly what I need in the CMS system.

At a later state when I need to document the use of the website I can create a manual with working buttons inside it, the same buttons as I just used on the website. I can even export the pages to PDF, giving the customer both an offline manual (PDF) and a full featured HTML website with the documentation.

A webpage with some of the enhancements

I have collected some of the features on two webpages. They of cause have been created in Xara Designer Pro 7!

Some of the new enhancements

Xara Designer Pro 7 has been packed with a lot of enhancements to the way that you use the program. Many of them relate to the program trying to a more “mainstream” Windows 7 application. For instance the tabbed document windows and the fly-out and docking option for the gallery system. Those enhancements are nice to new users but for me not essential, because I know my way around the application with or without such standard windows 7 UI.

Xara Designer Pro 7 offers new paste options allowing you to paste different properties to objects. If you for instance need one object to have same size as another you simply select the first object which is placed where you want to position both object, press Ctll+C. Now a lot of information from that object is on the clipboard and you can select any other to copy various properties from it onto other objects. In this case, the position. Some of the many paste options which Xara Designer Pro 7 now offers are:

• Paste replacing selection
• Paste format/attributes. This will apply relevant attributes from object on clipboard to selected object. For instance color, shadow or opacity.
• Paste opacity mask. You can use any object as an opacity mask. This for instance allows you to have Text appear as a mask on a photo. Opacity masks in Xara Designer Pro 7 will mask out the object is placed on – black colors will give 100% masking, and white no masking.
• Paste position; change the position of the selected object to that of that of the object on the clipboard. If however you have several objects on clipboard it gets a little tricky. I experienced that it just moved the object outside the canvas – not logical.

Another great enhancement is the ability to edit groups in a separate window, allowing you to focus on the elements in the group. You simply double click on the group and a new “inside editing window” is opened. I like that feature.

Some of the existing functions have been arranged differently or made easier/quickly to access. For instance the alignment function can now be accessed directly by right clicking on your mouse. Small changes, but I guess that it all adds to Xara Designer Pro 7 being even faster to use.

New features

Live copies – you can have objects where changes to the properties of each copy will apply to all the live copies of the element. Size, rotation, opacity and other properties however will be local to each copy. An interesting new feature which I for one am looking forward to use.

Magic snap – visual help and snapping when aligning objects allows you to create good looking designs much easier. Take a look at this example:

The alignment of the text above was easily done, as Xara Designer Pro 7 showed lines indicating where I could align two objects. This makes a design better in balance. What the illustration also shows is that I add a mouse over effect with a popup layer fading in. Xara Designer Pro 7 can save anything which you produce as webpages and in the HTML you can easily add things like mouse over, links, menus, and popups. Xara Designer Pro 7 has added transition effects and other nice things.

Photo magic erase allows you to easily remove elements of a photo in a way which makes look like the element was never there. This is an example of the pixel related editing of Xara Designer Pro 7. It appears to work like similar features in other pixel based application like for instance Adobe Photoshop, but actually it is not working on the original image and you can work with it as if it was vector based changes.

As you can see below the way that Xara Designer Pro 7 created the magic erase effect was in fact to slice out part of the photo and fill it with pixels making the element disappear. I have selected the slice, added a glow shadow (which can be added to any element in Xara Designer Pro 7! and is editable at any time) and applied opacity. You can then see through the sliced element and the diapered part of the original picture is again visible.

And a lot more…

Many other things have been added especially to the HTML part of Xara Designer Pro 7. I suggest that you see the videos and press F1 (Yes, windows help – it’s okay to use it!). Locate the “What’s new in Xara Designer Pro 7?” and spend some time reading it and seeing the examples. I simply could not find the time here to mention all of them. But a short list of new features I can offer:

• More widgets. Facebook, Google maps,

New to Xara Designer Pro? Some advices for you…

If you have not tried previous versions of Xara Designer Pro you have a lot to look forward to! Of cause there will be a learning curve, but just visit some of the many online resources – I have listed some of them below. Actually this is one of the areas where I find that Xara is taking good care of its customers – take this statement for instance:

From e-mail: “Information about Xara Designer Pro 7” which you receive when you have registered your Xara product.

“Don’t miss the intro movies on our website (or click the Movies option in the Help menu). There are over 100 movies covering features and techniques and they are a great place to start learning about Designer Pro.”

Do not hesitate to ask “stupid” questions on the various talkgraphics.com forums – we were all beginners at one time

Open and take a look at all the examples included in the gallery:

An example is this extreme drawing, all vectors:

Remember that any drawing you do can contain pages, layers, objects which can all be exported to various formats, including complete HTML pages, PDF files, Adobe PSD files, SVG. You can publish directly to an FTP site. You have unlimited undo/redo, auto save (backup). The undo/redo history is saved together with your document. Xara is extremely good at packing its files – I have tried to load a JPEG (from Adobe) into Xara Designer Pro and save it, leading to file size much smaller than the original JPEG file!

You also get a lot of “free” fonts and clipart, website templates and ready-to-use elements like buttons and navigation elements. Xara supports many color modes, from HEX to CMYK and Pantone. You can create serious print related output including color separation handling. You can easily use Xara Design Pro 7 as a DTP program! The advanced way you can let text flow from textboxes to textboxes and around object is so cool. And yes it works fine if you export your work into a webpage! Xara produces valid HTML and will not change your text into graphics! Oh and for us website developers: Ctrl+Shift+L will give you instant Lorem Ipsum text I love it!

I know it’s nerded: but build in Lorem Ipsum is a feature well worth mentions:

Ad veniam ad minim aliquip, voluptate cupidatat. Sint ex velit in. Sunt enim pariatur sit non, dolore, ut occaecat consequat non ad non aute ullamco sed aute excepteur. Enim dolore exercitation ex nisi cupidatat culpa.

Navigation bar builder making it very easy to construct navigations bars:

Two panorama creating tools – the build simple and the advanced Magix PanoramaStudio 2. Here is a simple example from Aarhus, Denmark. Only 4 images were used.

The Magix PanoramaStudio 2 can even generate an interactive panorama using Flash and HTML. The above view can be seen online here: Aarhus, Denmark

I could go on… But visit the links below to see good tutorials!

Conclusion

With the release of Xara Designer Pro 7 the world’s best one-in-one graphic package have just gotten closer to being perfect! As we all know nothing is perfect, so I can’t call it perfect. There is still room for improvements, but the history tells that Xara is listening to its users, and follow trends in the world surrounding the Xara world. With internet being a very powerful media to communicate and emerging technologies like the CANVAS element of HTML5 and the powerful features of CSS3, my guess is that Xara Designer Pro 8 when it comes will be much more focused on bringing content to the new taking into account things like CSS3 based gradients, round corners, custom fonts and transitions. The current version Xara Designer Pro 7 have put a lot of effort into this, and to Xara Designer Pro 7 super users who understand this application and all it offers like Wizards for internet the sky is the limit.

Every time – actually ever since my first version of Xara Designer called Artworks – I have shown people this application to my friends they have been blown away and impressed by its abilities, features, ease of use and speed. Nothing has changed there in Xara Designer Pro 7 – everything has just gotten even more smart and nice to use!

I think that Xara Designer Pro 7 deserves even more attention, and I would like to end where I started: I hope that Xara Designer Pro 7 like the ARM chip will get the deserved success in the years to come! I am looking forward to seeing the Xara Designer Pro run on an ARM based Windows 8, bringing the old palls together again!

Links

• Download a trial version: www.xara.com
• Talkgraphics a forum for Xara users: http://www.talkgraphics.com/
• “The Outsider” a monthly online newsletter with lots of relevant material for Xara users: Tutorials, featured artists and more.
• “The Xara gallery” – A must visit website where you can see what can be done using Xara Designer products.
• Support from Xara – nice to have, for users of Xara products.
• YouTube search for Xara Designer Pro 7: http://goo.gl/xsTZV
• Xara Group on twitter: http://twitter.com/#!/xaragroup
• Xara trove: http://xhris.digitalred.net/index.htm – a great resource for Xara related stuff
• Xara software on Facebook: https://www.facebook.com/pages/Xara/63703226328
• The Xara Xone – The Xara Xone contains a lot of very useful help, guides and tutorials
• An example of a website made using Xara Designer Pro 7: http://newbie2webdesigner.com/

The images

Here is information about one of the images:

What do you get?

I do not want to rewrite the whole offers from www.clippingimages.com here, you may instead visit the site and see the current prices and offers. At the time of writing however the price is around $5 for a image masked out. The speed of delivery is ofcause also a parameter, and in my case I recieved the images the same day (!) as I subitted them (3 images). I took the offer to get the first 3 jobs for free, so that I could evaluate the quality, that in it self is a great deal!

How does it work?

The process is going on through their webapplication (their homepage):

• You create a free profile on their webpage
• Uploade images
• Specify how you want them back (PSD, TIFF or other) and how quick you need them
• You recieve a quotation (price)
• You accept and at pay using paypal (I guess, as I got my first 3 images for free)

The tests I did

• The support is perfect
• The masking is well, not 120%. It is ofcause better that I could have done it, but they are pros, it is a professionel service and I would expect it to be perfect. I know that am being very strict here, and I think that 98% of all users would find the result perfect.

I got 3 types of result, and tried to open them with

www.irfanview.com	www.xara.com	www.gimp.org
Irfanview wll only render the PSD files correctly, but remember that it is a free program.	With Xara Designer Pro 6 (XDP6) you can make nice text flow around the masked out images. Visit the example page generated using XDP6 The PSD file works perfect when using Xara Designer Pro 6, the clipping path is maintained.	GIMP handles, not supricingly, the PSD version perfectly! TIFF with clippingpath is also handlet perfectly The JPEG with clippingpath however was not handled correctly.

Conclusion

My conclusion is that the masking service delivered by www.clippingimages.com is a superb service, delivered at a low cost, high quality and high speed. With prices starting at $2 per masked image and with a very responsive 24/7 service I will have no problem recommending them.

A litle comment

Even if I find the service superb, I cant help feeling a litle split in my mind. The reason is that the low price because of the low wages undermine the same services in my own contry. It is leading to people loosing there jobs. It is nothing new that this is happening and it is a natural thing, even so – I feel a litle sad for the people in my country who is loosing their job in this area.

Links

• www.clippingimages.com
• Example page generated using Xara Designer Pro 6
• www.xara.com
• www.gimp.org
• www.irfanview.com

Hvis du ikke kan læse det er der en højopsløslig PDF version her: http://dl.dropbox.com/u/3260327/hulterTilBulter01.pdf

Jeg har lavet det i Xara Designer Pro 6 – et fedt program, læs mere om det her: www.xara.com

The background

The example is where I need to tell a friend how to change settings in a jQuery gallery. He wanted the controls for his reference gallery to show above instead of below the gallery it’self. As many other jQuery based plug-ins things are controlled using options, and if you know how – it’s very simple to alter the behavior of such a plug-in. So all he needed was to change a value from “false” to “true”.

Creating the graphics

Creating the graphics was simple:

• Open the webpage containing the gallery which I needed
• Open Firebug plug-in for Firefox, and in the HTML tab, locate the place where the source code was located
• Take a screenshot using the screen capture of XDP6, Ctrl+Q
• Cropping the screenhoot inside XDP6 using the Photo Tool. The Photo Tool will let you crop without losing the original, which makes it an operation (like most XDP6 operations) where you relax as you know: You can always return to original!
• I then found the marker pen in the in the Designs gallery of XDP6, which comes free with the program. Here you can see it together with other gallery items – all of them are vector graphics, as you can see to the right. Here I have changed them using standard vector tricks.
• I placed a resized version of the marker pen clipart on top of the cropped screenshot. Placed a shadow (using shadow tool), then I only needed to simulate a transparent line on top of the source code. Piece of cake (with XDP6!).
• A rectangle made transparent, transformed it and finally did some dynamic blur on it.
• I then copied it to the e-mail for Jeppe, and voila – I hope that my “illustration saying more than 1000 words” could help Jeppe

About the website of Jeppe K Graphix

Here is the gallery as it looked before I explained it to him:

You can see the live version at his “portiofolio page” – his company webpage is here: www.jeppe-k.dk

Links

• Slideviewer plug-in for jQuery
• www.xara.com – find information about Xara Designer Pro 6, and other brilliant Xara products.
• Xara Forums at talkgraphics.com

Today we are spoiled with great icons! Let me link you up with an article with great links to free icons: Icons For Your Desktop and Icons For Your Web Designs. And a taster – I have downloaded some of the Icons:

When I try to create Icons I use Xara Xtreme Pro (open source version for Linux: http://www.xaraxtreme.org/) – a vector based program – which many great icon designers also use. http://iconka.com/ is a place to see examples of that. Here is a teaser:

Xara Xtreme has by the way arrived in a version 5 here in the beginning of june 2009!

“It’s evident that the vast majority of websites are of a graphical nature”
– I disagree. Back in old days static HTML based webpages might be build in a combination of static text and graphics, but today serious websites are build from dynamic elements, ofcause wrapped in some graphics. Every website need a layout, but that does not make them a website of graphical nature.

“Creating websites should be like creating PDF files – you should not need to know anything about what happens ‘under the hood‘”
You cannot compare PDF with websites. PDF are static pieces of documents. Ofcause pieces of code can be embedded into a PDF file, but nowhere near the complexaty of a webpage. I have been working with producing websites since 1995 with focus on the “frontend”. (X)HTML are the fundament of any webpage, and for people like me working under the hood, it is the nature of websites. What we need to understand is that like the brain with its left and right side, a perfect websites comes out of a perfect co-working of the logical and the creative side.

When you state that you should not need to know anything about what happens under the hood you put your main focus on design – and if XWD will do that it will be just another designer orienteded website generating tool. It will only appeal to designers, the right side of the brain and not be the perfect tool.

“it provides no HTML code view, and no abilities to program Javascript”
Oh dear… These facts are almost used as a positive feature! Do they hate HTML and javascript at Xara? I hope not, cause every website is based on HTML and most interaction is based on javascript. I understand that the user should not necessary need to be a master at HTML and javascript, but to position a product in 2009 with words like “no ability to program javascript” is not a good thing. You need to be able to provide points in the autogenerated whereby people who actualy do not hate javascript (like me, I love it!) can hook into a given website and extend it. How about CSS? It would be nice to get documentation about the HTML which XWD generates, when IDs are generated on elemented and when (if) css classes are generated.

Modern ways of extending website content using things like jQuery (with more than 1000 plug-ins) will work if the HTML markup is based on CSS.

“(Web Designer layers map directly to CSS layers)”
In a remark he mentiones that XWD layers maps directly to CSS layers – well, as I mentioned before, it would be very nice to get documentation about the HTML which XWD generates! It is important and not just something which be mentioned as a comment!

Many questions in the forum is about how to add logic to the website
No doubt, it is 1-2-3, very easy to get a nice website up and running using XWD, but what about if you need it to have dynamic elements, autogenerated content? Many of the threads at XWD forum at talkgraphics.com is about that. Why? Because there is a need to “activate” your design. Having a nice design is not enough for many websites. Ofcause if you have a website which states opening hours, driving directions and a mailto link – a staic website will be perfect, and the option to public directly to your websites is unique! I have shown XWD to many friends and they all say: WOW! because its so easy!

I am trying to push the nature of XWD towards the “left brain side” – lets extend the part of XWD which offers easy embedding of logical based elements. The designer part is nearly perfect. Lets make so easy that even creative people can figure it out! Instead of trying to position the product only in the area for creative people, and thereby make the same mistake as the “other” website products going in the other direction (as “The Xara Team” clams most of them do).

Finally: Lets make it even better!
Please understand that I am happy with XWD, I want to throw away mock-up websites made in photoshop, I want to be able to use XWD through the whole process – but for that to be possibel/realistic we need to have a product which respect both the creative and the “logical” part of a website!

It is possibel I think to reach that target! We need to invent some new features for making the logical part of a website so easy that everybody can do it. I have some ideas which I will try to visualize in future. Some of them are easy, some not. One example is the need to be able to choose the level of anti-aliasing for each element

But I hope that this article have been inspirational to the xara-team and others who have read it!

Xara Xtreme – state of the users
In my oppoinion the users of products like Xara Xtreme from Xara Ltd. can be categorized as users primarly focusing on producing stand alone graphics to be used in prints or on the web. I myself have been using Xara Xtreme Pro (XX) as a “photoshop and illustrator killer”. Not only is XX much faster and intuative, but it is priced in a realistisc range for me. Small pieces of graphics like the this one is very easy to create in XX!

The users are experienced in that area, but now that Xara Web Designer (XWD) will let them publish websites in 2 minutes? Is it like letting a truck driver switch profession into a taxi-driver? The switch is not an easy one to take if you need to be a successfull “taxi-driver” – trust me, I myself have been taxi-driver (frontend developer) for years now.

Xara Web Designer – who is the user?
So you want to produce websites? You will be given a range of out-of-the-box elements which have been nicely wrapped in easy to understand Xara interface. No doubt about that, a job well done! All the HTML and javascript has been removed from the person who is novice at developing websites. It removes the functionality focused parts of a website from the person using XWD when creating a website. Judging from that I believe that the people at Xara Ltd. are targeting designer-minded people, may I say “designer-nerds”?

Introducing web-related demands to the designer
So if XWD is a product which moves focus from traditional graphics area to website design, one of the challenges of XWD is to do it in a way which introduce new web-related features in a manner which makes XX-users feel “at home”/safe.

When people feel safe they can go far – they feel satisfied and can experience a flow, a state of mind where you forget time and space. No, it is not what people should always feel when working with XWD, producing a website – but think of the opposite. You do not feel safe – “what will happen if I click here? – will it crash my site?”

A designer probably just want to see her design appearing perfectly on the web, without having to worry too much about how she includes a slideshow or contact form. She probably just wants to say: “Ok, that is my layout, and here I have reserved place for the contact form…”. XWD have a “placeholder” feature which could do exactly that! (see below)

A gateway between design and interaction – a big challenge!
”There is a life after the design has been selected” you might say. What do I mean? Well during my daily work as a frontend developer I take design and turn them into live websites.
Typically (in my professionel work) I receive a PSD (Adobe Photoshop) file and export all the parts in the design, I generate CSS (Cascading Style Sheet) information and HTML/XSLT templates which make the website look as close to the layout of the designer as possible. After that interaction like carousel (see an example) where the designer might have expressed such a dynamic element.

You could say that a website have a static part and a part which “lives” on the page as you visit the website. Such parts only come to life when you view the website in a browser. They can be anything nowadays! From Google Maps, over facebook and newstickers you meet them anywhere you browse on the net. That is the interaction part of a website. They need to give the visitor a good feeling and offer something to him. On the other hand, if the design is not well put together such interactive elements will never even get the attention of the visitor!

What do I think is required?
Let me try to make a list:

1. Well, first of all – we need to have openminded discussions and feedback from users of XWD to be able to address elements of XWD which can be improved. We have that!
2. People with skills with implementing websites in general. Such people would know about the end product: XHTML, CSS, jScript and so on.
3. People who know what is happening on the net, yesterday, today and tomorrow! What is the trend? Would it for instance be more interesting to focus on Silverlight than on Flash?
4. Concrete need: XWD need to publish meta data into the HTML output! Be open! Document what 3rd party companies can expect the HTML output to contain. For instance if you want to somehow be able to have a jQuery based carousel part of your website, there should be a way to add CSS classes to elements.
5. Conform to web standards. Though to most people it is not important, perhaps moving inline CSS to CSS clases could be nice. And if you for instance have a block of text, why not surround the DIVs generated with an outer DIV? This lets 3rd party companies hook in with things that XWD perhaps not supports.

Well, I could properly go on – but for now I will stop here! Please feel free to comment!

As with all other programs some of the features need to be twisted to create the result you want. For instance if you need text to be placed on a graphic element without the text turning into graphics. The file here shows and instructs you how to achieve this.

If you do not already have a copy of XWD, why not try the 30 days free trial version? (even if the product is priced at a ridiculous cheap price of £ 39!).

The product has a great forum where you can discuss the product, read how-to, see what other are achieving and so on. It is placed a talkgraphics.com.

Here is the example: avoidTextBeingConvertedToGraphics.web

Xara Web Designer (XWD) is a very cheap application which fills the gab between designing websites and creating them in HTML. The idea is that you design your site with graphics like buttons, text-areas, menues and graphics. When you are done you simply publish the site to HTML!

The HTML code generated is valid HTML – using CSS to reproduce your (complex) design from the vector (!) based Xara Web Designer application. I myself am a frontend developer and I love to handcode HTML, CSS and javascript (ok, I said it!), so I know about validation of those elements. XWD published HTML is job well done IMHO!

Inserting dynamic elements
One thing which I specially like is the ability to insert placeholders in your design. You can then embed HTML/Javascript/CSS directly in your design. When the site is published the placeholders will contain your code – allowing you to have semi-dynamic contents in your website design.

How to do it?

Well you simply add an area and right click it.

Choose “Web properties…”.

Click on the tab “Placeholder” and select “Replace with HTML code”

Now paste your html into the textbox – voila!

Examples

QR code – information embedded in machin readable 2D barcode
Imagine that you put a small barcode on your webpage, this barcode contains your contact information in a graphic 2d barcode called a QR Code. Your cell phone and other applications can then scan the barcode and save this information about you (and your website)
Try embedding this in XWD:
<img src="http://chart.apis.google.com/chart?chl=Xara%20Ltd.%2C%20Gaddesden%20Place%2C%20Hemel%20Hempstead%2C%20HP2%206EX%2C%20United%20Kingdom&cht=qr&chs=110" />

A You Tube Video
Ofcause you can also embed a You Tube video!
Try embedding this into XWD:
<EMBED src="http://www.youtube.com/v/Mb-ylTDHn44" width=425 height=350 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>

Perhaps not for us professionel website implementing developers – but, I will perhaps use it when starting up a site, or for prototyping. Xara: You are the greatest! Can’t wait to get a copy! (You know my e-mail over there in UK! ).

Example demo video

 Xara Web Designer Video Demos