Create an Application Icon or Dashboard Widget

We deliver thought-provoking, theoretical and conceptual information each session, but an important part of building your skills involves doing. Every Session you’re invited to take part in a community project, and in so doing build your skills. Regardless of your experience level, it’s a great chance to expand your portfolio, and get feedback from your peers.

Post Your Projects in the Comments Below

Take the knowledge that you gain throughout this session and apply what you learn. Post your project in the comments below. We’ve set up the comments so that image URLs can be added. Be sure to leave your thoughts and insightful critique of the work posted, which will help everyone improve their work.

We’ll be selecting a handful of prominent projects to promote in our final day Session Wrap, so be sure to submit your project before July 20th for consideration, though you’re welcome to submit your project anytime for discussion and to get feedback from peers.

Project Brief – Beginner to Intermediate

This session’s Beginner/Intermediate project the brief is to make an icon for applications. This could be to brand an application, as an icon that sits on your desktop (you could create a fictitious one or rebrand one of your favorite apps). Or you could create an icon used in an interface, or it could be a whole set of icons that would make up the user interface of an application.

There is a great article on the difference between icons within applications and application icons (either is acceptable for this project). The first are those icons that you interact with inside the application and the later is the application brand. Read up on Realism in UI Design on UX Magazine.

coda

This project will build your skills with creating application icons. There are quite a few icon design tutorials on Vectortuts+, Psdtuts+, and across the web, which can help you with this project. There is also an introduction to icon design article on Psdtuts+. Get some practice with building your GUI skills by first jumping in and designing an icon for this project.

Project Brief – Advanced

For this session’s Advanced project the brief is to design a Dashboard Widget. This could be for the operating system of your choice. It’s fine to work on redesigning an existing Widget, especially one you feel you could improve on. Or feel free to invent a widget. It could be something theoretical that you have pin-balling through your mind.

widget

We’ll have an inspirational post in this session to help you get some creative widget ideas flowing. We also have a two part Photoshop tutorials series coming on Designing Realistic Interfaces, which will help you with techniques to give your widget a high level of realism. We also have quite a few interface design tutorials on Psdtuts+, which will help with putting a widget interface together.

Style and Format

There is no limit in style. In general though, the style should fit the application or widget you’re designing for. We look forward to seeing a wide mix of approaches. Final format for this project is fairly open. Ideally upload the work as a JPG at the size it would be used at. Also, include a description of your work.

Feedback and Positive Criticism

It’s just as important to leave helpful tips, suggestions, and positive feedback for your peers’ work, as it is to complete the assigned project. We’re looking to create something much like in illustration or design class, where you post your work up on a board (in this case, the comments are the board) and everyone can critique the work.

Keep in mind that professional decorum, insightful opinions, and positive suggestions will be appreciated by all. Now let’s get to work on illustrating alphabet, and post some work for review below.

Discussion

  1. This is awesome. I consider myself a Beginner but I’ll try doing the advanced as well

  2. Fawaz says:

    Good step towards Designs…
    i ‘ll surely participate here.
    Tut+ is rocking…

  3. Anwar Fakih says:

    Hi, this is an icon designed in Photoshop CS5, is directed to a program called Eco Images, where you can download and display images of nature, flowers, environments, animals, space and others. The icon design is based on the bud of a flower in bright colors that highlight the icon, hope you like it. Thanks

  4. Anwar Fakih says:

    I made my icon but not where to send it, please send it Pass me the place where

  5. Anwar Fakih says:

    Icon designed, Islamic art, representing a mosaic arabesque. Designed for a program of Arab News, titled Mosaic. I hope you like it. thanks

    http://s147.photobucket.com/albums/r297/Anuar_2007/?action=view&current=arabesco.jpg

  6. Anwar Fakih says:

    http://s147.photobucket.com/albums/r297/Anuar_2007/?action=view&current=escoimages.jpg&newest=1

    Hi, this is an icon designed in Photoshop CS5 is based on the bud of a flower of three colors, blue, red and orange, also has two green leaves and give more volume to work and enhance the brilliant colors of the icon, program is designed for a fictional Flower Pictures, where I could get information and pictures of all existents flower species on the planet, I hope you like it, Thanks

  7. Dan Beeston says:

    I decided to use this opportunity to upgrade my icon for my sharkmail program. It’s an internal Applescript for automatically hiding an email in javascript code so it doesn’t really need one but I got carried away. Instead of a basic shape I ended up tracing the Jaws poster image that it’s based on. After putting it all down I wasn’t happy with how flat it looked so I drew in some organic shades for shading and that broke up the surface in just the way I wanted.

    http://www.invisiblespiders.com/illustrations/sharkcapair.png

  8. Marco Sousa says:

    My first Icon Project for OSX can be seen here:

    http://marcosousa.me/#392394/Chaba-Mac-Icon

    Really had fun, creating those!

  9. Anwar Fakih says:

    icon for my program diseñadp Orange Music, where you can download music and other topics, the icon is basically a headset with an orange circle and a musical voice, I hope you like it, thanks.

    http://s147.photobucket.com/albums/r297/Anuar_2007/?action=view&current=OrangeMusic.jpg

  10. Zenimot says:

    An icon for a Digital Life Assistant. Inspired by Project Jarvis.

    http://mnm.al/l

  11. Nice icons! My wife and I also draw pictures and icons – http://vector.artsstock.com artsstock-vector-illustration-cherry-jedna-kapky-copy_w315_h500.jpg

    artsstock-vector-illustration-uw-icon-set-03b_w500_h387.jpg

  12. Sid says:

    Its gonna rock ;)

  13. Luke says:

    I was playing around with some icons for my MS apps.

    iconsi.jpg

  14. David says:

    Hey there, I thought about a 1-Click-Password Generator for the Dashboard. Simple and easy to understand.
    Inspired by Lorimify

    I hope for any suggestion and criticsm.

    Regards

    http://img837.imageshack.us/img837/9075/1clickpassworddashboard.jpg

  15. Flow Graphix says:

    Hey just made an icon following a tutorial on this site :D
    I learned that gradients and lighting creates a nice 3D effect to it, and gloss makes it look 2010′ish :D

    http://img830.imageshack.us/img830/5140/magnifyingglass.jpg

  16. iris sousa says:

    Here is an Fav Icon, that I designed for my friend’s website;
    http://dribbble.com/shots/35507-Fav-icon

  17. Hey everyone! Here’s my psychedelic skull Finder icon – http://grebenru.deviantart.com/art/Skull-finder-icon-172300376

    Skull_finder_icon_by_grebenru.jpg

    Feel free to download it! ;)