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

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