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.

17.04.2010

Tipps zum Texteditor PSPad (3) - FTP nutzen

Heute geht es um die Fähigkeit von PSPad, auf FTP-Server zugreifen zu können.

FTP-Zugänge einrichten und verwalten

Der erste Schritt ist natürlich, die entsprechenden Zugangsdaten einzugeben. Den erforderlichen Dialog ruft man auf, indem man im Toolfester zunächst auf den FTP-Button klickt. Es öffnet sich das FTP-Fenster. Über einen Klick auf den Verbinden-Button öffnet man die Verbindungsverwaltung. Hat man bereits FTP-Verbindungen eingerichtet, kann man eine Liste dieser Verbindungen mit einem Klick auf das kleine Dreieck des Verbinde-Buttons sichtbar machen.

Es öffnet sich das Verwaltungsfenster, dass die Organisation der FTP-Verbindungen ermöglicht. Es ist selbsterklärend. Ein neues Profil legt man z.B. mit der gleichnamigen Schaltfläche an, ein bereits bestehendes kann man, nachdem er markiert wurde, über “Profil-Eigenschaften” bearbeiten. Mit “Verbinden” wird die Verbindung zum ausgewählten Server aufgebaut.

Interessant ist noch die Schaltfläche “Import“. Hat man schon FTP-Zugänge in einem der unterstützten Programme definiert, können sie hier importiert werden. Die Dateitypliste zeigt, welche Programme dies sind.

Ich habe einen Test mit FileZilla gemacht. In FileZilla die Serverliste über Datei-Export exportiert und wie beschrieben in PSPad importiert. Das klappte reibungslos.

Eine FTP-Verbindung aufbauen

Wenn die FTP-Verbindungen eingerichtet ist, geht der Aufbau am schnellsten über einen Klick auf die Verbindungsschaltfläche.

Mit der danebenliegenden Schaltfläche wird die Verbindung abgebaut.

Nützliche Funktionen

(Text-)Dateien können direkt vom Server geöffnet und bearbeitet werden. Am einfachsten ist das Öffnen über einen Doppelklick auf die Datei.

Speichert man nach dem Bearbeiten über die normale Speicherfunktion wird die Datei direkt auf dem Server aktualisiert. Dies ist für kleine Änderungen sehr praktisch, da man die Datei nicht erst herunterladen und lokal vorhalten muss. Hat man lokal eine neue Datei erstellt oder geöffnet, lässt sich diese auf den FTP-Server übertragen. Dies geschieht über einen Rechtsklick auf den Tab der betreffenden Datei und das Auswählen des Befehls “Speichern über FTP“, alternativ über das Menü Datei oder über das Symbol für Speichern (auf das kleine Dreieck klicken, um die möglichen Optionen anzuzeigen).

Weitere Optionen lassen sich über Rechtsklick im FTP-Fenster aufrufen. Hier eine Übersicht der Befehle.

Häufig gebraucht werden wahrscheinlich CHMOD zum Ändern der Rechte einer Datei und die Befehle zur Datei- und Verzeichnisverwaltung auf dem Server (Verzeichnis anlegen, Neue Datei, Datei/Verzeichnis löschen, Umbenennen).

Manche dieser Befehle findet man auch in der Symbolleiste des FTP-Fensters.

Sonstiges

Mit CTRL+L lässt sich das Log-Fenster einblenden, das u.a. einen Reiter für das FTP-Log besitzt.

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.