Webdesign-er.com

Bei Six Revisions habe ich wieder ein tolles Tutorial gefunden, in welchem gezeigt wird, wie man mit Photoshop ein sehenswertes Webdesign mit Illustrationen erstellen kann. Der Header ist mit einer Landschaftsillustration mit Grünflächen und Bergen versehen, deren Gipfel mit Schnee bedeckt sind; darüber ist der blaue Himmel mit einigen Wolken zu sehen.

Der Content-Bereich ist in hellen Grau-Tönen gehalten und dadurch angenehm zu lesen. Die zum Teil grüne Schriftfarbe stellt einen passenden Zusammenhang zu den Grünflächen im Header und im Footer, welcher komplett in Grün gehalten ist, her.

Hier der Link zum Tutorial: How to Create an Illustrative Web Design in Photoshop (engl.)

Auf hv-designs.co.uk wurde ein Webdesign-Tutorial veröffentlicht, in welchem Richard Carpenter zeigt, wie mit Hilfe von Photoshop das Design für ein Fotografie-Portfolio erstellen kann.

Für die farbliche Gestaltung des Webdesigns hat der Autor des Tutorials die Farben Grau und Blau ausgewält. Die Kamera-Icons zeigen dem Besucher schnell um welches Thema es auf der Seite geht, nämlich um Fotografie. Direkt unterhalb des Headers gibt es einige Vorschaubilder, welche dem Besucher einen ersten Eindruck davon liefern können, was ihn auf dieser Seite erwartet. Das Webdesign wirkt sehr aufgeräumt und übersichtlich. Die Navigation wurde horizontal oberhalb des eigentlichen Headers untergebracht. Darüber hinaus ist im Header des Designs ein Loginbereich angedacht.

Hier der Link zum Tutorial: Learn To Create A Photography Style Web Layout (engl.)

Freunde von Webdesigns im Grunge-Style können in einem, bei Six Revisions veröffentlichten Tutorial, lernen, wie sie ein sehenswertes Webdesign im Grunge-Style erstellen können. Das Besondere an diesem Webdesign: Das Design hat eine Holzoptik bzw. wirkt hölzern.

Das Webdesign in diesem Tutorial hat einen schwarzen Hintergrund, der zum Großteil von einem Holzbrett überdeckt wird. Die dargestellten Content-Bereiche haben ebenfalls einen schwarzen Hintergrund und wirken dadurch wie Löcher in dem Holzbrett. Sogar die Web 2.0 Buttons sind der Holzoptik angepasst worden und haben die Form eines Kronkorken.

Hier der Link zum Tutorial: Create a Wooden Grunge Portfolio Web Layout in Photoshop (engl.)

Bei hvdesigns wurde ein Tutorial veröffentlicht in welchem gezeigt wird, wie man mit Photoshop das folgende, ansprechende 3D-Layout designen kann.

Das Webdesign hat einen schwarzen Hintergrund und einen hellgrauen Content-Bereich. Das Highlight des Designs ist die horizontale Navigationsleiste, welche durch einen 3D-Effekt veredelt wird. Die großen Icons mit vielen Details schweben hier über einer glänzenden Oberfläche. Im mittleren Teil des grauen Bereichs wurde noch Platz für einen möglichen zweiten Navigationsbereich gelassen. Dieser könnte aber auch dazu verwendet werden, um bestimmte Keywords der Seite hervorzuheben oder ein Produkt kurz und prägnant beschreiben. Für den unteren Bereich der Content-Area sind vom Autor Grafiken vorgesehen.

Hier der Link zum Tutorial:  Creative 3D Layout

Bei hvdesigns wurde ein interessantes Tutorial mit dem Titel Business Layout #8 veröffentlicht, in welchem gezeigt wird, wie man das abgebildete Webdesign erstellen kann.

Das Webdesign hat einen schwarzen Hintergrund, einige weisse / graue Flächen und einige rote Icons und Buttons. Das Design ist relativ schlicht und lässt eine übersichtliche Strukturierung zu. Die Navigation ist horizontal angeordnet, eine vertikale Navigation gibt es nicht. Die wichtigsten Inhaltspunkte der Webseite können in einem zentralen Bereich, der sich leicht vom Hintergrund abhebt, dargestellt werden, sodass der Besucher schnell auf diese Punkte aufmerksam werden kann.

Hier der Link zum Tutorial: Business Layout #8 (engl.)

Bei hvdesigns wurde ein interessantes, zweiteiliges Tutorial veröffentlicht, in welchem der Autor, Richard Carpenter, zeigt, wie man eine Pop-Up CSS Navigation erstellen kann. Im ersten Teil des Tutorials wird die Umsetzung der grafischen Seite behandelt, im zweiten Teil des Tutorials wird gezeigt, wie eine solche Navigation gecodet wird.

Unter einer Pop-Up CSS Navigation versteht man eine Navigationsleiste, bei der die einzelnen Menüpunkte erst komplett sichtbar werden, bzw. aus ihren “Taschen” kommen, wenn der Besucher mit der Maus über das jeweilige Navigationssymbol fährt. Dieser Effekt kann ein Webdesign aufwerten.

Hier die Links zu den beiden Teilen des Tutorials:

Pop-Up CSS Navigation Pt.1

Pop-Up CSS Navigation Pt.2

Bei hvdesigns wurde ein interessantes Webdesign-Tutorial mit dem Titel Software Layout #6 veröffentlicht. Wie der Titel des Tutorials schon andeutet, handelt es sich dabei um ein Webdesign, welches für die Präsentation von Software verwendet werden kann.

Der Webdesigner, Richard Carpenter, hat dabei eine Farbkombination aus Grau, Grün und Schwarz gewählt. Dabei kommt die Farbe Grün zum Großteil bei Navigationselementen zum Einsatz, Hellgrau wird für den Hintergrund des Contents eingesetzt, die Farbe für den Fließtext im Contentbereich ist Dunkelgrau. Der Header und der Footer haben einen schwarzen Hintergrund.

Auffällig ist bei diesem Webdesign die Verwendung von großen, modernen Icons, welche schnell die Aufmerksamkeit des Besuchers auf sich ziehen. Die Navigation schwebt horizontal über dem Übergang von Header und Contentbereich und hebt sich durch einen Schatten etwas ab.

Link zum Tutorial: Software Layout #6 (engl.)

Das Webdesign-Tutorial behandelt die vollständige Entwicklung einer Webseite, angefangen von den Grundlagen, dem Konzept und dem Design mit Photoshop bis zur Umsetzung und zur anschließenden Programmierung in PHP.

Das Besondere: Die Seite zeigt, wie man genau diese Seite selbst nachbauen kann.

Link zum Tutorial: Webdesign-Tutorial

Auf psd.tutsplus.com habe ich ein sehenswertes Tutorial gefunden, in welchem gezeigt wird, wie mit Photoshop ein Design erstellt werden kann, welches eine magische Nachtatmosphäre ausstrahlt. Ich denke ein Besuch lohnt sich.

Hier der Link zum Tutorial: Create a Magic Night Themed Web Design from Scratch in Photoshop (engl.)

Bei hvdesigns habe ich ein interessantes Webdesign-Tutorial gefunden, in welchem mit Photoshop ein WordPress Theme erstellt wird. Bei dem Tutorial wird unter anderem gezeigt, wie man einem Design 3D-Elemente hinzufügt.

Hier der Link zum Tutorial:  WordPress Layout #6