Ordner- und Medienorganisation für Mediengestalter, Webdesigner, Blogger und Desktop Publisher

(Last Updated On: 30. Dezember 2015)

Als Mediengestalter haben Sie schonmal Probleme dabei, all Ihre Rohmaterialien und Ressourcen beieinander zu bekommen. Wenn Sie beispielsweise Videos erstellen, haben Sie nicht nur ihre Rohvideos, sondern auch das extern aufgenommene Audio, eventuell mit Digitalkamera aufgenommene Bilder, Soundeffekte, gema-freie Musik, Icons zum Erstellen von Infographics und zum Hervorheben von Textstellen, sowie Effekte, die Sie in After Effects einbinden wollen. Als Webdesigner haben Sie mitunter zusätzlich zu all diesen Medien noch den Quellcode Ihrer Webanwendung, den Sie pflegen müssen.

Aber auch als Blogger kommen mit der Zeit Dateien heran, beispielsweise Grafiken für Bullet Listen, anklickbare Buttons oder andere grafische Elemente, die regelmäßig in einen Blogpost eingefügt werden wollen. Genau so kann es auch einem Desktop Publisher gehen, der seine Zeitschriften, Flyer und andere Dokumente mit entsprechenden Medien aufhübschen möchte.

In diesem Post zeige ich Ihnen ein kurzes Beispiel für einen Workflow, mit dem Sie alle ihre Materialien sauber ablegen und wiederverwenden können. Dabei gehe ich sowohl auf eine Organisation für Nutzer ohne Dateimanager ein, die also nur mit dem Windows-Explorer oder der Mac OS Shell arbeiten, als auch für nutzer mit Dateimanager – in unserem Beispiel Adobe Bridge.

Die immer wiederverwendeten Materialien

Wenn Sie als Mediengestalter haben, gibt es Elemente, die Sie immer mal wieder in verschiedenen Projekten verwenden wollen. Das können beispielsweise Schaltflächen zum Downloaden von Dateien, Grafiken für Listenpunkte in HTML-Listenaufzählungen, Pfeile zum Hervorheben von bestimmten Textpassagen, Icons, Soundeffekte und andere Materialien sein. Da Sie die Materialien in mehreren Projekten verwenden, macht es Sinn, diese Materialien auch projektunabhängig zu organisieren. Deswegen starten wir als allererstes mit einem Ordner Media. Hier kommen all unsere Rohmaterialien hinein, beispielsweise

  • Buttons
  • Icons
  • Stock-Fotografien
  • Texturen
  • Sonst Bilder. Beispielsweise Profilbilder für Foren und Social Media, Banner, Link-Us-Bilder, Wiederholungsgrafiken, Smilies, Reaction GIFs usw.
  • Schriftarten (Fonts)
  • Soundeffekte
  • freie Musik. Entweder ganze Tracks oder beispielsweise Loops und Jingles
  • Videoeffekte (VFX). Z. B. Light Leaks, Raucheffekte, Partikeleffekte
  • Brushes, also Pinsel für beispielsweise Fotoshop
  • Farbverläufe (Gradients)
  • Code. Heirbei handelt es sich um Code, der immer wiederverwendet wird, also beispielsweise der grundlegen MVC-Code für eine Webanwendung oder beispielsweise objektorientiert geschriebenes CSS mit zugehörigem HTML-Code.
  • Videoschnipsel (Motion Graphics)
  • 3D-Modellierungen

Ich habe hierzu mal die folgende Ordnerstruktur erstellt, die ich näher erläutern möchte.

Media
├───Bilder
│ ├───Banner
│ ├───Muster
│ ├───Profilbilder
│ ├───Signaturen
│ └───Smilies
├───Brushes
├───Buttons
├───Code – Code, aufgeteilt nach Kategorien
│ └───oocss – Hier befinden sich objektorientierte .css-Beschreibungen und zugehöriger HTML- und JavaScript-Code für verschiedene HTML-Objekte wie Bildergallerien, Audio- und Videoplayer usw.
│ ├───Bildergallerien
│ ├───Footer
│ ├───Menüs
│ ├───Audioplayer
│ └───Videoplayer

│ └───jquery – Hier befindet sich jquery-Code, der nichts mit der Darstellung der Objkete zu tun hat, die im Ordner oocss definiert wurden, sondern sich um andere funktionalitäten kümmert. Beispielsweise das jquery.js-Skript wird hier abgelegt oder ein Skript für Google Analytics.

│ └───html – grundlegender HTML-Code als Vorlage für neue statische Websiten

│ └───mvc – Das aktuelle grundlegende Model View Controller (MVC) Skript, welches als Grundlage für meine Webanwendungen dient
├───Fonts
├───Gradients – Farbübergänge für Photoshop
├───Icons – Icons, getrennt in pixelbasierte Icons oder vektorbasierte Icons
│ ├───Pixel
│ └───Vektor
│  │ └───Social Media
├───MotionGraphics

├───3D –  mit Blender oder einem anderen Modellierungstool erstellte 3D-Modelle.
├───Music – freie Musik, aufgeteilt nach Genre
│ ├───Dance
│ ├───Glitch
│ ├───Jingles
│ └───Metal
├───Sounds
├───Stockfotografien
│ ├───Freizeit
│ ├───Meer
│ └───Natur
├───Texturen
│ ├───Feuer
│ ├───Metall
│ ├───Stein
│ ├───Stoff
│ └───Wasser
└───VFX – Videoeffekte, aufgeteilt nach verschiedenen Kategorien.
├───Lenses
├───Light Leaks
└───Smoke

Jetzt haben wir eine Ordnerstruktur für unsere häufig genutzten Materialien. Diese sollten am besten auf einem externen Medium gelagert werden, das bestenfalls sogar über das Netzwerk erreichbar ist, also über eien Dateifreigabe bzw. einen Fileserver. Denn so können wir die Medien von allen Geräten im Netzwerk aus erreichen und nutzen. Meine Materialien backupe ich auch.

Desöfteren kommt es vor, dass wenn man sich freie Materialien herunterlädt, auch den Autor an geeigneter Stelle nennen muss, z. B. bei der Creative Commons Lizenz. Aus diesem Grund ziehe ich mir bei allen Medien die ich downloade auch noch das Browserfenster per Drag and Drop in den Ordner, damit ich die ursprüngliche URL, von der ich die Medien mal entnommen habe, wiederfinde. Sollte die URL mir nicht helfen, weil diese einmalig generiert wurde und danach nicht mehr verwendet werden, erstelle ich mir eine Datei mit der Dateiendung .cred (für Credit an den Autor) und schreibe dort die daten des Autors rein, beispielsweise Name und Profil.

Ordner für Projekte

Nun kommt die Ordnung für die eigentlichen Projekte. Hier sammeln wir

  • das eigentliche Rohmaterial (also aufgenommene Video- und Audiospuren, geschossene Fotos usw.)
  • die Projektdateien der Programme (Adobe Premiere, Adobe After Effects, Adobe Photoshop, Audition usw.)
  • Wenn es sich zusätzlich um ein Webdesignprojekt sammelt, den Quellcode der Seite

Diese Ordnerstruktur ist schnell aufgesetzt. Sie sieht danach so aus und ist eigentlich selbsterklärend. Für jedes Projekt gibt es einen extra Ordner, so dass man an mehreren projekten gleichzeitig arbeiten kann. Die einzelnen Rohmaterialien werden nach Kategorie sortiert in passende Unterordner eingefügt

Projekte
├───Projekt 1
│ ├───Fotos
│ ├───Projektdateien
│ ├───Soundmaterial
│ └───Videomaterial
│ └───Code
├───Projekt 2
│ ├───Fotos
│ ├───Projektdateien
│ ├───Soundmaterial
│ └───Videomaterial
│ └───Code
└───Projekt 3
├───Fotos
├───Projektdateien
├───Soundmaterial
└───Videomaterial
│ └───Code

Nun ist es ja so, dass wir in verschiedenen Projekten teilweise die selben Medien nutzen, die wir weiter oben schon sortiert haben, also Soundeffekte, Stock-Fotografien usw. Es wäre unsinnig, diese alle jedes mal in einen Projektunterordner zu kopieren, da dies unnötig Speicherplatz verschwendet. Stattdessen nutzen wir die Möglichkeit, einen logischen Link zu setzen. Unter Windows sollten wir dazu erstmal einrichten, dass man logische Links über das Kontextmenü einrichten kann. Dazu gibt es für Windows ein schönes Projekt namens Link Shell Extension, welches ich persönlich gerne nutze. Software runterladen und installieren. Man wird am Ende der installation dazu aufgefordert, den explorer.exe-Prozess neu zu starten.

Nehmen wir nun an, wir möchten einen Button, der sich unter C:\Media\Buttons\test.png befindet, nun auch unter C:\Projekte\Projekt1\ verwenden. Dann erstelle ich unter PRojekt 1 einen neuen Unterordner für Buttons.

Projekte
├───Projekt 1
│ ├───Fotos
│ ├───Projektdateien
│ ├───Soundmaterial
│ └───Videomaterial
│ └───Medien
│ │  └───Buttons

Und verlinke nun die C:\Media\Buttons\test.png. Dazu rechtsklicke ich auf die Datei. Nach der Installation der Link Shell Extension bekomme ich einen Kontextmenüeintrag Link Quelle festsetzen. Nun begebe ich mich zum Zielordner, wo ich die Datei haben möchte, rechtsklicke in dem Ordner auf eine freie Fläche und wähle dann im kontextmenü Einfügen als… -> Symbolischer Link. Die Datei taucht nun ebenfalls im Zielordner auf, jedoch ist das Icon etwas abgeändert und deutet an, dass es sich um eine Windows-Verknüpfung handelt. Es ist jedoch keine Verknüpfung. Hätten Sie einfach nur eine Verknüpfung erstellt und würden versuchen, diese mit Adobe Premire Pro oder einem anderen Gestaltungsprogramm zu öffnen, hättne Sie keinen Erfolg. Den symbolischen Link jedoch können Sie öffnen. Natürlich können Sie auch mehrere Dateien gleichzeitig öffnen und auf diese Art und Weise in einem Zielordner als Link einfügen.

Warum nicht auf die Links verzichten und die Medien gleich aus dem Materialien-Ordner heraus öffnen, fragen Sie? Nun, ich persönlich finde das Ganze einfach sauberer, weil ich dann in meinem Projektordner wirklich nur die Medien drin habe, die ich wirklich nutzen möchte, und nicht auch noch alle anderen. Wenn Sie persönlich das nicht stört, können Sie die Medien selbstverständlich auch direkt aus Ihrem Materialien-Ordner heraus öffnen.

Und was ist mit Adobe Bridge?

Besonders wenn Sie mit der Adobe Creative Suite arbeiten, werden Sie sich spätestens seit der Geschichte mit den Symlinks fragen, warum Sie nicht einfach die Dateien direkt über Adobe Bridge öffnen sollten. Und außer der tatsache, dass Sie vielleicht nebenbei noch andere Tools verwenden, die Adobe Bridge nicht unterstützen, gibt es in der Tat keinen wirklichen Grund dafür.  Ich persönlich nutze jedoch zum Webdesign beispielsweise keinen Adobe Dreamweaver, sondern lediglich einen Texteditor. Daher nutze ich für Webdesign-Objekte kein Adobe Bridge. Für reine Bild-, Sound- oder Videobearbeitungen bin ich jedoch auch ein absoluter Bridge-Fan.

Im Gegenteil möchte ich Ihnen an dieser Stelle also nicht davon abraten, Adobe bridge zu nutzen, sondern Sie im Gegenteil sogar dazu ermutigen. Denn jetzt, nachdem Sie Ihre Materialien bereits sauber in einer Ordnerstruktur organisiert haben, bietet es sich an, dass wir unsere Materialien unter C:\Media durchstöbern und beispielsweise mit Keywords, Sternen-Ratings und Tags versehen, um sie mit Bridge schneller zu finden.

Und wenn Sie Adobe bridge nutzen, können Sie sich die Geschichte mit den symbolischen Links komplett sparen. Denn dann schieben Sei die Materialien aus den Beispiel-Ordnern C:\Media und C:\Projekte einfach zusammen in eine Sammlung und haben somit alle Dateine, die Sie im Projekt nutzen wollen, an einem Fleck. Denn auch in einer Sammlung werden die Dateien nicht kopiert und belgen somit das mehrfach des Original-Speicherplatzes, sondern werden nur innerhalb von Adobe Bridge verknüpft.

Ich habe auf Youtube ein gutes Tutorial zu Adobe Bridge gefunden, welches die Vorteile sehr gut aufzeigt.

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

DaFRK

Andreas Loibl ist SAP-Berater, Ethical Hacker und Online Marketing Manager und schreibt auf seinem Blog DaFRK Blog über verschiedene Themen in den Sektoren Projektmanagement, Informationstechnik, Persönlichkeitsentwicklung, Finanzen und Zeitmanagement.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.