Tutorial: modernes Blog-Layout mit Photoshop

Gerade Anfänger tun sich schwer beim gestalten einer Webseite mit Hilfe von Photoshop.

Mit was fange ich an? Welche Gestaltungs elemente lege ich auf eine Ebene? Wie erstelle ich einen modernen Hintergrund?
Viele dieser Probleme führen dazu, dass besagte Beginner schon nach wenigen Versuchen resigniert aufgeben. Das muss nicht sein, denn Hilfe naht!

Photoshop Tutorial - modernes Blog Layout gestalten

Bei sigsource.com findet man ein ausführlich beschriebenes Tutorial zum Thema „modernes Blog-Layout mit Photoshop“. Schritt für Schritt zur modern aussehenden Webseite. Die fertige PSD-Datei steht übrigens zum Download bereit!

In this detailed tutorial i’ll walk you through the process of designing the layout below in Photoshop. Im assuming you have a good knowledge of Photoshop, its tools (especially the rectangular marquee tool! You’ll learn to love it), and creating new layers.

Suchmaschinenoptimiertes Theme „Gold for Ella“ für WordPress 2.1

„Gold for Ella“, so heißt das neue suchmaschinenoptimierte WordPress-Theme von webdesign-in.de. Das zweispaltige, fluide Theme nutzt jede Menge Plugins, z. T. wurden sie – wenn nötig – an das Theme angepasst.

Allerdings weißt die Autorin auch darauf hin, dass die beste SEO nichts nutzt, wenn dein Blog keine interessanten Inhalte hat! Jörg Petermann schreibt dazu in seinem einfach-persönlich-weblog:

Natürlich kommt es neben einem guten und optimierten Weblog Theme immer auch auf die Schreibe und den Content an. Alle Optimierung kann eben auch keine gute Content-Strategie ersetzen. Weblog-Besucher kommen in der Masse nach wie vor über Knoten (Artikel) im weltweiten Netz. Wer dies missachtet und meint, die Technik wird es richten, dessen Blog ist von Beginn an mit schlechteren Karten ausgestattet.

Zum Download von „Gold for Ella“ SEO WordPress-Theme

Bitte beachtet die Hinweise der Autorin zu den rechtlichen Rahmenbedingungen.

Rendering Mode im Browser feststellen

Wer sich schon einmal damit rumgeärgert hat stundelang in Quelltexten und CSS-Dateien nach einem Fehler zu suchen, um am Ende zu merken, dass es am falschen Rendering Mode hing, wird für den folgenden Tipp dankbar sein.

Folgende Zeile einfach als Lesezeichen im Browser ablegen. Beim Klick darauf öffnet sich eine JavaScript Alertbox, die einem den Rendering Mode der aktuellen Seite anzeigt.

javascript:alert(document.compatMode);

Erscheint „BackCompat“, so wird die Seite im sogenannten „Quirks-Mode“ gerendert. Anzustreben ist die Anzeige von „CSS1Compat“.

Typetester: Schriftarten vergleichen und CSS-Code mitnehmen

The Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier.

Das nenne ich Service. Mit Hilfe von sauberem XHTML-Code, CSS und etwas JavaScript haben die Köpfe hinter http://typetester.maratz.com/ eine ansprechend gestaltete Anlaufstelle für unentschlossene Webdesigner geschaffen.

Einfache Dropdown-Menüs erleichtern die Auswahl von Schriftart, Schrfitgröße, Laufweite, Zeilenabstand usw. Drei Spalten können parallel gestaltet und auf einen Blick verglichen werden, da fällt die Entscheidung schnell leichter. Ein Klick genügt und man erhält den fertigen CSS-Code.