Im turbulenten Weihnachtsgeschäft zeigen wir uns einmal wieder von der sozialen Seite und verlosen erneut drei Exemplare unseres erfreulich gut angenommenen Erstlings-Werks. Im Zuge des Relaunches meiner Portfolioseite stifte ich dort drei Exemplare. Die Teilnahmebedingungen könnt Ihr in meinem Blogeintrag nachlesen

In diesem Zuge auch ein großes Dankeschön an die bisherigen Leser und Kritiker. Es ist wirklich beachtlich, was da an (überwiegende positivem) Feedback zurück kommt. Das schreit nach einer spannenden zweiten Auflage.

Schöne und besinnliche Weihnachtstage wünsche ich hinaus ins weite www,
 Philip

Nun stehen Sie fest, die Gewinner der Verlosung unseres Fachbuchs „Webdesign mit Photoshop“. Jeweils ein Exemplar geht an

• - Rene Blanke (www.web-kreativ.com)
• - Rony
• - Andreas Christ (www.andreas-christ.net)

Die Gewinner wurden bereits benachrichtigt. Sollten die eMails im Spam-Filter hängengeblieben sein, meldet Euch einfach unter info [at] webdesign-mit-photoshop [Punkt] de, damit der Postmann auch den richtigen Briefkasten findet.

Allen anderen danken wir für Ihre Teilnahme und die damit verbundene Unterstützung. Als kleinen Trostpreis werden wir nun regelmäßig neue Artikel rund um die Themen Webdesign und Photoshop veröffentlichen. Füttert Eure RSS-Reader mit unserem Feed, um auf dem aktuellsten Stand zu bleiben.

Nach einem langen Werdegang ist es nun endlich soweit, unser Buch „Webdesign mit Photoshop“ erblickt das Licht der Welt und kann auf gewohnten Wegen über den analogen und digitalen Buchhandel (Amazon, Galileo) bezogen werden.

Wir nehmen dies zum Anlass und bieten Euch die Chance, hier an dieser Stelle drei Exemplare unserer Arbeit jeweils im Wert von 39,90 € gewinnen zu können. Lediglich zwei Dinge müsst Ihr für eine Teilnahme tun:

1. Verfasst einen kleinen Beitrag im Web über dieses Gewinnspiel. Ob dieser in Eurem eigenen Blog steht, ein Tweet auf Twitter, ein Video auf YouTube, Tonschnipsel auf AudioBoo oder auf einer anderen Plattform zu finden ist, bleibt vollkommen Euch überlassen, solange ersichtlich ist, daß der Beitrag von Euch stammt und auch verlinkt werden kann.
2. Damit wir nichts übersehen, schreibt davon in den Kommentaren dieses Artikels. Bitte gebt eine valide eMail-Adresse an (wird nicht veröffentlicht), damit wir Euch umstandslos kontaktieren können.

Der Gewinner wird per Losverfahren ermittelt. Einsendeschluß ist der 15. Juli 2009. Der Rechtsweg ist natürlich ausgeschlossen.

Wir hoffen auf eine rege Teilnahme und wünschen Euch viel Glück.

Wir haben uns bemüht, in unserem Buch ein möglichst breites Spektrum an Wissen zu vermitteln, dass Sie für das Gestalten eigener Websites benötigen. Dennoch konnten, auch aus verlagstechnischen Gründen, nicht alle gewünschten Inhalte Einzug finden.

Auf dieser Seite möchten wir dem Leser in Zukunft den Service bieten, kostenlose Ergänzungen zu unserem Buch in Form kurzer Artikel und Workshops zu erhalten. Dies können unter Anderem vertiefende Inhalte sein, oder auch dir Richtigstellungen von Fehlern, die sich ganz bestimmt, trotz sorgfältiger Kontrolle, hier und da ins Buch eingeschlichen haben.

Sie haben zudem die Möglichkeit, sämtliches Arbeitsmaterial herunter zu laden. So können Sie auch dann problemlos alle Workshops bearbeiten, wenn Sie einmal die DVD verlegt haben.

Die Weblinks führen Sie zu informativen Seiten im Web, die Ihnen die Möglichkeit geben, intensiver und tagesaktuell in die verschiedenen Teilgebiete des Webdesigns einzutauchen. Wenn Sie sich ernsthaft mit Webdesign beschäftigen wollen, führt kein Weg an einer konstanten Beobachtung der Entwicklung der Szene vorbei.

Selbstverständlich sind wir auch an Ihrer Meinung interessiert. Für ein freundliches oder kritisches Feedback, Anregungen oder Rückfragen zum Buch steht Ihnen das Forum zur Verfügung, wo wir Ihnen gerne Rede und Antwort stehen.

Nach kurzer Absprache mit René, den ich mir als technischen Backup sicherte, folgte dann die Zusage an Galileo.

Phase 1: Vorbereitung

Es folgte eine intensive Zeit der Konzeptfindung. Wen wollen wir ansprechen, was soll vermittelt werden? Im Gegensatz zu vielen anderen Photoshop-Büchern stellte sich uns von Beginn an das Problem, das Photoshop kaum konkrete Werkzeuge zum Gestalten von Screendesigns bietet. Elemente die auf einer Website vorkommen sind keine spezifischen Effekte, sondern die Kombination aus Kreativität und dem beherrschen nahezu aller Standard-Funktionen von Photoshop. Wir hatten also die Wahl, gezielt trendige Stile zu beschreiben oder aber den Versuch zu unternehmen, ein solides Wissen zu Photoshop zu vermitteln und dieses mit den typischen Anforderungen eines Webdesign-Workflows zu verknüpfen. Wir haben uns recht schnell für den zweiten Ansatz entschieden, da wir dem Leser einen dauerhaften Mehrwert vermitteln wollten und kein Standbild der aktuellen, sich aber schnell ändernden Gegebenheiten.

Eine weitere Problematik beim Entwickeln des Konzepts bestand in der Notwendigkeit, für die einzelnen Kapitel und Bereiche, zumindest annähernd, den Umfang festzulegen. Ohne Kenntnisse über den späteren Satzspiegel wahrlich keine einfache Aufgabe. Zudem hatten wir keine Vorlaufzeit in der wir uns lange mit der Thematik hätten beschäftigen konnten, wie es der Fall gewesen wäre, wenn wir den ersten Schritt zum Verlag unternommen und nicht andersherum. Im Nachhinein betrachtet ist es uns jedoch erstaunlich gut, wenn natürlich auch nicht perfekt, gelungen.

Ende Oktober wurde das Konzept nach mehrfachen kleineren Anpassungen verlagsintern abgesegnet und die eigentliche Arbeit am Buch begann.

Mit der Informationsrecherche hat sich die Anzahl der Lesezeichen im Browser sicherlich mindestens verfünffacht- und selbst das ist bestimmt noch untertrieben. Der letztendlich daraus entstandene Pool an Informationen wurde so groß, dass alleine das Durchforsten des Materials gefühlt langer dauerte, als das anschließende Schreiben der Kapitel selbst.

Phase 2: Das Schreiben beginnt

Parallel zur Recherche starteten wir direkt mit dem Kapitel „Bildbearbeitung mit Photoshop CS4 durch“ und gingen dabei auf erste Tuchfühlung mit unserem (zwangsläufig zu verwendenden) „Autorensystem“ Microsoft Word, das uns während des gesamten Projektes ein Dorn im Auge bleiben sollte.

Nichtsdestotrotz folgte Anfang Januar unsere erste gemeinschaftliche Arbeitswoche in Würzburg. Mit dem Kapitel „Raster“ stimmten wir die Zuarbeit von gestalterischen und technischen Inhalten ab und organisierten uns einen optimalen Workflow. Ein klein wenig hinderlich waren hier unsere antrainierten Arbeitszeiten. Während René meist erst Abends ab 22 Uhr beginnt, auf Hochtouren zu laufen, startet bei mir nur wenig später der mentale Abbau. Wir können aber guten Gewissens festhalten: Es kam selten vor, das wir beide zum gleichen Zeitpunkt ausgebrannt waren.

Nachdem dieses Kapitel nach Einsicht von Galileo sowohl formal als auch von Art und Weise des Schreibstils abgesegnet wurde, setzten wir unsere Arbeit an den einzelnen Kapiteln wieder getrennt in München bzw. Halle fort. Die Abstimmung erfolgte nun vorrangig über ICQ und Skype. Ein Hoch hier auf auch auf Subversion, das wir während unseres Projekts optimal ausnutzen konnten (für die Interessierten: Zu Projektschluss sind wir bis zu Revision 242 gekommen).

Phase 3: Schreib-Endspurt

Mit dem Erreichen der Workshop-Kapitel wurde unser näheres Umfeld umso intensiver eingespannt und es folgten ausgiebige Tests bezüglich Verständlichkeit und Korrektheit. Es war sehr erfreulich und auch motivierend, dass ohne Ausnahmebei allen unseren Probanden die Wertschätzung und das Verständnis für die Komplexität von gutem Webdesign gestiegen sind. Es folgten nochmals teils recht massive Anpassungen der Workshops, um sie eingänglicher und informativer zu gestalten.

Um Ostern herum trafen wir uns erneut zu einer Arbeitswoche in Würzburg. Diesmal ging es in erster Linie um ein abschließendes „internes“ Korrigieren und das Aufbereiten der DVD-Inhalte und der Website zum Buch. Im Vergleich zum ersten Treffen war es zumindest für mich entspannter und ich konnte aufgrund meines perfekten Zeitmanagements (*Eigenlob stinkt*) abends auch einmal Schafkopf spielen gehen, während René den Fleißigen mimte.

Phase 4: Korrekturen, Korrekturen und… Korrekturen

Die vorletzte große Hürde vor der Fertigstellung stellte sich mit den vielen Korrekturläufen ein. Gemeinsam mit Katharina Geißler von Galileo Press ergaben sich hitzige Diskussionen bzgl. Umstrukturierung oder Ergänzung von Inhalten. An dieser Stelle auch nochmals ein großes Dankeschön an Manuela Hofmann, die uns als Fachlektorin nochmals einige gute Impulse geben konnte.

Mit der Satzfahne, einem PDF-Dokument welches das spätere Druckergebnis optisch 1:1 simuliert, hatten wir abschließend noch in zwei Durchläufen die Möglichkeit, auf im Satz entstandene Fehler zu reagieren. Dieser Schritt war, wider Erwarten nochmals sehr zeitintensiv, was auch unsere Kunden zu spüren bekamen, die nach Fertigstellung des Manuskripts direkt vor der Satzfahne, bereits wieder ein fester und „unüberspürbarer“ Bestandteil unseres Alltags wurden.

Das Cover gab unseren nackten Buchseiten letztendlich noch ein passendes Kleid. Gemeinsam mit dem Grafiker von Galileo haben wir uns bemüht, aus den vielen entstandenen Ideen ein Cover zu erstellen, das die Inhalte des Buches auf einen Blick vermittelt. Am Ende dieses Artikels findet Ihr zwei Modifikationen bzw. Neuansätze die wir unter anderem vorgeschlagen hatten.

Das Problem

Die schlechte Nachricht: Je nach Messung und statistischer Auswertung nutzen immer noch ca. 10 - 20 % den Internet Explorer 6 (Stand: Juni 2009), der einzige noch relevante Browser, der nativ PNG-Grafiken nicht im vollen Funktionsumfang unterstützt (und auch in vielen anderen Aspekten versagt). Zwar zeigt der IE6 PNGs an, jedoch wird jeder (semi-) transparente Pixel anstatt mit dem eigentlichen Hintergrund mit einer statischen, türkisähnlichen Hintergrundfarbe gerendert. Dieser Umstand ist weder schön noch ästhetisch tolerierbar. Das Ignorieren des Browsers ist häufig auch keine Lösung, da die wenigstens Website-Betreiber mindestens 1/10 ihrer Besucher verprellen möchten.

Um sich des Problems zu entledigen, existieren mehrere Wege. Zum einen ließe sich im IE6 gänzlich auf transparente PNGs verzichten und stattdessen GIFs einsetzen. Da diese aber nur die Zustände durchsichtig oder Vollfarbe kennen, entsteht an Rändern meist eine unschöne Pixelkante.

Die gängige Lösung

Nun könnte man meinen, der IE6 ist schon ein altes Stück Software (erschienen am 27. August 2001) und der damalige Stand der Browser-Technik (de facto erhielt dessen Renderengine in all den Jahren nie eine nennenswerte Aktualisierung) war einfach noch nicht so weit. Doch kurioserweise bewegt der proprietäre Filter AlphaImageLoader den IE6 zu einer vollständigen Darstellung der PNG-Transparenz. Warum dies nicht gleich nativ eingebaut wurde, liegt wohl irgendwo tief in der Microsoft’schen Produktphilosophie verborgen.

Die Anwendung des Filters erfolgt in einer per Conditional Comments nur für den IE6 sichtbar gemachten CSS-Datei (siehe hierzu Kapitel 10 im Buch Webdesign mit Photoshop) und der Anweisung:

#button {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='image' src='./button.png');
}

Dabei wird das eigentliche Hintergrundbild mit der AlphaImageLoader-Methode ersetzt. Dies hat unter anderem zur Folge, daß weitere Hintergrundattribute wie repeat und position keine Wirkung mehr zeigen. Leidlich entgegenwirken lässt sich dem durch die sizingMethod zugewiesenen Werte. Zur Verfügung stehen image, crop und scale.

• image reduziert das HTML-Element auf die Größe der Grafik
• crop setzt das Bild ohne Skalierung in das HTML-Element an der linken oberen Ecke beginnend
• scale verzerrt die Grafik auf die Größe des HTML-Elements

Mit der letztgenannten Methode lässt sich die Wiederholung des Hintergrundes simulieren. Zumindest funktioniert dies bei Grafiken, die in eine Dimension nur einen Pixel messen und in der anderen die jeweilige Größe des HTML-Elements einnehmen. Die Zerrung des 1 px großen Seite wirkt wie eine echte Wiederholung der Grafik. Glücklicherweise ist dies auch ein häufig aufkommender Anwendungsfall.

Als Dreingabe des inkompatiblen Verhaltens lässt der IE6 bei derart behandelten Elementen keine Interaktion mit den darin befindlichen Inhalten zu, so daß Links nicht mehr klickbar und Formularelemente nicht mehr nutzbar sind. Abhilfe schafft oft aber doch recht unzuverlässig das Zuweisen einer relativen Positionierung:

#button a {
	position: relative;
}

Neben diesen schwerwiegenden weil stellenweise unkontrollierbaren Nachteil kommt ein weiteres Ärgnis hinzu: Relative Pfade beziehen sich nicht wie in CSS-Anweisungen sonst üblich auf die Stylesheet-Datei, sondern nehmen das aufgerufene HTML-Dokument als Ausgangspunkt. Das mag im ersten Moment wenig fatal klingen, doch kommt man schnell in Verlegenheit, sollte sich die Pfadtiefe ändern:

http://www.domain.tld/erste-ebene/
http://www.domain.tld/erste-ebene/zweite-ebene/
http://www.domain.tld/erste-ebene/zweite-ebene/dritte-ebene/ usw.

Eine auf das HTML-Dokument bezogene relativer Pfad wie ./../layout/hintergrund.png ist schon mit der zweiten Ebene überfordert. Würde dieser sich hingegen auf die Lage der CSS-Datei beziehen, ist es egal, wie tief der URL-Pfad reicht, da sich die Bilder und Stylesheets immer an der gleichen Stelle befinden.

Natürlich lässt sich das Dilemma mit der Angabe eines absoluten Pfades wie http://www.domain.tld/layout/hintergrund.png leicht umgehen. Doch bleibt der schale Beigeschmack, diesen bei einer Domainänderung (z.B. beim Veröffentlichen der Website vom lokalen Speicher auf den Webspace) anpassen zu müssen.

Ein komfortabler Weg

Zumindest die Pfadinkonsistenz lässt sich mit einem kleinen Trick leicht umgehen, der im Laufe eines Webentwicklerlebens Zeit und Nerven spart. An dieser Stelle machen wir uns eine weitere nicht standardkonforme Technik des Internet Explorers zunutze, die Eigenschaft _behavior, mittels derer sich JavaScript-Code direkt in CSS-Anweisungen ausführen lässt. Das sollte nun nicht kruder klingen, als die ganze Situation allgemein schon ist. Anstatt also für jedes Element Hintergrundbilder einzeln mit einem absoluten Pfad zu ersetzen, genügt es dieses Script für alle relevanten Selektoren zu definieren:

#button, #button-2, #button-3 {
	_behavior: expression(  /* IE6 only - transparency with proper handling of relative URLs */
		this.__src = this.__src ? this.__src : this.currentStyle.backgroundImage.split('"')[1],
		this.style.background = "none",
		this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.__src + "', sizingMethod='image')");
}

Es wird das jeweilige Hintergrundbild, das vorher in der Haupt-Stylesheet-Datei festgelegt wurde als absoluter Pfad ausgelesen und in den AlphaImageLoader geschrieben. Nebenher blendet das Script das ursprüngliche Hintergrundbild aus, um Interferenzen zu vermeiden. Diese Zeilen müssen wie gesagt nur ein einziges Mal in den für den IE6 optimierten Stylesheets auftauchen (sofern keine andere sizingMethod gebraucht wird), da es keine elementbezogenen Angaben enthält.

Zum Thema browserübergreifende Transparenzen gibt es weitere Ansätze und Konzepte. Einen kleinen Auszug findet Ihr unter:

24ways.org: Transparent PNGs in Internet Explorer 6
peterkroener.de: Teiltransparente Hintergrundfarben …
PNG Fix Plugin for jQuery
Yatil.de: Nicht vom IE6 unterdrücken lassen!

1. Ebene gruppieren und einstellen

Fasst zunächst alle Ebenen die zum Button gehören in einer Gruppe zusammen.

Anschließend markiert Ihr die oberste Ebene darin und erstellt eine neue Einstellungsebene “Farbton/Sättigung” über das entsprechende Icon im Fuß der Ebenenpalette.

Im dem sich daraufhin öffnenden Bedienfeld (CS4 in der Korrekturen-Palette, in älteren Versionen ein temporär eingeblendetes Dialogfeld) schiebt Ihr den Farbregler so zurecht, bis die gewünschte Farbgebung erzielt wird.

Ignoriert dabei Farbänderungen, die sich eventuell auch auf den Rest des Dokuments auswirken.

2. Auwirkung beschränken

Damit die Farbanpassungen sich nun nur auf den Button selbst beschränken, ändert Ihr den Ebenenmodus von “Hindurchwirken” auf “Normal”.

“Hindurchwirken” ist die Standardeinstellung für Ebenengruppen und bewirkt, dass sich Anpassungen wie die hier angelegte Einstellungsebene auf alle darunter befindlichen Ebenen, auch außerhalb der Gruppe, auswirken. Das Umstellen auf “Normal” veranlasst Photoshop, die Anpassungen ausschließlich innerhalb der Gruppe auszuführen.

3. Kopien erstellen

Erstellet nun eine gewünschte Anzahl an Kopien der Ebenengruppe, indem ihr diese einfach auf das Symbol “Neue Ebene erstellen” ziehen. Per Doppelklick auf die Einstellungsebene könnt ihr deren Parameter verlustfrei ändern und somit flexibel mit verschiedenen Farbigkeiten spielen. Es werden automatisch alle Ebenen innerhalb der Gruppe gefärbt, wodurch die ursprüngliche Farbharmonie des Buttons erhalten bleibt.