Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Einen Strahlen-Effekt kann man wirklich häufig gebrauchen. Insbesondere im Webdesign wird die Technik häufig eingesetzt um Gestaltungselemente im Header zu betonen. Wie Ihr den Effekt in Sekunden umsetzt zeigt dieses Photoshop-Mini-Tutorial.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

photoshop-polarkoordinaten

Ausgangsmaterial

Legt eine neue Datei mit quadratischen Abmessungen an und erstellt auf einer neuen Ebene ein vertikales Linienmuster. In diesem Beispiel ist die Arbeitsfläche 500×500 Pixel groß. Die Linien sind 20 Pixel breit, die Abstände zwischen den Linien ebenfalls.

Wenn Ihr ganz schnell ein Linienmuster mit Hilfe von Photoshop erstellen wollt, so lest auch Photoshop-Tipp: Objekte mit gleichen Abständen positionieren

photoshop-polarkoordinaten

Polarkoordinaten-Filter anwenden

Nun öffnet Ihr über „Filter > Verzerrungsfilter > Polarkoordinaten“ den Polarkoordinaten-Filter und wählt im nun erschienenen Dialog „Rechteckig -> Polar“ aus. Anschließend bestätigt Ihr den Dialog. Das wars auch schon.

photoshop-polarkoordinaten
photoshop-polarkoordinaten

Wie Ihr seht wird der Strahlen-Effekt zum Zentrum hin ein wenig pixelig. Es empfiehlt sich also das Objekt immer größer anzulegen als eigentlich benötigt. Durch die Skalierung in Photoshop wird diese Verpixelung korrigiert.

Anwendungsbeispiel

Nehmt die gleiche Datei und zeiht auf der Hintergrundebene einen radialen Farbverlauf von #844a0e zu #2c0000 auf. Anschließend fügt Ihr über „Filter > Rauschfilter > Störung hinzufügen“ eine ganz leichte Körnung hinzu. Ich habe hier eine Stärke von 1% mit gaußscher Verteilung und monochromatischer Farbgebung eingestellt.
Zur Verdeutlichung habe ich in der folgenden Grafik die „Strahlen-Ebene“ ausgeblendet.

photoshop-polarkoordinaten

Nun wählt Ihr wieder die Strahlen-Ebene aus, reduziert die Deckkraft auf 15% und zeichnet die Ebene anschießend über „Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner“ nach Belieben weich.

photoshop-polarkoordinaten

Im letzten Schritt fehlt natürlich noch das Objekt was optisch betont werden soll. Ich habe hier mein Logo verwendet und über die Ebeneneffekte einen Schein nach außen und nach Innen hinzugefügt. Anschießend habe ich die Strahlen-Ebene kopiert und ein wenig gedreht.

photoshop-polarkoordinaten

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 11 Kommentare

  1. Fred
    schrieb am 15.01.2013 um 02:12 Uhr:

    sehr hilfreiches Tutorial… vielen Dank! :)

    Antworten
  2. Holger
    schrieb am 24.10.2012 um 14:55 Uhr:

    Sehr guter Ansatz – vielen Dank dafür!
    Zur Ergänzung vielleicht noch folgende Hinweise aus meiner Umsetzung für das nachträgliche Erstellen von „Sonnenstrahlen“ auf einem Foto:
    Einen sehr guten Strahleneffekt erzielt man, indem man nicht zuerst den Gaußschen, sondern den radialen Weichzeichner verwendet. Je nach beabsichtigtem Effekt macht es auch Sinn, die Linien in der Hilsdatei unterschiedlich breit und mit unterschiedlichem Abstand anzuordnen.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 24.10.2012 um 15:30 Uhr:

      Vielen Dank für die sehr hilfreiche Ergänzung!

      Antworten
  3. Günti
    schrieb am 06.03.2012 um 17:38 Uhr:

    Habe versucht das Beispiel mit PS CS 5 nachzuempfinden. Leider ohne Erfolg. Gibt es irgendwo eine tiefgreifendere Hilfe?
    Hinweis: Ich komme nur bis zur Erstellung der vertikalen Linien. Das Menü „Filter“ ist ausgegraut.
    Deshalb -> Hilfe!

    Antworten
  4. Photoshop-Tipp: Objekte mit gleichen Abständen positionieren | kulturbanause blog - Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um Webdesign und digitale Bildbearbeitung
    schrieb am 17.05.2011 um 22:38 Uhr:

    […] mein letztes Tutorial zum Strahleneffekt in Photoshop wurde im ersten Arbeitsschritt ein gleichmäßiges Linienmuster benötigt. In den Kommentaren kam […]

    Antworten
  5. Flowsen
    schrieb am 29.12.2010 um 12:58 Uhr:

    @Jonas Aaah, Trick 17 aus Kiste 9. Daran hatte ich garnicht gedacht. Danke.

    Antworten
  6. Flowsen
    schrieb am 29.12.2010 um 09:26 Uhr:

    Och, dass ja mal gut.
    Hab das sonst immer in Illustrator gemacht und dann via SO in PS eingefügt.
    So bleibt das Grundobjekt halt weiterhin „verlustfrei“ editibar.

    Aber ich finde deine PS Lösung geht auch recht fix und macht ein guten Eindruck.
    Wird gleich mal ausprobiert… *rödel, rödel*

    Öh, klappt! Was natürlich ein bisschen auffällt, ist durch die Verzerrung entstandene „Verpixelung“ zur Verjüngung hin. Wobei die ja bei dir mit dem Weichnzeichner korrigiert wird, right?!

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 29.12.2010 um 09:58 Uhr:

      @Flowsen: Da hilft der alte Photoshop-Trick: Groß erstellen, dann runterskalieren. ;)

      Antworten
  7. JoLau
    schrieb am 28.12.2010 um 01:01 Uhr:

    wie kann man einfach ein vertikales linienmuster machen?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 28.12.2010 um 09:58 Uhr:

      Die Linien in diesem Beispiel habe ich von Hand mit Hilfe einer Auswahl gezogen. Alternativ kannst du aber auch ein Muster anlegen und anschließend die Arbeitsfläche damit füllen. Du kannst auch mit Hilfe der Funktion “Verteilen” eine Ebenenduplikat gleichmäßig auf der Arbeitsfläche verteilen.

      Antworten
  8. Tobias
    schrieb am 27.12.2010 um 12:40 Uhr:

    Werde ich n00b heute mal ausprobieren, Danke Jonas :-)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: