Anzeige
Tutorialbeschreibung

Webtipps 2.0

Webtipps 2.0

Nach meinem ersten Videotraining "Tipps und Tricks zum Webdesign" folgt hier ein zweiter Teil mit weiteren Kniffen, die das Screendesignen in Photoshop erleichtern. Zudem wage ich einen Blick über den Tellerrand und zeige kleine Tools auf, mit denen sich diverse Abläufe zusätzlich erleichtern lassen. Alle Tipps stehen für sich alleine, ein vorheriges Betrachten des ersten Teils ist nicht nötig, sinnvoll aber allemal.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign Vol. 2 - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


1. Hilfslinien entlang der Lineale einrasten lassen

Ähnlich wie Vektorgrafiken lassen sich Hilfslinien in Photoshop vollkommen frei und unabhängig von dem fürs Screendesign so wichtigen Pixelraster platzieren.

Hilfslinie lösgelöst vom pixelrasterBilder



Richtet man im weiteren Gestaltungsprozess dann ein Objekt an einer so versetzten Hilfslinie aus, platziert sich das Element wahlweise rechts- oder linksseitig, manchmal sogar zwei anstatt nur einen Pixel versetzt aus. Das sorgt für unstimmige Bündigkeiten.

Objekte werden falsch ausgerichtetBilder



Zieht man eine Hilfslinie jedoch mit gehaltener Shift-Taste aus der Linealleiste in die Arbeitsfläche, so rastet sie auf jeden Fall immer nur in ganzen Pixelschritten ein.


 

2. Interpolationsfehler vermeiden

Je nach persönlicher Arbeitsweise kann es eine gängige Praxis sein, Hintergrundflächen zu vergrößern, indem mit einem Auswahlrechteck eine Auswahl gezogen und dann deren Inhalt transformiert wird.

Ein Element wird über eine Auswahl transformiertBilder



Steht dabei die Interpolationsmethode (Voreinstellungen>Allgemeine) auf Bikubisch glatter, kann das zu hässlichen Nebeneffekten führen.

Voreinstellung Bikubisch GlatterBilder



 
Nach dem Transformieren der Auswahl versucht Photoshop, die Kanten der transformierten Auswahl zu glätten. Das verursacht teiltransparente Streifen und kann in Verbindung mit manchen Ebeneneffekten zu unberechenbaren Fehldarstellungen führen.

Fehlerhafte Darstellung nach TransformationBilder



Sofern nicht zwingend nötig, sollte die Option Bikubisch glatter also beim Screendesignen abgewählt sein.


3. Objekte gleichmäßig verteilen

Gerade beim Aufbau von Webseiten wiederholen sich Elemente häufig in gleichen Abständen, seien es Elemente in Listen, Menüpunkte mit gleichen Abständen etc. ...

Damit man hier nicht manuell Pixel um Pixel zurechtrücken muss, lassen sich Objekte automatisiert gleichmäßig verteilen. Im ersten Schritt werden das erste und letzte Objekt richtig positioniert.

Erstes und letztes Objekt positionierenBilder



 
Danach wählt ihr alle betroffenen Ebenen in der Ebenenpalette aus und klickt in der Optionsleiste auf das Icon für die horizontale (bzw. vertikale) Verteilung. Fertig.

Die Funktion "Horizontal gleichmäßig verteilen" ausführenBilder



Das gleiche Vorgehen funktioniert übrigens auch mit mehreren Ebenengruppen. Dabei behandelt Photoshop eine Gruppe als ein Objekt. Die Positionierung von Ebenen innerhalb der Gruppe bleibt unbeeinflusst.


4. Zeichen/Absatzstile simulieren

Nahezu jede Textverarbeitungssoftware erlaubt heutzutage das Anlegen von Textstilen (bzw. in Profisoftware Zeichen/Absatz-Formate genannt). In Photoshop klappt das nicht ohne Weiteres, es lässt sich jedoch mit einem kleinen Workaround simulieren.

Als Erstes erstellt ihr eine Textebene. Tragt in der Zeichenpalette (Fenster>Zeichen) für alle Parameter, die ihr für den Textstil speichern möchtet, beliebige Werte ein, die NICHT denen entsprechen, die ihr gerne verwenden möchtet (das klingt erst einmal unsinnig …).

Falsche Zeichen-Parameter einrichtenBilder



 
Nun wählt ihr eine beliebige Textebene und startet in der Aktionenpalette eine neue Aktion, in der ihr nun alle Textparameter so ändert, wie ihr sie wirklich haben möchtet. Stoppt danach die Aktion. (Photoshop zeichnet nur Veränderungen in einer Aktion auf. Das ist der Grund, warum zuerst falsche Parameter eingestellt werden müssen).

Aktion mit den korrekten Zeichenparametern aufzeichnenBilder



Legt euch auf diese Weise für jeden Schriftstil eine eigene Aktion an. Für jede zukünftige Textänderung muss nur noch einmal die Aktion ausgeführt werden. Noch schneller geht das übrigens, wenn ihr in den Optionen der Aktionenpalette den Schaltflächenmodus aktiviert.


 

5. Layout-Templates per Aktion

Um noch ein wenig bei der Funktionalität von Aktionen zu bleiben, hier ein Tipp, um sich per Knopfdruck eine optimale Web-Arbeitsumgebung zu schaffen. In 99% aller Fälle wird ein neues Webprojekt mit einer Datei in der Größe 1024 x 768 Pixel beginnen.

Danach werden sinnvollerweise an den Seiten und dem unteren Rand Hilfslinien zum Markieren des Viewports gezogen. Auch eine einfache Ordnerstruktur in der Ebenenpalette empfiehlt sich. Ganz zu schweigen von webgerechten Voreinstellungen wie dem Setzen der Maßeinheiten auf Pixel, Erhöhen der Protokollobjekte, Anpassen der Interpolationsart, den sRGB-Farbraum wählen etc.

Was spricht also dagegen, sich diese komplette Prozedur einmal aufzuzeichnen und bei jedem neuen Projekt einfach auszuführen? Gerade bezogen auf die Voreinstellungen läuft man nicht Gefahr, eine Einstellung zu vergessen und sich später darüber zu ärgern.


 

6. Der Skriptereignis-Manager

Ein letzter Tipp, um Dinge automatisiert ablaufen zu lassen: Ist der Skriptereignis-Manager ein Begriff? Wenn nicht, dann wird es höchste Zeit, nicht nur für Webprojekte, sondern überhaupt.

Über Datei>Skripten>Skriptereignis-Manager … öffnet ihr dieses Wortungetüm. Aber was kann er denn nun? Ganz einfach gesagt: Er fängt bestimmte Photoshop-Ereignisse ab und führt selbstständig eine Aktion oder ein Skript aus.

Dialog des SkriptereignisManagersBilder



 
Die Anwendungsmöglichkeiten sind vielfältig, darum hier nur ein konkretes Beispiel: Ihr speichert eure Arbeitsdatei nativ als Photoshop-Dokument, möchtet aber zusätzlich noch ein JPG, um es dem Kunden zeigen zu können.

Im Ereignis-Manager aktiviert ihr zuerst die Checkbox am oberen Rand. Als Photoshop-Ereignis wählt ihr Dokument speichern, denn es soll etwas geschehen, wenn ihr euer Dokument sichert. Nun könnt ihr ein Skript oder auch eine beliebige Aktion hinzufügen, die bei dem angegebenen Ereignis starten soll. In diesem Fall erfüllt das Skript Extra JPG speichern seinen gewollten Zweck.

Abschließend ist es wichtig, die Schaltfläche Hinzufügen zu betätigen, um das Skriptereignis endgültig zu aktivieren.

Zusätzlich gespeichertes JPGBilder



 

7. Bilder auf exakte Dateigröße reduzieren

Die nächsten Tipps beziehen sich auf das Komprimieren von Bildern fürs Web. Eine versteckte, aber durchaus interessante Möglichkeit ist die Option, Bilder auf eine bestimmte Dateigröße zu komprimieren. Der Befehl wird im Optionsmenü des Dialogs Für Web und Geräte speichern aufgerufen.

Optionen im Dialog "Für Web und Gerte speichern"Bilder



Unter Gewünschte Dateigröße lässt sich die Endgröße für die Datei angeben. Wer nicht weiß, ob JPG oder GIF die bessere Wahl ist, kann auch diese Entscheidung Photoshop überlassen.

Gewünschte Dateigröße eintragenBilder



 
Nach dem Bestätigen mit OK passt Photoshop alle Parameter so an, dass die gewünschte Größe erreicht wird. Natürlich können keine Wunder vollbracht werden.

Ein Bild mit 2000 auf 2000 Pixel wird nicht auf 1KB zu komprimieren sein. Dieser Automatismus übernimmt ausschließlich die Konfiguration der Speicher-Optionen.

Auf die gewünschte Größe angepasstes BildBilder



 

8. Bessere Kompression durch Weichzeichnen

JPGs werden umso besser komprimiert, je unschärfer sie sind. Hintergrundbilder auf Webseiten können mit einer Portion Weichzeichner also einerseits deutlich verschlankt werden, andererseits lenkt ein unscharfes Motiv auch nicht so sehr vom eigentlichen Inhalt ab.

Auch wenn im Für Web und Geräte speichern-Dialog eine Option angeboten wird, das Motiv weichzuzeichnen, sollte dieser Schritt zwecks besserer Kontrolle lieber manuell mit einem passenden Filter vorgenommen werden. Sehr gute Dienste leistet hier auch der selektive Weichzeichner: Konturen bleiben scharf, Flächen hingegen werden unscharf: Der Unterschied zum Original bleibt somit viel subtiler.

Vergleich von Original und weichgezeichnetem BildBilder



 

9. PNG24-Bilder komprimieren

PNG24-Bilder haben den großen Vorteil, dass sie verschiedene Transparenzabstufungen erlauben. Der Haken daran: Die Daten werden verhältnismäßig groß aus Photoshop exportiert.

Großes PNG nach Photoshop-ExportBilder



Mit kleinen kostenlosen Tools gelingt hier ein beachtlicher Feinschliff. Für OS X (Mac) bietet sich die Anwendungen ImageOptim oder ImageAlpha an (http://imageoptim.pornel.net), unter Windows gibt es unter anderen RIOT (http://luci.criosweb.ro/riot/download/).

 
Am Beispiel von ImageAlpha: Das große PNG wird einfach in die rechte Fläche gezogen. Über den Schieberegler im linken unteren Eck lässt sich das Bild komprimieren. Mit zunehmender Kompression geht die Farbanzahl verloren, doch selbst die kleinste Optimierung führt zu erstaunlicher Größenreduzierung – ohne dass es am Motiv selbst groß zu bemerken ist.

Oberfläche von ImageOptimBilder



 

10. ICO-Format ergänzen

Für den Feinschliff einer Website sorgt das Favicon, das bspw. in der Adressleiste des Browsers oder in den Bookmarks angezeigt wird. Dieses muss im .ico-Format vorliegen. Photoshop bietet allerdings von Haus aus keine Möglichkeit, in dieses Format zu exportieren.

Abhilfe schafft ein das kostenloses Plug-In „Ico Format“, das im Photoshop-Installationsverzeichnis in den Ordner Plug-Ins>File Formats gelegt wird. Beim nächsten Programmstart steht im Speichern-Dialog nun das neue Format zur Verfügung.

Ico-Format im Speichern-DialogBilder



Das Plug-In kann unter http://www.telegraphics.com.au/sw/ bezogen werden.


 

11. Paletten im Eigenbau (ab Photoshop CS4)

Eine kleine Anwendung, die offiziell von Adobe bereitgestellt wird, ist der Adobe Configurator. Er ermöglicht es, eigene Paletten für die Arbeit in Photoshop zu erstellen. Der Aufbau der Anwendung ist selbsterklärend. Nach dem Öffnen befindet sich in der Mitte eine leere Palette, die per Drag&Drop mit Werkzeugen, Befehlen und Widgets aus der linken Seitenleiste befüllt werden kann. Dabei stehen sämtliche Befehle aus Photoshop zur Auswahl. Auf diese Weise lassen sich die häufig benötigten Funktionen zentral in einer Palette ablegen. Der Name, der hier vergeben wird (rechts oben) entspricht der Bezeichnung der Palette in Photoshop.

Oberfläche des Adobe ConfiguratorBilder



 
Sobald die Palette fertig gebaut ist, muss sie über Datei>Fenster exportieren nur noch veröffentlicht werden. Photoshop lokalisiert automatisch das notwendige Verzeichnis. Beim nächsten Programmstart lässt sich die Palette über Fenster>Erweiterungen einblenden und wie jede andere Palette verschieben, kombinieren bzw. ein- und ausblenden.

Eigene Palette in PhotoshopBilder



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von spirit010
Portrait von mafal54
  • 01.06.2013 - 15:28

Teilweise sehr hilfreiche Tipps, zwischendurch aber auch "Standard" Wissen für Leute die schon ein paar mal mit Photoshop gearbeitet haben.

Portrait von cranos
  • 07.04.2013 - 01:14

viele nützliche Tipps dabei. Hat mir geholfen. Vielen Dank :)

Portrait von edaegelm
  • 15.02.2013 - 08:50

endlich kann ich favicons direkt aus ps exportieren ... Klasse Danke

Portrait von Rembremerding
  • 11.08.2012 - 10:48

Danke, war sehr nützlich und ich habe viel gelernt!

Portrait von gabphoto
  • 09.08.2012 - 16:36

Man lernt nie und immer wieder etwas dazu. Tipps die mir gut weiterhelfen.

Portrait von Spezia
  • 09.08.2012 - 10:42

danke...wieder einmal viele nützliche tipps...mehr davon bitte ;)

Portrait von tomess
  • 27.04.2012 - 09:01

Super Tipps. Vielen Dank.

Portrait von Bentley
  • 04.03.2012 - 22:18

Sehr nützliche Tipps in einer leicht verständlichen Übersicht. Toll!

Portrait von teste123
  • 14.01.2012 - 17:46

Vielen Dank für die Schöne Anleitung
MfG

Portrait von medienbox
  • 12.01.2012 - 22:07

Prima Tipps, einfach anzuwenden, super für die Praxis ... vielen Dank!

Portrait von Brassmaster
  • 11.12.2011 - 20:04

Einfach klasse. Habe aber im ersten Teil für mich mehr neues gefunden. Trotzdem sehr gut gemacht.

Portrait von Brassmaster
  • 11.12.2011 - 20:03

Einfacj klasse ! Tolle Tipps vom Profi!

Portrait von eldios
  • 01.12.2011 - 10:53

Einige sehr nützliche tipps dabei. Vielen Dank

Portrait von pTown
  • 15.11.2011 - 11:22

super tipps!!! weiter so...

Portrait von Tetra
  • 16.10.2011 - 21:00

Tolle Tipps! Weiter so!

Portrait von JeSa92
  • 05.10.2011 - 16:26

Hey, tolle Tipps und für Anfänger bestens geeignet
Sehr praktisch
Danke

Portrait von Snowtopheles
  • 12.09.2011 - 16:09

Gab ein paar neue sehr hilfreiche Tipps. Danke.

Portrait von tortillaInc
  • 06.09.2011 - 14:07

Danke, war sehr nützlich und ich habe viel gelernt! :)

Portrait von Roxy67
  • 02.09.2011 - 10:28

Sehr hilfreich und nützlich, danke!

x
×
×