Sep 262011
 

I was at the Technical Communication UK (TCUK) conference near Oxford last week.  One of the sessions that interested me most was a case study on using video demonstrations in software user assistance. By “videos”, the presenter meant screencasts rather than live action.

What was interesting and distinctive about the solution was that, even though it demonstrated a series of steps through a task, it contained no mouse movement or animated typing effects.  Instead it showed a series of static screenshots, each of which showed the result of completing each step, with simple animations highlighting particular fields and areas of the screen.  A voiceover narration described the sequence of actions required.  A conscious decision not to include mouse movement and typing had been made because it was deemed that the audience did not need to be shown either how to move their mouse around or how to type text.

Sep 232011
 

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere.

Sep 222011
 

InDesign has some extremely powerful text editing tools however it’s more likely that you will be creating and importing text from Microsoft Word. One of InDesign’s less well-known features is the Word Import Filter, designed to help you work more efficiently in a Word based workflow.

The filter is only accessible when you import a text file. In the Import dialogue box, make sure to check the Show Import Options check box.

screenshot of indesign text import dialogue box

InDesign text import dialogue box

InDesign will display the following dialogue box.

screenshot of InDesign Word import options dialogue box

InDesign Word import options dialogue box

Sep 162011
 

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/ 

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

[tubepress video="bJ_ONON90fo"]

paper.js -  The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/

processingjs - Processing.js is the sister project of the popular processing visual programming language, designed for the web – superb for data visualisations

Sep 122011
 
Step 15-1

The last part of this trio of tutorials for creating an iPhone graphic will show you how to export the vector character and save it for the different screen resolutions of the iOS devices.

 

Open Photoshop and create a new document. Go back to Illustrator and select your artwork making sure that you do not select the original drawing on the bottom layer. Now got to Edit > Copy (Cmd + C / Ctrl + C), switch back to Photoshop and select Edit > Paste (Cmd + V / Ctrl + V). Photoshop will ask how you would like to import the artwork. Choose Smart Object, click OK and then press Enter to place the artwork.

Sep 102011
 
Step 10-1c

Continuing on from part One, I will now show you how to use the Stroke Width tool and finish off the character in illustrator.

 

The exciting new feature for Illustrator CS5: The Stroke Width Tool (Shift + W) allows you to vary the width of a stroke along its length at any point regardless of where the anchor points are. This means that you can change a stroke’s weight at any point. To get started zoom in on your stroke, select the tool and click and drag from the middle of the stroke outwards. Continue to do this along the line until you achieve the desired effect.

Sep 092011
 

Have you ever noticed how many useful InDesign functions can be enabled by using the option/alt key?
I’ve tried to itemise as many as possible in the following list though there may be some more…

General uses for the option/alt key

In most Adobe applications, holding option/alt changes the cancel button to reset in many dialogue boxes, saving the need to close and reopen the box.
Similarly, option/alt + drag an object duplicates it, including guides

Option/alt In InDesign

holding option/alt on  import text, changes the loaded text cursor to semi-auto flow mode. This will flow text into a column then reload the cursor automatically.

Sep 092011
 

I have recently been taking an interest in WebGL, so I thought I would post some information about WebGL here, and also add some links to some of the examples that I have found.

What is WebGL? WebGL is a graphics library that extends JavaScript to allow it to generate some truly spectacular 3D graphics, within the browser, with no plug-ins needed. It uses the computer’s GPU (Graphics Processing Unit), and as such is a fairly low-level language (read: complicated).

WebGL interactive water example / (http://madebyevan.com/webgl-water/)

[tubepress video="R0O_9bp3EKQ"]

Sep 072011
 
Step 8b

As more and more apps become available in the iTunes App Store, ensuring your graphics stand out is becoming increasingly important. I will take you through the process of creating a character for an iPhone app and saving it in the correct sizes for use on the many iOS devices with Smart Objects in Photoshop. I will also show you how to use the new Stroke Width and Shape Builder tools in CS5 Illustrator over the course of this three part tutorial blog.

 

Not got CS5? No need to fret, I’ll also take you through the alternatives for users on older versions of the Creative Suite.

Sep 022011
 

In the final part of this series, I’ll describe how to import movie content into InDesign and how to export your document as an animated Flash file.

InDesign has been able to import movies for some time, unfortunately it was not possible to view them without exporting the file to another format. CS5 introduced the Media pane which addresses this issue.

Screenshot of empty media frame

Empty media frame

Importing movies is exactly the same as importing standard images. Either select an existing frame or import directly by hitting cmd + d (ctrl +  on Windows).

Screenshot of media import into InDesign CS5

Media import into InDesign CS5