網站製作學習誌

記錄學習製作網站的一切

Web 2.0 教學大進擊

前一陣子在 Smashing Magazine 看到了一篇 Web 2.0 Tutorials Round-Up ,整理了多篇有關 Web 2.0 且值得大家參考的視覺設計教學文章。從這些教學裡看得出來,幾何、漸層、圓角、倒影、陰影、半透明、頁籤、放射狀標誌等等效果,都是 Web 2.0 在視覺上的特色。不過我想功力高強的視覺設計人員,對這些趨勢也一定有自己深刻的想法;就算去除 Web 2.0 的外衣,這些特色也必定能被他們所掌握。

然而我所接觸過的大部份網頁設計人員,在我的感覺上對這樣的趨勢還不是這麼熱衷;但事實上,其實是他們很多設計都是被客戶所左右;因為對視覺設計人員來說,麵包有時比創意還重要。台灣很多專案公司給視覺設計人員的待遇真的不是普通的差 ( SOHO 和學生大概是禍首) ;而且每個案子都會因應客戶的要求,兩三次以上改版是跑不掉的。

而現在有客戶會去關心 Web 2.0 是什麼嗎?我想絕大部份非網路產業的公司可能不會這麼在意吧。在視覺設計方面,他們常常會有自己的想法;但是實際上真的符合瀏覽者的需求嗎?就我個人看過的案子來說…很少。很大的原因是這些客戶自己其實不太會去使用自己的網站,他們只是覺得這樣看起來比較爽 (註1) 而已。像這樣的客戶,我真的很想把「 Don't Make Me Think 」這本書粘在他們的鼻子上。

其實不管是不是 Web 2.0 ,瀏覽者其實要的不多,重點在於他們在使用上的感受。除了保持新鮮感之外而且還要易用,不同類型的網站就要有不同的設計方式 (註2) 。主事者應該確切瞭解網站的定位,並清楚表達給視覺設計人員;然後不要有太多的意見,把專業的事情留給專業的人去做就好了。

註1:好啦,我承認這樣大家都有爽到…

註2:另外還有一個重點是…我套程式時要很容易!天殺的想了一些亂七八糟的功能,百分之七八十都用不到,結果害我改程式改得要死…|||Orz

扯太多了,我把該文相關內容摘錄如下:

Visual effects

1. Three girls posing in the night Illustration

2. Adobe Software - Adobe Photoshop

3. Adobe Software - Adobe Photoshop

4. Create a software box - Photoshop Tutorial

5. Retro lines in Photoshop?

6. Splash Page Tutorial

7. Gradient Styles & How To Make Dashes

8. Creating a page curl in Photoshop

9. Creating patterns in Photoshop CS2

10. Realistic photo print

11. Circles, Circles, Circles

Logos, Logotypes

12. Jelly Remake

13. Web 2.0 Style Logo

14. PXLGFX- Polished Text

15. How to Make a Web 2.0-Style Logo

16. Learn to create your own Web2.0 Logo

17. How to create a WEB 2.0 style logo

18. Web 2.0 Logo #2 | Designphase

19. Web 2.0 Logo | Designphase

20. Web 2.0 Logo

21. Create A bugs Life Logo

22. Pimp My Ride - Logo

23. The Logos of Web 2.0 | The FontFeed at FontShop

24. web2logo.com

25. How Web 2.0 Logos are Drawn

26. Flickr Photo Download: LOGO2.0 part I and II

Text Effects

27. Custom Chrome Text Effect

28. Photoshop Reflections

29. The Shiny Floor Effect

30. 3D Text Professional Tutorial

31. Text Kerning

32. The Glossy TEXT web2.0 style

33. Photoshop Tutorials: Texteffect

34. Web 20 Shiny Floor Effect - video tutorial

Badges

35. Web 2.0 Badge Photoshop Tutorial

36. Create a Shiny Badge - Photoshop Tutorial

37. Supermarket Stickers Tutorial - Visualdesigncore.com

38. Web2.0 Badges

39. Glossy web 2.0 badge with rounded corners

40. A Glossy Starburst Tutorial

Buttons

41. Badge'n Button | Designphase - Web Design Tutorials

42. Toxiclab.org - Photoshop - Web buttons tutorial

43. Photoshop Buttons Create glossy button for web 2.0 Tutorial

44. Web 2.0 style buttons

45. Glossy Button Video Tutorial and PSD

46. Creating flexible buttons using Photoshop shapes and styles

47. Web Badges: Video Tutorial

Web 2.0 Layouts, Gradients, Headers

48. Design a Web 2.0 tab with Photoshop

49. PXLGFX- Perfect Pixel Patterns

50. A Gradient Tutorial

51. Banner Navigation Tutorial

52. Shadowness / Tutorials - Website Header Tutorial #3 by Rinn

53. Shadowness / Tutorials - Professional Looking Website Header by Rinn

54. Sleek and Spicy website header Tutorial

55. Vista Style Layout - Talk Mania Forum

56. Web 2.0 "STYLE" web layout - Free Psd

57. Web 2.0 Layout - Tutorial Kit

58. Web 2.0 template tutorial

59. Irish Content Box Tutorial

60. Web 2.0 Design Kit | Photoshop Lab

61. Web 2.0 Design Kit, Part 2 | Photoshop Lab

Web 2.0 Round-Up

62. Web 2.0 Colour Palette

63. The Web 2.0 Secret Weapon - Thoughts and errata from Miles Burke.

64. Great Fonts for Web 2.0

65. The visual design of Web 2.0

66. Web 2.0 how-to design style guide

67. Disenar a lo Web 2.0, la lista definitiva

68. Tutorials - Search for Tutorials - Pixel2Life

Comments