photos

March 12, 2010

Alcatel-Lucent Introduces API Bundles

Packaged API bundles – which are said to be an industry first – arrived today thanks to Alcatel-Lucent.  These bundled APIs were unveiled at the South by Southwest Conference, and are supposed to make things quite a bit easier on both developers and service providers.

Here’s one key point developers should know: as explained in a statement, “The new revenue share model allows developers to access the API bundles without the burdensome upfront API fees that, until now, have traditionally been a major pain point, while earning a portion of the revenue from applications leveraging the APIs.”

Otherwise, Alcatel-Lucent is starting out with three bundles related to social gaming, advertising, and virtual goods.  And to support the bundles, there’s a dashboard tool that should provide handy information related to download numbers, transaction types, application performance, and revenue.

You can access the bundles here if you like, or if you’re attending South by Southwest in Austin, they’ll also be on display at the “Eleven API Lounge” of the Hilton Hotel.

Filed under Blog by

Permalink Print

Create a Gauge Interface in Photoshop

In this tutorial I will show you how to make a speedometer gauge interface using the tools in Photoshop. This could show you skills on how to create a gauge for a website or something you could convert over to a working flash document. Who knows maybe you could even use this as a real gauge?

First start new document with the size 500X500px, I am going to walk you through making the tachometer first in its own document then you can duplicate that one for the speedometer.

So in your new document start a new layer and create a circle in the middle of the canvas and choose a dark blue color for it. The blue I used is #00082d.

Next create a new layer and within that circle create another one and use whatever color
you want, I just used white so I could see the circle.

Now add these blending options to that layer

Outer Glow

Inner Glow

Gradient Overlay

Time yet for another circle.. Create this one in a new layer and in the middle of the last one leaving space around the edges.

Now add this blending option to the new circle.



Also click on the gradient to bring up the gradient editor choose these colors



This window will pop up



Now you should have this so far

Now to make the lines like a speedometer has you need to create a circle the exact same size as the 2nd circle we made. So I am going to hide the other circle layers for now and hide the blending options so we just have our 2nd circle showing and white again.

To create another circle the exact same size we will use the ruler tool. Hit ctrl+r on your keyboard to bring up your ruler tool. You will see a ruler pop up on the top and left of your window.

Don’t worry about what the number are in the ruler because it doesn’t matter at this point.

First click on the top ruler with your mouse and bring down a guide on the very top of
your circle.

Do the same thing for the bottom and the left and the right of the circle.

Now create a new layer above all the others we have made so far. Choose your ellipse
shape tool.

As you can probably guess we are going to create a circle within those guides, they will help make it the exact size of the other circle.

The most important part of this next step is this; make sure in your shape settings to choose “Shape Layers”. You will see the shape settings at the top of the photoshop window with the tool chosen

This is important because once we create the circle this setting will allow us to put the lines
on its path.

Create your circle within the guides and there will be a line around the circle

Once you make your circle you can drag your guides off your screen.

After removing those guides we need to add one back, except put it right in the middle of the circle. The guide should automatically snap to the middle once you drag it there.

If your guide does not snap to the middle in phtoshop go to view and make sure “snap”
has a checkmark beside it.

Ok now its time to add the lines for the speedometer.

Grab your text tool and choose whatever text you want. I am using one on my computer called Helvetica Neue Medium Condensed. Click on the bottom middle of the circle and use the color white and hold down shift. Click on your back slash key to create a vertical bar.

Here are the font settings I used:

Hold down the vertical bar key until you have the lines for your speedometer most of the way around your circle. I stopped at a certain point but just estimated it.

After looking at some real speedometers I decided I am going to make my tachometer go up to 10,000 RPM’s since this is a tutorial. Most cars don’t go that high but some super cars do so that’s how I am going to make it. Each notch for me will represent 50 rpm’s and I will base where I place the next notches we will make for the next step.

In this step I will place the notches that will be the mid point for the whole numbers.

So from 0 and up 10 notches will be 500 rpm’s and that notch will be a little longer than what we currently have. The other notches will be even longer than those where I will be placing the whole numbers 1 through 10.

To make these notches longer I tried just counting up 10 and making the font bigger where I wanted a bigger notch but this did not work out for me well. So I decided to use the line tool.

Create a new layer and while in that layer, hold down ctrl and click on the preview icon on the left of the 2nd layer’s name. I renamed my layers to make this part easier. I named the first circle we made “bottom circle”, then “second circle”, and “glow circle”.

Doing this will create an outline the same radius as the circle.

To make the notches the same length there is a cool little trick I will show you.

In your new layer with your selection still made go to select>>modify>>expand

In the window that pops up put 12 as your number.

Now do you see how that expanded the selection. So now when we use the line tool to make the longer notches we can take them to that line and they will be even.

Now choose your line tool, change your color to white and zoom in to the tachometer.

Count 10 lines and place a line that goes out to the selection.

Then from the first notch you made you need to count up 20 lines to create the next mid point notch. The reason for this is because if you only counted 10 more that is where the actual whole number would go. So keep counting up 20 from each notch until you reach the
end.

Here is what I have after that

Now create a new layer above those notches to create the longer ones where the numbers will be placed.

Use the same method as before and in the expand settings put the number 16.

Now place a line every 10 notches after the mid notches.

So now we can place our numbers, you can use whatever font you like. Here is how mine looks with the numbers placed.

I placed a drop shadow on each of my numbers.

From the 9 until the end we need to make the lines red because that is where the car would redline if this was a real tachometer. So to do this just highlight the lines with your text tool and choose a bright red as your color.

Other real speedometers usually have some sort of red bar along with the red marks so to do this we will use techniques already discussed in this tutorial.

Create a new layer below the numbers but above the notches.

In this layer use the ctrl+click technique yet again on the second main circle to make a selection. Fill that layer with a mid red color I used #ba0810.

Now we are going to use the modify tool again by going to select>>modify except this time choose “contract”. Set your number to 12 again.

Just hit delete on your keyboard to get rid of what is within the selection.

Now I will erase the rest of the red line from the 9 back.

I want to fade this red part at the bottom to give it a more modern feel. To do this I will add a layer mask to the layer, get my gradient tool, and drag upward to fade it.

So now that’s done, I will add some text that says X1000 RPM on the lower right side of the tachometer.

Next will be a quick speedometer needle.

First make a circle in the middle in a new layer with a dark blue.

Create a new layer and a smaller circle within that one.

Add these blending options to it

Outer Glow

Bevel and Emboss

Color Overlay

Choose the color black.

After that it should look like this

To make the speedometer needle I just use my rectangle shape tool to first make a line down to the “0″

Put a guide down the middle of the line so we can cut off the end evenly and make an angled at the end like a real needle in a car.

I added a gradient and drop shadow to the needle for added effect.

Finally I will add one more circle above the needle to give it more realism.

All these steps showed you how to make a simple speedometer in photoshop, here is my final image. I went through and made a full speedometer/tachometer display…



Click on image for large version

Thanks for reading!

Filed under Blog by

Permalink Print

How To Better Analyze Your Site Data

Last week I was on a “Measuring Success” panel at PR+MKTG camp in Seattle. Someone from the audience asked if there were any tools for a newbie to start measuring PR & Marketing efforts and learning. I uttered the names a few tools that came to my mind.

Considering that there might be many others in the same situation I decided to write this blog post. In this post I am listing some of the tools that you can start using for free. Please note that this is not the most comprehensive list of the free tools.

Side Note: All the panelists unanimously agreed that you need to first figure out your measurement needs based on your business requirements and KPIs and then find the tools that meet your needs. One of the biggest mistakes most companies make is that they pick the tools first and then try to modify their measurement needs according to the tools they have in place.

However, I recognize that someone who is not familiar with the various measurement tools needs some exposure to the tools to really think about the questions they might want to ask before making an investment in a paid tools.

With that, here is the list of tools that you can start using today for free:

Web Analytics

For monitoring the on-site behaviors of your users and the performance of your site, use the following free tools

  1. Google Analytics – http://www.google.com/analytics
  2. Yahoo Web Analytics – http://analytics.yahoo.com/

Search

Use the following search tools to learn what keywords your customer/potential customers are searching for so that you can optimize your site accordingly.

  1. Google Adwords Keyword Tool – https://adwords.google.com/select/KeywordToolExternal
  2. SEOMOZ has set of Free tools – http://www.seomoz.org/tools
  3. Google Webmaster Central – Provides you data on how your sites in crawled and indexed by Google.
  4. Bing Webmaster Center – Provides you data on how your sites in crawled and indexed by Bing.
  5. Google Trends – http://www.google.com/trends
  6. Google Insight for Search – http://www.google.com/insights/search/#

Social Media

I already mentioned two tools in my blog post titled “Free Social Media Monitoring Tools for Small Businesses”, here they are again (and two new ones) :

  1. Google Alerts – http://www.google.com/alerts
  2. SM2 by Techrigy – http://sm2.techrigy.com/
  3. Twitter Search – http://search.twitter.com/
  4. Yelp.com – Good for small and medium size businesses. Find out what customers are saying about you and your competitors.

Here are some more but I have not used all of them, http://mashable.com/2008/12/24/free-brand-monitoring-tools/

Competitive Analysis

Want to know how your competitors are doing compared to you? Use some of the tools listed below. Keep in mind that all of these tools use different ways to collect the data and hence the actual data you get from one tool will differ from the other but overall it should provide you good competitive information.

  1. Search and Social Media Tools – Many of the tools listed above can provide you competitive information as well. E.g. Set SM2 to monitor the keywords that describes your competitor and you can start to see what customers are saying about your competitors
  2. Alexa – http://www.alexa.com/siteinfo
  3. Compete – http://www.compete.com/
  4. Quantcast – http://www.quantcast.com/
  5. Google Trends for Websites – http://trends.google.com/websites
  6. Google Ad Planner – http://www.google.com/adplanner. Here is my review of Google Ad Planner

Like, I mentioned above this is not the most comprehensive list but it should get you started. Do you have a favorite free tool that is not on this list? Leave a comment on this blog post or send me an email with the name of the tool.

Comments

Filed under Blog by

Permalink Print

March 11, 2010

PlayStation Move Developers Named

PlayStation’s motion controller was officially unveiled this week, and Move, as it’s known, has enjoyed a positive response so far.  What’s more, it’s set to receive a lot of developer support.

An impressive 36 publishers and developers are prepared to devote resources to Move, according to Mike Jackson.  That includes big industry names like Activision, Capcom, Disney, Electronic Arts, Konami, Sega, Ubisoft, and Warner Bros.

So what’s that mean for the average developer?  Well, any who happen to deal in PS3 games may want to urge their bosses to look at Move so that the whole company doesn’t get behind.

Otherwise, now may also be a good time to look for job openings.  Businesses could want to bring new people onboard to tackle this fresh technology, or at least fill existing positions as longstanding employees go to work on it.

Filed under Blog by

Permalink Print

Installing Quick Time To Mac OS X

This is weird. I have Mac OS X Snow Leopard (specifically 10.6.2) running on my MacBook and want to install Quicktime Pro for some video work. I bought a license key off the Apple site but it says to go to the System Preferences and enter the data into the Quicktime preference pane. But, um, there isn’t one. What the heck??

Dave’s Answer:

Without much fanfare, Apple has continued to tweak and fiddle with its Quicktime software, moving it from one place to another, changing how it’s installed and updated, and even making it easy to have it vanish from your computer if you don’t install every single piece of Snow Leopard.

Poke around a bit in your favorite search engine and you’ll find that the Quicktime app you need to enter that license number is Quicktime Player 7, and it’s in the Applications -> Utilities folder.

Or is it?

For a lot of users, it’s nowhere to be found. Sure there’s Quicktime Player in your Applications folder, but that’s not the same app and it doesn’t have the ability to be upgraded via license key into Quicktime Pro.

So where do you get this mysterious Quicktime Player 7 utility? It’s on the Snow Leopard install DVD. Yes, that means you need to find your original OS install disk (or borrow one from a friend or colleague) and slip it into your computer. You don’t have to reboot, just open up the disk. You’ll see:

mac snow leopard optional installs

You probably never noticed, but see that folder “Optional Installs”? Open it. Now you’ll see:

mac snow leopard optional installs 2

Double click on “Optional Installs.mpkg” and after clicking through a bunch of default and informational screens — and entering your admin password once — you’ll finally get to a list of the optional installs included with Snow Leopard:

mac snow leopard optional installs 3

As I have done, choose “QuickTime 7″ and proceed. Won’t take long for you to be looking at this:

mac snow leopard optional installs 4

Now in your Utilities folder is “QuickTime Player 7″. Launch it, and choose File –> Registration. You’ll see this:

mac quicktime pro registration

Enter your registration information as delivered from Apple and you’ll see this:

mac quicktime pro registration done

Score! Now you’ve figured out how to add QUickTime Player 7 to your Mac OS X system and upgraded it to be QuickTime Pro. Now, have fun!!

Comments

Filed under Blog by

Permalink Print

March 10, 2010

MySpace Games Give Developers New Tools

MySpace today launched MySpace Games that creates a more social gaming environment with new tools and functionality for users and developers.

MySpace Games offers improved application engagement and analytics tools for developers on the MySpace Platform.

MySpace provides a platform that supports independent game developers, while giving support for premium games from major development houses resulting in more gaming choices for users and developers a like.

MySpace Platform developers are now able to:

*Review application-specific analytics via a new API, including invitation conversions, active users, notification responses and demographics.

*Build games in rich, 3D-like quality with Unity’s powerful 3D engine and allow

*MySpace users to access the games with a new plug-in. For example, Paradise Paintball utilizes this technology.

*Encourage cross-platform competition with Scoreloop, which allows games on different platforms to share the same high scores, achievements, challenges and buddy lists.

*Utilize GroovyCortex, which is a cloud-based solution for onsite application developers, to provide low latency push data for multiplayer games.

*Track the source of application invitations and utilization to learn how users are finding and choosing specific games.

Filed under Blog by

Permalink Print

hi5 Launches Game Developer Program

Even if Facebook, MySpace, and Twitter have the benefit of being household names, hi5 is also a pretty big social network, and today, it made a move to please developers.  hi5 announced its new Game Developer Program “to accelerate user adoption and revenue generation of social and online games.”

Select game developers are supposed to receive all sorts of benefits, including free marketing and promotion, a share of advertising revenue, and access to the hi5 Coins payment interface.  Plus, there shouldn’t be much of a tech hurdle, since hi5 has a set of Facebook-compatible APIs.

Steve Victorino, the president and COO of Immortal Games, claimed in a statement, “hi5’s Game Developer Program is a perfect launch boost for any new game title.  By distributing on hi5, we have been able to focus on building a great game, knowing that initial promotion, user adoption and monetization are under control.”

This is something to look into so long as you’ve got your Facebook-, MySpace-, and Twitter-related bases covered, at least.

Filed under Blog by

Permalink Print

3 Steps for Google Apps Marketplace Apps

Last night at Campfire One, Google announced the launch of the Google Apps Marketplace, a destination where developers can sell apps for integration with Google Apps. According to Ryan Boyd with the Google Apps Marketplace team, there are three steps for a Google Apps Marketplace app:

1) Have or create a cloud application and host it on the platform of your choice
2) Integrate your cloud app with Google Apps using available APIs
3) Create a manifest file describing your application and list it for sale on the Marketplace

You can find a whole series of videos from Campfire One, discussing the Google Apps Marketplace here at Google’s Developer YouTube channel. In addition, there is more information on the Official Google Blog, the Google Code Blog, and the Google Enterprise Blog.

Filed under Blog by

Permalink Print

Scotch on the Rocks Headed To London This May

After a bit of radio silence, Scotch on the Rocks is back with a bang this year and it’s coming up soon, just a month after cf.Objective()! Scotch hits TigerTiger in London on May 24th and 25th.

A limited number of Super Early Bird tickets were available and they’re already gone so you’ll want to buy your tickets fast to get in on the action!

And action there will be with the speakers currently (mostly) under movie hero pseudonyms and the first few topics announced.

I guessed one of the speakers’ secret identities and Andy said I’d won an Irn Bru (I love Irn Bru!) but I don’t know whether he’s offering prizes in general

) He let me know some of the other speakers and their topics – kick ass stuff, so don’t miss Scotch this year!

Comments

Filed under Blog by

Permalink Print

Creating A WWII Style Propaganda Poster

I was going through some old World War Two Propaganda Posters and I found one I really liked. World War Two was one of the worst battles we have ever seen as a race, but I am not going to focus on that. I am going to focus on the forefathers of modern graphic design. Propaganda Posters were simple in design but held a powerful message. So let’s create one from my current obsession, World of Warcraft.

To begin open a document 1000×1500 and fill it with white.

Make a new layer and add a 50 border using your guides. Make a selection within the borders and fill the selection with #E2DBCB

Now we need to add four new guides. Set the left and right guides in 90 pixels from the 50 pixel border. Then set the new top guide 230 pixels from the top 50 pixel border. Then add a new bottom border 260 from the 50 pixel bottom border. Then make a selection within and fill it with #C8BEB4

Next download AllianceAsset here. Open this file in photoshop and using the pen tool cut out King Varian Wrynn. Then add him to our poster inside the darkest box. Align him to the bottom left of the box.

Since the colors of the time were somewhat subdue we are going to soften his color pallette useing a color overlay. Open your blending options and select color overlay. Then change the default color to #C8BEB4. Set the opacity to 25%. Your can do more or less if you like.

Now we are going to start adding the poster font. In your text pallette choose Arial as your font, set the style to Black (we did not go with arialblack as the font because it is has a slight italic style to it), set the size to 50, the leading to 45, and the color to #FFFFFF. Then type out “Land Sea Air” after each word hit enter to star a new line and make sure all the letters are capitalised. Once you have it all typed out set the aligning to right and place the text next to his sword.

Make a new guide 25 pixels from the bottom of the small inner box. Continue using the same font and set up only this time make the size 35 and the color #403B35. Type out “PLEDGE FOR THE ULTIMATE VICTORY”.

Next add a guide 10 pixels below the text you just created. Set the font size to 18 and type out “DEATH KNIGHT”. Use the same color as the previous step. Then rotate the text 45°.

Copy this layer 8 additional times. Space out each copy 40 pixels to the right of the one before it. Then highlight the first copy of the text and type out “DRUID”.

Then “HUNTER”.

And “MAGE”.

Next “PALADIN”.

“PRIEST”

Followed by “SHAMAN”

Now “WARLOCK”.

And finally “WARRIOR”.

Now change the font size to 197, set the color to #A12B2B, and the text tracking to 10. Type out “GLORY” and place it at the top of the inner box.

Rasterize this layer then make a selection of the inner box. Now erase all of the parts of text outside the selection area.

Using the same color as before set the font size to 70, and the tracking to 2. Type out “FOR” and angle it 20°. Place it like below.

Now set the font size to 90, the color to #818F9A, the height to 125%. Then type “THE ALLAINCE”. Also angle it 20° and place it 5 pixels before the “FOR”

Next duplicate the “THE ALLIANCE text 5 times. each copy move one pixelto the right and down from the one above it. Merge all the copy layers and add a color overlay in color #3D444C.

Merge both parts of “THE ALLIANCE” together and set the opacity to 90%.

Now copy the inner box layer and move it to the top of the pallatte. Set the fill to 0% and add an Inner Stroke. Set the stroke to 3 pixel, centered, in color #403B35. Add all the layers between the Inner stroke and the first three boxes by highlighting the layers and hitting CTRL+G. Name the Group Alliance. And you are finished with the alliance side. Now let’s create the horde version.

Next download HordeAsset here. Open this file in photoshop and using the pen tool cut out Thrall. Make a new group and call it Horde. Then add him to our poster inside the darkest box. Align him to the bottom center of the box.

Open your blending options and select color overlay. Then change the default color to #C8BEB4. Set the opacity to 25%. Your can do more or less if you like.

Duplicate all the Alliance text layer and place them in the horde group. Hide all the layers except the “FOR” layer. Change the font to “GLORY”.

Now unhide the “PLEDGE FOR THE ULTIMATE VICTORY” and change the font to “BLOOD AND GLORY TO THE VICTORIOUS”.

Then unhide all the classes.

Now change the font size to 197, set the color to #A12B2B, and the text tracking to 10. Type out “HORDE” and place it at the top of the inner box.

Rasterize this layer then make a selection of the inner box. Now erase all of the parts of text outside the selection area.

Now set the font size to 90, the color to #818F9A, the height to 125%. Then type “LOK’TAR OGAR”. Also angle it 20° and place it 5 pixels under the “GLORY”. Next duplicate the “LOK’TAR OGAR” text 5 times. each copy move one pixel to the right and down from the one above it. Merge all the copy layers and add a color overlay in color #3D444C.

Merge the “LOK’TAR OGAR” layers together and set the opacity to 90%.

And you are finished with your propaganda posters. What did you come up with? Send me a link and I will post your here for all to see.

Filed under Blog by

Permalink Print