Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS.

Präsentation zum Thema: "Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS."—  Präsentation transkript:

1 Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS

2 Internetpublishing :: Übersicht ::Seminarinhalte 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 2 Projektablauf Technische Kenntnisse HTML CSS Photoshop Dreamweaver Das Internet 1. Konzeption, Planung 2. Site Konzeption 3. Site Erstellung 4. Publikation und Marketing 5. Evaluation und Wartung Interface-Design Site-Design Page-Design Beta-Test

3 Internetpublishing :: Photoshop :: Grundlagen Photoshop – Grundlagen Grafik im Web Webtaugliche 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 3

4 Internetpublishing :: Photoshop ::Grundlagen Das Anwendungsfenster 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 4

5 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 5

6 Internetpublishing :: Photoshop :: Grundlagen 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 D ATEI > F ÜR W EB S PEICHERN …. 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 6

7 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ü „B ILD >B ILDGRÖßE “ 3. Evtl. einen Ausschnitt des Bildes freistellen B ILD >F REISTELLEN 4. Wählen Sie das Menü D ATEI >F ÜR W EB SPEICHERN … und probieren Sie verschiedene Einstellungen aus, bis Sie mit Qualität und Speichergröße zufrieden sind. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 7

8 Internetpublishing :: Photoshop ::Grundlagen 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: F ENSTER >E BENEN. Befehle zu den Ebenen (neu, löschen, Ebenen verbinden etc.) können in der Ebenenpalette oder im Menü Ebenen gegeben werden. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 8

9 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 9

10 Internetpublishing :: Photoshop ::Aufgabe Logo Aufgabe - Logo für Website Internetpublishing erstellen Das 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 10

11 Internetpublishing :: Photoshop ::Aufgabe Button Aufgabe – Button „vor“ erstellen Der 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 O PTIONENLEISTE 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 O PTIONENLEISTE 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“. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 11

12 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. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 12

13 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 (F ENSTER >A USRICHTEN AN >H ILFSLINIEN ). 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 13