Kategorie: Photoshop

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.

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.

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.

Helle Pastell-Töne bei Young Miss

Rosa-Töne auch bei Glamour.de

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:

• Grün als Trendfarbe von Marcus Völkel
• Adam Polsellis Farbvorhersage für 2004

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.

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.

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.

Text geschrieben

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

Variation

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

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.