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 Photoshop

Zielgruppengerechte Farbwahl

von Nicolas Rotermund

Eine Kunden-Webseite in den persönlichen Lieblingsfarben gestalten, das kann gut gehen, auf der sicheren Seite ist man damit aber nie. Wer nicht durch eine Corporate Identity an bestimmte Farbwelten gebunden ist, steht vor einer schweren Aufgabe.

Zuerst sollte man daran gehen, vorhandene Unterlagen zu sammeln. Dazu gehören Firmen-Prospekte, Visitenkarten und das Firmenlogo. Damit hat man schon einmal ein Farb-Grundgerüst zusammen, auf das sich aufbauen lässt.

Der nächste Schritt besteht darin, die zu erreichende Zielgruppe zu ermitteln. Wichtig sind erst einmal nur Alter und Geschlecht. Dies fällt glücklicherweise bei den meisten Firmen und Produkten nicht schwer. Bei Artikeln wie Toilettenpapier sollte man von der Haupt-Käufergruppe ausgehen.

Screenshot
Farbwahl auf die Schnelle. Dieses Tool liefert ein nützliches Demonstrations-Layout. Passende Farbkollektionen können über Schieberegler ausgewählt werden.

Rasche Hilfe bekommt man nun, wenn man sich Konkurrenz-Seiten anschaut und deren Haupt-Farben zusammenträgt. Ein Screenshot genügt. Mit Programmen wie Photoshop werden daraufhinFarbflächen mit den wichtigsten Farben erstellt. Diese Farben könnten abgewandelt schon für das eigene Design herhalten, ein kurzer Blick auf die Farbpsychologie lohnt sich dennoch immer.

Für eine junge Altersgruppe bis 16 Jahren passen warme Farben am besten. Dazu gehören gelb, orange und rot. Die Farbe Orange steht für Energie, Genuss, und Aufregung. Rot steht für Kraft, Dynamik und Liebe. Gelb steht für Freude und Optimismus. Ein sehr helles Gelb wirkt leicht, gerade in Kombination mit Rosa. Diese warmen, fröhlichen Farben werden deshalb gern für die junge, dynamische Zielgruppe genutzt, weil sich mit ihnen luftige und verspielte Layouts prima umsetzen lassen.

Für eine ältere Klientel werden kühle Farben wie Blau und Grün bevorzugt, diese sollen seriös und ruhig wirken. Blau steht für Vertrauen und Zuverlässigkeit, Grün für Entspannung und Ruhe. Verschiedene Grau-Töne stehen für Sachlichkeit und Funktionalität.

Screenshot
Farbvergleich

Im Farbvergleich zwischen dem Online-Auftritt der Bravo gegen Focus Money Online zeigt sich, dass diese Farbwelten dort auch genauso genutzt werden. Die Jugend-Orientierte Bravo nutzt Gelb- und Rot-Töne in verschiedenen Abstufungen, Focus Money hauptsächlich Blau und Grau. Diese Beispiele sind aber keine Ausnahme, sondern die Regel.

So sind im Vergleich die Unterschiede in den Farbwelten der meisten Seiten einer Branche minimal, die Farbtöne unterscheiden sich oft nur in Nuancen und der Art der Verwendung, welche Farbe also für welche Elemente der Seite genutzt wird. Auch das alte Klischee Mädchen = rosa, Jungs = blau wird beim Design sehr oft wieder aufgegriffen. So nutzen Frauen-Seiten auffallend viele helle Pastell- und Rosa-Töne, während sich viele Männerseiten auf dunkle, kräftige und vorwiegend blaue Farben stützen.

Screenshot
Helle Pastell-Töne bei Young Miss

Screenshot
Rosa-Töne auch bei Glamour.de

Screenshot
Männerseite: Auto-Bild

Natürlich kann man mit solchen Regeln brechen und absichtlich andere Farbwelten einsetzen. Wenn man die Farbwahl dem Kunden gegenüber begründen kann und sie sinnvoll zum Firmenimage passt, spricht nichts gegen mutige Stilbrüche.

Links:

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
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Tutorials

Ebenentricks für schnelleres Arbeiten

Mit Photoshops Ebenen-Menü lassen sich Bildteile optimal trennen, sowie gezielt ein- und ausblenden. Aber das ist nicht alles. Einige Funktionen lassen sich eben nicht über das Ebenenmenü aufrufen. Tricks, die helfen schneller mit mehreren Ebenen umzugehen.

Sollen mehrere Ebenen zusammengefügt als neue Ebene genutzt werden, ohne dass die ursprünglichen Originalebenen dabei verloren gehen, müssen diese nicht einzeln kopiert werden. Stattdessen erstellt man zuerst eine neue, leere Ebene über die alle anderen Ebenen geschoben werden. Wählen Sie diese neue Ebene aus und verbinden Sie sie mit allem, was zusammengeführt werden soll.

Screenshot
Verknüpfte Ebenen

Ein Druck auf STRG, ALT und E kopiert nun die Inhalte der verbundenen Ebenen in die neue, leere Ebene. Die Ursprungsebenen werden dabei ignoriert und bleiben auch später noch als eigene Ebenen verfügbar. Drückt man stattdessen STRG, SHIFT und E, würden sie auch zusammen kopiert, die Originalebenen aber gelöscht werden.

Sollen mehrere Ebenen eines Dokumentes gmeinsam in die Zwischenablage exportiert werden, müssen diese nicht erst zusammengefügt werden. Um dies zu erreichen werden alle Ebenen ausgewählt und miteinander verbunden, die auch in der Zwischenablage zusammengestellt werden sollen.

Mit den Auswahlwerkzeugen oder STRG und A wird jetzt der zu kopierende Bildteil ausgewählt und mit STRG, SHIFT und C kopiert. Beim Einfügen in ein neues Dokument sind alle verbundenen Ebenen bereits auf einer einzigen Ebene platziert.

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
Bilder & Vektorgrafiken bearbeiten Design Photoshop

PHP: Schnell und einfach Bilder zeigen

Da hat man, zum Beispiel auf einer Präsentation oder Messe, zahllose Bilder gemacht, und möchte diese nun schnell den Kunden und Interessenten über die Website präsentieren. Mit dieser Lösung ist es das besonders rasch und einfach erledigt.

In der Basisversion durchsucht unser kurzes Skript ein Verzeichnis und listet alle Bild-Dateien verkleinert in einer Tabelle auf. Ein Klick öffnet ein Fenster mit dem Bild im Originalformat.

Live-Demo:

< ?php $dir = "../muster/bildershow"; $handle=opendir($dir); $hoehe_klein = 40; $breite_klein = 40; $tabelle_max = 300; $tabellen_zellen = floor($tabelle_max / $breite_klein); $zaehler = 0; echo "

„; while ($file = readdir ($handle)) { if(ereg(„_klein.gif“, $file) || ereg(„_klein.jpg“, $file) || ereg(„_klein.png“, $file) ) { $datei = „$dir/“.str_replace(„_klein“,““,$file); $size = getimagesize($datei); $breite = $size[0]; $hoehe = $size[1]; if($zaehler >= $tabellen_zellen) { echo ‚‚; $zaehler = 1; } else { $zaehler++; } echo ‚

‚; } } echo ‚

‚; ?>

Quellcode für die Hauptdatei

 <html>
<?php
$dir = "bilder_ordner";
$handle=opendir($dir);
      $hoehe_klein 
= 40;
$breite_klein = 40;
$tabelle_max = 300;
$tabellen_zellen = floor($tabelle_max / $breite_klein);
$zaehler = 0;
      echo "<table width=$tabelle_max\" 
cellpadding=4 cellspacing=0><tr>";
while ($file = readdir ($handle)) {
if(ereg(".gif", $file) || ereg(".jpg", $file) || ereg(".png", $file) ) {
$datei = "$dir/$file";
$size = getimagesize($datei);
$breite = $size[0]; $hoehe = $size[1];
if($zaehler >= $tabellen_zellen) { echo '</tr><tr>'; $zaehler = 1; } else { $zaehler++; }
echo '<td><a href="#" onclick="window.open(\'oeffner.php?datei='.$datei.'\', \'fenstername\', \'scrollbars=0,toolbar=0,location=0,directories=0,
status=0,resizable=0,width='.$breite.',height='.$hoehe.'\'); return false;"><img src="'.$datei.'" width="'.$breite_klein.'" height="'.$hoehe_klein.'" border=0></a></td>';
}
}
echo '<tr></table>';
?>

Die Bilder sollten jetzt nur noch in einer dem Web gerechten Größe in einem eigenen Ordner liegen. Sie werden automatisch ausgelesen, als kleine Vorschau angezeigt und verlinkt. Die Vorschau besteht in dieser Basisvariante aber nicht aus einer extra Thumbnail-Grafik, sondern aus der vollen Grafik, vom Browser heruntergerechnet. Das lässt sich später bei Bedarf noch ändern. Der Pfad des Ordners muss in Zeile vier der Variable $dir übergeben werden, allerdings ohne abschließenden „/“.

Für die Anzeigegröße sind die Zeilen sechs bis acht zuständig. Hier wird die Größe für die Vorschau angegeben und die maximale Breite der Tabelle. Je breiter die Tabelle, desto mehr Bilder werden nebeneinander angezeigt. Die Anzahl der Tabellenzellen errechnet sich in Zeile neun aus der Breite der Tabelle durch die Breite der Bilder. Mit dem Zusatz floor() werden die Nachkommastellen abgeschnitten.

Schließlich wird für jede Datei des Ordners, wenn sie die Endung .gif, .jpg oder .png hat über den Befehl size = getimagesize($datei) die Breite und Höhe des Bildes ausgelesen. Über $size[0] und $size[1] stehen dann Breite und Höhe als Variablen zur Verfügung. Dies ist für die Tabelle zwar egal, aber wichtig für die Größe des PopUp-Fensters mit der richtigen Version des Bildes.

Die zweite benötigte Datei oeffner.php bestimmt das Aussehen des PopUp-Fensters, welches die Maße des Original-Bildes bekommt. Das Bild wird ohne Rahmen angezeigt, ein Klick darauf schließt das Fenster dann wieder. In dieser Datei muss nur der <Title>-Tag angepasst werden, alles andere kann beibehalten werden.

      <HTML><HEAD><TITLE>Vorschau</TITLE></HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="self.focus()">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="100%" HEIGHT="100%">
<TR><TD ALIGN=center HEIGHT="100%">
<A HREF="#" onClick="window.close();return false"><IMG SRC="<?=$datei?>" BORDER=0 alt=""></A>
</TD></tr></TABLE></BODY></HTML>

Diese Methode hat einen Nach- und einen Vorteil. Da jedes Bild erst einmal in der vollen Größe eingelesen werden muss, dauert die Anzeige der Tabelle bei vielen und großen Bildern recht lange. Auch ist die Qualität des Browser-Resize nicht sehr fein gezeichnet. Die geladenen Bilder befinden sich dann aber alle im Cache des Browsers, per Klick wird die große Anzeige im PopUp dafür blitzschnell geöffnet.

Als Lösung könnte man eine Voransicht für jedes Bild des Ordners generieren. Das erledigt am besten ein Bildprogramm wie Photoshop oder Paint Shop Pro. Die kleinen Vorschaubilder sollten den gleichen Namen tragen wie die Vollversionen, nur mit dem Zusatz „_klein“. Die Bilderliste würde dann so aussehen: bild1.jpg, bild1_klein.jpg, bild2.jpg, bild2_klein.jpg …

Der Einfachheit halber haben alle kleinen Bilder die gleiche Größe, die auch im Quellcode der Datei bilder.php für $hoehe_klein und $breite_klein eingetragen ist (Zeile sechs und sieben). Suchen Sie in dieser Datei nun nach der Zeile

      if(ereg(".gif", 
$file) || ereg(".jpg", $file) || ereg(".png", $file) ) {
    

und ersetzen Sie alles bis zum Ende durch diesen Quellcode:

      if(ereg("_klein.gif", 
$file) || ereg("_klein.jpg", $file) || ereg("_klein.png", 
$file) ) {
$thumbnail = "$dir/$file";
$datei = "$dir/".str_replace("_klein","",$file);
$size = getimagesize($datei);
       $breite = $size[0]; $hoehe = 
$size[1];
if($zaehler >= $tabellen_zellen) { echo '</tr><tr>'; $zaehler = 1; } else { $zaehler++; }
echo '<td><a href="#" onclick="window.open(\'oeffner.php?datei='.$datei.'\', \'fenstername\', \'scrollbars=0,toolbar=0,location=0,directories=0,
status=0,resizable=0,width='.$breite.',height='.$hoehe.'\'); return false;"><img src="'.$thumbnail.'" width="'.$breite_klein.'" height="'.$hoehe_klein.'" border=0></a></td>';
}
}
echo '<tr></table>';
?>

Damit werden dann alle kleinen Thumbnail-Bilder angezeigt, das Popup zeigt aber weiterhin die großen Versionen.