On Saturday, Sitsari Kitisakkul told me his concept GOT.IT – a social customer loyalty app to replace paper punch cards and plastic membership cards – was selected and asked me to join his team as a UI designer to take on the design of the iPhone application.

Here’s what I have designed for my team (click to enlarge):

Application points of differenciation:

• Combine punch cards and membership cards into a single platform
• Social aspects to increase usage and retention (gifting friends, integration with facebook, Got.it point system to complement vendors own loyalty programs)
• Location based vendor discovery
• Provide analytics and consumer behavior data to vendors/merchants
• First mover in Thailand.

After two days of hard work and an incredible team work, we had to pitch our product and show the demo in only 5 minutes. This is a very short amount of time to convince the judges.

But finally, after two hours and final judges’ deliberation we won 1st runner up (behind ChatterBox) and a prize of 100,000 Thai Bahts (about US$3,000). Yeaaahh! Unfortunately, I had to leave the event early and could not be there on stage with the rest of the team to celebrate.

The team is committed to complete this project and release the app on the Apple Store later next year. Stay stunned!

I hope you will find this list useful. Please, if you think this list is incomplete, add your link in the comments.

iPhone GUI:

• iPhone GUI PSD 3.0
  (Photoshop CS4)

  

• Fireworks toolkit for creating iPhone UI mockups
  (Fireworks CS3 and CS4)

  

• FreshBooks iPhone Application GUI
  (Photoshop)

  

• 320480 – iPHone Interface PSD file
  (Photoshop)

  

• Designing the User Interface of Your iPhone Application
  (Official documentation: iPhone Human Interface Guidelines)

  

Android GUI:

• Android GUI PSD v. 1.0 (for Android 1.5)
  (Photoshop)

  

• Google Android GUI PSD
  (Photoshop)

  

• Android User Interface Guidelines
  (Official documentation)

  

• DroidDraw Beta
  (User Interface (UI) designer/editor for programming the Android Cell Phone Platform)

  

Palm Pre GUI:

• Palm Pre GUI PSD
  (Photoshop CS4)

  

• Palm Pre User Interface Guidelines
  (Official documentation)

  

iPad GUI:

• iPad GUI PSD
  (Photoshop CS4)

  

• ipad vector GUI elements: tabs buttons menus icons
  (Illustrator, Photoshop – Found on Nettuts)

  

• iPad Human Interface Guidelines
  (Documentation: Design an incredible user interface and user experience for your iPad application by following the iPad Human Interface Guidelines. )

  

Then, a few weeks ago, when one of my client asked me if I could design some Twitter illustrations for one of his project, I thought it would be nice to design a couple of Twitter icons to give away on my blog. I started to sketch out a few ideas and finalized them in Illustrator. Here’s the end result:

Download

The zip contains two transparent PNG icons available in resolutions of 128×128 pixels, 256×256 and 512×512:

Alternatively, you can download the source files if you need to modify text or colors. The sources are in AI files (Adobe Illustrator CS3), PSD files and EPS files:

You can freely use them for both your private and commercial projects, including templates and themes. A link back or some credits would be nice but not mandatory.

Conclusion

That’s my small contribution to the Twitter community. Leave me a note in the comments if you like them or Follow Me! I have a couple of other sketches waiting in my notebook so I might create more icons in the future if you really like them.

Update:

You can preview the icons on my Flickr account if you want to see how they look when size is reduced:

Andreas Papula made a green version of one of the icon above (PSD file). To download this icon, use this direct link: http://www.studio0611.de/misc/break_the_egg_green.psd.zip

Browser Shots

Browsershots makes screenshots of your web design in different browsers and in different OS platforms. But be patient! It can take a few hours to complete.
Visit site »

Google Analytics

Apart from giving you detailed statistics about your visitors, Google Analytics has a Website Optimizer that helps you find out which page designs, headlines, and graphics convert the most visitors.
Visit site »

ClickTale

ClickTale reveals what visitors are doing inside your webpage (mouse gestures and clicks). Also scrolling heatmaps show where visitors look and how far down they scroll.
Visit site »

CrazyEgg

Lets you visualize where your visitors click on your webpage.
Visit site »

Conceptshare – Online collaboration Tool

ConceptShare allows you to setup secure online workspaces for sharing designs, documents and video and invite others to review, comment and give contextual feedback anytime and anywhere without a meeting.
Visit site »

Cozimo – Collaborative Tool

With Cozimo you can collaborate and review images and videos in real-time. Get feedback from clients and colleagues instantly.
Visit site »

Stixy

Stixy is online white board to easily organize and share photos, projects at work, files… I have been using this application for a while but I always found it very busy and messy. It is far from being as clean and polish as Conceptshare in my opinion.
Visit site »

ReviewBasics – Collaborative Tool

Similar to Conceptshare and Cozimo. This is not my favorite collaborative tool but they recently improved the UI that makes it pretty pleasant to use now.
Visit site »

Pingdom – online tool

Test your webpage to see the total time it takes to load the page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser.
Visit site »

Color Explorer

With the colorful toolbox at ColorExplorer you can easily create, manage, and explore color palettes for use in web designs, desktop publishing, or any other graphic design process.
Visit site »

Color Blender

Free online tool for color matching and palette design.
Visit site »

280 Slides

Create beautiful presentations, access them from anywhere, and share them with the world.
Visit site »

HTML Playground

HTML + CSS reference by example. Select a HTML tag from a list, modify the code if you want and see the result.
Visit site »

QuarkBase

Quarkbase is a free tool to find complete information about a website. It gives information such as Google and Alexa ranks, top countries, popular pages, traffic rank, social popularity…
Visit site »

Test Everything!

Test Everything! allows you to test your website with over 100 tools.
Visit site »

SEOmoz – Trifecta

Measures metrics to estimate the relative popularity and importance of Page, Blog or Domain.
Visit site » (SEOmoz – all the tools »)

SEO Centro – online tools

SEOcentro has some nice online SEO tools such as Meta Tag Analyzer, PageRank Check Tool, Link Popularity Tool, Search Engine Saturation, Keyword Suggestion Tool…
Visit site »

Domainr

Domainr helps you explore all the domain names. A green square appears next to the suggested domain name when available. A great tool to help you find an original domain name for you next project.
Visit site »

CopyScape

Website Plagiarism search. Search for copies of your page on the Web.
Visit site »

DabbleBoard

Dabbleboard is a powerful online whiteboard that’s actually easy and fun to use. Draw with flexible tools. Reuse previously-made drawings. Share and collaborate in real-time.
Visit site »

WhatTheFont

Font recognition system. Upload a scanned image of the font and instantly find the closest matches.
Visit site »

Online Image Optimizer- GIF, JPG, and PNG

Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site.
Visit site »

WebSnapr 2.0

websnapr lets you capture screenshots of (almost) any web page.
Visit site »

Favicon Generator

Online tool to easily create a favicon for your site.
Visit site »

CollabTRACK

A free, flexible, easy to use web-based project tracker for web designers and their clients.
Visit site »

Project2Manage

Project2Manage is a great tool to keep you organized. It has a ton of features that allow you to create, manage and complete projects in your day to day activities as well as your professional life.
Visit site »

FreshBooks

Fast and simple invoicing and time tracking services that help you manage your business and invoice your clients.
Visit site »

Remember The Milk

Manage tasks quickly and easily and receive reminders via email, SMS, and instant messenger (AIM, Gadu-Gadu, Google Talk, ICQ, Jabber, MSN, Skype and Yahoo! are all supported).
Visit site »

XML-Sitemaps

Visit site »

YUI: CSS Grid Builder

CSS Grid Builder is a simple interface for Grids customization.
Visit site »

More please!

What? Not enough? Errr… Okay, then, check tlbox. This is an online tool that lets you collect interesting links and online tools for web designers, programmers and system administrators. You might find something interesting there. Visit site »

What free Web-based tool do you use? Share it with us in the comments!

What you will need for this tutorial:

• Obviously, you will need Fireworks (you can download a free trial here)
• You will need an image. You can choose one from Flickr: Creative Commons. Here’s the image I chose for the EDU template (visit the page):
• Finally, you will need the background image below. Right-click on the image and click “Save Image As” to save it on your computer (or get the sample Fireworks file for this tutorial, at the bottom of this post):

Note: We’re going to use the Pen Tool (P) in this tutorial. I am not going to explain how to use it. That’s not the purpose of this tutorial. Instead, I invite you to watch this video on YouTube.com. The author explains (in Italian) how to use the pen tool. The video is pretty self-explanatory so you don’t need to understand what he says.

The Tutorial – Part I:

1. Open the background image in Fireworks. Image size is 960x213px.
2. Place two guides: one guide at 15px from the left and the other one at 15px from the right.
3. First, Select the rounded rectangle shape and draw a rectangle in your page. Don’t bother with the size at the moment.
4. Open the “Auto Shape Properties” panel (in the right sidebar or in the “Window” menu) and change the values as shown below.
   
5. Place the shape at 8px from the top (use the “Properties” panel at the bottom to do that).
6. We will draw the search box at the bottom of the rectangle. Select the pen tool (P) and only draw the left side at the moment. See example below:
   
7. Now, duplicate your image (ctrl+alt+D) . Right-click on it and select Transform -> Flip Horizontal. You should get something similar to this:
   
8. Select the three shapes (Tip: hold Shift and left-click on each of the shapes to select them. See screenshot above). Go to the menu Modify -> Combine Paths -> Union. This will join all the shapes together to create the header:
   
9. We will now add a gradient to our header. Make sure your shape is selected. Select Gradient -> Linear in the “Properties” panel at the bottom.
   
10. The colors we’re going to use for the header are #66C110 (for the upper left corner) and #8FF434 (bottom color):
    
11. We will draw a new gradient (see example below) with the pen tool (P). We will use same colors as previously but different direction (see the black line on the screenshot below). Duplicate it twice (ctrl+alt+D):
    
12. Hold Shift and left-click on each of the three gradients to select them all and cut (ctrl+X). Now select the header and hold ctrl+shift+V to paste the gradients into your header.
    In the “Properties” panel, add a white border (1px will be enough).
    Add new Filter. Select Shadow and Glow -> Drop Shadow. Put 0 for distance, set opacity to 80% and 2 for softness. Here’s the end result:
    
    You can create a more fancy header if you wish. I want to keep it simple for this tutorial.

The Tutorial – Part II:

In the second part, we will cut out the photo with the pen tool and paste it into our header. That’s maybe the most difficult part, so let’s get into it.

1. Open your photo in Fireworks.
2. Select the pen tool (P) and draw a path around the outside of the kids:
   
3. Select the Pointer Tool (V) and right-click on the path. Choose “Convert path to marquee” and then feather in the list. Set it to 4 and hit OK:
   
4. Right-click on the image and select “New Bitmap Via Copy”. It will create a new image in your “Layers” panel:
   
   TIP: you can use the eraser tool (E) to finalize the photo with “edge” set to 40 and “transparency” set to 20%.
5. Copy the photo (ctrl+C) and go back to your header. Paste it there (ctrl+V) and resize it (ctrl+T) to fit into your header:
   
6. Cut the photo (ctrl+X) and hold ctrl+shift+V to paste the photo into the header.
7. Last, create a search field and button and you will be done.
   
   TIP: you can easily ungroup the photo from your header by right-clicking on it and choose “Ungroup” (ctrl+shift+G).

Slice the image:

1. To slice your image, select the slice tool (k). Make a rectangle the size of your header.
2. Go to the “Optimize” panel and choose JPEG: Better Quality in the first list. Right-click on your slice and click Export Selected Slice. Name your image “header.jpg” and save it in your folder.
   
   (Since, in our case, the image is exactly the size of our file, there wouldn’t be no point to use the slice tool. Instead, we could just go to File -> Image Preview and export our image. I just show how to slice an image for the purposes of this tutorial).
3. Done!

Other examples:

Here’s what you could do with other images and some imagination:

And if you wish to get a nice effect, you could fill the header with a large photo:

Download:

You can download the sample Fireworks file for this tutorial:

I will take for example one of my photo (Brad Pitt would have been a better model. Sorry for that girls!). My wife took it in a morning just after I woke up. As you can see below (left photo) I have some very ugly and big wrinkles below my eyes. On the right, I erased them in Photoshop.

Better, isn’t it?

Let’s proceed!

Open Photoshop and load the photo you wish to touch up.

1. Select the “Rubber Stamp” on the left side panel.
2. Set you “Rubber Stamp” brush size and type as you wish in the “Options Palette” (a fuzzy brush would be best for this kind of work):



3. While holding ALT key, select (left button) a point of origin (preferably the area you wish to copy).



4. Release the ALT key and click the mouse to begin cloning nearby pixels to cover those ugly wrinkles.

That’s it! This is a very fastidious work, so don’t expect to do it in a few seconds. You will need to repeat steps 3 and 4 many times before the wrinkles disappear completely. Don’t forget you can always come back to a previous state with the right side panel “History”. I would also recommend you save your original image in case you spoiled it with photoshop.

The final result:

And the easy step by step tutorial to obtain a reflection:

• First, open a new document in Fireworks and put in some text:
  
• Duplicate your text (Ctrl+C and Ctrl+V).
  
• Right-button and select Convert To Symbol or press F8.
• Right-button on your second text and select Transform > Flip Vertical:
  
• Enter in the menu Commands > Creative > Fade image. Select the option as shown below and press OK:
  
• Here is what you should have:
  
• Go in the Layers Panel on your left and select the black square (see image below):
  
• You should now see a black line:
  
• Dragg it up and lengthen it:
  

That’s it! That was easy, isn’t it?

Here is the step by step tutorial:

• First, select New in Files and enter 400px in width and 300px in height.
• Select text tool or press T and type any text:
  
• Select the pen tool…
  
• … and draw a path as shown below:
  
• Select your path and apply a gradient:
  
• you should obtain something similar to this:
  
• Tilt the line in a vertical position:
  
• Click on the background color of your path. You should see two cursors with two different colors. Select one of the cursor and pick the color of the text with the eyedropper:
  
• Click once again on the background color of your path and select the same cursor. Now, select the Sys Color Picker.
  
• Move up the cursor to a slightly lighter color:
  
• Do the same with the second cursor but move the cursor up to a very light color.
  

Last Step

We will now cut and paste the path inside the text:

• Select your path and press Ctrl+X to cut it
• Select your text and press Shift+Ctrl+V to paste your path into it


You can now modify your path gradient to get a better result or modify the shape of your path (with the Subselection Tool (A)).

And the end result:

Tip:

To give more depth to the text you can add a gradient (with a darker color on top)

This method is fairly simple. In another tutorial, I will show you how to do the same by using a different technic (How to create a Text Gradient In Fireworks (2º Part)).

Here is the end result:

Let’s get started

• First, select New in Files and enter 400px in width and 300px in height.
• Select text tool or press T and enter the text of your choice:
  
• In the Properties panel at the bottom, click on the color picker and select the Fill Option:
  
• Select Gradient:
  
• You should get something similar as below. Notice the horizontal line:
  
• Select the small square at the end of the line and turn it until you get a vertical line as shown in the example below:
  
• Select the color picker once again. You will see your gradient (see below). You can add more colors (simply click anywhere under your gradient to add a new arrow) and change the color by clicking on your new added arrow:
  

Tip:

• A good way to obtain a gracefully displayed gradient is to click on one of the color and to select the Sys Color Picker:
  
• Move now the cursor up or down to change the tone to a lighter or darker color:
  
• Now we will add a slight shadow. Add a new Filter in the Properties Panel and select Shadow and Glow and then Drop Shadow. Change the Distance to 0 and the Softness to 1:
  
• Open the Stroke Panel and select White to add a white border to your text:
  

Here’s the final result:



Next time we will see how to get a similar result but with the pen tool. I hope you enjoyed this tutorial. If you have any question, do not hesitate to contact me. I will be glad to answer your questions.

]]> http://web-kreation.com/all/creating-a-text-gradient-in-fireworks/feed/ 3 http://web-kreation.com/all/conceptshare/ http://web-kreation.com/all/conceptshare/#comments Thu, 31 May 2007 14:23:00 +0000 Jeeremie http://web-kreation.com/blog/?p=3 conceptshare. Basically, Conceptshare is an online collaboration tool using Ajax. You can create different workspaces, add your designs and share your work with your co-workers, friends or clients. [...]]]> For my first post on this website, I would like to write few lines about conceptshare.

Basically, Conceptshare is an online collaboration tool using Ajax. You can create different workspaces, add your designs and share your work with your co-workers, friends or clients.



Besides, each collaborator can write a message, chat in real time, add comments and it has a visual-markup annotation tools to draw, crop or point out design changes. The comment option is really interesting as it has a “dragg here” option allowing to comment a particular part of the design, thus accelerating the design process between co-workers.

Conceptshare offer a Free trial, up to one workspace and 5MB Storage. If you need more you will have to upgrade.

]]> http://web-kreation.com/all/conceptshare/feed/ 0