TechMedia

Liz’s tech and media musings
  • Home
  • all posts
  • design
  • photo
  • portfolio
  • video
  • web

photo

Storify makes stories from social media

09.02.2011 0

I just completed my first test of Storify, which is a fun and easy way to tell stories from social media:

Collect the best photos, video, tweets and more to publish them
as simple, beautiful stories that can be embedded anywhere.

The resulting story, shown below, can then be easily placed into a webpage, or linked to from Storify. Here’s what the one below looks like on its page.

The service is in Beta testing for the time being, and you must request an invite to use. Storify is being used by some large media companies to cover events such as the uprising in Egypt – both CBC and The Globe and Mail created Storify pages. And with the recent announcement that Storify raised $2 million in its first round of funding, it looks like we’ll be seeing even more Storify embeds on the pages of news sites.

It’s a great tool for breaking news, but could also be used “to remember an event through what people share, whether it’s a conference, wedding, election or natural disaster,” says its profile on Crunchbase.

How would you use Storify?

Put high res photos online using Zoomify

23.07.2010 0
Zoomify lets you post high resolution photos to your website and creates panning style navigation.

Zoomify lets you post high resolution photos to your website and creates panning style navigation.

Most times when you post photos online you try to make the files fairly small to ensure that viewers won’t wait too long to load the images.

But Photoshop’s Zoomify command lets you create pages with high resolution and panaromic images that are composites of smaller, faster loading jpegs, which greatly improves load time.

And it’s so simple to use.

Simply go to File>Export>Zoomify. The template field allows you to pick a colour for your interface.

The Base Name will be the name of the html file Photoshop creates for you.

Make a folder and select it to save your zoomified files in. Set jpeg quality – keep this high, you want your image to look good.

Set what size you want your browser interface to be (maximum width is 1000 pixels).

Make sure the Open in Web Browser box is checked to see your new creation immediately.

That’s all there is to it, just hit OK and your files will be created ready for upload – a zoomify viewer swf file, the tile group of small jpegs, an image properties xml file and the html file.

The interface will look something like this shot of a spring commute on Great Slave Lake. (You can zoom in and see a guy on the houseboat – is that Adrian?)

And lastly – don’t forget to add a target=”_blank” attribute unless you plan to add navigation to the page!

Use colour selection tools for harmony

17.06.2010 0

Colour is an important part of any design, it immediately sets the tone and helps to communicate the mood of your message.

Tones of a colour can be easily matched, but just because a website has the colour red doesn’t mean you add any old red and expect design harmony.

So when a friend, who is creating a slideshow for a class reunioun, asked, “how do I match my school colours?,” I thought that would be a great topic for a post.

There are two easy ways to get the numbers you will need to match your colour to an existing colour. If the colour is online, I would highly recommend using Firefox’s ColorZilla extension.

It assists web developers and graphic designers with color related tasks - both basic and advanced.  With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

I use this handy extension frequently, it’s so easy to grab the RGB or hex colour values from a design element for use in Photoshop, or to use in your CSS.

Speaking of, there is an easy way to grab any colour anywhere on your screen using Photoshop.

Simply select the Eye Dropper tool and take a sample from an area by clicking and dragging from your Photosop document to where the colour is. This will load colour into the foreground colour box of the colour picker, for use in your design.

Once you have your colour, time to create a great palette using Adobe Kuler (as outlined in a previous post).

If you aren’t using Lab colour, you should be

02.06.2010 0

Free online screencasting tool

Note: this demo should really use a low constrast photo for dramatic effect, but I had trouble finding one because the north’s low-angled sun makes for a lot of great lighting!

You can’t always take photos during the magic hours of sunrise and sunset, and sometimes bad lighting makes colours washed out even monochrome.

For these photos, there is an easy fix: Lab colour. The method involves few steps:

  • Go to drop down menu: Image>Mode>Lab Color
  • Go to drop down menu: Image>Adjustments>Curves (Cmd M on Mac)
  • Click Curve Display Options and make sure the grid of 10% increments is selected
  • Find a and b channels (along with Brightness) under the Channels drop down – this is where the magic happens
  • Adjust the Input levels along the bottom and top, either 10 or 20 per cent depending on how much colour boost needed
  • Change your image back to RGB or CMYK once you are happy with the contrast. Lab colour files save as PSD, so’ll you’ll know if you forget this step.

This method can work wonders on washed out scenes for times when you can’t get reshoot and it takes 2 minutes.

Top 3 reasons you’ll want Adobe CS5

12.04.2010 0

Is Creative Suite 5 worth the $899 US (Master Collection) for upgrade?

I think it just may be.

Its top 3 sweet features for me were:

  1. Built in CMS support to make themes and templates in WordPress, Drupal, Joolma.
  2. Take the pain out of rotoscoping with rotobrush in After Effects.
  3. And everyone’s been talking about Photoshop’s Content Aware Filter of course.

What new CS5 features do you think you’ll use the most?

Check out Adobe’s CS5 launch video for more info, or just head over to Lynda.com, it was adding CS5 tutorials even before today’s launch.

Throw away your camcorders, SLRs shoot great hi-def video

19.03.2010 0

Aren’t you getting sick of toting about that bag full of gadgets? Can’t decide whether you want to shoot still or movie? Well with today’s technology, you don’t have to carry heavy equipment to get fantastic results.

The evidence is compelling – check out this 1080p video shot at 6400 ASA (some scenes were shot at 3200 ASA) with a Canon 1D MKIV. No flash, no outside lighting – only available light. Prepare to be amazed by the quality (of the resolution, the actual plot doesn’t make much sense).

All this quality comes at a price – a $5,000+ price, but as the 1D MKIV is inevitably replaced by the next-best-thing, its cost will drop.

Both the Canon and Nikon’s D3S can shoot at ISO speeds of up to ISO 102,400 – less lighting = lighter camera bag.

D3S’s built-in microphone for monaural sound, or use an optional external microphone for stereo recording.

As well, the D3S allows videographers to attach an external microphone, which is important for getting good sound (viewers are more likely to forgive poor picture quality than poor sound quality).

These cameras are fantastic for on the move travel light photographer-videographers – a growing category in this jack-of-all-trades multi-media world.

Finding colour harmony with Adobe kuler

15.01.2010 1
My first Kuler colour palette - Dettah iceroad. Made from my photo on Flickr.

My first Kuler colour palette - Dettah iceroad. Made from a photo on Flickr.

Harmonious colour schemes can make or sink a project, so it’s best not to just wing it.

I have seen websites transformed from blah to beautiful with a simply tweak of css colours.

So when I spotted kuler, Adobe’s web-hosted application for generating color themes, I figured it might be worth checking out. It was.

Its Air app, kuler desktop, is great for instant colour browsing – you can search by key words and it will find thousands of suitable swatches for whatever mood you want (how many swatches it finds depends on how many users have tagged using that word). You can also flip through highest rated, newest, most popular and random.

Grabbing colours is a cinch, through copying html colour code or downloading an Adobe Exchange file.

Check out this Layers Magazine tutorial on how to integrate files into Creative Suite.

But if you have time, have some fun with the colour create and your own palettes. To do this, you’ll have to go to the kuler site.

Click on ‘create’ and choose from one of the six rules for colour harmony and begin to play with the sliders on the colour wheel.

The most fun feature for me was ability to upload or use Flickr photos to create palettes – my first palette is in screenshot above, it’s the colours extracted from a Dettah iceroad photo on Flickr. The warm and cool colours work well together, should I use this scheme on my new website …

Cheap hi-res imaging on the way

03.01.2010 0

After finding the term “gigavision” in this month’s Wired magazine’s Jargon Watch, I had to read more about this technology – using computer chips as sensors, which allows pixels to be packed 100 times more densely than with CCD or CMOS captures.

There doesn’t appear to be much online about this gigavision yet – even though an article in Wired’s Gadget Lab suggest devices with the chip will be available early this year.

Gigavision will be targeted for cellphones, and not the upper end of imaging (yet).

Cheap Naked Chips Snap a Perfect Picture in New Scientist predicts these chip will “pave the way for cellphones and other inexpensive gadgets that take richer, more pleasing pictures than today’s devices.”

These chips are not set to replace CCD and CMOS sensors in the immediate future, but it’s interesting to see the rise of more hi-res/3D/interactive multi-media pieces.

With the rise of ever cheaper and better quality digital imaging, can film survive? I donated my last film camera years ago, and don’t miss the darkroom chemicals at all!

Will people still want to view movies in 2D once 3D becomes cheaper and more available?

Frustrations with Adobe bridge web galleries

27.11.2009 7

I recently re-discovered the Save for Web and Devices feature for Adobe. This used to be part of Photoshop but has migrated to Bridge for the CS4 edition.

The interface was a breeze, just go to Output tab, pick Web Gallery tab and add Site Info (explanation text, copyright and contact info), pick your Color Palette, Appearance, and even upload the finished product through a native FTP interface. What could be easier?

Upload interface for bridge - too bad files wouldn't work on server

The Flash templates are sharp, and as easy to make as browsing to a photo folder.

But there are issues with using this for an instant gallery. Where are the options for captions? That’s a basic feature.

Worse, the site wouldn’t work on the server, only the desktop. I tried troubleshooting – changing the permissions on the directory – to no avail.

Has anyone else had these problem?

The CS3 photo gallery features doesn’t appear to have this problem, works fine online. But its gallery templates are ugly.

So I will be sticking with jquery options for photo display – until CS5?

Photoshop metadata – © your online photos!

06.11.2009 0
Use Metadata pulldown menu to choose what File Info to include in web photo

Use Metadata pulldown menu to choose what File Info to include in web photo

Photoshop CS4′s new controls for adding metadata are a handy tool to control copyright information included in your online photos.

Before you export your photo for the web, go under File>File Info to see the array of metadata options.

Most important: under the Description tab, change Copyright status to Copyrighted and put photogs name under Copyright Notice (Option, g on a Mac gives © symbol), then type the year.

Also fill out info tab IPTC Contact.

The International Press Telecommunications Council’s photo metadata was made to describe and administrate photographs and to provide the most relevant rights-related information.

Finally, under Save for Web and Devices (new in CS4) choose which metadata you want to export under the Metadata pulldown menu. Include copyright info, of course.

This feature is a useful way to control which metadata is exported in your web-optimized files. I found this tip while browsing some of the movies in Lynda.com’s Photoshop CS4 for the Web lessons. Some of the information there is a little basic, but I found the web workflow description most efficient, with emphasis on smart objects, grouping/naming layers, and keeping PSD copies of everything for ease of editing down the line when you inevitably want to tweak your design.

12
  • Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
  • Recent comments

    • Buy Fan on Vimeo vs. YouTube
    • dahBexTeall on Vimeo vs. YouTube
    • Michael Diedricks | Pictures of Past Pleasantries on Vimeo vs. YouTube
    • Steve Dorsey on How to make Internet Explorer behave
    • Use colour selection tools for harmony « TechMedia on Finding colour harmony with Adobe kuler
  • Archives

    • June 2011
    • April 2011
    • February 2011
    • December 2010
    • August 2010
    • July 2010
    • June 2010
    • May 2010
    • April 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • September 2009
    • August 2009
    • July 2009
    • June 2009
    • May 2009
    • April 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
  • Recent posts

    • Rise of the social media snitch
    • Yellowknife Blog Camp
    • Storify makes stories from social media
    • Use iChat for Facebook conversation
    • Should you transcode?

© copyright 2010 Liz Hargreaves