Photoshop-Tutorial: Disrupted Film
Da ich einige Anfragen erhalten habe, wie ich in meiner Header-Grafik diesen Effekt einer abgeplatzten Folie erzeugt habe, will ich das Ganze mal in einem kleinen Tutorial erklären. Es ist eigentlich nicht sonderlich kompliziert, wenn man folgende Dinge parat hat:
- Photoshop (es genügt bereits Version 6.0, sogar mit Version 5.5 sollte es machbar sein).
– Das geniale Photoshop-Brush-Set PaperDamage von Joao Pombeiro. Für den Download ist die kostenlose Anmeldung bei Adobe Studio Exchange notwendig. Google hilft aber auch beim Finden anderer Quellen.
1. Ausgangsgrafik öffnen
Wir öffnen das zu bearbeitende Bild in Photoshop. Als Ausgangsmaterial kann man jede erdenkliche Grafik verwenden. Ich hab mal den Pütz gemacht und schon was vorbereitet:

2. Pinselspitze setzen
Wenn noch nicht geschehen, downloaden wir das oben genannte Brush-Set PaperDamage, öffnen es und wählen dann die Spitze Corner Burn aus. Als Vordergrundfarbe verwenden wir schönes reines Weiß und die Deckkraft des Pinsels sollte bei 100% liegen. Auf einer neuen Ebene klicken wir einmal kurz und knackig auf die Stelle an der der Effekt erscheinen soll. Je nach Bedarf kann der Effekt durch Verringen der Ebenen-Deckkraft variiert werden.

3. Schlagschatten hinzufügen
Damit die abgerissene Folie realitisch wirkt, muß der 3D-Faktor ins Spiel gebracht werden und das läßt sich am leichtesten mit einem Schlagschatten bewerkstelligen. Wir bleiben also auf der eben gewählten Ebene und rufen über Ebene -> Ebenenstil… -> Schlagschatten den entsprechenden Dialog auf. Im wesentlichen können zunächst die Grundeinstellungen verwendet werden, Distanz sollte allerdings auf 2 und Größe auf 3 gesetzt werden.

Natürlich ist es – wie fast immer – angebracht zu experimentieren. So sieht z.B. ein farbig zum Hintergrund passender Schlagschatten besser aus als ein einfaches Schwarz und auch der Einfallswinkel des Schattens sollte zum Pinsel und zum Rest des Bildes passen.
4. Abdunkeln
Soweit sieht das eigentlich schon ganz ansprechend aus, aber um den Effekt einer (hellen) abgerissenen Folie noch zu verstärken, kann man den nicht mehr bedeckten Bereich noch etwas abdunkeln. Dazu erstellen wir eine Einstellungsebene mit Gradationskurven (Ebene -> Neue Einstellungsebene -> Gradationskurven…), setzen den Ebenenmodus auf »Luminanz«, klicken in den mittleren Bereich des Diagramms und verschieben den Punkt auf die folgenden Werte:

Nach einem Klick auf »OK« fügen wir der Ebene eine Ebenenmaske hinzu und invertieren diese zunächst mit STRG+I. Nun wählen wir Weiß als Vorderungfarbe und eine runde, weiche Pinselspitze (Größe ca. 100-200) und malen damit den nicht bedeckten Bereich aus. (Zur Maske vergleiche Bild links/oben) Es muß nicht sonderlich genau sein, Hauptsache der Bereich erscheint etwas dunkler als der, der von der Folie bedeckt wird. Auch hier kann man variieren.
5. Finale Optimierungen
Sollte man die Pinselebene noch mal verschieben, so stellt man fest, daß helle Ränder sichtbar werden. In dem Fall einfach eine Ebenenmaske zur Pinselspitzen-Ebene hinzufügen und mit Pinsel und einer geringen Deckkraft die Ränder ausblenden. Dann kann man auch die Folienebene duplizieren (STRG+J), drehen oder spiegeln und an anderer Stelle noch mal verwenden. Dabei gegebenenfalls die Richtung des Schlagschattens anpassen. Für einen etwas »knusprigeren« Abrißeffekt, die Folienebene einfach einmal Scharfzeichnen. Ebenso kann man die Abrißkante per Ebenenmaske partiell ausblenden wie z.B. in meinem Weblog-Header. Im Endeffekt könnte das Ergebnis dann so aussehen.

Das Ganze auch mal mit anderen Pinselspitzen und wie oben schon beschrieben, mit verschiedenen Einstellungen für den Schlagschatten probieren.
Steffen Giers
17.12.2006
22:33 CET
Sehr schön… hatte auch schon ne ganze Zeit überlegt zu fragen wie du das gemacht hast. Aber dein Tutorial bestätigt nun meine Vermutung das da irgendeine Form von Brush im Spiel war…
Gefällt mir sehr gut!
Matthias
18.12.2006
02:02 CET
Tolles Tutorial :-)
Schade, dass das Set nicht als Plugin auch für andere Programme zur Verfügung steht. Ich muss gestehen, dass ich mich zu dieser Investition noch nicht durchringen konnte.
Steffen Giers
18.12.2006
09:02 CET
Die 6er Version kann man schon recht günstig auf Ebay ergattern. Ist auf jedenfall nen guter Einstig.
Ich hoffe du meintest auch PS…?!
Disrupted Film Tutorial - Screenz.de - Photoshop und Illustrator Tutorials und Screencasts
18.12.2006
09:51 CET
[…] John Wrana zeigt im Tutorial Disrupted Film, wie man diesen schönen Effekt, den John auch auf seiner Site und in seinem Gravatar einsetzt, gestalten kann. Zutaten: Photoshop ab Version 6 und das Pinselset PaperDamage. […]
John
18.12.2006
10:47 CET
Matthias, ich kann mich Steffen nur anschließen: Photoshop 6.0 bekommst Du teilweise schon für 30 EUR und das ist m.E. immer noch der wichtigste Versionssprung gewesen. Alles was danach kam, betraf vor allem die Photo-Optimierung (z.B. Camera Raw). Für die klassische Bildbearbeitung und einen Großteil der Tutorials im Netz ist die 6.0 mehr als ausreichend.
keasone.de | finest screen graphics » Photoshop - Kaputtes Papier
18.12.2006
13:35 CET
[…] Ein schönes Tutorial mit nützlichen Brushes gibt es bei jowra.com zu bestaunen. […]
Matthias
18.12.2006
15:27 CET
@John und Steffen: Vielen Dank für den Tipp, da werd ich mal schauen ;-)
Klaus
18.12.2006
17:44 CET
Einfach und gut – sauber … Dankeschön!
Erik
18.12.2006
20:41 CET
Gefällt mir, bis auf das Detail mit dem Tippfehler: müsste es nicht heißen: Sunburnt Blondes? :-D
Benijamino
20.12.2006
14:50 CET
Sehr schön, danke für das Tut John.
Ines
20.12.2006
21:19 CET
Sehr schönes Tutorial! Danke.
mic
27.12.2006
14:43 CET
Sehr schön ist auch der Font! Trotz Recherche habe ich ihn nicht finden können :-( Verrätst du uns den Namen der Schrift?
Vielen Dank.
John
27.12.2006
15:00 CET
Aber gerne, der Font heißt Fertigo und ist wirklich hinreißend. :-)
Entdeckt hab ich ihn auf pixelgraphix.de, den eigentlichen Font gibt es hier.
Taylor
11.02.2007
02:06 CET
Gefaellt mir sehr gut. Ich bin zwar bilingual English/Deutsch aber da ich mit dem Englischen PS arbeite, habe ich Probleme die Schritte zu erkennen. Waere schoen dieses Tutorial auf English zu haben :)
John
11.02.2007
20:05 CET
Danke Taylor. Ich versuchs in Kürze mal auf englisch. ;-)
Taylor
11.02.2007
20:21 CET
Danke John, da freue ich mich schon :D Ist ein toller Effekt :)
Martin
13.02.2007
17:42 CET
Hallo!
Ich habe auf unserer Seite einiges von dieser Website in Gebrauch und ich finde immer wieder neue interessante Dinge, sie nachzumachen mir eine wahre Freude bereitet. Ich bin kein spezialist auf dem Gebiet Webdesign und schon garnicht auf Photoshop, aber ausprobieren lohnt sich immer! Ich möchte hier einmal Danke sagen, danke dass es diese Website gibt und dass sie zur freien Verfügung steht.
Gruß Martin
John
14.02.2007
00:27 CET
Hallo Martin,
Vielen Dank, das ist ein schöner Ansporn, damit weiter zu machen.
Grüße,
John
Fionn
06.03.2007
21:15 CET
Guter Tipp!!
Und geiles “Tool” haste gefunden! Danke!
Gruß Fionn
style-designer.de » Blog Archive » Photoshop Tutorials
18.03.2007
09:27 CET
[…] Folie, Glass – Tutorial 1 […]
der HenZen
21.05.2007
11:31 CET
1 A Tutorial, und ein echt erstklassiges Brushset. Musste allerdings über Google suchen da ich es auf Exchange nicht mehr finden konnte. Thx
Thomas
24.05.2007
10:23 CET
Danke für den Workshop, ist wirklich gut und sieht auch richtig gut aus!
Hier wurde ja auch schon über den Font gesprochen. Was mich allerdings noch mehr interessieren würde ist: Wie heißt der Font in Deiner Header-Grafik?
Und welches Brush-Sets hast Du für die Kratzer verwendet? Hab bisher irgendwie noch nicht so die richtigen gefunden.
Danke und weiter so, lese seit ich die Seite hier gefunden hab mich eifrig durch die Beiträge :-)
Ben
03.08.2007
15:17 CET
Hallo,
kannst du mir das paperdamage brush-set per E-Mail senden. Wäre echt lieb.
simon
28.09.2007
17:53 CET
hi, ja ein tolles tutorial, wobei die Essenz ja eig. die Brushspitze ist, auf die ich aber nur durch dien Hilfe aufmerksam wurde. Danke.
Hast du noch mehr Anregungen diesen Kalibers? oder z.B. einTutorial für deine super Artworks, wie z.B. steel & water. wenn du sowas auf dieser sEite hast , bin ich wohl zu blind um sie zu entdecken. Dan würde ich mich sehr über eine eimal freuen. weiter so..
gruß simon
Sandra
19.10.2007
16:32 CET
Das Tutorial ist wirklich spitze. Nur erinnert mich es auch an abgestorbene Haut, die man herunter gerissen hat g
[Links] Photoshop - Tutorials im Netz - Grafik FAQ @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe
08.03.2008
02:52 CET
[…] Re: [Links] Photoshop – Tutorials im Netz => Disrupted Film – zerstörter Film, abgeplatzte Folie __________________ Dieser Post ist unter die Beerware-Lizenz gestellt. Bitte beachte die […]
Photoshop Example
05.04.2008
11:13 CET
Having a path to unending resources referring to this is outstanding.
fandom
28.04.2008
18:22 CET
was mich viel mehr interessiert, wie hast du diese geilen kratzer im header hinbekommen? PLS antwort^^ such schon so lange =)
fandom
28.04.2008
18:23 CET
trotzdem geiles tut^^
fandom
28.04.2008
18:33 CET
sry für die vielen posts ich nehm alles zurück ATLER SIN DA GEILE PINSEL DABEI^^ THX
Seedsucker
17.12.2008
21:22 CET
einfaches aber geiles Tut. Da sieht man Mal, daß weniger manchmal mehr ist ;-)
@ fandom
Wegen den “Kratzern” suchste Dir einfach mal paar Grunge-Brushes. Damit kannste schon so einiges reissen.