Webdesign, Usability, Layout und Grafiken, die grafischen Arbeiten für diese Webseite im Detail

Wie bekommt man das "drehende K" in die Einpressung ? Wie das gemacht wurde zeige und erkläre ich hier.
Die "Headergrafik" - also die obere Grafik auf der später auch die Navigationbuttons zu sehen sind, wird zuerst mal in Paint-Shop pro7 geladen.

Aus diesem Header wird sodann der Bereich markiert wo später das K erscheinen soll....dieser markierte Bereich wird dann mit der Ausschneidefunktion ausgeschnitten und als eigenständiges neues Bild abgespeichert. Wie hier zu sehen ist auch bereits die K-Grafik geladen, die eigentlich ein animiertes Gif ist , welches sich hier natürlich nicht dreht.

Diese K-Grafik wird nun kopiert und auf die zuvor ausgeschnittende Grafik eingefügt. Noch während die Einfüge-Markierung angezeigt wird, wurden BEIDE Grafiken zu EINER Ebene gemacht und das K dann wieder gelöscht.

Was über bleibt ist die anfangs ausgeschnittene Grafik mit dem K-Ausschnitt in der Mitte. Mit der Radiererfunktion wurde dann noch der verbliebene Mittelbereich gelöscht so, das am Ende nur noch ein transparentes abstraktes K innerhalb der Grafik übrig blieb.

Dann gibts bei Paint-Shop pro 7 die 3D Effekt-Funktion die sich "Innenphase" nennt. Damit lassen sich - wie hier zu sehen, alle Konturen mit plastischer 3D Wirkung erzeugen. Die Intensität, Farbe, Schatten usw. kann man zwar nach Belieben einstellen, hier jedoch sind keine all zu grossen Werte gewählt worden.

Da sich die Funktion "Innenphase" natürlich auf ALLE Kanten und Ränder auswirkt, also auch auf die Aussenkanten der Grafik, müssen diese nun weg geschnitten werden. das passiert mit dem Ausschneidewerkzeug.

Der Ausschneidebereich wird sodann als neues Bild wieder auf die Arbeitsfläche abgelegt. Wie hier zu sehen ist bei der neu geschaffenen Grafik nun nur noch der Innenbereich mit dem 3D-Effekt ausgestattet. Die ganz zu Anfangs vorgenommenen Arbeitsschritte an der Headergrafik müssen nun zurückgenommen werden damit  das entstandene Loch wieder geschlossen wird.

Jetzt wird die erstellte Grafik auf die Headergrafik eingefügt und richtig ausgerichtet.

Mit der Ebenenfunktion wird nun aus BEIDEN Grafiken eine gemeinsame Ebene gemacht und die zuvor eingefügte K-Grafik hieraus wieder gelöscht. Was bleibt, ist der transparente Umriss der K-Grafik.

Auch hier wurden mit der Radiererfunktion die mittleren "Überreste" gelöscht. Wie man sehen kann ist die gesamte Headergrafik teiltransparent. Diese Teiltransparenz würde eingeschränkt werden wenn sich übereinander liegende Grafiken überlappen. Deswegen war es wichtig nicht gebrauchte Bereiche zu löschen.

In das so entstandene transparente Viereck wurde nun endgültig die K-Grafik eingefügt und richtig ausgerichtet. Durch das Ausschneiden und Bearbeiten mit Effekten hat sich natürlich bei der K-Grafik die Farbe verändert , was man hier deutlich sehen kann.

Während die Grafik sich noch im Einfügemodus befindet, lässt sich diese - OHNE Auswirkungen auf die Gesamtgrafik - mit den Funktionen Helligkeit und Kontrast bearbeiten. Es war ein bisschen "Fingerspitzengefühl" notwendig bis schliesslich der exakt gleiche Farbton zur Headergrafik erreicht wurde.

Um den Innenbereich - indem später die drehende K-Animation erscheinen wird, farblich etwas abzuheben, wurde der komplette Bereich mit der "Zauberstab-Funktion" erfasst und markiert und schliesslich mit einer anderen Farbe ausgefüllt.

Der so entstandene grafische Header ist dann als PNG-Bild abgespeichert worden. Das drehende K ist abschliessend mit entsprechenden CSS-Anweisungen in exakt diesen geschaffenen Bereich positioniert worden.

Als nächster Schritt zeige ich wie ich die Button gemacht habe. Auch hier wurde zuerst ein entsprechend grosses Leerfeld geöffnet. Mit der Funktion "Stempel" ist ganz links ein mit Farbe gefüllter Kreis gesetzt und der Rest nach rechts hin, ebenfalls ausgefüllt worden. Dieses stellt jetzt die Grundbasis für den Button dar.

Damit die Buttons ein gewisses plastisches Aussehen bekommen, ist auf die "Basisversion" der sog. Glaseffekt drübergelegt worden.

Weil etwas später dieser Button auch für die rechte Seite genötigt wird, ist die Grafik einfach nur horizontal gespiegelt worden. Für die mittleren Buttons waren die Arbeitsschritte gleich, mit Ausnahme das diese keine Abrundungen haben.

Die so hergestellten Grafiken wurden dann in das Programm Paint-Shop-pro geladen. Damit später der Hovereffekt funktionieren kann (durch CSS Positionsänderung) müssen die Grafiken nun noch jeweils aneinander gesetzt werden

Auch hier wurde zuerst wieder ein entsprechend grosses leeres Feld geöffnet um die einzelnen Buttongrafiken positionieren zu können. Da der grundsätzlich immer zu sehende Button sich von den gehoverten etwas abheben soll, sind die Grafiken für die Mitte und unten nochmals etwas dunkler gefärbt worden. Die drei Grafiken müssen exakt übereinander positioniert werden da sie sich später mittels des CSS Hovercodes in ihrer Position um genau ihrer Höhe im Minus/Plusbereich verschieben und deswegen nicht irgendwie ineinander ragen oder Abstand voneinander haben sollten, was man dann sehen könnte.

So wurde mit allen Button verfahren, jeweils für die linke und rechte Seite sowie für die Mitte wurde jeweils eine solche Grafik erstellt.

Da es bisher im aktuellen Webdesign und im Rahmen barrierefreier Internetseiten angeregt war, dem Besucher anzuzeigen welche Links er bereits besuchte und welche nicht, wurde die Kennzeichnung von Links eingeführt. Bei textbasierten Links geschied dies mit farblicher Unterscheidung. Hier bei diesen grafischen Buttons aber wird dies anhand eines grünen Häkchens realisiert, welches angezeigt wird und bleibt wenn der Besucher auf diesen Button bereits geklickt hat.

Für jede Unterseite die man bei Kaheti.de besuchen kann, musste nun ein Button beschriftet werden. Da sich beim Hovern ja schon die Buttonfarbe verändert, konnte die Schrift auf jedem Button gleich bleiben.

Alle so fertig gestellten Buttons sind dann in ein festes Verzeichnis hineinkopiert worden. Über die Anweisungen im Html und Css sind diese dann entsprechend des hier links zu sehenden Screen's angeordnet worden. Die kleinen Buttons für den Designwechsel (ganz rechts) sind in gleicher Weise wie bis hierher beschrieben entstanden so, das auf diese nicht noch einmal extra eingegangen werden muß.

Auf der Startseite von Kaheti.de sind Monitore in 3D Ansicht zu sehen. Wie diese nun mit den jeweiligen Screenshots meiner ehemaligen Seiten entstanden sind zeige ich hier. Mit dem Programm Photo-Shop wurde zuerst die Monitorgrafik und ein entsprechend verkleinerter Screenshot einer Webseite geladen.

Zum weiteren Bearbeiten ist alles etwas vergrössert worden. Der Screenshot ist dann per "Drag and Drop" auf die Monitorgrafik gezogen und etwas grob ausgerichtet worden.

Mit der Funktion " Transformieren - Verzerren" lässt sich die Screenshot-Grafik nun beliebig verformen.

Hierzu fängt man an einer Ecke an und zieht diese mit der Maus (gedrückthalten) an einer Ecke in die gewünschte Position.

Dasselbe mit der anderen Ecke.

...und so weiter

...bis schliesslich alle Ecken der Screenshot-Grafik mit den Ecken des Monitores übereinstimmen. Hiernach ist die fertige Grafik dann als PNG abgespeichert worden. So ist jede Monitorgrafik auf die selbe Art und Weise entstanden.

Hier wurde das Programm Xara 3D benutzt. Als einzelner Buchstabe ist wie hier zu sehen ein S in der gewünschten Schriftart gewählt worden. Später ist das S dann durch ein K ersetzt worden , die Arbeitsschritte sind jedoch die gleichen gewesen , so das Sie hier noch die S-Version sehen.

In der Vergrösserungsansicht lässt sich so die Grundfarbe, der Farbverlaufs und Spiegelungseffekt einstellen indem man die hier zu sehenden Pfeile nach Belieben an irgendeine Position bewegt bis der gewünschte Effekt eingetreten ist. Dieses S wurde dann als drehende Animation als SWF-Datei abgespeichert.

Hier ist das Programm Swishmax geöffnet mit dem ein neues Projekt erstellt wurde in der Größe von 100 x 100px.

Mit der Funktion "Insert"  (einfügen) ist nun das vorher als swf-Datei abgespeicherte S geladen worden. Dies muß nun noch mittig auf die weiße Fläche platziert werden.

Wenn das erledigt ist kann man das Projekt direkt testen , der eigentliche Effekt lässt sich natürlich nicht mit einem Foto darstellen. Abschliessend wurde das Ganze dann wieder abgespeichert und kann so in das Webseiten-Design eingearbeitet werden.

Webseite fertig ! Obwohl man es (insbesondere als "Laie")vielleicht nicht erkennen mag , aber in so einem Webseiten-Projekt stecken viele viele Stunden  Arbeit drin. Oftmals funktioniert es einfach nicht die eigenen Vorstellungen umzusetzen , probiert dies und das, fängt wieder von vorn an .....Bis dann alles "perfekt sitzt" und man auch die allerletzten Fehler beseitigt hat vergeht einiges an Zeit. Das Ergebnis ? , in dem befinden Sie sich grade und ich hoffe das es für Sie wenigstens ein wenig interessant war zu erfahren wie diese Seite schliesslich entstanden ist.

Dies ist ein neues Webseiten-projekt von mir. Im Augenblick erstelle ich eine neue Webseite für einen Freund. Ein sehr umfangreiches Projekt da er sehr viele unterschiedliche Informations-Bereiche abdeckt und eben für jeden dieser Bereiche eine eigene Seite erstellt werden muß. Die Webseite kommt mit ausgelagertem CSS und validem Quellcode in Xhtml strict. Das Design hatte ich ursprünglich einfach mal so gemacht , aus experimentellen Gründen. Wegen der bereits vorhanden Farben passt es jedoch hervorragend zu den Themen z.B. HSV.

Wie auch bei meiner eigenen Seite, achte ich bei diesem Projekt ebenfalls auf die Einhaltung und Umsetzung aktueller Standards in den Bereichen Usability , Barrierefreiheit und Suchmaschinenoptimierung: Obwohl das Projekt noch nicht fertig gestellt ist, erhält es jedoch jetzt schon sehr hohe Ergebnisse in den Qualitätsprüfungen.