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.

15.04.2010

Internes - Layoutänderung

Dieses kleine private Weblog dient mir ja auch zum Designbasteln und Herumspielen. Und so sieht es hier und da immer mal wieder ein bisschen anders aus. Heute musste der alte gestreifte Hintergrund dran glauben. Ich wollte gern etwas im Hintergrund haben, was besser zum Titel des Blogs passt. Jetzt habe ich mir mit Hilfe von BgPatterns so etwas wie ein Netz erstellt (was zweifellos mit “Netzkescher” stimmig ist) und jedenfalls für den Augenblick für gut befunden. Gleich hochgeladen und da seht ihr es nun - es sei denn, euer Browserfenster ist zu klein. Dann sieht man vom Hintergund ja nicht so viel. Die Blautöne habe ich gewählt, weil ich den Blogtitel auch mit Wasser verbinde. Und bei Wasser denke ich halt an blau. Außerdem passt es zur Blogbeschreibung, finde ich zumindest. Ihr könnt bitte gern euren Kommentar angeben. Würde mich freuen.
Jetzt noch ein paar Worte zu BgPatterns.

BgPatterns

BgPatterns ist ein Onlinetool zum Erstellen von Hintergründen für Webseiten. In den wenigen Funktionen stecken eine ganze Menge Möglichkeiten. Ich beschreibe kurz, wie ich zu meinem neuen Hintergrund gekommen bin. Was hier in wenigen Punkten zusammengefasst ist, ist allerdings das Ergebnis von reichlich Herumexperimentiererei. Diese würde ich übrigens dringend empfehlen, unterstützt sie doch den Kreativprozess.

Bild ausgewählt und Skalierung festgelegt

Farben eingestellt

Kachelgröße und Textur gewählt

Transparenz

Dann ordentlich mit den Transparenzwerten beim Bild und Textur herumgespielt.
Tipp: Der Slider erscheint, wenn man in das kleine Textfeld klickt. Dann braucht man die Werte nicht eintippen.

Vorschau

Um einen guten Eindruck der Wirkung zu erzielen, ist das Vorschaufenster gut geeignet. Mit einem Klick auf “Apply Background” wird die aktuelle Einstellung auf die ganze Seite des Tools gekachelt. Dadurch gewinnt man einen noch besseren Eindruck des Designs.

Mit “Rotieren” experimentiert

Das habe ich doch tatsächlich zunächst übersehen. Wenn man hier verschiedene Winkel probiert muss man u.U. die Bildskalierung wieder anpassen. Dafür hatte ich aber keine Zeit mehr. Deshalb ist mein aktueller Hintergrund (noch?) gerade.

Download

Mit “Download Image” kann man sich das fertige Produkt herunterladen und in die eigene Seite einbinden. Bei mir geschieht dies mit der Zeile

body {
...
background: #010F2C url(../imgs/bg03.jpg) repeat;
...
}

Wenn ihr auch mit dem Tool einen Hintergrund erstellt habt, schreibt die URL euer Seite doch in einen Kommentar.

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”.