Web 2.0 Webdesign-Tutorials

von | 19. Februar 2007 | 194 Kommentare |

Tags: , ,

Werbung

Über den neuen “Web 2.0 – Look” moderner Web-Auftritte wird immer noch viel und gern geschrieben und diskutiert. Badges, Verlauffarben, Schaltflächen und sind genauso wie Schatten und Spiegeleffekte in aller Munde. Wenn es aber um ein konkretes Design einzelner Web 2.0-Elemente geht, kann es nicht schaden, eine Auswahl entsprechender Tutorials in Reichweite zu haben – zum Nachschlagen und zur Inspiration. Hier ist die ultimative Zusammenstellung. Siehe auch im Dr. Web Shop: Vitaly Friedmans: Praxisbuch Web 2.0

Verschiedene Links und deren Abbildungen, die es nicht mehr gibt, wurden inzwischen entfernt (05.01.2008).

1. Three girls posing in the night Illustration – Adobe Photoshop – Adobe Graphic Design Software

Photoshop Tutorial - Three girls posing in the night Illustration - Adobe Photoshop - Adobe Graphic Design Software

2. Adobe Software – Adobe Photoshop

Photoshop Tutorial - Adobe Software - Adobe Photoshop

3. Adobe Software – Adobe Photoshop

Photoshop Tutorial - Adobe Software - Adobe Photoshop

4. Create a software box – Photoshop Tutorial

Photoshop Tutorial - Create a software box - Photoshop Tutorial

5. Programming the web – Retro lines in photoshop?

Photoshop Tutorial - Programming the web - Retro lines in photoshop?

6. Splash Page Tutorial | Designphase – Web Design Tutorials

Photoshop Tutorial - Splash Page Tutorial | Designphase - Web Design Tutorials

7. Gradient Styles & How To Make Dashes – Photoshop Tutorial | PhotoshopSupport.com

Photoshop Tutorial - Gradient Styles & How To Make Dashes - Photoshop Tutorial | PhotoshopSupport.com

8. Creating a page curl in Photoshop

Photoshop Tutorial - Veerle\'s blog | Creating a page curl in Photoshop

9. Creating patterns in Photoshop CS2

Photoshop Tutorial - Veerles blog | Creating patterns in Photoshop CS2

11. Adobe Software – Adobe Photoshop

Photoshop Tutorial - Adobe Software - Adobe Photoshop

Logo-Gestaltung

12. Jelly Remake – Tutorials 2.0

Photoshop Tutorial - Jelly Remake - Tutorials 2.0

13. Web 2.0 Style Logo

Photoshop Tutorial - Web 2.0 Style Logo

14. PXLGFX- Polished Text

Photoshop Tutorial - PXLGFX- Polished Text

16. Learn to create your own Web2.0 Logo

Photoshop Tutorial - Nicora | Articles | Learn to create your own Web2.0 Logo

17. How to create a WEB 2.0 style logo

Photoshop Tutorial - DreamDealer v4.0 - How to creat a WEB 2.0 style logo

20. Web 2.0 Logo

Photoshop Tutorial - FX Designing :: Tutorials :: Web 2.0 Logo

22. Pimp My Ride – Logo

Pimp My Ride - Logo

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

Photoshop Tutorial - The Logos of Web 2.0 | The FontFeed at FontShop

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

Photoshop Tutorial - Flickr Photo Download: LOGO2.0 part I and II

Text-Effekte

26. Custom Chrome Text Effect

Photoshop Tutorial - Photoshop Tutorials Af?A,> Custom Chrome Text Effect Af?A,> TipClique Tutorials

27. Photoshop Reflections

Photoshop Reflections

28. THE SHINY FLOOR EFFECT so fresh and so clean web2.0

Photoshop Tutorial - THE SHINY FLOOR EFFECT so fresh and so clean web2.0 - yummy

29. 3D Text Professional Tutorial

3D Text Professional Tutorial

30. Text Kerning

Text Kerning

31. The Glossy TEXT web2.0 style

Photoshop Tutorial - The Glossy TEXT web2.0 style AfA'Ac?A!Af?A,< photoshopit

32. Photoshop Tutorials: Texteffect

Photoshop Tutorial - Photoshop Tutorials

33. Web 20 Shiny Floor Effect – video tutorial

Photoshop Tutorial - Web 20 Shiny Floor Effect - video tutorial

Badges

35. Create a Shiny Badge – Photoshop Tutorial

Create a Shiny Badge - Photoshop Tutorial

36. Supermarket Stickers Tutorial – Visualdesigncore.com

Photoshop Tutorial - Supermarket Stickers Tutorial - Visualdesigncore.com

37. Web2.0 Badges

Web2.0 Badges

38. Glossy web 2.0 badge with rounded corners

Photoshop Tutorial - Psd of the day - Glossy web 2.0 badge with rounded corners. AfA'Ac?A!Af?A,< photoshopit

39. A Glossy Starburst Tutorial

A Glossy Starburst Tutorial

Buttons

40. Badge ‘n Button | Designphase – Web Design Tutorials

Photoshop Tutorial - Badge \'n Button | Designphase - Web Design Tutorials

41. Toxiclab.org – Photoshop – Web buttons tutorial

Photoshop Tutorial - Toxiclab.org - Photoshop - Web buttons tutorial

42. Photoshop Buttons Create glossy button for web 2.0 Tutorial

Photoshop Tutorial - Photoshop Buttons Create glossy button for web 2.0 Tutorial

43. Web 2.0 style buttons

Web 2.0 style buttons

44. Glossy Button Video Tutorial and PSD

Photoshop Tutorial - Glossy Button Video Tutorial and PSD

45. Creating flexible buttons using Photoshop shapes and styles

Creating flexible buttons using Photoshop shapes and styles

46. Web Badges: Video Tutorial

Photoshop Tutorial - Created by Camtasia Studio 3

Web 2.0 Vorlagen, Verlauffarben und Layouts

47. Design a Web 2.0 tab with Photoshop

Photoshop Tutorial - Design a Web 2.0 tab with Photoshop

48. PXLGFX- Perfect Pixel Patterns

Photoshop Tutorial - PXLGFX- Perfect Pixel Patterns

49. A Gradient Tutorial

Photoshop Tutorial - A Gradient Tutorial 9rules Network Official Blog

50. Banner Navigation Tutorial

Photoshop Tutorial - SigTutorials.com - The best Signature Tutorials!

53. Sleek and Spicy website header Tutorial

Photoshop Tutorial - Sleek and Spicy website header Tutorial

54. Vista Style Layout – Talk Mania Forum

Photoshop Tutorial - Vista Style Layout - Talk Mania Forum

55. Web 2.0 “STYLE” web layout – Free Psd

Photoshop Tutorial - Web 2.0 Layout

56. Web 2.0 Layout – Tutorial Kit

Photoshop Tutorial - Web 2.0 Layout - Tutorial Kit

57. Web 2.0 template tutorial

Photoshop Tutorial - Adobe photo shop tutorials and downloads brought to you by Photoshopdepot.com - | Web 2.0 template tutorial

58. Irish Content Box Tutorial

Photoshop Tutorial - UPUP Media :: Media :: Photoshop Tutorials :: Irish Content Box Tutorial

59. Web 2.0 Design Kit | Photoshop Lab

Photoshop Tutorial - Web 2.0 Design Kit | Photoshop Lab

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

Photoshop Tutorial - Web 2.0 Design Kit, Part 2 | Photoshop Lab

Web 2.0 – Was es sonst noch gibt…

61. Web 2.0 Colour Palette

Photoshop Tutorial - Web 2.0 Colour Palette

63. Great Fonts for Web 2.0

Photoshop Tutorial - Great Fonts for Web 2.0

64. The visual design of Web 2.0

The visual design of Web 2.0

65. Web 2.0 how-to design style guide

Photoshop Tutorial - Web 2.0 how-to design style guide

67. Tutorials – Search for Tutorials – Pixel2Life

Photoshop Tutorial - Tutorials - Search for Tutorials - Pixel2Life

68. Free tutorial pdf downloads – Photoshop Tutorial

Photoshop Tutorial - Free tutorial pdf downloads - Photoshop Tutorial

Weitere Beiträge:

Über Vitaly Friedman

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.
Alle Beiträge von Vitaly Friedman ansehen →

, ,

194 Kommentare zu Web 2.0 Webdesign-Tutorials

  1. Webdesign Wien 13. August 2011 at 18:03 #

    Hey, vielen Dank für die gute Zusammenstellung.
    Auch wenn ich keinen direkten Zusammenhang zum “2.0″ Bereich sehe. Aber die Definition ist ja eh obsolet :-)

    Antworten
  2. seotrop 30. November 2011 at 10:57 #

    Super Tutorials! Vor allem die bekannten Logos nachzumachen zu können, ist sehr interessant!

    Antworten
← Older Comments

Trackbacks

  1.   60个Web2.0风格教程 by Web2.0 - 16. Juli 2007

    [...] [点击进入] [...]
  2. La web 2.0 llega a los usuarios » Innova Desarrollos informáticos - 19. Juli 2007

    [...] -Tropecientos tutoriales de generación de imágenes web 2.0 con Adobe Photoshop [...]
  3. Risorse web 2.0 « Cosa importa se…. - 24. Juli 2007

    [...] web 2.0 Tutorial sparsi per la rete.Un complimento all’autore della [...]
  4. Recursos y utilidades para diseñar un blog al estilo web 2.0. « Cosas sencillas - 26. Juli 2007

    [...] Tutoriales de diseño web 2.0 por Dr. Web. [...]
  5. Tutoriaux web 2.0 - 26. Juli 2007

    [...] Drweb Cette liste ressemble à la précédente. [...]
  6. Newton Calegari - Blog - 2007 » Blog Archive » Lista de Tutoriais 2.0 - 26. August 2007

    [...] Link dos tutoriais [...]
  7. Sebastian Van Sande » Blog Archive » links for 2007-09-01 - 1. September 2007

    [...] Web 2.0 Webdesign-Tutorials » Webdesign, Web 2.0 A collection of web2.0 design tutorials (tags: web2.0 art design webdesign development webdev photoshop fonts color tutorial howto reference) [...]
  8. Digital Noise - news for geeks (Hi-tech + Digital Design + Web 2.0) - 3. September 2007

    [...] Smashing Magazine è un sito pieno di risorse per grafici e webdesigners. L’autore del sito ha realizzato anche questa raccolta di tutorial di Photoshop. [...]
  9. Thunder-Boy » Blog Archive » Web 2.0 - Webdesign Tutoriais - 5. September 2007

    [...] Dr. Web é um site que faz a catalogação de diversos tutoriais para a criação de conteúdo  a lá Web 2.0. [...]
  10. Dr. Web Weblog | ravedì.it - 18. September 2007

    [...] un link che avevo messo nei preferiti parecchio tempo fa. Sono info utili per chi vuole pasticciare con la [...]
  11. Billaud.net » Des tutos pour réussir dans le Web 2.0 - 27. September 2007

    [...] tutos pour réussir dans le Web 2.0 Un billet qui a déjà quelques semaines, mais sur drweb.de vous pouvez trouver 68 tutoriaux sur le Web 2.0. (UK) Filed under : Non classéBy Alexandre [...]
  12. Web2.0 oder nicht? » Beitrag » GeT4 - blogt - 27. September 2007

    [...] Alle Designmerkmale ála Web2.0 findet ihr HIER. [...]
  13. Bazaar Designs » 68 Adet Web2.0`lık Tasarım - 3. Oktober 2007

    [...] Burada Web2.0 terimi ile karşımıza çıkan hoş görsel tasarımlarla ilgili 68 farklı uygulamanın nasıl yapıldığına dair oldukça güzel bir derleme yer alıyor. [...]
  14. [Layout erstellen]Adobe Photoshop CS2 - html.de Forum - HTML f - 14. Oktober 2007

    [...] z.B. ? Galileo Design :: Adobe Photoshop CS2 professionell Schau auch mal hier … Web 2.0 Webdesign-Tutorials | Webdesign, Web 2.0 Gru
  15. Recursos y utilidades para diseñar un blog al estilo web 2.0. « Studio Creative Weblog - 23. Oktober 2007

    [...] Tutoriales de diseño web 2.0. [...]
  16. Tom’s Webbox » Blog Archive » Web 2.0 Logo Generator - 24. Oktober 2007

    [...] einen typischen Web 2.0 Schriftzug zu erstellen. Wem das noch nicht genug Web 2.0 ist, findet bei Dr. Web noch einen Haufen [...]
  17. diogomoura´s » links for 2007-10-31 - 31. Oktober 2007

    [...] Web 2.0 Webdesign-Tutorials | Webdesign, Web 2.0 | Dr. Web Weblog (tags: 2 adobe aggregator ajax art blog code color howto graphics tutorials tutorial design photoshop webdesign web2.0) [...]
  18. Dr. Web - 3. November 2007

    [...] http://www.drweb.de/weblog/weblog/?p=780. sind viele Tutorials für gutes Webdesig [...]
  19. Plantillas para Blogger, recursos y herramientas » Recursos y utilidades para diseñar un blog al estilo web 2.0. - 18. November 2007

    [...] Tutoriales de diseño web 2.0 por Dr. Web. [...]
  20. Web 2.0 effecten « Multimedia ontwerp - 10. Dezember 2007

    [...] Tegenwoordig wordt veel gebruik gemaakt van de web 2.0 effecten. Web 2.0 is een nieuwe manier van websites maken waarbij de gebruiker meer interactiviteit heeft met het web. Ook grafisch ziet dit er anders uit met dus de zogenaamde web 2.0 effecten. Deze effecten zijn vaak glinsteringen en spiegelingen in buttons en tekst. Ik heb een leuke site gevonden waar tutorials op staan van veel van dat soort effecten. Bekijk ze hier! [...]
  21. Adobe Photoshop Tutorials - 13. Januar 2008

    [...] Web 2.0 Webdesign-Tutorials | Dr. Web Weblog [...]
  22. links for 2008-01-18 - 18. Januar 2008

    [...] Web 2.0 Webdesign-Tutorials | Webdesign, Web 2.0 | Dr. Web Weblog (tags: webdesign web2.0 photoshop design tutorials) [...]
  23. フワフワ腐ログ » Web2.0 風なロゴが欲すぅぃ〜… - 26. Januar 2008

    [...] 今、使っているWordPressのTheme(テンプレート)は見てのとおりBlogの題名が表示されない。Themeの中身(ヘッダー)を見てみると、ブラウザの上部に表示される題名のコードと、左上のロゴが「もしも」無い場合に代わりに題名が表示されるようになってるだけで、しかも、その表示されているロゴもこのテンプレを作った人のテーマのロゴでこの「フワフワ腐ログ」のものでは無いときたもんだ…そんな訳で、まぁ、大した名前でも無いケド、やはり題名が載ってないってのは「Blog」としては如何せん寂しいものなので、どんどん忙しくはなっているけれど、この腐ログのロゴでも作ってみようかと、血迷ってみた今日この頃の村人ですが、皆さんは潤い足りていますか？ともあれ、オイラは正直、デザインの「デ」の字も知らぬ超初心者。中学の美術の成績も目を覆うレベル(笑)。しかもフォトショなぞ触った事もない…ってことで、ロゴの構想は紙に書いて考え中ですが、まずはフォトショを弄くってみる事にしてみた。そこで、今回はフォトショの「教本」ともなるべきBlogの記事「Web 2.0 Webdesign-Tutorials　(Dr. Web Weblog)」を参考にしつつ、適当にロゴを作ってみた(ロゴと言ってもABCじゃ話にもならないけど… )。いやはや、初めて使うフォトショは判らん事だらけでした。しかし、この参考にした記事は、色々と細かい説明が多々載っていたので、なかなか参考になりました。これからWeb-designをやってみようと考えてる人や、オイラの様に一時的にフォトショ弄くってみようって人にはかなりお勧めの記事ですね。しかし、次はもうちょい「まとも」なロゴを作ってみたいと心に誓う今日この頃の村人でした。いやはや、この腐ログのロゴが完成するのはいつになるやら(爆)。ではでは〜。PS:ところで、この「Web 2.0 (wikipedia)」って言葉だけど、ウィキペディアで調べて、記事を読んでもイマイチ、意味が判らないですね…(苦笑) [...]
  24. Robin’s Blog» Blog Archive » 20 Photoshop Tutorial Sites - 3. Februar 2008

    [...] effects, wedding, old effects, and other miscellaneous techniques. There are links to some great Web 2.0 Webdesign-Tutorials at Dr. Web Weblog. Design Phase has created some really nice Photoshop tutorials for creating [...]
  25. links for 2008-02-13 | Tom Arnold - 13. Februar 2008

    [...] Web 2.0 Webdesign-Tutorials | Webdesign, Web 2.0 | Dr. Web Weblog (tags: ajax art blog code colors design webdesign web2.0 photoshop tutorial tutorials graphics howto) [...]
  26. Burad’s Blog » Blog Archive » Improving interactivity with Javascript - 24. Februar 2008

    [...] link[ ] DailyBlogTips > Web 2.0 Webdesign Tutorials Related post [...]
  27. Danilo’s Blog » Grafica web 2.0 - 28. Februar 2008

    [...] Web 2.0 Webdesign-Tutorials [...]
  28. Homepage erstellen mit Photoshop CS - Photoshop @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe - 29. Februar 2008

    [...] lesen, sonst nix lernen: How to Slice?: Slice 1 Slice 2 How can I use Photoshop for the Web? Photshop-Webdesign 1 Photoshop-Webdesign 2 Photoshop-Webdesign 3 Forenbeitr
  29. Tutorial per Web 2.0 « iboi’s blog - 14. März 2008

    [...] Tutorial per Web 2.0 Pubblicato il Marzo 14, 2008 di iboi Oggi vi segnalo un ottima raccolta di tutorial per creare dei simpatici effetti stile 2.0 Ad esempio delle semplici Splash page 2.0, scritte e loghi con riflessi, badge etc etc Buon divertimento!! Ciao Ciao Tutorial Photoshop [...]
  30. Web 2.0 Webdesign-Tutorials | Photoshop, Tutorial, Tutorials, Design, Adobe, Logo | Dr. Web Weblog - 21. März 2008

    [...] Web 2.0 Webdesign-Tutorials | Photoshop, Tutorial, Tutorials, Design, Adobe, Logo | Dr. Web Weblog Uncategorized [...]
  31. iamdave » construct - 31. März 2008

    [...] For designers, Web 2.0 is just a style backed by a misguided trend. Colorful fonts, gradients, badges, the phrase “beta”, etcetera. How else do you explain a collection of Web 2.0 tutorials, all of which require Photoshop? [...]
  32. Web 2.0 Logo Generator « Tom’s Webbox - 1. April 2008

    [...] zu erstellen. Wem das nicht individuell genug ist, der kann sich vielleicht mit den Tutorials von Dr. Web [...]
  33. Définition de Webdesign2.0 | Blog sur L'actualité Multimédia du Web2.0 - 7. Juli 2008

    [...] fait des recherches sur Google et d’autres moteurs de recherche et je vous ai trouvé ceci : drweb.de qui illustre très bien le webdesign2.0 en se servant des logos et des chartes [...]
  34. MyBackgrounds Blog » Blog Archive » A Massive List of Web 2.0 Tutorials - 10. September 2008

    [...] Web 2.0 Webdesign-Tutorials at drweb.de is a huge list of tutorials for Web 2.0 design techniques. If you’re still trying to figure out how to make it glossy, shiny or reflective you’ll find a tutorial here. [...]
  35. Fabse-on-Blog» Blogarchiv » Hilfe für “Web 2.0 Design” - 12. September 2008

    [...] habe ich eine Liste von Tutorials gefunden, die einem Zeigen, wie man bestimmte Effekte leicht [...]
  36. i@mdamienl's Blog » Web 2.0 Resources - 10. Dezember 2008

    [...] Web 2.0 Resources Share and Enjoy: [...]
  37. ウィズダム・デザイン » Blog Archive » Web 2.0 Webdesign-Tutorials - 17. Dezember 2008

    [...] Web 2.0 Webdesign-Tutorials 木曜日, 12 月 18th, 2008 | Author: wisdom http://www.drweb.de/magazin/web-20-webdesign-tutorials/ Tags: Photoshop, デザイン, ネタ Category: 未分類 You can follow any responses to [...]
  38. Webdesign Tutorials Dr Web Web 2.0 | Webdesign Frankfurt und Programmierung im Web - 9. März 2009

    [...] http://www.drweb.de/magazin/web-20-webdesign-tutorials/ [...]
  39. Links der Woche IV - MySQL, Workbench, Webseminar, Twitter, Adobe, Durchaus - Guido Mühlwitz - 28. Mai 2009

    [...] Web 2.0 Webdesign-Tutorials Durchaus schon etwas älter, aber hervorragend zu gebrauchen! [...]
  40. Ganz viel Photoshopzeugs « Fundstücke im Netz - 14. November 2010

    [...] Link: http://www.drweb.de/magazin/web-20-webdesign-tutorials/ [...]
  41. Beschränkung ist Erfolgreich | LINKING ONLINE TO OFFLINE | birgerh.de - 1. Februar 2011

    [...] Beschränkung als Erfolgsfaktor. Formale Regeln, die ein Vorgehen erzwingen. Neue Ideen notwendig machen. Eine Regel: Wenige, klare Nachrichten werden in großen Lettern kommuniziert. Ergebnis sind erfolgreiche Web 2.0 Webseiten. [...]
  42. The best logo design - Page 2 - Webmaster Forum - 9MB.com - 1. Februar 2011

    [...] Might be helpful – take a look at this page for some inspiration on Web 2.0 logo designs: Web 2.0 Webdesign-Tutorials | Dr. Web Magazin __________________ DSL Anbieter [...]

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free