“An image says more that 1000 words”, in this post I will show just hos easy it is creating simple illustrations using Xara Designer Pro 6 (XDP6).
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: