Tutorials: 2D-Grafik

In diesem Workshop werden drei Möglichkeiten erklärt, wie man ausgewählte Pixelbereiche (2D-Objekte) gezielt verformen kann. Verwendet werden dabei das Bildbearbeitungsprogramm Photoshop, das Morphingprogramm Elastic Reality und das Compositingprogramm After Effekts. Gezeigt wird dieser Vorgang am Beispiel der Umformung einer Banane in eine Coca-Colaflasche.

In diesem Workshop werden drei wichtige Anwendungsfelder eines Vektorgrafikprogramms wie FreeHand an Hand von drei einfachen Beispielen behandelt: Entwurf von Logos, Erstellung von Seitenlayouts für Plakate, Folder, Briefpapiere, etc. und von Infografiken. Dabei werden die grundsätzlichen Möglichkeiten von FreeHand erklärt.

Erstellen einer Autoillustration in Freehand MX. Als Grundlage für die Illustration dient die Fotografie eines Automodells (mit freundlicher Genehmigung von Florian Seidl, einem Studenten von Industrial Design).

Grundsätzliche Einführung in das Schriftenerzeugungsprogramm Fontographer. (Diese Einführung ist auch brauchbar für jedes andere Schriftenprogramm wie FontLab etc.) Schriften für den Computer selbst erstellen, oder bestehende Schriften verändern oder ergänzen, wie fehlende Umlaute oder andere Zeichen nachmachen. Muster , Rahmen, Bordüren als Schrift gestalten. Logos als Schriftzeichen in eine Schrift einbauen.

In dieser kurzen Übung werden die Grundtechniken für Bildmontagen gezeigt: Auswählen und Freistellen von Bildelementen; Jedes Bildelement wird in eine eigene Bildebene gelegt. Transformieren und Kopieren von Bildelementen; Zusammenstellen der Bildelemente zur endgültigen Bildmontage.

Tonwertkorrektur MENÜ > Anpassungen > Tonwerktkorrektur Über den Gesamttonwertumfang kann der Bereich der hellsten bzw. dunkelsten im Bild zu verwendenden Tonwerte festgelegt werden. Eine Verschiebung des Rechten Dreiecks in richtung dunklere Töne, würde bedeutetn, dass keine reines Weiß (100%R/100%G/100%B) mehr im Bild vorkommt. Verschiebung: Alle Tonwerte unterhalb oder oberhalb der Schieberegler werden zu Schwarz oder Weiß. Das gleiche gilt für die helleren Tonwerte: Der mittlere Schieberegler dient dazu Mitteltöne zu korrigieren. Gradationskurven MENUE > Bild > Anpassen > Gradationskurven... Das Histogramm wird im Hintergrund angezeigt, dazu muss die Option “Histogramm” angewählt werden: Alternativ kann durch MENÜ > Fenster > Histogramm ein eigenes Fenster für das Histogramm geöffnet sein. Die Anzeige kann auf RGB (Licht) oder Pigment/Druckfarbe (%) erfolgen. Ersichtlich ist die Verteilung der Bildpixel von Schwarz nach Weiß (wenn auf "Licht" gestellt wurde) oder von Weiß nach Schwarz, wenn auf "Pigment" eingestellt wurde. Über "Kanal" könne die einzelnen Kanäle ausgewählt und getrennt manipuliert werden (hier: RGB): durch Festlegen von Kurvenpunkten in den einzelnen Kanälen wird entweder mehr Kanalfarbe oder weniger Kanalfarbe in diesem Bereich verwendet. Farbstiche zB durch einen Scanvorgang lassen sich so oft ausgleichen. Punkte werden durch Klicken auf die Kurve gesetzt: Durch Drücken von “Entfernen” auf der Tastatur (Del, Entf, delete) wird ein markierter Punkt wieder gelöscht. Beispiel: Kanal:R+G+B: Abdunklen der helleren Tonwerte: Ausgangspunkt ist eine Lineare Kurve, die in den hellen Tonwerten herabgesetzt wurde. Helligkeit/Kontrast Eine schnelle Methode um Helligkeit und Kontrast festzulegen ist über "MENÜ > Bild > Anpassungen > ...

In dieser Übung wird aus einem Graustufenbild ein leuchtender farbiger Mond mit Blendenfleckeneffekt erstellt.

In diesem Modul wird gezeigt, wie man ein Objekt, das am besten in einer guten Hell-Dunkelmodellierung und monochrom vorliegt, mit einer beliebigen Struktur versehen kann.

In dieser Übung wird gezeigt, wie man ausgewählte Pixelbereiche (2D-Objekte) mit Hilfe von Transformationen, Filtern und dem Verflüssigen-Modul in Photoshop gezielt verformen kann. Gezeigt wird dieser Vorgang am Beispiel der Umformung einer Banane in eine Coca-Colaflasche.

In dieser Übung wird gezeigt, wie man ausgewählte Pixelbereiche (2D-Objekte) mit Hilfe von mehrmaligem Anwenden des Mesh Warp-Effekts im Programm After Effects gezielt verformen kann. Durch die Überlagerung von Mesh Warp Effekten kann man jederzeit auf vorhergehende Verformungen zurück greifen und diese verändern. Gezeigt wird dieser Vorgang am Beispiel der Umformung einer Banane in eine Coca-Colaflasche.

In dieser Übung wird gezeigt, wie man ausgewählte Pixelbereiche (2D-Objekte) mit Hilfe des Morphingprogramms Elastic Reality gezielt verformen kann. Gezeigt wird dieser Warping-Vorgang am Beispiel der Umformung einer Banane in eine Coca-Colaflasche. Als Ergebnis ist ein Standbild oder eine Videosequenz, die die Umformung der Banane zeigt, möglich.

In diesem Modul wird die extakte Konstruktion eines einfachen Logos gezeigt.

Gezeigt wird die exakte Konstruktion eines einfachen Logos.

Vektorgrafik: LV Grundlagen und LV für Fortgeschrittene DMA | e-learning http://www.dma.ufg.ac.at/ Grundlagen: 2D-Grafik Inhalt Vektorgrafik (Illustrator) Anwendung Illustrator CS3 19335   Erstellen eines einfachen Logos mit Illustrator Exkate Konstruktion eines Logos mit Kreisen mit Illustrator Spiegelei - ein 3D-Objekt mit Illustrator erstellen Aufgabenstellung Grundlagen Alle Abgaben: Upload als .jpg Vorschaubild (ca. 1024x768px) ( MENÜ > Datei > Exportieren > JPG, Farbmodell:RGB) samt einer komprimierte .ZIP-Datei mit den Rohdaten (Illustrator .Ai, ggf Referenzbild) IL-1: Erstellen Sie ein reales, erkennbares Objekt aus 100% schwarzen Elementen, versuchen sie ggf mit weniger Deckkraft (zB 50%) einen Schatten zu simulieren, sofern dies für die Erkennbarkeit dienlich ist (Je nach Blickwinkel könnte uU auch erst über den Schatten das Objekt erkennbar werden). IL-2: Erstellen Sie einen Anfahrtsplan zur Kunstuniversität ausgehend von Ihrer Wohnadresse bis zum Standort Hauptplatz (nehmen Sie ggf Kartenmaterial als Hintergrund zur Erstellung zur Hilfe). Wenn Sie zu nahe oder zu fern wohnen, wählen Sie den Hauptbahnhof oder von Freistadt oder Wien kommend die Autobahnabfahrt Hafenstraße (=Donaulände entlang - Richtung Hauptplatz) als Ausgangsort. IL-3: Bilden Sie 2 der folgenden Logos in Illustrator nach und gestalten Sie ein eigenes farbiges (1 Datei mit 3 Logos): IL-4: Gestalten Sie einen Flyer (DIN A6, 105 x 148, einseitig, ungefalzt ) mit Text und Vektor-Elementen für einen "Event" Ihrer Wahl (keine Bilddateien verwenden, Hoch- oder Querformat). (1 Datei). Vektorgrafik für Fortgeschrittene Alle Abgaben: Upload als .jpg Vorschaubild (ca. 1024x768px) ( MENÜ > ...

In dieser Übung wird zuerst ein einfaches Logo konstruiert. Anschließend wird das Seitenlayout erstellt und ein Bitmapbild und Fließtext in die dafür vorgesehen Felder eingefügt. Ein Element des Seitenlayouts wird auf eine Musterseite übertragen, sodass dieses Element auf allen Seiten, die auf der Musterseite basieren, sichtbar ist. Es werden Möglichkeiten des Exports der ganzen Seite bzw. von Seitenelementen erklärt und das Sammeln aller für die Druckerei notwendigen Projektdateien in einem Ordner. Abschließend werden noch verschiedene Effekte für die Weiterbearbeitung des Logos gezeigt. Überblick

In dieser Übung wird eine Infografik (Spidergrafik) konstruiert unter Verwendung von Hilfslinien und dem Raster.

Erste Schritte einer Autoillustration in Freehand MX. Importieren eines Bildes und Nachzeichnen des Umrisses.

Wie zeichnet man eine Vorlage in Freehand ab? Das Handhaben von Pfaden und Punkten.

Wie legt man Farbflächen in Freehand an? Füllungen und Verläufe.

Wie baut man ein dreidimensionales Objekt am Beispiel des Rads eines Autos auf?

Zum Abschluss noch die Feinheiten wie Lichter, Logo, Glanzlichter und Schatten.

Buchstaben einer Schrift sind wie Bauklötzchen, die man stapeln und zusammenbauen kann. In dieser Übung macht man eine einfache Schrift mit Formen, die wie in einem Puzzle zusammenpassen.

Erzeugung einer Schrift mit Wellenlinien. Zusammengesetztes Muster mit mehreren verschiedenen variablen Teilen. Anschlussstellen zwischen den einzelnen Zeichen (Stoß).

Eine Schrift als Rahmen. Bestandteile eines Rahmens. Eckstücke, Zwischenstücke und Mittelstücke

Mehrfärbiges Muster oder Logo in eine Schrift einbauen. Zum Beispiel zum Einbauen des Firmenlogos in die Firmenschrift.

Buchstaben zwischen Schriften tauschen und mischen. Modifikation bestehender Schriften.

Bei vielen der Freeware-Schriften aus dem Internet merkt man ihren englischsprachigen Ursprung, am Störendsten an den fehlenden Umlauten, also an den ü-Punkten und sonstigen fehlenden Zeichen. In dieser Übung werden Schritt für Schritt die wichtigsten fehlenden Buchstaben ergänzt.

Wenn man für Flash kleine Schriften für Mengentext braucht, bei denen die Kanten ausnahmsweise nicht geglättet werden sollen, macht man eine Vektorschrift, die genau mit den Pixelabmessungen der gewünschten Bildschirmschrift übereinstimmt. In der genauen Bildschirmgröße werden waagrechte und senkrechte Vektoren von Flash nicht geglättet und somit nicht leicht unscharf. Außerdem eine gute Übung zur schnellen Erstellung einer Schrift.

Einige allgemeine Anregungen zum Gestalten einer eigenen Schrift.

Grundlegende ZeichentechnikenIn dieser kurzen Übung werden die Grundtechniken in Flash erklärt: Verschmelzen und Zuschneiden von Formen, Arbeiten mit dem Umriss, Verhältnis Umriss zu Fläche, Gruppierung von Elementen, Erzeugen von geschwungenen Formen, Ausrichtung von Grafik

In dieser Übung werden mit Hilfe der Pfadwerkzeuge zwei Logos nachgebaut Arbeit mit Kurven in Flash , Erstellen von Formen mittels Stiftwerkzeug , Knotenpunkt und Tangenten , Arbeit mit Tangenten , Knotenpunktarten , Strich in Füllung konvertieren,

Diese Übung zeigt, wie Flächen mit Farbverläufen gefüllt werden können Farbverläufe zwischen zwei Farben erstellen , Einsatz von mehreren Farben innerhalb eines Verlaufs , Bearbeiten des Verlaufsbereichs , Drehen der Verlaufsrichtung ,

Arbeit mit Symbolen und Instanzen Symbole erstellen, Sinnvoller Einsatz von Symbolen, Ablage in der Bibliothek, Beziehung Symbol – Instanz, Ändern von Symboleigenschaften – Ändern von Instanzeigenschafen, Symbolarten: Grafik-Symbol, Schaltfläche, MovieClip, Einsatz und Eigenschaften der einzelnen Symboltypen,

In diesem Übungsmodul wird anhand eines einfachen Beispiels gezeigt, wie mit Actionscript in einem Flashmovie Navigation und Interaktion integriert werden kann. Im Zuge dessen wird das Ereignismodell von Flash näher erklärt und auch ausgeführt, an welchen Positionen in einem Flashmovie Code angefügt werden kann und soll. Ein weiteres Thema ist das Nachladen von Movieclips.