Netzkescher

27.04.2010

Photoshop-Tipps für Webdesigner

Auch Freizeit-Webdesigner kommen immer mal wieder mit dem Thema Bildbearbeitung in Berührung. Dass man dabei auf einem Level arbeitet, das vergleichsweise niedrig ist, liegt in der Sache begründet - es ist halt eine Freizeitbeschäftigung, Zeit dafür ist eher knapp. Dennoch arbeiten vermutlich nicht wenige mit Photoshop. Für diese kann der Artikel “9 Photoshop Editing Tips Web Developers Should Know“, erschienen auf sixrevisions.com interessante Informationen bieten. Hier eine Übersicht der Tipps von Omer Greenwald:

• Changing the background color of an icon
• Selecting a layer with Auto-Select
• Selecting a layer with Ctrl/Cmd + click
• Isolating a layer
• Copying a layer from one document to another by drag and drop
• Refining a selection by contracting or expanding it
• Using Layer Comps
• Basic image manipulation: changing colors
• Using measurement tools

Wie man sieht geht es um Inhalte, die im Webdesign-Prozess wohl zum Standardrepertoire gehören. Sicher ist es sinnvoll, sie zu kennen.

13.04.2010

Tutorial-Tipp: PHP-Webseiten-Template erstellen

Auf 1stwebdesigner.com ist heute ein ausführliches und meiner Ansicht nach empfehlenswertes Grundlagentutorial erschienen: “How to Create a PHP Website Template from Scratch“.

Zunächst wird erklärt, wie man mit HTML und CSS eine statische Webseite erstellt. Um das zu verstehen reichen wenige Grundkenntnisse in beiden Bereichen. Anschließend beschreibt der Autor Kevin Stanley, wie dieser Seite mit Hilfe von PHP ein wenig Dynamik eingehaucht werden kann. Die HTML-Seite wird zur PHP-Seite und Bereiche wie Header, Footer und Navigation werden in externe PHP-Dateien ausgelagert, die dann includiert werden. Zum Schluss wird noch ein wenig mit Variablen gearbeitet. Beispielhaft werden etwa der Titel der Webseite und der Footer-Text durch Variablen ersetzt. Es wird erläutert, wie man diese Variablen wiederum mit konkretem Inhalt gefüllt bekommt.

Das Tutorial vermittelt einen guten Einstieg in die Thematik php-basierter Web-Templates. Dies ist auch das erklärte Ziel des Autors. Auf dieser Basis kann man bei Interesse Möglichkeiten finden, die Anregung selbstständig weiter zu entwickeln. Z.B. ließe sich ein Formular kreieren, dass die oben erwähnten Variablen mit Inhalt füllt. Man lernt ja immer am besten, wenn man sich selbst (lösbare) Aufgaben stellt.

Alle für das Tutorial erforderlichen Dateien stehen zum Download bereit.

10.04.2010

Tabellen in Flatpress erstellen

Tabellen in Flatpress zu erstellen ist ein gruseliges Thema, weil es mit dem eingebauten Editor eigentlich gar nicht geht. Man muss eh HTML verwenden und dann bietet es sich an, die Tabelle gleich extern zu erstellen und den Code später einfach in den Flatpress-Editor zu importieren. Wenn man in der Konfiguration des BBCode-Plugins die Option “Benutzung von HTML-Code und BBCode erlauben” aktiviert hat, muss man nicht einmal Tags setzen.

Damit die Erstellung des Grundgerüstes schneller geht, kann man sich z.B. eines Online-Tools bedienen. Zwei stelle ich hier beispielhaft vor.

Homepage-Total-Tabellengenerator

Mit diesem Tool geht das Entwickeln des Grundgerüstes sehr zügig.
Nach dem Aufruf der Seite erscheint die Grundversion. Man setzt die gewünschten Optionen (die Bedeutung der späteren HTML-Tags muss man natürlich kennen) und klickt auf “Anzeigen”. Der Quellcode erscheint und kann in den Flatpresseditor kopiert werden. Bei Bedarf lässt man sich eine Vorschau anzeigen.

Weiter gehende Einstellmöglichkeiten erhält man, indem man auf das kleine +-Symbol klickt.

Mit den nun möglichen Optionen lässt sich die Tabelle sehr individuell gestalten. Nicht vergessen, die Angaben, die man nutzen möchte, auch im Optionenfeld zu markieren!

HTML Table Generator with CSS

Der Tabellegenerator von Spectrum Research geht noch einen Schritt weiter. Er legt die CSS-Formatierungsangaben in eine eigene Datei. Diese Lösung ist also nichts für die schnelle Tabelle zwischendurch, sondern mehr etwas für die grundlegende Arbeit am Design.

Tipps zum Editieren in Flatpress

Dazu verweise ich mal auf die Artikel Flatpress Editor und Flatpress-Editor - Text Formating Toolbar sowie Firefox 3.6 und “Text Formatting Toolbar”.

07.04.2010

Webdesign-Tutorial

Um es mir einfach zu machen, zitiere ich hier mal den Autor des Webdesign-Tutorials Manuel Becker:

Bei dieser Seite handelt es sich um eine möglichst vollständige Anleitung zum Erstellen von professionellen Webseiten.

Ich hab es bisher nur kurz überflogen - ein Blick lohnt sich aber auf alle Fälle. Es werden eine ganze Menge Themen angesprochen. Natürlich nicht wirklich “vollständig” - das wäre auch zu viel verlangt - aber sicher sind sowohl für Anfänger als auch für fortgeschrittenere Designinteressierte eine Menge Informationen in den einzelnen Kapiteln enthalten. Das Ganze wirkt sehr aufgeräumt und gut lesbar. Natürlich sollten die Workshops nachgearbeitet werden. Sonst wird es wohl nichts mit dem Lerneffekt.

Auszugsweise und beispielhaft einige Themen aus dem Inhalt:

• HTML, CSS, PHP, MySQL und JavaScript
• Was macht eine professionelle Webseite aus?
• Wahl des Grundlayouts
• Die richtige Farbwahl
• Das Basisdesign
• HTML- und CSS-Grundlagenq
• PHP-Grundlagen
• MySQL-Grundlagen
• Content Management System (CMS)

—

Wie bin ich darauf gestoßen?

Webdesign-Know-how für Einsteiger
Wie man zum Webdesigner wird
der-webdesigner.net