Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS

  • Published on
    06-Apr-2015

  • View
    102

  • Download
    0

Embed Size (px)

Transcript

<ul><li> Folie 1 </li> <li> Kirsten Schulte Photoshop Seminar Internetpublishing BOK-Veranstaltung des ZfS </li> <li> Folie 2 </li> <li> 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 </li> <li> Folie 3 </li> <li> Internetpublishing :: Photoshop :: Grundlagen Photoshop Grundlagen Grafik im Web Webtaugliche Grafikformate.gif,.png,.jpg. Pixel Mit der Auflsung 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. Whrend fr den Druck ein Bild eine Auflsung von ca. 300 dpi haben sollte, gengen fr den Bildschirm 72 - 96 ppi. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 3 </li> <li> Folie 4 </li> <li> Internetpublishing :: Photoshop ::Grundlagen Das Anwendungsfenster 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 4 </li> <li> Folie 5 </li> <li> Internetpublishing :: Photoshop ::Aufgabe Programmoberflche Aufgabe Programmoberflche einrichten Prfen Sie, ob folgende Bedienfelder angezeigt werden, sonst sorgen Sie dafr, dass sie angezeigt werden (Men Fenster): Werkzeugpalette, Optionsleiste, Ebenenpalette, Farbenpalette, Informationenpalette. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 5 </li> <li> Folie 6 </li> <li> Internetpublishing :: Photoshop :: Grundlagen Grafiken in webtauglichen Format speichern Da fr die Anzeige der Grafik auf der Website sowenig wie mglich Ladezeit bentigt werden soll, empfiehlt es sich, Grafiken frs Web wie folgt zu berprfen: Ist die Grafiken nur so gro wie bentigt (in cm oder px)? Verkleinern Sie sie andernfalls. Ist die Auflsung nur so hoch, wie fr den Bildschirm bentigt (maximal 96 Pixel/Zoll (=Inch) ). Reduzieren Sie die Speichergre der Grafik: speichern Sie sie mit dem Befehl D ATEI &gt; F R W EB S PEICHERN . In dem angezeigten Dialogfenster knnen Sie die Einstellungen so lange verndern, bis Sie ein gutes Ma zwischen Bildqualitt und Speichergre gefunden haben. Ein Bild sollte idealer weise maximal ca. 50 KB gro sein. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 6 </li> <li> Folie 7 </li> <li> Internetpublishing :: Photoshop ::Aufgabe Fotografie verkleinern Aufgabe: Fotografie Sahara frs Web verkleinern ndern Sie die Datei Sahara.jpg so, dass sie als Stimmungsbild fr den Kopf der gemeinsamen Website fr Ihre Seite benutzt werden kann (690 px breit), und speichern Sie sie als verkleinerte.jpg-Datei frs Web, die maximal 50 KB gro ist. So gehen Sie vor: 1. Datei Sahara.jpg ffnen 2. Gre ndern im Men B ILD &gt;B ILDGRE 3. Evtl. einen Ausschnitt des Bildes freistellen B ILD &gt;F REISTELLEN 4. Whlen Sie das Men D ATEI &gt;F R W EB SPEICHERN und probieren Sie verschiedene Einstellungen aus, bis Sie mit Qualitt und Speichergre zufrieden sind. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 7 </li> <li> Folie 8 </li> <li> 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 knnen dort bearbeitet werden. Anzeigen der Ebenenpalette: F ENSTER &gt;E BENEN. Befehle zu den Ebenen (neu, lschen, Ebenen verbinden etc.) knnen in der Ebenenpalette oder im Men Ebenen gegeben werden. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 8 </li> <li> Folie 9 </li> <li> Internetpublishing :: Photoshop :: Grundlagen Malen, zeichnen, schreiben: Grafiken erstellen Die wichtigsten Werkzeuge finden Sie in der Werkzeugpalette. Wenn Sie wissen mchten, 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 Schaltflche knnen Sie aktivieren, wenn sich rechts neben dem Werkzeug ein kleines Dreieck befindet. Klicken Sie auf das Symbol und halten Sie die Maustaste gedrckt bis ein Men mit den alternativen Werkzeugen aufklappt. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 9 </li> <li> Folie 10 </li> <li> Internetpublishing :: Photoshop ::Aufgabe Logo Aufgabe - Logo fr 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 Gre 210 x 120 px. Speichern Sie unter dem Namen Logo.psd. 2. Whlen 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. Whlen Sie z.B. Verlaufsberlagerung und Kontur aus. Ein Doppelklick auf Kontur oder Verlaufsberlagerung ndert den Fensterinhalt, so dass Sie Einstellungen zu dieser Formatierung vornehmen knnen. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 10 </li> <li> Folie 11 </li> <li> 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 Gre 70x50 px. Speichern Sie unter dem Namen b_vor[Nr].psd. (Nr durch eigene Nr ersetzen) 2. Whlen Sie das Werkzeug abgerundete Ecken aus und nehmen Sie in der O PTIONENLEISTE folgende Einstellungen vor: Feste Gre: 60 x 40 px Whlen Sie eine Vordergrundfarbe die Ihnen gefllt Radius: 8 3. Klicken Sie einmal in die Flche der Datei, und der Button wird erzeugt. Sie knnen Ihn im Ebenenstil gestalten 4. Erzeugen Sie eine neue Ebene und nennen Sie sie Pfeil vorwrts. 5. Whlen Sie das Eigene Form Werkzeug. 6. In der O PTIONENLEISTE knnen Sie dann eine Form auswhlen. 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 </li> <li> Folie 12 </li> <li> Internetpublishing :: Photoshop ::Layout f. Website Ein Layout fr die Website erstellen Photoshop eignet sich hervorragend, um ein Layout fr die Website zu erstellen. Legen Sie jedes Element der Website in eine eigene Ebene, dann knnen Sie es frei verschieben und ndern, oder verschiedene Varianten ausprobieren. Es sollte jedoch vorher schon ein ziemlich genaues Layout auf Papier geben. Evtl. knnen Sie sich auch zunchst eine Datei mit einem Farbschema fr Ihre Website definieren. 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 12 </li> <li> Folie 13 </li> <li> Internetpublishing :: Photoshop ::Layout f. Website So gehen Sie vor 1. Erstellen Sie eine Datei, die genau die Gre der Tabelle hat, die Ihrer Seite zugrunde liegen soll, z.B. 980 x 550 px, um die Seite fr die Bildschirmauflsung (1024 x 768) zu konzipieren. 2. Um eine Hintergrundfarbe fr die Website festzulegen, whlen Sie eine Vordergrundfarbe und fllen die Hintergrund-Ebene mit dem Fllwerkzeug auf. 3. Zur Positionierung der Elemente knnen Sie Hilfslinien definieren. 4. So knnen sie farbige Flchen erzeugen: markieren Sie einen Bereich mit dem Auswahlwerkzeug, und fllen Sie ihn dann mit dem Fllwerkzeug. 5. Erzeugen Sie jetzt die einzelnen Elemente der Website, z.B. rechteckige Buttons fr Mens, berschriftentexte o. Die Elemente knnen an den Hilfslinien ausgerichtet werden (F ENSTER &gt;A USRICHTEN AN &gt;H ILFSLINIEN ). 02.04.2015 (c) Kirsten Schulte, kirsten.schulte@gmail.com 13 </li> </ul>

Recommended

View more >