ViVi's Paradise

design tutorials

2010-05-14T08:36:00.000-07:00

1)url: http://vector.tutsplus.com/tutorials/text-effects/how-to-create-a-smokin-western-type-treatment-in-illustrator/2/

2)url: http://psdfan.com/tutorials/designing/making-the-clean-grunge-blog-design/

3) url: http://www.pvmgarage.com/en/2009/07/quick-psd-tutorial-how-to-create-a-simple-and-effective-retro-logo-with-a-soft-grunge-background/

4)url: http://abduzeedo.com/super-cool-retro-poster-10-steps-photoshop

beautiful commercial website

2010-05-14T07:13:00.000-07:00

url: http://www.brownbagfilms.com/

1) It's an animated website...actually it take time to load it
2) but the overall(animated, mood, style & texture) is very nice
3) the navigation bar is quite clear also

beautiful commercial website

2010-05-14T06:47:00.000-07:00

url: http://www.jochemmyjer.nl/#/Home

Analysis:

1) each icon got animated and sound effect...it's funny...
2) this style is using pencil to draw it...but the written typeface(some) is hard to recognize...
3) I found that without the background also can create a good website...but need to add on "texture"

beautiful competitor website

2010-05-14T06:21:00.000-07:00

url: http://www.mwp-online.de/

Analysis:

1)I felt that it's nice website...just click the content that u want...it will directly move down/up to the page

2)i like the mood as well...very fantastic (I felt)

3)But I found that some of the typeface(content button) is not match...

Beautiful commercial website

2010-05-14T06:00:00.000-07:00

url: http://www.wix.com/daniliz/daniliz?partner%5Fid=WMGs4POB1ko%2Da&wixComputerID=W9vcsj2NVaVctFU02Uj6Ix8bwD7OVRGuR5uFcUjgzG%2FUA5rc3AEbg2%2Flsq2csF20bITmDKBjqLqjNs%2BekqUc0w%3D%3D&orgDocID=lvzWlJyfHdI%2Da&experiment%5Fid=smashflash8&gu%5Fid=59fe941c%2D7046%2D45ae%2D80a5%2D75b8b4f8703d

Analysis:

1)I found that this website is using the layout of map to become the mainpage...

2)It's simple and easy to use it

3)the size of font of the content is quite small....

4)I felt that althought the background is empty...but i still felt beautiful

Competitor's website

2010-05-13T14:02:00.000-07:00

url: http://www.osakasushi.com/location.html

Analysis:

1) actually I quite like this website...it can catch my eyes to observe it

2) It gave the way to felt very tidy but the simple design is nice

3) but the thing is also make me felt a bit empty...maybe is the background or the square box

4) besides that, the restaurant's name is very clear to see and easy to remember...

Competitor's website

2010-05-13T13:41:00.000-07:00

url: http://www.palmscourtrestaurant.com/home.html

Analysis:

1) This website is interesrting got play around with graphic...look relaxing...

2) the mood is ok...

3) it's easy to get the message

4)but...it really felt empty...no much info...but still better than the client's website...

Competitor's website

2010-05-13T13:22:00.000-07:00

url: http://www.gunthers.com.sg/menu.html

Analysis:

1) This website make me felt like a high class restaurant.

2) Compare to the client's is definitely clearly than the client's one.

3) But...the size of the typefont is a bit small...

4) The mood is quite nice for me...

Competitor's website:

2010-05-13T12:52:00.000-07:00

url: http://bijoucafe.net/index.html

Analysis:

1) This kind of layout is quite simple and nice...they got some rollover effect to change the pic for the page

2) But I do not know which status that i stay...

3) The info/content quite clear...easy to get the info as well.

4) Just a part one of the page(contact) it's make me felt empty...maybe is without the photo...

5) This website is clear than the client's website...althought it's easy to read...

Client's website

2010-05-13T11:30:00.000-07:00

My analysis for this client's website is:

1)For the homepage, unless for the background is flat, the visual & layout it's terrible(for me)

2)Look very messy...too much of different photo....

3)the navigatoin bar it's like just put on it, nothing much...(boring) 4)the composition of menu page it's messy too...(maybe of the background image)

5)for the about us page...the content is too long...will let me feel boring to read on...

6)the requires of the feedback is quite clear

7)for the locate page, it's really hard to see and some of the content part was out of position.

Gantt Chart

2010-05-13T10:46:00.000-07:00

This is my "Web Design" for Design Mwthod 2

2010-03-30T22:57:00.000-07:00

Fisrt of all, I would like to do a user testing for my website...which is kopitiam website
Anyone can give any comment or suggestion or anything else about on it...color mood, functional, feeling, contrast, rollover effect is it ok? or anything also can let me know(write on english or chinese also can^^)
But I want to tell u all first I haven't complete all of it yet...so just looking for the others that I was completed first^^
(And I wouldn't explain that what is what about that first...Coz I would like to know how is ur first time to see my website...so that I can make it better than this time)
I will keep loading on it^^

the others will coming soon (^^,)

Flowchart

2010-01-18T02:09:00.000-08:00

Moodboard: "Baking"

2010-01-18T00:28:00.000-08:00

MOODBOARD: "Baking"

My Ideas for "how to?"

2010-01-07T05:30:00.000-08:00

How to make it healthy???

1. who am I?- I am Specialist(healthy)
2. what is that?- take care of ours body
3. what for?- protect our body
4. 1st task- do what exercise to protect body
5. 2nd task- what kind of food can help us
6. 3rd task- how to arrange it(time)
7. conclusion- effect of the body
8. showcase- gallery

How to "baking"...???

1. who am I?- Baker
2. what is it?- Bread and Cake
3. what for?- satisfy for consumer
4. 1st task- buying material
5. 2nd task- baking
6. 3rd task- let consumer choose flavor and variety
7. conclusion- comment from all consumer
8. showcase- gallery

How to relax...?

1. who am I?- Tourist guide

2. who is them?- traveler

3. what for?- introduce them where is the best place to travel

4. 1st task- viewing for the map and point the place out

5. 2nd task- show all the photo of travel scenic spots

6. 3rd task- set up the package and fees

7. conclusion- how traveler enjoy it?

8. showcase- gallery

Web design (Research)

2010-01-05T10:06:00.000-08:00

Web design (Research)

1. http://snopp.no/portfolio

2. http://www.mauriciostudio.com/

3. http://www.kitfolio.com/

4. http://www.edelwwweiss.com/index.html

2010-01-05T09:28:00.000-08:00

(Research) Photoshop & Illustrator Tutorial

"Old halftone print effect"

http://www.photoshoproadmap.com/Photoshop-blog/2007/09/13/give-your-photos-a-retro-comic-book-effect/

Step1
Now we are going to increase the overall contrast of the picture by burning it a bit. Go to IMAGE > ADJUSTMENTS > LEVELS…With this image we are going to set the INPUT LEVELS to 60 / 1.00 / 220.

Step2
In this step we are going to give the photo an illustrated look with some graininess to give the illusion of an old and bad quality paper. It is not a realistic effect, it is just some distortion to the image to help us achieve the final look. Go to FILTERS > ARTISTIC > FILM GRAIN. In this case we are going to use: GRAIN: 4, HIGHLIGHT AREA: 0, INTENSITY: 10. Try different settings for different photos.

Duplicate the layer and name the new layer HALFTONE

Step3

In this step we are going apply a halftone pattern to the image to give the final old comic book printing effect. Go to FILTER > PIXELATE > COLOR HALFTONE. Set MAX RADIUS: 4 and leave the rest with the default values. Press OK and then go to the LAYERS PALETTE and set the BLENDING MODE to DARKEN.

Final

2010-01-05T08:03:00.000-08:00

(Research) Photoshop & Illustrator Tutorial

"Drawing from a reference photo"

http://gas13.ru/v3/tutorials/painting_candle_tutorial.php

Step 1
Tracing the outline of real photo.The Tracing: First step is to create an "onion skin" by adding a white layer above the bottom reference photo layer and setting its layer opacity down a bit so that the image can be seen through the white layer. Next I create a blank layer above the white "onion skin" layer to use for tracing the position and outline of the candle. It is important to make the tracing on a separate layer and NOT on the onion skin layer. This is not meant to be a detailed drawing in any sense... just a rough sketch showing where the major color areas and important perspective and detail elements are located.

Step 2
Once the rough sketch is completed, I return the opacity of the onion skin layer to 100%. By this time, I've also printed out a good quality print of the reference photo to "eyeball" for building up the picture's color and
definition. From this point on, I don't use the bottom layer anymore, just the reference print out. Step3
So let's begin. For the candle, I create four more layers for the dark red background color (1), the bright red candle (2), the flame (3), and the wick (4). Yep, that little wick gets its own layer. The lasso tool: To fill in the color, using the sketch lines as a guide, I use the lasso tool to define and fill the major areas of color on each layer. The lasso tool is, in fact, about the most important tool I use throughout the development of the image to define areas to manipulate, to change or modify, to do whatever. The lasso tool is my drawing tool supreme. I draw with the lasso tool... I define with the lasso tool... I do just about everything with the lasso tool... hope I've made my point... I love the lasso tool... :)
Step4
Of course the lasso tool is nothing by itself... it has to be used in conjunction with adjustment and fill tools like levels, color balance, contrast, and hue/saturation, I have a number of actions set up to help with these combinations. For example, after I've selected an area to manipulate (using the lasso tool to select an area which is then defined by the "antline"), I have an action assigned to my F2 key. When I press that key, the levels dialog box pops up. After I've made levels changes and hit the OK, the action next brings up the color balance dialog box so that I can make color adjustments if needed. Sure does save a lot of time, those Photoshop actions.
Step5
On the reference photo, continue to lasso areas of the candle and make appropriate changes in level, color and hue/saturation.
Step 6
The Pencil Tool: Now the image is starting to come together. I begin using the pencil tool at varying pixel widths. I generally have the size and preasure set to "stylus" and the opacity set to either 33% or 66%, never 100%. Step7
Getting Reckless and Spontaneous: One of the tricks that I use quite liberally at this point is to work with the pencil tool on a new layer just above the layer that I intend to add color or drawing to.
Final
After doing a bit of work on the flame and wick layers, I add another layer just below the flame layer. That layer is for the flame glow and is highly feathered and set to a layer opacity of about 50%. And finally, after a tweak here and there, it's done.

2010-01-04T21:21:00.000-08:00

(Research) Photoshop & Illustrator Tutorial

"Make it wonderful"

http://www.onlyphotoshop.com/tutorial/basic-model-retouching/7/

Step 1
In this first stage we will give more color to the hair and face. First duplicate the Background layer.
Layer > Duplicate Layer - Name it "Blur"

Step 2

Blur a little: Filter > Blur > Gaussian Blur > Radius = 5 px
Change the layer to Soft Light mode with a 75% transparency. This brings a better definition of the image and recovers the color a little.

Step 3

Above the Layer Background make a new layer to finish giving life to face.
Fill this layer with the color 75,25,25 using the Paint Bucket tool. Then change this layer to Soft Light mode with 75% transparency.

Step 4
Eyes and Lips...
Up to now really looks very well, however their eyes get lost a little, the same as their lips.
Make a new layer, above the layer "blur", name it "lips".
Use the Zoom Tool to increase the area of the lips and use a paintbrush of the appropriate size to paint the lips with the same color: 75,25,25.
Begin marking the contour with a thin paintbrush, then fill with a wider one.

Step 5
Change the layer lips to Soft Light mode and like magic art some succulent lips appear.

As you will see, there is a small clear point in the left corner lips, also another close to the center of the inferior lip, something that seems like a grain.

It is necessary to correct this with the Clone Stamp tool at 50 - 35%. Sampling (pressing the Alt key, and clicking with the mouse) fair to the center of these two imperfections. All this on the Background layer.

Step 6

The lips are ready, now lets go for the eyes, she will use blue color eyes, blue as the sky to where she belongs.
With the Heliptical Marquee tool make a selection that adjusts around one of her pupils. Go to Selection > Transform Selection to adjust as much as possible to the pupil.

Selects the white color and fill the selection pressing Alt.+ Delete.
Once its full, with the Eliptical Marquee tool drag the selection to the other eye (not in all the cases it is the same diameter) and also fill it.

Deselect by Pressing Ctrl + D.
Then load again the selection, but now of both eyes.
Select > Load Selection - Channel = eyes Transparency
Now its time for color: blue. Image > Adjust > Hue/Saturation - Colorize - Hue = 220 - Saturation = 100 - Lightness = -20

Final

Deselect pressing Ctrl + D. Then take this layer to Soft Light mode and adjust its transparency value if you decide to decrease the color intensity.
And she is Ready.

2010-01-04T20:01:00.000-08:00

(Research) Photoshop & Illustrator Tutorial

"Create a Sleek Illustration that Fades from Line Art to Color"

http://psd.tutsplus.com/tutorials/photo-effects-tutorials/create-a-sleek-illustration-that-fades-from-line-art-to-color/

Step 1

First create a new document that is 1100 pixels wide by 1500 pixels high at a resolution of 300 pixels per inch. And move the texture into document.

Step 2

using the Pen Tool (P) to create a path around the dancer.

Step 3

Now that you finished creating the path you need to set your brush size to 1px and Hardness at 100%. Next create a new layer and name it "contour1." Next, using the Pen Tool (P) right-click then select Stroke Path, select the brush and make sure the Simulate Pressure is not selected. And also make the stroke black.

Step 4

Now that you have created the stroke do not delete the path. Next you need to press (Command + Enter) to transform the path into a selection and then you need to press the Add Layer Mask button. This will hide the background around the dancer. In the end move the dancer and stroke layers into your document.

Step 5

Select the "countour1" layer and using the Pen tool (P) you will need to draw paths all over the dancer. You will need to draw these paths along the shadows or follow the lines of the cloths and then stroke the paths with a 1px black brush. The result is called line art.

Step 6

Create a new layer below the "countour1" layer and name it "color1." Command-click on the "Dancer1" layer to make a selection, then you need to fill the "color1" layer with this the color #f7eedd. Also, you need to link these to layers so if you move one the other one will follow.

Step 7

You need to repeat the line art for each image and place them onto the document. Don't just throw them in there, you need to maybe do a sketch first and position each image right.

Step 8

If you followed the instructions so far you should have the layers in this order.

Step 9

Now that you have the line art behind the dancers you will need to mask some parts to make some kind of transformation. Select the Layer Mask of a dancer and simply use the Brush Tool (B) set to black, and draw over the part you want to hide.

Step 10

Next, duplicate the dancers, scale them and move them as you wish, but keep in mind that you need to arrange them in a nice composition. In my case, you can see that I have placed six more dancers. Also, I have masked the original dancer images and left only the line art visible. I did this because in the next step we will bring some parts of the dancers back over the line art.

Step 11

First thing to do before you start to give the line art some life is to make a selection over the part you want to mask.

Step 12

Next, use a splatter brush. Use a black color for the brush and start drawing over the mask and reveal some parts of the dancer. Also, to achieve a really nice effect, decrease the Opacity of the brush to 20%.

Step 13

Repeat Step 11 and 12 for each dancer you created. Also, control your composition and if you do something that does not look right, don't be scared to erase and do the effect again and again until you're satisfied with the final result.

Step 14

balanced composition.

Step 15

Next we'll add just a few crows to the image to fill it a bit more. create the line art for both images, duplicate them as many times you think it is necessary, and make the faded effect using the splash brush.

Step 16

Next use another stock image sxc. Cut and duplicate this feather as many times as you think it is necessary because you will use this to add some more graphic elements. As you can see, just a few are enough to give the illustration an extra feeling of movement.

Step 17

Now that you have set your brush, start drawing a few circles around the working space. Be careful not to overdue them.

Step 18

Create a new layer over the circles you just created, then Command-click on the circles layer to make a selection. Next, you need to be over the new layer you created, use the Lasso Tool (L) and Right-click, then select Stroke. Set the Radius to 1px and color to black, also make sure you set it to Center.

Step 19

Next, we'll create a new layer and again draw some circles, but this time use different settings and a different color #8bb687.

Step 20

Repeat Step 19, but this time use a different color and make the circles in the opposite direction #99a3b4.

Final

Logo progress

2009-11-15T10:25:00.000-08:00

Pattern Design

2009-11-08T20:10:00.000-08:00

Color Pallete

2009-11-08T17:23:00.000-08:00

Visual Expressions

2009-10-26T20:20:00.000-07:00

Design Method Moodboard

2009-10-16T12:12:00.000-07:00

loading design

2009-06-25T19:49:00.000-07:00

This is a simple game loading...
Just hold the vase...move left or right to hold it
Please give the comment about this theme on loading ^^

Pinocchio (summarize)

2009-06-09T09:33:00.000-07:00

Woodworker Geppetto make a puppet at night in a town. Jiminy (Ant) warm himself into the workshop. Before they (G, kitten and goldfish) go to bed. G notices a falling star in the sky and wish that Pinocchio could be a real boy. Then, the fairy make the P come alive. But P need to prove himself to be brave, truthful and unselfish. Then J ordered the official title. Then P start his life (go to school). But he encounter a bad Fox. The fox take P to perform. After perform, a guy take him into a birdcage. He use P to earn money.On the way to another place, J found P and his farther (Geppetto) are looking for P. P see the fairy, his nose become longer and longer because P is lying. Then fairy help P and advice him not to lying anymore. Afterthat Fox found P and send him to a place with kids. In process, P's ear became a donkey's ear and got a tail. Then he escape to the house. Unfortunately, his farther wasn't at home. They jump into the sea and find his farther. P meet his farther in a whale's belly. They burn some wood and let whale open mouth. Then, they success to escape. But puppet was died and he save his farther. Finally, fairy make P become a real boy and J get a gold (official conscience)

Robin Hood (Summarize)

2009-06-09T06:43:00.000-07:00

In the first, Robin Hood and John dress up as a women as female fortune teller . Robin Hood and Little John rob the prince. They take away prince's valuable property (money & diamonds). R.H became a wanted. Sheriff of Nottingham go around the village and snatch moneys from the villagers. R.H dress up as a blind and take his stolen from the prince's money give to the villagers. One day,prince archery tournament held, RH almost catch by prince. Then, R.H and his friends managed to escape. At night, he meet with Maid Marian. Prince torture villager for levy taxes.All that people are very toilsome and Sheriff of Nottingham caught up all the innocent. After that, R.H & Little John help him out and help all villagers who caught in the jail. R.H use a way to take out all moneys from prince's bedroom when he is sleeping. And R.B give back all the money to each villagers. Then, R.H succeed to escape from the castle which is in the fire. And prince disappear in the fire. Finally, R.H marry with Maid Marian.

Hercules (summarize)

2009-06-09T06:12:00.000-07:00

First, on the celebration of Hercules's birth. Hades wants to be control of Mount Olympus and the world. One day, when everybody were sleeping. Hade's lackey (Pain & Panic) kidnap Hercules and turn him mortal by means of a magic potion. Although they carrying Hercules down to earth, they are interrupted by two humans (Amphytryon & Alcmene) before Hercules drinking the final drop falls on the ground. Afterthat two humans adopt Hercules .When he grow-up. One day, his foster parents decide to finally come clean to him about the circumstances of his adoption, showing him a medallion (zeus's lighthing bolt). Hercules goes to the temple of Zeus. Zeus explain that the only way that Hercules can rejoin his parent is to prove himself a "true hero". A pegasus also join Hercules. A satyr of heroes train Hercules. Hercules save Megara. Finally, Hercules became the true hero and save the world. He is invited by Zeus to live in Olympus, but he decides to live his life (mortal) with Megara.

Characters:
Parents: Zeus
Hera
Evil uncle (Hades, lord of the underworld)
Lackey: Pain & Panic

RASTER ICON

2009-06-04T09:37:00.000-07:00

This is raster icon~

comment pls~

SKIN DESIGN 1

2009-06-04T09:14:00.000-07:00

This is skin design^^

Pls give me your coment !!!

thanks~

User Testing (VECTOR ICON)

2009-06-04T07:26:00.000-07:00

This is my Vector Icon Design (Title:Castle)

#Do you like this theme of icon?

#How about this type of colors?

#What is you suggestion?

#Can I improve more?

PLS GIVE ME ANY COMMENT~

THX~^^

10 Pallete Style

2009-05-26T06:26:00.001-07:00

Banquet

Sunset

Sea

Plant

Bright Rainbow Color

Grass

Flower

Dust

Dirty

Beach

Share works: Create a clock by Photoshop

2009-05-23T09:42:00.000-07:00

Prevoius two days, I learnt this clock by photoshop from our lecturer. I felt excited. Because I never think and never learnt how to create it before. It very funny because this clock is done it by myself. I very enjoy it but sometime I will losing myself ...because sometime I can't cath up how to do immediately...but anyway...I will do my best to do how well I can do...

1O THINGS TO DESCRIBE MYSELF

2009-05-14T02:53:00.000-07:00

1. Chocolate (My secondary schoolmate called me "chocolate" maybe about my skin^;^)

2. Black pearl (Don't know why they called me "..." ,haha...I think is my skin too black ~when I walking at the outside ,my skin will look a bit shining~)

3. Tortoise (erm...because I always bear many things in my life like turtoise always wear it's shell (~.~")

4. Hello kitty (hehe (...>.0...)my face are considerable than kitty's)

5. Biscuit ( B is my one of favourite...the square shape biscuit [::] like my face~)

6. Bread face (bread @,@!...like my rounded face)

7. Burger (someone also said burger like me lol...haiz...my face)

8. Black Mermaid (my freind said that...I think maybe my face ^-^y wahaha...)

9. Milk (I can't breathe without milk...)

10.Chilli (haha...I like spicy...and chilli will link to my favourite...dance)