info@a-coding-project.de

Freehand: Erstellung von Druck- und Webgrafiken

Nicht jede Illustration eignet sich für alle Ausgabemöglichkeiten. So benötigt eine Printgrafik eine Auflösung von mindestens 300 dpi während für Webgrafiken eine Auflösung von 72 dpi ausreicht. Das Speichern für diese unterschiedlichen Anforderungen ist in dem Zeichenprogramm FreeHand mit nur wenigen Klicks möglich. Und neben statischen Illustrationen lassen sich mit FreeHand auch Webanimationen speichern.

Druckgrafiken

Als Druckgrafiken sind hier gemeint Objekte oder ganze Dokumente die später im Printbereich eingesetzt werden. Zum Beispiel Logos für Briefpapier, Image- oder Produkt-Prospekte und viele andere mehr. Selbstverständlich können alle Objekte, die in FreeHand erstellt wurden, auch ausgedruckt werden. Für einen hochwertigen Druck werden Illustrationen mit einer Mindestauflösung von 300 Bildpunkten je Zoll vorausgesetzt.

Webprojekte

Da Vektorobjekte im Webbereich nicht üblich sind, können Sie diese über den Menübefehl Modifizieren -> in Bild konvertieren Bitmapbilder erzeugen. In dem Dialogfenster "In Bild konvertieren" können Sie unter drei verschiedenen Auflösungen wählen. Für die Webgrafik wählen Sie 72 ppi, um die konvertierte Vektordatei später als Druckgrafik zu verwenden wählen Sie 300 ppi und für Entwürfe 144 ppi. Man sollte aber bevor eine Vektorgrafik in eine Pixelgrafik konvertiert wird beachten, dass diese danach nicht mehr so beliebig skaliert werden kann.
Um ein Dokument für das Internet vorzubereiten kann man URL's eingeben, als HTML-Dokument speichern, in die Formate GIF, JPG und PNG komprimieren, Flash-Aktionen zuweisen und als SWF exportieren. Um einem Bild- oder Textobjekt eineURLzuzuweisen wird das entsprechende Objekt markiert und anschließend das Bedienfeld Navigation über Fenster -> Navigation geöffnet. In dem Bedienfeld wird in dem Feld Zeichenfolge bei einem markierten Text die markierte Zeichenfolge angezeigt, wird ein Bildobjekt verknüpft so ist das Feld Zeichenfolge leer und kann befüllt werden. UnterURLkann die Verknüpfungsadresse eingegeben oder unter dem Dropdown-Menü die entsprechende Adresse ausgewählt werden. Anschließend wird die gewünschte Aktion (meist GetURL) gewählt, daraufhin ergänzt FreeHand automatisch den Parameterbefehl _self und das Ereignis on(press). Um nach einer bestimmtenURLzu suchen sollte kein Objekt ausgewählt sein, dazu führen Sie den Menübefehl Bearbeiten -> Auswählen -> Nichts aus oder drücken einmal die Tabulatortaste. Wählen Sie anschließend in dem Bedienfeld "Navigation" in dem Dropdown-Menü die gesuchteURLund drücken dann rechts daneben auf die Schaltfläche "Suchen". FreeHand zeigt Ihnen nun alle Objekte, die mit dieserURLverknüpft sind mit einem farbigen Rand und einem Kästchen, in dem sich ein nach rechts oben zeigender Pfeil befindet, an. Wenn Sie zu einem späteren Zeitpunkt eineURLaktualisieren möchten gehen Sie sehr ähnlich vor. Auch dabei sollten Sie alle Objekte deselektieren. Dann wählen Sie in dem Bedienfeld "Navigation" im Dropdown-Menü Verknüpfung die entsprechendeURLaus und klicken rechts daneben auf die Schaltfläche "Suchen" nun können Sie die URL ändern.
Um ein Dokument im HTML-Format zu speichern ist es sinnvoll das Dokument mehrmals für die verschiedenen Browser zu speichern. Ein Dokument lässt sich über Datei -> Als HTML-Seite veröffentlichen in ein HTML-Format bringen. Mit Hilfe des Assistenten lassen sich Voreinstellungen, etwa welche Bildformate für Vektor und Pixelgrafiken verwendet werden sollen oder ob Positionierungen über Tabellen stattfinden sollen, einrichten. So sieht ein beispielhafter Quellcode eines mit FreeHand veröffentlichten HTML-Dokumentes aus.

<html>
 <head>
  <title>Untitled</title>
  <meta http-equiv="Content-Type" 
   content="text/html; charset=iso-8859-1">
  <script src="images/Untitled/fhhtml.js" language="JavaScript"
   type="text/javascript"></script>
 </head>
 <body bgcolor="#FFFFFF" text="#000000" link="#0000FF"
  vlink="#780078" alink="#FF0000">
  <div style="height:842; width:595; align:middle; 
   position:static; ">
   <div id="Layer1" style="z-index:1; z-order:1; height:292; 
    width:201; top:283; left:200; position:absolute; ">
    <script language="JavaScript" 
     type="text/javascript">Image01001();</script>
   </div>
  </div>
 </body>
</html>

Webanimationen

Mit FreeHand lassen sich Text- und Grafikobjekte animieren. Um einen Text zu animieren wird dieser ausgewählt und an der Startposition der Animation platziert. Anschließend wird der Text in einen Pfad konvertiert und zwar über den Menübefehl Text -> in Pfade konvertieren. Nun wird der Text markiert und der Befehl Modifizieren -> Verbinden und dann Bearbeiten -> Klonen ausgeführt. Die durch den letzten Befehl erstellte Kopie wird am Endpunkt der Animation platziert. Nun wird mit gedrückt gehaltener Umschalttaste das Original und die Kopie mit dem Teilauswahlwerkzeug markiert und dann der Befehl ausgeführt Xtras -> Erstellen -> Mischung. Um diese Mischung oder generell ein Objekt zu animieren gehen Sie wie folgt vor. Markieren Sie das zu animierende Objekt und öffnen Sie das Bedienfeld "Ebenen". Wählen Sie Xtra -> Animieren -> An Ebenen freigeben. In dem Dialogfenster "An Ebenen freigeben" bietet das Dropdown-Menü Animieren die Optionen Sequenz, Kompilieren, Ablegen und Nachstellen. Mit Sequenz werden die Objekte nacheinander an separate Ebenen freigegeben. Dadurch entsteht ein Effekt als würde sich der Startpunkt zum Endpunkt hin bewegen. Das Kompilieren bewirkt einen Stapeleffekt, es scheint als würde der Startpunkt zum Endpunkt hin aufgezogen wobei während der Animation die Zwischenstationen sichtbar bleiben. Beim Effekt Ablegen sind neben dem Start und Endpunkt alle Zwischenpunkte sichtbar und es wird zwischendurch nur jeweils ein Zwischenpunkt ausgeblendet. Nachstellen bedeutet, dass die Objekte kopiert und für die Anzahl der Ebenen freigegeben werden. Vom Ablauf sieht diese Animation aus wie Sequenz. Hat man die gewünschte Animationsoption im Dropdown-Menü ausgewählt dann kann man noch die Reihenfolge umkehren, die vorhanden Ebenen verwenden und oder das Objekt nach hinten stellen mit einem Klick auf die Schaltfläche OK wird die Animation auf das Objekt angewendet. Um die Animation zu testen wählen Sie Fenster -> Film -> testen.

Animationserstellung
Darstellung: Animationserstellung

In dem sich öffnenden Vorschaufenster können Sie die SWF-Datei abspielen oder jeden einzelnen Frame separat ansehen, aber auch als SWF exportieren oder die Filmeinstellungen ändern. Über die SWF-Schaltfläche unten mit der roten Umrandung lässt sich ein Dialogfenster für die "Filmeinstellungen" öffnen. Dort können Sie neben den Exportoptionen auch Filmeigenschaften wie die Anzahl der Bilder pro Sekunde oder die Hintergrundfarbe sowie Optimierungseinstellungen vornehmen. Um den Film dann als SWF zu speichern klicken Sie auf die Flash-Schaltfläche links daneben, suchen unter "Speichern" das Verzeichnis aus in dem die Datei gespeichert werden soll, tragen unter "Dateiname" den gewünschten Namen für die Datei ein, wählen als "Dateityp" SWF aus und bestätigen mit "Speichern".
Flash-Filme können aber auch in das Zeichenprogramm importiert werden. Dazu wählen Sie Datei -> Importieren und unter Dateityp "Macromedia Flash (*swf)" aus, suchen die zu importierende Datei und klicken auf "Öffnen". Auf der Zeichnungsfläche erscheint der Platzierungszeiger mit dem man die Datei an der entsprechenden Stelle im Dokument einfügen kann. Wenn Sie auf Ihrem Rechner auch Macromedia- Flash installiert haben, dann können Sie über die Schaltfläche "FreeHand è Flash " die, wenn ein Flash-Datei markiert ist, im Bedienfeld "Objekt" unten rechts zu finden ist, auch die importierte Datei in Flash zur weiteren Bearbeitung öffnen.

Farben für Print- oder Webausgabe einstellen

Je nach dem, ob ein FreeHand-Dokument als Print- oder Webausgabe genutzt werden soll sind unterschiedliche Farbbereiche, wie die Bildschirmfarben RGB oder die Druckerfarben CMYK notwendig. Um die Farbeinstellungen zu ändern drücken Sie gleichzeitig [Strg] + [U] oder wählen alternativ über das Menü Bearbeiten -> Einstellungen und aktivieren dort das Register Farben. Dort können Sie das Farbauszugsdruckerprofil einstellen. Wählen Sie dazu im Bereich Farbverwaltung unter Typ "Kodak Digital Science" und klicken dann auf die Schaltfläche "Einrichtung". In dem Dialogfeld "Einrichtung der Farbverwaltung" wählen Sie aus dem Dropdown-Menü Farbauszugsdrucker Standard (CMYK), denn diese Option erzielt bei den meisten Druckern recht gute Ergebnisse. Bestätigen Sie mit OK das Dialogfeld und anschließend im Dialogfenster "Voreinstellungen".

Arbeit speichern und exportieren

In FreeHand erstellte Illustrationen lassen sich in verschiedene Formate exportieren. Als Druckvorlage ist vor allem das PDF-Format geeignet. NebenPDFkann man eine Zeichnung auch in andere Formate exportieren zum Beispiel in EPS, TIF, PNG, GIF oder JPG. Die letzten drei sind, weil sie die Daten komprimieren, gängige Webgrafikformate.

Weiterlesen: ⯈ Praxisbeispiel erstellen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant