Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp11/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2011 - Frontend - Photoshop

Photoshop - Design des Banners und der Buttons

Banner

Abb. 1: Banner der Homepage

Die Wahl der Farben passt sich an die Farbwahl der Homepage an. Wir haben uns ausgehend von einem sandigen Farbton für Komplementär- und Hell-/Dunkelkontraste entschieden. Dadurch gewinnt der Banner an Prägnanz. Als Hintergrund wurde der Farbverlauf von einem grau/blau zu dem sehr hellen Blau gewählt. Es wird der Eindruck vermittelt als würde es sich um einen Himmel handeln (Abb.: 1).
Der Schriftzug 'mitfahrZENTRALE' - schwarz/weiß Kontrast - befindet sich vor einem Berg, welcher sich in eine flache Topologie verläuft. Auf den Ausläufern ist ein stilisiertes Auto in schwarz vor hellem Hintergrund gesetzt.
Bei der Schriftart haben wir die ATRotisSemiSans verwendet. Die Schrift verfügt über prägnant geformte Einzelbuchstaben ohne Serifen, was sie perfekt für den Einsatz in Überschriften oder Bannern von Internetinhalten macht. Vor allem bei großen Schriftgrößen kommt diese Typographie sehr gut zur Geltung. Durch einen leichten Schatten nach innen wird ein plastischer Effekt erzeugt.
Einbettung:
Der Banner kann als 'Header'-Element im Kopf des 'body'-Tags eingebettet werden. Per SCSS kann die Breite angepasst werden.

Buttons


Abb. 2: Button-Desing




Das Design der Buttons (Abb.: 2) wurde an die Gestaltung der Navigationsleiste - mit CSS3 erstellt - angepasst. Ein Rechteck mit abgerundeten Kanten und einem vierstufigen vertikalen Farbgradienten von Schwarz nach Grau bildet das Grundgerüst. Durch das Anwenden des "abgeflachte Kanten und Relief"-Filters mit bestimmten Einstellungen und einer leichten "Kontur" entsteht ein plastischer Button mit leichtem Glanz.
Da auf einem Button kleinere Schriftgrößen verwendet werden wurde als Typographie die serifenlose weboptimierte Schriftart Arial verwendet. Durch den "abgeflachte Kanten und Relief"-Filter kommt ein weiterer plastizitätfördernder Effekt hinzu. Einbettung:
Wir konnten die Photoshop Buttons auf zwei unterschiedliche Weisen verwenden.

Abb. 3: alter Registrier-Submit-Button
Abb. 4: Neuer Speichern-Submit-Button


Abb. 5: Submit-Button-Code




Für Formulare gibt es in Ruby vorgefertigte 'Submit'-Buttons (Abb.: 3). Mit Hilfe des image_submit_tags konnten diese umgestaltet werden (Abb.: 4 und 5).
Gewöhnliche 'link_to' Anweisungen in Ruby erzeugen einen hyperlink ohne graphische Veränderung. Das Ersetzten des 'link_to'-namens durch den image_tag Befehl erlaubt uns Bilder als links zu verwenden. Sollte das Bild aus irgendwelchen Gründen auch immer nicht zur Verfügung stehen wird ein alternativ Text eingeblendet (Abb.: 6 und 7).

Abb. 6: image_tag-Code


Page last modified on August 20, 2011, at 02:55 PM