Overview
MEDIA
OVERVIEW
Eine wirkliche Referenzliste sieht anders aus, aber für alle diejenigen, die auf visuellem Wege mal einen kleinen Einblick bekommen möchten, womit wir uns so befassen oder auch für Sie befassen könnten: Hier finden Sie ein paar Bilder.
SNEWMEDIA | MEDIA
IMPRESSIONEN
Über uns von uns
Wir beginnen mit einem kleinen Einblick und Überblick in Bildern
Von A bis Z
Grafik für den Informations- und Datenaustausch sowie Nutzergruppen und Redaktion in Web und Print einst rund um u. a. TYPO3 CMS. Foto (Ausschnitt) eines SNEWMEDIA-Flyers (ca. 2012)
© SNEWMEDIA
Die Darstellung des Flyers wurde mit Hilfe eines 3D-Rendering-Programms um den Effekt von Glaslinsen erweitert, so dass Teile des Layouts entsprechend verzerrt wurden. Foto (Ausschnitt) eines SNEWMEDIA-Flyers (ca. 2012)
© SNEWMEDIA
Audio, Sound, Musik
Webseiten können spätestens seit 2005 unproblematisch um Ton, Hintergrundmusik oder Sound-Effekte erweitert werden. Schnitt, Sampling und Export in mehreren Datenformaten wie MP3, OGG und dergleichen, damit jeder Browser ein Format bekommt, was er versteht.
SNEWMEDIA | MEDIA
KOMMUNIKATION
Unternehmenskommunikation
Corporate Design, Brand Design, Content Marketing, Content Management, Webseiten, Broschüren und vieles andere mehr.
Unternehmenskommunikation
Wir differenzieren zwischen «Expressive Mode/Sets» im Sinne von Präsentationen auf der einen Seite und «Productive Mode/Sets» im Sinne von Dokumentvorlagen für Word und Konsorten. Expressive im Sinne von ausdrucksstark machen wir mit unserer Software und unseren Ansätzen; alles andere für die tägliche Produktivität machen Sie mit Dokumentvorlagen, Blöcken und mehr selbst.
Screenshot der Startseite eines Informationsportals, wiederum abgedruckt innerhalb der zugehörigen Imagebroschüre.
© SNEWMEDIA
Visualisierung von Beziehungen zwischen Initiative bzw. Verein und Zielgruppen, Sponsoren, Nutzern des Informationsportals.
© SNEWMEDIA
Schulzeitungen / Vereinsmagazine
Dass solche Werke auch mal völlig anders aussehen können, möchten wir kurz mit diesen Bildern veranschaulichen.
Grundlegende Neugestaltung, Neukonzeption und auch Neukalkulation einer Schulzeitung: Gegenüber dem bisher jährlich beauftragtem Dienstleister die Seitenanzahl um 50% erhöht, Umstellung von schwarz-weiß-Druck auf DIN A4 CMYK-4-Farbdruck und die Gesamtkosten dennoch reduziert. Ging doch.
© SNEWMEDIA
Inhaltsverzeichnis/Menü mit Farbkonzept für die verschiedenen Rubriken des Werks, im Post-Processing noch durch 3D-Rendering-Effekt ergänzt.
© SNEWMEDIA
Für diejenigen, die es interessiert: Das ist kein Effekt im Grafikprogramm. Wir haben die im 3D-Layout/Satz-Programm gerenderte Seite in ein 3D-Rendering-Programm (z. B. Blender) geladen. Muss man nicht machen, aber wenn man die Idee hat: Warum nicht?
© SNEWMEDIA
Logo, Symbole, Piktogramme, Icons
Frei nach dem Motto "Ein Bild sagt mehr als 1.000 Worte" ist auch das Prinzip für Logos, Symbole, Piktogramme und Icons schnell zu verstehen: Diese grafische Elemente repräsentieren Objekte, Unternehmen, Leistungen, Werkzeuge und mehr.
Sets von Piktogrammen haben die besondere Anforderung, dass jedes Objekt des Sets zu allen anderen passt, und zwar unabhängig von der Reihenfolge der Anordnung.
Logos, Symbole, Piktogramme und Icons sind in vermutlich über 95% aller Fälle üblicherweise Vektorgrafiken.
© SNEWMEDIA
Bildmarke, Signet, Wortbildmarke: Üblichweise plant man Logos 2-dimensional. Wie einfach oder doch komplex die Geometrie ist, steht und fällt mit der Ideenfindung.
© SNEWMEDIA
Ein Logo steht faktisch fast nie allein: Es wird stets auf einem Medium wie z. B. einer Webseite plaziert.
Hinweis: Dieser Screenshot zeigt die obersten zwei Bildschirmseiten einer Webseite. Ein 16/9 FullHD Screen zeigt üblicherweise beim Start nur das großformatige Bild im Seitenkopf an. Um den Bereich darunter sehen zu können, muss der Nutzer scrollen.
© SNEWMEDIA
Geht es auch 3-dimensional? Vermutlich über 99,9% aller Logos sind 2-dimensional und werden auch als Vektorgrafiken geplant und gezeichnet. Aber muss das sein?
Die Ideenfindung für abstrakte oder geometrische Logos kann durchaus 3-dimensional sein. 3-dimensionale Logos, Symbole und Icons sind aber nicht nur grafisch sondern auch in der Nutzung komplex: Sie erfordern zumeist Bitmap-Grafiken statt Vektorformate.
© SNEWMEDIA
SNEWMEDIA | MEDIA
GRAFIK
MEDIA | GRAFIK
Bildstil, grafische Technik, Motive, Einzelwerke und Sets: Auch wenn die meisten Unternehmen, Vereine, Initiativen und Selbständigen zuerst einmal an Fotos denken und dann für die eigenen Medien dann eigene Fotos beschaffen, Fotografen organisieren, Stockimages kaufen oder das Internet nach Gratis-Bildern durchforsten:
Ein Bildstil kann ganz massiv zu einer Wiedererkennung führen. Ein konsequentes Bildkonzept bedeutet, dass man Bilder in einem gewissen Stil, Format und mit Motiven auch später über die Jahre noch zusätzlich oder auch von Beginn als Bild-Set produzieren kann.
Bildstil
Low-Polygon-3D oder Bitmaps?
Das Problem mit Fotos besteht oder zumindest bestand bislang darin, dass man die Perspektive bei einem Bild nachträglich nicht mehr ändern kann. Eine 3D-Konstruktion ist immer denkbar wie in der Architektur, aber der Detaillierungsgrad kann einen erschlagen, kostet Zeit und Geld, und das Ergebnis wirkt noch lange nicht fotorealistisch.
Die Entscheidung, auf fotorealistische Grafiken für die Gestaltung von Medien zu verzichten, kann in Verbindung mit einem adäquaten Bildstilkonzept manches vereinfachen.
Low-Polygon-Grafik, realisiert mit einem 3D-Grafik-Programm. Da bei der Konstruktion Objekten auch eine Farbe zuordnet werden kann, besteht hier nicht nur Einfluss auf die Farbgebung sondern auch auf die Perspektive auf Motive.
Low-Polygon-Grafiken bestehen bewusst aus nur sehr wenigen grafischen Primitiven, um den Zeitbedarf für das Zeichnen bzw. Konstruieren gering zu halten.
© SNEWMEDIA
Eine Reduzierung der Anzahl von Farben erleicht oftmals die Integration von Bildern in Präsentationen. So ist eine schwarz-weiß-Darstellung des Gebäudes (hier: Kurhaus von Wiesbaden, Deutschland), in Verbindung mit einer Blaufärbung des Himmels eine Option, die Zeichnung mit nur einer einzigen Primärfarbe «blau» darstellen zu können.
Vergleich hierzu auch Duplex-Drucke.
© 2022, SNEWMEDIA
Serien
Es gibt eine Vielzahl grafischer Techniken in der Malerei. Jeder hat dort so seine eigene Vorlieben, so auch wir. Bezogen auf dem Bildstil geht es aber zuerst einmal darum, einen Stil oder auch eine Technik über mehrere Bilder hinweg erhalten zu können, auch wenn die Motive jeweils andere sind.
© SNEWMEDIA
Bildstil / Szenerie
Eine Szenerie umfasst üblicherweise über das eigentliche Motiv hinaus auch einen Hintergrund. Studiobeleuchtung, Nebel, Tag oder Nacht?
Industrieanlagen kennt jeder. Je nachdem, was man kommunizieren möchte, ist es zweckmäßig, die Szenerie zu verändern.
© 2016, SNEWMEDIA
Dronen, Roboter, KI: Motive und Grafiken zum Thema passen in die Zeit. Hier eine fotorealtische Darstellung einer vierbeinigen Drone, freigestellt vor einem grauen Hintergrund.
© 2023, SNEWMEDIA
Die ersten humanoiden Roboter, die sich in einer von Männern geprägten Welt und Technologie durchsetzen, werden vermutlich eine weibliche Form haben.
© 2023, SNEWMEDIA
Artwork / Computer Graphics / Abstract
Diese Grafiken dienen primär dazu, jedem zu vermitteln, dass es auch mal eine Zeit gegeben hatte, in welcher abstrakte Grafiken nicht mit KI sondern vom Menschen mit Ideen mit Computer-Software geplant und realisiert wurden.
3D-Rendering / Computergraphics
3D-Rendering wird nicht mit KI erzeugt sondern als 3-dimensionales Modell in Computerprogrammen, darunter z. B. Blender und andere. Alternativ können Geometrien aber auch durch Programmcode und das Rendering über die Grafikkarte z. B. mit WebGL erfolgen. Das eine Mal muss man die Geometrien manuell erzeugen, bei Programmcode können Geometrien auch über Formeln und Logik erzeugt werden.
Farben, Formen, Formate: Mit Hilfe von 3D-Programmen lassen sich Bilderserien im selben Stil erschaffen. Eigentlich ist das Motiv immer das selbe, aber andere jede Veränderung der Perspektive bewirkt dezente Veränderungen, so dass kein Bild dem zweiten gleicht.
Gegenüber KI-erzeugten Grafiken hat 3D-Rendering den Vorzug, dass Details genauer und korrekt sind, weil Geometrie berechnet werden. Hinzukommt die Option für höhere Auflösungen.
© SNEWMEDIA
Bezogen auf geometrische Objekte mit 2 und 3 Dimensionen verschimmt die Grenze zwischen 3D-Konstruktion und 3D-Grafik-Programmierung, denn nicht nur können Eingabedaten für 3D-Programme als Files über Skripte erzeugt werden: Es ist ebenso möglicht, mit WebGL als Schnittstelle zwischen JavaScript und Browser Grafik direkt im Browser rechnen mit Hardware-Unterstützung (Grafikkarte) zu rechnen.
© SNEWMEDIA
Perspektives Zeichen mit Tinte, Feder und Pinsel als Nachzeichnen von Fotos? Oder direkte 3D-Konstruktion von Geometrien und Wahl eines passenden Rendering-Filters?
© SNEWMEDIA
KI-unterstützte Grafikarbeiten
Ein Thema, was seit 2023 nicht fehlen darf, ist auch von unserer Seite ein Einblick, was wir mit KI-Unterstützung im Bereich der Grafikbearbeitung und Grafikerzeugung und Grafikoptimierung einsetzen oder einsetzen können. KI-Unterstützt bedeutet, dass Grafik entweder von Beginn an schon auf realen Motiven, Skizzen oder Fotos basiert und/oder iterativ im Bearbeitungsverlauf mehrfach manuell nachbearbeitet wird.
Unseren Avatar für das Twitter/X Profil von SNEWMEDIA kennt möglicherweise der eine oder die andere bereits.
© SNEWMEDIA
Die hier dargestellte Darstellung eines Monsters ist noch jugendfrei; die alternative fotorealistische, detaillierte Darstellung ist es definitiv nicht.
© SNEWMEDIA
SNEWMEDIA | MEDIA
DIAGRAMME
Daten, Prozesse und Zusammenhänge visualisieren
Frei nach dem Motto «Ein Bild sagt mehr als 1.000 Worte» planen, zeichnen und/oder programmieren bei Bedarf Diagramme für verschiedene Zielsetzungen.
Diagramme und Schemata
SNEWMEDIA | MEDIA
IT-COACHING
Informatik Coaching
Was JAVA, C#, JavaScript, PHP, XML und SQL mit Game Design zu tun hat und was Game Design wiederum mit Datenstrukturen, Objektorientierung, Medien, Web, Print, Grafik, Content Management und client- und serverseitiger Programmierung gemeinsam haben kann.
Integer, Float, Double, Short, Long, String, Char, Byte oder Boolean sind Grundlagen. Objektorientierte Programmierung und das Prinzip von Client-Server-Anwendungen, Echtzeit-Anwendungen und das Problem von Latenzen und asynchronen Prozessen versteht man im Einstieg am Beispiel von Spielen deshalb am schnellsten, weil man damit Personen aller Altersgruppen und aus verschiedenen Branchen abdecken kann.
Informatik-Coaching für Programmiersprachen
Webdesign für STUELKEN Informatik für unsere Sparte in IT-Coaching und IT-Consulting vor der Integration in SNEWMEDIA.
© SNEWMEDIA
Webdesign für STUELKEN Informatik für unsere Sparte in IT-Coaching und IT-Consulting vor der Integration in SNEWMEDIA.
© SNEWMEDIA
Webdesign für STUELKEN Informatik für unsere Sparte in IT-Coaching und IT-Consulting vor der Integration in SNEWMEDIA.
© SNEWMEDIA
Von Spielregeln zum Programmcode
Spiele unterscheiden sich von realen Projekten von Beginn an dadurch, dass es sich um regelbasierte Systeme handelt deren Regeln bereits definiert und zumeist auch verständlich formuliert wurden.
Spalten-Zeilen-Raster
Das bekannte Problem bei Scrabble: Das Spiel erfordert es, dass Spieler beliebige Begriffe plazieren dürfen; da deren Menge aber nicht Teil des Systems ist, gibt es immer wieder Regeldiskussionen beim Thema «Was ist nun ein Eigenname oder eine Abkürzung?».
Scrabble-Tiles werden auf einem zweidimensionalen Raster plaziert; ein Datenmodell, was man bereits in einem Konsolenprogramm in Textform visualisieren und ausgeben könnte. Für die Plazierung einer Zeichenfolge gilt es, eine X/Y Koordinate bzw. Zeile/Spalte, vollständige Wort sowie die Richtung vertikal oder horizontal anzugeben.
Die zugehörigen Buchstaben-Tiles versucht das Skript aus den eigenen Steinen zu beziehen. Für die Zulässigkeit der Anordnung gilt es bestimmte Bedingungen einzuhalten, was schlussendlich Teil der Programmlogik ist.
Inspirationen beschaffen: Das Spielkonzept von «Targui» basiert auf zufällig gezogenen Spielfeldern («Tiles») welche in einem quadratischen Raster von Spalten und Zeilen angeordnet werden.
Die Anzahl der Züge je Spieler je Runde sowie auch wiederum deren Reihenfolge werden über das Ziehen von Karten ermittelt. Das Kampf- und Einkommenssystem ist einfach und schnell zu verstehen. Das Quadratraster des Spielplans ist mit Programmcode vergleichsweise leicht zu visualisieren.
Spielsteine, Units, Tiles, Items
Um den Zustand in einem System in der Realität wie auch in einem Spiel visualisieren zu können, bietet sich Grafik-Programmierung von Bitmaps, 3D Rendering oder SVG Vektorgrafiken an.
Symbole für eine abstrakte Visualisierung von Unit-Types von Spieleinheiten für die verschiedenen Spieler. Für den Einstieg kann man es grafisch zeichnen oder gleich in SVG programmieren. Foto: Visualisierung des Binärssystems.
© SNEWMEDIA
Wir beginnen in dieser Rubrik mit einem Rückblick in das Jahr 1992 und damit in eine Zeit, in welcher Strategiespiele aus den USA noch als Hex+Counter Games realisiert wurden: Spielfelder basierend auf einem 6-eckigen Raster, und Spielsteine bestehen aus Pappe, bedruckt mit Daten, Zahlen, IDs und einem Piktogramm.
Es muss nicht immer digital sein: Für die Evaluierung eines Spielkonzepts sind Prototypen recht praktisch. Holz, Stichsäge, Holzpfeile zur Vermeidung von Splittern.
Kartenspiele? Legespiele? Seit sich die sogenannten Online-Druckereien gegenüber den kleinen lokalen Druckereien ab 2005 durchzusetzen begannen kann man nicht nur alles Möglichkeite irgendwo produzieren lassen: Zugleich hat sich auch der optionale Leistungsbereich für kreative Köpfe vergrößert, denn im Digitaldruck sind auch Kleinstauflagen möglich.
© SNEWMEDIA
Point-to-Point-Movement
Im Point-to-Point-Movement Verfahren befinden sich Spielsteine im Zustand Zn eines Systems jeweils an einem Knoten. Im Rahmen eines Spielzugs bietet das System über Verbindungen zwischen Knoten potentielle Aktionen an. Führt ein Spieler eine solche Aktion als Bewegung durch, wird das System in den nächsten Zustand Zn+1 transformiert.
Scotland Yard, Spiel des Jahres 1984. Der Spielplan von Scotland Yard basiert auf einem Point-to-Point-Movement Prinzip, wobei die nummerierten Punkte auf dem Spielplan über verschiedene Verkehrsmitteln verbunden sind. Anzahl der Knoten: 200.
Scotland Yard eignet sich dahingehend gut für den Einstieg in Objektorientierung, Vektorgraphik, das Prinzip von Linked Data sowie einen Klassiker: Die Berechnung der kürzesten, schnellsten Verbindung zwischen zwei Punkten auf dem Spielplan.
Das Datenmodell und das Rendering als Vektorgrafik oder Bitmap-Grafik zur Visualisierung von Knoten, Verbindungen und Objekten lässt sich vergleichsweise leicht mit Programmcode visualisieren. Die Definition von Kurven für Verbindungen ist für Einsteiger etwas komplexer, aber zur Not reichen für den Start auch gerade Verbindungen.
Foto der Darstellung auf einem Bildschirm.
© SNEWMEDIA
Komplexität und Größe erhöhen
Was zu Beginn sehr klein anfängt, kann in Verbindung mit der Programmierung von Grafiken für Spielfelder auch für Brettspiele eine gewisse Dimension annehmen, bei welcher herkömmliche Formate von Tischen nicht mehr ausreichend sein werden.
Die Grenze zwischen Grafik und Grafik-Programmierung ist fließend, insbesondere in Fällen, in welchen Grafik in Vektor-Grafik-Formaten realisiert werden.
Ausschnitt aus einer 3,00x1,00 Meter großen Grafik im Stil eines Brettspiels. Der kleine Ausschnitt zeigt Europa als Teil einer fiktiven Weltkarte.
Ursprünglich tatsächlich als Brettspiel geplant ist inzwischen eine Online-Umsetzung in Planung.
© SNEWMEDIA
Objekte, generische Klassen, Informationen: Die Visualisierung von Informationen in Web oder auch Print für Druckwerke erfordert ein Datenmodell, in Raster und schlussendlich die Programmierung von Templates, welche Objekte für Web oder ein Druckformat berechnen.
Das Sechseck-Raster hat sich als Grid für Strategie-Spiele in den USA schon in den 1950er Jahren etabliert. Jedes Spielfeld hat hierbei dem gleichen geometrischen Abstand vom Nachbarn.
© SNEWMEDIA
Die fertige gedruckte Version eines überdimensionierten Brettspiels (3,00 x 1,00 Meter). Eine Computer-Maus (ca. 2012) hat etwa die Größe der Philippinen im Szenario. Anzahl der Knoten: Über 2.000.
© SNEWMEDIA
Statistik und Zufallszahlen-Generierung zum Anfassen: Würfel sind für jeden Menschen der Einstieg in die Erfassung und Auswertung von Daten. Wie man mit Binärzahlen Zufallszahlen generieren oder Daten verschlüsseln kann, kommt später.
© SNEWMEDIA
Mathematik, Physik, Geometrie, Grafik: Programme, die irgendetwas berechnen, sind schön und gut. Für alle diejenigen, die sich mit Grafikprogrammierung oder Visualisierung befassen möchten, bis heute aber Trigonometrie nicht verstanden haben: Das gute alte Geodreieck.
© SNEWMEDIA
Programm-Ablauf-Plan (PAP): Auch wenn man so etwas heutzutage eher mit einem Grafikprogramm machen wird, so gab und gibt es für so etwas tatsächlich Schablonen. Foto: Schablone für Programmablaufpläne.
© SNEWMEDIA
SNEWMEDIA | MEDIA
MEHR?
MEDIA | MEHR
Auch wenn wir gern noch mehr bunte Bilder zeigen könnten: Das Internet ist voll mit Bildern und damit Inspirationen.
Entdecke SNEWMEDIA. Es ist einfacher als Du denkst.
Stelle noch heute Deine Anfrage.