Heute stelle ich euch einige einfache (aber effektive) Photoshop Pattern/-Muster zum Download bereit. Im Download finden sich neun Verschiedene .pat Dateien die sich allesamt auf Scanlines in vertikaler, horizontaler und diagonaler Form beschränken. Demnächst werde ich eine andere Variation vorstellen, wo es zwar auch um Pattern/-Muster geht, allerdings nicht direkt um die Scanlinetechnik.

Web Designer Pro Bundle

In diesem Komplettpacket findest du eine riesige Zusammenstellung unterschiedlicher Templates, WordPress Themes, Icons, Apps, Plugins, Code Schnipsel und einige Fotos! Das Packet wurde aus den unterschiedlichen Plattformen von ThemeForest, GraphicRiver, ActiveDen, CodeCanyon und PhotoDune zusammengeschnürt.

Die Free Files!

Themeforest bietet ein ziemlich schickes HTML/CSS Template mit verschiedenen Slidern, Farben und Unterseiten an!

Wer auf der Suche nach ausgefallenen Texteffekten ist, sollte mal auf Graphicriver vorbei schauen.

Einen Css-Menu-Generator auf Basis von jQuery findet sich bei CodeCanyon im Angebot.

In meiner Vorlage, hab ich teilweise CSS3 verwendet um auf unnötige Grafiken zu verzichten. Dabei kamen diverse CSS3 Definitionen zum Einsatz die ich hier kurz erklären möchte.

Zum einen legen wir mit Hilfe von CSS3 abgerundete Ecken fest und den sog. Graniteffekt nutzen wir für den optischen Farbverlauf ohne dabei auf Bilder zurückgreifen zu müssen. Ausserdem nutzen wir „box-shadow“ um den Buttons einen leichten Schlagschatten zu verleihen.

Leider unterstützen noch nicht alle Browser in allen Versionen die von mir verwendeten Angaben zu 100%. Um dir eine Übersicht dazu zu geben, habe ich dies mit in den CSS Bereich notiert.

Hier gehts zur Demo

Beispielsweise:

HTML

<a class="gbutton grau" href="#">Button</a>

CSS

a.gbutton {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	padding:5px 7px;
	line-height:31px;
	border-width:1px;
	border-style:solid;
	/*CSS3 Kompatibel in Firefox 3.5+, IE 9+, Safari 3.0+, Opera 10.5+, Chrome 4.1+*/
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
}
a.gbutton.grau{
	color:#444444;
	background-color:#f4f4f4;
	border-color: #dcdcdc;
	/*CSS3 Kompatibel in Firefox 3.5+, Safari 3.0+, Opera 9.5+, Chrome 4.0+*/
	text-shadow:0px 1px 1px #fff;
}
a.gbutton.grau:hover{
	border-color: #c6c6c6;
	/*Für Browser die kein gradient interpretieren können*/
	background:#f4f4f4;
	/*CSS3 für Webkit Browser*/
	background: -webkit-gradient (linear, left top, left bottom, from(#f4f4f4), to(#e4e4e4));
	/*CSS3 für Firefox 3.6+*/
	background: -moz-linear-gradient (top, #f4f4f4, #e4e4e4);
	/*CSS3 für IE*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#e4e4e4');
	/*CSS3 Kompatibel in Firefox 3.5+, IE 9+, Safari 3.0+, Opera 10.5+, Chrome 4.0+*/
    -moz-box-shadow: 0 2px 0 #ddd;
	-webkit-box-shadow:0 2px 5px #ddd;
    box-shadow: 0 1px 2px #ddd;
}

Die kleinen schicken Icons stammen übrigens nicht von mir, diese habe ich zur Veranschaulichung reingenommen. Du kannst sie hier kostenfrei runterladen.

Ich habe dir mein Packet mit HTML/CSS und einer kleinen PSD zusammengepackt und zum Download auf den Server geladen. Mich interessiert sehr, was du von CSS3 hältst! Nutzt du diese oder andere CSS3 Techniken bereits oder hältst du noch an CSS2.1 fest?

Ich bin der Meinung das nicht unbedingt jede Seite auf den Pixel genau in allen Browsern gleich aussehen muss. Sicherlich gibt es stellen wo dies notwendig für die korrekte Darstellung ist, aber es gibt auch stellen wo es nicht lebensnotwendig ist.

Viel Spass damit!

Ich benutze dazu nicht nur ein leeres Blatt Papier (was man natürlich auch machen kann), sondern ich greife gerne auf ein sog. Wireframe zurück. Wireframes sind in meinem Fall nichts anderes als ein Blatt Papier wo bereits Linien und Platzhalter für zb. Texthinweise oder Browsermaße (Auflösungen) vorgegeben sind. Das spart mir Zeit und es gibt mir persönlich mehr Atmosphäre beim Zeichnen. Gerade für Zeichenmuffel genau das richtige um etwas motivierter mit Stift und Zettel umzugehen.
Auf einem Wireframe zeichnet man keinesfalls Details für das finale Layout, sondern konzentriert sich auf das Wesentliche wie die Platzierung wichtiger Elemente wie Header, Textcontent, Menuführung usw.

Bild von "soxiam" einem Flickr User

Warum nicht sofort mit Photoshop ans Werk gehen?

1. Photoshop bietet für ein Weblayout meist zu viele Funktionen die dich daran hindern das Wesentliche zu fokussieren.
2. Wird man bei der Arbeit unterbrochen, ist die Chance hoch das neue Ideen im Kopf herumschwirren; fertige und gute Dinge werden unnötig erneut zu einer Baustellen.
3. Man wird sich beim Zeichnen mit Stift und Zettel mehr Zeit nehmen um mögliche Hinweise hinzuschreiben oder anderen Änderungen zu tätigen. In Photoshop gibt es die „Notiz“ Funktion zwar, allerdings wird diese ehr selten genutzt.
4. Durch die Zeitersparnis wirst du mehr Zeit für die Details in Photoshop haben und du arbeitest wesentlich produktiver.
5. Solltest du deine Zeichnung mit Partnern, Kunden oder Kollegen besprechen wollen, bieten sich dies sehr gut an. Zeichnen kann so ziemlich jeder. Es können also auch mehrere Leute an einem Layout Arbeiten bevor du es dann final in Photoshop umsetzt. Dies spart eine Menge Zeit und unter umständen werden im Vorfeld Missverständnisse ausgeschlossen oder zumindest minimiert.

Ich treffe nach 10 Jahren mit Photoshop noch immer auf Kollegen die einem Kunden weder eine Zeichnung noch ein Photoshop Layout vorlegen. Stattdessen wird nach dem Layouten dem Kunden direkt ein fertiges oder halb fertiges HTML/CSS Ergebnis präsentiert und hinterher gibt es etliche Änderungswünsche die man hätte mit einer einfachen und groben Zeichnung im Vorfeld klären können. Es gibt natürlich auch Kunden die ein Photoshop Layout als Vorlage benötigen, aber dies sollte man vorher mit dem Kunden absprechen. Meistens reicht eine Zeichnung um einen Grundbau festzulegen.

Es gibt im Web viele kostenpflichtige und auch kostenlose Wireframes. Ich persönlich finde die diese Vorlagen die ich auf diesem Blog gefunden habe sehr gelungen, schlicht und einfach:

• PDF Wireframe Template (Horizontal)
• PDF Wireframe Template (Vertikal)