Photoshop Tutorial: Texteffekt Glas
Das Photoshop Tutorial von Pixelstarter zeigt, wie man einen gläsernen Schrift-Effekt in Photoshop erarbeiten kann. Wer sich nun fragt wozu man diesen Effekt braucht, der sollte beim PayTV Sender “Sky” einmal genauer hinschauen, denn dieser nutzt den Glas-Effekt in seinen Werbekampagnen.
Photoshop Tutorial - Glaseffekt
In drei einfachen, mit reichlich Bildern versehenen Schritten kommt man zum gewünschten Ergebnis.
Zuerst wird in Photoshop eine Textebene mit dem gewünschten Text erstellt. In Schritt 2 werden die Effekte bearbeitet. Die Ebenenstile “Schein nach außen”, “Schein nach innen”, “Abgeflachte Kanten und Relief” sowie “Glanz und Kontur” sorgen in Kombination mit den entsprechenden Einstellungen für einen ersten sichtbaren Eindruck.
Zu guter Letzt wird mit dem Photoshop Filter “Schwingungen” die Lichtbrechung imitiert und das war es auch schon. Wie ihr seht, kommt man mit wenigen Mitteln in Photoshop schnell zu einem beeindruckenden Ergebnis…
Zum Photoshop Tutorial: Glaseffekt
Photoshop Tutorial: Auto Bild-Montage
Zu einer überzeugenden Photoshop-Montage bedarf es einiger gut überlegter Vorbereitungen. Zum einen muß man auf die richtige Auswahl der Bilder achten, zum anderen auf das richtige Verhältnis von Licht und Schatten und der Proportionen. Schmeisst man alles zusammen erhält man mit etwas Talent, Kreativität und fundiertem Wissen eine gelungene Photoshop Bild-Montage.
Talent und Kreativität hat man oder hat man eben nicht, fundiertes Wissen gibt es dagegen genügend im Netz. So auch dieses mal, wo wir euch ein neues, spannendes und hilfreiches Tutorial aus dem Hause psd.tutsplus vorstellen wollen.
Photoshop Tutorial - Bild Montage
In diesem Photoshop-Tutorial geht es darum ein Auto so gut wie möglich in Szene zu setzen. Dabei wird das Auto in 25 Schritten in eine montierte Fantasywelt eingearbeitet. Viele Photoshop-Funktionen kommen dabei zum Einsatz um dem Bild die nötige Glaubhaftigkeit zu verleihen. Man lernt zum Beispiel wie man Spiegelungen und Schatten richtig einsetzt, damit sich das Auto perfekt in die Umgebung einfügt.
Wer sich also gerne einmal an das Thema Bild-Montage heranwagen möchte, sollte sich das Photoshop-Tutorial vorher ansehen um gewisse Grundlagen zu lernen. Zum Schluss sei noch angemerkt das man sich vorher genau überlegen sollte was für eine Bild-Montage man machen will, um im späteren Entwicklungsprozess nicht ins stolpern zu geraten.
Flash Tutorial: Sound-Spektrum mit AS 3
Noch vor einigen Jahren konnte man mit Flash das Sound-Spektrum nur faken, sprich, man zeichnete sich Balken oder Linien auf die Bühne und animierte diese per Hand. Das war natürlich kein zufriedenstellendes Ergebnis, also wurde in den Folgeversionen von Flash eine Sound,- und SoundMixer-Klasse eingeführt, die für solche Visualisierungen zuständig ist. Die in der SoundMixer-Klasse enthaltenen Methoden und Eigenschaften ermöglichen uns dabei auf die Soundsteuerung innerhalb eines Flash-Films zuzugreifen. Wir zeigen euch nun heute wie man mit Flash und AS3 ein Echtzeit Sound-Spektrum entwickelt.
1. Zunächst erstellen wir eine neue Flash-Datei (AS3). Speichern könnt ihr sie unter dem Namen spektrum.fla. Einen Sound benötigt ihr natürlich auch. Diesen legt ihr in dasselbe Verzeichnis in dem die spektrum.fla liegt.
2. Nun gehts auch schon ans programmieren. Der gesamte Code wird dabei ins erste Schlüsselbild der Hauptzeitleiste geschrieben. Wir initialisieren zuerst die Objekte die wir zur Darstellung des Spektrums benötigen:
var sound:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var bytes:BitmapData = new BitmapData(256, 100, true, 0x000000);
var bitmap:Bitmap = new Bitmap(bytes);
3. Danach fügen wir das Bitmap der Anzeigeliste hinzu und positionieren es. Anschließend laden wir den Sound mithilfe von sound.load() und new URLRequest() und spielen ihn ab. Wichtig ist in AS3 das wir den Sound vorher dem Soundchannel hinzufügen:
addChild(bitmap);
bitmap.x = 150;
bitmap.y = 150;
sound.load(new URLRequest("sound.mp3"));
channel = sound.play();
4. Nun benötigen wir eine Funktion die das Abfragen des Spektrums ermöglicht. In der Funktion legen wir ein ByteArray an, das mit den Werten der Methode SoundMixer.computeSpectrum() befüllt wird. Die Werte werden als normalisierte Gleitkommawerte im Bereich zwischen -1,0 und 1,0 formatiert. Die Größe des erstellten ByteArray-Objekts ist auf 512 Gleitkommawerte festgelegt, wobei die ersten 256 Werte den linken Kanal darstellen und die restlichen 256 Werte den rechten Kanal. Zum Schluß wird das Bitmap in 2 for-Schleifen (für jeweils den linken und rechten Kanal) aktualisiert:
function onEnterFrame(event:Event):void {
var spectrum:ByteArray = new ByteArray();
SoundMixer.computeSpectrum(spectrum);
bytes.fillRect(bytes.rect, 0x000000);
for (var i:int = 0; i < 256; i++) {
bytes.setPixel32(i, 20 + spectrum.readFloat() * 20, 0xff000000);
}
for (var j:int = 0; j < 256; j++) {
bytes.setPixel32(j, 60 + spectrum.readFloat() * 20, 0xff000000);
}
};
5. Als letztes müssen wir die Funktion noch über einen ENTER_FRAME EventListener aufrufen um eine kontinuierliche Aktualisierung zu ermöglichen und fertig ist das Soundspektrum:
addEventListener(Event.ENTER_FRAME, onEnterFrame);
Flash Tutorial: TV-Rauschen mit AS 2
Heute zeigen wir euch wie man mit Flash und ein wenig Actionscript das bekannte TV-Rauschen erzeugt. Dazu bedarf es lediglich einem Bild von einem Fernseher in Frontansicht (entweder ihr zeichnet euch selbst einen oder schaut im Netz nach geeigneten Bildern), einer Schaltfläche und den Einsatz der BitmapData-Klasse und deren noise() Methode. Mit der noise() Methode kann man ein Bild mit zufällig platzierten Pixeln versehen und somit eignet sich die Methode wunderbar zur Darstellung des Effekts.
1. Zuerst erstellen wir uns eine neue Flash-Datei. Danach importieren wir in Flash das Bild vom Fernseher und platzieren es ins erste Schlüsselbild der Zeitleiste. Der Fernseher wird mittig auf der Bühne zentriert.
2. Wir erstellen eine neue Ebene und zeichnen in der Ebene ein schwarzes Rechteck, das genau deckungsgleich mit der Bildröhre des Fersehers ist. Danach wandeln wir das Rechteck in einen Movieclip um und geben ihm den Instanznamen “maske”.
3. Wir erstellen wieder eine neue Ebene. Nun müssen wir noch eine Schaltfläche zum ein- und ausschalten des Fernsehers erstellen. Dazu zeichnen wir ein Rechteck (20×20 px) in die neue Ebene und platzieren es mittig unter dem Fernseher. Das Rechteck wird wieder in einen Movieclip umgewandelt und bekommt den Instanznamen “button”.
4. Ab jetzt kommt Actionscript zum Einsatz. Wir erstellen uns nochmals eine neue Ebene und platzieren dort den Actionscript-Code.
5. Als erstes benötigen wir einen Platzhalter-Movieclip für das Rauschen und einen duplizierten Masken-Movieclip:
stop();
Stage.scaleMode = "noScale";
this.createEmptyMovieClip("rauschen", 1);
rauschen._x = maske._x;
rauschen._y = maske._y;
var aus = this.maske.duplicateMovieClip("aus", this.getNextHighestDepth());
aus._visible = false;
6. Nun benötigen wir ein BitmapData-Objekt und fügen es dem Platzhalter-Movieclip hinzu. Der Platzhalter-Movieclip wird wiederum vom Masken-Movieclip maskiert:
var bmp = new flash.display.BitmapData(maske._width, maske._height);
rauschen.attachBitmap(bmp, 1);
rauschen.setMask(maske);
7. Als nächstes erstellen wir die Funktion erstelleRauschen() um die Pixel kontinuierlich zu verändern. Dazu bedarf es einer onEnterFrame-Funktion und der noise() Methode:
function erstelleRauschen(){
this.onEnterFrame = function(){
bmp.noise(Math.floor(1000 * Math.random()), 0, 255, 1 | 2 | 4, true);
};
};
erstelleRauschen();
8. Zum Schluß geben wir noch dem Button die benötigte Funktionalität zum ein- und ausschalten des Fernsehers:
button.onPress = function(){
aus._visible = !aus._visible;
if(aus._visible == true){
delete this._parent.onEnterFrame;
}else{
this._parent.erstelleRauschen();
};
};
Wenn wir nun die Flash-Datei veröffentlichen sehen wir das bekannte TV-Rauschen.
Kostenlose Video-Lektionen für Photoshop
Galileo Design stellt wieder einmal neue kostenlose Video-Trainings für Photoshop auf seiner Website bereit. Die Schwerpunkte behandeln diesmal die Themen “Retusche & Compositing”, sowie “Kreative Fotomontagen” und zeigen wie verschiedene Foto-Montagen im Rahmen der “EDITION fotocommunity” zustande gekommen sind. Mit den insgesamt ca. 90 min langen Video-Workshops bekommen Grafiker und Designer einen guten Einblick in die Bildbearbeitung, sowie die Bildretusche und das Composing mit Photoshop.
Die Photoshop-Trainer Pavel Kaplun und Alexander Heinrichs führen einen dabei durch 10 Photoshop-Lektionen:
Retusche & Compositing:
1. Der Composing-Workflow [4:49]
2. Digitale Stillleben [5:40]
3. Glasflaschen freistellen [10:18]
4. Kontrast und Farbe anpassen [12:05]
5. Gegenstände einarbeiten [9:23]
Kreative Fotomontagen:
1. Geeignete Bilder auswählen [5:43]
2. Ebenenmasken einsetzen [6:41]
3. Himmel dramatisieren [9:06]
4. Den Tag zur Nacht machen [10:44]
5. Das letzte Felltuning [10:31]
Weiterführende Links:
Videotraining – Retusche & Compositing
Videotraining – Kreative Fotomontagen
Flash Tutorial: Textfeld Stylesheet (CSS) mit AS 3
Textfelder in Flash zu formatieren ging bis Flash MX nur über internes Actionscript. Seit der Version Flash MX 2004 konnte man aber auch das bekannte CSS nutzen, das als Bestandteil für normale Html-Seiten eine vernünftige Struktur zur Formatierung von Texten bietet. Heute zeigen wir euch deshalb, wie man mit AS3 und einer CSS-Datei ebenso Texte in Flash formatieren kann.
1. Dazu müssen wir als erstes eine CSS-Datei mit dem Namen style.css anlegen und folgende Formatierungen für eine Überschrift einfügen:
h1{
font-family: Arial, Helvetica, sans-serif; //Die Auswahl der Fonts
color: #999999; //Die Schriftfarbe
font-size: 20px; //Die Schriftgröße
}
2. Danach erstellen wir in Flash ein dynamisches Textfeld mit einigen Eigenschaften und positionieren dieses auf der Bühne. Zum Schluß fügen wir es dann der Anzeigeliste hinzu. Der gesamte AS3-Code kommt dabei ins erste Bild der Hauptzeitleiste:
var tf:TextField = new TextField();
tf.width = 250;
tf.height = 200;
tf.x = 250;
tf.y = 250;
tf.wordWrap = true;
tf.multiline = true;
addChild(tf);
3. Nun müssen wir das Stylesheet, also die style.css laden. Dies geschieht mit dem URLLoader. Mit dem Event-Listener Event.COMPLETE wird das Laden dann abgefangen und die Funktion pushCSS() aufgerufen:
var url:URLRequest = new URLRequest("style.css");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, pushCSS);
loader.load(url);
4. Zum Schluß erstellen wir in der Funktion pushCSS() ein neues Stylesheet-Objekt und lesen anschließend mit der Methode parseCSS() das CSS aus. Abschließend ist es wichtig, das wir erst das CSS dem Textfeld zuweisen und dann den Text hinzufügen:
function pushCSS(evt:Event){
var css:StyleSheet = new StyleSheet();
css.parseCSS(loader.data);
tf.styleSheet = css;
tf.htmlText = "<h1>Das ist die formatierte Überschrift</h1>";
}
Nun können beliebig viele Textfelder in Flash mit CSS formatiert werden und man erspart sich eine Menge Arbeit.
Photoshop Tutorial: Portrait Montage
Wer gerne einmal eine professionelle Portraitmontage machen möchte, sollte sich das aktuelle Photoshop Tutorial auf psd.tutsplus näher ansehen. In 22 Schritten wird hier erklärt, wie man aus einem normalen Portrait eine atemberaubende Kulisse mit plastischen Effekten zaubert. Zum Einsatz kommt hier natürlich Adobe Photoshop, das mit seinen vielen Funktionen dieses erst ermöglicht.
In dem Photoshop Tutorial wird als erstes eine ganz normale Portrait-Aufnahme freigestellt und vor einem bewölkten Himmel platziert. Danach werden im Zusammenspiel mit Pinsel und Masken, verschiedene Bereiche des Gesichts hervorgehoben um einen plastischen Look zu erhalten. Mit Gradiationskurven und Filtern wird das Ergebnis dann immer mehr verfeinert, bis ein perfektes Gesamtbild entsteht. Zum Schluß wird noch der Regen sowie die Sonne hinzugefügt und fertig ist der Photoshop Montage-Cocktail.
Photoshop Tutorial - Portrait Montage
Sicherlich ist das Photoshop Tutorial nichts für Anfänger, aber für fortgeschrittene Photoshop Nutzer sollte das ganze kein Problem darstellen. Hilfreich ist auch das begleitende Video Tutorial, in dem alle Arbeitsschritte nochmal ausführlich nacheinander gezeigt werden.
Flash Tutorial: 3D Objekt mit Papervision
Heute wollen wir euch zeigen wie man mit Papervision und ein wenig AS3, eine einfache 3D Plane in Flash erstellt. Dazu benötigen wir zuallererst die Klassen von Papervision. Diese kann man sich inklusive hilfreichen Faq`s zur Installation hier downloaden. Wenn möglich nutzt einen Versionskontrollmanager, auch Subversion Control genannt, wie etwa Tortoise SVN, um immer auf dem aktuellsten Stand zu bleiben. Nach der Installation können wir auch schon loslegen.
1. Als erstes erstellen wir eine AS-Datei mit Namen “PV3D.as”. Danach erstellen wir eine leere Flash-Datei, stellen die Bildrate auf 30 Bps und tragen in das Feld Dokumentklasse “PV3D” ein. Die beiden Files müssen im selben Ordner liegen.
2. Nun können wir auch schon die Klassen in die AS-Datei importieren. Diese werden zur Darstellung des 3D Objekts benötigt. Dazu einfach wie üblich in AS3 mit dem package Schlüsselwort beginnen:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
}
2. Danach erweitern wir die Klasse Sprite um die öffentliche Klasse PV3D und initialisieren die benötigten Variablen:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;
}
}
3. Nun zur eigentlich Funktion. Wir erstellen die öffentliche Methode PV3D und instanzieren ein neues Viewport-Objekt, das wir anschließend der Anzeigeliste hinzufügen. Als Parameter für new Viewport() übergeben wir width, height, scaleToStage und interactive:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
}
4. Es folgen weitere Instanzierungen von scene, camera, renderer, material, und primitive. Bei material setzen wir doubleSided auf true um die Farbe auf der Vorder,- und Rückseite anzuzeigen. Bei primitive erstellen wir eine neue Plane und weisen new Plane() die Parameter material, width, height, wSegments und hSegments zu. Die Segmente sind dabei die verwendeten Polygone, umso höher hier der Wert ist, umso höher aufgelöst ist das Objekt. Die Verwendung eines höheren Werts ist aber auch sehr performancelastig und man sollte sparsam damit umgehen. In unserem einfachen Beispiel reichen 3 Segmente horizontal und vertikal völlig aus. Zum Schluß wird primitive noch der scene hinzugefügt:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;
primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);
}
5. Zu guter Letzt setzen wir noch einen ENTER_FRAME Event-Listener und weisen ihm die Methode onEnterFrame() zu. Hier lassen wir unsere Plane nun zur Laufzeit drehen und aktualisieren den renderer:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;
primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
Ganz zum Schluß speichern wir unsere AS-Datei und veröffentlichen die Flash-Datei. Als Ergebnis seht ihr eine sich permanent drehende 3D Plane, die mit wenig AS3 Code, Flash und Papervision erstellt wurde.
Hier nochmal der gesamte Code:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;
primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
}
}
Kostenloses Videotraining für Flash CS4
Auf der Galileo Press Website kann man sich aktuell einige kostenlose Video-Lektionen für Flash CS4 ansehen. In insgesamt 5 Lektionen lernt man wichtige Neuerungen in Flash CS4 kennen, die sicherlich für den ein oder anderen Flasher interessant sind. Flash-Trainer Helge Maus behandelt dabei folgende Themen:
1. Schnellstart-Workshop [12:58]
2. Das 9-teilige Segmentraster [4:09]
3. Objekbasierendes Bewegungs-Tweening [10:10]
4. Inverse Kinematik mit dem Bone-Werkzeug [10:40]
5. Auf Webseiten verlinken [3:54]
Die insgesamt über 40 Minuten andauernden Video-Tutorials kann man sich kostenlos direkt auf der Galileo Press Website ansehen. Wer mehr zu Adobe Flash CS4 wissen möchte, kann sich darüber hinaus den kompletten Workshop auf Lern-DVD kaufen.
Flash Tutorial: Webcam mit AS3 steuern
Eine Webcam mit Flash zu steuern ist mit AS3 zum Kinderspiel geworden. In AS3 gibt es dafür die Klasse Camera im Paket flash.media. Wir zeigen euch hier eine einfache Anwendung um das Bild der Webcam in eurem Flashfilm darzustellen.
1. Zuerst müssen wir ein Camera Objekt erstellen und mit der Methode getCamera() die Webcam ansprechen:
var cam:Camera = Camera.getCamera();
2. Nun müssen wir prüfen ob eine Webcam vorhanden ist und wenn ja, diese an ein Video Objekt anhängen und der Anzeigeliste hinzufügen:
if(cam != null){
var video:Video = new Video();
video.attachCamera(cam);
video.x = 10;
video.y = 10;
addChild(video);
}
Das wars, mehr ist nicht nötig um mit Flash eine Webcam zu steuern. Wie ihr seht, ganz einfach! Wenn ihr nun noch das Bild mit anderen Usern austauschen wollt, benötigt ihr einen Mediaserver. Die Daten werden dann mit Netconnection und Netstream übertragen.
Folge uns auf Twitter
