Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop Skripte

Photoshop spricht jetzt Javascript, Visual Basic und Apple Script. Seit Photoshop CS können Skripte die Funktionalität von Photoshop erhöhen. Den bekannten „Aktionen“ ähnlich, bieten sie erweiterte Möglichkeiten.

Aktionen zeichnen auf. Abläufe werden gespeichert und können später immer wieder genutzt werden. Skripte hingegen können ein Dokument analysieren und „Entscheidungen“ treffen.

Sie können in JavaScript (für beide Plattformen, Mac und Win), Visual Basic (Win) oder AppleScript (Mac) geschrieben werden. Jede Sprache hat Ihre Vorteile. Javascript ist unabhängig vom genutzten System, doch Visual Basic und AppleScript bieten Funktionen die Javascript nicht kennt, zum Beispiel das Starten eines anderen Programms oder die Interaktion mit einem Web-Server.

Installation
Um Photoshop Skripte zu installieren, fügen Sie das Skript in den Vorgaben Ordner von Photoshop ein. Der Pfad dahin könnte zum Beispiel so aussehen: C:\Programme\Adobe\Photoshop CS\Vorgaben\Skripte. Falls Photoshop geöffnet war, schließen Sie das Programm und öffnen es wieder. Unter „Datei -> Skripte“ finden Sie jetzt das installierte Skript.

Beispiel 1
Mit diesem Skript können Sie die Bilder eines Ordners öffnen, den Datei-Typ und die Größe ändern und die Bilder in einen anderen Ordner abspeichern lassen. So werden 10 PSD-Bilder mit 1200×1200 Pixel leicht 10 JPG-Bilder mit 200×200 Pixel.

Speichern Sie bildautomation.js unter C:\Programme\Adobe\Photoshop CS\Vorgaben\Skripte ab. In Photoshop finden Sie das Skript unter „Datei -> Skripte“.

DOWNLOAD BILD AUTOMATION SKRIPT

Screenshot
Skript Fenster

Beispiel 2
Das Skript Edge FX gibt einem geöffneten Bild einen Rahmen. Einige Beispiel-Kanten werden gleich mitgeliefert. Der Rahmen wird der Bildgröße angepasst und kann automatisch das Dokument des Rahmens verkleinern und drehen. Das Skript reagiert also auf die Vorgabe des geöffneten Dokuments.

Installieren Sie die Beispiel-Rahmen in einen „Edge FX“ Ordner unter C:\Programme\Adobe\Photoshop CS\ und Edge FX.js in C:\Programme\Adobe\Photoshop CS\Vorgaben\Skripte.

Und so funktioniert es: Öffnen Sie das Bild, das einen Rahmen bekommen soll. Klicken Sie auf „Datei -> Skripte“ und dann auf Edge FX. Wählen Sie einen Rahmen aus dem „Edge FX“ Ordner (Sie können natürlich auch eigene Rahmen verwenden).

DOWNLOAD EDGE FX SKRIPT

Screenshot
Skript angewendet

Skripte zum ausprobieren finden sich unter anderem bei Adobe.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Text auf Pfad

von Dirk Metzmacher

Die neuste Version von Photoshop, die Nummer 8, als „CS“ bekannt, ermöglicht es mit einer Funktion einen beliebigen Text auf einen selbst erstellten Pfad laufen zu lassen.

So funktioniert es:

Schritt 1:
Mit dem Zeichenstiftwerkzeug und „Pfade“ ausgewählt in den Optionen erstellen Sie grob den Verlauf einer Kurve.

Screenshot
Pfad erstellt

Schritt 2:
Wählen Sie das „Punkt-umwandeln-Werkzeug“, um den Verlauf der Kurve zu bestimmen. Klicken Sie dazu auf die kleinen Kästchen, halten Sie die Maustaste gedrückt und bewegen Sie den Mauszeiger.

Screenshot
Pfad angepaßt

Schritt 3:
Wählen Sie das Textwerkzeug aus, stellen Sie Schriftgröße, Art und Farbe wie sonst auch nach Geschmack ein und gehen Sie über den Pfad. Sie werden sehen, dass sich der Mauszeiger verändert. Klicken Sie auf die Linie und schreiben Sie Ihren Text.

Screenshot
Text geschrieben

Schritt 4:
Rastern Sie, wenn Sie möchten, die Textebene und aktivieren Sie nach Bedarf einige Ebenenstile.

Screenshot
Variation

Je schöner und interessanter Ihr Pfad ist, umso schöner wird auch das Ergebnis Ihrer „Textkurve“ sein.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Mit dem Bleistift gezeichnet

Um ein Bild mit dem Bleistift nachzuzeichnen, muss man kein Künstler sein. Wenige, einfache Schritte und Photoshop reichen bereits aus und eine realistische Bleistiftzeichnung entsteht.

Schritt 1:
Öffnen Sie ein Bild mit einem Motiv Ihrer Wahl. Klicken Sie im Menü auf „Bild -> Anpassen -> Sättigung verringern“.

Screenshot
Ausgangsbild in s/w

Schritt 2:
Kopieren Sie die Ebene durch „Ebene -> Neu -> Ebene durch Kopie“ und klicken Sie im Menü auf „Bild -> Anpassen -> Umkehren“.

Screenshot
Kopie umgekehrt

Schritt 3:
Stellen Sie den Ebenenmodus in der Ebenenübersicht von Normal auf Farbig abwedeln um.

Screenshot
Farbig abgewedelt

Schritt 4:
Benutzen Sie den „Filter -> Weichzeichnungsfilter -> Gaußscher Weichzeichner“ mit einem Radius von 1 bis 9. Die Stärke richtet sich nach dem Ursprungsbild. Verschieben Sie den Regler zwischen 1 und 9 hin und her, bis Sie mit dem Ergebnis zufrieden sind.

Screenshot
„gezeichnetes“ Bild

Einen interessanten Effekt erhalten Sie, wenn Sie auf einer eigenen Ebene Teile des Bildes kolorieren. Hier könnten Sie zum Beispiel das Auge des Adlers kolorieren.

Kategorien
Webdesign

Für den Druck

Sie arbeiten in einer kleinen Internetagentur und Ihr Chef wünscht zu einem Internetauftritt noch das passende Briefpapier. Sie möchten für Ihre eigene Firma einen Werbeprospekt oder ein Plakat entwerfen… Gehen Grafiken zum Druck gibt es wichtige Unterschiede zum Screendesign. Dies sollten Sie als Webdesigner unbedingt wissen.

Die Auflösung
Es reicht für Grafiken, die nur im Internet zu sehen sind, eine Auflösung von 72dpi. Für den Druck brauchen Sie jedoch mindestens 300dpi. Viel mehr ist nicht unbedingt notwendig, Ihre Druckerei wird mit 300dpi zufrieden sein. Sollte jemand 1200dpi verlangen, sagen Sie einfach, dass Sie mit der Qualität bei 300dpi zufrieden sind. Sie werden es auch sein.

Formate
Druckereien mögen keine .psd Dateien. Falls Sie eine CD mit Ihren Daten an die Druckerei schicken, können Sie als Sicherheit die .psd Datei mit auf die CD brennen. Freuen wird sich Ihre Druckerei über Bilder im .eps-Format im CMYK Farbraum.

Encapsulated Postscript (EPS) ist ein Dateiformat zur Speicherung von Vektorgrafiken, gesetztem Text, Rastergrafiken und ganzen Seitenlayouts.

Eine EPS-Datei enthält Objekt-, Rastergrafik- und Separationsdaten und optional eine Voransicht in geringer Auflösung zur Bildschirmdarstellung.

CMYK steht für Cyan, Magenta, Yellow (Gelb) und Key. Bei letzterem handelt es sich um eine so genannte Schlüsselfarbe, das heißt der Schlüssel zu sämtlichen Helligkeitsstufen. Anders als Bilder im RGB-Modus hat dieser Farbraum einen geringeren Farbumfang. Seien Sie nicht überrascht, wenn das Bild nicht so „strahlt“ und vergleichen Sie die Bilder der verschiedenen Farbräume. Bilder im TIFF-Format sind auch akzeptabel.

Programme
Photoshop ist nicht das ideale Werkzeug für Grafiken, die in der Druckerei weiterverarbeitet werden sollen. Benutzen Sie Photoshop nur im Notfall, besser sind QuarkXpress oder Adobes Indesign. Vektorprogramme wie Adobe Illustrator bieten sich ebenfalls an.

Sonstiges
Ein Plakat mit 60 x 100 cm bringt es schnell auf eine Dateigröße von bis zu 350 MB. Machen Sie es sich einfach und senden Sie Ihre Daten auf CDROM an die Druckerei.

Aufgrund der Schneidetoleranzen (etwa 2mm) bitten die meisten Druckereien darum, eine Datei um 4mm breiter und höher anzulegen – im Vergleich zum gewünschten Endformat. Dadurch kann ein unschöner weißer Rand bei ungenauem Beschnitt vermieden werden. Die genauen Größenangaben können Sie bei Ihrer Druckerei erfragen. Viele Betriebe bieten den Service, eine Vorlagendatei in der passenden Größe herunter zu laden.

Lassen Sie sich zur Sicherheit eine PDF Datei Ihres Bildes schicken. So können Sie kontrollieren, ob der Grafiker die gleiche Grafik (Farben, Schriftart) auf seinem Bildschirm sieht wie Sie.

Diese Tipps und Tricks sind für uns „normale“ Webdesigner, die nur selten Bilder in den Druck geben, ausreichend. Der Bereich „Druck“ ist schließlich eine Kunst für sich.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop Seminar – Werkzeuge zum Dritten

von Dirk Metzmacher

Auf so wichtige Standards wie das Text-Werkzeug, kann niemand verzichten. Doch auch spannende Werkzeuge, wie der Wischfinger, kommen nicht zu kurz.

Weich- und Scharfzeichner, Wischfinger:
Öffnen Sie wieder ein .JPG-Bild aus Ihrer Sammlung und probieren Sie die folgenden Werkzeuge aus.

1. Der Weichzeichner verwischt harte Kanten im Bild. Mit Hilfe des Weichzeichners können Sie zum Beispiel einen Hintergrund weich verwischen aber eine Person im Vordergrund scharf stellen.

2. Der Scharfzeichner macht natürlich genau das Gegenteil. Er zeichnet weiche Kanten im Bild wieder scharf.

3. Verwischen Sie Ihre Bilddaten mit dem Wischfinger. Diesen Effekt sollten Sie durch ziehen über das Bild gleich mal ausprobieren.


Weichgezeichnet, scharfgezeichnet und verwischt

Abwedler, Nachbelichter Schwamm:
1. Der Abwedler kann zu dunkle Bildbereiche aufhellen.

2. Sollten die Bildbereiche zu hell sein, schafft der Nachbelichter hier Abhilfe und dunkelt diese Bildbereiche nach.

3. Der Schwamm ändert die Farbsättigung eines Bereiches. So können Sie bestimmte Bereiche von einer Farbe befreien oder deren Sättigung erhöhen.


Aufgehellt, abgedunkelt und Farbe verringert

Textwerkzeuge:
Wenn Sie mit einem Textwerkzeug auf ein Bild klicken, wird das Werkzeug in den Bearbeitungsmodus gesetzt. Sie können jetzt Zeichen eingeben und bearbeiten. Sie müssen Änderungen an der Textebene immer durch einen Klick auf ENTER bestätigen, um gewisse Vorgänge ausführen zu können.


Textwerkzeuge angewendet

Form-Werkzeuge:
Verwenden Sie die Form-Werkzeuge zum Zeichnen von Linien, Rechtecken, abgerundeten Rechtecken und Ellipsen innerhalb eines Bildes. In Photoshop können Sie auch Polygone zeichnen und eigene Form-Bibliotheken erstellen. Diese Formate stehen Ihnen dann immer wieder zur Verfügung und können mit Freunden oder Kollegen getauscht werden.


Ergebnisse der Form-Werkzeuge


Die Form-Werkzeuge

Sonstige Werkzeuge:
Die Anmerkungen-Werkzeuge fügen schriftliche und Audio-Anmerkungen zu Bildern hinzu.

Die Pipette dient dem Aufnehmen von Farbe aus dem Bild.

Mit dem Messwerkzeug messen Sie zum Beispiel Abstände, Positionen und Winkel.

Das Hand-Werkzeug verschiebt ein Bild im Fenster. Ein Doppelklick auf dieses Werkzeug bringt Ihr Bild auf Bildschirmgröße, sofern die Fenster des Programms nicht im Weg stehen.

Das Zoom-Werkzeug vergrößert und verkleinert die Bildansicht. Sollten Sie zu tief in das Bild gezoomt haben, kommen Sie durch einen Doppelklick auf das Zoom-Werkzeug in die Ursprungsansicht zurück.


Sonstiges

Alles einmal ausprobiert, sind Ihnen die wichtigsten Werkzeuge des Programms nun bekannt.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Photoshop Seminar – Die Werkzeuge

von Dirk Metzmacher

Die ersten Schritte sind immer die schwierigsten. Werfen wir einen Blick darauf, was Photoshop uns an Werkzeugen zu bieten hat.

Die Werkzeuge
Sie sollten Photoshop bereits erfolgreich installiert haben und das Programm geöffnet auf dem Bildschirm sehen. Die vielen Fenster mit tausend Einstellungsmöglichkeiten verwirren anfangs. Das ist normal. Schließen Sie bitte alle Fenster, mit Ausnahme, der Werkzeugpalette.

Screenshot
Die Werkzeuge

Die groben Auswahlwerkzeuge:
Öffnen Sie ein .jpg-Bild aus Ihrer Sammlung. An erster Stelle in der Werkzeug-Palette stehen die Auswahl-Werkzeuge Auswahlrechteck, Auswahlellipse, Einzelne Zeile und Einzelne Spalte.

Sie sehen an der ersten Position nur das Auswahlrechteck? Photoshop bietet so viele Werkzeuge, dass die Entwickler sich einen kleinen Trick ausdenken mussten, um alle unterzubringen.

Klicken Sie mit der rechten Maustaste auf das erste Werkzeug. Sie sehen, hinter manchem Werkzeug verstecken sich andere. Mit den Auswahlwerkzeugen wählen Sie Bereiche eines Bildes aus, um diese getrennt vom Rest zu bearbeiten.

Screenshot
Die (groben) Auswahlwerkzeuge

Screenshot
Bildbereich mit Auswahlrechteck ausgewählt

Das Verschieben-Werkzeug:
Das nächste Werkzeug bringt Bewegung in Photoshop. Wählen Sie zunächst mit dem Auswahlrechteck einen Teil des Bildes aus. Klicken Sie dann auf das nächste Werkzeug in der Palette: Das Verschieben-Werkzeug. Verschieben Sie den ausgewählten Teil des Bildes um ein paar Pixel.

Screenshot
Verschieben-Werkzeug angewendet

Die feinen Auswahlwerkzeuge:
Auswahlwerkzeuge wie das Auswahlrechteck sind für große Flächen gedacht. Um im Detail zu arbeiten, brauchen Sie feinere Werkzeuge. Das Lasso mit seinen beiden Brüdern Polygon-Lasso und Magnetisches-Lasso ist der Spezialist unserer Wahl. Im Beispiel wurde ein Teil des Bildes mit dem Lasso ausgewählt und dann mit dem Verschieben-Werkzeug bewegt.

Screenshot
Lasso-Werkzeug angewendet

Die Lasso-Werkzeuge

Der Zauberstab:
Photoshop ist Magie. Und kein Werkzeug macht dies deutlicher als der Zauberstab. Mit ihm erzeugen Sie Auswahlen von Bereichen mit ähnlichen Farben. Klicken Sie etwa auf den blauen Himmel werden alle blauen Pixel ausgewählt. Einstellungen für dieses und alle anderen Werkzeuge machen Sie in der Options-Leiste für Werkzeuge oben unter dem Menü.

Screenshot
Zauberstab angewendet

Das Freistellungswerkzeug:
Mit diesem Werkzeug können Sie Bilder zurechtschneiden. Wählen Sie einfach den Teil des Bildes aus, den Sie behalten möchten und bestätigen Sie Ihre Wahl mit einem Doppelklick auf das Bild.

Screenshot
Bilder freistellen

Die Slice-Werkzeuge:
Sie können ein Bild in verschiedene Bereiche aufteilen. Diese Bereiche können später zum Beispiel in Rollover-Buttons verwandelt oder verschiedenen Formaten zugeordnet werden (JPG oder GIF).

Screenshot
Bilder teilen

Für jedes Werkzeug können später in der schon erwähnten Optionsleiste eigene Einstellungen vorgenommen werden.

Kategorien
Webdesign

Firmenlogo – Vom Papier ins Internet

Nicht selten hat eine Firma die Sie beauftragt das eigene Firmenlogo nur auf Papier und nicht als Vektorgrafik vorliegen. Auch mit einem Scan lässt sich eine hinreichende Qualität für das Internet herausholen.

Schritt 1:
Scannen Sie das Logo mit 600 dpi ein. Die hohe Auflösung erzeugt ein sehr großes Bild. Ein Vorteil ist das Verschwinden des Moire-Effekts beim Verkleinern des Bildes.

Screenshot
Logo eingescannt

Schritt 2:
Verkleinern Sie das Bild durch „Bild -> Bildgröße“. Ein Nachteil ist das unscharfe Ergebnis, das Sie erhalten.

Screenshot
Logo verkleinert

Schritt 3:
Um dem entgegen zu wirken, ändern Sie den Modus des Bildes durch „Bild -> Modus -> Lab-Farbe“ auf diesen Farbraum ab. Wechseln Sie von der Ebenenansicht in die Kanäleansicht und aktivieren Sie den Kanal „Lab-Helligkeit“. Benutzen Sie den „Filter -> Scharfzeichnungsfilter -> Unscharf maskieren“ mit Stärke 500%, Radius 0,2 Pixel und Schwellenwert 0.

Screenshot
Logo scharf gezeichnet

Wählen Sie das „Weiß“ um das Logo aus, drehen Sie die Auswahl um und kopieren Sie das Logo. Aktivieren Sie den Ebenenstil „Schlagschatten“. Die Qualität, die Sie hier erhalten, reicht für das Internet aus. Für den Druck sollten Sie das Logo in einem Grafikprogramm „nachbauen“.

Kategorien
Webdesign

Javascript – Praxis

Neue Werbeformen müssen her. Die alten Banner oder PopUps nerven jeden und haben kaum noch Wirkung. Statt aufwändiger Rich-Media-Formate reicht auch ein einfaches JavaScript. Es stellt Besucher wie Sponsoren zufrieden.

Live Demo

Die Werbung selbst besteht aus einer Tabelle mit Text. Natürlich können Sie auch Links oder Bilder einfügen. Die Tabelle ist von einem DIV-Tag eingeschlossen und wird durch style=“visibility:hidden“ nicht angezeigt. Dies ändert sich erst mit dem Befehl onload=initWerbung; im eigentlichen Script.

Diesen Teil kopieren Sie bitte inklusive der DIV-Tags in den <body>-Tag Ihrer HTML-Seite.

  <div id="SponsorWerbung" style="visibility:hidden">
  <table width="450" height="350" bgcolor="#333333"><tr><td>
  <table width="445" height="345" bgcolor="#FFFF00"><tr><td align="center"
  >
  <p><b>Bundle: 300 Tricks - VOL 1.0 + Dr. Web CD-ROM 1.3</b><br><br>
  Aktion bis 12.8.2002: Den Dr. Web Kaffeebecher gibt's GRATIS dazu!<br>
  300 Tricks und keiner weniger...,..., ohne lange Vorreden. Gelb gewinnt!
  </p><p><b>Bitte nehmen Sie sich die Zeit unsere Angebote zu
  erforschen.</b></p>
  <p>(Diese Werbung schließt sich in wenigen Sekunden von selbst)</p><br>
  </td></tr></table></td></tr></table>
  </div> 

Das nachfolgende JavaScript gehört in den <head>-Bereich Ihrer Homepage.

       <style type="text/css">
  <!--
  #SponsorWerbung {position:absolute; height:1; width:1; top:0; left:0;}
  -->
  </style>
  <SCRIPT LANGUAGE="JavaScript1.2"> 

Die Variable Werbezeit bestimmt, wie lange die Werbung angezeigt wird. Gezählt wird in Sekunden.

       Werbezeit=10; 
  Werbezahl=1;
  var ns=(document.layers);
  var ie=(document.all);
  var w3=(document.getElementById && !ie);
  adCount=0;
  

Durch onload weiter unten im Script wird die Funktion initWerbung ausgelöst und die Werbung gestartet.

       function initWerbung(){
  if(!ns && !ie && !w3) return;
  if(ie) adDiv=eval('document.all.SponsorWerbung.style');
  else if(ns) adDiv=eval('document.layers["SponsorWerbung"]');
  else if(w3) adDiv=eval('document.getElementById
  ("SponsorWerbung").style');
  randAd=Math.ceil(Math.random()*Werbezahl);
  if (ie||w3)
  adDiv.visibility="visible";
  else
  adDiv.visibility ="show";
  if(randAd==1) zeigWerbung();
  } 

Die Funktion initWerbung löst wiederum die Funktion zeigWerbung aus, die unter anderem die Position der Werbung bestimmt.

       function zeigWerbung(){
  if(adCount<Werbezeit*10){adCount+=1;
  if (ie){documentWidth =document.body.offsetWidth/
  2+document.body.scrollLeft-20;
  documentHeight =document.body.offsetHeight/
  2+document.body.scrollTop-20;}
  else if (ns){documentWidth=window.innerWidth/
  2+window.pageXOffset-20;
  documentHeight=window.innerHeight/
  2+window.pageYOffset-20;} 
  else if (w3){documentWidth=self.innerWidth/
  2+window.pageXOffset-20;
  documentHeight=self.innerHeight/
  2+window.pageYOffset-20;} 
  adDiv.left=documentWidth-200;
  adDiv.top =documentHeight-200;
  

Die Werbung soll im Beispiel 10 Sekunden lang angezeigt werden. Die 10 Sekunden wurden durch die Variable Werbezeit festgelegt.

Wie aber soll der Computer wissen, wann diese Zeit abgelaufen ist? Hier wurde durch setTimeout bestimmt, dass die Funktion zeigWerbung solange ausgeführt wird, bis der Wert 100 erreicht ist, was innerhalb der Funktion errechnet wird. Dann wird die Funktion Werbung_weg gestartet.

       setTimeout("zeigWerbung()",100);}else Werbung_weg();
  } 

Das Auslösen dieser Funktion läßt die Werbung verschwinden.

       function Werbung_weg(){
  if (ie||w3)
  adDiv.display="none";
  else
  adDiv.visibility ="hide";
  } 

Wie bereits mehrfach oben im Texte erwähnt, wird bei dem Laden der Seite die Funktion initWerbung ausgelöst.

       onload=initWerbung;
    //End-->
    </script>

Hoffen wir, dass den Sponsoren der neue Werbestil gefällt und die Kunden die Notwendigkeit tolerieren.