Vitaly Friedman 19. Februar 2007

Web 2.0 Webdesign-Tutorials

Kein Beitragsbild

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten....

Ü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

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.

195 Kommentare

  1. Wenn einmal eine schönes Webdesign gefunden wurde besteht kein Grund für ständiges Redesign. Wichtiger als das Webdesign ist die Suchmaschinenoptimierung und ein vernünftiges CMS, wie zum Beispiel WordPress, zur Verwaltung der Seite.

    schöne Grüsse aus Zürich in der Schweiz,
    euer Kurt.

  2. Unglaubliche 5 Jahre später ist das Design der Web 2.0 Ära immer noch auf manchen älteren Webseiten anzutreffen – ein sicheres Zeichen für ein anstehendes Redesign. 🙂
    Wir für unseren Teil haben die glänzenden Verläufe und Schatten hinter uns gelassen und sind ganz froh über die derzeitigen Minimalismus- und Responsive-Trends.

  3. WOW, das ist wirklich eine klasse Sammlung, auch für gestandene Webdesigner! Manchmal sitzt man als Kreativer auch da und überlegt, wie dass denn nochmal ging… DANKE, wird gebookmarkt! 🙂

  4. Pingback: Dr. Web
  5. Tolle Sammlung
    Wir haben in der Vergangenheit und werden auch in Zukunft hier immer wieder stöbern, da es extrem gute Ideen liefert.
    Web 2.0 ist eben mal die Zukunft
    Gruss
    klaus

  6. Sehr interessanter Artikel. Allerdings finde ich das „Web 2.0“ nicht passend dafür – diese Art von Design gab es auch vorher schon, nunja trotzdem schöner Beitrag! Weiter so.

  7. Pingback: Tutoriaux web 2.0
  8. Da suche ich schon seit langem im Netz herum, statt gleich bei Dr Web nach zuschauen! Aber von jetzt an werde ich zuerst bei Euch schauen! Ein großes Lob für eure Arbeit!

    Grüße
    Cosmo

  9. What a great collection!
    Thank you guys very much for that master piece.
    This resource offers a broad audience tools to
    put their creativity to a new level. The only
    dangerous thing is that some people don´t use
    this as an inspiration but as a copy & paste
    thing.

    Anyway … very good work, will post this on my blog
    (after redesigning) 😀

    @Look At the ripper
    I guess Sven Lennartz will thank you for the information,
    but if you would had read the article he linked
    than you would know that this is no duplicated
    content. Smashing Magazine is another project of Sven,
    Chris and others … and its in any case fully legal
    to translate content to reach other recipients.

    just my 2 cents 😉

  10. Diese Sammlung ist eine Goldgrube par excellence. Wie viele Stunden wurden allein für die Recherche aufgewendet und jetzt… Jetzt haben wir eine gigantische Informationsquelle und sind volkswirtschaftlich unproduktiv oder verursachen Beziehungsstress, nur weil auf dieser Seite eine geniale Anlaufstelle für Kreativität und deren Umsetzung vorfinden 😉

    Danke für diese geleistete Recherchearbeit aus Dresden.

    RALPH

  11. Pingback: meneame.net
  12. Sind ja ein paar ganz nette Tutorials dabei, aber ich Frage mich, was der Begriff „Web 2.0“ in der Überschrift zu suchen hat. Bis auf ein paar Buttons für RSS, o.ä. hat das nichts mit „Web 2.0“ zu tun. Der Begriff wird – Ob nun von den Tutorial-Autoren oder von Dr.Web – so inflationär gebraucht, daß auch meine Kaffeemaschine „Web 2.0“ beherrscht.

  13. Echt ne tole Sammlung an Tutorials zum Theme Webdesign. Allerdings ist manchmal weniger mehr. Oder zumindest ein paar Themen, die ihr dem Nutzer besonders ans Herz legen würdet 😉

  14. Pingback: www.blogmemes.net
  15. Pingback: 123 Blog

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.