2010
07.15

Showcase of Macintosh Dashboard Widget UI Designs


There are various ways an application (or more specifically, a widget) can be presented to its users; some bad, some good and some tremendously well. Other than a widgets purpose, its user interface is the most important aspect; it makes the widget look good and (hopefully) makes it easy to use, making it compelling and user friendly, which is what all application developers should be aiming to achieve. Dashboard widgets are actually relatively easy to make, and most web designers/developers can produce them without much difficulty. They are developed using HTML, CSS and JavaScript, meaning everything that is possible on the web, is possible in a dashboard widget, making it relatively easy to achieve a great looking and easy to use widget.

This inspirational compilation post showcases a collection of 32 creative, unique and easy to use Apple Macintosh Dashboard Widgets, including a selection of default widgets that ship with your Apple Mac, and a good handful or two of third party widgets.

This Post is Day 4 of our Interface Design Session. Creative Sessions

Participate in this Session’s Group Project

Jump over to this Session’s creative project on Create an Application Icon or Dashboard Widget. Choose the project to participate in that best fits your skill level and interest. This session’s Beginner/Intermediate project the brief is to make an icon for applications, which is great practice for building your GUI skills.

coda

We also have an Advanced project where you design a widget, which is a great way to get some hands on experience with designing interfaces, as they are typically smaller apps with a tight focus. You can post your projects in the comments here and get some feedback from the community.


Default Dashboard Widgets

A selection of default dashboard widgets that ship with Macintosh computers as standard. These are no doubt some of most elegant dashboard widget UI designs to date.


Weather

The weather widget allows users to quickly check the current and upcoming weather forecasts for towns and cities all over the world.


Unit Converter

Unit Converter is an incredibly easy to use widget, allowing you to convert all kinds of figures, from currency to weight and distance to energy.


iTunes

The iTunes widget allows you to view the current song playing, pause, play, skip and change your settings (i.e. repeat and shuffle) at the speed of light.


Calendar

Calendar is a very basic widget that simply allows you to scroll through months and view dates. It’s handy to check which dates fall on which days.


Dictionary

The Dictionary widget actually triples up as a dictionary, a thesaurus and an “Apple dictionary” that allows you to check different Macintosh words to find out their true definition (i.e. “spotlight”).


Calculator

A very straight-forward calculator widget that does what it says on the tin, it’s not used very much due to the ability of being able to calculate sums directly into the Spotlight search bar.


Flight Tracker

A slightly more complex widget that allows you to check incoming and outgoing flights from all over the world.


Ski Report

A funky designed app making good use of wooden texture, reporting current ski conditions from over the globe.


Third Party Dashboard Widgets


Loremify

Loremify is a one-click tool to copy Lorem Ipsum. It lets you wrap in html, specify the amount of text, and copy it to your clipboard—all in one click.


Prototype Reference

A simple dashboard widget to allow you to get quick access to Prototype JavaScript Framework documentation.


Page Capture

An easy and fast way to take screenshots of entire web pages, no matter how long the page.


ColorSchemer Galleria

A refreshing take of inspiration, allowing you to scroll through the entire collection of color schemes from the ColorSchemer library.


Colourmod Dashboard Widget

A super simple way of finding out a color value (Hex, RGB, CMYK and HSV modes) without having to open up a demanding applications such as Photoshop.


Color Theory

The Color Theory widget allows you to create your own color schemes for your websites, your interior designs or even to help you choose your outfits in the morning. It can even simulate various forms of color blindness!


Hangman! Dashboard Edition

Hangman! Dashboard Edition is a version of the popular puzzle game. In this case, it has been completely reproduced to work as a Mac Dashboard Widget, and has a dictionary of 500 words.


Symbol Caddy

Symbol Caddy keeps a bunch of common “special” characters and HTML codes right on your dashboard, making it super easy to find, copy and paste those tricky symbols that are hard to remember when writing up copy for a new website or blog post.


Tags – CSS

Tags – CSS is a library for CSS properties and attributes, featuring an easy to use search feature. You can also copy the properties, making editing your stylesheets a breeze.


GoDaddy.com Domain Name Search

The Official GoDaddy.com Domain Name Search tells you if a domain name is taken in seconds, and if not presents you with various options and prices.


Dashalytics

Dashalytics offers quick and direct access to your Google Analytics website statistics, meaning you can take a brief look over your statistics within seconds, any time of the day.


The Weather Channel Widget

The Weather Channel Widget provides detailed weather forecasts from all over the world, and even includes maps and severe weather warnings.


Albi und Nero RSS Widget

Albi und Nero RSS Widget is a simple RSS reader, delivering the latest updates and news from their own website.


Amazon Total

The Amazon Total widget allows you to search Amazon’s site, whether site wide or a specific category.


SafariBar

A quick and easy way to search the web for content, images, video, news, maps and blogs via Apple’s web browser, Safari.


SafariSearch

Another widget that allows you to search Safari from your dashboard, this time a traditional Safari themed UI.


FontSee

FontSee is a very helpful and unique widget that allows you see preview text in various fonts from your system; you can either choose the font you want to test, or “play” through them and view your dummy text in every font on your system.


Currency Converter

Currency Converter is an easy way to convert over 200 world currencies, including old legacy European, world legacy and unrecognised currencies.


Sudoku

Sudoku is a logic-based, combinatorial number-placement puzzle, right on your dashboard.


iStat Nano

iStat Nano is an advanced system monitor in a tiny package, featuring beautifully animated menus and transitions. It allows you to view detailed performance stats from your Mac, including CPU usage, memory usage and HDD space.


BBC News Widget

BBC News Widget is a news widget direct from the BBC, and is available to read in 32 different languages. All styled up in an elegant and easy on the eyes UI design.


TV Forecast

TV Forecast allows you to select your favorite TV shows and have them be display in a simple list, informing you of when they are next on TV. You’ll never miss your favorite TV shows again!


World Weather

Get simple weather forecasts (much like those in the standard Weather widget) wrapped up in a sleek, modern UI design.


Simsen

Simsen is a widget that allows you to send free SMS text messages to other mobile phones in Germany, Austria, Switzerland and many other countries.


This Post is Day 4 of our Interface Design Session. Creative Sessions
2010
07.15

Orange Grunge Textures – Psd Premium Texture Pack


Today, we have a new set of Premium Textures available for Psd Premium Members. This set was crafted by Caleb Kimbrough of Lost and Taken and includes 32 high resolution orange grunge textures. If your next project calls for some grungy textures with pealing orange paint, than this set is perfect for you. Learn more at the jump!


New High Resolution Orange Grunge Textures

This new Premium Psdpack Pack is available for Psd Premium Members today and includes 32 high resolution orange grunge textures (3264px by 2448px). Members can Log in and Download! Otherwise, Join Now! You can view a preview of the textures below.

sample

This new Premium Psd Texture Pack was created by Caleb Kimbrough of Lost and Taken and is available for Psd Premium Members to download today. Caleb is a freelance blogger and the brains behind Lostandtaken.com, a blog solely focused on giving away free, high-res textures. We’re excited to partner up with him on this release.

pack

Psd Premium Membership

As you know, we run a Premium membership system that costs $9 a month (or $22 for 3 months!), which gives members access to the Source files for tutorials as well as periodic extra tutorials, and Premium Packs like this one! If you’re a Premium member you can log in and download the tutorial. If you’re not a member, you can of course join today!

2010
07.15

Make a Custom Shape of your Signature in Photoshop

When you make a good picture you should really get in the habit of signing it, this has the advantage of getting your name out there and also letting people know its your work. Now signing using Photoshop can be tricky – you can use a scanned copy of your sig or scrawl one using a tablet / brush tool. But you can also set up your signature as a brush or custom shape.

Step 1
Open Photoshop and make a new 1024×768 document with a ppi of 300, Set the background Layer to white. Next make a new transparent Layer above the background Layer.

Step 2
For Scanned Signatures
If you don’t have a tablet and want to use a scanner then sign your name on a white bit of paper and scan it into Photoshop. Download this Photoshop Action and use it to lift the signature from its background. This will then transplant the line art / signature to a new Layer. Now go to Step 4

Step 3
For Photoshop Signatures
If you are using Photoshop to sign your name then choose a hard edge brush from the brush picker and on the transparent Layer Sign away. Once your happy with the signature you can lift it from its background using the magic wand tool.

Step 4
Choose the wand tool from the Tool Box, untick the contiguous tick box and click on an area that does not contain your signature, Photoshop will then select everything but your signature, we then simply invert the selection (Select > Inverse) to select the signature. We can also select the signature by Holding Control and Clicking on the Layer containing the signature in the Layer Palette.

Step 5
Next we with the Magic Wand Tool still active right click on the selection and choose “Make Work Path” from the menu.


Then set tolerance to 2 pixels

Finally hide the signature layer we just created.
Step 6
We should now have a nice path ready made for us of our signature.

Now fill this using a colour fill Adjustment Layer, to do this we choose the Create New Fill or Adjustment Layer from the Layer palette, this is the 4th icon along at the bottom of the Layer Palette. Choose any colour you wish (other than white).

Step 7
With the new path created – we can then make a custom shape out of it – Select the Solid Colours mask and then choose Edit > Define Custom Shape.

You can also define the signature we lifted as line art as a brush, but selecting the layer and going to Edit > Define Brush

Now if you want to sign your name you can choose the Custom Shape tool and navigate to your signature, then just drag one out into your picture :)

Hope you enjoyed this tutorial, please feel free to find me on twitter @revjesse or visit my website :)

Embed Plugin created by Jake Ruston's Wordpress Plugins - Sponsored by Spira Shoes.