Below is a (1) before and (2) after example of an image cut-out:

There are two main ways we can use the clipping path in InDesign:

1. Detect edges
2. Alpha channel

Access the clipping path options by:

• Selecting the image
• Use the menu - Object > Clipping Path > Options

Detect edges

This method works best with images that have a white background and a clear and defined subject, as in the image below.

But these kinds of images are difficult to find or often require manipulation in Photoshop anyway!

Alpha channel

An alpha channel is an invisible layer that is embeded in a Photoshop image. We can use Photoshop in many different ways to manipulate an image and create an alpa channel.

Example of an alpha channel:

You can see in the image above that the alpha channel is simply a mask which defines the background and subject.

In order to create the mask, we need to find ways of selecting either the background or subject: and there are many different methods depending on the image in question.

Method of creating alpha channels:

Selections..

Painting..

Magnetic lasso..

And now, what to do with these in InDesign..

One way to gain some editorial control over our posts on the home page and/or the category pages, is to use a WordPress plugin called PostMash Filtered.

This plugin works by :

1. A user interface where you can visually order posts in each category
2. Modifying the code in the theme files to display the post order

The user interface

The Postmash interface is accessed from the Posts panel:

You then see a list of all your site posts. At the to of this page is a filter where you can choose which category you want to order:

You then just simply drag and drop the posts to achieve your ordering:

Approach

Postmash can be used to easily order posts on your category pages.

Because the postmash plugin orders your category lists, you can’t control the order of your homepage as it is. By default the homepage is ordered by date and posts from different categories can appear there; Postmash won’t affect the orderring because it is purely date based.

This can be overcome by placing all the posts you want on the homepage in a separate special category called, say “Homepage” and setting the homepage template to display that category in the Postmash order.

This can be taken further by treating the homepage as a series of ordered category lists. E.g. you may want featured posts at the top with smaller boxes beneath showing lists of posts from other categories. Remember,  list can consist of just one post!

Example:

Screenshot of a news homepage (click to enlarge)

In the example above, you can see that each block consists of a list of stories. These stories belong to categories that are ordered. The theme then displays the categories in the way that you want.

Editing the Theme code for Category index

This is the tricky part! You need to:

1. Work out which file to edit
2. Find the right place to edit

Which file?

This will usually be  the category index.

1. In the theme editor, locate the file Archive index template (archive.php)
2. To check if this is the right file, add some random text at the top of the code, save and view a category page – if the text appears you have the right file. (then remove the random text)
3. Find the beginning of the Loop which starts with .. <?php if(have_posts())…
4. Before this, paste in:

<?php

$wp_query->set(‘orderby’, ‘menu_order’);

$wp_query->set(‘order’, ‘ASC’);

$wp_query->get_posts();

?>

<?php query_posts($query_string . ‘&orderby=menu_order&order=ASC’); ?>

Homepage multiple loops

To create separate blocks, each containing an ordered loop, see this article on uSpace:

Custom front page – multiple loops

Sign in to Google and go over to http://maps.google.com

You’ll see a link at the top of the left column to My Maps.

• Click My maps, then create new map (or get started if it’s your first time)

Create a custom map

Fill in the map details :

New map details (click to enlarge)

Working on a custom map is a s easy as adding placemarks to the map and adding information to them.

1. Click the Add a placemark tool
2. Click on the map where you want it to go
3. Fill in the information e.g. title and description
   1. Click Rich text for extra formatting
4. You can add pictures here too

Adding placemarks to a map

Pictures

If you want to add a picture to a placemarker, it needs to be online already. Either upload it to your site or find one online.

• Click the add image icon in the placemarker editor
• Copy the URL of an image
• Paste it into the Placemarker image URL dialogue

Adding an image (click to enlarge)

More..

Add a link to your description:

1. Add some text and select it
2. Click the link icon
3. Paste in the website link
4. Click this to add a custom Icon!
   1. The custom icon must be resized to maximum of 64 x 64px
   2. Then it must be uploaded to your website and it’s address pasted into the custom icon dialogue

Add a link and a custom icon (click to enlarge)

To embed the map into your post, see Embedding HTML into your posts

You can embed code when you want to include any external data within a web page.  E.g. maps, slideshows and image galleries.

By default, unless you are site administrator, you cannot embed HTML code straight into a post. Don’t worry though, you just need to do it in a special way.

Note. This system will allow you to embed certain types of media automatically  just by pasting the URL into a post. This includes Youtube, Vimeo, Dailymotion and Scribd. A full list of compatible sites and an explanation is available here.

Embedding

First, you need to copy the source code you want to embed. This must be intended for embedding, you can’t just use arbitrary code.

E.g. On Google maps, use the Link function and copy the embed code:

1. Click on the Link icon/link
2. Copy the embed code
3. Or, click the customise link to alter the zoom, size and map type

Google Map link dialogue

Now, while editing your post:

1. Scroll down to find the Custom Fields widget
2. Create a new custom field by adding HTM1 into the Name box
3. Paste in the embed code into the Value box
4. Click the add custom field button

Custom Fields (click to enlarge)

Now, in the main body of your post, type  [HTML1] wherever you want the embedding to take place.

Embedding (click to enlarge)

More embedding

If you have more than one item to embed in a post, simply use increments of the HTML1 name e.g  HTML2, HTML3 etc.

With 90 PCs, not one of them can do a good job when producing multimedia content! It’s silly, but despite the endless Windows 7 (that was my idea, by the way, to have an over-complicated operating system) and PC World adverts for multimedia PCs, I don’t think PCs and MS Windows are made for doing media.

Multimedia is now becoming so important in journalism practice, and has been a big struggle to find systems that work together and keep things going.

My ethos is that web and multimedia should be for everyone who wants to give it a try and it should be cheap. I don’t advocate expensive software or equipment; buy a camera from Dixons or Fred’s Discount Media-Mart, shoot, put on a computer and edit it with whatever you can find or afford.

So, we give the students typical cameras found in high street shops at affordable prices; JVC Everio, Sony Handycam and Kodak Zi8, all shooting on different codecs. Stick em in a PC and… nothing but randomness. Sometimes it works, sometimes it doesn’t, but with one constant: it’s always slow.  We used Adobe Premiere Elements 3 and 8, due to version 3 not knowing what H.246 is. My verdict: I wouldn’t wipe my bum on it.

With all that, the students managed magnificently!

iMovie

So, during all that I made the decision to try and go Mac. I love macs and have used them for years.

We already have 6 iMacs for broadcast journalism work and I made iMovie available. So I shot video on all camera models, plugged them in, fired up iMovie and.. It worked and it was fast. But hang on! This is much too simplistic! You can’t do anything with iMovie but stick clips together.

WRONG! The reason I love iMovie is that at first glance, to the novice movie maker, it’s dead simple: you stick clips together. As you grow with confidence (and open up help) you find you can unlock the hidden levels.

One student tried out iMovie and commented that you cant do overlay edits. Not by default, as this would scare a novice editor or a granddad with a cam. But if you go into Preferences > General and tick Show advanced tools, this unlocks everything.

Here’s a great website detailing iMovie’s features

So, we had students spending days editing 2 minutes of video on PC with Premiere while others spent maybe 2 hours editing on iMovie.

True integration

iMovie is part of the iLife suite. They are mostly integrated with each other and allow access to each others’ libraries (where appropriate) from within the applications.

Example:
Add and organise photos with iPhoto, create albums. Add audio to iTunes, organise in albums/artist/playlists etc. Within iMovie are tools that let you browse iPhoto and iTunes libraries and insert media into a project.

And for the rest of the suite, here’s a brief lowdown:

iPhoto- Organise images, add meta data (including location), comprehensive image editing including crop, resize and colour editing.

iTunes- Organise audio, add ID3 tags, convert format, buy music, download podcasts.

Garageband- Record and edit audio, edit interviews, podcasts features etc. A bit fiddly to start with, but very powerful fully functional multitrack audio editor.

iDVD – Make DVDs!

iWeb – Good for making quick small websites if you have a .mac or .me account, but not very customisable and the code is a bit flabby.

iMovie- Organise video, edit video with sophisticated yet simple tools. Can be used to make audio slide shows from audio/images. Export for variety of formats including iPod, iDVD and Youtube (uploads directly to Youtube).

Oh, and if you didn’t know, this all comes bundled with a new Mac. Now, where’s my commission Apple?

There’s no doubt that video on the web is popular. Youtube is quite popular (a bit of an understatement!) and google have for a while had a video tab on their home page. News websites are also providing more and more video, some of it is pretty crap, but nevertheless it adds value to their content.

Setting aside the online broadcasters like iPlayer, Youtube (as a website) and countless documentary sites, I’m interested in looking at the use of video within content. In particular in online news.

In 1997, [Jakob Nielsen] wrote an analysis of TV vs. computers that still holds: broadcast TV is a medium for relaxation, where the “user” sits back and becomes immersed in whatever the program directors decided to air. In fact, TV users are usually called “viewers,” emphasizing their passive mode of engagement. In contrast, computer users sit forward and drive their own experience through a continuous set of choices and clicks.

Because of this fundamental difference in user experience, broadcast video feels boring on the Web. There’s nothing to do, no choices, no user control.

This is still true, yet news websites such as the BBC and CNN still embed video, captured straight from their stations, into their articles. Many local news sites even provide TV style news bulletins on their web pages:

In the image above, look how busy this home page is for the Yorkshire Evening Post. Yet there is, in there somewhere, a latest news bulletin in talking head style lasting 02:23.

On top of that you have an animated gif advert in the header, a sky-scraper animated flash ad on the right hand side, a news ticker and a content scroller all wanting your attention.

Here’s an interesting study on eye tracking and some video guidelines by Nielsen.

it’s better to use video for things that move or otherwise work better on film than they would as a combination of photos and text.

A good point. I’ve seen so many times, videos of interviews done as just a head shot. Yes, they might have some cut-away shots in there that the broadcast trainer has said to use, but the fact is that after a few seconds of headshot interview I’m bored and click the back button (not even the stop button!). In many ways broadcast news techniques don’t work on the web, just like newspaper values don’t work in broadcast.

Here’s one that works very well: Police sledge with riot shields, its just Policemen sledging on riot shields.

Making video

If you can find your way around an internet browser and have a bit of knowledge of some pretty simple terminology, you can have a website up and running in a matter of minutes; and at zero cost. Yes, I said zero cost.

Just a quick round-up, for your information, and in no particular order of some hosted blogs/CMSs:
WordPress, Weebly, Blogger, Ning, Typepad.

And lets face it, internet access is also pretty cheap. And paying by direct debit almost makes it seem free; we’re not dropping coins into a meter or dialling up and watching the minute counter anymore!

Anyway, the point is that all this is pretty cheap.

In the same vein, producing web video should be cheap and accessible. Forget your DV cameras, edit suites and compression applications; this is the consumer age!

Going back to what Nielsen said about “broadcast TV is a medium for relaxation”, this is why we have expensive equipment for TV with HD cameras and edit suites and professionally trained camera operators and editors, to make the experience and comfortable as possible.

In  contrast: “computer users sit forward and drive their own experience through a continuous set of choices and clicks” i.e. that story looks interesting [clicks] ooh a video [click, while video is playing looking and deciding at where to click next] that looks interesting [click].. etc..

Things the user doesn’t care about:

• Video quality
• length
• Editing techniques

Things they may care about are:

• That it’s interesting

So you need a device that will record video and audio in reasonably good quality, not necessarily HD and better than an old mobile phone. The point is that you need to be able to see and hear in relative comfort.

Recently I’ve been looking at the Zoom Q3, Kodak Zi8 and the Mino Flip. All three are under £200 and provide good quality video and audio (they’ll also sit on top of a tripod).

The Kodak is the only one with external mic input (on mini jack), but to be honest, what’s the point? Unless you were using a radio mic.

The Zoom is based on their audio recorders and I expect the Q3 to have excellent audio quality. You can also turn off the video and just record audio.

The Mino Flip is for posers, a bit of a fashion accessory, but pretty good!

If you want to spend a bit more cash, then the next step up are handy cams – both tape and HDD media, then at over £1000 you hit the Prosumer market with Sony A1E.

Lastly, editing. My advice is get a mac and use iMovie. Or, get a PC and use Windows Movie Maker. Both are free, but WMM does not handle Quicktime files (Zi8 and Q3 both produce QT files). At the very least you will want to trim your movie files and maybe take bits out.

Some other alternatives are:

• Quicktime Pro – Yes! You can cut, copy & paste in multiple files. Read the documentation and you can use text files to create captions and also do fades etc.
• Sony Movie Studio – cut down version of Vegas
• Adobe Premiere Elements – Cut down version of Premiere Pro. Warning – this program needs lots of RAM and processor!

So – keep it simple and make it interesting!

I’m what some call a front-end developer, and what that means is that I can take a website concept, requirement and design and turn it into a functioning website. This might involve working out the best system (WordPress, Drupal, plain old html) and configuring it to suit needs. Then, taking a Photoshop design and cutting it up into bits, building a html and css frame and fitting the images into it.

I admit, I can use Photoshop, and have been for over 10 years. I know what all the tools do and even know a nifty trick or two. But I lack the ability to do designs like these. Maybe it’s because I’ve spent too long looking at code!

So, I’m working on a project at the moment, that I’ve designed myself for an estate agent. In my mind it should look like this, but it actually looks more like this. And it’s starting to slow down productivity  - ooh, I must put some conditional tags in the sidebar, oh, but the menu looks crap, let me tweak it a bit, then a bit more, and more.. Oh it’s bed time already!

Now I’ve made a promise to myself (and my wife, @crocstar) that I won’t let it bother me. After all, these things can be changed later by either buying a theme or getting someone to make one. But my role is a bit more crucial than that: I make the website work.

So, graphic and web designers – I need you and you need me. Don’t get yourselves bogged down with the html and code, when what you do is design.

Do what you do and do it well.

In the past I’ve  taught the students  Dreamweaver with a bit of photoshop. This was ok in the days when layout tables were acceptable, but trying to teach css layout using Dreamweaver (in layout view!) is near impossible. It’s fiddly, annoying and certainly not WYSIWYG! And in the last year I made a real effort to emphasise code view and how important it really is. I was suprised at how many students actually got it!

So now my new approach is this: Ditch Dreamweaver and write some code!

Here’s what I did:

• Start with the basics of notepad, simple html tags ( p, h1/h2/h3, a, ul, ol, li, img and a) and a browser – using the workflow of edit >save >refresh. The browser is your best tool!
• Add the doctype stuff for compliancy
• Introduce CSS for common tags ( body, p, h, ul, ol, li, a:link etc..)
• Use Firebug/notepad to edit CSS

So the aim is to write content using correct html markup and get accross the idea that design and content are two different things.

Dynamics

Now, who builds static sites anymore? It’s safe to say that the vast majority of new site builds are database driven. So without using a CMS, I found a way to demonstrate that content can be discreet and can be used in different ways throughout a website.

So here’s what I did:

• Introduced the students to dynamic content using php includes, exploring the benefits and explained paralells with a CMS.
• Used includes to include header, menu, content and footer files in a html page
• Divide content within content files into variables e.g. title, body, image
• Build pages using content variables
• Page design using photoshop, tips techniques, slicing, exportin
• Then I built a little framework to get the students started.

I think most of the students have gotten to grips with all this. Next semester I’ll introduce them to WordPress and hopefully their primer in basic php will be useful for modifying templates.

Will spoke a little about where he had come from, his stint in Number 10, his own involvement in early hyperlocal sites and his current role in Talk About Local. Will’s story about how the Kings Cross environment website came about was particularly interesting, as were the other hyperlocal sites such as Parwich. This was very much about the communities having ownership of these sites.

Philip then talked about The Lichfield Blog, how it came about, who runs it and how it all works. And very interesting it was, a shame I didn’t get chance to chat to him!

This got me thinking about the how important these sites can be within communities in providing information and encouraging dialogue. Particularly as “the community” has been in decline since the 1980′s, as has local newspaper production,circulation and the poor quality of some of the regional press websites. If these hyperlocal websites gain in numbers and popularity, will they help to mend broken society? I hope so.

Now, I’m currently working on building a hyperlocal type site at the University of Sheffield’s Department of Journalism Studies. This is to give MA journalism students, currently split over traditional disciplines of print, broadcast, web and magazines experience in working in online.

I know that some people will think “hey, journo’s keep your hands off” when it come to hyperlocal, but nevertheless, journalists are exploring the hyperlocal highways with serious vigor. But at the moment, there’s no money in it and no business model.

Personally, and from a technical view,  I can see the benefits of using hyperlocal for news; being able to map news and giving the reader access to news where (exactly) they are. And giving me something to do in my day job!

What do you think of “Hyperlocal”?