06.08.2009
Design- und Coding-Tutorial
Mit diesem und dem folgendem Artikel möchte ich zwei Tutorials vorstellen, die sehr ausführlich und Schritt für Schritt zwei Aspekte des Webdesigns erklären. Beide Tutorials sind für Freizeit-Designer geeignet, die bereits Grundlagenwissen erworben haben, aber beim Umsetzen eigener Ideen nicht richtig vorankommen.
Die Tutorials sind in englischer Sprache. Aber da sie reich bebildert sind, wird’s schon gehen.
Tutorial 1:
How to Create an Illustrative Web Design in Photoshop
In dieser Anleitung wird anschaulich und gut nachvollziehbar beschrieben, wie man mit Photoshop ein einfaches, aber dennoch attraktives Design für eine Webseite entwickeln kann. Das Zielprodukt lässt sich hier ansehen. Es geht um grundlegende gestalterische Elemente, wie sie z. Zt. auf vielen Webseiten zu sehen sind: Einsatz von Farbverläufen, Textboxen mit abgerundeten Ecken, einfache und klare Bildelemente usw..
Die PSD-Datei, die das Ziel darstellt, wird zu Download angeboten. Das macht das Angebot rund.
Wer Photoshop nicht besitzt muss nicht verzweifeln. Die eingesetzten Techniken sind auch mit anderen Bildbearbeitungsprogrammen umsetzbar, solange diese Ebenen beherrschen. Es ist dann natürlich schwieriger, die passenden Einstellungen zu finden, weil die betroffenen Abbildungen im Tutorial nicht passen. Ich hab es zwar nicht getestet, aber einsetzbar müsste z.B. PaintNet sein und Gimp wohl sowieso. Beide kosten nichts.
Voraussetzung für ein erfolgreiches Arbeiten mit dem Tutorial sind Grundkenntnisse in der Bildbearbeitung. Man sollte wissen, wie man in dem gewählten Bildbearbeitungsprogramm Ebenen anlegt, Bereiche markiert, Füllfarben und Farbverläufe anwendet, Text gestaltet, Konturen setzt u.ä. Alles aber auf einfachem Niveau. Es gibt keinen Grund, sich von dieser Aufzählung abschrecken zu lassen. Das eigene Ergebnis muss ja auch nicht exakt der Vorgabe entsprechen. Ganz im Gegenteil sollte man mit dem Erlernten ordentlich zu experimentieren beginnen.