Depot43-Unterlagen - Photoshop vs Affinity

Code Elemente - HTML - CSS - JS
            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
	 /* Debugging Anzeige Balken */
	#offset {
	    position: fixed;
	    top: 0;
	    text-align: left;
	    width: 100%;
	    color: #fff;
	    padding: 10px 0;
	    z-index: 999;
	}
	#progressBar {
	    background-color: #f00;
	    height: 2px;
	    width: 10px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 2000;
	}

	/*  Layout */
	  body {
	  	background: url(http://depot43.ch/unterlagen/assets/skrollr/af-ps/dunkelkammer-start.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color:#000000;
        height:5000px;
	  }
	main {
		color:white;
		padding:40px;
		min-height: 640px;
		width: 60%;
		margin: auto;
		font-size:1.2em;
	}
      p.text {
          margin-left: 120px;
      }
      section {
          position: absolute;
          width:60%;
      }
      section.szene3 img, section.szene8 img {max-width:100px;height:auto;}
      div.referenzbilder img {    
        max-width: 400px;
        height: auto;
        position: absolute;
        top: 190px;
      }
      section.szene9 ul {margin-top:24px;}
      .afimg {display:none;}
      footer {
          width:100%;
          clear:both;
          background: #222;
          color: #ccc;
          height:100px;
          position:absolute;
          bottom:0px;
      }
      footer p {
          font-size:2em;
          text-align:center;
      }
  </style>
  </head>

<!-- HTML *************************** -->
<body data-start="background-position: 0px 0px;" data-600="background-position: 0px 200px;">

<div id="progressBar" data-0="width:0%;" data-end="width:100%;"></div> 
<div id="offset">10</div>

	<main>
    <section class="szene1" data-start="opacity:1;" data-200="opacity:0;"><h1>Am Anfang war die Dunkelkammer</h1>
	    <p class="text">Das waren unheimliche Labore für Tüftler und unerschrockene Giftmischer. Düsteres rotes Licht beherrschte die Szene. Wie fremdartige Masken aus einem urzeitlichen Ritual sahen, selbst vertraute Gesichter aus. Mit Arsen wurden die Druckfilme bearbeitet. Kein Wunder, dass der Beruf des Lithographen nahezu ausgestorben ist.</p>
	    </section><section class="szene2" data-300="opacity:0;top:400px;" data-500="opacity:1;top:600px;"><h1>Ein digitales Abbild Names Photoshop</h1>
	    <p class="text">Mitte der 90er kam mit Adobes Photoshop ein digitales Abbild einer Dunkelkammer auf die Computer. Zu Beginn waren die Möglichkeiten noch begrenzt. Helligkeit und Kontrast liessen sich durch Regler richten. Ein Bild konnte beschnitten, um 90 Grad gedreht und in mehreren Formaten gespeichert werden. Flackernde Röhrenbildschirme liessen uns das Bild zwar sehen, aber es gabe keine verbindliche Kalibrierung, also keinen brauchbaren Massstab zur Beurteilung. Wie für manuelle Farbauszüge aus der Dunkelkammer, war einzig ein Andruck die sichere Kontrolle.</p>
	    </section><section class="szene3" data-300="opacity:0;top:600px;" data-380="opacity:1;" data-500="opacity:1;top:1000px;"><img src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/photoshop-logo.png" alt="Logo Photoshop"></section><section class="szene4" data-630="opacity:0;top:500px;" data-700="opacity:1;top:926px;"><h1>Die digitale Druckvorstufe setzt Massstäbe</h1>
	    <p class="text">Seit der Jahrtausendwende können Bilder in Minutenschnelle für Druck und Web getunt und abgespeichert werden. Was früher viel Chemie und noch viel mehr Erfahrung bedurfte, konnte mit wenigen Klicks erledigt werden. Das "gute Auge" hingegen war nach wie vor entscheidend. Begriffe wie: Farbraum, Profil und Gradationskurve wiesen den Weg zur PDF-Datei, die einen anspruchsvollen "Preflight" übersteht.</p>
	    </section><section class="szene5" data-780="opacity:0;top:1000px;" data-900="opacity:1;top:1200px;"><h1>Komponisten ebnen den Weg</h1>
	    <p class="text">Musiker wie Steve Reich oder Phillip Glass waren die Väter der repetativen Musik. "Electronica" aus aller Welt brachte Programme hervor, die das mischen, verfremden und neu erfinden bestehender Audiodateien zuliessen. Kurze Audio-Dateien wurden zur knetbaren Masse, aus denen neue Höhrgewohnheiten geboren wurden. Gruppen wie "Nerd" mit dem Drummer Jojo Mayer gehen bereits in die andere Richtung. Digitale Klangmuster der letzten Jahre, werden analog gespielt. Das macht ihren Sound so flexibel und der Stimmung des Momentums angepasst.</p>
	    </section><section class="class6" data-900="opacity:0;top:1000px;transform:translateX(-1200px)" data-1300="opacity:1;top:1000px;transform[bounce]:translateX(1000px)">
       <img src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/sampler1.png" alt="CuBase Sampler">
        </section>
        <section class="szene7" data-1100="opacity:0;top:1300px;" data-1200="opacity:1;top:1500px;"><h1>Affinity der Bilder-Sampler</h1>
            <p class="text">Das Programm Affinity Photo hat von Photoshop gelernt. Die meisten bekannten Arbeitsabläufe finden sich auch hier. Um die neuen, anderen "Features" nutzen zu können, ist der Wechsel der neuen Idee zu erkennen. Manipulationen am ursprünglichen Bild sind nicht mehr nur über "kleine Tricks" möglich. Affinity bietet Werkzeuge für digitale Eingriffe in: Belichtung (einstellen), Farbe (Weissabgleich, Tönungen), Verformungen (Gitternetz), Tiefenschärfe (manipulierbar), Beleuchtung (zusätzliche Quellen) und viele Filter. Es fühlt sich an, wie die digitale Bearbeitung einer Audiodatei, die in neue musikalische Zusammenhänge gesetzt wird. Aber jetzt mit Bild.</p>
	    </section>
          
          <section class="szene8" data-1130="opacity:0;top:1550px;" data-1200="opacity:1;top:1550px;" data-1300="opacity:1;top:1925px;" data-1700="position:fixed;top:90px;"><img src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/affinity-photo-logo.png" alt="Logo Affinity Photo"></section>
           
           <section class="szene9" data-1300="opacity:0;top:1650px;" data-1500="opacity:1;top:1850px;" data-1700="position:fixed;top:10px;"><h1>Auf zu neuen Wegen - Trampelpfade</h1>
            <p class="text">Was ist ein "echtes" Bild? Ein Bild das so bleibt wie es mit der Kamera eingefangen wurde oder ein Bild das nach der Bearbeitung unsere Interpretation der eingefangenen Szene kunstvoll wiederspieglt? Einige Werkzeuge, die uns diesem Ziel näherbringen können:</p>
            <ul data-1300="transform:translateX(0px)" data-1600="transform:translateX(400px)">
                <li data-1800="color:white;" data-2000="color:red;" data-2300="color:white;">1 Die Belichtung korrigieren</li>
                <li data-1800="color:white;" data-2300="color:red;" data-2600="color:white;">2 Lichtquellen setzten</li>
                <li data-1800="color:white;" data-2600="color:red;" data-2900="color:white;">3 Dunst entfernen oder vertiefen</li>
                <li data-1800="color:white;" data-2900="color:red;" data-3200="color:white;">4 Bildteile ersetzten</li>
                <li data-1800="color:white;" data-3200="color:red;" data-3500="color:white;">5 Geometrie korrigieren</li>
                <li data-1800="color:white;" data-3500="color:red;" data-3800="color:white;">6 Hautbereiche retuschieren</li>
                <li data-1800="color:white;" data-3800="color:red;" data-4100="color:white;">7 Tiefenschärfe verändern</li>
            </ul><div class="referenzbilder">
                
                <img class="afimg" data-2000="display:block;" data-4100="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/7-tiefenschaerfe-nachher.jpg" alt="Affinity Tiefenschärfe verändern vorher">
                <img class="afimg" data-2000="display:block;" data-3950="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/7-tiefenschaerfe-vorher.jpg" alt="Affinity Tiefenschärfe verändern nachher">
                <img class="afimg" data-2000="display:block;" data-3800="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/6-haut-nachher.jpg" alt="Affinity Hautretousche">
                <img class="afimg" data-2000="display:block;" data-3650="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/6-haut-vorher.jpg" alt="Affinity Hautretousche">
                <img class="afimg" data-2000="display:block;" data-3500="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/5-geometrie-nachher.jpg" alt="Affinity Geometrie">
                <img class="afimg" data-2000="display:block;" data-3350="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/5-geometrie-vorher.jpg" alt="Affinity Geometrie">
                <img class="afimg" data-2000="display:block;" data-3200="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/4-bildteile-nachher.jpg" alt="Affinity Bildinhalte entfernen">
                <img class="afimg" data-2000="display:block;" data-3050="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/4-bildteile-vorher.jpg" alt="Affinity Bildinhalte entfernen">
                <img class="afimg" data-2000="display:block;" data-2900="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/3-dunst-nachher.jpg" alt="Affinity Dunst verändern vorher">
                <img class="afimg" data-2000="display:block;" data-2750="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/3-dunst-vorher.jpg" alt="Affinity Dunst verändern nachher">
                <img class="afimg" data-2000="display:block;" data-2600="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/2-lichtquelle-nachher.jpg" alt="Affinity Lichtquelle setzen nachher">
                <img class="afimg" data-2000="display:block;" data-2450="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/2-lichtquelle-vorher.jpg" alt="Affinity Lichtquelle setzen vorher">
                <img class="afimg" data-2000="display:block;" data-2300="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/1-belichtung-nachher.jpg" alt="Affinity Belichtung korrigieren nachher">
                <img class="afimg" data-2000="display:block;" data-2150="display:none;" src="http://depot43.ch/unterlagen/assets/skrollr/af-ps/1-belichtung-vorher.jpg" alt="Affinity Belichtung korrigieren vorher">
                
                
                </div>
	    </section>
	    </main>
	    <footer data-0="bottom:-4443px;" data-bottom-top="bottom:0px;">
	        <p>Website: <a href="https://affinity.serif.com/de/photo/" target="_blank">Affinity Photo</a></p>
	        <p>Tutorials: <a href="https://vimeo.com/channels/875980" target="_blank">Affinity Photo Tutorial auf Vimeo</a></p>
	    </footer>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/skrollr.min.js"></script>
  <!-- jQuery optional -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script type="text/javascript">
  
            var s = skrollr.init({
            //forceHeight: false,
            render: function(data) {

                //console.log(data.curTop);
                jQuery('#offset').text(data.curTop);
            }
        });
  
  </script>
</body>
</html>




            