DRI/HDR/HDRI Tutorial: Wie entsteht ein Bild Teil 2

Lies hier den ersten Teil des HDR Tutorials

Zusammenfügen der Bilder in Adobe PhotoShop

PS Abbildung 1

Nachdem ich nun die Bilder korrigiert und als JPG File entwickelt habe, lade ich alle Bilder gleichzeitig in Adobe Photoshop. Dabei markiere ich alle Bilder gleichzeitig, damit sie schön sortiert im Programm auftauchen. Um die Bilder alle im Programm sehen zu können, wähle ich **Fenster -> Anordnen -> Nebeneinander**. Beim ersten Bild zoome ich solange aus, bis das komplette Bild im Fensterrahmen zu sehen ist. Anschließend wähle ich **Fenster -> Anordnen -> Gleiche Zoomstufe**. Danach habe ich alle Bilder im Überblick [PS Abbildung 1].

PS Abbildung 2

Nun beginne ich damit, das jeweils nächste dunklere Bild in das Hellste zu kopieren. Ich klicke also auf das zweithellste Bild, drücke die Tastenkombination “[STRG]+A” (für alles markieren) und anschließend “[STRG]+C” (für kopieren). Danach gehe ich zum hellsten Bild zurück und drücke die Tastenkombination “[STRG]+V”. Danach wird das zweit hellste Bild als neue Ebene im hellsten Bild eingefügt. Diese neue Ebene namens “Ebene 1″ blende ich

(einblenden oder ausblenden) in der Ebenenpalette, die über **Fenster -> Ebenen** oder “F7″ zu erreichen ist, aus. Danach sollte Dein Photoshop aussehen wie [PS Abbildung 2].

PS Abbildung 3

Nun erstelle ich Ebenenmasken. Dazu wähle ich alle Lichter aus und überschreibe die hellsten Lichtpunkte mit den dunkleren Lichtern aus dem Bild, dass sich in Ebene 1 befindet. Dazu gehe ich wie folgt vor:

Über **Auswahl -> Farbbereich** kann ich im Auswahlfeld “Auswahl” “Lichter” alle hellen Bereich im Bild auswählen. Mit Ok bestätige ich das Popup Fenster [PS Abbildung 3].

Anschließend sorge ich dafür, das die Auswahl eine weiche Kante bekommt, damit die Helligkeitsabstufungen nicht so hart sind. Über **Auswahl -> Auswahl verändern -> Weiche Kante** kann ich die Kante weicher machen.

(weiterlesen…)

TYPO3: Website in 30 Minuten Teil 2: TypoScript Templates, Inhalte pflegen

Im ersten Teil des TYPO3 Kurs: Website in 30 Minuten habe ich folgende Themen behandelt:

• Vorbereiten einer HTML Datei, setzen von Subparts
• Backend-Spalten anpassen
• Dateibaum erstellen
• Seitenbaum erstellen

Du hast in der Anleitung gelernt wie man ein HTML Dokument mit Subparts erstellt, wie Du das Backend mit den Spalten an Deine eigenen Bedürfnisse anpassen kannst, und was der Dateibaum und der Seitenbaum innerhalb des TYPO3-Backends ist. Wenn Du Dir das Video Tutorial angesehen hast, findest Du Dich auch in TYPO3 etwas zurecht.

In diesem Tutorial werden wir das angefangene beenden. Du wirst danach ein TypoScript Template erstellt haben. In diesem TypoScript Template werden wir die Subparts aus dem HTML Dokument ansprechen und dynamisch gegen die Inhalte aus dem TYPO3 Backend austauschen lassen. Du konfigurierst ein einfaches Listenmenü mit TypoScript inklusive einer Active-Regel. Zudem konfigurieren wir per TypoScript das Headerimage im oberen Bereich der Internetseite. Wenn Du auf der jeweiligen Seite kein Bild hinterlegst, greift das System auf ein definiertes Headerbild zurück.

(weiterlesen…)

AJAX Loader für einen kleinen Bereich

Ich nehme Bezug auf mein Tutorial zum AJAX Loader - Ladeanzeige mit JavaScript vor einiger Zeit. Viele Leser haben mich angeschrieben mit der Bitte, ein kleines Tutorial zu schreiben, wie mann einen AJAX Loader mit JavaScript für einen kleinen Bereich auf der Seite schreiben kann. Aufgrund dessen habe ich mich nochmal hingesetzt, und ein zweites Tutorial zum Thema AJAX Loader mit JavaScript gemacht.

Ziel dieses kleinen Tutorials ist folgendes: Wir binden ein AJAX Programm auf einem bestimmten Bereich einer Internetseite ein. Dieses AJAX Programm ruft eine loader-Funktion auf sobald sie gestartet wird. Ist die Funktion beendet wird eine unloader-Funktion aufgerufen.

(weiterlesen…)

HTML: Online Kurs in HTML und CSS Teil 2

Im ersten Teil des HTML Online Kurses haben wir den Grundaufbau eines HTML Dokumentes behandelt. Du weißt nun wie man den Doctype und die Zeichenkodierung einstellt, was der Unterschied zwischen HTML und BODY ist, und wie Du was aus dem HTML Dokument im Browser anzeigen kannst.

In diesem 2. Teil des HTML Kurs geht es um die einzelnen HTML Elemente. Ein HTML Element umschließt einen Text oder ein Bild um deren Erscheinung zu ändern. Jeder HTML Befehl wird innerhalb der <> Klammern geschrieben. Danach kommt der eigentliche Text oder ein Bild, und anschließend  wird der HTML Befehl in den <> Klammern wieder geschlossen. Ein einfaches Beispiel:

<h1>Dies ist eine sehr grosse Überschrift</h1>

So sieht es im Browser aus
Hier wird ein Text als eine H1 Überschrift ausgewiesen. Der Aufbau eines HTML Befehles ist also gar nicht so schwer.

Inhalt:

1. Block und Inline Elemente
2. Überschriften (H1 bis H6)
3. Absätze (p)
4. Manueller Textumbruch (br)
5. Bild einfügen (img)
6. Text mit einem Link belegen (a)
7. Aufgabe: Eigenes HTML Dokument erstellen

(weiterlesen…)

TYPO3: Website in 30 Minuten Teil 1: HTML Template, Seitenbaum, Ressourcen

In diesem kleinen Online Tutorial möchte ich Dir zeigen, wie Du in 30 Minuten eine Internetseite mit TYPO3 erstellen kannst. Ziel dieser Anleitung soll es sein, Dir näher zu bringen, wie sich der Ablauf mit TYPO3 gestaltet, und welche Schritte Du abarbeiten musst, um am Ende auch Erfolg zu haben.

Themen in diesem Kurs:

1. Vorbereiten einer HTML Datei, setzen von Subparts
2. Backend-Spalten anpassen
3. Seitenbaum erstellen
4. Dateibaum erstellen
5. Video-Toturial ansehen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Alternativ kannst Du auch meinen HTML Online Kurs durcharbeiten. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

(weiterlesen…)

HTML: Online Kurs in HTML und CSS Teil 1

HTML Kurs Teil 1: Grundaufbau einer HTML Seite

Ich möchte die nächste Zeit gerne etwas über HTML und CSS Code schreiben. Ich werde die Beiträge als eine Art Serie verfassen und immer wieder einen neuen Artikel zum Thema HTML und CSS verfassen. Ziel der Blogbeiträge soll es sein, Anfängern ein wenig etwas über HTML und CSS zu zeigen. Am Ende der Seite siehst du referenzierte Links zu anderen Artikeln die mit diesem in Verbindung stehen.

Inhalt:

1. Doctype
2. HTML Bereich
3. HEAD Bereich
4. Meta: Charset
5. Title Tag
6. Meta: Keywords
7. Meta: Description
8. Link Ressource: CSS Dateien
9. Body Bereich
10. Kompletter HTML Code von diesem HTML Kurs

HTML und CSS: Überblick über wichtige grundsätzliche HTML Befehle

Doctype

Beginnen wir mit dem Grundgerüst einer HTML Seite. Bevor ich irgendwas per HTML machen kann, benötige ich eine html Datei. Diese Datei muss vorweg einige Anweisungen enthalten. Nötig sind dabei folgende Angaben:

(weiterlesen…)

PHP/CSS: Quadratische Thumbnails

Thumbs

Thumbnails in einer Image Gallery können manchmal verschieden Formate haben. Ein Thumbnail ist Querformat, das andere Thumb wiederum Hochformat. Wer nun aber quadratische Thumbs haben möchte, tut sich schwer, all das unter einen Hut zu bekommen. Die Lösung: Mittels PHP die Bildgröße der Thumbnails berechnen, und das Thumb in einem quadratischen DIV Container mittig ausrichten. In diesem kleinen Tutorial möchte ich einen Lösungsansatz vorstellen. Du kannst auch das Onlinedemo zum Thema Quadratische Thumbnails ansehen.

Anleitung:

(weiterlesen…)

DRI/HDR/HDRI Tutorial: Wie entsteht ein Bild Teil 1

Beispiel einer Nachtaufnahme

Jeder, der einmal versucht hat, eine Nachtszene zu fotografieren, kennt dass: Sobald viele dunkle und helle Bereiche im Motiv enthalten sind, gibt es Probleme mit der korrekten Belichtung des Bildes. Entweder sind die Lichtbereiche viel zu hell, oder aber die dunklen Bereiche des Bildes sind so dunkel, dass Details der Aufnahme sprichwörtlich verschwinden.

Mit Hilfe einer sogenannten Belichtungsreihe können wir unterschiedliche Belichtungen zu einem Bild zusammenfassen, dessen Dynamikumfang, auch DRI, HDRI oder HDR genannt, wesentlich höher ist, als das es die Kamera selbst kann. In dieser Anleitung möchte ich Dir zeigen, wie das ganze Step für Step ablüft.

Natürlich benötigt man nicht nur eine Kamera, sondern auch einiges an Zubehör:

• gutes Stativ
• Fernauslöser
• Stoppuhr
• evtl. einen Taschenrechner
• Taschenlampe
• PC mit Grafikbearbeitungsprogramm (hier Photoshop)
• RAW Entwicklungsprogramm (hier RAW Shooter)

Was ist im Vorfeld zu tun?

(weiterlesen…)

ajax loader - Ladeanzeige mit Javascript

In diesem Tutorial  möchte ich Dir zeigen, wie man mit Javascript einer AJAX Funktion einen Ladestatus (AJAX Loader) hinzufügen kann. Als AJAX Programm greife ich auf meinen Demo Rechner zurück. Den originalen Demo-Rechner findest du unter folgenden Link: Wie Funktioniert AJAX mit PHP Ich werde den Sourcecode des Demo-Rechners noch etwas verändern, damit die Zeit vom Request der Anfrage bis zur Ausliefung des Ergebnisses auf 2 Sekunden verlängert wird. Wir benötigen lediglich eine Ajax-Loader Grafik. Weiter unten im Artikel findest Du noch ein paar nützliche Links dazu. Fangen wir an:

(weiterlesen…)