3 schnelle und coole Effekte mit Photoshop

  • von Lennart Prange

thumb Ein Photoshop Tutorial habe ich euch lange nicht mehr geboten. Davon gibt es eigentlich auch genug im Web. Trotzdem habe ich in diesem Beitrag 3 Stück zusammengeworfen. In der Hoffnung, dass ich euch ein paar neue Techniken zeigen kann, bringe ich euch hier 3 verschiedene Effekte bei. Vielleicht könnt ihr ja noch etwas praktisches lernen?!

Alle Tutorials sind mit recht wenig Schritten geschafft, sind aber trotzdem sehr gut auf Webseiten einsetzbar und enthalten verschiedene Techniken, die jeder kennen und gebrauchen sollte.

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Beitrag.

#1 – Button

Schritt 1

Erstellt als erstes ein neues Dokument mit einer Größe von 100px*50px und weiß als Hintergrund. Dann drückt ihr [d], um die Vordergrundfarbe auf schwarz zu stellen. Nun aktiviert ihr das “abegerundetes-rechteck-werkzeug” und stellt einen Radius von 5px ein.

1

Schritt 2

Jetzt zieht ihr das Rechteck auf. Es sollte nicht das ganze Dokument füllen.

2

Schritt 3

Nun erstellt ihr eine neue Ebene und drückt [x], um die Vorder -und Hintergrundfarbe zu vertauschen. Nun wählt ihr das Auswahlrechteck-Werkzeug und zieht eine Auswahl über das halbe Dokument auf. Dann benutzt ihr [alt]+[entf] um die Auswahl mit weiß zu füllen.

3

Schritt 4

Drückt nun mit gedrückter [strg] Taste auf das Masken Symbol der Form. Also dieses Ding:

4

Nun sollte die Form ausgewählt sein:

4_2

Stellt sicher, dass die oberste Ebene aktiviert ist. Dann klickt ihr auf Ebenenmaske hinzufügen in der Ebenenpalette und regelt die Deckkraft der Ebene auf 20% runter.

4_3 4_4

Schritt 5

Wie eben klickt ihr nun mit gedrückter [strg] Taste auf das Maskensymbol der Form. Dann geht ihr auf Auswahl -> Auswahl verändern -> Auswahl verkleinern und gebt 1px ein. Bestätigt jetzt mit OK. Erstellt nun eine neue Ebene und geht auf Bearbeiten -> Kontur füllen. Stellt bei Breite 1px ein, bei Farbe wählt ihr weiß, bei Position Mitte und bei Deckkraft 50%. Bestätigt dann mit OK und drück [strg]+[d] um die Auswahl aufzuheben.

5

Schritt 6

Jetzt wählt ihr das Radiergummi-Werkzeug aus und stellt einen Pinsel mit der Größe von 100px und der Härte von 0% ein.

6

Stellt jetzt sicher, dass die oberste Ebene aktiv ist und fangt dann von unten an zu radieren. So weit hoch wie ihr wollt. Die weiße Kontur sollte Stück für Stück verschwinden.

6_2

Fertig

Das wars. Ich habe den Button noch beschriftet (Font: MyriadPro) und die Deckkraft der 3. Ebene (von unten) etwas verringert.

final

#2 – Lichteffekt im Hintergrund

Schritt 1

Öffnet ein neues Dokument mit der Größe von 400px*100px. Die Hintergrundfarbe bleibt weiß. Dann stellt ihr als Vordergrundfarbe ein dunkles Grau (#333333) ein und benutzt [alt]+[entf] um die Hintergrundebene mit dem Grau zu füllen.

1

Schritt 2

Nun geht ihr auf Filter -> Renderfilter -> Beleuchtungseffekt und übernehmt Werte und positionierung von meinem Bild.

2

Bestätigt nun mit OK.

Schritt 3

Jetzt könnt ihr entweder aufhören (der Effekt ist ja eigentlich schon ganz gut) oder noch ein wenig weitermachen. Ich habe nun eine Ebene erstellt und mit dem Auswahlrechteck-Werkzeug eine auswahl über die halbe Höhe und die gesamte Breite des Dokuments aufgezogen. Dann habe ich als Vordergrundfarbe weiß eingestellt und die Auswahl mit [alt]+[entf] gefüllt. Mit [strg]+[d] müsst ihr dann die Auswahl aufheben.

3

Schritt 4

Nun aktiviert ihr das Verlaufswerkzeug. Ihr klickt oben links auf die Verlaufsminiatur und erstellt den folgenden Verlauf:

4

Dann bestätigt ihr mit OK.

Schritt 5

Jetzt bekommt die weiße Ebene wieder eine Ebenenmaske indem ihr auf Ebenenmaske hinzufügen klickt.

5

Jetzt benutzt ihr das Verlaufswerkzeug und zieht einmal über die gesamte Breite. Dann regelt ihr die Deckkraft der Ebene auf 10% runter.

Fertig

Das wars auch schon wieder.

final

#3 – Schwarze Silhouette auf farbigem Hintergrund

Schritt 1

Öffnet ein Bild eurer Wahl. Klickt doppelt auf die Hintergrundebene und bestätigt mit OK.

1

Dann klickt ihr auf Ebene -> Neue Einstellungsebene -> Schwellenwert. Benennt die Ebene wie ihr wollt und bestätigt mit OK. Dann verschiebt ihr den Regler bis das Schwarz/Weiß Bild einigermaßen gut aussieht. Der Hintergrund sollte weiß sein.

1_1

Dann bestätigt ihr mit OK.

Schritt 2

Geht jetzt auf Ebene -> Sichtbare Ebene auf eine reduzieren. Jetzt habt ihr nur noch eine Ebene. Den Modus dieser Ebene stellt ihr auf Multiplizieren.

2

Nun erstellt ihr eine neue Ebene und zieht sie unter die andere.

2_2

Jetzt stellt ihr als Vordergrundfarbe irgendwas ein, ich habe #008aca genommen, und füllt die Ebene mit [alt]+[entf].

3

Fertig

Ich habe als Hintergrund jetzt noch einen Verlauf genommen. Das sieht besser aus.

final

13 Kommentare

  1. Ohrflieger
    1. Juni 2009 um 12:26 Uhr

    Drei schnelle und einfache Effekte, die meiner Meinung nach zu den Grundlagen gehören… wird aber sicherlich für den einen oder anderen hilfreich sein.

    • Lennart Prange
      1. Juni 2009 um 12:42 Uhr

      Jo, sind Grundlagen. Die sind aber so leicht, dass sie von den bekannten Blogs gar nicht mehr gezeigt werden. Ich hoffe, dass ich eine Marktlücke gefunden habe 😉

  2. shuffl3
    1. Juni 2009 um 12:52 Uhr

    Sieht für mich wie Rohmaterial aus. Ein ausführlicheres Tutorial zu einem dieser Punkte wäre meiner Meinung nach interessanter und würde auch besser das Niveau dieses Blogs widerspiegeln.
    Letztendlich hätten auch jene, an die sich dieses Tutorial richtet, mehr davon, denn man will ja schließlich wissen, wie man den Feinschliff hinbekommt.
    Im Moment hats den Anschein als wäre der Artikel durch Zwang irgendetwas zu posten entstanden 😉

    Zum Artikel selbst: Gut geschildert, viele Bilder, sehr verständlich, allerdings hätte man hier und dort noch einwenig die Einstellungen erklären können, damit man nicht die Werte direkt übernehmen muss und für später weiß, wie sich was verhält.

    • Lennart Prange
      1. Juni 2009 um 13:06 Uhr

      Danke. Ich werde deine Kritik mal aufnehmen und beim nächsten Tutorial berücksichtigen.

      Der Beitrag ist nicht aus Post Zwang entstanden (ich hab genug andere Beiträge fertig). Der Beitrag ist eher entstanden, weil ich mal wieder ein Photoshop Tutorial veröffentlichen wollte und eigentlich keine Lust dazu hatte 😀 Das Verfassen kostet doch immer sehr viel Zeit und so wertvoll sind diese Beiträge fast nie. Die guten Effekte werden eh schon von den großen Blogs besprochen und für Webdesigns kann man die zum größten Teil eh nicht gebrauchen. Deswegen diesmal nur 3 Basics, die man aber immer mal wieder anwenden kann.

      • shuffl3
        1. Juni 2009 um 14:01 Uhr

        Naja, das stimmt nur beding. Es gibt viele Effekte die sich bestens für Webdesigns eignen. Als Beispiel muss man nur mal “Buttons” betrachten. Sie können Effekt und Nützlichkeit für Webdesigns vereinen 😛

        Hier mal ein kleines Beispiel für eine Art Button, wie man ihn im Tutorial hätte darstellen können. http://shuffl3.com/Bilder/button.png

        .. und zum Wert der Beiträge. Da muss man sich eben ein bisschen Zeit nehmen. Endweder man lässt es, oder man verteilt sich die Arbeit auf mehrere Tage, sodass am Ende immer ein qualitativ hochwertiger Artikel herauskommt, aber so halbe Sachen würde ich vermeiden. Ich meine, ich lese lieber weniger, aber dafür bessere Artikel, als viele, die mich aber nicht weiterbringen 😉

  3. Alex B.
    1. Juni 2009 um 13:09 Uhr

    Huh, ein PS Tutorial? Hier hätte ich damit echt nicht gerechnet. 🙂 Sind aber echt absolute Grundlagen. Die Frage ist, ob wirklich so viele “Anfänger” hier vorbei kommen. Sonst sind die meisten Artikel ehe für Fortgeschrittene. 😉

  4. JPanther
    1. Juni 2009 um 15:43 Uhr

    Die ersten zwei Arbeiten finde ich optisch gelungen. Das Bild mit dem Leuchtturm spricht mich allerdings nicht so an.

    Mittlerweile nutze ich PS nur noch als Portable Version. Ich verwende es nur gelegentlich und will es nicht auf meinen drei Rechnern installieren.

  5. X.ea
    3. Juni 2009 um 08:01 Uhr

    Der Button gefällt mir recht gut, kann ich auch gut gebrauchen. 😉 Auch der Lichteffekt für den Hintergrund macht was her. Aber der Leuchtturm will mir garnicht gefallen. Ist meiner Meinung nach doch etwas sehr pixelig. 😉 Ansonsten ist alles verständlich erklärt. Danke!

  6. Mammut Medien
    18. Oktober 2010 um 10:56 Uhr

    Kann mich JPanther und X.ea nur anschließen. Die ersten beiden Effekte sind gelungen aber der Leuchtturm sieht einfach unsauber aus. Aber es ist alles soweit verständlich geschrieben und man kann die Effekte im Handumdrehen nachbauen. Also hat das Tutorial seinen Zweck erfüllt.

  7. Bob
    5. Februar 2012 um 19:17 Uhr

    Ich finde solche Grundlagen immer ganz interessant, da ich Photoshop DAU bin und einige Dinge einfach zu umständlich umsetze.

    Also danke für die netten Tuts.

  8. katja
    21. März 2012 um 01:24 Uhr

    Also das ist doch mal ein echt genialer Trick, ich hab den auch direkt ausprobiert und siehe da … ich kanns doch glatt. Vielen Dank!!!!!!!!!!!

  9. Sabine M
    18. Juni 2012 um 23:45 Uhr

    Super vielen dank, wieder was gelernt. Echt interessant mit dem Schwellenwert nur müsste da noch ein bisschen genauer gearbeitet werden. Den Lichtschein auf dem “Boden” find ich richtig gut gelungen und einfach nachvollziehbar. Hab ich gleich hinbekommen 😉 Viele Grüße Sabine

  10. Max
    3. Juli 2012 um 22:46 Uhr

    Ich finde es gelungen. Auch wenn es sich tatsächlich um Grundlagen handel. Aber als unbedarfter Anfänger kann man die eben auch mal gebrauchen.
    Mir als Anfänger bringt alleine die Vorstellung der ganzen Funktionen schon einen Nutzen. Also Danke dafür. 🙂
    Gruß, Max