Photoshop: Play with Painting Tool

It is sometime fun playing with some tools. This was done in Adobe Photoshop using painting tool. All images are from Getty Images, but it was good practice to learn some fun tool.

Can you tell how many different images are in here?


Answer is...........
Background image
Image of the girl
Image of hands with cup
Text "Cocoa"

Newer Design of Capsule Hotel

You may have heard about Capsule Hotel in Japan.The first capsule hotel was open in 1979 in Osaka, Japan.

"It is a type of hotel with a large number of extremely small "rooms" (capsules) intended to provide cheap and basic overnight accommodation for guests not requiring the services offered by more conventional hotels."

Please see the video of how design could change this industry and it is amazing!

Capsule Hotel - 9 Hours from Christoph on Vimeo.

Their concept is shown image below here. It is shown very simple, but it makes total sense of why they call this hotel "9h (nine hours)". We are all living in some kind of designs, and designs are all around us. This concept of design would change a lot about this capsule hotels, and I really want to try it myself someday...... Maybe next visit there?









More information about this hotel:

Hotel Website (Japanese/English)
http://9hours.jp/

Dropbox Deal for Students

I think a lot of us already know about Dropbox. Today, I was going to talk about different topic, but one of my friend told me about this wonderful double your Dropbox space deal for student who has ".edu" email address, so I like to share it.

"Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!"

If you didn't know or don't have the dropbox account, I highly recommend you to get one. Even if you are not student, it is still free great service to have fro sure. Dropbox is now available in French, German, Japanese, and Spanish:)




If you already have a account with them and have ".edu" student email account, go to the link to get this deal.
www.dropbox.com/edu






If you don't have free account with them, you could click the link to start.
http://db.tt/FfPD9st



Let me know if you have questions!

iPhone App Project (ThreeTreeTea): ~Interface3~

I have been posting about iPhone app interface design for Three Tree Tea Company for almost for a week (including tools postings links below this post), and this is the last section of it.

I will post the "shopping cart" section from the menu bar, and it is the first page of the section. It's simple generic phone application design. This page gives you options to edit, go to checkout, and simply gives you what you have in your cart.






When you click top-right checkout button, you will get a screen like this. It gives you order summary with totally, and you can either Cancel to go back or place your order to pay.

Place your order button will read you to paypal screen since the company is using paypal. I may add the interface design for these pages in the future?







This bottom image is the last page after you go through all the payment information and such in paypal pages. This page tells you simple information and hope users would leave the app cheerfully with good experience. Thank you so much to people who has follow the posts for this project! I may update on this project in near future :-)

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
4. iPhone App Project (ThreeTreeTea): ~Sketches~
5. iPhone App Project (ThreeTreeTea): ~Interface1~
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

iPhone App Project (ThreeTreeTea): ~Interface2~

Today's posting would be Part2 of my interface design for Three Tree Tea Company iPhone app. You can click each images to enlarged them for better details.

I am posting all the pages I have designed for "steap timer" on the menu bar today. This section is the funnest part of this application and I think make this app differentiate from others (I hope).



Left image is the second page of the section if you click "go to tea list" on previous page, and I may change its design to unify with rest.........
Well, it is list of tea you can buy from this app and also get steam timer and tips to make your tea!







When you choose your tea from the list, it will come this the page like on the right. I chose Matcha Genmai Tea here:)

Tip would tell you how much tea you need for specific hot water. Here it said you need boiling water, but some tea need lower temperature, so you could find such information from the tip.

It will take a minute and half for this tea, so when you are ready, just click the Steam Your Tea button!




Once you click the Steap Your Tea button, the timer will start ticking. Lady in kimono shows up and keep you company being very polite:) As you see from top left image to right, light glow is getting bigger that is one more way telling you time is ticking. This idea was brought by other students who gave me critique in the class. You can click "cancel" to turn off your alarm music on right image.



This is the last screen when your tea is ready. It is very simple and the lady in kimono is still super polite to tell you to enjoy your tea, and hand the tea to you. Adding the tea cup in her hand was also getting critique in the my class last week from my instructor. I could totally get nervous showing my works to others, but getting critique from others totally helps!

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
4. iPhone App Project (ThreeTreeTea): ~Sketches~
5. iPhone App Project (ThreeTreeTea): ~Interface1~
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~
   

iPhone App Project (ThreeTreeTea): ~Interface1~

I could finally start posting my interface designs for my iPhone app project for Three Tree Tea Company. I have been posting useful tools for this project, my research and process, and my sketches past several days.

There are three buttons on menu bar that are "products", "steam timer", and "shopping cart". I will be talking about "products" pages today. Top image is the first page of "product" that is technically homepage of this application. I created 6 simple categories users to choose from, and last category is "all product" button, so repeating customers or someone who already know what they want could just go there to get their product. This page should give overall atmosphere of this app and company information.

If you click the image, it will be enlarged for you to see the interface better.



This is a second step where you can find product list under the tea section with images, name, size, and price for size shown the page.

You could go beck to product main page by clicking the left-top button, and get the information of the category by clicking right-top button. You could see part of next item on bottom of the screen, so you know there are more product on this list. Otherwise choose the product you like to go next page!




This would be a step 3 page if you choose "Matcha Genmai Green Tea" from the previous page. This will give you images of tea itself, tin, and bag. Here you could choose different sizes to add to in your shopping cart. You could also find description about this tea. I like to add "steap button" on bottom of the screen (when you scroll down the page all the way).

When you click one of the add to cart button, you will link to first page of shopping cart that I will post here in near future!

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
4. iPhone App Project (ThreeTreeTea): ~Sketches~
5. iPhone App Project (ThreeTreeTea): ~Interface1~
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

iPhone App Project (ThreeTreeTea): ~Sketches~

This is continuous topic from last blog post that was iPhone app project for Three Tree Tea, and I showed research and thinking process. Here I am posting my process sketches. These are not anything pretty or fancy, but quick sketches for my brain to process the ideas, to record before I forget (very important:-), to compare my ideas after this sketches, and.....such. It will be a little bit more clear to you what I'm thinking when you see my project!

What I have in my mind is that there will be three main part to this application that are Product section, Steaping Timer section, and Shopping Cart section for this tea company.
To be continue........:-)

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
4. iPhone App Project (ThreeTreeTea): ~Sketches~
   
5. iPhone App Project (ThreeTreeTea): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

iPhone App Project (ThreeTreeTea): ~Research/Process ~

I was talking about my new iPhone App project I have been working on in my previous blog post, and this is a part of my research/process I was doing for this project.
The client is "Three Tree Tea Company" in Seattle. The top image is loading screen when you first click a icon of application from your phone top screen:)
I will continue to post more work!!

----------------------------------------------------------------------------
Project Statement:
Their mission is to present to you our line of superior, hand-picked and carefully blended teas. We sincerely hope that you will enjoy our teas not only to relax but also for their flavor and beauty.

This is small business in Seattle and I am designing Mobile Application to help business to be spread from this app. The business is running online based, and this app should help target audiences to understand more about teas and their products, and it would also give them an option to buy their product from their cell phone.

Research

• The company started in 1995
• They operated a unique and Asian-inspired tea house that blended the natural and organic elements with the tradition of tea, but in a non-intimidating way.
• The logo consists of three tree, again derived from Three Tree Point and very representative of Washington State
• Products: matcha, Tea Tools, Tea Late Powder, Hana-cha, other Japanese tea and more.

Target Audiences

• Wholesale such as coffee and teashops as well as for resale in grocery stores and specialty/ gift shops. However, this project is targeting more towered to individual shoppers.
• People who are into natural and organic product
• Middle age group (mainly women)

Objective
I like to add playful and fun atmosphere, but also give an organic and natural feeling of their product.

Key Benefit
Focus of this iPhone app would be the "steap timer" option that users could use when they make tea from the company, and each tea will have proper length of steaping time. It would also give some tips for each product such as amount and temperature of hot water.

Support Statement
Tea market is glowing in the United States, but it could be better. There are some simple easy steps you could do to make your tea much more enjoyable in everyday life. I hope this application will help users to buy good tea, steap more flavorful tea at home, and making and drinking tea as their part of life style.

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
   
4. iPhone App Project (ThreeTreeTea): ~Sketches~
   
5. iPhone App Project (ThreeTreeTea): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

Another Useful Tool: iPhone GUI PSD Version 4

Yesterday, I mentioned that I have started working on iPhone app interface design and recommended the page "10 Free Printable Web Design Wireframing Templates" from WDL (Web Design Ledger) site.

I really like to share another related page call "11 UI Kits for iPhone and iPad Development" that is also from the WDL, and is my another best friend for the project I am working on right now (I am planing to post the project here when it's done).


On this page, you can find:

1. iPad GUI Kit in PSD Format
2. iPhone GUI PSD 4.0
3. Free iPhone Toolbar Icons
4. Ultimate iPhone Stencil for Omnigraffle
5. iPhone UI Vector Elements
6. Free iPhone Toolbar Icons
7. Yahoo! Design Stencil Kit
8. iPad GUI PSD
9. iPad Vector GUI Elements
10. iPad Stencil for Omnigraffle
11. iPhone PSD Vector Kit

I am using one of the tools listed above call "iPhone GUI PSD 4.0" for my project right now and it is helping my interface design much presentable.
I was showing my iPhone app interface design in my class today, and few people ask me where I found these useful template, so it was another reason I wanted to share this site here. I hope more people will benefit from handy tools like this.

iPhone GUI PSD 4.0

Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Usuful Tool: iPhone GUI PSD Version 4
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
   
4. iPhone App Project (ThreeTreeTea): ~Sketches~
   
5. iPhone App Project (ThreeTreeTea): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

Useful Tool: iPhone Wireframe Templates for Sketching

One of my friend introduced me this useful link page "10 Free Printable Web Design Wireframing Templates" from WDL (Web Design Ledger) site.
You could find many sites where give you different type of template, but I fond their wireframing templates very useful, so I decided to share with people who come to read my blog (thank you!), but don't know about this site.
This would also help me going back to the page if I lost the downloaded file.


On this page, you can find:

1. Paper browser
2. iPhone Application Sketch Template v1.3
3. Six page template
4. Wireframe template
5. iPad Application Sketch Template v1
6. iPhone Wireframe Templates for Sketching
7. iPhone App Wireframe Template
8. Concept7 Sketching Grid Paper
9. Paper wireframe templates
10. 960 grid template
    

I have started iPhone app interface design project for a company (I will post it here when I'm done with the design!), so I needed to start sketching my ideas and I am using one of the templates below:


If you are not a designer/web related person, you could still use these template for fun...I bet somehow!


Other related my blog post to this page:

1. Useful Tool: iPhone Wireframe Templates for Sketching
2. Another Useful Tool: iPhone GUI PSD Version 4
   
3. iPhone App Project (ThreeTreeTea): ~Research/Process ~
   
4. iPhone App Project (ThreeTreeTea): ~Sketches~
   
5. iPhone App Project (ThreeTreeTea): ~Interface 1
   
6. iPhone App Project (ThreeTreeTea): ~Interface2~
   
7. iPhone App Project (ThreeTreeTea): ~Interface3~

Editorial Illustration: 90% of US bills carry traces of cocaine

click here for the article on cnn.com

This is my editorial illustration for the article from CNN Health section that said:

"Research presented this weekend reinforced previous findings that 90 percent of paper money circulating in U.S. cities contains traces of cocaine."

I fond this article has a interesting fact that would get people's attention very easily, and it would be fun for me to create supporting graphic to it.
The issue could be very serious, but the article was not talking about specific crimes or posted as top news, but in mental health section, so I felt I could go to a little bit unrealistic direction with some humor. I also thought idea of unrealistic illustration has connection to the cocaine. It is still a negative story, so I wanted to keep it darker tone. I wanted the illustration to support the catchy topic to pull more audience to read the blocks of texts.

some of my sketches and note

AIGA Event: Pixel Punchout Round 2 "The Final Four"

http://www.aigaseattle.org/events/pixel-punchout-round2

There was "Pixel Punchout" Round 2 this past Friday, April 15th from 6:30-8:30 at the Art Institute of Seattle. There were four competitors who had won the Round 1 last week.

The four competitors were:
Nate Johnson of frog vs. Anasazi Wade of Starbucks
Brian Piper of Tether vs. Zach Pfriem of Ascentium

I went to the event again, and had a great time. It is really inspiring to watch these talented designers could come up with ideas and execute them in one hour!

Championship will be hosted on Friday, May 6 from 6:30-8:30 at Adobe HQ in Fremont. It would be very exciting to see the Adobe office as well. I am not sure how to sign up or cost for this championship, but I am interested in attending this event.

Get Direction to Adobe HQ in Fremont


My Other Post about Pixel Punchout Event:

1. AIGA EventPixel Punchout Round 1 "The Elite Eight"
2. AIGA EventPixel Punchout Round 2 "The Final Four"
   

Photographer: Gregory Crewdson

Have you ever seen any of Gregory Crewdson's work?
I was introduced to his work by my friend many years ago, and this is good place to introduce him to people who may not know him yet.
He is amazing artist and I highly recommend to check his works. Are there any parts of his images not perfect? He is very much into what lighting could create dramas to his photography and I cannot see his work without a sigh.

Photography: Self-Portrait 1

This is my own self-portrait that was done in Adobe Photoshop more than 2 years ago, I think.
I took the photos of myself and my own x-ray (my friend actually helped me take photo of the x-ray). I got a background image from Getty Image. I combined all of them to create this self-portrait.

The focus was to create a self-portrait that would reflect myself at the time.
I just got back going to school at time, and dry ground showed I could absorb anything in this big opportunity, but inside there was a part of me having hard time getting back to school life again and having some sort of anxieties from all the changes I was going through and all other things in my life. However, I was least looking up though:)
I think that was my rough concept, but I am pretty sure that I just wanted to use my own x-ray image in this project?!

These are the images I have used in the project:

Interactive Website: "UNIQLO Introduction"

http://www.uniqlo.com/us/introduction/

Have you heard the company call UNIQLO before? This is their English version of Introduction Website that the project was done in 2009.

In this site, they state their philosophy as below here:


I thought this "UNIQLO Introduction" website explains this all. It is crazy fun in great way!

If you like to see more project this company has done, you can check out the link:
http://www.uniqlo.com/us/corp/media/projects/

Realistic Illustration

I took a photo of an old ring my mother gave to me, and I drew the ring using the Adobe Illustrator. I was trying to create this image as realistic as possible.
Isn't it interesting that I like my ring a lot more than before I did this project? I may brain washed myself by staring it so much for so long.

Here is the photo of the ring I drew:

Zootool

One of my classmate shared this website call "Zootool", and I fond this site really useful.
Zootool is about collecting, organizing and sharing your favorite images, videos, documents and links from all over the web.
Now a days, it is a little bit overwhelming to bookmark links you like because there are so many of them. This site would help you collecting all the links you want to save and not only you can access to the Zootool, but you can also log in to your page from any computers to find the site you saved. How cool is that?
Oh, and yes, it is free to use.


http://zootool.com

AIGA Event: Pixel Punchout, Round 1,The Elite Eight

http://www.aigaseattle.org/events/pixel-punchout-round1

There was "Pixel Punchout" Round 1 this past Friday at the Art Institute of Seattle. It was my first time attending to the AIGA event.

The eight competitors were:
Nate Johnson of frog
Bryan Mamaril of Hornall Anderson
Zach Pfriem of Ascentium
Brian Piper of Tether
Anasazi Wade of Starbucks
Jeff Barlow of Starbucks Global Creative
Josh Peters of Cicada
Tara Lee of Graphiti.

I thought it was very fun and I am thinking about going this Round 2 this coming Friday. It will be at north campus of the Art Institute of Seattle.
Are anybody also interested to go?



My Other Post about Pixel Punchout Event:

1. AIGA EventPixel Punchout Round 1 "The Elite Eight"
2. AIGA EventPixel Punchout Round 2 "The Final Four"
   

My Own Logo

I created my own logo last quoter. It was so hard me to branding myself. I wanted my logo to be simple and stand out. I also wanted to add a little bit of brush stroke to end of each strokes to include my culture of Japan.

What do you think about my logo?