Netzkescher

28.04.2010

Button in Photoshop gestalten - Tutorial

Das kleine Tutorial für zwischendurch:

How to Create a Slick and Clean Button in Photoshop

von Jacob Gube. Erschienen bei Sixrevisions.

Wenn man ein paar Grundkenntnisse in der Bedienung von Photoshop hat, ist dieses Tutorial gut nachzuvollziehen. Buttons kann man immer gebrauchen. Und die selbst gemachten sind doch die schönsten …

Die ganz Harten ziehen es bis zum Ende durch und bekommen so zusätzlich einen Einstieg in die Sprite-Technik. Dafür ist die Buttongestaltung des Tutorials nämlich vorgesehen. Alle Dateien stehen zudem zum Download bereit.

Eine Demo des Ergebnissen gibt es auch: Hier.

Viel Spaß!

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.

04.04.2010

Webdesign erstellen und coden

Heute möchte ich euch wieder einmal auf ein schönes Tutorial von sixrevisions.com hinweisen. Der Autor ist diesmal Waheed Akhtar.

Create a Clean and Professional Web Design ist ein ausführliches aus zwei Teilen bestehendes Tutorial. Im ersten Teil wird schrittweise beschrieben, wie in Photoshop ein ansprechendes Layout erstellt werden kann. Hier gibt es die Vorschau.

Im zweiten Teil wird gezeigt, wie man das grafische Layout in HTML und CSS umsetzt.

Alle benötigten Dateien werden zum Download angeboten.

Das Tutorial ist sehr detailliert aber auch verständlich geschrieben (wie so oft bei Tutorials von sixrevisions). Da gibt beim Durcharbeiten für viele sicher eine Menge zu lernen - Spaß macht es obendrein. Angemeiert sind natürlich immer die ein wenig, die keinen Zugriff auf Photoshop haben. Da heißt es dann Abstriche beim Design machen oder nur den zweiten Teil durcharbeiten.

Frohe Ostern!

09.08.2009

Design- und Coding-Tutorial - Teil 2

Heute möchte ich den zweiten Teil eines Tutorials vorstellen, das ausführlich und Schritt für Schritt zwei Aspekte des Webdesigns erklären. Er ist unter dem Titel “Coding a Clean & Illustrative Web Design from Scratch” bei sixrevisions.com veröffentlicht.

Im ersten Teil wurde mit einem Bildbearbeitungsprogramm ein grafischer Entwurf der Webseite erstellt.

Jetzt geht es darum, wie der als Photoshop-Datei vorliegende grafische Entwurf Schritt für Schritt nach xhtml und css umgesetzt wird. In der Erklärung wird nicht nur die Erstellung des Codes beschrieben, sondern es wird auch gezeigt, wie aus dem grafischen Entwurf die benötigten Bildelemente isoliert und abgespeichert werden, so dass diese dann als gestalterische Elemente in der Webseite Verwendung finden können.

Beide Teile sind für Freizeit-Designer geeignet, die bereits Grundlagenwissen bei der Webseitengestaltung erworben haben, aber beim Umsetzen eigener Ideen nicht richtig vorankommen.

Die Tutorials sind in englischer Sprache, aber reich bebildert. Also keine Hemmungen.