WWW-Seiten mit HTML erstellen

Bashir Nazaryar, Dozent


Links:
SelfHTML: Link

Grundlagen Datenbanken

Büchertips:
PHP4 für Dummies
Christian Baum
MySQL f. Dummies
Michael Röttgers

Primär Schlüssel gibt es nur einmal.
Tiniint= 256
Smallint= 65.536

Keine Tabellen mit Werten, immer mit präfix davor (z. B. kunde_timestamp)

Interger --> Zahlen;
Text + Char --> Alles (Char, Varchar( bis 255 Zeichen), tinytext (255 Zeichen),
text (65535 Zeichen), mediumtext 2hoch 24 (16,7 Mio), longtext 2 hoch 32 (4,3 Mrd))

Grundlagen Programmierung

Grundlagen der OOP + UML (Unified Modeling Language)
Analyse und Design mit UML
Dipl.- Ing. Marc Nguidjol spricht sich "GIJOL"

12.02.2007
Objektorientierte Programmierung
OOSE, S= Software, E=Entwicklung
Definition Objekt?= Gegenstand, alles was man anfassen kann, aus der Realität
UML ist eine grafische Realisierungssprache.
OO-Ansatz --> Welt = Sammlung v. interagierenden Objekten
OOP --> Beschreibung der Realität. - Abstraktion: Unterscheidung zwischen wichtig/unwichtig
- Wiederverwendbarkeit (Vererbung). Aus einer Basisstruktur etwas neues schaffen und erweitern (ist-ein Beziehung).
Für ein Problem, eine Lösung finden => Modell
Wie kommt man zum Modell?
Es gibt eine vorgehensweise (Methodik) um von Realität zum Modell zu kommen, UML ist eine Sprache dafür.
Vorteil der OOP ist die wiederverwendtbarkeit.
(aus einer Basis-Struktur kann man etwas Neues schaffen, diese Basis wird durch Eigenschaften definiert (Vererbung).
Polymorphie - Vielgestaltigkeit (Wiederverwendbarkeit) - "Ist-Ein"-Beziehung nur bei Vererbung
Daten - Kaspelung= Einheit von Obj., diese Einheiten kommunizieren nur über spez. Kanäle def. Schnittst.
Man beschreibt Objekte über Klassen

OO-Analyse
Systemidee u. Zielsetzung
Anforderungbeitragende identifizieren
Geschäftsprozesse identifiezieren
Klasse ist nur abstrakt. Definition:
"Klassen von denen keine konkrteten Exemplare erzeugt werden können,
... bezeichnte man als abstrakte Klassen"
(Oesterreich)

OOD Design
Eigenschaften -- unterschiedliche Instanzen einer Klasse = Objekte

OO Modell
Teile und Herrsche
Divide + Conquer --> Aufteilen v. komplexen Zusammenhägen in log. Einheiten
Das Kohärenzprinzip = Verantwortlichkeit --> 1 Klasse sollte für bestimmten Bereich verantwortlich sein.

OO Modellierungselemente
Attribute - Stukrut d. Obj. Beschreibung
Operationen - Verhalten d. Obj., Bschreibung
Zusicherungen - Vorrausetz. u. Regeln f. Obj. Beschreibung
Beziehungen - was verbindet d. Klasse mit anderen interag. Obj.

Monomorphie, jeden Namen o. Wert genau ein Typ

• Name u. variablen genau der Typ, der bei Deklarat zugewiesen
• Wert Zeichenkette ist v. einen Typ der als "string" bez. wird
• das Literal 42 (od. der Wert, den es bez) hat den Ganzzahl-Typ (Integer)
• der Oper "+" hat den Typ Integer x int=> Int. akzept. Also genau 2 Argumente vom Typ Integer u. liefert genau 1 Wert v. Typ Integer
• second (funtion) akz. 2 strings und liefert immer den 2. zurück

Abstrakte Klassen

• Haben Methoden, die keine Implementierung ausweisen
• Abgeleitete Klassen müssen selber abstrakt sein, oder alle abstrakten Methoden implementieren
• Sonderfall in Java: Interfaces

Klassen ohne Methodenimplementierung

Klassen sind Beschreibung.

Übung 2:
Entwerfen Sie eine Klassenhierachie für die Artikel eine Versandhauses

• Buch
• CD
• DVD
• CD-Rom

Finden Sie Gemeinsamkeiten, bzw. Unterschiede
Benutzen Sie abstrakte Klassen

Assoziationen
Repräsentiert Beziehungen zwischen verschiedenen Objekten einer o. mehrere Klassen

Aggregation
Spez. der Assoziation
Teile - Ganzes - Beziehung

Kompositon
Spezialfall der Assoziation
Einzelteile sind vom Aggregat (dem Ganzem) existenziell Abhängig

Instanzen, alle Objekte der gleichen Art
Wie kann man den Begriff d. Klasse umschreiben?
Beschreibt Obj. und bestimmt deren Verhalten
Das Obj. muß Meth. o. Eig. kennen. Es gibt untersch. Obj.

13.02.2007
Zusammenfassung: OOP
Startpunkt: OO-Ansatz:

Objekte der Realität -Abstraktion-> OO-Modell abbilden
--> System = Menge v. Objekten, ide sich gegenseitig Nachrichten schicken. Der Empänger
einer nachricht löst eine Operation des empfangenen Objekts aus!!!

- Objekt = individuelles Exemplar mit einer eindeutigen Identität
- Klasse = Beschreibung von Objekten mit gemeinsamen Merkmale (Attribute, Methoden)

OOP --> Entwicklung hochwertiger Software --> OOSE = systematische Methodik für die Herstellung softw. hochw. Qualität -- Projektmanagement

SoftwareEntwicklung (Quälitätssicherung)

1. Analyse (Was?) "User Case" Anforderungs Analyse
2. Entwurf (Wie?)
3. Impl
4. Test + Abnahme
5. Wartbarkeit
   { Wasserfall --> erst wenn 1 Aktivität zu Ende ist, dann fängt die nächste an

-> Qualitätionssicherung
-> Projektmanagement
-> Engineering

- BS
- Anwdg.
Qualitäten --> Benutzerfreundlich, Korrektheit, gut Dokumentiert, Wartbarkeit
Korrektheit -->
Zuverlässigkeit --> das zu jedem Zeitpunkt die Software funktioniert
Robustheit --> Das das Programm nicht abstürtzt.
Benutzerfreundlichkeit -->
Effizienz -->
Potabilität --> Muß mobile sein. Muß mit anderen Betriebssysteme laufen können.
Wartbarkeit --> Software erweitern können
Dokumentation --> Dokumentation muß vorhanden sein

Ziel: Wie komme ich zum OO-Modell
UML = graf. Modellierungssprache
Diagramme eines Systems

1. statische Sicht
2. dyn. Sicht

Eine Klasse kann versch. Rolle spielen.

Problem: --> OOA Was? soll das System leisten?
Welche Anforderungen (User Case) werden gestellt?
Akteur - Wie sind die Anforderungen an das System

Akteur ist immer außerhalb eines Systems.

14.02.2007

UML --> graf. Modellierungssprache
--> Diagramme = "Sichten"

1. statisch: Struktur Syst.
2. dynamisch (Interaktion): Zeitverhalten (Nachrichtenfluß zwischen Objekten) Syst.

1.4 (Industriestandard) aber mittlerweile 2.0

1. Use Case
2. Aktivitätsdiag. (dyn)
3. Sequenz/Kollaborationsdiagramm (dyn)
4. Klassendiag. (statisch)

15.02.2007
Begriffe:

• Abstraktion = eine einfache Abbildung der Realität wo wichtiges von unwichtigen getrennt wird
• Datenkasplung = Einheit von Obj., diese Einheiten kommunizieren nur über spez. Kanäle def. Schnittst.
• Objektorientiert =
• Objekt = werden in Klassen beschrieben und jedes individuelle Exemplar hat eine eindeutige Identität
• Kohärenzprinzip = Als Kohärenz (lat.: cohaerere = zusammenhängen; Adjektiv kohärent) bezeichnet man allgemein den inneren oder äußeren Zusammenhang oder Zusammenhalt von etwas. Eine Klasse sollte nur für einen bestimmten Bereich zuständig sein. Verantwortlich
• Stereotyp = Information, Klassifikation bereich von mehrere Informationen.
• Klasse = Beschreibung von Objekten mit gemeinsamen Merkmalen (Attribute, Methoden) man unterscheidet zwischen Oberklasse (Basis) u. Unterklassen (Spezialisierung). Beide stehen in Beziehung zu einander.
• Zusicherung = Eine softwaretechnische Zusicherung ist ein Ausdruck, mit dem in OOAD-Diagrammen Einschränkungen definiert werden, welche die möglichen Zustände oder das Verhalten von Objekten betreffen. Auch die Semantik einer Assoziation kann mit einer Zusicherung eingeschränkt werden.
  Eine Zusicherung ist eine Möglichkeit, in einem Design-Diagramm Regeln festzulegen, die sonst mit den herkömmlichen Mitteln der OOAD, wie beispielsweise Multiplizitäten, nicht darstellbar sind. Zusicherungen dienen grundsätzlich als Vereinbarungen mit dem Programmierer.
• Qualitäten =
• Attribut = definieren oder charakterisieren ein Objekt
• Methoden = beschreibt für einen bestimmten Anwendungsbereich eine Vorgehensweise
• UML = grafische Realisierungssprache
• OOSE = Objekt orientierte Software Entwicklung
• Vorgehensmodell = Ein Vorgehensmodell gliedert den Prozess des Organisierens in verschiedene, strukturierte Phasen, denen wiederum entsprechende Methoden und Techniken der Organisation zugeordnet sind. Aufgabe eines Vorgehensmodells ist es, die allgemein in einem Gestaltungsprozess auftretenden Aufgabenstellungen und Aktivitäten in ihrer logischen Ordnung darzustellen.
• Wasserfall =
• Software = Ist eine Sammlung von Programmen Software lässt sich nach verschiedenen Kriterien unterscheiden. Eine mögliche orientiert sich an einer büroorientierten Anwendersicht, welche eine konkrete Sicht auf die Funktionalisierung gibt.
• Abstrakte Klassen = Abstrakte Klasse ist ein Begriff aus der objektorientierten Programmierung. Jede Klasse beschreibt genau die Eigenschaften all derjenigen Objekte, die eben dieser Beschreibung gemäß aus ihr hervorgehen würden.
  Solche Klassen, aus denen tatsächlich Objekte hervorgehen, werden konkrete Klassen genannt. Als abstrakte Klassen bezeichnet man hingegen solche Klassen, aus denen keine Objekte hervorgehen können.

20.02.2007
Ausschlußverfahren --> Problembeschreibung: 1. Kandidaten für Klassen = Substantiven, Namen, Gegenständer, Personen
2. Aus Liste Kandidaten
- Attribute v. Klassen/Objekte
- relevante Klassen
- irrelevante Klassen
{ Für ein Problem
- Operationen über Aktionen

21.02.2007
Kollaboration --> Sequenzdiagr. : Interaktion zw. beteiligten Objekten + Objektbeziehung (Kooperation)

22.02.2007
Durch Vererbung entsteht die Herachie.

Herunterladen:

Links:

Photoshop- prof. Web - Bildbearbeitung

Das ist der Anfang eine Blogs zum Thema Photoshop.
Jeder fängt klein an, so auch wir, hier sind die Tastaturkürzel:

F --> Fullscreen Toogle
STRG + R --> Ruler anzeigen: Verstellen der Linealmaßeinheit = Rechte Maus auf Lineal / Doppelklick
STRG + , --> Ein- u. ausblenden der Hilfslinien. Löschen der Hilfslinien: über Ansicht -> Hilfslinie
löschen, oder die Linie mit der Maus auf das Lineal ziehen. Verschieben und löschen der Linien mit dem Verschiebewerkzeug.
Alt --> Im Pinselmodus: Pipette
E --> Eraser, Radiergummi. Verschiedene Methoden um Farben aus einem Bild zum Arbeiten auswählen:

• Pipettenwerkzeug
• Im Farbwähler mit der Maus über das Bild fahren. Der Cursor wird zur Pipette
• Beim Arbeiten mit dem Malwerkzeug verwandelt sich der Cursor bei gedrückter ALT-Taste in eine Pipette
• Hintergrundradiergummi

Stempel

• Kopierstempel. Um den Stempelbereich auszuwählen muß die ALT-Taste gedrückt werden
• --> Ausgerichtet: Bereichentfernung wird aufgenommen und der entsprechende Bereich, wo sich der Cursor befindet, wird kopiert.
• --> Nicht Ausgerichtet: Genau der aufgenommene Bereich wird kopiert. Bei gedrückter Maustaste wird der Bereich erweitert.
• Musterstempel

O --> Um die Helligkeit und die Sättigung zu ändern, stehen drei Werkzeuge zur Verfügung:

• Der Abwedler. Hellt Bereiche auf. In der Werkzeugleiste legen Sie fest, ob dieses in Tiefen, Mitteltönen o. Lichtern geschieht.
• Der Nachbelichter
• Der Schwamm

R --> Wischfinger. Er verwischt.

• Fingerfarbe. Wischt Vordergrundfarbe ins Bild
• Scharfzeichner. Erhöht die Kontraste
• Weichzeichner. Verringert die Kontraste, indem er Farben angleicht und die Sättigung wegnimmt.

J --> Reparatur Werkzeug

• Bereichreparaturpinsel
• Reparatur Werkzeug
• Ausbessern Werkzeug
• Rote-Augen Werkzeug
  

Auswahlwerkzeuge

• Zauberstab (W) Wählt Farb- und Tonwertbereiche aus. Ist eine Auswahl blinkt um den ausgewählten Bereich eine Ameisenstraße. Soll zu einer aktiven Auswahl ein Bereich dazu ausgewählt werden, müssen Sie diesen mit gedrückter SHIFT-Taste und einem beliebigen Auswahlwerkzeug dazu aktivieren. Soll in einem Bereich aus einer aktiven Auswahl entfernt werden, müssen Sie diesen bei gedrückter ALT-Taste mit einem beliebigen Auswahlwerkzeug entfernen. Mit STRG+H wird die Ameisenstraße unsichtbar. Filter --> Renderingfilter --> Wolken

Verschiebewerkzeug

• Schneidet ausgewählte Bereiche beim verschieben aus. Die Hintergrundfarbe wird sichtbar. Wird auf Ebenen ausgeschnitten, wird der Bereich transparent
• Nutzt man das Verschiebewerkzeug mit gedrückter ALT-Taste, wird der ausgewählte Bereich dupliziert.
• Beim Verschieben mit gedrückter SHIFT-Taste wird horizontal oder vertikal verschoben.

STRG + BACKSPACE --> Füllen mit 100% Hintergrundfarbe
ALT + BACKSPACE --> Füllen mit 100% Vordergrundfarbe
M --> Auswahlelipse Zum Auswählen von ovalen oder runden Bereichen Mit gedrückter SHIFT-Taste erhalten Sie eine kreisrunde Auswahl. Bei gedrückter ALT-Taste ziehen Sie die Auswahl von einem Mittelpunkt aus auf

• Weiche Auswahlkante: Verlauf von deckenden Pixeln zu Transparenz.

Auswahlrechteck Zum Auswählen von recteckigen Bereichen. Beim auswählen mit gedrückter SHIFT-Taste wird die Auswahl quadratisch. Ist in der Werkzeugleiste

• Seitenverhältnis aktiviert, kann ein Verhältnis von Breite zu Höhe eingegeben werden.
• Feste Größe aktiviert, kann eine immer gleichgroße Auswahl aktiviert werden.

Ebenen
STRG+Klick auf Ebenenminiatur: Alle ebenen deckenden Pixel der Ebene werden Ausgewählt.
Zeichenebenen. Ist eine ganz normale Photoebene auf der gemalt, transformiert, der abgelegt werden kann. Eine neue Ebene legt sich immer über die zuletzt aktive Ebene.

• Hintergrundebene
• Zeichenebene
• Ebenen deckenden Pixel

Hintergrundebene ist eine Zeichenebene mit Besonderheiten:

• Sie kann nicht verschoben oder transformiert werden

Einstellungsebene Ebene --> Neue Einstellungsebene
Füllebene

• Verlauf (ebenen deckend)
• Muster
• Volltonfarbe

STRG + T --> Frei transformieren
Drehen: sich den Aktivierungspunkt nähern bis aus dem Cursor ein Drehpfad wird. Mit ALT-Taste gedrückt: ist der Angelpunkt in der Mitte. Mit SHIFT-Taste wird proportional die Größe verändert. Man kann die Tasten auch kombinieren SHIFT+ALT Taste dann wird proportional um den Mittelpunkt verändert.
STRG + ziehen --> Verschiebewerkzeug
STRG + ziehen + ALT --> Duplizieren
Text
Punkt und Absatztext

• Um Text gut lesen zu können sollte der Zeilenabstand 120% von der Kegelhöhe/Schrifthöhe betragen
• Textrahmen mit SHIFT-Taste ziehen, verändert nicht die Schriftgröße.
• AV (Spationieren oder Unterschneiden). Der Abstand der Buchstaben untereinander

Punkttext
I (Eingabe Cursor) _Grundlinie

• Es wird keine Zeilenlänge vorgegeben
• Shift + Return --> Zeilensprung
• RETURN entspricht Absatz (harter Return)
• Doppelklick auf das T Symbol in der Ebenenpalette und der gesamte Text ist markiert.
  

Absatztext
Mit dem Cursor einen Textrahmen aufziehen.

• Automatischer Zeilenumbruch.

Aufgabe:
Herunterladen: (Link kommt später)
Fußball/Globus Fußball/Fußball

• Fußball auf den Globus ziehen
• Kurzzeitig die Deckkraft der Fußballebene heruntersetzen.
• Mit Frei Transformieren STRG+T den Fußball auf die Größe des Globus bringen.
• Deckkraft wieder auf 100%
• Auf die Fußballebene eine Maske legen.
• Auf die Maske einen linearen Verlauf von Schwarz auf Weiß legen.

Aufgabe:
Herunterladen: (Links kommen später)

• In den Wolken Blendeffekte setzen. Filter --> Rendering-Filter
• Barometerdatei in die Wolkendatei ziehen. Mit Frei Transformieren STRG+T unproportional verkleinern und verzerren.
• Tropfen in die Wolken ziehen. Auf die Barometerebene anpassen. Mit einer Maske teilweise ausblenden. Ebenenmodus: Weiches Licht.
• Gewitterblitze in die Wolken ziehen
• Bereich markieren. Neue Einstellungsebene Umkehren.
• Neue Ebene. Verlaufswerkzeug wählen. Verläufe bearbeiten. Regenbogenverlauf. Kreisrunden Verlauf aufziehen. Regenbogen mit Hilfe einer Maske einarbeiten.
• Neue Ebene. Frosch einkopieren und mit Maske einarbeiten.
• Thermometerbild in das Arbeitsdokument ziehen. Mit Hilfe einer Maske freistellen und einarbeiten.. Ebenenmodus Luminenz.
• Neue Einstellungsebene. Tontrennung 6 Stufen.

Aufgabe:
Herunterladen: (Link kommt später)
Erstellung eines Musters, das man zur Hintergrundfüllung verwenden kann.

• KaffeeRoh Bild laden und eine Quadratische Auswahl mit gerader Pixalanzahl erstellen/freistellen.
• Filter --> sonst. Filter --> Verschiebeeffekte auswählen. Horizontal und Vertikal die Hälfte der Pixel anzahl einstellen.
• Die Mittelkanten so retuschieren, das Sie unsichtbar werden.
• Wiederholung der Teilung (Schritt 2)
• Bearbeiten --> Muster festlegen.
• Neue Datei. Bearbeiten --> Fläche füllen. Kontrollieren.
  

Aufgabe:
Herunterladen: (Link kommt später)
Apfel mit Decke

• Apfel und Decke bild laden.
• Tischdecke in den neuen Arbeitsbereich ziehen. Mit Frei Transformieren STRG+T perspektivisch verzerren.
• Apfel mit Hilfe des Zauberstabes und Auswahl umkehren freistellen und in die Arbeitsfläche ziehen
• Apfelebene verdoppeln Bei der unteren alle ebenen deckende Pixel auswählen Mit gedrückter STRG-Taste über die Miniaturdarstellung der Ebene in der Palette ziehen. Wenn die Hand mit dem Auswahlrechteck erscheint klicken. Auswahl transformieren. Weiche Auswahlkante. Schatten durch Verlauf von dunkel nach transparent.Filter --> Gaußscher Weichzeichner. Ebenenmodus Multiplizieren.

Aufgabe:
Herunterladen: (Link kommt später)
WTours

• Alle Bilder öffnen. Bild Statue als Basis. Bild--> Bildgröße pixelbreite= 320/5=64
• Auswahlrechteck auf feste Größe: 64 * 64 Pixel
• Neue Ebene. Auswahl durch: Bearbeiten --> Kontur füllen 2px mit Blau ton
• Hintergrundebene ausblenden
• Auswahl löschen. Auswahl aufheben STRG+D
• Bearbeiten -->Fläche füllen mit gerader erstellten Muster. Freistellen, damit überflüssige halbe Kästchen verschwinden.
• Die Landschafts- und Stadtansichtsbilder in die Arbeitsfläche ziehen. Dann in der Herkunftsdatei eine quadratische Auswahl erstellen, diese in die Arbeitsdatei ziehen und dort transferieren.
• Das zuerst erstellte Gitter liegt als oberste Ebene in der Ebenenpalette.
• Zwei neue Ebenen erstellen für je einen Verlauf.. Vordergrundfarbe Blau -> Transparent. Über ein Gitterquadrat. Ebenenmodus Multiplizieren.
• Auf der Brillendatei die Buchstaben wegstempeln. Brille mit Zauberstab auswählen, umkehren, freistellen und die Montagedatei ziehen.
• Brillengläser mit Hilfe eines Pfades freistellen. In der Pfadpalette ist ein Arbeitspfad entstanden. Diesen durch Ziehen auf das Symbol „Neuer Pfad“ in einen Pfad umwandeln. Mit der Schatfläche „Pfad als Auswahl laden“ Auswahl aus Pfad erstellen. In die Ebenenpalette wechseln.

Aufgabe:
Herunterladen: (Link kommt später)
Apfel freistellen

• Mit der Zeichnungsfeder einen Pfad zeichnen. Diesen mit der Direktauswahlwerkzeug bearbeiten.
• In die Pfadpalette speichern. Aus dem entstandenen Arbeitspfad durch ziehen auf das Symbol “Neuen Pfad erstellen“ einen Pfad machen.
• Im Palettenpopupmenü „Beschneidungspfad“ wählen. Dialogfenster bestätigen.
• Auswahl aus Pfad laden. In die Ebenenpalette wechseln und Auswahl umkehren.
• Durch Doppelklick auf die Hintergrundebene, diese mit Bestätigung der aufspringende Dialogfensters diese in eine Zeichenebene 0 verwandeln.
• Hintergrund löschen.
• Speichern als DCS2 (EPS)
• In die Füllebene mit dem Textmarkierungswerkzeug Schrift stanzen.

Aufgabe:
Herunterladen: (Link kommt später)
Text aus dem Rombild stanzen.

• Durch ein Doppelklick auf das Bestätigen mit OK des sich durch öffnen des Dialogfensters, machen Sie aus der Hintergrundebene eine normale Zeichenebene.
• Anschließend wird die Textebene, in der Ebenenpalette, unter die Bildebene gezogen.
• Mit gedrückter ALT-Taste auf die Grenze zwischen den beiden Ebenen zeihen, bis ein Vereinigungssymbol erscheint.
• Klicken: Markierungsgruppe ist fertig.
• Eine neue leere Ebene als unterste in die Ebenenpalette anlegen und mit Schwarz füllen.

Aufgabe:
Space
Herunterladen: (Link kommt später)
Datei neu 22 / 15 cm RGB 72dpi, Hintergrund weiß

• Hintergrund mit 100% Schwarz füllen.(STRG + BACKSPACE)
• Mond im Monddatei auswählen (Zauberstab + Auswahl umkehren)
• Mond in die Montagedatei ziehen.
• Von der Monddatei alle ebenenbedeckenden Pixel auswählen (STRG+KLICK auf Ebenen Icon).
• Eine Einstellungsebene (Farbton/Sättigung) über die Mondebene legen. Überall, wo die Auswahl blinkt. Ist die Auswahl aktiv. Farbton anpassen.
• Gelber Punkt: Ebene neu; Elipsenmalwerkzeug mit gedrückter SHIF-Taste eine kreisförmige Auswahl erstellen. Und mit gelber Farbe füllen. Über Ebenenstil den gelben Planeten einen Schein nach außen geben. Schein nach aussen bearbeiten, so dass der Schein bläulich ist.
• Planet mit Nebel: nochmals den Mond in die Monddatei ziehen. Mit dem Befehl frei Transformieren und auf die gewünschte Größe ziehen. Alle ebenen deckende Pixel auswählen und den Filter Weichzeichnungsfilter Bewegungsunschärfe anwenden. Winkel und Distanz verändern.
• Kreisförmiger Nebel: Neue Ebene. Verlaufswerkzeug.In der Werkzeugoptionspalette in den Verlauf klicken. Verlauf Orange zu Violett. Farbverlauf: Transparent zu Lila zu Orange zu Transparent. Einen kreisförmigen Verlauf aufziehen und diesen mit STRG+T bearbeiten. Mit einer Ebenenmaske bearbeiten.
• Textehintergrund und Hilfslinien: rechteckiges Auswahlwerkzeug. In der Werkzeugoptionenliste eine feste Größe von 100*100px einstellen. Neue Ebene erstellen. Eine Auswahl in die linke obere Bildebene klicken und eine Hilfslinie ziehen.. 5 senkrechte und eine waagerechte Hilfslinie anbringen. Feld 1 3 und 5 mit Lila füllen.
  

Aufgabe
„Foxtail“-Datei öffnen.
Herunterladen: (Link kommt später)
Filter --> Extrahieren.

• Zunächst markieren Sie die Kanten des gewünschten Objekts mit dem Kantenmaler (oberstes Werkzeug links im Dialogfenster).
• Mit dem Füllwerkzeug füllen Sie die umrundete Kanten (2. Werkzeug links im Dialogfenster).
• Mit dem Radiergummi (3. Werkzeug im Dialogfenster oben links) entfernen Sie zuviel ausgewählte Bereiche.
• „Weeds“ öffnen. FilterExtrahieren. OptionVordergrund erzwingen. (Mit dieser Option erzielen Sie bei einem komplexeren Bild ohne klarem Innenbereich dennoch eine Auswahl).
• Wählen Sie mit dem Pipettenwerkzeug (auf die helleren Bereiche) eine Farbe, die als Vordergrund gelten soll.
• Wählen Sie den Kantenmarker und übermalen Sie die buscheligen Graskanten.
• Ist die Auswahl OK, bestätigen Sie sie und ziehen sie in die Kranichdatei.

Arbeitsfolge bei Kontrast-, bzw. Bidkorrektur

• Bild öffnen (Boote_02)
• Drehen Sie das Bild falls erforderlich (Horizont grade rücken).
• Schneiden Sie überflüssigen Rand ab, falls erforderlich. Die Außenbereiche verfälschen sonst die Analyse der Tonverteilung, wenn Sie später ohnehin wegfallen sollen.
• Korrigieren Sie Bildrauschen und retuschieren Sie störende Details.
• Tonwertkorrekturen. Neue Weiß –und Schwarzpunkte werden gesetzt.
• Korrigieren von Farbstichen. Entweder mit dem Befehlen Farbbalance oder selektive Farbkorrektur.
• Ändern Sie gezielt Farben, etwa in den Himmelspartien, oder Gebäuden, etc. mit dem Dialogfenster „Farbton / Sättigung“.
• Rechnen Sie nun, falls erforderlich, in einem anderen Farbmodus um (zum Bsp. CMYK).
• Falls nötig, wenden Sie noch einen Scharf- oder Weichzeichnungsfilter an.

Die meisten Anpass- und Einstellungsbefehle machen Sie mit Hilfe von Einstellungsebenen.
Helligkeit / Kontrast

• Bei zu dunklen oder zu hellen Bildern und zu weichgezeichneten
• Wirkt auf das ganze Bild, bzw alle Tonwerte.

Tonwertkorrekturen
Hiermit erweitern und begrenzen Sie den Tonwertumfang

• ideal um flauen Vorlagen mehr Brillanz zu verkleinern.

Gradationskurven
Regeln die Kontraste und Tonwerte für einzelne Helligkeitszonen.

Belichtung
Korrigiert die Ausleuchtung vor allen in 32bit-Dateien

Autokontrast
Erweitert ganz ohne Dialogfeld den Tonwertumfang automatisch, so dass Ihr Bild kontratsreicher und brillianter wirkt. Vorsicht: die Farbstimmungen können sich bei Anwendung ändern!

Auto-Farbe
Behebt Frabstiche ohne den Kontrasteindruck zu ändern.

Tonwertangleichung
Sorgt für ausgeglichene Kontrastverhältnisse, sowohl in zu harten, als auch zu weichen Bereichen (Bildebenen).

Tiefen / Lichter
Korrigiert nur besonders helle oder besonders dunkle Bereiche (zum Beispiel stark unterbelichtete Bildteile, gut für Gegenlichtaufnahmen)

Fotofilter
Rechnet zarte Farbtöne ins bild hinein.

Farbbalance
Entfernt Farbstiche oder fügt welche hinzu.

Farbton / Sättigung
Ändert Farbtöne, Sättigung und Leuchtkraft. Ideal, um eine Bilddatei aufzufrischen.

Selektive Farbkorrektur
Veränder Farben, indem einzelne Grundfarben angehoben oder abgesenkt werden.

Gleiche Farbe
Gleicht die Farbe eines Bildes oder einer Ebene an die Farbigkeit eines anderen Bildes oder einer anderen Ebene an.

Variationen
Zeigt ein ganzes Tableau auf, um unterschiedliche Farb- oder Helligkeitsstimmungen im Bild zu erzeugen. Ideal für Ungeübte!

Farbe ersetzen
Fasst zwei Aufgaben zusammen: Auswählen gleichfarbiger Bildteile und Veränderung derer Farbtöne.

Kanalmixer
Verändert den Anteil der einzelnen Grundfarben eines Bildes.

Umkehren
Erstellt ein Negatives.

Schwellenwert
Erstellt ein Bitmap.

Tontrennung
Zieht ähnliche Farbtöne zusammen.

Tonwertkorrektur-Dialogfenster
Das Herzstück ist das Histogramm.
Es zeigt die Häufigkeit der verschiedenen Helligkeitsstufen von 0 (Schwarz(Schatten)) bis 255 (Weiß (Lichter))

Der mittlere Regler
(unterm Histogram) heller oder dunkler um Mitteltöne unabhängig von Lichtern und Tiefen anzuheben (nach links) oder abzusenken (nach rechts).

Schatten dunkler.
Linken, schwarzen Regler nach rechts ziehen.
Alle Bildteile links vom Schieberegler werden auf 0 (Schwarz) gesetzt. Ein Bild kann durch mehr Tiefe kontrastreicher und brillanter wirken.

Mehr Lichter
Beim nach innen Schieben des rechten weißen Reglers, werden alle Tonwerte rechts vom Regler auf 255 (Weiß) gesetzt. Dunkle Bilder können dadurch mehr Kontrast und Brillanz erhalten.

Pipetten
Neutralpipette
Anklicken – Punkt im Bild anklicken, um die gewählten Pixel (Tonwerte) auf Neutralgrau zu setzen.
Schwarz oder Weißpipette
Anklicken – Punkt im Bild anwählen. Alle ähnlichen Pixel werden auf (0) Schwarz oder (255) Weiß gesetzt.

In den Optionen des Dialogfeldes können Sie Schwarz, Grau oder Weißwert auch verändern.

Tonwertumfang
Geht von 0 – 255
Schatten heller: rechts den schwarzen Regler zur Mitte hin schieben.
Lichter dunkler: links den weißen Regler zur Mitte hin schieben.
Beides macht das Bild flauer, da Kontraste herabgesetzt werden.

Tonwertkorrektur mit Gradationskurven

• Kanal: RGB. Sie können den Gesamtkanal, das gesamte Bild (RGB) oder die einzelnen Farbbereiche getrennt voneinander bearbeiten.
• Die Rastergröße des Koordinatenkreuzes lässt sich mit gedrückter ALT-Taste durch Anklicken feiner einstellen.
• Eingabe/Ausgabe: zeigt Ihnen die Vorher- Nachherwerte an.
• Pipetten sind gleich zu verwenden wie bei der Tonwertkorrektur.
• - Standardmodus für Kurven mit weichen Übergängen.
• -Buntstiftmodus für Kurven mit hartem Übergängen und für Spezialeffekte.

Übung

• Sie machen sich eine quadratische Datei auf.
• Nehmen Sie das Textwerkzeug und schreiben Sie Ihren Vornamen schön groß in schwarz.
• Verschmelzen Sie die Textebene mit der weißen Hintergrundebene mit dem Befehl „Auf Hintergrundebene reduzieren“.
• Filter --> Weichzeichner --> Gaußscher Weichzeichner.
• Einstellungsebene Gradationskurven.
• Wenn Sie jetzt harte Kurven im RGB und in einzelne Farbkanäle anwenden, erhalten Sie Spezialeffekte.

Hintergrund absoften
Mit den Befehlen zur Tonwert-, bzw Kontrastkorrekturen lassen sich Bilder nicht nur korrigieren sondern auch drastisch absoften, aufhellen, weichzeichnen und flächiger malen, um zum Beispiel Schriften darauf lesbar zu platzieren.
Folgende Anpassungsbefehle sind dafür geeignet:

• Der mittlere graue Gammaregler der Tonwertkorrektur ändert nur die Mitte. Die dunklen Töne bleiben erhalten und könnten die Schrift stören. Der Tonwertumfangsregler verbannt sehr helle oder sehr dunkle Bildtöne. Das Motiv erscheint flacher, flauer und grauer.
• Gradationskurven
  
• Helligkeit/Kontrast verschiebt Höhen und Tiefen gleichermaßen. Es macht das Bild nicht sofort flacher, da die Kontraste erhalten bleiben.
• Farbton/Sättigung wirkt dimmend. Sie können einen Hintergrund nicht nur um- oder einfärben (Farben auswählen), sondern durch Rücknahme der Sättigung. Pastelltöne erzeugen und durch die Lab-Helligkeit können Sie Tiefe entfernen.

Auch auf Einstellungsebene können Sie Ebenenstile anwenden.
Mit dem rechte Maus-Tasten-Menü können Sie Ebenenstile kopieren und wieder einfügen.

Tiefen / Lichter
Eine Landschaft im Hintergrund ist genau richtig ausgeleuchtet, doch die Person im Vordergrund saufen dunkel ab. (z.B. bei Gegenlicht aufnahmen).
Die Personen im Vordergrund sind gut ausgeleuchtet, doch der Hintergrund säuft dunkel ab.

• Bild --> Anpassen --> Tiefen/Lichter --> weitere Option einblenden.
• Stellen Sie sich eine hohe Stärke ein (90%) und korrigieren Sie die weiteren Veränderungen mit den anderen Reglern.
• Experimentieren Sie mit der Tonbreite. Kleine Werte (10 oder 20) heben nur sehr dunkle Pixel deutlich an. Werte zwischen 30-50 heben nach weniger dunkle Pixel an. Sehr dunkle werden heller, während helle weitgehend unverändert bleiben.
• Durch Anheben der Tiefen oder Absenken der Lichter zaubern Sie neue Mitteltöne in ein Bild. Dadurch wirkt das Bils matter. Diese mittleren Helligkeiten verfeinern Sie deshalb im Dialogfensterbereich Korrekturen.
• Der Regler Farbkorrektur steuert die Farbsättigung, also die Brillanz der Farben. (Heben Sie Farbsättigung nach dem Anpassen eventuell partiell noch mit dem Schwammwerkzeug wieder an.).
• Der Regler Mittelkontrast erhöht die Kontraste der Mitteltöne wieder, so dass das Bild schärfer wirkt.
• In den Feldern „Schwarz beschneiden“ und „Lichter beschneiden“ steuern Sie, wieviele Schatten- und Lichttöne auf reines Schwarz (0) oder Weiß (25) gesetzt werden. Je höher der Wert, desto stärker der Kontrast.
• Wie in jedem Einstellungsfenster können Sie die Einstellungen mit der ALT-Taste zurück setzen.

Kontrast per Ebenentechnik
Bild Kontrast_a1 öffnen und als PSD-Datei in Ihrem Ordner speichern.
Herunterladen: (Link kommt später)

• Hintergrundebene duplizieren
• Beim Duplikat den Ebenenmodus ändern.
  o Umgekehrt multiplizieren hellt zu dunkle Bilder auf. Eignet sich also auch für Gegenlicht Aufnahmen.
  o Multiplizieren dunkelt überbelichtete Bereiche nach.
  o Weiches Licht frischt auf.
  o Hartes Licht frischt stark auf und sorgt für Glanzlichter.
  o Für deutliche Verfremdungen sorgen Strahlendes Licht und Harte Mischung.
• Die Wirkung des Ebenenmodus kann durch die Ebenendeckkraft herabgesetzt werden.
• Die Ebenentechnik lässt sich auch auf die Wirkung einer Einstellungsebene anwenden.

Lektion 11 Start.psd
Herunterladen: (Link kommt später)
Sie haben in dieser Datei 3 Ebenen.
1) Klicken Sie in die Lochgitterebene.
2) Wählen Sie das Elipsen-Form-Werkzeug, Option:Pfade zeichnen.
3) Positionieren Sie den Zeiger in der Mitte eines Lochs des Gitters und ziehen Sie mit gedrückter ALT+SHIFT-Taste einen Kreis in Größe des Lochs auf.
4) Falls der Kreis nicht exakt zentriert ist ,können Sie ihn mit gedrückter STRG-Taste positionieren. Dabei können Sie auch die Pfeiltasten der Tastatur zur Hilfe nehmen.
5) Wählen Sie in der Toolbar das Pfadauswahlwerkzeug (schwarzer Pfeil) und klicken Sie auf den gerade gezeichneten Pfad-(Kreis).
6) Mit gedrückter ALT-Taste + ziehen duplizieren Sie den Kreispfad so oft, bis alle Löcher einen Pfad abbekommen haben.
7) Ebenenmaske aus einem Arbeitspfad erstellen

• Klicken Sie mit gedrückter SHIFT-Taste alle einzelnen Kreispfade gemeinsam an.
• Klicken Sie in der Werkzeugoptionenleiste (sie befinden sich noch im Pfad-Auswahl-Werkzeug) in die Schaltfläche „Vom Pfadbereich subtrahieren“.
• Wählen Sie aus der Menüleiste Ebene-Vektormaske-Aktueller Pfad. Die löcher werden undurchsichtig.
• Klicken Sie den Pfad aus.
• Speichern!

8) Ebenengruppen erstellen

• Textgruppe
• Bildgruppe
• Hintergrundgruppe

9) Einstellungsebene anlegen
i) Aktivieren Sie in der Ebenpalette die Rost-Ebene.
ii) Legen Sie sich eine Gradationskurven-Einstellungsebene an.
iii) Fügen Sie Mitteltöne hinzu. (Das Ergebnis sol sein: Eingabe 150%, Ausgabe 105%)
10) OK
11) Speichern
12) Füllebene anlegen.
12a) Legen Sie sich mit eine Füllebene-Verlauf über der Rostebene an.
i) Verlauf: Von Schwarz-->Transparent.
ii) Linear von unten nach oben.
iii) Skalieren, damit das Schwarz hauptsächlich das untere Drittel der Ebene bedeckt.
iv) OK
v) Speichern.
13) Ebenen aus einer Datei in eine andere ziehen.
13a) Wählen Sie den Ebenensatz Text
13b) Öffnen Sie die Datei Diesel.psd
13c) Ziehen Sie die Dieselebene aus der Ebenenpalette in Ihre Montagedatei.
13d) Richten Sie die Schrift am unteren Bildrand aus.
13e) Datei speichern.
14) Ebenenstil zuweisen.
14a) Abgeflachte Kante / Relief
14b) Struktur
14c) Farbtiefe 2%
14d) Größe 2
14e) Speichern.
15) Maskierungsgruppe.
15a) Duplizieren Sie die Rostebene.
15b) Die Rost-Kopie verschieben Sie in den Text-Satz über die Schriftebene.
15c) Mit gedrückter ALT-Taste ziehen Sie mit dem Mauscursor auf die Grenze zwischen Rost- und Schriftebene bis eine Vereinigungssymbol erscheint.
15d) Klicken.
15e) Speichern.
16) Eine Ebene verflüssigen.
16a) Lochgitterebene auswählen.
16b) Filter-->Verflüssigen. Mit dem Filter können Sie jeden Bildbereich zusammendrücken, verwirbeln, auseinander ziehen, drehen, schleudern, spiegeln, zusammenziehen, schrumpfen, aufblasen.
16c) Werkzeuge links im Dialogfenster.
i) Vorwärts krümmen. Dies Werkzeug schiebt die Bildpunkte, wie ein Schneeschieber, vor sich her. (Die Werkzeugspitze ist im Gebrauch, wie beim Pinselwerkzeug) mit gedrückter SHIFT-Taste können Sie Graden ziehen und einzelne Punkte verbinden.
ii) Turbulenz. erzeugt wellenartige Verzerrungen. Per Turbulenz-Zufallswert steuern Sie den Grad der Verfremdung.
iii) Strudel. schleudert im Uhrzeigersinn. Mit gedrückter ALT-Taste kann er es auch anders herum.
iv) Zusammen ziehen scheint das Material unter dem Mauszeiger zu schrumpfen. Bei gedrückter ALT-Taste bläht er auf.
v) Aufblasen wölbt unter dem Mauszeiger. Bei gedrückter ALT-Taste zieht er zusammen.
vi) Nach Links Schieben verschiebt Pinselpunkte senkrecht zur Pinselrichtung. Bei gedrückter ALT-Taste geht es in die umgekehrte Richtung.
vii) Spiegelung sorgt für Spiegelungen an dem Pinselstrich entlang.
viii) Rekonstruktionswerkzeug stellt den ursprünglichen Zustand wieder her.
16d) Vektormaske rastern Rechte Maus-Tasten-Menü „Ebene rastern“.
i) Die nun entstandene Ebenenmaske auf den Papierkorb ziehen.
ii) Im Feld: „Soll die Maske vor dem Löschen angewendet werden“ auf Anwenden klicken.
16e) Auf die nun entstandene löchrige Ebene den Verflüssigen-Filter anwenden.
16f) Speichern!

Seitengestaltung

Raum und Fläche
Sichtweise (Sichtlinien sind die Diagonalen im Kopf) in einen Raum, Sortierung,

Formen
Dreieck, Viereck, Kreis

--> Nie zu viele Objekte auf eine Seite packen
--> Dem Auge genügend Weiß- bzw. Ruheraum gönnen
--> Unsere Wahrnehmung ist vor allem eine Form- und Gestaltwahrnehmung.

• Formen lassen Objekte erst zu dem werden, was sie sind
• Formen sind Symbole. Wie assoziieren bestimmte Bedeutungen mit ihnen
• Die Vielfalt von Formen hilft uns einmalige und ausgefallene Kontraste zu erzeugen
• Mit Hilfe von Formen können wir Einheitlichkeit schaffen z. B.: schmales Seitenformat, schmale Schrift, schmaler Objektrahmen oder: immer gleiche Formate für die gleiche Texte, gleiche Schrift- od. Bildformate
• Formen sollten immer auch unter dem Aspekt des Formkontrastes betrachtet werden
• Der größte Formkontrast besteht zwischen Kreis, Viereck + Dreieck

Tonwerte
Tonwerte erzeugen plastisches u. räumliches Aussehen.
Sie helfen Texte optisch voneinander abzusetzen. Sie erzeugen Stimmungen. Verhelfen zu Spannung.

Linien
Linien: gliedern Flächen und Bereiche, unterstreichen, können der Leseführung dienen, Verdichten Strukturen, gestalten, unterstreichen, heben, hervor, schmücken, auch Zeilen sind Linien, sie sind grade, geschwungen, gezackt, öffnen und umrahmen.

Strukturen
Strukturen geben einer Gestaltung ein lebendiges Aussehen

• können einen bestimmten Materialeindruck verleihen
• können untereinander einen grafischen Kontrast entstehen lassen
• Schriften verdichten sich zu Strukturen

Größen
Größen helfen Elemente zu betonen, erzeugen Nähe o. Ferne, schaffen Aufmerksamkeit und Kontraste.

Farben

• Auch unsere Farbwahrnehmung beruht auf Erfahrungen
• wir unterscheiden zwischen warmen und kalten Farben, warme treten hervor, kalte zurück

Rot

• Feuerwehr, Ferrari, Wärme, China, Rose, Japan, Temperament, Glück, Warn, Erfolg, Angriff, Rotlichtviertel, Liebe, Äpfel, Weihnachten, Blut, Hölle, Wein, Aggression

Blau

• Meer, Kälte, Winter, Wasser, Himmel, Traurig, Zuverlässigkeit, seriös, Treue, Trunkenheit, Sauerstoff, Polizei, Horizont, Tinte, Blaue Stunde, Marine, Unendlichkeit

Gelb

• Sonne, Energie, Licht, Wärme, Hitze, Gold, Sonnenblume, Optimismus, Safran, Öl, strahlend, Nähe, Blondinen, Anregend, Vollgas (Ampel), Missgunst, Post, Neid, Gefahr, Ort

Grün

• Frühling, Natur, Beruhigend, Ruhe, Minze, Gesund, Frisch, Jugend, barrierelos, Rasen, Hoffnung

Schwarz

• Nacht, Weltall, Katzen, Spinnen, Schornsteinfeger, Trauer, Kohle, Loch, Schmutz, Druck, Dunkelheit, Erde, Rohöl, Lakritz, Nacht, aus, schwarze, Schafe, negativ,

Weiß

• Frieden, Schnee, Kälte, Keuschheit, rein, unparteiisch, neu, Hochzeit, Papier, Engel, Mond, Wolken, Tag, an, Schafe, Schafe, sauber, positiv, Unschuld,

--> An Rot sich annähernde Farbe werden im Allgemeinen als warm, vibrierend, dominant, aggressiv und erregend empfunden
--> Nach Blau sich neigende Farben sind kühl, beruhigend, geheimnisvoll, und melancholisch. Farben an diesem Ende des Spektrums scheinen zurückzuweichen.
--> Gelb ist eine Signalfarbe

Grundregel des Gestaltens
Bei den Gestaltungsprinzipien wird zwischen Rhythmus, Gleichgewicht, Einheitlichkeit und Betonung unterschieden

• Die Grundstruktur aller Gestaltungsmethoden besteht darin, für Abwechslung innerhalb der Einheit beziehungsweise für Einheit innerhalb der Abwechslung zu sorgen
• Genau wie in der Musik gibt es auch in der visuellen Wahrnehmung harmonische und disharmonische Rhythmen.
• Weniger ist mehr – bei komplizierten und detailreichen Gestaltungen verliert der Betrachter den Überblick. Er sieht den Wald vor lauter Bäumen nicht
• Gleichgeweicht herstellen

Gleichgewicht
Wie zwei Seiten eine Wippe, Ying und Yang, Ausbalanciert. In Harmonie zu einander, Stimmig, halt im Gleichgewicht
Die einfachste, aber langweiligste Methode ein Gleichgewicht herzustellen ist die Symmetrie.

Einheitlichkeit
Gleiche Tonwerte und Farbtöne für gleiche Elemente

Jedes Elemente erhält seine immer wiederkehrende Farb- und Gestaltungsmelodie
Schmale Formate, schmale Schriftschnitte, schmale Bildformate

Unbedingtes Benutzen eines Gestaltungsrasters

Scannen = Abtasten
Ausgangsprodukt beim Scannen ist die Vorlage
Aufsichtsvorlage CMYK --> RGB

Durchsichtsvorlage RGB --> RGB

Beim Scannen ist es ratsam schon den Verwendungszweck des Bildes zu berücksichtigen, um das Bild später in der richtigen Auflösung und Größe vorliegen zu haben.
Moiremuster erhalten Sie, wenn Sie gedruckte Vorlagen gerade einscannen.
Bei einzuscannenden Printerzeugnissen (Vorlagen) legen Sie die Vorlage schräg auf den Scanner.
Naturpapiere – saugen, sind porös, holzhaltig, uncoated (ummantelt) (ungestrichen) matt
Kunstpapiere – künstlich behandelt, 1. gepresst,
2. coated – mit einer Art Kreideschicht überzogen, bestrichen (gestrichen)

Pantone od. HKS
HKS K – Kunstpapier
HKS N – Naturpapier für Offset- und Buchdruck
HKS Z – Zeitungspapiere
HKS E – Endlospapiere

Auflösung u. Größe v. Bildern

• Papier
• Feinheit des Druckrasters
• Größe

Die Auflösung wird angegeben in dpi (dots per inch) oder auch ppi (pixel per inch)
1 inch = 2,54 cm
Im Druck haben Sie später zwei Rasterarten

• Pixelraster
• Druckraster

In den Moment, in dem die Pixel deutlich größer sind als das Druckraster werden sie sichtbar.
Aus Erfahrung sollten die Pixel den 1,5 – 2fachen Wert der Rasterweite des Druckrasters haben. Dieser Wert heißt Qualitätsfaktor QF.
Die Rasterweite erfährt man von der Druckerei, da sie maschinenabhängig ist. Daraus ergibt sich folgende Formel:
Rasterweite im Druck x Qualitätsfaktor = Bildauflösung
RiD x QF = Bildschirmauflösung für cm
In Deutschland wird das Druckraster in Linien pro cm angegeben.
Dpi bedeutet aber Dots per inch
Daraus folgt die erweiterte Formel:
RiD x 2,54 (1 inch) x QF (1,5-2) = dpi
{
RiD x 5 = dpi
Kunstdrucke QF 2
gestrichene Papiere QF 2
ungestrichene Papiere QF 1,8
Zeitungspapiere QF 1,5 – 1,7
Soll ein Bild im Druck größer oder kleiner als die Vorlage kommt zu der Formel ein Skalierungsfaktor (SF) hinzu. Die Formel lautet dann:
RiD x 2,54 x QF x SF = Bildgröße in dpi

Vorlage: 1 Dia 35 x 35 mm
Ausgabebild: 15 x 15 cm
Raster: 54 er
Zeitungspapier 54 x 2,54 x 1,5 x 4,2 = 864 dpi
1,7= 979 dpi

Foto: 9 x 13
DIN A 4: 21 29,7 cm
Raster: 60
gestr. Papier 60 x 2,54 x 2 x 2,33= 700 dpi

9x13 cm
3x4,5 cm
60er Raster
ungestr. Papier 60 x 2,54 x 1,8 x 0,33=91,44 dpi

Satzspiegel = Innenfläche eines Layouts
Dateigröße – Rändern

Bilder fürs Web speichern

• die Dateigröße sollte möglichst gering sein, damit die Bilder schnell von einem Webserver geladen werden können
• sie sollten groß genug sein, um die gewünschten Farben und Details gut darzustellen
• Image-Ready ermöglicht, Bilder in sogenannten Imagemaps zu verwandeln. Das bedeutet, Sie können aus Grafikbildern Navigationselemente fürs Web machen.

Bilder beim Speichern optimieren
Ihnen stehen drei Formate zur Verfügung

• JPEG – erhält die Farbtiefe, sowie feine Unterschiede in Helligkeit und Farbigkeit, die Bildern Verläufe zuweisen und/oder Kontraste erzeugen.
  Dies Format kann Millionen Farben darstellen
• GIF – unterstützt 8-Bit-Farbbereiche und komprimiert Volltonbereiche.
  Scharfe Details, wie Strichgrafiken, Logos + Texte bleiben erhalten. Dies Format benutzt 256 Farben und unterstützt Hintergrundtransparenz.
• PNG-Format – komprimiert Volltonfarben und unterstützt Transparenz.
  Verwendet 256 Farben

Das PNG 24-Fromat unterstützt 24-Bit-Farben (Millionen v. Farben)
! Vorsicht: Von einigen älteren Browsern wird das PNG-Format nicht unterstützt

Für Web speichern
- Photoshop erzeugt neben dem Original der verschiedene Sets mit Optimierungseinstellungen
- Unter den einzelnen Miniaturen sind die Dateigröße u. Downloadzeit angegeben.
- Um besser beurteilen zu können, wie sich Details und Farben beim Komprimieren verändern, können Sie sich die Ansicht heranzoomen

Farbtabelle
Selektierung:
Perzeptiv – erstellt eine Farbtabelle mit Farben, auf die das menschliche Auge sensibler reagiert, als auf andere.
Selektiv – erstellt eine der Perzeptiveinstellung ähnliche Farbeinstellung, wobei breite Farbereiche und die Erhaltung der Webfarben vorrang haben.
Selektiv ist die Standardeinstellung, da Bilder mit hoher Farbintegrität erzeugt werden.
Adaptiv – erstellt eine Farbtabelle mit einem Farbspektrum aus den am häufigsten in Bild verkommenden Farben
Web – verwendet die standardmäßige 216-Farben-Tabelle. Durch diese Einstellung soll verhindert werden, daß ein Browser-Dithering auf die Farben angewendet wird.
Eigene – erhält die dem Bild zugrunde liegende Farbpalette ( z. B. RGB-Standardfarben reduziert)

Windows- od. Mac OS – verwendet die gleichmäßige Anordnung der standardmäßigen 8-Bit-Farbpallette. Nicht benutzte Farben werden gelöscht, ähnliche zusammen gezogen.
--> die Gesamtzahl der ausgewählten Farben wird in der Farbpalette angezeigt
--> einige der Farben sind mit einem Diamantsymbol gekennzeichnet. Sie sind websicher.
Websicher bedeutet auch browserunabhängig. Es gibt 216 websichere Farben, die die gängigen Browser u. BS am Monitor identisch anzeigen können.
--> um eine Dateigröße noch weiter zu reduzieren, können Sie die Farben noch weiter runtersetzen. Eine um etwas reduzierte Farbpalette gewährleistet meistens noch relativ annehmbare Ergebnisse. Bei sehr kleinen Farbpaletten ist ein Qualitätsverlust deutlich sichtbar.
Bei flächigen Bildern, die als Vektorgrafiken erstellt wurden und die in Photoshop gerastert wurden (Vektorgrafiken werden gepixelt) können Farben vor dem Reduzieren gesichert werden.

• Pipette (links oben im Dialogfenster) wählen
• mit der Pipette die gewünschte Farben aufnehmen
• die aufgenommene Farbe hat dann in der Farbpalette eine Umrahmung
• mit dem Schlosssymbol unten in der Farbpalette kann sie fixiert werden. (auf die gleiche Weise können Sie die Fixierung auch wieder lösen)
• Fixieren Sie sich fünf Farben u. reduzieren Sie die Farbpalette
• Die fixierten Farben bleiben erhalten.

Dithering
Im Dithering Menü wird angegeben, wie Farben angezeigt werden sollen, die im jeweiligen Farbanzeigemenü des Computers nicht verfügbar sind.
Bilder, in denen vorrangig Grundfarben enthalten sind, kommen unter Umständen ohne Dithering aus.
Bei Halbtonbildern, vor allem bei Verläufen, ist ein Dithering erforderlich, um eine Streifenbildung zu vermeiden.
Dithering simuliert also fehlende Farben, kann aber die Datei auch vergrößern.

Herunterladen: (Link kommt später)
--> Stellen Sie in Image Ready das Dithering der 14.Start2.psd auf 100 %
--> Die Anzahl der Farben auf 128
--> Wählen Sie mit der Pipette das Grün hinter, „Tropical Rainforst“ und fixieren Sie die Farbe in der Farbpalette
--> Reduzieren Sie danach auf 32 Farben

Browser Dithering minimieren
--> Bilder werden mit nicht websicheren Farben gedithert, wenn Sie in einem Browser mit einer 8-Bit-Farbanzeige angezeigt werden.
--> Das liegt daran, dass der Browser Farben simuliert, die einem in einem optimierten Bild, nicht aber in der vom Browser verwendeten Farbpalette erscheinen.
Um eine Farbe vor diesem sog. Browser-Dithering zu schützen, nehmen Sie eine Web-Verschiebung für ausgewählte Farben vor.
--> Wählen Sie: Ansicht – Vorschau --> Browser Dithering
--> Der Hintergrund von „African Savannah“ ist ganz grisselig (körnig) geworden
--> Klicken Sie mit der Pipette in den Browser geditherten Hintergrund
--> Die aufgenommene Farbe wird in der Farbpalette markiert
--> Klicken Sie unten in der Farbpalette auf das Symbol für Web-Verschiebung (Würfel)
--> Das Farbfeld wird bei der Web-Verschiebung auch innerhalb der Palette verschoben und mit einem Rautensymbol versehen das anzeigt, dass es auf eine ähnliche Farbe in der Webpalette verschoben wurde.
--> Speichern!
Beim Speichern sichern Sie die Datei als psd-Datei mit den optimierten Einstellungen

Hintergrundtransparenz bestimmen
(lässt sich für PNG, + Gif – Formate festlegen)
Die Hintergrundtransparenz in einer Web-Grafik lässt ein Bild so erscheinen, als sei es nicht eckig, sondern wäre eine Eben auf den Web-Hintergrund montiert.
--> Um auf eine Hintergrundebene Transparenz zu erzeugen, müssen Sie auch in Image Ready diese in eine Ebene 0 umwandeln
--> Wählen Sie: Ansicht – Ganzes Bild
--> Ziehen Sie mit dem rechteckigen Auswahlwerkzeug eine Auswahl über den inneren, beschrifteten Bereich auf
--> Auswahl umkehren
--> Wählen Sie den magischen Radierer / schalten sie die Option „Benachbart“ aus
--> Löschen Sie die weißen Pixel im ausgewählten Bereich
--> In der Optimierungspalette ist das Kästchen „Transparenz“ aktiviert.

Transparenz speichern + prüfen
Da Image Ready die Vorschau für eine Webseite mit weißem Hintergrund darstellt, ändern Sie die Farbe jetzt so, dass Sie die von Ihnen erstellte Transparenz erkennen können
--> „Transparenz“ ist in der Optimierungspalette aktiviert
--> Sie heben die Auswahl auf
--> Im Feld Basic: ändern Sie die Hintergrundfarbe für die Vorschau
--> Datei – Vorschau in .... Webbrowser wählen
--> Der Browser sollte jetzt die optimierte Datei + die Transparenz anzeigen
+ zusätzliche Informationen über die Datei
+ den HTML-Code, der für die Vorschau verwendet wird.

Imagemaps erstellen
Sie erstellen ein Imagemap ausgehend von einem bereits vorhandenen Bild. Mit Imagemaps definieren Sie Bildbereiche, die Sie als Hot-Spots nutzen können. Sie definieren Hot-Spots mit Hilfe von Ebenen und einem Imagemap-Werkzeug. Anschließend weisen Sie jedem Hot-Spot eine URL-Adresse zu. Öffnen Sie in Image Ready die Datei 14Start4.psd
Herunterladen: (Link kommt später)
Bei dieser Datei liegen die einzelnen Bereiche auf verschiedenen Ebenen.
--> in der Optimierungspalette Vorgabe : Gif 64 Dithering einstellen
--> Wählen sie in der Ebenenpalette die Ebene „African Savannah“
--> Wählen Sie über die Menüleiste Ebene – Neuer ebenenbasierter Imagemap-Bereich
--> Der gesamte Savannah-Bereich des Bildes hat jetzt eine rote Umrahmung und ist heller. Dadurch ist der Hot-Spot Bereich in der Imagemap definiert.
--> Öffnen Sie die Animationspalette und klicken Sie auf das Imagemap-Register (Fenster-Animationspalette)
--> In den Imagemap-Register öffnen Sie das Pop up Menü Ebenenbasierte Einstellungen
--> Wählen Sie Form: Polygon, damit sich die Imagemap-Markierung noch mehr den ebenendeckenden Pixeln der Savannah-Ebene anpasst.
--> Zur weiteren Anpassung können Sie den Qualitätsregler nach oben schieben (90)
--> Jetzt können Sie den Hot-Spot (den Imagemap-Bereich) mit einer anderen Datei auf einer anderen Website verknüpfen
--> Verwenden Sie in diesem Fall eine fiktive Webadresse.
http://www.adobe.com/african_savannah.html
--> das Zeigefingersymbol, das jetzt in der Ebenenpalette erscheint weit auf ein ebenenbasiertes Imagemap hin
--> Wiederholen Sie die Schritte die anderen Ebenen, nur dass am Schluß deren Name nach com/ steht.

Plattform übergreifenden Gammawert einstellen
--> Bevor ein Imagemap ins Internet gestellt wird, sollten Sie die Bildhelligkeit im Hinblick auf die verschiedenen Monitore und Plattformen überprüfen
Windows gibt dunklere Mitteltone (Gammawerte) an als Mac
--> Klicken Sie in Image Ready auf das Werkzeug „Imagemaps ein- oder ausblenden“ (links unter dem Farbwähler), um die Begrenzungen des Polygon-Image-Bereiches auszublenden
--> Ansicht --> Vorschau --> die jeweils andere Standardfarbe auswählen
--> Bild – Anpassen : Gamma Einstellung wählen OK
--> Speichern als psd
--> Datei --> Optimierte-Version speichern 14Start4.gif

Öffnen Sie die Datei 15Start.psd
Herunterladen: (Link kommt später)
--> Photoshop fragt Sie, ob Sie die Datei für Vektorbasierte Ausgabe aktualisieren wollen
--> Klicken sie auf Aktualisieren
Die Lektionsdatei enthält blaue horizontale u. vertikale Hilfslinien. Mit Hilfe dieser Linien u. dem Ausrichten-Befehl richten Sie Slice-Rechtecke beim Zeichnen präzise aus.
Auswahl – Einblenden Vor Hilfslinien + Slices muß ein Häkchen sein.

--> Ansicht – Ausrichten an ....
Achten Sie darauf, dass die Befehle „Hilfslinien“ und „Slices“ eingeschaltet sind.
--> Wählen Sie das Slice-Werkzeug und ziehen Sie eine Markierung um den rechteckigen, durch die Hilfslinien markierten, Bereich über den Wort „designs“ auf.
--> Ziehen Sie nacheinander Slices über den anderen Wörtern dieser Zeile ( ...), um Slices auch für diese Flächen zu haben
Achten Sie darauf, dass zwischen den Slices keine Lücken entstehen, da Photoshop in die Lücken Auto-Slices setzt. Um besser arbeiten zu können, zoomen Sie sich den Arbeitsbereich groß

Optionen für Slice einstellen
--> Wählen Sie mit dem Slice-Auswahlwerkzeug das „design“-Slice aus.
--> Klicken Sie in der Werkzeug-Optionenleiste auf das Symbol für die Slice-Optionen-Dialogpalette
Photoshop benennt jeden Slice standardmäßig basierend auf den Dateinamen und der Slice-Nummer (15Start_03)

Mit Hilfe von Photoshop optimieren Sie einzelne Bereiche eine Bildes. Das ist nützlich, wenn bestimmte Bereiche des Bildes eine andere Auflösung o. Einstellung als die anderen erfordern.
Dazu markieren Sie einen o. mehrere Slice im Dialogfenster „Für Web speichern“
Wählen Sie die erforderlichen Optimierungseinstellungen u. speichern Sie die optimierten Dateien entweder für die ausgewählten Slices o. für alle Slices. Photoshop erstellt dafür einen Ordner „Images“, in den sie die optimierten Dateien speichert.


Datei – Für Web speichern
--> Wählen Sie links im Dialogfenster das Slice-Auswahlwerkzeug
--> Klicken sie in der Registerkarte „Optimiert“ nacheinander, mit gedrückter Taste die vier Slices an
--> Wählen Sie im Popup - Menü – Einstellungen die Option „gif-Web-Palette“ und speichern, bzw. sichern Sie
----> Führen Sie im Dialogfenster „optimierte Version speichern unter“ folgendes aus.
----> Sichern 15Start.gif Format: Nur Bilder Ort: ihrem ort Einstellungen: Eigene Slices, Slices: Ausgewählte Slices

Photoshop speichert die Bilder in den Ordner Images mit den Namen, die sie im Dialogfenster „Slice-Optionen“ als Dateinamen festgelegt haben. Falls Zwischenräume bzw. Lücken in der Tabelle vorhanden sind, erstellt Photoshop dafür die Datei „Spacer.gif“
Speichern!
Schließen!
Ende!

Benutzerslices
Autoslices

Ein ebenenbasiertes Slice in Image Ready erstellen
- Eine weiter Methode, um in Photoshop o. Image Ready ein Slice herzustellen, ist das Konvertieren einer Ebene
- Ein ebenenenbasiertes Slice schleißt alle Pixel einer Ebene ein
- Sobald Sie eine Eben bearbeiten, verschieben o. Ihr ein Ebeneneffekt zuweisen, passt Image Ready das ebenbasierte Slice so an, dass es auch die neuen Pixel mit umfasst
- Um ein ebenenbasiertes Slice von einer Ebene zu lösen, verwandeln Sie es in ein Benutzerslice
- Öffnen sie in der Ebenepalette den Ebenensatz „Copyright Strip“
- Aktivieren Sie die Eben „Strip Hintergrund“
- Wählen Sie: Ebene  Neues ebenenbasiertes Slice
- Achten Sie auf das Symbol neben der Slicenummer im Bild

Ein Kein-Bild-Slice
In Image Ready u. Photoshop lassen sich Kein-Bild-Slices erstellen u. mit Text o. HTML-Text versehen. Kein-Bild-Slice können eine Hintergrundfarbe enthalten u. werden als Bestandteil der HTML-Datei gespeichert.
Der Vorteil beim Einsatz von Kein-Bild-Slices für Text liegt darin, dass sich der Text in jedem HTML-Editor bearbeiten lässt und Sie dafür nicht mehr zurück zu Photoshop o. Image Ready müssen. Der Nachteil ist, dass zuviel Text im Slice die HTML-Tabelle zerstört und danach unerwünschte Lücken entstehen.
- Sie konvertieren nun das gerade erstellte ebenbasierte Slice
- Achten Sie darauf, das es aktiviert ist
- Wählen sie die Slice-Palette
- Wählen sie in der Slice Palette bei Typ: Kein Bild
- Geben Sie in das Textfeld einen fiktiven Copyright-Hinweis für das Banner ein z. B. ©2007 WEB07
Der Text wird weder im Photoshop noch in Image Ready, sondern nur im Browser angezeigt. Speichern!

Slices aus einer Auswahl erstellen
Der einfachste Weg in Image Ready ein Slice über (für) ein kleiner o. besonderes geformtes Grafikelement zu erstellen, ist eine Auswahl über diesem zu erstellen und diese in ein Slice umzuwandeln
--> Öffnen Sie in der Ebenenpalette den Ebenensatz „Logo“
--> Wählen Sie alle ebenendeckenden Pixel der „Big Circle“-Ebene
--> Auswahl = Slice aus Auswahl erstellen
--> Geben Sie in der Slice-Palette folgendes ein.
Typ: Bild
Name: Logo
Url: Team.html
Ziel: _blank (hinten beim Ziel ein Popup-Menü aus dem Sie _blank einfach nur auswählen müssen)
--> Heben Sie die Auswahl auf. Wenn das Programm sich weigert die Auswahl aufzuheben, dann achten Sie darauf, dass sie weder im Slice- noch im Slice-Auswahlwerkzeug sind.
--> Speichern!

Slices in Image Ready optimieren
Image Ready speichert für jedes Slice gesondert Optimierungseinstellungen. Diese legen Sie fest, indem Sie das Slice mit dem Slice-Auswahlwerkzeug auswählen und die gewünschten Einstellungen in der Optimierungspalette vornehmen.
--> Wählen sie mit dem Slice-Auswahlwerkzeug das Auto-Slice 4, neben dem Slice von Kreis
--> Klicken sie ins Register 2-fach, um sowohl das Originalbild als auch die Optimierung zu sehen
--> Zoomen Sie auf 200 %
--> In der Optimierungspalette wählen Sie die Vorgabe: Gif 32 Dithering
--> Betrachten Sie jetzt ein anderes Autoslice, merken Sie, dass die Optimierung auch hier stattgefunden hat, da alle Autoslice miteinander verbunden sind.
--> Speichern!

Rollover
Dies ist ein Effekt, der im Web genutzt wird. Wenn Sie über diese Stellen mit der Maus rollen, ändern diese ihr Aussehen. Der von Ihnen eingerichtete Rollover-Effekt wird aktiviert.
--> Klicken Sie ihre Registerkarte auf Original
--> Wählen Sie mit dem Slice-Auswahlwerkzeug das Slice „Contact_Schaltflaeche“
--> Öffnen Sie die „Web-Inhalt-Palette“
--> Das Slice „Contact_Schaltflaeche“ sollte dort aktiviert sein
--> Sie können Slices auch in dieser Palette aktivieren
--> Sie erstellen einen Neuen Rollover-Status
Im Popup-Menü der Palette o. über das Icon „Neuer Status“ unten in der „Web-Inhalt-Palette“
--> Der Rollover muß aktiviert sein
--> In der Ebenenpalette wählen Sie jetzt die Textebene „Architect“
--> Aktivieren Sie den Text, um ihn zu bearbeiten
--> Weisen Sie ihm über die Werkzeugoptionsleiste den Verkrümmungseffekt „Wulst“ zu
--> Klicken Sie jetzt in der „Web-Inhalt-Palette“ auf den Normal-Status = Compact_Schaltflaeche
--> Schauen Sie in die Contact_Schaltflaeche
--> Dort müssen mehrere Symbole zu sehen sein.
--> Um den Rollover-Effekt anzuwenden müssen Sie das Lasso, vor dem Over in der Web-Palette bis zu dem Architect im Bild gezogen haben
--> Die Rollovereffekte lassen sich in Image Ready anzeigen. Sie brauchen dazu nicht in den Browser wechseln
--> Wählen Sie dazu die Schaltfläche in der Werkzeugpalette mit der Sternchenhand.

Ebenen in einem Rollover-Status ein- u. ausblenden
--> Wählen Sie das Slice über Designs aus (Designs_Schaltflaeche)
--> Legen Sie einen Neuen Rolloverstatus an über:
Popup-Menü in der Web-Inhalt-Palette o. Icon für „Neuen Rolloverstatus“ in der Web-Inhalt-Palette
--> Öffnen Sie den Ebenensatz „Image Rollover“ um dort ein Auge vor „For Designs“ zu platzieren
--> Das Lasso vor dem Over auf den Bereich im Bild werfen, in dem der Effekt erscheinen soll.

Als nächstes erstellen Sie einen Down-Effekt. Im Gegensatz zum Rollover-Effekt passiert beim Down-Effekt erst etwas, wenn Sie die Maustaste (down) klicken
--> Aktivieren Sie das design_Schaltflaechen Slice
--> Erstellen Sie in der Web-Inhalt-Palette einen neuen Rollover-Status. Der heißt jetzt Down
--> Der Down-Status ist in der „Web-Inhalt-Palette“ aktiv
--> Öffnen Sie den Ebenensatz „Architect Highlights“
--> Klicken Sie die Augen an vor a r c h i
--> Achten Sie auf die Buchstaben im Bildfenster
--> Schmeißen Sie wieder das Remote-Lasso aus zu Archtitech im Bildfenster

Weiter Down-Effekte
Structure_schaltflaeche --> a r c h
Art_schaltflaeche --> a r t

Primary Roll-Over-Status
Alle bisherigen Rollover und Down-Effekte sind sekundäre, da die optischen Effekte außerhalb der betroffenen Slices erscheinen
--> Datei öffnen team.psd
--> In dieser Datei sind die Slicearbeiten für Sie schon ausgeführt
--> Öffnen Sie den Ebenensatz „Names Glowing“
--> Wählen Sie in der Web-Inhalt-Palette das Slice _dick
--> Erstellen Sie einen Neuen Rollover-Status
--> Vom Rollover-Status aus öffnen Sie in der Ebenpalette das Auge vor dick glowing
--> Remote-Lasso auswerfen auf dick im Bildfenster

Ein Selected-Rollover-Status
Normalerweise gehen Anwender auf einer Website davon aus, dass Sie durch Klicken auf eine verknüpfte andere Seite springen. Der Selected-Rollover-Status lässt Sie nicht auf eine andere Seite gelangen, sondern zeigt versteckte, angewählte (selected) Bildteile. Der Effekt ist nicht, wie beim Down-Effekt nur während die Maus gedrückt ist, sondern solange zu sehen bis Sie einen anderen Effekt wählen.
--> in der Web-Inhalt-Palette wird das _dick_Slice ausgewählt
--> neuen Rollover-Status erstellen
--> Doppelklick in das blau aktivierte Rollover-Status-Feld
--> Selected wählen Ok
--> Dem Effekt den entsprechenden Text aus den Textblocks zuweisen
--> das Remote-Lasso ausweisen
--> die anderen Slice auch „selected“ mit dem dazugehörigen Texten zusammenführen
--> Speichern!


Links:
Blindtexte: Link

Web - Developer Programmierung und Design

Hallo,

ja so heißt der Kursus den ich bekommen habe. Endlich nach über 4 Jahren harten Kampfes bekomme ich eine Weiterbildung in den Programmiersprachen. Mit Hoffnungen gehe ich in diesen Kursus und erwarte das ich wieder Arbeit bekommen werde.




Links:
Web - Developer: Web - Developer