matt ward's
dESIGNER's cLOISTER
a collection of thoughts from a designer's mind - a Highland Marketing blog
the author main page

» Learn The Secrets of Direct Mail
On April 22, Highland Marketing will be hosting two half-day seminars a the Holiday Inn in Kitchener. These half day seminars, entitled "The Secrets of Direct Mail: Why it Works and How to Use It," cover the basics of direct mail, introducing it as a marketing medium and then delving into some of they key areas that mailers need to consider in order to be successful with their direct mail. The seminar will consider such areas as the secrets of successful direct marketers, the power of data mining, how to make mail work for your and how to shave thousands of dollars off of your direct mail budgets. It's going to be an intensive and eye-opening seminar, and if you're in the area I encourage you to attend. With a modest $99 cost, it will be well worth your time and money. Click here to visit hiland.com, where you can read more about the seminars or register for either the morning or afternoon session. For my part, I will be hard at work preparing the visuals for the presentation. I can't say much right now, as it is still in production, but expect a uniform and elegant presentation that work to achieve impact through minimalism and contrast. Sound intriguing? Why not register today, and come learn how you can completely retool your direct marketing campaigns.

posted on: Wed, 09 Apr 2008 | comments () | /general | permalink


» Free Photoshop Frames
I've been saying for a while now that I want to post a couple tidbits for readers to download for their own use. So, then, let this be the first! Recently, I was doing some post-production on some photographs I took of my very pregnant wife (and by "very" I mean far along - she looks great). Anyhow, I wanted to add some visual interest to the photos, so I created a series of frames to embellish the images. However, rather than just build the frame designed specifically for the images, I created templates into which I could drop any image (as long as its is the right size - some cropping may be necessary). In so doing, I have started to create another asset in my arsenal of tools. I now have a collection of five different frames which I can use over and over again for different projects and/or different clients. And, I expect that, over the course of time, the collection will continue to grow. The following graphic illustrates the different frame, all using the same image, which I downloaded from stock.xchng:
photograph opacity mask
Now I'm not too picky on how you use these frames, but chances are you will be limited by their size. When I created these frames they were very large, but given that they are all fully layered PSD files, some of them are extremely large. Because I only have so much space on the server, I sized them down quite a bit (from 1944 x 2896 to 450 x 670). As such, you probably won't be able to use them for any project that requires a high-resolution image. Still, you can certainly use the frames for smaller images, say for upload onto a website or to create small prints. If you want, you can even just have a look at how the frames are layered and set about creating similar frames for yourself. Click here to download the frames, and enjoy. If you are interested in these frames, and would like a high-resolution version, please feel free to contact me, and we can make arrangements.

posted on: Wed, 09 Apr 2008 | comments () | /downloads | permalink


» More Speed Painting - Thom Yorke
Alright, so hereís another speed painting, but this time the painting is not done with Ketchup. This painting of Thom Yorke, quirky front man for the British group Radiohead, is done entirely in Photopshop. It packs 4 hours of painting into just over 7 minutes.
The think I like about this video (aside from the subject matter and killer music) is that, while the painting certainly occurs too quickly to function as a particularly effective tutorial, if you are at all familiar with the workings of Photoshop, you can at least guess at the various tools techniques that are being used. For instance, there are several instances where the artist will cut a piece of the painting and move it a bit, then blend it back in with the rest of the painting. One thing I would be interested to know about is the artistís use of layers, if there is any. Iíve watched several speed painting videos by this same artist, and in some of the otherís Iíve seen subtle ďfixesĒ that suggest the use of layers. Didnít notice anything like that in this video? Can you? Now, for all you would be Photoshop painters out there, keep in mind that this painting was probably not done with a mouse (though if it was, my deepest respect goes out to the artist). Chances are it was done with a tablet, a touch sensitive screen-like device which allows the artist to ďpaintĒ on the computer in much the same way that you would draw on a piece of paper. Iíve never worked with one myself (though I would like to), but I can only imagine that it would make the whole exercise much simpler. A mouse just canít match the precise control of a pencil or brush.

posted on: Wed, 02 Apr 2008 | comments () | /design/painting/speed painting | permalink


» Speed Painting of John Locke
Recently, friends of mine got be completely addicted to the television series Lost. Though I had previously been somewhat dubious about the viability of a television show based entirely on a deserted island. But of course, the island is not just an island, and is far from deserted. Others and secrets populate the entire landscape (as well as polar bears, old ships and hallucinated horses). As it turned out, it was just the sort of show that got me totally hooked. But itís not just me. Fortunately, my wife also enjoys the show. Now, I already own seasons 1 and 2, and we have friends that are going to lend us season 3 once weíre ready for it. Still have some catching up to do. Anyhow, thatís really all for the purpose of introducing another speed painting video. In this case, the painting is of the character John Locke.
I donít have much else to say about the video, other than the fact that the artist rocks (heís the same guy who did the image of Thom Yorke). The one thing that most great speed paintings do demonstrate, however, is that the real devil is in the details. It doesnít take these guys long to get the basic shape of their subjects, but it is truly amazing just how much time they expend on the little details Ė those tiny shadows and highlights that really bring an image to life.

posted on: Wed, 02 Apr 2008 | comments () | /design/painting/speed painting | permalink


» Keltech Creative Services
A few weeks ago, we officially launched a new company called Keltech Creative Services, a company with which I am very much involved. Essentially, Keltech is designed to function as a creative partner, providing independent services in creative writing, graphics design, illustration and photography. Now, while weíre not expecting things to just take off, we do expect big and exciting things from Keltech in the future. Weíre looking forward to the many exciting opportunities that await us, to work with new and old clients, and to deploy a range of creative skills on a variety of different projects. To learn more about whatís going on, you can visit www.keltechcreative.com. The new website features a growing portfolio, featuring a variety of different works that we have completed. Since much of the work featured in that portfolio is mine, my intention is to eventually integrate those images with a "gallery" section that I have been meaning to implement on this blog for quite some time now. Also, I am planning on deploying a "downloads" section, which will essentially be a category of posts in which I make certain of my design tools available for download. Sometimes these downloads will be available for full use. Other times, they will available in some limited capacity, usually in an effort to preserve server space. Some of the files I work with can be rather large. Regardless, things are moving forward, and you can expect a lot more discussion of Keltech and the various projects that I am working on at a given time. In the coming weeks, you can also expect to find that the designerís cloister will become available of off both the Highland Marketing and Keltech Creative websites. It will also finally be receiving the long overdue and much-talked about facelift, complete with an elegant new design! Iím excited for that! Anyhow, thatís it for now. Be back soon.

posted on: Thu, 27 Mar 2008 | comments () | /general | permalink


» Loading Gifs at Ajaxload!
Hey folks! I know its been forever since I posted anything up here. Actually, here we sit around mid march and I have no posted anything at all in 2008! Shameful, I know, especially after I went on something of a posting blitz through December. I am hopefully going to have a much longer post up early next week, explaining much of what Iíve been up to lately! For the moment, though, I just want to bring your attention to a nifty website that I just stumbled across. Itís called Ajaxload, and it allows you to generate your own ďloadingĒ gif. I actually went out looking for an archive of different loading animations, hoping to find something that I could use Of course, I could have created one myself, but sometimes its just better to let someone else do the work for you. Especially when its quick and free. When I found Ajaxload, it was better than I could have hoped for! This site lets you chose from 35 different and elegant graphics (all very modern, with none of these cheesy and unattractive gifs that still pepper the netÖ). Moreover, you can also select your background colour and foreground colour. Or, if you donít want a background, you can also set it to transparent! Once youíve made your choices, hit the generate button. This will create a preview for you, and if your satisfied you can download the image (otherwise, just keep playing until you get something youíre happy with). Simple as pie, but oh-so-useful. I got a wicked loading graphic in just a few short minutes. Making one from scratch would definitely have taken longer. So go check it out. Iím sure youíll be able to create a graphic that you like! Okay, Iím off for now, but hopefully Iíll be back next week!

posted on: Thu, 13 Mar 2008 | comments () | /design/free stuff | permalink


» Displaying Images with JavaScript
I have been working on the initial concepts for a new website, and one of the things that I am looking at doing is having a gallery of different images that can be browsed by visitors to the site. But, instead of sending them to a separate page or opening a new window every time they select an image, I want all the viewing to be done within a single document. So, I wrote a little JavaScript application that I can use to implement this functionality, and I thought I would share it with you here. To try it out, just click the button below (once the image appears, just click it again to make it disappear):
Basically, the script manipulates the style of the image and its surrounding <div> in order to give the illusion of animation. They other key is the use of the setTimeout() method. Rather than explaining it all myself, Iím going to offer a quote from JavaScript: The Complete Reference:
The window object supports methods for setting timers that we might use to perform a variety of functions. These methods include setTimeout() and clearTimeout(). The basic idea is to set a timeout to trigger a piece of script to occur at a particular time in the future. The general syntax is timerId = setTimeout(script-to-execute, time-in-milliseconds); where script-to-execute is a string holding a function call or other JavaScript statement and time-in-milliseconds is the time to wait before executing the specified script fragment. (368)
Basically, my script uses extremely short timeouts in order to execute a number of actions in a row. Since these actions change the size and opacity of the image and its container, it ends up looking like it has been animated. The script is still in need of some gentle massaging, but I hope to have it up and running before too long. I am also hoping to develop a ďplug and playĒ version of the script that visitors can download and implement into their own pages. The way I see it right now, the package should include the script file, which will require some minor configuration, and a text file explaining precisely how to go about using the script. It should be available sometime in the New Year.

posted on: Thu, 20 Dec 2007 | comments () | /design/web development | permalink


» Using a Photograph as an Opacity Mask
Yesterday, I posted about my recent discovery of the opacity mask in Illustrator. I also suggested that the opacity mask afforded illustrators a great deal more flexibility than being able to set gradient opacity through the opacity dialogue box. Today, I would like to show you one of the ways in which the flexibility can manifest itself, by using a photograph to create the opacity mask. It's really very simple. Simply import the photograph that you would like to use as your mask into Illustrator. Scale it appropriately, and select the photograph and the object your want masked. Open the menu under the Transparency dialogue box and select the Make Opacity Mask option. Voila. You're mask is applied.
photograph opacity mask
But wait. Does you're new, masked object look odd? Are the colours inverted? Depending on what type of photograph you're using, the answer could very well be yes. Remember that the darker an area of the photograph, the more transparent that part of the mask will be. It's almost like thinking about light. Black absorbs light, and does not reflect it back to the eye. Thus, it creates transparency. Conversely, white reflects light, and thus creates opaqueness. The problem that arises is that shadows become transparent, while highlights remain more opaque. So, if the background showing through is lighter than the object being masked, the shadowed areas will then take on the appearance of highlights, giving an inverted effect. In some cases, this can be used to your advantage, but there is a simple fix if you don't want the inverted effect.
  1. Select the masked object
  2. Open the transparency dialogue box. You should see the two linked images - the object and its opacity mask.
  3. Double click on the right image, which should be your photograph. This will allow you to edit the mask itself.
  4. With the photograph selected, choose Filters > Colors > Invert Colors.
This will change the light areas of your photograph to dark and vice versa. As a result, the transparency will also be inverted. You can also do all sorts of things when you have the mask layer open. This includes adding more layers, adding objects to layers and editing objects, all to create highly complex, vector-based opacity masks! Finally, one last thing to note, which you may have already noticed, is that the mask will only affect the object it is applied to. Anything that hangs over the edge of the object will be effectively cropped and will not affect the rest of your illustration.

posted on: Wed, 19 Dec 2007 | comments () | /design/illustrator | permalink


» Where are you, O' Gradient Opacity?
When I first started using vector-based drawing programs, my weapon of choice was Corel Draw. Mostly, this was because it was what I was taught to use in high school (though I use the term 'taught' only in its vaguest sense, since the teaching was really more self-administered). I can only imagine that the school chose Corel because it is a Canadian company, and at the time Adobe had not yet reached the pinnacle of its influence. Thus, when I made the transition from Draw to Illustrator, it was not without its pains. The same is true of moving from Photo-Paint to Photoshop. Now, a year and half later, things are better. I'm very used to CS2 and can probably do more with Illustrator and Photoshop than I ever could with Draw and Photo-Paint. That is not to say that they are necessarily better applications, merely that I've grown and matured through using Adobe's suite rather than Corel's. Regardless, there was one technique that I struggled with for a very long time. In Draw, I was able to set the transparency/opacity of any object. Illustrator lets me do this too, but with Draw I seemed to have a great deal more flexibility, since I could change the transparency mode to gradient (called 'fountain' in Draw), pattern or texture. This allowed me to create some very nice effects, wherein an object could gradually fade away. Try though I might, however, I couldn't find a similar option in Illustrator. This was very frustrating for me. I found myself limited in what I could do (which was still a lot - Illustrator is a robust program), and even tried to work around it with certain faux effects - letting an object fade into the background colour can give the appearance of transparency. Recently, however, I discovered the solution to all my opacity woes, thanks to BittBox. Basically, you have to use what is called an opacity mask. The opacity mask is a grayscale object which is used to mask another object. Black sets something to completely transparent, white leaves it completely opaque, and varying shades of grey result in varying degrees of opacity. The darker the grey, the more transparent the object, and vice versa. Anyhow, there's really no need for me to get into all the nitty gritty of how to do it. Just pop over to BittBox and check out the tutorials there. There is a general tutorial and a tutorial about how to achieve the glassy reflection effect that (though I do love it) has so pervaded much recent design. Now it may not seem like the best way of doing things. Wouldn't a simple gradient transparency have been easier? Probably. But if you really think about it, the opacity mask technique probably affords illustrators a great deal more flexibility. After all, you are not limited to gradients. You could even use a photograph to create your opacity mask. I'll show you how in my next post.

posted on: Wed, 19 Dec 2007 | comments () | /design/illustrator | permalink


» Free Vector Images at vecteezy.com
Wow! I'm just totally throwing out the free sites lately. And I have another one for you. From the creators brusheezy.com, comes... vecteezy.com! Okay, so I don't think the site is really all that new. In fact it looks like its been around a while. But it has some killer vector images that are available for download. Check out some of these examples:
Pretty cool stuff. Of course, as always, be aware of the licensing. Different vectors are available under different licences, which in turn limit the ways in which you can ultimately use some of these images. Always determine what you are allowed to do before using a vector in any of your own work. You can always just download the files as a learning experience, too. Sometimes I like to grab a vector I find, open it up and tear it apart, just to get some sense of how it was composed. Other times, I'll actually try to reconstruct an image from scratch, again just to see if I can do it. I can usually manage, though sometimes it comes quicker than others. On last thing to consider is that the images come in different formats. The site itself can filter for Illustrator, Emasculated Postscript, Corel Draw and the Scalable Vector Graphic format. Most contemporary vector programs are capable of at least some level of conversion, but things don't always work as perfectly as we might like. Even different versions of the same software can have some variance. Be prepared.

posted on: Fri, 14 Dec 2007 | comments () | /design/free stuff | permalink


 powered by blosxom