Inhalt. Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter HMS+ / Projektketten / DTP Seite. 2 Semesterplan. 3-5 Auftrag Fotoromanza

Transkript

1 1 Inhalt Seite 2 Semesterplan 3-5 Auftrag Fotoromanza 6 Fotoshop Anleitung Bildmontage Fotoshop 7 Fotoshop Anleitung Fotoromanza Fotoshop 8 Bewertungskriterien Fotoromanza 9-12 Anleitung Website für Fotoromanza Dreamweaver CD (Corporate-Design), Beschreiben eines Firmenauftritts 17 Website Konzept Tabellenstruktur Website Photoshop Vorlage/Prüfung Photoshop Flasheinführung, Flashbanner Flash

2 2 Semesterplan Datum Arbeit an: Auftrag, Aufgabe Fr. 22. Aug. Fr. 29. Aug. Fr. 5. Sept. Fr. 12. Sept. Fr. 19. Sept. - Semestereinführung - Aufträge vorstellen - Einführung: Fotografie und Drehbuch - Einführung: Fotomontage mit Photoshop - Einführung: Photoshop Werkzeuge, Layout, Montage - Layout für Bildschirm - Einführung Photoshop Formen, Farben, Texte usw. - Design- und Gestaltungskonzepte - Photoshop Layout- und Farbkonzept - Photoshop Fotoromanza Texte, Sprechblasen, Bewertungskriterien 01: Drehbuch Fotoromanza - Fotomontage «Filmstill» 01: Drehbuch Fotoromanza - Szenen Fotografieren 02: Fotoromanza, erste Seite - Arbeit an der Fotoromanza - Arbeit an der Fotoromanza - Titelseite Fr. 26. Sept. - Photoshop - Abschluss der «Fotoromanza» Fr. 3. Okt. 6. Okt. 19. Okt Herbstferien Fr. 24. Okt. Fr. 31. Okt. - Abschluss der «Fotoromanza» - Konzeption der Website - Einführung Dreamweaver Site einrichten, Layout - Konzeption der Website - Konzepte besprechen - Kriterien: Inhalt, Form und Technik - Planung der Website - Arbeitsteilung bestimmen Abgabe der Fotoromanza - Website für Fotoromanza erstellen - Konzeptarbeit für Websiteprojekt - Layoutentwurf 1 Konzept pro Gruppe als Word-File Website einrichten und erste Seiten Fr. 7. Nov. - Kriterien: Inhalt, Form und Technik - Website entwickeln, Entwurf im Fotoshop Fr. 14. Nov. Fr. 21. Nov. Fr. 28. Nov. Arbeitsteilung Software (Photoshop oder Dreamweaver) neuer Stammordner anlegen Designbeispiele, Farben (Werbebeispiele) Dreamweaver Layout Einführung Tabellenlayout und Seiteneigenschaften Information Flashbanner Dreamweaver, CSS Stylesheet Schriften im Internet Bildgrössen Verlinkungen, Imagemaps Prüfungsbeispiele: Photoshop und Dreamweaver Dreamweaver Rollover Navigations-Planung fertig - Stammordner mit Ordner(Bilder, css) anlegen - Website, Seiten entwerfen - Entwurf im Fotoshop - Website Layout besprechen und bearbeiten - Inhalte planen: Arbeiten delegieren, Bild und Text HTML-Layout fertig Navigation Fr. 5. Dez. Prüfung Dreamweaver/Photoshop Produktion der Inhaltsseiten Fr. 12. Dez. Fr. 19. Dez. Flasheinführung Banner prov. Abgabe «Website» erste Rückmeldungen Dreamweaver Details 22. Dez Jan Weihnachtsferien Fr. 9. Jan. Fr. 16. Jan. Dreamweaver Abgabe Website, Kontrolle, Ergänzungen Vorstellen der Website Fr. 23. Jan. def. Abgabe «Website» 1 Website pro Gruppe Fr. 30. Jan. Fr. 6. Feb. Einführung SBT Einführung SBT

3 3 Auftrag 01: Drehbuch Anleitung Gruppenbildung, Arbeitsteilung Die Gruppe soll aus mindesten 3 und höchstens 5 Personen bestehen. Mindestens eine Person ist jeweils am Fotografieren. Innerhalb der Gruppe soll zu Beginn eine Arbeitsteilung festgelegt werden. Die wichtigsten Aufgaben sind: 1. Regie, ev. auch Gesprächsleitung 2. Drehbuch, Planung, Termine, Protokoll, Notizen, Bildskizzen 3. Kamera, Bildgestaltung 4. Beleuchtung, Materialbeschaffung, Kulissen, Verkleidung usw. Die Geschichte (Konzept) Die Geschichte soll eine kurze, verständliche und spannende Handlung darstellen. Diese soll mindesten aus den drei Teilen Einführung, Höhepunkt und Auflösung bestehen. Dieser Ablauf wird als grafische Kurve sowie in einer kurzen Beschreibung der einzelnen Szenen notiert. Beispiel aus der Literatur (Schiller, Maria Stuart) (aus grafische Darstellung mit einerkurve kurze Beschreibung der einzelnen Teile Vorgehen Aufgabe Zeit Leitung, Verantwortung 1. Arbeitsteilung bestimmen 5 Min (alle) 2. Geschichte überlegen (einzeln) 10 Min (alle) 3. Austausch der Geschichten, jede/r teilt seinen Vorschlag mit, überzeugendste Geschichte bestimmen 10 Min (Regie) 4. ausgewählte Geschichte planen und skizzieren (siehe oben) 20 Min (Regie, Drehbuch)

4 4 Auftrag 01: Drehbuch Klasse: Name Arbeitsbereich Titel der Geschichte: Bezeichnung der einzelnen Szenen und Spannungskurve Spannungkurve Szenen Anzahl der Einzelbilder/Szene

5 5 Auftrag 01: Drehbuch Beispiele Dramaturgie (Geschichte) In der Gruppe wird die Dramaturgie der ganzen Geschichte sowie der einzelnen Szenen besprochen, bestimmt und aufgezeichnet (siehe Kurve) (Regie). Die Dramaturgie der Geschichte hat Einfluss auf die Gestaltung der einzelnen Bilder. Dramaturgie (Bild) Die Art, wie die Szenen (Handlung, Personen, Details) fotografiert werden, bestimmt den Eindruck, den der Leser/Betrachter erhält. Der Betrachter identifiziert sich immer mit der Lage des Fotografen, resp. mit der dadurch dargestellten Lage der fotografierten Person. Wenn eine Figur von oben fotografiert wird, wirkt sie klein und schwach. Fragen soll der Betrachter den Überblick haben? (Langweilig) Antworten (Bildgestaltung) Gesamtansicht, von oben. Weitwinkel, von weitem (bei der Einführung, zwischen Actionsszenen) muss der Betrachter gepackt werden? (Spannung) Nahaufnahme, nur einen Gesichtsausschnitt zeigen (in Dialogen, Streitszenen, Actionsszenen) muss sich der Betrachter stark fühlen? (Manipulation) Blick von oben auf die Szene soll der Betrachter mitgerissen werden? (Aktion) schneller Bildwechsel, Schnittechnik Perspektivewechsel, von mehreren Seiten aufnehmen soll sich der Betrachter entspannen können? Landschaftaufnahme, ruhiger Schwenk, Zoom weg (Einleitung, zwischen Actionsszenen, Ausklang) soll sich der Betrachter bedrängt fühlen? Nahaufnahme von unten, schneller Bildwechsel, Perspektivewechsel Bildausschnitt Totale Nahaufnahme Perspektive von oben von unten Bildwechsel seitlich (Bilder aus «Pulp Fiction», Q. Tarantino) frontal

6 6 Auftrag 02: Bildmontage mit Filmstill Bildmontage Ein eigenes Portrait so inszenieren und fotografieren, dass es mit einem Portrait eines Filmstills ausgetauscht werden kann. Vorbereitung 1. Filmstill aussuchen (doc:/leimbach/filmstills) und ins eigene Verzeichnis (H) kopieren 2. Aufnahmesituation und Position des ausgewählen Portraits analysieren - Lichtsituation, woher kommt das Licht? was ist alles beleuchtet? - Aufnahmewinkel, von wo aus wurde gefilmt? von unten? von oben? - Hintergund und Übergänge, hell oder dunkel? 3. Aufnahme machen (im Team) 4. Digitalfoto vom Doc in das eigene Verzeichnis kopieren 5. beide Bilder im Programm Photoshop öffnen, Start - alle Programme - Adobe - Photoshop CS2 Photoshop einrichten 6. Programmfenster einrichten und maximieren Fenster anordnen (nur Werkzeuge, Ebenen und Protokoll öffnen) beide Fotos müssen nebeneinander angezeigt werden Auswahl kopieren 7. im eigenen Bild mit Lassowerkzeug Gesicht umfahren, Auswahl wird so markiert, mit CTRL-C Auswahl kopieren 8. auf Filmstill gehen und mit CTRL-V Zwischenablage einfügen Bild nun maximieren und auf zu bearbeitendes Detail zoomen Anpassen 9. mit CTRL-T Grösse anpassen, mit Enter bestätigen 10. mit Bearbeiten-Transformieren-Drehen Position anpassen 11. mit Bild-Anpassen-Helligket/Kontrast Helligkeit anpassen 12. mit Bild-Anpassen-Farbton/Sättigung Farbton anpassen 13. mit Bild-Anpassen-Farbbalance Farbton anpassen Retuschieren 14. mit Radiergummi Ränder korrigieren 15. mit Zauberstab Farbbereiche auswählen und anpassen Farb-Toleranz wenn nötig anpassen (oben bei den Menus) 16. Ebenen zusammenfügen rechte Maustaste auf obere Ebene im Ebenenfenster sichtbare auf eine Ebene reduzieren 17. mit Wischfinger Ränder verwischen 18. mit Stempel wenn nötig Strukturen kopieren Beenden und Speichern 19. Datei ins eigene verzseichnis speichern und anschliessend auf das Transferverzeichnis kopieren transfer/leimbach/hms_07_08/

7 7 Anleitung Fotoromanza 1. Datei einrichten - Fotoshop starten - Datei - neue Datei Name: fotoromanza_klasse_name, Breite: 1024 Pixel, Höhe: 768 Pixel, Auflösung: 300 Pixel/Zoll - Fenster-Ebenen anzeigen neue Gruppe erstellen - seite 1 (insgesamt soviele Gruppen erstellen wie es Seiten haben wird) 2. Fotos einfügen, Grösse anpassen, drehen und platzieren - Datei öffnen - erstes Foto aus dem Ordner Fotoromanza öffnen - Foto markieren (Ctrl-A), kopieren (Ctrl-C) - in Fotoromanzadatei klicken und einfügen (Ctrl-V) - mit Zoomwerkzeug Ansicht verkleinern (Ctrl -) - Foto verkleinern (Ctrl - t), mit gedrückter Shifttaste an einem Eckanfasser verkleinern - Foto wenn nötig drehen (Ctrl - t), an einem Eckanfasser Drehwerkzeug suchen und mit gedrückter Shifttaste 90 Grad drehen mit allen Fotos für diese Seite gleich verfahren achten darauf, dass sich diese Fotos auf den Ebenen in der Gruppe der ersten Seite befinden 3. Layout und Raster - für ein klares Layout sollte ein Raster bestimmt werden, in den die Bilder eingepasst werden - Ansicht - Einblenden - Raster - Rastergrösse bestimmen: Bearbeiten - Voreistellungen - Hilfslinien, Raster und Slices ( z.b. 10 Pixel) - Fotos nach Raster ausrichten, z.b. in 3 Zeilen 4. Fotos anpassen - unnötige Bildteile abschneiden auf entsprechende Ebene gehen, mit Auswahlrechteck Bildteil auswählen, mit Del-Taste löschen - Foto nach Bedarf verkleiner oder vergrössern - Fotos nach Raster ausrichten 5. Hintergrund anpassen - auf Hintergrundebene gehen - Farbe (Vordergrundfarbe) bestimmen und mit Füllwerkzeug Hindergrundebene mit Farbe füllen 6. Rahmen bestimmen - Auf Ebene der ausgesuchten Fotografie gehen - Ebenenstil unten im Ebenenfenster (F) anwählen - Kontur bestimmen 7. Sprechblase zeichnen - Auf Ebene der ausgesuchten Fotografie gehen - Eigene - Form- Werkzeug (unten am Textwerkzeug im Werkzeugfenster) oben bei den Menus Sprechblase anwählen - Sprechblase zeichnen, Farbe und Kontur bestimmen - Textwerkzeug auswählen und Text schreiben ( Die Textebene sollte oben an der Sprechblasenebene sein)

8 8 Bewertungskriterien Fotoroman 1. Inhalt Verständlichkeit: ist die Geschichte gut verständlich, wirken Bild und Text als Einheit zusammen? Dramaturgie: entwickelt die Geschichte eine Spannung mit ein bis zwei Höhepunkten? Botschaft: hat die Geschichte Witz, Tiefgang, Überraschungen? 2. Form Layout-Lesbarkeit: unterstützten Gestaltung und Layout die Lesbarkeit? Bilder: sind die Bilder in Ausschnitt und Grösse dem Inhalt und der Dramaturgie angepasst? Schriften: sind Schrifttypen, Schriftgrössen, Schriftfarben und Sprechblasen gut lesbar und in einem sinnvollen Verhältnis zum Layout? Farben: unterstützen die Farben die Lesbarkeit und Stimmung der Geschichte, erscheinen sie einheitlich? 3. Technik Photoshop: werden die Werkzeuge und Funktionen der Software beherrscht und sinnvoll eingesetzt? Dramaturgie und Bildverteilung verständliche und richtige Reihenfolge der Bilder, gut lesbare Bildfolge Bildgrössen der Wichtigkeit entsprechend, Figuren und Gesten gut sichtbar, überflüssige Umgebung wegschneiden, einzelne Bildelemente oder Figuren mit Freistellen hervorheben Nicht alles muss immer ganz sichtbar sein! Texte einheitliche Schriften gut lesbar, Blöcke oder Sprechblasen voll ausgenützt Sprechblasen einheitlich in Form, Farbe, Kontur und den weiteren Effekten Abstände, Hintergrund Ränder möglichst schmal und einheitlich am Raster ausgerichtet Hintergrund nicht als dominante Fläche und Farbe sichtbar! Ränder, Konturen Nicht zu fett, einheitlich in den Farben Farben Farbdesign zur Story passend, ev. mit Bildhintergrund oder Muster Flächen- oder Hintergundfarben aus wichtigen Farben der Bildern wählen

9 9 Anleitung: Website für Fotoromanza, Export der einzelnen Seiten Jede Seite des Fotoromans besteht aus einer Ebenengruppe, in der sich alle einzelnen Fotos, die Textblöcke und Sprechblasen befinden. Diese Seiten werden nun in der richtigen Rheinfolge als Einzelbilder exportiert und nach vorgegebenen Konventionen gespeichert und benannt. 1. Webordner anlegen Für eine Website muss im eigenen Stammverzeichnis (H:) ein Ordner gemacht werden, der einen eindeutigen Namen hat (z.b. fororomanza_web_h3a_initialen). In diesem Ordner wird noch ein Ordner für die Bilder gemacht. Der Ordner darf auf keinen Fall auf dem Desktop erstellt werden!! Ordner- und Dateinamen für das Internet dürfen keine Leerschläge, Umlaute odet Sonderzeichen haben!! Leerschläge werden mit einem Unterstrich (_)gemacht. Seiten exportieren 2. erste Seite anwählen In der Photoshopdatei wird die erste Seite (Ebenengruppe) angewählt (Titelseite) und die anderen Seiten (Ebenengruppen) ausgeblendet. 3. Seite exportieren Befehle: - Datei - für Web und Geräte speichern Bildqualität und Bildformat einstellen, oben auf zweifach oder vierfach gehen, zweite Variante auswählen Format jpg wählen (rechts oben) - speichern in den vorher erzeugten, separaten Bilderordner speichern auf Namenkonventionen achten: keine Umlaute, keine Leerschläge, keine Sonderzeichen 4: weitere Seiten exportieren Die weiteren Seiten werden ebenfalls in den Bilderordner gespeichert.

10 10 Anleitung Website für Fotoromanza, Adobe Dreamweaver Datei- und Namenskonventionen für das Internet Alle Ordner- und Dateinamen innerhalb der Website dürfen keine Umlaute, keine Sonderzeichen und keine Leerschläge enthalten. Für Leerschläge wird ein _ verwendet. Ordner für Website erstellen Die Ordner für die Website müssen in einem eigenen Verzeichnis (Netzwerk:H:/) erstellt werden. Nicht im Ordner «eigene Dateien» und auch nicht auf dem Desktop!! Diese Ordner dürfen wärend der ganzen Zeit (Semester), an der man an der Site arbeitet, weder verändert, umbenannt noch gelöscht werden. Dreamweaver einrichten Dreamweaver öffnen Programme-Adobe CS4-Dreamweaver 1. Site einrichten Im Fenster rechts unten: 2. Dateien - Site - Sites verwalten neue Site Im Fenster «Sitedefinition» 1. erweiteret anwählen 2. Sitenamen angeben (beliebeigen Namen, z.b. Fotoromanza) 3. Lokalen Stammordner angeben (H:/website_fotoromanza_h3a_kr) Standard Bilderordener angeben (H:/website_fotoromanza_h3a_kr/bilder) erste Seiten produzieren 1. Datei - neu - 2. HTML-Seite 3. erstellen Die Seite erscheint als leeres HTML-Dokument - Datei speichern - als index.html (die Dateierweiterung.html oder.htm wird automatisch dazugesetzt - Die erste Datei erscheint im Dateifenster Erweiterungen einblenden Es ist sinnvoll, im Windows-Explorer die Einstellungen so zu ändern, dass von den Dateien die Erweiterungen angezeigt werden. So erkennt man, ob die Daten richtig benannt sind und zu welchem Programm sie gehören. - Explorer - Extras - Ordneroptionen - Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren (Haken löschen)

11 11 Anleitung Website für Fotoromanza Startseite Die Datei mit dem Namen index.html ist immer die Startdatei der Website. Sämtliche Dateien erscheinen im Dateienfenster unten rechts. HTML-Seiten gestalten 01: Namen für Browserzeile eingeben z.b. Fotoroman H3b lm 02: Dateieigenschaften einrichten unten im Eigenschaftsfenster auf Seiteneigenschaften klicken alle Ränder auf 0 stellen ev. Hintergrundfarbe einstellen e: Tabelle einfügen und gestalten 01: Menu - Einfügen - Tabelle 02: Tabelle einrichten: 2 Zeilen 3 Spalten Tabellenbreite 100% Randstärke 0 Zellauffüllung 2 Zellabstand 0 03: untere Zellen markieren 04: Zellen verbinden 05: Navigation schreiben in obere Zelle links: zurück

12 Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter in obere Zelle mitte: Home in obere Zelle rechts: weiter 06: Schrift gestalten Zellen markieren: Horiz. auf zentriert Format: Überschrift 4 Schriftart: Arial, Helvetica,... Bild einfügen 01: erstes Bild aus dem Bilderordner in die untere Zelle ziehen Neue Seiten produzieren 01: Dateil speichern Datei speichern unter: als seite_1.html altes Bild löschen neues Bild einfügen (seite_1.jpg) 02: Textlink markieren (zurück) Ziehzeichen bei Hyperlink im Eigenschaftsfenster auf index.html ziehen. (der Hyperlink wird im Fenster angezeigt) Gleichen Hyperlink für «Home» anwenden Hyperlink für «weiter» erstellen: Das Wort «weiter» markieren und im Feld «Hyperlink» den Link schreiben: seite_2.html 12

13 13 CD-Beschrieb (corporate design) Aufgabe: Text mit Bildmaterial (Text mit Bildern 3-4 Seiten, wie Vorlage) Abgabe: Vorbereitung Es wird eine Firma gesucht, deren CD reizvoll und/oder geeignet für die Beschreibung ist. Zu allen Produkten und visuellen Erscheinungsformen der Firma werden Beispiele gesammelt und für die Arbeit zusammengetragen. Produkte: fotografieren (digital), einscannen, Abbildungen und Dokumentationen sammeln Werbespots: auf Video oder DVD aufnehmen, Einzelbilder speichern Läden, Filialen: Abbildungen sammeln, fotografieren Prospekte: verlangen, bestellen, holen Visitenkarten: verlangen Inserate: ausschneiden Websites: Einzelbilder und ev. ganze Seiten speichern (Printscreen) Personal: fotografieren (natürlich zuerst fragen), beschreiben Firmenfahrzeuge: fotografieren Signete, Logos: sammeln, speichern Slogan: aufnehmen, notieren Das Scannen von Bildern aus Inseraten, Prospekten oder anderen Printprodukten kann auf Anfrage von der Lehrperson übernommen werden. Ebenso das Speichern von Filmeinzelbildern oder Websites. 2. Inhalte: - Beschreibung der Firma und deren Produkte - Logos, Signete (Brand) - Grafiken (Formensprache), Bilder und Fotos - Farben (Stimmung) - Schriftarten (Typografie) Folgende Fragen sollten beantwortet werden: - Welches Image hat die Firma (jung, dynamisch, seriös, ältlich, ökologisch, verantwortunsbewusst, hart, weich, cool etc.) - wer soll angesprochen werden? (Alter, Schicht, Luxusklasse) - Wie ist das Verhälnis Image - CD, stimmt das Image mit dem CD überein oder steht es in einem Widerspruch? - Was für ein Gefühl wird mit dem CD geweckt? Was für eine Stimmung weckt die Farbigkeit des CD? - Ist das CD einheitlich? - hat sich das CD in den letzten Jahren verändert? - Internetauftritt - wird der Internetauftritt dem CD gerecht? - Funktionalität der Website - Übersichtlichkeit der Website - Inhalt der Website (Umfang, Tiefe) - Technik der Website (HTML, DHTML, Flash?) - Vergleich mit ähnlichen Firmen, Konkurrenz (z.b. Aldi gegen Denner) Die CD-Beschreibung wird als Textdatei im Word erstellt. Texte und Bilder müssen in digitaler Form abgeliefert werden.

14 Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter 14

15 15 CD-Beispiel DENNER 1. Logo Farbe: Schrift: Grafik: Gesamteindruck: starker roter Grund (R:255, G:0, B:0) weisse Schrift kursive Groteskschrift, fett, Grossbuchstaben, leicht übereinanderliegend Rechteck länglich mit dynamischem Oval dynamisch, schnell einfach und klar. Sehr konsequent durchgezogenes Erscheinungsbild. Wirkt als Billiganbieter sehr einheitlich, cool und modern. Das Logo wirkt kräftig, stark, aber doch bewegt und dynamisch. Das reine Rot hat Signalwirkung. Das weisse Oval mit unterschiedlicher Strichdicke verstärkt die Leserichtung von links nach rechts. Die fette Kursivschrift mit der Überlappung des D am Anfang verstärkt die Bewegung nach rechts. Die Platzierung des Logo am Rand von einem verschwommenen rot-weissen Grund an den Schaufenstern verstärkt den Eindruck von Bewegung. Der Hintergrund erscheint als verschwommen wahrgenommenes, schnell vorbeifahrendes Fahrzeug. Denner = schnell, sofort überall 2. Schriften Im Logo fette, kursive Groteskschrift, weiss auf rotem Grund In Inseraten ebenfalls fette, kursive Groteskschrift mit Gross- und Kleinbuchstaben. Kleine Grössenunterschiede zwischen Gross- und Kleinbuchstaben. Schriften sind sauber plaziert, keine Überlappungen oder Schrägen. Etwa drei unterschiedliche Schriftgrössen. Kleinste Schrift ist nicht mehr kursiv. Sehr grosse Schriftzüge, erinnert an Schlagzeilen, Blick. Grosse, meist Preisschilder in Etikettenform, schräg angebrachte Rabattangaben, Zahlen auch kursiv in derselben Schrift, wirken aber etwas in die Höhe gezogen. Alte Preisangaben durchgestrichen in schwarzer Schrift. 3. Grafiken Wenige grafische Elemente, meist nur das weisse Oval. Roter Hintergrund hat immer Signalwirkung, wirkt aber tendentiell billig, muss es auch. Oval kommt immer wieder vor, im Logo und als Umrahmung der dargestellten Produkte. Farbe Rot variert je nach Produkt und Zielpublikum. Bei Weininserat eher nobles Weinrot, dafür farbige Flaschenabbildungen, wirkt edler und teurer. 4. Bilder, Fotos Abbildungen der Produkte sind oft schwarz-weiss. Farben würden Grundfarbe Rot stören, das wirkt sehr einheitlich und eher cool. Die Abbildungen sind oft überdeckt von Preis- und Rabattangaben. Der Preis ist vermutlich das Wichtige. 5. Slogans, Spots 6. Geschäftsdesign 7. Kleidung, Personal 8. Internetauftritt 9. Geschichte und Veränderung des CD usw.

16 Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter 16

17 17 Aufgabe Webdesign Sie erhalten dieses Semester (siehe Semesterplan) den Auftrag, eine inhaltlich interessante, formal schöne und technisch funktionierende Website zu einem selbstgewählten Thema (z. Bsp. «Mein Haustier») zu gestalten. Gearbeitet wird in Zweierteams. Sämtliches Material (Texte, Logos, Bilder, Grafiken, Fotos usw.) muss selber generiert werden. Zusätzlich haben Sie die Aufgabe, ein «Website-Konzept» abzugeben. In diesem Konzept planen Sie Ihre Website in Inhalt (Thema, Umfang, Ordnung) und Aussehen (Gestaltungskonzept). Während des Semesters erlangen Sie die nötigen Kentnisse zur Erfüllung des Auftrages. Sie erhalten Einführungen in die jeweiligen Programme (Photoshop, Dreamweaver usw.), damit sie selbständig Bilder bearbeiten sowie Text und Bilder für das Publizieren im Internet layouten können. Abgabe «Website-Konzept» - Abgabetermin: Mitte Nov Umfang: min. 2 A-4 Seiten (Word) - Inhalt: inhaltliche und gestalterische Beschreibung Ihrer Website Inhalt - Thema: Titel und Arbeitstitel (kurze prägnante Beschreibung des Titels) Gestaltung - Look: Kurzbeschreibung des Aussehens (Vergleich zu Bekanntem) - Umfang: quantitative und qualitative Abschätzung des Materials - Farbe: Farbklang, Frabpalette, Linkfarben - Ordnung: Einteilung des Inhalts in Rubriken (Hierarchie), sinnvolle Zusammenstellung der Gebiete. - Navigation (sinnvolle, prägnante, einfache Begriffe), Einteilung in Primär- und Servicenavigation - Form: Layout (Spaltensatz), Logo - DAS zum Thema passende Foto - Sitemap (Auflistung sämtlicher Seiten sowie deren Verlinkung) - Typografie: Schriftarten, -grössen (Titel, Lauftext, Links,, Icons - Quelle: Woher stammen die inhalte? - Fotografie: Digitalcamerabilder, Intenet-Datenbanken, Gestaltungsabsicht, Proportionen, Format (hoch, breit), s/w oder Farbe - Was interessiert Euch am Thema? Kriterienkatalog des «Website-Konzept» Der Kriterienkatalog gibt Ihnen einen Anhaltspunkt, was Ihr Konzept ungefähr beinhalten sollte. Selbstverständlich können Sie das Repertoire beliebig erweitern. Gutes Gelingen! Bewertung Inhalt 1. Wird etwas präsentiert, das nicht schon oft im Internet publiziert wurde (Exklusivität)? 2. Gehen die Informationen in die Tiefe? 3. Eigene Recherche, eigene Texte, eigene Bilder? 4. Sind alle Informationen gegeben (Bild- und Textquellen, Autoren, Impressum) Form/Design 1. Ist das Erscheinungsbild (Design) einheitlich und wird ein Farbkonzept deutlich? 2. Stimmen Design und Inhalt (Zielpublikum) überein? 3. Stimmen die Farben der Website, der Schriften, Bilder und Logos zusammen (Farbkonzept)? 4. Sind die Grössenverhältnisse bildschirmgerecht? (nicht scrollen!) Technik/Funktionen 1. Funktioniert die Website und ist die Navigation übersichtlich (Ordner, Dateien, Datenbanken) 2. Funktioniert die Navigation (Seitenwechsel mit Bildern, Buttons oder Texten) 3. Ist die Navigation auf allen Seiten einheitlich?

18 18 Logo Kopfzeile Suchfunktion Hauptnavigation Pulldownliste Servicenavigation Inhalte Werbeblock Grafiken Farben Bilder/Fotos

19 Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter 19

20 Kantonsschule Enge Zürich, kam/lem, BG/DTP/SBT, Arbeitsblätter 20

21 21 Photoshop, Layout für Website Beispiel 01 Arbeitsschritte Vorbereitung: - Stammordner für die Website erstellen: H:/DTP/h3b_website_pruefung_initialen. - In diesem Ordner werden zudem die Ordner /Material und /Bilder erstellt. 1. Photoshop starten, Datei neu Eine neue Datei mit den Massen 900 x 600 Pixeln (Breite x Höhe) wird festgelegt. Die Datei soll eine Auflösung von 72 Pixel/Zoll haben und mit dem Dateinamen h3a_photoshoplayout_initialen.psd in den Materialordner gespeichert werden (nicht auf dem Desktop speichern!). - Lineale einblenden, in Pixeln anzeigen. - Raster einblenden und einrichten, in Pixeln (Abstand 100, Unterteilungen 10). - Hilfslinien ziehen (horizontal von oben auf 100 und 110, 170, 230, 290 und 350 vertikal von links auf 20, 180 und 200). - 3 Ebenengruppen anlegen und benennen: Logo, Navigation, Banner. 2. Logo - in der Logogruppe Ebene erstellen für Logohintergrund. - links oben im Logobereich (200 x 100 Pixel) Feld mit Farbe erstellen: Farb-Hexadezimalwert: f5de8c. - im Logobereich mit Formwerkzeug (Ellipsewerkzeug) Ellipse zeichnen, drehen und skalieren, so dass die Ellipse die Ränder des Rechteckes berühren. - Ellipseform mit Farbe Grau (aaaaaa) füllen. - Ellipseform mit Effekt: «abgeflachte Kante und Relief» versehen (siehe Vorlage). - Text «logo» ausserhalb des Logobereiches schreiben, Schrift bestimmen (wie Vorlage) und auf den Logobereich schieben. Die Schrift soll eine Schreibschrift (Schnürlischrift) sein, eine ähnliche aber hellere Farbe wie der Logohintergrund haben und etwa die Ellipse füllen. - Schatten zur Schrift hinzufügen. - Rolloverschrift produzieren: Schriftebene duplizieren und Schriftfarbe ändern (Orange). 2. Navigation - neue Ebene in der Gruppe Navigation, Hintergrundfeld für Navigationsbereich zeichnen (200 x 400 Pixel). - Farbverlauf von der Logohintergrundfarbe zu weiss von oben nach unten einfügen. - Neue Ebene für 5 Rahmen für die Navigation Pixel unterhalb des Logos eine Rechteckauswahl (Rechteckwerkzeug) mit den Massen 160 x 40 Pixel zeichnen. - Im Abstand von jeweils 20 Pixel mit gedrückter Shifttaste 3 weitere Felder zeichnen. - Kontur schwarz, Dicke 4 Pixel. - 4 Navigationstexte schreiben, Schrift wie Logo, Farbe schwarz. - Navigationstexte duplizieren für Rollover, Farbe Orange. 3. Banner - Panoramabild (panorama_04.jpg) öffnen und in die Photoshopdatei einfügen. - Grösse anpassen und in den Bannerbereich einpassen, überflüssigen Bereich abschneiden, nicht verzerren. - neue Ebene einfügen und Farbverlauf (Logo-Hintergrundfarbe) mit transparenter Mitte über das Panorama legen. - Slogan schreiben, (Schrift wie üblich, mit Schatten). - Rollover für Slogan produzieren. 4. Anpassungen - Ellipsefarbe im Logo farblich an das Panoramabild anpassen. 5: Exportieren für Website - Die einzelnen Bildteile werden für die Website in den Bilderordner exportiert: - Logo-Rollover (1x2 Bilder) - Navigation (4x2 Bilder) - Banner (1 Bild) 6: Sichern und auf das Transververzeichnis kopieren - der ganze Webordner mit dem darin enthaltenen Materialordner und Bilderordner und den erzeugten Daten wird auf das Transferverzeichnis kopiert.

22 22 Photoshop, Layoutvorlage Beispiel

23 23 Photoshop, Layout für Website Beispiel 02 Arbeitsschritte Vorbereitung: - Panoramabild vom Laufwerk doc:\leimbach/dtp/panorama_zuerich_01.jpg holen und ins eigene Verzeichnis kopieren - Photoshop starten - Hintergrundfarbe (im Werkzeugfenster unten unteres Farbfeld) ein helles Grau wählen 1. Photoshop - Datei neu - neue Datei mit den Massen 900 x 600 Pixeln (Breite x Höhe), Auflösung: 72 Pixel/Zoll, Hintergrundfarbe: Hintergrund. - mit dem Dateinamen h3b_photoshop_pruefung_initialen.psd ins eigene Laufwerk H:\ speichern (nicht auf dem Desktop speichern!) - Lineale einblenden, in Pixeln anzeigen - Raster einblenden und einrichten, in Pixeln (Abstand 100, Unterteilungen 10) - Hilfslinien ziehen (horizontal von oben auf 10, 90,110, 130 und 140, vertikal von links auf 10 und 90) - 3 Ebenengruppen anlegen und benennen: Logo, Navigation, Banner 2. Logo - Ebenenfenster: in der Logogruppe Ebene erstellen, Name: Logohintergrund - links oben im Logobereich mit einem Abstand von 10 Pixeln zu den Rändern in ein Quadrat von 90x90 Pixeln je ein hellblaues und weisses Dreieck zeichnen. Die Dreiecke mit dem Polygonlasso (und gedrückter Shifttaste) zeichnen und mit dem Füllwerkzeug mit den Farben füllen - diese Ebene mit kleinem Schlagschatten versehen (siehe Vorlage) - neue Ebene erstellen, um das Logoquadrat (die beiden Dreiecke) ein Auswahlrechteck zeichnen (90x90 Pixel), Kontur füllen (Menu Bearbeiten-Kontur füllen, aussen, 3 Pixel, weiss) - Text «ZH» schreiben, Schrift bestimmen (wie Vorlage) und exakt auf den Logobereich schieben. Die Schrift soll eine dunkelblaue, fette Groteskschrift sein und das Quadrat des Logos füllen - Effekt: abgflachte Kante und Relief zur Schrift hinzufügen - Rolloverschrift produzieren: Schriftebene duplizieren und Schriftfarbe ändern (Orange) Gruppe Logo zuklappen 2. Navigation - Ebenenfenster: neue Ebene in der Gruppe Navigation - Rechteckauswahl für Hintergrundfarbe des Navigationsbereichs zeichnen (zwischen 100 x 140 Pixeln von oben und bis 500 Pixel von links) - bis 500 Pixel von links gleiches Hellblau wie Logo einfüllen - Im rechten Bereich (ab 500 Pixel) bis zum Bildrand Farbverlauf vom Hellblau zu weiss - neue Ebene für die 5 weissen Rahmen der Navigation erstellen. - 5 Auswahlrechtecke von 20 x 80 Pixel in regelmässigen Abständen in den Navigationsbereich zeichnen und jeweils Kontur füllen, Kontur weiss, Dicke 2 Pixel - Schatten hinzufügen - die 5 Navigationstexte schreiben, Schrift wie Logo, Farbe wie Logotext - Navigationstexte duplizieren für Rollover, Farbe Orange Navigationsgruppe zuklappen 3. Banner - Ebenenfenster: Bannergruppe anwählen - Panoramabild (panorama_zuerich_01.jpg) im Photoshop öffnen und in die Photoshopdatei (in die Bannergruppe) einfügen - Grösse anpassen und in den Bannerbereich einpassen (10 Pixel Abstand zu den Rändern), überflüssigen Bereich abschneiden, nicht verzerren - Schlagschatten zum Bild hinzufügen - Slogan schreiben, (helles Blau wie Logo, Schnürlischrift) 6: Sichern und auf das Transferverzeichnis kopieren - die Photoshopdatei nochmals sichern, dann schliessen und nun auf das Transferverzeichnis (transfer://leimbacher/dtp/... kopieren.

24 24

25 25 Photoshop, Layout für Website Beispiel 03 Arbeitsschritte Vorbereitung: - Mickeybild vom Laufwerk doc:\leimbach/dtp/mickey_01.jpg holen und ins eigene Verzeichnis kopieren - Photoshop starten - Hintergrundfarbe (im Werkzeugfenster unteres Farbfeld) ein sehr helles Rosa wählen 1. Photoshop - Datei neu Eine neue Datei mit den Massen 900 x 600 Pixeln (Breite x Höhe) wird festgelegt. Die Datei soll eine Auflösung von 72 Pixel/Zoll haben, Hintergrundfarbe: Hintergrund, und mit dem Dateinamen h3b_photoshop_pruefung_initialen.psd ins eigene Laufwerk H:\ gespeichert werden (nicht auf dem Desktop speichern!) - Lineale einblenden, in Pixeln anzeigen - Raster einblenden und einrichten, in Pixeln (Abstand 100, Unterteilungen 10) - 2 Ebenengruppen anlegen und benennen: unten Logo, darüber Navigation 2. Logo - Ebenenfenster: in der Logogruppe neue Ebene erstellen für Logofarbverlauf - Auswahlrechteck zeichnen (ganze Breite, von oben 200 Pixel), mit Farbverlauf füllen (von violett oben bis Hintergrund unten) - weitere Ebene erstellen für Logohintergrund - Mit Auswahlrechteck nochmals gleiches Feld über den ganzen oberen Bereich zeichnen (von oben 200 Pixel). Feld mit dunklem Rot füllen - Ebene mit grösserem Schlagschatten versehen (siehe Vorlage) - Ebene mit Radiergrummi (Durchmesser ca 30 Pixel) in eine Art Küstenladschaft mit 4 Inseln verwandeln (Ausrichten abschalten, Ansicht-Ausrichten!) - mit Zauberstab und Shifttaste die 4 Inseln anwählen und Kontur machen (bearbeiten - Kontur füllen, 2 Pixel, weiss) - Rest mit schwarzer Kontur versehen - Text «Mickey, the greatest» schreiben, Schrift und Schriftgrössen bestimmen (wie Vorlage) und auf den Logobereich schieben. Die Schrift soll eine gelbe, eher fette Schnürlischrift sein - Effekt: Schlagschatten, abgflachte Kante und Relief zur Schrift hinzufügen - Rolloverschrift produzieren: Schriftebene duplizieren und Schriftfarbe ändern (blau) Gruppe Logo zuklappen 2. Navigation - Ebenenfenster: auf Navigationsgruppe klicken - Bild (Mickey_01.jpg) öffnen und in die Photoshopdatei hineinkopieren - Grösse anpassen, spiegeln (Ctrl-T), weisse Umgebung löschen (mit Zauberstab und Del-Taste) - auf die grösste Insel schieben und einpassen - Sprechblase zeichnen und Text schreiben (wie Vorlage) - Effekte: Schlagschatten, abgeflachte Kante und Kontur - über die 4 Inseln die Links schreiben, Schrift wie Mickey, 36 Punkt, weiss - Links duplizieren und Schriftfarbe für Rollover ändern (Grün) 6: Sichern und auf das Transferverzeichnis kopieren - die Photoshopdatei nochmals sichern, dann schliessen und nun auf das Transferverzeichnis (transfer:\leimbacher/dtp/... kopieren.

26 26

27 27 Flasheinführung: Banner mit Navigation Vorbereitung: Um im Flash mehrere Bilder für Überblendungen verwenden zu können, müssen diese zuerst im Photoshop vorbereitet und als JPG-Dateien gespeichert werden. Z.B. 3 Bilder im Format 300 x 160 Pixel 1. Flash starten 2. Fenster anordnen wichtige Fenster: Zeitleiste Werkzeuge Eigenschaften Bibliothek 3. Bibliotkek holen wenn die Bibliothek nicht angezeigt wird, muss dieses Fenster im Menu Fenster - Bibliothek geöffnet werden. 1. Fenster - Bibliothek 2. Bibliothek erscheint in neuem Fenster 3. Fenster in die rechte Fensterspalte schieben 4. Bühnengrösse bestimmen Die Bühne muss die Grösse des im Layout bestimmten Bereichs haben. 1. Doppleklick auf kleines Fenster oberhalb der Bühne (12.0 BpS) 2. Breite bestimmen (800 Pixel) 3. Höhe bestimmen (160 Pixel) wenn die eigene Website andere Bannermasse hat, diese entsprechend eingeben 5. neue Ebenen erstellen In der Zeitleiste werden für die einzelnen Teile separate Ebenen erstellt (wie im Photoshop) 1. mit rechter Maustaste auf unterste Ebene gehen 2. - Ebene einfügen 3. Doppelklick auf neue Ebene und Namen geben 6. Bilder importieren Die vorbereiteten Bilder müssen in die Bibliothek importiert werden. Datei - Importieren - In Bibliothek Importieren Bilder aussuchen Die Bilder erscheinen in der Bibliothek 7. Hifslinien vorbereiten und Bilder einsetzen Damit alle Bilder exakt an denselben Ort platziert werden können, müssen Hilfslinien aus dem Lineal gezogen werden. 1. Ansicht - Lineale 2. aus den Linealen Hilfslinien auf die Bühnenränder und die gewünschte Bühnenposition ziehen (wie im Photoshop)

28 28 3. gewünschte Ebene anklicken (bild 1) Bild aus der Bibliotkek auf die Bühne ziehen Bild nötigenfalls mit Transformierwerkzeug verkleinern oder vergrössern. soviele neue Ebenen erstellen wie Bilder eingesetzt werden müssen Die weiteren Bilder auf die weiteren Ebenen schieben 8. neue Schlüsselbilder setzen auf Bild 30 in der Zeitleiste über alle Ebenen die Felder markieren mit rechter Maustaste - Schlüsselbild einfügen 9. Tween erstellen mit rechter Maustaste zwischen den ersten und den letzten Schlüsselbilder die Ebenen markieren und auf dem Befehl - Bewegungstween erstellen Die Zeitleistenebenen erhalten einen Pfeil zwischen den Schlüsselbildern. 10. Zwischenschlüsselbilder erstellen Für die Steuerung der Bilder auf Bild 5 und 25 je eine Serie Schlüsselbilder erstellen. 11. Transparenz erstellen 1. Die ersten Schlüsselbilder (Bild 1) der Ebenen mit den Fotos markieren 2. Die Fotos auf der Bühne anklicken 3. Eigenschaftsfenster anwählen 4. bei Farbe Alpha (Alphakanal) anwählen 5. Prozent auf 0 setzen nun sind die Fotos auf dem ersten Schlüsselbild unsichtbar und erscheinen is zu Schlüsselbild Ebenenbereiche verschieben Die Tweeningbereiche der einzelnen Ebenen können nun verschoben werden, so dass die einzelnen Fotos hintereinander erscheinen und verschwinden Man markiert exakt die Tweeningbereiche und verschiebt den

29 29 nun schwarz markierten Bereich 13. neues Symbol erstellen Für den Hintergrund mit einem farbverlauf wird ein neues Symbol erstellt 1. neue Ebene erstellen 2. Einfügen - neues Symbol 3. Grafik auswählen 4. dem Symbol einen Namen geben - ok Ein neues Symbolfenster (über der Bühne) wird geöffnet 14. Symbol zeichnen soweit Zoomen, dass der Raster in der richtigen Grösse erscheint (160 x 800 Pixel) 1. Hilfslinien setzten 2. Rechteckwerkzeug auswählen Konturfarbe deaktiviern Farbe auswählen - Farbverlauf 3. Farbverlauf bestimmen 4. Rechteck zeichnen - zurück zur Bühne der Szene Neues Flashdokument Die Schaltfläche kann als Symbol in die bestehende Flasnavigation oder als einzelnes Flasdokument erstellt werden Wer die Schaltfläche in die bestehende Navigation einbauen will geht bei Punkt 15 weiter. Datei - neu Format bestimmen (wie Punkt 4) 20 x 80 Pixel weiter bei nächstem Punkt 15. Schaltfläche erstellen 1. neue Ebene erstellen (zoberst) Name: Schalter 2. Hilfslinie auf 140 Pixel von oben ziehen 3. Einfügen - neues Symbol - Schaltfläche 16. Schaltfläche zeichnen 1. Ebenen erstellen oben Text unten Grund (für Hintergrund)

30 30 2. Ebene Grund anwählen Raster einblenden an Raster ausrichten aktivieren Ansicht - Ausrichten - an Raster ausrichten In den sichtbaren Raster ein Rechteck zeichnen 20 x 80 Pixel 17. Text für Schaltfläche 1. obere Ebene (Text) anwählen 2. Textwerkzeug wählen Schriftart und Schriftgrösse wählen Schriftfarbe wählen 3. Text über das Farbfeld schreiben mit Pfeil richtig platzieren 18. Rolloverfunktion bestimmen 1. oberes Feld (Darüber) anwählen 2. Textfarbe ändern Symbol schliessen 19: Funtion definieren 1. Symbol aus der Bibliothek in die Bühne ziehen genau platzieren 2. Fenster Aktionen öffnen Aktion - Browser/Netztwerk wählen get URL wählen URL einschreiben Befehl on (release) 20. Film Testen Steuerung - Film testen

31 31