Download ppt - Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS

Kirsten Schulte

Photoshop

Seminar

Internetpublishing

BOK-Veranstaltung des ZfS

Internetpublishing::Übersicht::Seminarinhalte

11.04.23

(c) Kirsten Schulte, [email protected]

2

Projektablauf Technische Kenntnisse

HTML

CSS

Photoshop

Dreamweaver

Das Internet1. Konzeption, Planung

2. Site Konzeption

3. Site Erstellung

4. Publikation und Marketing

5. Evaluation und Wartung

Interface-DesignSite-DesignPage-Design

Beta-Test

Internetpublishing::Photoshop:: Grundlagen

Photoshop – Grundlagen Grafik im WebWebtaugliche Grafikformate

• .gif, • .png, • .jpg.

Pixel• Mit der Auflösung einer Grafik wird die Anzahl der Pixel

(Bildpunkte) pro Inch (Zoll) festgelegt.• Je mehr Pixel sich im festgelegten Raum befinden, um so

brillanter wird das Bild, je weniger Pixel desto grober.• Während für den Druck ein Bild eine Auflösung von ca. 300

dpi haben sollte, genügen für den Bildschirm 72 - 96 ppi.

11.04.23


3

Internetpublishing::Photoshop::Grundlagen

Das Anwendungsfenster

11.04.23


4

Internetpublishing::Photoshop::Aufgabe Programmoberfläche

Aufgabe – Programmoberfläche einrichten• Prüfen Sie, ob folgende Bedienfelder angezeigt

werden, sonst sorgen Sie dafür, dass sie angezeigt werden (Menü Fenster):

• Werkzeugpalette,

• Optionsleiste,

• Ebenenpalette,

• Farbenpalette,

• Informationenpalette.

11.04.23


5


Grafiken in webtauglichen Format speichern• Da für die Anzeige der Grafik auf der Website sowenig

wie möglich Ladezeit benötigt werden soll, empfiehlt es sich, Grafiken fürs Web wie folgt zu überprüfen:

• Ist die Grafiken nur so groß wie benötigt (in cm oder px)? Verkleinern Sie sie andernfalls.

• Ist die Auflösung nur so hoch, wie für den Bildschirm benötigt (maximal 96 Pixel/Zoll (=Inch) ).

• Reduzieren Sie die Speichergröße der Grafik: speichern Sie sie mit dem Befehl DATEI> FÜR WEB SPEICHERN…. In dem angezeigten Dialogfenster können Sie die Einstellungen so lange verändern, bis Sie ein gutes Maß zwischen Bildqualität und Speichergröße gefunden haben. Ein Bild sollte idealer weise maximal ca. 50 KB groß sein.

11.04.23


6

Internetpublishing::Photoshop::Aufgabe Fotografie verkleinern

Aufgabe: Fotografie Sahara fürs Web verkleinern• Ändern Sie die Datei „Sahara.jpg“ so, dass sie als

Stimmungsbild für den Kopf der gemeinsamen Website für Ihre Seite benutzt werden kann (690 px breit), und speichern Sie sie als verkleinerte .jpg-Datei fürs Web, die maximal 50 KB groß ist.

So gehen Sie vor:

1. Datei „Sahara.jpg“ öffnen

2. Größe ändern im Menü „BILD>BILDGRÖßE“

3. Evtl. einen Ausschnitt des Bildes freistellen BILD>FREISTELLEN

4. Wählen Sie das Menü DATEI>FÜR WEB SPEICHERN… und probieren Sie verschiedene Einstellungen aus, bis Sie mit Qualität und Speichergröße zufrieden sind.

11.04.23


7


Das Prinzip der Ebenen • Ein Bild kann in Photoshop aus einer oder mehreren

Ebenen bestehen. Ebenen sind wie (transparente) Folien, die verschiedene Teile eines Bildes enthalten.

• Die Ebenen werden in der Ebenenpalette angezeigt und können dort bearbeitet werden.

• Anzeigen der Ebenenpalette: FENSTER>EBENEN.

• Befehle zu den Ebenen (neu, löschen, Ebenen verbinden etc.) können in der Ebenenpalette oder im Menü Ebenen gegeben werden.

11.04.23


8

Internetpublishing::Photoshop:: Grundlagen

Malen, zeichnen, schreiben: Grafiken erstellen

• Die wichtigsten Werkzeuge finden Sie in der Werkzeugpalette.

• Wenn Sie wissen möchten, wozu ein Symbol dient, dann zeigen Sie mit der Maus darauf. Nach ca. 1 Sekunde erscheint ein Tiptext mit der Kurzbeschreibung des Werkzeugs.

• Mehr als ein Werkzeug über eine Schaltfläche können Sie aktivieren, wenn sich rechts neben dem Werkzeug ein kleines Dreieck befindet. Klicken Sie auf das Symbol und halten Sie die Maustaste gedrückt bis ein Menü mit den alternativen Werkzeugen aufklappt.

11.04.23


9

Internetpublishing::Photoshop::Aufgabe Logo

Aufgabe - Logo für Website Internetpublishing erstellenDas Logo soll entweder aus der Schrift „Internetpublishingseminar“

oder „HTML-Kurs“ o.ä. bestehen. Die Schrift soll mit einem Schatten versehen werden.

So gehen Sie vor:

1. Erstellen Sie eine neue Datei und geben Sie ihr die Größe 210 x 120 px. Speichern Sie unter dem Namen „Logo.psd“.

2. Wählen Sie das Textwerkzeug aus, ziehen Sie einen Rahmen auf und schreiben Sie den Logotext. Nehmen Sie Einstellungen in der Optionenpalette vor.

3. Doppelklicken Sie in der Ebenenpalette rechts neben den Ebenennamen um das Fenster „Ebenenstil“ zu öffnen. Wählen Sie z.B. „Verlaufsüberlagerung“ und „Kontur“ aus.Ein Doppelklick auf „Kontur“ oder „Verlaufsüberlagerung“ ändert den Fensterinhalt, so dass Sie Einstellungen zu dieser Formatierung vornehmen können.

11.04.23


10

Internetpublishing::Photoshop::Aufgabe Button

Aufgabe – Button „vor“ erstellenDer Button soll dazu dienen, auf die Folgeseite zu gelangen.So gehen Sie vor:

1. Erstellen Sie eine neue Datei, und geben Sie ihr die Größe 70x50 px. Speichern Sie unter dem Namen „b_vor[Nr].psd“ . (Nr durch eigene Nr ersetzen)

2. Wählen Sie das Werkzeug „abgerundete Ecken“ aus und nehmen Sie in der OPTIONENLEISTE folgende Einstellungen vor:

• Feste Größe: 60 x 40 px• Wählen Sie eine Vordergrundfarbe die Ihnen gefällt • Radius: 8

3. Klicken Sie einmal in die Fläche der Datei, und der Button wird erzeugt. Sie können Ihn im Ebenenstil gestalten

4. Erzeugen Sie eine neue Ebene und nennen Sie sie Pfeil vorwärts.

5. Wählen Sie das „Eigene Form Werkzeug“.

6. In der OPTIONENLEISTE können Sie dann eine Form auswählen.

7. Erzeugen Sie die Form in der neuen Ebene, indem Sie die Form mit der Maus „aufziehen“.

11.04.23


11

Internetpublishing::Photoshop::Layout f. Website

Ein Layout für die Website erstellen

• Photoshop eignet sich hervorragend, um ein Layout für die Website zu erstellen.

• Legen Sie jedes Element der Website in eine eigene Ebene, dann können Sie es frei verschieben und ändern, oder verschiedene Varianten ausprobieren.

• Es sollte jedoch vorher schon ein ziemlich genaues Layout auf Papier geben.

• Evtl. können Sie sich auch zunächst eine Datei mit einem Farbschema für Ihre Website definieren.

11.04.23


12

Internetpublishing::Photoshop::Layout f. Website

So gehen Sie vor

1. Erstellen Sie eine Datei, die genau die Größe der Tabelle hat, die Ihrer Seite zugrunde liegen soll, z.B. 980 x 550 px, um die Seite für die Bildschirmauflösung (1024 x 768) zu konzipieren.

2. Um eine Hintergrundfarbe für die Website festzulegen, wählen Sie eine Vordergrundfarbe und füllen die Hintergrund-Ebene mit dem Füllwerkzeug auf.

3. Zur Positionierung der Elemente können Sie Hilfslinien definieren.

4. So können sie farbige Flächen erzeugen: markieren Sie einen Bereich mit dem Auswahlwerkzeug, und füllen Sie ihn dann mit dem Füllwerkzeug .

5. Erzeugen Sie jetzt die einzelnen Elemente der Website, z.B. rechteckige Buttons für Menüs, Überschriftentexte oä. Die Elemente können an den Hilfslinien ausgerichtet werden (FENSTER>AUSRICHTEN AN>HILFSLINIEN).

11.04.23


13