Contests

COMMAG12 - 13TitelthemaJahresrückblick 2013How-toLESS - dynamische CSS-ErzeugungWindrose in Illustrator erstellenInterviewDigital Artist Christian GerthVorgestelltWebdesign-Trends 2014Virtuelle Heft-CDEine feierliche Weihnachtsgrußkartezur freien Anpassung & Verwendung!Commag - das Online-Magazin für Bildbearbeitung, Webdesign & Co. - herausgegeben von PSD-Tutorials.de

Inhalt101MagazinEditorial 02Titelthema - Jahresrückblick 2013 18Virtuelle Heft-CD - Weihnachtsgrußkarte 66Gossip 98Team und Impressum 102PortalDer große Jahresrückblick 2013 18 Eine Windrose in Illustrator erstellen 48 Fotolias TEN-Collection: Unfinished Sympathy 55Community-News 04Neue Tutorials, Trainings & Downloads 05Fotorätsel 65How-toLESS - dynamische Erzeugung von CSS-Code 36Eine Windrose in Illustrator 48Die Füllmethoden in InDesign 52InterviewChristian Gerth - Fantasien ohne Grenzen 29Yoann Madec und Solène Renaudin 57VorgestelltKameratest Sony Cyber-shot DSC-RX10 07Webdesign-Trends 2014 14Interkulturelle Bildersprache 26Im Test - Malen mit dem iPad 46Der Abschluss der TEN-Collection 55ContestsAlle Battles und Contests im letzten Monat 68Professionelle Modelfotografie Teil 1 05 Digital Artist Christian Gerth im Dialog 29 2D-Einsteiger November 2013 / I 683PSD-Tutorials.de COMMAG 12 | 13

NewsDie TEN-Collection Season 2 geht zu EndeIn wenigen Tagen ist das Jahr schon wieder vorbei. Und wir erinnern uns, 2013 hatuns ein gewaltiges Kreativ-Projekt begleitet: die TEN-Collection Season 2! ÜberwältigendeBilder, Artworks, Composings und MotionDesigns haben uns die Monate versüßt.Nun neigt sich das Erfolgsprojekt dem Ende zu. Hier geht‘s zum letzten Bild.Die letzten Contests in diesem JahrIm Dezember erreichen die Contests ihren krönenden Abschluss. Zumeinen dürfen die Anfänger unter euch ihr Können im 2D-Beginner-ContestDezember 2013 unter Beweis stellen. Zum anderen haben dieFortgeschrittenen unter euch die Gelegenheit, eine virtuelle Weltreisezu machen. Denn im Länder werden zum Bild - Contest könntihr ein Land eurer Wahl auf eure eigene Art und Weise darstellen.Eurer Fantasie sind dabei keine Grenzen gesetzt. Alle Infos undRegeln findet ihr, wie gewohnt, im Forum. Wir wünschen viel Spaßbeim Pixeln!© © Senoldo - Fotolia.comPSD-Tutorials.de-WeihnachtskalenderSeit dem 1. Dezember haben wir einen Adventskalender für euchonline gestellt. Jeden Tag wird ein neues, lustiges, weihnachtlichesWerk präsentiert. Außerdem werdet ihr auch über diverse Aktionen ausunserem DVD-Shop aufmerksam gemacht. Lasst euch also die Chancenicht entgehen. Wir wünschen eine schöne Advents- und Weihnachtszeit.Ein Kartendeck im Robostar-DesignWusstet ihr eigentlich, dass unser engagierter Moderator Robostar sein eigenesKartendeck entworfen hat? Nein? Dann schnell reinschauen! Auchwir können nur sagen: Ein großartiges Projekt ist vollbracht, und egal, welchesBlatt auf der Hand liegt, man kommt aus dem Staunen nicht mehr raus!4PSD-Tutorials.de COMMAG 12 | 13

TutorialsNeue Trainingsinhalte im PortalEine Auswahl der besten Tutorials, Video-Trainings und Downloads des letzten MonatsAktion: Glaskugel mal andersUweJacobsProfessionelle Modelfotografie: Teil 1Jens_BrueggemannDoppelte Kontur auf TextenStefanHaare freistellen und Farbsaum...Matthias5PSD-Tutorials.de COMMAG 12 | 13

ReviewComposings in PhotoshopVideo-Training• 12 Stunden Video-Training mit Marco Kolditz• 4 faszinierende Composing-Workshops erwarten dich• Einstieg, Aufbau, Gestaltung, Feinschliff und jede Menge Tipps& Tricks für deine kreativen Fotomontagen• Arbeitsmaterialien inklusive (mit Wasserzeichen)Jetzt Trailer ansehen!Schluss mit langweiligen Composings? Hier kommt Nachschub!Erweitere dein Wissen rund um das kreative Zusammenspiel einzelner Elemente mit diesem Video-Training.Vier großartige Workshops zum selbst Nachbauen erwarten dich - und dazu jede Menge Spaß und Know-how.6PSD-Tutorials.de COMMAG 06 | 13www.psd-tutorials.de

ReviewSony Cyber-shot DSC-RX10In diesem Testbericht unseres Partners dkamera.de geht es um die Sony Cyber-shot DSC-RX10 mit 13,2x8,8mmExmor-R-Chip (20 MP), 8,3x-Zoom (F2,8), 3,0“ LCD, elektr. Sucher, 1080p50 Video, WLANDie KameraDie Digitalkameras der RX-Serie stehen bei Sonyfür höchstmögliche Bildqualität in kleinen Kameragehäusen.Mit der Sony Cyber-shot DSC-RX100 (Testbericht),der Sony Cyber-shot DSC-RX100 II (Testbericht)und der Sony Cyber-shot DSC-RX1 (Testbericht) sowieder Sony Cyber-shot DSC-RX1R (Testbericht) gibt esdabei aktuell vier Modelle, die alle neben ihrer hervorragendenAusstattung auch eine wirklich exzellente– und für ihre Größe – weit überdurchschnittlicheBildqualität bieten können.Während die genannten Modelle allerdings nur übereinen kleinen Brennweitenbereich (RX100 und RX100II: 3,8x) – oder sogar nur über eine Festbrennweite (RX1und RX1R) verfügen – will Sony mit der Sony CybershotDSC-RX10 (Datenblatt) nun auch eine größereBrennweitenabdeckung in der RX-Serie anbieten.Ganz in der Tradition der RX100-Modelle kommt dabeiein 13,2 x 8,8mm großer Bildwandler zum Einsatz.Der CMOS-Chip (1,0 Zoll) stellt Sensorempfindlichkeitenvon ISO 80 bis ISO 12.800 zu Verfügung, ISO 25.600lassen sich in Kombination mit der Multiframe-Rauschreduzierungnutzen. Dabei werden mehrere automatischhintereinander aufgenommene Einzelbilder zueiner rauschärmeren Aufnahme verrechnet.Auch die restliche Ausstattung der Bridgekamera liestsich wie das „Who is Who“ der Digitalkamera-Technik.Wie bei allen Modellen der RX-Serie kommt ein CarlZeiss Sonnar T*-Objektiv zum Einsatz. Bei der Sony Cyber-shotDSC-RX10 (Technik) deckt dieses eine kleinbildäquivalenteBrennweite von 24 bis 200mm ab. Beachtlichist dabei die Offenblende von F2,8, die sichüber den gesamten Brennweitenbereich erstreckt.Das 3,0 Zoll große Display lässt sich nach oben sowie untenklappen und löst hohe 1,23 Millionen Subpixel auf.Mit einem zusätzlichen weißen Bildpunkt (RGBW-Pixel)wird die Helligkeit erhöht. Auch beim elektronischenSucher greift Sony auf hochwertige Technik zurück, derOLED-Sucher stellt 1,44 Millionen Subpixel dar.Videos lassen sich in Full-HD-Auflösung mit 50 Vollbildernpro Sekunde im AVCHD-Format festhalten. ZurTonaufnahme kann das integrierte Stereomikrofonoder ein externes Mikrofon verwendet werden. Fastschon standardmäßig kommen nach diesen Highlightsdie PSAM-Modi, die Vollautomatik und die zweiCustom-Modi daher.Mit Akku und Speicherkarte wiegt die Sony Cyber-shotDSC-RX10 genau 812g. Zahlreiche Schnittstellen wieunter anderem HDMI, USB und auch ein WLAN-Modulsowie NFC (Near Field Communication) runden dasGesamtpaket ab. Lediglich ein GPS-Modul sucht manbei der RX10 leider vergeblich.7PSD-Tutorials.de COMMAG 12 | 13

ReviewDas FazitEine sehr überzeugende Leistung liefert die Sony CybershotDSC-RX10 in unserem Praxistest ab. Kann sie dieseshochwertige Ergebnis auch im Labortest erzielen?Unsere LaborergebnisseAuf einen „alten Bekannten“ treffen wir beim Bildsensor,denn der rückwärtig belichtete Exmor-R-CMOS-Chip der Sony Cyber-shot DSC-RX10 (Datenblatt)kommt auch in der Sony Cyber-shot DSC-RX100 II(Testbericht) zum Einsatz. Dort verrichtet dieser einesehr überzeugende Arbeit. Der 13,2 x 8,8mm großeSensor erlaubt die ISO-Wahl von ISO 80 bis ISO 12.800in Drittelstufen. ISO 25.600 lassen sich zudem über dieMultiframe-Rauschreduzierung im reinen JPEG-Modusverwenden. Hier speichert die Sony Cyber-shot DSC-RX10 mehrere Bilder in kurzer Zeit hintereinander undverrechnet diese Aufnahmen zu einer einzigen. Dadurchlässt sich das Bildrauschen im Vergleich zu einernormalen Aufnahme verringern. Die Multiframe-Rauschreduzierung kann jedoch nicht nur bei ISO25.600 verwendet werden, sondern lässt sich bei allenganzen ISO-Stufen bis minimal ISO 200 einsetzen. Natürlichunterstützt die Sony Cyber-shot DSC-RX10 auchdie Aufnahme im RAW-Format (.ARW), diese jedochausschließlich ohne Multiframe-Rauschreduzierung.Da uns der bei der Sony Cyber-shot DSC-RX10 verwendeteBildsensor bereits bekannt war, hatten wirnatürlich hohe Erwartungen an die Bildqualität. Diesewurden vollständig erfüllt. Wie bereits die Sony CybershotDSC-RX100 (Testbericht) bzw. die Sony Cyber-shotDSC-RX100 II (Testbericht) setzt die Sony Cyber-shotDSC-RX10 neue Maßstäbe in ihrer Kameraklasse. Diedeutlich kleineren Bildsensoren mit Abmessungen von1/2,3 Zoll liegen bei jeder Sensorempfindlichkeit imVergleich zum Sensor der RX10 sichtbar zurück. Spätestensab ISO 800 lässt sich dann behaupten, dassWelten zwischen allen anderen Bridgekameras - zumBeispiel der Panasonic Lumix DMC-FZ200 (Testbericht)oder der FujiFilm FinePix HS50EXR (Testbericht) - undder Sony Cyber-shot DSC-RX10 mit ihrem 1,0-Zoll-Bildwandler(13,2 x 8,8mm) liegen. Die Detailzeichnungder Aufnahmen der Sony Cyber-shot DSC-RX10 ist bisISO 400 exzellent, die Bildqualität bewegt sich hier aufdem Niveau einer Digitalkamera mit MFT- bzw. APS-C-Bildsensor. Bei ISO 800 macht sich dann ein leichtesBildgrieseln bemerkbar, der Einfluss auf die Bildqualitätist aber noch nur gering. Bei ISO 1.600 wirkt das Bilddann erstmals weichgezeichneter, die kamerainterneBildverarbeitung greift schon etwas stärker ein. Diestrifft auch für ISO 3.200 zu. Selbst hier ist die Detailwiedergabeaber noch als akzeptabel bis gut zu be-8PSD-Tutorials.de COMMAG 12 | 13

Reviewwerten. Bei ISO 6.400 bricht die Bildqualität ein, feineDetails werden nicht mehr aufgelöst. Wer noch höhereSensorempfindlichkeiten anwählt, muss sich auf starkweichgezeichnete Texturen einstellen.Bei weniger Licht ist das Ergebnis ähnlich. Bis ISO 400müssen keine Abstriche gemacht werden, bei ISO 800steigt das Bildrauschen etwas an und bei ISO 1.600 istdieses dann schon deutlicher sichtbar. ISO 1.600 solltenbei höheren Ansprüchen an die Detailwiedergabenicht überschritten werden, aber selbst mit ISO 3.200aufgenommene Bilder sind durchaus noch zu gebrauchen.Insgesamt bewegt sich der Vorteil der Sony Cyber-shotDSC-RX10 in etwa bei drei Blendenstufen gegenüberden Bridgemodellen mit 1/2,3-Zoll-Sensor,zum Beispiel der Panasonic Lumix DMC-FZ200 (Testbericht).Auch im Vergleich mit Systemkameras mitnoch größeren Sensoren, wie zum Beispiel der PanasonicLumix DMC-GX7 (Testbericht), muss sich die Digitalkameranicht verstecken. Bis etwa ISO 800 gibt esnahezu keinen Unterschied, selbst bei ISO 1.600 mussman schon genau hinsehen, um diesen erkennen zukönnen. Für eine Bridgekamera ist dieses Ergebnis phänomenalund bisher unerreicht (Stand 11/2013).Bei der Geschwindigkeit überzeugt die Sony CybershotDSC-RX10 mit einer Serienbildrate von zehnBildern pro Sekunde für 22 Aufnahmen in Folge imJPEG-Format. Kommt das RAW-Format ins Spiel, sinktdie Bildrate auf 6,5 bzw. 6,7 Bilder pro Sekunde. Auchdie Länge der Bildserie ist mit 9 bzw. 10 Aufnahmendeutlich kürzer. Ist der Pufferspeicher gefüllt, bricht dieBildrate leider deutlich ein. Dann lassen sich nur nochzwischen 1,2 und 1,8 Bilder pro Sekunde - je nach Bildformat- festhalten.Die Auslöseverzögerung fällt Sony-typisch mit 0,01 Sekundensehr kurz aus, der Autofokus stellt mit 0,32 Sekundenzwar nicht sehr flott, aber doch meist schnellgenug scharf. Beachtlich ist dabei, dass diese Zeit nichtnur im Weitwinkel gilt, sondern ähnlich auch am Teleendeerreicht wird. Hier schwächeln andere Bridgekamerasin der Regel deutlich. Beim Einschalten nimmtsich die Sony Cyber-shot DSC-RX10 mit 1,92 Sekundenetwas länger Zeit, auf die erste Bildaufnahme muss2,38 Sekunden gewartet werden. Dieses Ergebnis istakzeptabel und liegt am großen Objektiv, das nachdem Kamerastart zuerst einmal ausgefahren werdenmuss. Die Arbeitsgeschwindigkeit der Sony Cyber-shotDSC-RX10 ist insgesamt gesehen also gut.Bei der Farbwiedergabe schneidet die Sony CybershotDSC-RX10 allenfalls nur mittelmäßig ab. Sowohlbei den durchschnittlichen als auch den maximalenAbweichungen besteht ein größerer Abstand zumSollwert. In der Praxis ist dieser zwar noch nicht problematisch,andere Digitalkameras schneiden hier jedochbesser ab.Im Fotomodus arbeitet der optische Bildstabilisatormit rund drei Blendenstufen sehr effektiv; wer denelektronischen Sucher nutzt, wird sogar mit einerKompensationsleistung von bis zu vier Blendenstufenrechnen können. Nur im Videomodus enttäuscht der9PSD-Tutorials.de COMMAG 12 | 13

Reviewoptische Bildstabilisator etwas, denn hier zeigt sich einstärkeres Zittern bei längeren Brennweiten. Dies sehenSie bei unseren Beispielvideos in voller Auflösung.Bei den RX-Modellen setzt Sony auf die besondershochwertigen Objektive aus dem Hause Carl Zeiss.Das Vario Sonnar T* der Sony Cyber-shot DSC-RX10deckt eine kleinbildäquivalente Brennweite von 24bis 200mm und damit den wichtigsten Bereich ab.Natürlich glänzt das Objektiv aber nicht nur mit seinerBrennweite, es ist vor allem die Lichtstärke, diees so interessant macht. Sowohl im Weitwinkel alsauch am Teleende liegt die größte Blendenöffnungdes 8,3-fach-Zooms bei F2,8. Dadurch kann die Sensorempfindlichkeitzum einen lange niedrig gehaltenwerden, zum anderen fällt auch die Freistellung für eineBridgekamera überdurchschnittlich aus.Aber nun von der Theorie zur Praxis: Die Abbildungsleistungdes Carl Zeiss Vario Sonnar T* ist – immer dengrößeren Brennweitenbereich und die Lichtstärke imHinterkopf – sehr gut. Selbst bei Offenblende zeigendie Bildränder nur einen relativ leichten Abfall, der absoluttoleriert werden kann. Die Verzeichnung wird kamerainterngut korrigiert und ist nur wenig auffällig.Eine Vignettierung lässt sich in der Praxis nur seltenerkennen. Auch bei der weiteren Ausstattung kann dasObjektiv punkten. Der SSM-Fokusmotor (“Super SonicMotor“) arbeitet sehr leise und recht schnell, mit demFokus- und dem Blendenring stehen zwei solide verarbeiteteund gut konstruierte Einstellringe zur Verfügung.Optische Filter lassen sich mit einer Größe von62mm am Filtergewinde anschrauben.Das meint die RedaktionBereits bei ihrer Vorstellung ließ die Sony Cyber-shotDSC-RX10 (Datenblatt) mit ihren technischen Datenaufhorchen, denn eine derart gut ausgestatteteBridgekamera hat es noch nie auf dem Markt gegeben.Da die reinen technischen Daten aber natürlichnur ein Anhaltspunkt sind, waren wir darauf gespannt,wie die Sony Cyber-shot DSC-RX10 (Hands-On-Video)in der Praxis und im dkamera.de-Labor abschneidet.Um es kurz zu machen: Unsere hohen Erwartungenwurden nicht enttäuscht.Die Sony Cyber-shot DSC-RX10 stellte in vielen Disziplinenneue Bestwerte für eine Kamera der Bridgeklasseauf. Zuallererst ist hier natürlich die Bildqualität zunennen. Diese bewegt sich auf dem exzellenten Niveauder Sony Cyber-shot DSC-RX100 II (Testbericht).Dies bedeutet, dass sich selbst ISO-Einstellungen vonbis zu ISO 1.600 mit nur kleineren Abstrichen problemlosnutzen lassen.Das 8,3-fach-Zoom von Carl Zeiss bildet für seinen größerenBrennweitenbereich überdurchschnittlich gutab, die durchgängige Blendenöffnung von F2,8 erweitertden kreativen Freiraum. Auch an der weiteren Ausstattungder Bridgekamera lässt sich kaum etwas Negativesfinden. Das Kameragehäuse ist gut verarbeitet,bietet sehr viele Tasten und Einstellräder und lässt sich10PSD-Tutorials.de COMMAG 12 | 13

ReviewWer hohe Ansprüche an die Bildqualität hat und trotzdemeinen größeren Brennweitenbereich mit nur einerrelativ kompakten Kamera abdecken möchte, ist beider Sony Cyber-shot DSC-RX10 goldrichtig. Ein großesHindernis dürfte für viele allerdings der Preis sein, denndieser bewegt sich deutlich über allen anderen Modellendieser Klasse.phänomenal gut an die eigenen Wünsche anpassen.Nur ein paar Tasten fallen etwas klein aus und wurdennicht optimal platziert. Bei der Geschwindigkeit gefälltdie mit bis zu zehn Bildern pro Sekunde hohe Bildrate.Der Autofokus ist im Weitwinkel nicht super schnell,am Teleende jedoch vergleichsweise flott.Verurteilen wollen wir dies jedoch nicht, denn die SonyCyber-shot DSC-RX10 (Praxis) ist derzeit mit weitemAbstand die beste erhältliche Bridgekamera. Sieüberzeugt in nahezu allen Punkten (wie beispielsweise:Abdichtungen, Bildserie, Zoom, Bildqualität, Lichtstärke,Verarbeitungsqualität, Individualisierbarkeit,Videomodus, Einstellungsmöglichkeiten, Schnittstellen,...) und macht mit ihrem extrem stimmigen Gesamtpaketsogar einigen Spiegelreflexkameras ernsthafteKonkurrenz.Das 3,0-Zoll-Display und der große, mehr als überdurchschnittlichgute Sucher sind beide hochauflösendund dank Augensensor sowie der Klappfunktionalitätdes LCDs komfortabel nutzbar. Exzellent sindauch die Videofähigkeiten der Sony Cyber-shot DSC-RX10 (Beispielaufnahmen): Die Bildqualität ist hervorragend,die Bildrate mit 50 Vollbildern pro Sekundehoch und auch manuelle Optionen sind vorhanden.Ebenso lassen sich ein Mikrofon und ein Kopfhörer anschließen(je 3,5-mm-Klinke).11PSD-Tutorials.de COMMAG 12 | 13

ReviewSony Cyber-shot DSC-RX10mit 13,2x8,8mm Exmor-R-Chip (20 MP), 8,3x-Zoom (F2,8), 3,0“-LCD, elektr. Sucher, 1080p50 Video, WLAN99Mit riesigem Vorsprung die beste Bridgekameraam Markt (Stand 11/2013)99Exzellente Bildqualität bei niedrigen und mittlerenISO-Werten (für eine Bridgekamera)99Sehr gute Bildqualität (für eine Bridgekamera)99Sehr gutes 8,3-fach-Zoomobjektiv mit einerdurchgängigen Offenblende von F2,8 ...99... und einer für diesen Brennweitenbereich sehrguten Abbildungsleistung99Mit 24 Millimeter großer Weitwinkelbereich99Sehr kompaktes Kameragehäuse (bezogen auf dieSensorgröße und das lichtstarke Objektiv)99Das Kameragehäuse ist hochwertig verarbeitet99Die Kamera liegt gut und sicher in der Hand99Hochauflösendes und nach oben sowie untenklappbares 3,0-Zoll-Display mit 1,23 Mio. Subpixel99Zweites Kontrolldisplay auf der Oberseite99Hochauflösender, großer und heller elektronischerSucher (1,44 Millionen Subpixel)99Sucherbild in dieser Kameraklasse vergleichsweisesehr gut, kein Flimmern99Effektiver optischer Bildstabilisator99Sehr hohe Bildrate im Serienbildmodus (Labor:10,0 Bilder/Sek. für 22 Bilder in Folge bei JPEG)99Akzeptabel schneller Autofokus (0,32 Sek.), sehrkurze Auslöseverzögerung (0,01 Sek.)99Direkter Zugriff über Tasten und Wahlräder aufsehr viele Optionen99Viele Tasten/Einstellräder lassen sich äußerst umfangreichindividualisieren (siehe Praxistest)99Viele Einstellungsmöglichkeiten im Kameramenü99Digitale Wasserwaage und ND-Filter vorhanden99Voll- und Halbautomatiken sowie manueller Belichtungsmodusvorhanden999 Szenenprogramme und 13 Kreativfilter („Landschaft“,„Wasserfarbe“, „Miniatur“, ...)99Manueller Fokus mit Peaking-Unterstützung undDisplaylupe99Aufnahme im RAW-Bildformat möglich99Guter Makro-Modus (ab ca. 3 cm Motivabstand)99Sehr guter Panorama-Modus mit hoher Auflösung99Zubehörschuh für Blitzgerät / externes Mikrofon99Full-HD-Videoaufnahme mit 50 Vollbildern/s99Exzellente Bildqualität im Video-Modus (siehe dazuunsere vier Beispielvideos zum Herunterladen)99Volle manuelle Kontrolle im Video-Modus99Optisches Zoom während der Videoaufzeichnungmöglich (verlangsamt und leise)99Sehr schneller Autofokus im Video-Modus (ohnestörendes „Pumpen“)99Gute Tonqualität des integrierten Mikrofons miteinstellbarem Pegel (Stereo)99Anschluss für ein externes Mikrofon (3,5 mm)99Kopfhörerausgang vorhanden (3,5mm)99WLAN und NFC zur drahtlosen Datenübertragung99Kompatibel zu allen von uns getesteten Speicherkartenbis 256GB99Zur 256GB Lexar Professional 600x Speed (UHS-I,Class 10) SDXC Speicherkarte kompatibel99Zur 16GB Toshiba SDHC UHS-II EXCERIA PRO260/240MB/S Ultra-High-Speed-Karte kompatibel99HDMI-Ausgang ermöglicht die Bildausgabe in 4K-Auflösung88Ein paar Tasten sind klein und wurden nicht optimalplatziert88Klappmechanik des Blitzgerät beim Zuklappennicht optimal (damit kann man jedoch leben)88Der optische Bildstabilisator arbeitet bei Videoaufnahmenim Telebereich unbefriedigend12PSD-Tutorials.de COMMAG 12 | 13

AnzeigeReview13PSD-Tutorials.de COMMAG 12 | 13

VorgestelltWebdesign-Trends 2014„Alle Jahre wieder!“ Wie schon in der Dezember-Ausgabe 2012 möchten Pascal und ich euch die Webdesign-Trends für das kommende Jahr 2014 vorstellen und euchunsere Einschätzung zu diesen Trends erläutern. Wir wünschen euch viel Spaß mit diesem Artikel. Von Pascal Bajorat und Dennis Kovarik.Nicht erst seit 2013 bzw. 2014 erfreuen sich einigeTrends großer Beliebtheit, sind also nichtneu. Werden sich aber, wie in 2013 bereits geschehen,weiter verbreiten, denn die Webseiten, die in der heutigenZeit einen Relaunch erfahren, kommen um dieseThemenbereiche kaum noch herum.Flat Design»Less is more« oder zu deutsch »Weniger ist mehr«.Wie einleitend erwähnt, wird uns auch der Trend des»Flat Design« im kommenden Jahr erhalten bleiben.Schlicht und funktionell, so wie es uns die großen Namenwie z.B. Facebook, Google, Microsoft und Applevorleben, soll es sein, ohne die bekannten Effekte wieSchlagschatten, dreidimensionale Effekte etc. Kurz gesagt:Eine reduzierte Gestaltung, wobei die wesentlichenInhalte in den Vordergrund gerückt werden. BeimEinsatz von »Flat Design« sollte man allerdings daraufachten, dass die verschiedenen Elemente, wie z.B. Links,Buttons etc., auch in ihrer Funktion wahrgenommenwerden. Was man dabei aus technischer Sicht nichtvergessen darf, ist, dass hierdurch auch Ladezeiten verkürztwerden können und aufwendige Grafiken nichterst im Hintergrund geladen werden müssen, da sichdas Meiste durch die Realisierung via CSS lösen lässt(Reduzierung der HTTP-Requests und Webseitengrößeallgemein). Den Trend als solches wird man nichtnur auf den »klassischen Webseiten – und auch Applikationen«,sondern weiterhin auf den »One-Pagern«wiederfinden.Neben den beiden genannten Website-Stilen bliebeauch noch die Gestaltung der Icons zu erwähnen, welcheebenfalls auf einen realistischen Eindruck verzichtenund »flach« gehalten sind. Auch wenn beim »FlatDesign« weitestgehend auf den Einsatz von SchattenBeispiel für den Einsatz eines One-Pagersverzichtet wird, hat bei den Icons einneuer Trend Einzug erhalten, der sogenannten»Long-Shadow«, bei dem derEinsatz des Schatten im wahrsten Sinnedes Wortes geradezu übertriebenwird (siehe rechts).Linktipps»»Flat Design fltdsgn.com»»One-Page-Design onepagelove.com»»Long-Shadow-Design je.roon.io/long-shadow...Beispiel für den Einsatz von Flat Design14PSD-Tutorials.de COMMAG 12 | 13

VorgestelltResponsive Design und native AppsDie Weihnachtszeit ist nah und wer nicht bereits einSmartphone und Tablet besitzt, hat vermutlich einesauf dem eigenen Wunschzettel stehen. Der Trend zummobilen Surfen ist ungebrochen hoch und steigt stetigan, entsprechend müssen hier auch die Betreiberder Webseiten nachziehen und ihren Nutzern bzw. Lesernauch auf Smartphones und kleineren Tablets einangenehmes Nutzungserlebnis bieten.Gemeinsam mit dem Trend, Webseiten auch für mobileEndgeräte zu optimieren, haben auch die sogenanntenOff-Canvas-Navigationen Einzug in aktuelle Webseitengehalten. Off-Canvas-Navigationen liegen außerhalbdes sichtbaren Bereichs der meist mobilen Webseiteund werden mit einem Klick auf ein Navigations-Icon oder Button eingeblendet. So wird auf den Seitenkein Platz für immer gleiche Navigationselemente verschenkt,wodurch dieser voll genutzt werden kann.Der Trend hin zu einer nativen App hingegen dürftehier vermutlich eher etwas nachlassen, denn kaum einSmartphone-Besitzer wird sich für jede gerade angesurfteWebseite eine native App auf sein Smartphoneladen. Eine native App z.B. mit Push-Nachrichten isteher für häufig besuchte Webseite oder Nachrichtenportaleinteressant.Nutzung von Vorlagen und FrameworksIn 2014 wird der Anspruch an moderne und professionelleWebseiten weiter ansteigen und damit auchder Aufwand zur Realisierung entsprechender Projekte.Daher werden vermutlich immer mehr Webdesignerauf Frameworks und fertige Scripte bzw. Effekte zurückgreifen,um den Entwicklungsaufwand zu reduzieren.Zu den populärsten Frameworks gehören z.B. folgendeProjekte, die du dir unbedingt einmal anschauensolltest, wenn du deinen Workflow beschleunigenmöchtest:Frontend Frameworks»»Bootstrap - getbootstrap.com»»Foundation - foundation.zurb.com»»YAML - www.yaml.de»»YUI CSS - yuilibrary.comJavaScript Frameworks»»jQuery - jquery.com»»MooTools - mootools.net»»AngularJS - angularjs.orgPHP-Frameworks»»CakePHP - cakephp.org»»Zend Framework - framework.zend.com»»CodeIgniter - ellislab.com/codeigniterWebseite des Frontend Frameworks Foundation 515PSD-Tutorials.de COMMAG 12 | 13

VorgestelltZu den genannten Projekten kommen noch unzähligeweitere hinzu, verschiedene Slideshow-Scripte, Effekt-Bibliotheken, Vorlagen wie das HTML5 Boilerplate.comoder Wordpress-Boilerplate.com usw.Die Nutzung eben jener Tools, Vorlagen und Frameworksdürfte weiterhin kräftig zulegen, schließlichmuss nicht jeder Webdesigner das Rad neu erfinden.Auch preislich geben viele Projekte oftmals gar nichtdie Möglichkeiten, alles von Grund auf und individuellzu erstellen.StorytellingKennst du das auch, dieses eine Bild, das du ansiehstund nicht mehr loslassen kannst? Bilder und Videos,die einen in teilweise emotional anregender Form bannenund oft auch ohne entsprechende Texte oder einenVideo-Erzähler eine Geschichte oder ein Gefühlvermitteln, diese Art der bildhaften Webseitengestaltungwird ebenfalls zunehmen. Entsprechende Einsatzbereichesind hier vor allem große Hintergrundbilderoder eben vollflächige Hintergrundvideos.Zwar eignet sich dieser sehr emotionale Bereich nichtunbedingt für jeden Themenbereich, doch wer einenpassenden Kunden / Projekt hat, hält hier theoretischden heiligen Gral der Besucherbindung in Händen.Möglich wären hier vorzugsweise Hilfsorganisationenmit Bildern aus Katastrophengebieten, in denen diesetätig sind, allgemein passende Webseiten mit Veranstaltungsbildernoder landschaftlich ansprechendenGravity mit Video im Hintergrund16PSD-Tutorials.de COMMAG 12 | 13

VorgestelltGebieten, z.B. Anbieter von Urlaubsreisen. Auch imBereich Mode oder Produktmarketing lassen sich ansprechendeBilder oder Kurzfilme kreieren, mit denensich der Besucher identifizieren kann oder soll.Um hier ein paar Beispiele zu nennen:»»96elephants.org»»gravitymovie.warnerbros.com»»www.dadaabstories.orgParallax-ScrollingParallax-Scrolling auf Webseiten ist ein schöner Effekt,den wir sicher auch 2014 auf vielen Webseiten wiederfindenwerden, dennoch gibt es bereits genügendWebdesigner, die sich an dieser Technik sattgesehenhaben, er wird also nicht ganz verschwinden, aberwohl nicht so enormen Zuwachs finden wie z.B. ResponsiveWebdesign im Allgemeinen. Dies hängt vorallem auch damit zusammen, dass die Parallax-Scrolling-Effekteteilweise im Widerspruch zu ResponsiveDesign stehen, denn aktuell gibt es noch genügendSmartphones, die mit den teilweise sehr aufwendigenEffekten technisch nicht mithalten können, es ruckelt,zuckt und knarrt immer wieder, gerade auf älteren Geräten.Die Informationen auf mobilen Webseiten solltensich aber auf das Wesentliche beschränken und mitjedem Smartphone gut abrufbar sein.Beispiele für Parallax-Scrolling:»»www.spotify.com/us/2013»»rbv.meFazitZusammenfassend kann man über die »WebdesignTrends 2014« wohl Folgendes sagen:Es wird keine großen Revolutionen im Überfluss geben,denn viele Maßstäbe wurden bereits in der jüngstenVergangenheit gesetzt. Dafür werden sich die bestehendenTrends aus 2013 und den Jahren zuvorweiter ausbauen und festigen. Dies ist auch bitter nötig,da teilweise immer noch viele Webseiten, geradeim Bereich »Responsive Design«, doch sehr zu wünschenübrig lassen.Webseite von 96elephants.orgZum Schluss würde uns natürlich noch interessieren,welche Trends du für das kommende Jahr ganz weitvorne siehst, was sind deine persönlichen Favoriten?Diskutiere mit uns zu diesem Thema in den Kommentarenzu diesem Commag oder im Forum.In diesem Sinne wünschen wir euch ein frohes und besinnlichesWeihnachtsfest, ebenso einen guten Rutschins neue Jahr und viele kreative Ideen für das Jahr 2014.Euer Pascal & Dennis17PSD-Tutorials.de COMMAG 12 | 13

TitelJahresrückblick 2013 - ein tolles Jahr geht zu Ende© © Coloures-Pic - Fotolia.com18 PSD-Tutorials.de COMMAG 12 | 13

Titel2013: ein Blick hinter die KulissenEin Jahr zählt mit so vielen Tagen, wie man genutzt hat... Dieser Sinnspruch entstammt George Bernard Shaw, dem irischen Schriftsteller.Na, wenn das so ist, dann ist 2013 das erste Jahr, in dem ich persönlich der allgemein gültigen Zeitrechnung trotze. Wie viele gefühlte Tage esnun aber sind, möchte ich besser nicht erwähnen :-) Während es jedenfalls hierzulande mit jedem Tag spürbar kälter wird, die Weihnachtsmärktevollkommen überrannt werden und die anhaltende und verlässliche Weihnachts-Rush-Hour Einzug hält, möchte ich diese Zeilendem Jahr 2013 widmen.Stefan RiedlNachdem Stillstand Rückschritt bedeutet (wiederso ein Sinnspruch), haben auch wir von PSD-Tutorials.de ein tatkräftiges Jahr hinter uns. Große Plänestanden im Raum, doch wie das üblicherweise soist - ihr kennt es - sind oft die kleinen Dinge „zwischendurch“jene, welche die Aufmerksamkeit auf sich lenkenund erledigt werden wollen. Werfen wir doch maleinen Blick zurück ins Frühjahr 2013.Publishingwissen auf einen BlickMatthias und ich waren im Frühjahr zu Gast auf derPUBKON ‘13, einer Publishing-Konferenz in Berlin. Vieletolle Referenten traten ans Rednerpult, welche unsspannendes Publishingwissen mit auf den Weg gaben.Witzigerweise sprach Matthiaszu diesem Zeitpunkteine sich selbst erfüllendeProphezeiung aus: „EinesTages stehen auch wir amRednerpult...“ flüsterte er mirzu. Ich hatte ja nicht geahnt,dass uns das Schicksal derartzügig einholen wird. Aber zurück zur PUBKON: Zwischenden Sessions hatten wir ausreichend Zeit, umzu netzwerken, uns an den Ständen umzusehen unddas Buffet zu genießen. Doch der größte Berg von Arbeitstand uns noch bevor. Die zahlreichen Tipps undHinweise, mit denen wir nach Hause kamen, musstennun in die Tat umgesetzt werden. Unsere erste Großbaustelle:das Commag. Da gab es einiges nachzuholen.Allem voran wollten wir das Design zumindest ineinigen Ansätzen frischer und leichter gestalten. Derdickere „Regular“-Schriftschnitt musste der filigranen„Light“ weichen. Ebenso war es wichtig, übergreifendeAbsatz- und Zeichenformate festzulegen, Icons zusetzen, einheitliche Aufzählungen zu definieren, undund und ... Man kann sich kaum vorstellen, dass in den88 Ausgaben zuvor alle Texte eher etwas stiefmütterlichund häufig manuell gesetzt wurden. Grund genug,mehr Konsequenz einzubringen, um einen schnellerenWorkflow zu realisieren. Und die Bemühungen warenin der Tat nicht umsonst. Was soll ich sagen? Esgeht jetzt alles etwas schneller und auch die Inhaltesehen gestalterisch etwas hübscher aus.Anfang 2013 war das Commag alles andere als schlank ...Hurra - das Kind wird 8!Wo wir gerade beim Commag sind - hier gab es diesesJahr gleich zweimal kurz hintereinander Anlass,die Sektkorken knallen zu lassen. Im August gab esein Geburtstagsfest, das leider jeder vergessen hat.Das Commag wurde 8 Jahre alt. Doch nur drei Monatedarauf gab es ein Thema, das noch viel interessanterfür uns war: Die 100. Ausgabe unseres kostenlosen19PSD-Tutorials.de COMMAG 12 | 13

Titel„Community-Magazins“ Commag ging über die virtuelleLadentheke. Wow, also das hatten sich die Jungswohl 2004 nicht erträumen lassen, als sie der Meinungwaren, ein simples Online-Magazin für das Portalrauszubringen. Anlässlich dieser Feierlichkeit wurdevon unserem Moderator Robostar auch ein ganzspezieller Contest ausgerufen. Ich nenne ihn immerich schnell, dass es besser ist, die Push-Nachrichten mitTon auf meinem Smartphone zu deaktivieren, da michdas Klingeln zugegebenermaßen verrückt machte. Verständlichnach 233 Kommentaren, sprich 233 erhaltenenE-Mails innerhalb weniger Tage ;-) Dennoch vielenlieben Dank für eure Glückwünsche und Zusprüche.Uns als Redaktion hat eure Anteilnahme sehr gefreut.den „CCC“ - aber da nie einer versteht, was ich damitmeine, muss ich es im darauffolgenden Satz immererklären: der Commag-Cover-Contest. Ziel war es, die„100“ in einem Bild zu visualisieren. Erstaunlich war dieserContest allemal, denn die Teilnahme sowohl beimPixelschubsen als auch beim anschließenden Votingwar exorbitant: 35 eingereichte Bilder und sagenhafte272 abgegebene Stimmen sind eine Hausnummer, dieuns wirklich erstaunte. Zum Schluss machte das Rennenunsere Userin gestandeneFrau, sodass ihr kreativesBild das Cover der 100. Ausgabe ziert. Ebenso freudigwaren eure Kommentare zur Ausgabe selbst. Daich bei jedem Kommentar eine E-Mail erhalte, merkteDas Siegerbild des Commag-Cover-ContestsEin neuer Wind weht von „Big A“Adobe hat uns ja dieses Jahr einige Neuerungen imPortfolio beschert. Den einen freut es, der andere verfluchtdie Änderung. Das Abomodell im Rahmen derCreative Cloud soll mit innovativer und moderner Updatekulturglänzen und dem Käufer Mehrwerte bieten,die sonst nicht möglich gewesen wären. Stefan,Matthias und ich kamen nicht drum herum, auch hierunsere Nase einmal reinzustecken und einen tiefenAtemzug von Adobes neuester Softwaretransforma-tion zu nehmen. Schnell war entschieden: Matthiasübernimmt die Updates von Photoshop CC und wirddie Inhalte als Video-Training für unser eLearning-Portalaufbereiten. Stefan übernahm Illustrator CC undich widmete mich den Neuerungen aus InDesign CC.Natürlich stehen alle aufgenommenen Inhalte ebensoauf den entsprechenden Trainings im Shop zur Verfügung.Mittlerweile hat sich auch im Rahmen unsererTätigkeit als Agentur und Portalbetreiber das Geplänkelum die Creative Cloud in ruhigeren Gewässern eingependelt.Einige von uns nutzen die neuen CC-Versionen,andere arbeiten lieber mit CS6, und wir merkenbis dato keine nennenswerten Einbußen. Es verhältsich im Prinzip ähnlich wie die interne Aufteilung, dassdie Hälfte des Teams mit Windows- und die andere mitMAC-Rechnern arbeitet. Das Tagesgeschäft ist dadurchnicht beeinträchtigt.Wechsel in der MannschaftIm Juni gab Matthias das Ausscheiden einiger Moderatorenbekannt. Sechs engagierte User verabschie-20PSD-Tutorials.de COMMAG 12 | 13

Titel© © Sarunyu_foto - Fotolia.comdeten sich offiziell: Herr_D, Mysth, Doitsu, sokie, PhSnund CrazyLopp. In einem ausführlichen Newsartikelvom 13.06. dankt Matthias für das außerordentlicheEngagement und teilt im gleichen Zuge mit, dass randacek_promit ins Boot geholt wird, der sich im Übrigenauch seit ackermaennchens Weggang vom Commag-Teamden Part des Interviewers mit Pixelmixturteilt. Ebenso trat dieses Jahr im März unser User reitzvolldem Moderatorenteam bei.Dem Webinarfieber verfallenStefan Petri ist ja stets euphorisch und enthusiastischunterwegs, wenn es um PSD-Tutorials.de geht. Ebensohat er eine ausgefallene Liebe zu Webinaren entwickelt,sodass wir es ihm zu verdanken haben, dassdieses Jahr 9 Webinare initiiert wurden. Den Auftaktmachte dabei Robostar, der vor den vielen Zuschauerneinen Live-Workshop zum Thema „von der Skizzezur Animation“ hielt - trotz 1.000er-Leitung. Kurz darauffolgte medienfux mit einem Workshop zur Vektorisierungvon Logos, Davis Tox zum Thema GegenlichtFotografie und Beauty-Retusche und Benomero miteinem Quick-Photoshop-Composing. Im Herbst gingder Webinar-Marathon dann sportlich weiter. Ihr erinnerteuch sicher: Den Anfang nach der Halbzeit machteunser Webentwickler Pascal zum Thema WordPress,anschließend folgte ich mit einigen Tipps aus InDesign,gefolgt von Matthias zur Arbeit mit Photoshop undanschließend Minaya zum Modelling-Programm Poser.Auch ackermaennchen führte ein tolles Webinarzur Landschafts- & Sternenhimmelfotografie. Die Teilnehmerzahlschwankte immerzu, doch zu Spitzenzeitenkonnten wir über 300 Zuschauer für unsere kostenlosenLive-Webinare begeistern und das Feedbackvon euch war immer grandios. Das freut uns wirklichsehr. Leider haben wir zum gegenwärtigen Zeitpunktnoch immer keinen eigenen virtuellen Raum, was mitunterdaran liegt, dass viele der freien Anbieter nichtdie Qualität bringen, die wir uns wünschen. Ein kostenpflichtigerRaum (wie z. B. von Adobe Connect)ist jedoch mit erheblichem finanziellen Aufwand verbunden,für die wir auch nicht die Webinar-Frequenzaufbringen können, damit sich das lohnen würde. Wirfinden sicher 2014 eine praktische Lösung.Kleine Impressionen von unserem Aufenthalt in HamburgZwischen Reeperbahn und RednerpultEingangs hatte ich schon von der sich erfüllenden Prophezeiunggesprochen. Ein halbes Jahr später ereiltesie uns bereits. Es flatterte eine Einladung von den Veranstalternder Mediale 2013 ins Haus, mit der Frage, obwir nicht Lust hätten, in Hamburg als Referenten hinterdem Rednerpult zu stehen. Die Freude, aber ebensodie Aufregung, war groß. Aber wie sich das für unsmotivierte junge Männer gehört, zögerten wir nichtlange und sagten gleich mit drei Vorträgen zu. Zusätzlichhatten wir einen Stand direkt vor Ort, an den wirdie Interessenten mit allerhand Süßigkeiten lockten. Esist schön, wenn wir uns als Team auf Veranstaltungenendlich wiedersehen. Liegt einfach daran, dass durchdas Internet (u. a.) die Welt zunehmend zusammen-21PSD-Tutorials.de COMMAG 12 | 13

Titelwächst. Irgendwo hab ich kürzlich gelesen: „Von Jahrzu Jahr braucht man weniger Zeit, um über den Ozean,aber mehr Zeit, um ins Büro zu kommen.“ Trifft bei unsglücklicherweise nicht zu, denn das WorldWideWebermöglicht es uns, dass wir alle von zu Hause aus tätigsind. So sitzen wir kreuz und quer in der Bundesrepublikverstreut, halten unsere Meetings über Skype abund arbeiten am Portal und der Agentur. In Hamburghatten wir also endlich wieder Gelegenheit, uns malvon Angesicht zu Angesicht auszutauschen, und manentdeckt Eigenheiten und Seiten am Gegenüber, dieman über das reine „Telefonieren“ gar nicht für möglichgehalten hat :-) Natürlich dufte ein kleiner Walk überdie Reeperbahn im Hamburg-Sightseeing-Programmnicht fehlen. Ebenso wie das gute Essen im iberischenViertel, bei dem uns ein temperamentvoller Kellner mitdem Trinkspruch ¡Arriba, abajo, al centro y adentro...! beiLaune hielt. Es war wirklich großartig.Punkt um Punkt und was im Portal los warAuch unser portalinternes Währungssystem (Punkte)kam nicht an einer Reform vorbei. Zur Jahreshalbzeithaben wir den kostenlosen Download von aktuell freigeschaltetenInhalten neu reglementiert - zum Bedauernvieler von euch. Einige Monate später hat es sichaber als guter und auch notwendiger Schritt entpuppt.Die Inhalte werden mittlerweile nicht mehr so inflationärheruntergeladen, sondern gezielt nach Interessenschwerpunktjedes Einzelnen. Auch die Kommentarewurden lebhafter, was uns sehr freut. Ebenso habenwir neue Möglichkeiten zur Punktesammlung geschaffen.Jeder, der ein Tutorial, Video-Training oder Downloadim Portal hochlädt, erhält für jeden „view“ einenPunkt gutgeschrieben. Gutes Tutorial bedeutet alsozwangsläufig jede Menge Punkte für den Autor. Einabsolut gerechtes System. Auch könnt ihr mittlerweile3 Mal am Tag eure Tagespunkte absahnen, jeweilsalle 8 Stunden 5 Punkte. Das ist das Dreifache dessen,was zuvor möglich war. Weiterhin gibt es zahlreicheMöglichkeiten, euer Punktekonto zu befüllen, klickt dazueinfach mal auf euren eigenen Punktestand rechtsoben, schon seht ihr eine Liste, wofür es Punkte gibt.Stefan tüftelt natürlich das ganze Jahr über daran, denAufenthalt im Portal so komfortabel und angenehmwie möglich zu machen - und ich sage euch eines:Solange die Technik weiter pulsiert, werden auch unsdie Baustellen nicht ausgehen.Im Januar 2014 haben wir vor, dem Forum eine neueSoftware zu geben, ebenso wollen wir das responsiveDesign der Seite noch einmal überarbeiten. Pascalarbeitet aktuell daran, den Shop von PSD-Tutorials.deaufzufrischen mit einem neuen Facelifting und neuenFunktionen (beispielsweise mehr Zahlungsmöglichkeiten).Viele interne Gespräche sind hierzu schon geführtworden und wir sind alle gespannt, wann wir mit derneuen Shop-Version online gehen können. Was hatsich aktuell im Shop inhaltlich getan? Einige neue Trainingskamen in den letzten 12 Monaten hinzu: Composingsin Photoshop, Camera Raw, Contao, Dreamweaver,Formulare im Web, TYPO3 und WordPress vol.2. Ebenso auch neue Trainings für CINEMA 4D.Eine Vielzahl der bestehenden Trainings wurde unterdessenauch schon mit kurzweiligen Trailern bestückt,sodass ihr in max. 80 Sekunden einen visuell attraktivenÜberblick erhaltet, was euch in den Lehrinhaltenerwartet. Die Gestaltung der Trailer entstammt StefansArbeit und wurde mit der Compositing- und AnimationssoftwareAdobe After Effects bearbeitet.22PSD-Tutorials.de COMMAG 12 | 13

Titel© © Tom T.Köhler / Agentur AbendfarbenPSD-Tutorials.de als SponsorEbenso ist unser Label PSD-Tutorials.de 2013 stark alsSponsor unterwegs gewesen. Es geht vor allem darum,das Engagement der Veranstalter von derlei umfangreichenVor-Ort-Events tatkräftig zu unterstützen.Mittlerweile sind wir ein gern gesehener Partner vonzahlreichen InDesign User Groups und fördern dieIDUG Berlin, Hamburg, München und Rhein / Main.Auch für die PUBKON13 in Berlin, die MaF Conventionin Saarbrücken, das DPK-BootCamp sowie die Medialein Hamburg konnten wir uns als Medienpartner undSachpreissponsor gut aufstellen.Die Gewinner unserer Lern-DVDs auf der IDUG HamburgGo 4eck Media, go!Wie ihr wisst, schlagen unter der Brust unserer Aktivitätenzwei Herzen. Stefan brennt für PSD-Tutorials.de,Matthias hingegen liebäugelt immerzu mit der Erweiterungunseres Wirkens in Richtung Agenturgeschäftund hat die Agentur bereits 2010 gegründet. Das istjetzt 3 Jahre her. Und 3 Jahre sind in unserer Brancheeine lange Zeit, zumal sich Trendwenden schnell überNacht ergeben. Irgendwann kam dann der Zeitpunkt,wo wir das zarte Himmelblau und die Origamifigurenauf unserer alten Seite nicht mehr sehen konnten. Deshalbwünschte sich Matthias für unsere Agenturseitewww.4eck-media.de ein Redesign. Der Auftritt sollteim frischen und modernen Look gehalten sein. Undwie der Trend so ist, sollte alles auch etwas „flacher“werden. Also nahm unser Designer Dennis das ProjektUnsere Agenturseite im neuen Look & Feel„Relaunch“ in Angriff und begann zu scribblen und zuentwerfen, um Aufbau, Elementanordnung, Strukturund Navigation etwas minimalistischer zu definieren.Umgesetzt wurde die Seite wieder in WordPress undwir hatten allesamt noch einmal alle Hände voll zu tun,die Seite im Sinne der Tonality zu optimieren und vielekleine Bugs ins Jenseits zu katapultieren. Auch ganzneu ist unser Agenturtrailer auf der Startseite, bei demMatthias seinen Einstieg in die Arbeit mit After Effektsgab. Es sollte uns möglichst gut charakterisieren undzum Ausdruck bringen, wer wir sind, was wir könnenund warum wir ein kompetenter Partner sind. Eine witzigeGeschichte gibt es zum weichgezeichneten Hintergrund.Dabei handelt es sich um die Stadt Warenan der Müritz, in der Matthias lebt und arbeitet. Wirkonnten uns einfach nicht zwischen zwei unterschiedlichenFotoaufnahmen von Waren entscheiden. Eineswar eine Aufnahme bei Tag, die andere bei Nacht. DieLösung: Um 18:00 Uhr wechselt das Bild mit dem selbenMotiv vom Stadthafen.Ich hatte euch ja erzählt, dass die Agentur noch sehrjung ist, PSD-Tutorials.de hingegen über 10 Jahre aufdem Rücken hat. Unsere Agentur ist Zeugnis dessen,dass die Lerninhalte und das konsequente Fortbildeninnerhalb unseres Portals auch für Seiteneinsteiger undAutodidakten sehr gut funktioniert. Stefan ist eigentlichgelernter Bürokaufmann und kam zu Photoshopüber eine Fortbildung zum Webdesigner. Matthias‘Dresscode unterschied sich früher kaum von dem seinerArbeitskollegen. Nur das Rangabzeichen auf denSchultern (zwei Silbersternchen) und der Gesichtsaus-23PSD-Tutorials.de COMMAG 12 | 13

Titeldruck machten den Unterschied - er war nämlich beider Polizei. Auch ich habe ursprünglich einmal eineAusbildung als Bankkaufmann abgeschlossen. Interessantist, dass sich unsere beiden Chefs aus PSD-Tutorials.deauch immer die Leute rausgefischt haben,die bereichernd für Agentur und Portal gleichermaßensind. Und so haben wir mit Pascal und Dennis zweiausgebildete Mediengestalter und mit Marie und Serenazwei Geisteswissenschaftlerinnen im Team, diemittlerweile unentbehrlich geworden sind, um die hoheQualität im Portal sicherzustellen - auch wenn dasMeiste für die User einfach nur im Hintergrund läuft.Neues Logo und MarkeneintragungAm 13.12.2012 haben wir ein neues Logo bei uns eingeführt.Es orientiert sich wieder am Schmetterling,diesmal ist es etwas dynamischer und passt gut in dieheutige Zeit. Den Hintergrund des Logo-Relaunchskennen sicher die wenigsten: Ein anderes bekanntesUnternehmen mit Schmetterling als Logo hatte unsüber ihre Patentanwälte mit rechtlichen Schritten gedroht.Stefan und Matthias blieben standhaft und wolltenden Logostreit vor Gericht ausfechten lassen undschickten ihre Anwälte zur Klärung.Ende vom Lied war, dass die gegnerischen Anwälteeinen Rückzieher gemacht haben - vielleicht auch,weil im deutschen Patent- und Markenamt über 300Schmetterlinge als Bildmarke eingetragen sind. Undseit Oktober 2013 sogar eine Marke mehr - und zwardas Logo von PSD-Tutorials.de. Und mit dem neuenLogo wurde auch gleich PSD-Tutorials.de als Gemein-12/2012305.3411.947.3385.518.3081.5952.9162.10821.6262.8531.9282.399944unbekannt368.764* datenleichenbereinigtEreignisRegistrierte Mitglieder*ForeneinträgeUnique Visitors im JahrVideo-TrainingsTutorialsDownloadsFacebook-FansTwitter-FollowerGoogle+YouTube-AbonnentenContestsContestbilderAnzahl der TrainingsCommag-Leser derDezemberausgabe12/2013349.3692.121.2725.281.5462.3983.2872.46925.4542.9283.8064.4701.10812.574 (!!!)4611.081schaftsmarke (für Wort- und Bildmarken) im EU-Raumangemeldet und im Oktober dieses Jahres eingetragen.Das gibt PSD-Tutorials.de hoffentlich langfristigwieder ein Stück mehr Schutz vor rechtlichen Auseinandersetzungen.Für Zahlenjongleure - die Kennzahlen 2013Um ein wenig Einblick in die Entwicklung des Portals zugeben, möchte ich nun einen zahlenlastigen Rückblickriskieren. Im blauen Kasten oben könnt ihr anhand einigerDaten einsehen, was sich in den letzten 12 Monatenalles getan hat. Manches ging hoch, anderes sackteab. Social Media hat einen großen Teil der webbasiertenInteraktion mit Gleichgesinnten übernommen. Dasspüren freilich auch wir. Dennoch können wir unsereStellung als E-Learning-fokussiertes Forum und Portalbehaupten und weiter ausbauen. Mal sehen, wie sichdas Ganze nächstes Jahr entwickeln wird.Contests über ContestsGanz spannend finde ich ja auch immer die Contests,die unter dem Jahr stattfinden. Neben den regelmäßigenund wiederkehrenden Wettbewerben gab esauch einige Specials 2013 (nicht chronologisch):»»Bild im Duett 2»»6. + 7. Animierte GIF-Contests. Themen: Mensch &Tier und 1001 Nacht»»Männer vs. Frauen 2013»»8. 5D-Contest: Zeitmaschine»»Pic of the PETCh 2013»»Bannercontest für das Usertreffen 2014»»Diverse Smudgepainting-Contests. Hier gab es dieThemen: Mittelalter, Technik und Landschaften.Schuss in den Ofen: Ein Smudgepainting-Contestmusste während der aktiven Zeit sogar entnommenwerden, da wir von der Commag-Redaktion Mist gebauthatten. Durch die Wahl eines teilnehmendenBildes für das Commag-Cover im April wurde derSmudge-Löwe von Schnecke79 derart (und ungewollt)gepusht, dass das Votingergebnis absolut verfälschtwurde und wir uns selbst und den gesamtenWettbewerb disqualifizieren mussten.24PSD-Tutorials.de COMMAG 12 | 13

Titel©©Ungut: Contestdisqualifizierung mit einem LöwensiegerIch empfehle allen Interessierten, unsere Hall of Famezu besuchen, bei der ihr die Bestplatzierungen selbstin Augenschein nehmen könnt. Übrigens hat auch derBereich Contests im Commag einen neuen Namen erhalten.Hat‘s wer gemerkt? Lange Zeit trug diese Rubrikden Namen „Actioncheck“. Nun haben wir uns auf„Contests“ geeinigt, da dies doch aussagekräftiger ist.Zusammentreffen virtueller NaturDieses Jahr gab es leider kein großes Usertreffen. Dennochgab es zahlreiche Stammtische, die sich über dieGrenzen der Bundesrepublik hinaus etablierten. Wirklichgroßartig! Das letzte große Usertreffen fand imNovember 2012 in Berlin statt, und keine Angst, dasnächste ist auch schon geplant. Vom 09. - 11. Mai istdie Pilgerstätte für alle Portalfans und Freunde eröffnetund wir danken an dieser Stelle schon einmal vorab alleninvolvierten Personen, die an der Umsetzung arbei-ten. Hier sei angemerkt, dass keiner von den Admins,sondern ganz allein die User federführend bei der Organisationsind - großen Respekt an dieser Stelle. DerContest zum Banner hat auch schon einen glücklichenGewinner erkoren - siehe Bild (Urheber: patrick_l).Was für eine verrückte ReiseKein Zweifel - 2013 war ein facettenreiches Jahr undviel ist passiert. Bleibt nun zum Schluss noch die Vorweihnachtszeit,die wir uns alle redlich verdient haben.2014 steht auch schon vor der Türe und wir werdenalles daran setzen, euch weiterhin die Qualität und Inhaltezu bieten, die ihr von einem großen Grafik-, FotoundWebportal erwartet (Notiz am Rande: Der Claimist auch dieses Jahr entstanden). Unsere Schubladensind voll mit Plänen, Aktionen und Ideen für die nächsten12 Monate. Wir hoffen, dass wir dies mit euch gemeinsamerleben dürfen. Wir bedanken uns ebensobei euch allen für die konstruktiven Vorschläge undauch Kritiken, derer wir uns annehmen. Ebenso gilt unserDank ganz besonders dem unermüdlichen Moderatorenteam,das hier für Ordnung sorgt und immerzur Stelle ist, wenn‘s brennt. Wir sind auch weiterhinfür euer Feedback und Ideen offen und dankbar. PSD-Tutorials.de soll ein Platz zum Wohlfühlen sein - für unsalle. Euer Stefan.© vivi3 - the Future © Dobi78 - Warrior the last Heroes© © pixelmixtur - Do it yourself25PSD-Tutorials.de COMMAG 12 | 13

TippInterkulturelle BilderspracheEs ist doch immer wieder spannend, wie Menschen anderer Kulturen die Welt mit ganz anderen Augen sehen. Dass die Kommunikation aufsprachlicher Ebene bisweilen schwierig ist, weiß man. Aber auch Bilder werden gelesen, interpretiert und (miss-) verstanden. Gerade in derWerbung oder online kommt es bei unreflektiertem Gebrauch von Bildmaterial im internationalen Kontext zu heiteren Situationen - oderschlichtweg zum Flop eines Produkts im Ausland. Schaut euch diese (nachgestellten) Beispiele mal an - hättet ihr das gedacht?Serena© © javier brosch - Fotolia.com© © Oleg Gekman - Fotolia.com© © dvarg - Fotolia.comIst er nicht süß? Nein, ganz und gar nicht ...in Thailand. Ein deutscher Brillenhersteller floppte dortmit seiner Idee, die neue Sonnenbrillenkollektion aufBellos Schnauze zu präsentieren. Was hierzulande originellwirkte, kam bei den Kunden in Thailand gar nichtgut an. Hunde werden verachtet oder gelangen in dieKochtöpfe - und wer was auf sich hält, wird sich nichtmit Accessoires schmücken, die auf Hundeschnauzendaherkommen. Ähnlich in islamisch geprägten Ländern.„Zeigt her eure Füße, zeigt her eure Schuh!...“Aber nicht in arabischen und einigen asiatischen Ländern.Schuhsolen und nackte Füße gelten als unrein,ihr Zurschaustellen als Affront gegen den Betrachter.Länderflaggen auf mehrsprachigen WebsitesSchon mal daran gedacht, dass man den Nationalstolzder Einwohner mächtig verletzen oder gar heiklepolitische Statements von sich geben kann, indemman Flaggen für die Sprachversionen einer Websiteverwendet? Bei Israel, Belgien, der Schweiz, vielen afrikanischenund südamerikanischen Ländern ist es vielunverfänglicher, auf Flaggen zu verzichten und einheitlichdie hinterlegte Sprache auszuschreiben.26PSD-Tutorials.de COMMAG 12 | 13

Tipp""BesteNahrung fürIhr Kind!© © dimedrol68 - Fotolia.com© © DoraZett - Fotolia.comWerbung für BabynahrungDas Kind hat Hunger und weint. Dann bekommt es dieleckere Babynahrung von Hersteller XY und anschließendist es munter und zufrieden. Für uns liegt auf derHand: Das Produkt kaufen wir!Warum hat das Produkt trotz dieser einfachen und unmissverständlichenBotschaft den Markteintritt im arabischenSprachraum nicht geschafft?© © Viktorija - Fotolia.com© © DoraZett - Fotolia.comGanz einfach: Prozesse und Abläufe werden wie dieSchrift und Bilder in unserem Kulturkreis von linksnach rechts und von oben nach unten interpretiert.Die arabische Leserichtung führt den Blick aber genauentgegengesetzt, von rechts nach links. Undschon hinterlässt das Produkt nicht mehr den allerbestenEindruck.Eine unmissverständliche Geste?Wer hätte gedacht, dass diese unbedarfte Geste für„Spitze!“ und „Alles klar!“ in Nigeria und Australien alsvulgäre Beschimpfung interpretiert wird? Wer dort alsBackpacker ein Auto stoppen will, wird wohl etwaslänger warten ...Noch heikler wird es in der Türkei, denn dort könntedie Geste als Einladung zu homosexuellen Praktikenverstanden werden.FazitJedes Bild aktiviert die Konnotationen, die mit demGegenstand verbunden sind - und die können jenach Kontext von Mensch zu Mensch und natürlichauch von Kultur zu Kultur ganz unterschiedlich sein.Also Vorsicht!27PSD-Tutorials.de COMMAG 12 | 13

Christian Gerth - Eine Welt voller kreativer Fantasien

InterviewChristian Gerth: Fantasien ohne GrenzenOb als Fotomontage, Mattepainting oder komplett gezeichnetes Bild, mit viel Liebe zum Details erschafftChristian Gerth fantastische Bilder. Den Hauptteil seiner Arbeiten bilden dabei monumentaleLandschaften und Architektur weit ab der Realität. Im Interview gibt uns heute der Schweizer einen kleinenEinblick in seine kreative Welt.• Commag: Hallo Christian, oder, wie man bei euchin der Schweiz sagt: „Grüezi“. Ich freue mich, heutemal jemanden aus unserem Nachbarland interviewenzu dürfen, und bin schon gespannt darauf, einenEinblick in deine kreative Arbeit zu bekommen.CG: Vielen Dank! Ich freue mich auf deine interessantenFragen. Oftmals wird man sich über seine Bilderund deren Arbeitsweise erst richtig bewusst, wennman darauf angesprochen wird.• Commag: Bevor wir uns auf deine kreative Arbeitmit Photoshop stürzen, erzähl uns doch kurz etwasüber dich. Was machst du so, wenn du mal geradenicht eine monumentale Landschaft erschaffst?CG: Ich arbeite als Grundschullehrer in Zürich undhabe eine Familie mit zwei kleinen Kindern. Du siehstalso: Ich hätte eigentlich gar keine Zeit für Photoshop.Jedoch brauche ich gerade bei der herausforderndenArbeit mit Kindern einen eher ruhigeren Ausgleich.Den ich mit dem Kreieren von digitalen Bildern bestensgefunden habe.• Commag: Man braucht schon sehr viel künstlerischesTalent, um solche Bilder wie du zu erschaffen.Hattest du schon immer diese kreative Ader oderhast du dir das alles erst nach und nach erarbeitet?CG: Kreativ war ich eigentlich schon als Kind. Jedocheher unterschwellig in Schulheftern oder auf Zetteln,sodass ich nicht auf eine große Galerie zurückgreifenkonnte. Meine Kreativität kam vor allem auch in derMusik zum Tragen, welche ich seit über 25 Jahren regelmäßigpraktiziere. Erst mit der Fotografie bin ichwieder zurück zum bildnerischen Gestalten gekommen,wobei ich relativ schnell gemerkt hatte, dass ichnoch mehr mit den Fotos machen wollte. Den erstenKontakt mit Photoshop hatte ich, als ich für unsereSchule eine Website erstellen durfte. Jedoch war esschon zu dieser Zeit „learning by doing“ und dies istes bis heute geblieben. Wobei ich bis heute der Meinungbin, dass Photoshop nur das Werkzeug ist unddie eigentliche Arbeit immer noch selber getan werdenmuss. Ein weiterer Punkt ist auch, dass ich optischsehr an unserer Umwelt interessiert bin. Ich beobachtegerne Lichteffekte oder Stimmungen und probiere,dies dann auch digital umzusetzen.• Commag: Dein Repertoire reicht ja von der reinenFotomontage über Mattepainting bis hin zuChristian Gerthausschließlich gemalten Bildern. Gibt‘s da etwas,was dir am ehesten liegt, oder steht zu Beginn einesBilder noch gar nicht so richtig fest, ob es jetztein reine Fotomontage wird oder in Richtung Mattepaintinggeht?CG: Da ich bei meinen Arbeiten fast immer frei bin,möchte ich mich auch nicht für eine Methode entscheiden.Vielmehr arbeite ich nach dem Lustprinzip.Jedoch starte ich bei allen Techniken zuerst mit einemKonzeptbild. Dies hilft mir, auf schnelle Art und WeiseBildaufbau, Formen, Farben und Licht zu definieren.Egal, was ich nun daraus mache, ob es ein reines Paintingoder ein Composing mit vielen Fotostrukturenwird, wenn das Konzept in sich stimmt, wird auch das30PSD-Tutorials.de COMMAG 12 | 13

Interview„Oasis City“, welches dich über 50 Stunden gekostethat. Wie motivierst du dich über einen so langenZeitraum, solch ein Projekt durchzuziehen?CG: Da ich nur wenig Zeit pro Woche oder Tag in dieseBilder reinstecken kann, genieße ich auch dementsprechendjede Minute davon. Oder anders gesagt,entsteht so auch nicht das Gefühl der Langeweile.Sollte ich mal keine Lust haben, so lasse ich denComputer einfach abgestellt. Wie ich bereits weiteroben geschrieben habe, verwende ich für alle Bilderimmer ein Konzeptbild. Dies habe ich auch für „OasisCity“ gemacht. Wenn dies erst mal steht, braucht esmeistens nur noch ein paar Schritte, bis ich zum Punktkomme, wo ich das Bild bis zum Ende fertig machenmuss. Dies tönt vielleicht noch etwas absurd, aber fürmich hat jedes Bild einen „Point of no Return“. In derEntstehungsphase bekomme ich oft Zweifel, ob ichmeine Ideen umsetzen kann oder ob die Wirkung sowirklich gut ist. Aber irgendwann kommt dann derMoment, bei dem ich merke, dass es funktioniert, unddies ist dann auch der Punkt, bei dem ich das Projektdurchziehe, selbst wenn es 60 Stunden dauern sollte.• Commag: Ich komme noch mal auf dein Bild „OasisCity“ zurück. Im Making-of dazu sieht man schätzungsweisean die 300 Stockfotos und Texturen, diedu für die Erstellung des Bildes verbaut hast. Woherholst du dir das Ausgangsmaterial, oder bist du sogarselbst als Fotograf unterwegs?Oasis CityCG: Ich bin selbst viel gereist und kann auf ein großesArchiv von Bildern zurückgreifen. Jedoch brauche ichfür bestimmte Ideen auch spezifische Stockfotos oderbesser gesagt Texturen. Bei „Oasis City“ war ich daraufangewiesen gewesen, möglichst viele verschiedenartigeAnsichten von Hochhäusern zu haben. Natürlichhätte ich in meinem Archiv schon ein paar gehabt,aber die Arbeit wurde mir erheblich erleichtert, wennder Blickwinkel gerade auf die Häuser ist. Und dafürverwende ich sehr gerne Texturen von cgtextures.com. Diese tolle Website bietet unzählige Fotos an,welche genau diese Eigenschaft haben und somitauch die nötige Qualität hervorbringen. Ich habe dortein Abo und bereue es bis heute nicht. Zudem habeich auch kein schlechtes Gewissen dabei, Stockfotosin meinen Bildern zu verwenden, zumal ich meistens32PSD-Tutorials.de COMMAG 12 | 13

InterviewComposing ein 3D-Modell zu erstellen?CG: Nein, ganz im Gegenteil. Falls bei einem Bild diePerspektive nicht korrekt ist, merken selbst Leute, welchemit Fotografie nichts am Hut haben, dass irgendetwasnicht stimmt. Natürlich kann man Hilfslinien einfügenund mit verschiedensten Fluchtpunkten auch einesaubere Perspektive konstruieren, jedoch wird dieseselbst bei einfachen Motiven sehr schnell aufwendig.Mit Gratisprogrammen wie Sketchup ist es ein Kinderspiel,in wenigen Minuten ein einfaches Blockmodellzu erstellen, es zu beleuchten und mit einem Alphakanalin Photoshop als Ebenen einzufügen. Diese könnennun beliebig nochmals transformiert werden, ohne dieGesamtperspektive des Bildes zu zerstören. Zudemkann man so auch zusätzliche Elemente perspektivischkorrekt hinzufügen.Diese Arbeitsweise verwende ich aber nur bei Motiven,bei denen die Architektur eine wichtige Rolle spielt.Bei Bildern mit einem hohen Landschaftsanteil reichenmeist die Horizontlinie und ein paar Fluchtpunkte vollkommenaus.Green Valleynur wenige Bereiche einer Struktur benötige undnicht ganze Motive, welche in vielen anderen Bildernbereits verwendet wurden.• Commag: Ich hab jetzt schon des Öfteren gesehen,dass du dir zu Beginn eines Composings eineArt 3D-Skizze anlegst und die dann nach und nachmit Texturen und Stocks auffüllst. Ist das nicht sehraufwendig und zeitintensiv, vor dem eigentlichen• Commag: Viele deiner Publikationen in diversenFachzeitschriften sind ja Workshops, in denendu erklärst, wie deine Bilder entstehen. Entstehendeine Bilder im Rahmen von Auftragsarbeiten odersind das eher alles freie Arbeiten?CG: Fast alle Bilder von mir entstehen als freie Arbeiten.Hie und da kreiere ich auch Konzertflyer oderBuchcover, welche dann bestimmte Ideen beinhaltenmüssen. Oder ich mache bei Wettbewerben mit, beiwelchen gewisse Stockfotos verwendet werden sollten.Bei Publikationen ist es meistens so, dass michein Magazin anfragt, ob ich gerade ein Bild für einenallfälligen Workshop hätte. Ist dies der Fall, so kannich sofort loslegen. Ansonsten bin ich auch bereit, einneues zu machen, bei welchem ich aber bei der Ausführungwieder frei bin.33PSD-Tutorials.de COMMAG 12 | 13

InterviewMonster Stories• Commag: Obwohl du dir dein Können selbst beigebrachthast und auch erst seit vier Jahren intensivmit Photoshop arbeitest, hast du ja doch schon einenenormen Bekanntheitsgrad unter den Bildbearbeiternerlangt. Würdest du uns einen kleinen Tippfür deinen Erfolg verraten?CG: Uff, das ist eine schwierige Frage. Sicherlich warich zur richtigen Zeit am richtigen Ort. Aber genauso""Ich probieregerne den Spagat vonFantasie und Realitätvoll auszureizen ...Golden Valleywichtig erscheint mit, dass man etwas macht, was esnicht bereits schon überall gibt. Nur so wird man wirklichbeachtet. Ich habe meine Anfänge bei der Fotocommunitygemacht. Dies auch, weil ich zuerst mit Fotografiebegonnen hatte. Meine Composings wurdendort relativ schnell bekannt, weil sie sich einfach etwasvom Rest abgehoben haben. Dies mag vielleicht etwasarrogant tönen, aber ein Bild, in das man 30 Stunden34PSD-Tutorials.de COMMAG 12 | 13

InterviewMagic WoodHerzblut steckt, kommt einfach anders rüber als eine30 Minuten-Spaßbastelei. Danach kamen dann schonbald Anfragen von Magazinen. Wenn man nicht unterZeitdruck steht, sollte man sich so viel Zeit für seine Bildernehmen. Zudem wird man nicht entdeckt, wennman einfach die Ideen und Techniken der bekanntenPhotoshopkünstler versucht abzukupfern. Vielmehrsollten sie als Inspiration für eigene Stile dienen.• Commag: So, Christian, wir sind schon am Endeunseres kleinen Interviews, ich danke dir, dass duuns einen kleinen Einblick in deine kreative Weltgegeben hast. Ich weiß, dass du einen kleinen Youtube-Kanalhast und auch in anderen Foren rechtaktiv bist. Erzähl uns doch noch kurz, wo unsereLeser noch mehr deiner Bilder finden können. Unddamit überlasse ich dir die letzten Worte und dieChance, noch etwas Werbung für dich zu machen.CG: Vielen Dank auch an euch, dass ich euch diesenEinblick in „meine Welt“ gewähren durfte.© © Sämtliche Bildrechte der hier gezeigten Werke / Grafikenliegen bei Christian GerthChristians Werke könnt ihr auch auf denfolgenden Seiten bewundern:www.christiangerth.chwww.facebook.com/gerth.christianwww.christiangerth.deviantart.comwww.youtube.com/user/chgerth/videoswww.fotocommunity.de/...35PSD-Tutorials.de COMMAG 12 | 13

How-to{CSS}{less}Dynamischer CSS-Workflow - Ein kleiner Exkurs in LESS36PSD-Tutorials.de COMMAG 12 | 13

How-toLESS - dynamische Erzeugung von CSS-CodeIm Webdesign-Workflow gibt es immer wieder Herausforderungen, denen man sich stellen muss. Insbesondere im Bereich CSS, wo man viele Zeilen Code zuschreiben hat, kann es schon mal passieren, dass man keinen Überblick mehr hat. Das Ärgerlichste ist vor allem, wenn man einen Farbwert ändern möchte, derwiederum mehrmals vorkommt. Die Folge: Man muss Zeile für Zeile nach sämtlichen Stellen absuchen, wo eben dieser Farbwert vorhanden ist. Das ist nicht nur nervenraubendbzw. demotivierend, sondern verlangsamt auch den Workflow. Und dann sitzt man verzweifelt vor dem Monitor und es scheint kein Ende in Sicht zu sein- möchte man meinen! Denn dank LESS ist es nun möglich, CSS Code dynamisch zu erzeugen und spätere Änderungen schneller vorzunehmen. Was diese mächtigeScriptsprache kann und wie man sie einsetzt, erfährt ihr auf den folgenden Seiten. Von Stavros Vlahopulos.© © Alexis Sellier 2010-2013Das offizielle LESS-LogoWas ist LESS und wozu benötigt man es?Wahrscheinlich werden die wenigsten oder wirklichnur versierte Webdesigner von diesem Begriff gehörthaben. Dabei gibt es diese „Scriptsprache“ schon seitdrei Jahren und sie wird fortwährend weiterentwickelt.Bei LESS handelt es sich um eine CSS-Erweiterung, diees ermöglicht, bestimmte Werte (wie z.B. Farbcodes,Pixelwerte) in Variablen auszulagern und mithilfe vonOperationen sowie Funktion zu modifizieren, um sieam Ende an geeigneter Stelle im CSS-Code einzusetzenund später abzuändern.Möchte man beispielsweise eine Webseite erstellen,wo der Header, die Headline oder sonstige Elementeein und dieselbe Farbe besitzen sollen, kann man mithilfevon LESS einen einzigen Farbwert in eine Variableauslagern und jene Variable dann im normalen CSS-Code einfügen. Das hat den entscheidenden Vorteil,dass man nun diesen Farbwert nur in der Variablenverändern muss, anstatt Zeile für Zeile die CSS-Dateinach einem mehrmals vorkommenden Farbwert zudurchsuchen. An dieser Stelle soll ein kleines Beispielangeführt werden, welches den Einsatz von LESS verdeutlichensoll.Gehen wir mal davon aus, dass wir folgenden CSS-Code geschrieben haben:header {background:#123456;}h1 {color:#123456;}Wir haben hier an dieser Stelle den Header und dieHeadline (wie im obigen Beispiel beschrieben) mitderselben Farbe ausgestattet. Wir möchten allerdingsden Farbwert dynamisch ausgeben und in eine Variableauslagern. Das machen wir, indem wir eine VariableVOR der Formatierung des CSS-Codes folgendermaßendefinieren:@farbe: #123456;Wie hier schon ersichtlich ist, definieren wir eine Variablemit einem @-Zeichen, wo im Anschluss der Nameder Variable folgt. In diesem Beispiel haben wir unsereVariable mit dem Namen „farbe“ versehen. Eine Variableendet immer mit einem Semikolon.Doch wie lässt sich diese Variable nun im CSS-Codeeinbinden? Die Lösung ist simpel, denn anstelle desFarbwerts, den wir im HEADER und unserer Headlineeingetragen haben, tragen wir ganz einfach die Variable@farbe ein und können somit wieder unserenFarbwert ausgeben:37PSD-Tutorials.de COMMAG 12 | 13

How-to@farbe: #123456;header {background:@farbe;}h1 {color:@farbe;}Wie man aus den oben zu sehenden Code-Zeilenentnehmen kann, behandelt man eine Variable so, alsob sie zum normalen CSS-Code dazugehören würde.LESS unterscheidet sich also nur minimal von normalemCSS, da es (wie bereits erwähnt) eine dynamischeErweiterung ist. Allerdings muss man wichtige Dingebeachten, wenn man LESS in seinen Workflow mit aufnehmenmöchte. Denn im Gegensatz zu normalemCSS könnt ihr nicht ohne Weiteres Variablen in eurerCSS-Datei definieren. Ihr werdet ansonsten eine zerschosseneSeite vorfinden, mit der ihr nichts anfangenkönnt, womit wir beim nächsten Schritt wären.Wie binde ich LESS ein?LESS in HTML bzw. CSS einzubinden ist an sich keinegroße Herkules-Aufgabe. Alles, was wir dazu wissenmüssen, liefert uns die offizielle deutschsprachigeLESS-Seite lesscss.de.Die Seite verrät uns, dass wir LESS mithilfe von Javascriptoder PHP einbinden können. Hier stellt sichdie Frage, welche Methode sich besser eignet. Javascripthat den Vorteil, dass kein Apache-Server vonnötenist und besser für die Performance ist. Allerdingslesscss.de ist die offizielle deutschsprachige LESS-Referenz und bietet einen umfassenden Überblick zur CSS-Erweiterung.kann es auch durchaus mal vorkommen, dass einigeUser Javascript deaktivieren. Somit wäre alles für dieKatz. Hier wäre wiederum PHP zu empfehlen, da dieseScriptsprache serverseitig ist und der User somit auchbei deaktiviertem Javascript in den Genuss von LESSkommen kann. Wer sich für die Javascript-Methodeentscheidet, sollte sich die dazugehörige less.js-Dateiherunterladen. Hier solltet ihr beachten, dass ihr eureStylesheet-Datei VOR der less.js-Datei einbindet, dadie Javascript-Datei ansonsten euren LESS-Code nichtkompilieren kann.Eure LESS-Stylesheet-Datei bindet ihr standardmäßigwie folgt ein:Die rot markierten Attribute sind hier nun besondersvon Bedeutung, welche bei LESS wiederum den großenUnterschied machen.38PSD-Tutorials.de COMMAG 12 | 13

How-toDenn im Gegensatz zu CSS muss bei LESS für „rel“ „stylesheet/less“und für „href“ wiederum „styles.less“ eingetragenwerden. Ihr müsst also eure CSS-Datei in eineLESS-Datei umwandeln. Doch keine Panik. Eure CSSöffnet ihr einfach im herkömmlichen Text-Editor, klicktauf „Datei>Speichern unter...“, speichert die Datei mitdem Datei-Typ „Alle Dateien“ und tragt als Endung„.less“ in euren Datei-Namen ein.Im Anschluss muss nur noch die JavaScript-DateiNACH der LESS-Datei eingebunden werden:Und schon habt ihr mittels Javascript LESS integriert.Wenn ihr eure LESS-Datei lieber mit PHP einbindenwollt, solltet ihr euch die lessphp-Datei von leafo.netherunterladen. Extrahiert die Datei (z.B. mit 7z) undpackt die Datei „less.inc.php“ in das Verzeichnis euresServers, wo sich auch eure PHP- und LESS-Dateien befinden.Wichtig ist, dass ihr keine „index.html“, sonderneine „index.php“ habt, da ansonsten die Kompilierungnicht funktionieren wird. In der PHP-Datei müsst ihrnämlich folgende Zeilen in euer Dokument eintippen:Die lesscphp.inc-Datei eignet sich für jene, die LESS gerne via PHP einbinden und kompilieren lassen möchten.Hierbei sollen die einzelnen Anweisungen erklärt werden:require "lessc.inc.php";Sorgt dafür, dass die lessc.inc-Datei eingebunden wird.$less = new lessc;Initialisiert LESS.$less->checkedCompile(„styles.less“, „output.css“);Prüft, ob die Datei „styles.less“ vorhanden ist, und kompiliertsie zur Datei „output.css“, welche wiederum einenormale CSS-Datei ist.Natürlich kann man im letzten Code auch entscheiden,wie man seine LESS-Datei benennen möchte. Siemuss also nicht zwangsweise „styles.less“ heißen. Siekann auch beispielsweise „css.less“ heißen. Dementsprechendmüsst ihr auch im Code „css.less“ als eureLESS-Datei angeben, da diese ansonsten nicht ausfindiggemacht werden kann und nach einer Datei gesuchtwird, die im Prinzip gar nicht existiert. Wichtigist, dass ihr die Datei „output.css“ einbindet, da dieseanschließend aus der „styles.less“ generiert wird undden wesentlichen CSS-Code beinhaltet.39PSD-Tutorials.de COMMAG 12 | 13

How-toEin einfaches Praxisbeispiel mit JavascriptNatürlich sind die vorherigen Seiten sehr viel graueTheorie und ohne Praxisbezug schwer verständlich.Daher soll an dieser Stelle ein kleines Beispiel angeführtwerden. Wir möchten uns ein kleines Gerüst in HTML5aufbauen. Dieses Gerüst soll zeigen, wie einfach es seinkann, eine Seite, welche mit HTML5 und CSS3 erstelltworden ist, zu einer Seite umzuwandeln, welche LESSunterstützt. Ihr benötigt lediglich einen Editor, der HT-ML5 und CSS3 Syntax-Highlightning unterstützt. Ichpersönlich würde euch Adobe Dreamweaver, SublimeText oder Blue Griffon ans Herz legen. Diese Editorenhaben sich als sehr nützlich bei der Webseitenerstellungerwiesen und erleichtern euch den Workflow umeiniges.Wenn ihr euch für einen Editor entschieden und dieseninstalliert habt, erstellt ihr ein neues HTML-Dokument.Löscht alle Angaben aus diesem Dokument undersetzt diese durch die rechts stehenden Angaben.Wenn ihr soweit den Inhalt eingefügt habt, könnt ihrdiese Datei als „index.html“ speichern.Soweit ist das Ganze noch nichts Besonderes, da essich bei diesem Dokument um ein reines HTML-Dokumenthandelt, das noch gar keine Style-Informationenenthält. Das liegt natürlich hauptsächlich daran, dassdie Datei „style.css“ noch nicht existiert und die Seiteim Browser natürlich relativ unschön aussieht. Umdie Datei „style.css“ werden wir uns entsprechend imnächsten Schritt kümmern.Mein HTML-DokumentMeine WebseiteHomeÜber uns...Willkommen auf unserer WebseiteTest Test TestMeine SidebarLorem ipsum dolor sit amet, consetetur sadipscingCopyright 2013 meine-webseite.de40PSD-Tutorials.de COMMAG 12 | 13

How-toWir erstellen in unserem Editor eine CSS-Datei undkopieren die unten stehenden CSS-Angaben und fügensie in den Editor ein. Somit hätten wir auch derDatei „index.html“ die nötigen Formatierungen gegebenund können uns das Ergebnis im Browser kurz anschauen.Wir stellen fest: Header, Headline und Footerhaben dieselbe Farbe und auch der Hintergrund desContent-Bereiches, die Navigation sowie die Schrift an* {margin:0; padding:0;}body {font-family: ‚Source Sans Pro‘, sans-serif; font-size: 0.875em; font-weight:300; color:#333;background:#fff;}.container {max-width:960px; margin:auto;}header {width:auto; height:170px; background:#2980b9; clear:both;}header #logo {font-family: ‚Alex Brush‘, cursive; font-size: 5em; font-weight:300; padding:26px 0 0 0;}header #logo a {text-decoration:none; color:#fff;}header #hauptnavi {text-transform:uppercase; margin:0; margin-top:20px;}header #hauptnavi li {display:inline; padding: 0 15px;}header #hauptnavi li:first-child {padding-left:0;}header #hauptnavi li:last-child {padding-right:0;}header #hauptnavi li a {font-size:1.2em; color:#fff; text-decoration:none;}#hauptinhalt {float:left; max-width:600px; padding: 20px 0 47px 0;}#hauptinhalt h2 {font-weight:300; font-size: 3em; color:#2980b9;}#hauptinhalt p {margin-top:10px; line-height:1.6;}#sidebar {float:right; max-width:300px; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px;background:#339de3; height:300px; color:#fff;}#sidebar h2 {font-weight:300; font-size:2.1em;}#sidebar p {margin-top:10px; line-height:1.6;}footer {background:#2980b9; color:#fff; text-align:center; padding:20px 0;}.clearfix:before,.clearfix:after {content: „ „; /* 1 */display: table; /* 2 */}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}der Sidebar haben eine einheitliche Farbe. Wir habenalso den vorhin erwähnten Fall, wo bestimmte Angabenmehrfach vorkommen. Nehmen wir an, wir entscheidenuns für eine andere, einheitliche Farbe, dannwäre es doch ärgerlich, wenn wir das Zeile für Zeile tunmüssten. Deshalb kommt an dieser Stelle LESS zumTragen, weil jetzt unsere Farben in eine Variable auslagenkönnen. Schauen wir uns aber doch erst mal an,welche Farbangaben wir überhaupt haben. Für diesenFall wurden die mehrfach vorkommenden Farben rothervorgehoben. Es handelt sich hierbei um einen Blautonmit dem Hexadezimalwert #2980b9 und natürlichWeiß mit dem Wert #fff. Diese Farbwerte speichern wirjetzt in eine Variable. Dazu öffnen wir unsere CSS-Dateiin unserem HTML-Editor und speichern diese alsDateitypen „alle Dateien“ oder „all Documents“ mit derEndung „.less“. In diesem Beispiel können wir die Dateieinfach „style.less“ nennen. Nun haben wir schonunsere LESS-Datei erstellt. Wir öffnen diese - falls nichtschon geschehen - in unserem Editor und definierenin unseren ersten Zeilen die Variablen „@blau“ und „@weiss“, wodurch der übrige CSS-Code natürlich etwasweiter nach unten rutscht. Diese definieren wir (wieam Anfang des Artikels beschrieben) folgendermaßen:@blau: #2980b9;@weiss: #fff;Wie am Anfang schon erwähnt, werden Variablen miteinem @-Zeichen vor dem Namen gekennzeichnetund enden dann mit einem Semikolon.41PSD-Tutorials.de COMMAG 12 | 13

How-toDoch mit diesen Variablen soll es nicht getan sein.Wenn wir unsere CSS-Datei nämlich genauer anschauen,sehen wir, dass unsere Seite eine Weite von 960 Pixelnhat. Soweit ist das jetzt nichts Weltbewegendes,aber wenn man bedenkt, dass man auch im Laufe derZeit seine Weite von 960 Pixeln auf 1140 Pixeln ändernmöchte, dann wäre es auch im Falle der Seitenbreiteratsam, eine Variable zu definieren, um in der LESS-Datei nicht ständig nach der Weitenangabe suchenzu müssen. Wenn jedoch die Weite verändert wird,hat das natürlich auch auf einen Einfluss auf den Content-und Sidebar-Bereich. Bedeutet: Es müssen auchVariablen für diese beiden Bereiche definiert werden.Wir möchten daher die Variablen „@container“ für dieSeitenbreite, „@hauptinhalt“ für den Content-Bereichund „@sidebar“ für den Sidebar-Bereich definieren. „@container“ soll hier eine Weite von 960 Pixeln haben,während bei „@hauptinhalt“ 360 Pixel von „@container“abgezogen wird. „@sidebar“ hat wiederum die halbeWeite von „@hauptinhalt“. Klingt alles sehr verwirrend,doch im Code sieht es sehr einfach aus:@container: 960px;@hauptinhalt: @container - 360px;@sidebar: @hauptinhalt / 2;Was fällt auf? Wir können Variablen in andere Variablenintegrieren und Berechnungen durchführen. Wirwollen natürlich, dass unsere Variablen funktionierenund ergänzen unsere CSS-Angaben wie es rechts rotgekennzeichnet ist.@blau: #2980b9;@weiss: #fff;@container: 960px;@hauptinhalt: @container - 360px;@sidebar: @hauptinhalt / 2;* {margin:0; padding:0;}body {font-family: ‚Source Sans Pro‘, sans-serif; font-size: 0.875em; font-weight:300; color:#333;background:@weiss;;}.container {max-width:@container; margin:auto;}header {width:auto; height:170px; background:@blau; clear:both;}header #logo {font-family: ‚Alex Brush‘, cursive; font-size: 5em; font-weight:300; padding:26px 0 0 0;}header #logo a {text-decoration:none; color:@weiss;}header #hauptnavi {text-transform:uppercase; margin:0; margin-top:20px;}header #hauptnavi li {display:inline; padding: 0 15px;}header #hauptnavi li:first-child {padding-left:0;}header #hauptnavi li:last-child {padding-right:0;}header #hauptnavi li a {font-size:1.2em; color:@weiss; text-decoration:none;}#hauptinhalt {float:left; max-width:@hauptinhalt; padding: 20px 0 47px 0;}#hauptinhalt h2 {font-weight:300; font-size: 3em; color:@blau;}#hauptinhalt p {margin-top:10px; line-height:1.6;}#sidebar {float:right; max-width:@sidebar; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px;background:lighten(@blau, 12%); height:300px; color:@weiss;}#sidebar h2 {font-weight:300; font-size:2.1em;}#sidebar p {margin-top:10px; line-height:1.6;}footer {background:@blau; color:@weiss; text-align:center; padding:20px 0;}.clearfix:before,.clearfix:after {content: „ „; /* 1 */display: table; /* 2 */}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}42PSD-Tutorials.de COMMAG 12 | 13

How-toKommen nun wieder zurück zu unserem Praxisbeispiel.Wir haben auf der letzten Seite unsere LESS-Dateikomplettiert. Wir wollen natürlich auch, dass siefunktioniert. Deswegen laden wir uns die less.js-Dateiaus der offiziellen LESS-Seite herunter und verschiebensie in das entsprechende Verzeichnis. Nun müssenwir entsprechende Änderungen an unserer „index.html“-Datei vornehmen, damit LESS endlich zum Tragenkommt. Dazu öffnen wir unsere HTML-Datei undgehen zur Zeile, wo wir unsere ursprüngliche „style.css“-Datei eingebunden haben. Diese löschen wir nunund fügen stattdessen folgenden Code ein:Eine mit LESS gestaltete Seite unterscheidet äußerlich kaum von normalen Seiten, da LESS in CSS kompiliert wirdEuch wird sicherlich aufgefallen sein, dass ihr beim Abänderndes CSS-Codes auch eine „merkwürdige“ Funktioneingefügt habt:Die Funktion mit dem Namen „lighten“ ermöglicht es,lighten(@blau, 12%);eine Farbe um einen gewissen Prozentsatz aufzuhellen.Das hat den Vorteil, dass man keine weiteren, hellerenFarbtöne derselben Farbe festlegen muss. Dastut nämlich die Funktion „lighten“ für uns. In diesemFall wurde die Variable bzw. Farbe „@blau“ um 12%aufgehellt.LESS besitzt eine Vielzahl von Funktionen, die es ermöglichen,Farben aufzuhellen / abzudunkeln, Zahlenauf- und abzurunden, Objekte mit Farb-, SättigungsundHelligkeitswerten zu stellen, Funktionen miteinanderzu vermischen und noch vieles mehr. Auch diePhotoshop-typischen Effekte wie „Weiches Licht“, lassensich in LESS problemlos umsetzen und verwenden.Alle Funktionen hier aufzuzählen, würde natürlich denRahmen sprengen, deswegen solltet ihr euch unbedingtdie LESS-Dokumentation anschauen, um euchein umfassendes Bild von dieser mächtigen und umfangreichenSprache zu machen.Wichtig ist natürlich, dass die LESS-Datei VOR derJavascript-Datei geladen wird, da ansonsten die Javascript-Dateikeinen CSS-Code aus der LESS-Dateikompilieren kann. Folge: Die Seite ist total zerschossenund wird nicht richtig dargestellt. Solltet ihr alles, wiehier beschrieben worden ist, gemacht haben, müssteeuer Ergebnis wie in der Abbildung oben links auf dieserSeite aussehen.Ihr könnt nun an dieser Stelle natürlich ein paar Experimentemachen, indem ihr der Variablen „@blau“ einenanderen Farbwert zuordnet. Schon hättet ihr das gesamteErscheinungsbild der Webseite verändert, ohnedabei Zeile für Zeile nach den entsprechenden Farbangabensuchen zu müssen.43PSD-Tutorials.de COMMAG 12 | 13

How-toLESS wie HTML verschachtelnNatürlich muss man LESS nicht unbedingt zwecks derVerwendung von Variablen verwenden. Es kann natürlichauch vorkommen, dass die normale Schreibweisevon CSS ein wenig mühselig ist und man das Ganzedoch lieber wie in HTML handhaben möchte. Sprich:Eine untergeordnete Anweisung wird von einer übergeordnetenAnweisung umschlossen und so gesehenin einer Baumstruktur dargestellt. Um das Ganze etwasverständlicher zu machen, soll an dieser Stelle der Headerunserer erstellten Seite als Beispiel fungieren:Meine WebseiteSchauen wir uns das Ganze nun im Detail an: Der Headerist in diesem Fall das übergeordnete Element. Erumschließt ein DIV-Element mit der Klasse „container“und „clearfix“. Dieser wiederum umschließt ein H1-Element, welches als Logo der Seite fungieren soll. Innerhalbdes H1-Elements befindet sich wiederum einA-Element. Genau diese Schreibweise ist nun auch inCSS mithilfe von LESS möglich. Damit könnten die umständlichenSchreibweisen wie „header #logo a“ derVergangenheit angehören. Bleiben wir bei unseremBeispiel. Wir möchten das Ganze nun auch in LESS genausohandhaben.So können wir die folgende Schreibweise verwenden:header {width:auto;height:170px;background:#2980b9;clear:both;#logo {font-family: ‚Alex Brush‘, cursive;font-size: 5em;font-weight:300;padding:26px 0 0 0;a {text-decoration:none;color:#fff;}..}}Nun passiert etwas, was es bisher in CSS noch nie indieser Form gab: Innerhalb des Headers wird die IDnamens „logo“ formatiert, während der A-Tag innerhalbder ID „logo“ formatiert wird. In CSS werden dieseElemente normalerweise getrenntvoneinander und vor allem untereinanderstatt ineinander definiert. Doch dankLESS ist diese Schreibweise nun möglichund regelkonform. Auf diese Weise hatman eine bessere Übersicht über seinenCSS-Code und kann so entsprechendeÄnderungen vornehmen, ohne dabeiden Überblick zu verlieren.Über den AutorFazit und abschließende WorteAls dynamische Skriptsprache ist LESS ein mächtigesWerkzeug, das schnelle Änderungen und verschiedeneOperationen ermöglicht. Dank der vielen Funktionenkönnen Farbwerte verändert oder miteinander kombiniertwerden. Das macht den Workflow einfacher, interessanterund spannender. Allerdings lohnt sich dieVerwendung der Variablen nur bei Flat-Design-Projektenoder auch bei Webseiten, bei denen es keinen direktenRelaunch gibt und das Äußere geringfügig verändertwerden sollte. Wer allerdings mit der gängigenCSS-Schreibe nicht so gut klarkommt, dem sei LESSans Herz gelegt, da Formatierungen nun wie in HTMLin der Baumstruktur geschrieben werden können.Stavros Vlahopulos ist staatlich geprüfter gestaltungstechnischerAssistent mit dem SchwerpunktGrafik-Design und geprüfter Internet-BetreuerHAF mit dem Schwerpunkt Web-Design.Als koordinierender Redakteur betreut er dasCommag-Magazin und gestaltet es mit.44PSD-Tutorials.de COMMAG 12 | 13

ReviewFormulare im WebVideo-TrainingDu möchtest moderneFormulare auf deinerWebsite integrieren?Mit diesem Video-Training lernst du dasHandwerkszeug, um moderne und umfangreicheWeb-Formulare und die verschiedenenVerarbeitungsmöglichkeitenfür deine Website aufzubauen. Los geht‘s!Jetzt Trailer ansehen!• 5 Stunden Video-Training mit WebentwicklerPascal Bajorat• Schritt für Schritt die eigene Websiteauf Vordermann bringen• Zur Umsetzung von modernenFormularen im Web• Mit einer Vielzahl von Projektdateien zuroptimalen Nachvollziehbarkeit45PSD-Tutorials.de COMMAG 06 | 13

TestberichtMalen mit dem iPadTablets sind nicht nur allein beim Internetkonsum nützlich, sondern können auch als Werkzeug zum kreativen Ausleben verwendetwerden. Wie iPad-Painting funktioniert, beschreibt Roger Hassler in seinem wunderbaren Buch. Eine Rezension von Matthias.Regelmäßig gehen virale Videos durch die Kanälevon Facebook, YouTube und Co. und ab undzu sind wahre Blüten kreativen Schaffens dabei. So etwawie jüngst ein Finger Painting auf dem iPad vonVisual Artist Kyle Lambert, der in über 200 Stundenmit über 285.000 Pinselstrichen das Porträt von MorganFreeman inspirierend umgesetzt hat. Die gesamteBearbeitung wurde auf 3,5 Minuten visualisiert. Einfachwunderbar. Schaut euch mal seinen Kanal an, woriner weitere Bearbeitungen mit Rihanna, Will Smith undBeyoncé zeigt.Für die meisten von uns, die so etwas nicht können,ist das einfach nur faszinierend und wir wünschen uns,dass wir das auch können. Nur wie fangen wir an, welcheApps benötige ich dazu auf dem iPad - und welcheWerkzeuge darüber hinaus? Welche Technikensind entscheidend, damit mein Werk auch anmutendrealistisch wird? Genau zu diesen Fragestellungen hatRoger Hassler, der unter anderem schon eine Digital-Painting-Tutorialserie auf PSD-Tutorials.de veröffentlichthat, ein Buch geschrieben: Malen mit dem iPad.Bibliografische AngabenISBN 978-3-941656-12-3, 1. Auflage, newart medien &design, 2013 Hamburg, 19,95 EuroAutorRoger Hassler arbeitet als Grafik-Designer in den BereichenPrint- und Webdesign in seiner eigenen Werbeagenturund Verlag in Hamburg. In den letzten Jahrenhat er als Autor und Herausgeber zahlreiche Bücherund DVDs zum Thema Airbrush sowie als Chefredakteurdas Magazin „Airbrush Step by Step“ publiziert.Mit dem Thema Digital Painting und Computergrafikbeschäftigt sich Roger Hassler schon seit den Anfängenvon CommodoreC116, Atari ST,Amiga & Co. NebenAusbildung undStudium in den80er und 90er Jahrenwar er als Computergrafikertätigund entwickelte u.a. Grafiken für Computerspiele. Erveröffentlichte erste künstlerische Arbeiten im Rahmenseiner eigenen Public Domain Serie „Amiga-Vice“sowie Fachartikel u.a. im „Amiga Joker“. Über dieComputergrafik gelangte er später auch zu klassischenMaltechniken wie Öl, Aquarell, Pastell und Airbrush.Heute ist Roger Hassler vor allem ein begeisterterHobby-Digital-Painter. Im Rahmen seines Magazins„Airbrush Step by Step“ hat er auch schon Anleitungenfürs digitale Malen veröffentlicht und einen Anfängerkursin Digital Painting geleitet. Roger Hasslerist Fan von Fantasy-Movies wie „Star Wars“ und „Avatar“und interessiert sich besonders für die jeweiligenConcept Designs und Matte Paintings. Zu seiner Lieblingsliteraturzählen u.a. die Fachmagazine „2dartist“46PSD-Tutorials.de COMMAG 12 | 13

Testberichtund „ImagineFX“, die „Matte Painting“-Serie von BallisticPublishing sowie die Gnomon Video-Workshops.Zur Website: ipad-painting.deBehandelte Themen1. Vorwort (praktische Hinweise zu den Schritt-für-Schritt-Anleitungen)2. Hardware (iPad-Versionen, Eingabestifte)3. Software (Apps im Überblick)4. Grundlagen der iPad-Malprogramme (Icons undMenüstrukturen, iPad-Gesten und die wichtigstenWerkzeuge)5. Basic-Tutorials (Skizzieren, Kolorieren und Ineinanderwischenvon Farben)6. Schritt-für-Schritt-Anleitungen (Praxisbeispielevon A bis Z in der Entstehung erklärt)7. iPad-Werke veröffentlichen (speichern, exportieren,teilen und drucken)Roger Hassler weist im Vorwort gleich zu Beginn daraufhin, dass in den Schritt-für-Schritt-Anleitungenauch immer die jeweiligen Icons dargestellt sind, diein der betreffenden App relevant sind. So gelingt esdem Leser, zielsicher die Tutorials nachzuarbeiten unddie Apps sicher zu bedienen.Im nächsten Kapitel stellt der Autor die Bandbreitean verfügbaren Eingabestiften von Bamboo aus demHause Wacom sowie gut ein halbes Dutzend weitererModelle von anderen Firmen dar, mit denen dasiPad zum Painting bedient werden kann. Gleich im Anschlussgeht es um Apps, welche zwischen 0 und 9 Euroim App-Store verfügbar sind und sich zum Paintingeignen. Das sind eine ganze Menge, allein 17 Stück,die hier vorgestellt werden, wovon sieben auch zumEinsatz kommen. Nach diesem theoretischen Part gehtes auch schon ans Eingemachte. Beginnend bei einfachenObjekten steigert sich der Anspruch von Seite zuSeite, bis der Autor Landschaften, Tiere wie Tiger oderLeguan, Porträts und ganze Composings mit dem iPadmalt. Den Höhepunkt erreichen die Inhalte sicher imEinsatz der 3D-Komposition. Abgerundet werden dieKapitel mit der Erklärung, wie ich denn nun die erstelltenBilder in meine soziale Kanäle verteilen, druckenoder mailen kann.Besonders hervorzuheben ist die gute Bebilderung derInhalte. Auf jeder Seite finden sich bis zu sechs Bilder,die die textlich beschriebenen Schritte anschaulich visualisieren.FazitRoger Hassler ist für uns kein Unbekannter, weil er auchschon für PSD-Tutorials.de einige Tutorials geschriebenund auch als Herausgeber des (leider schon wiedereingestellten) Fachmagazins 2dartists für Aufmerksamkeitgesorgt hat. Sein neuestes Werk ist wie geeignetfür alle Digital Artisten (in spe) , die ihr Wirkungsfeldauch auf das iPad ausdehnen wollen. Von uns gibt eseine klare Empfehlung für dieses Buch.Unser Fazit in Kürze: Schöne Inhalte gut verpackt in einemwunderbaren Buch zu einem fairen Preis!47PSD-Tutorials.de COMMAG 12 | 13

How-toWohin soll die Reise gehen?Eine nette Idee für eine Einladungskarte mit dem Motto „Wir stechen in See“. Eine Windrose, auch Kompassrosegenannt, ohne großen Aufwand in Illustrator erstellt. Es werden simple Objekte kombiniert, zerschnitten, mitTransformationseffekten versehen und voilà, schon haben wir ein anschauliches Werk erstellt. Gleich ausprobieren!Eine kleine Anmerkung vorweg: Im Tutorial ist öfter dieRede von der Apfel-Taste. Diese bezieht sich auf dieMac-Tastatur und ist auf dem PC die Strg-Taste.Schritt 1: Wohin soll die Reise gehen?Zunächst habe ich mich ein wenig darüber informiert,was eine Windrose wirklich ausmacht. Ich habe mir verschiedeneWindrosen angesehen und deren Elementeanalysiert. Eine Windrose besteht hauptsächlich ausElementen für genaue Richtungsangaben. Diese „Nadeln“stehen rechtwinklig zueinander. Die ZwischenrichtungenNordost, Südost, Südwest und Nordwestteilen die Windrose in Achtel zu je 45°.Schritt 3: Zerschneiden der NadelSicherlich gibt es verschiedene Möglichkeiten, dieseAufgabe einfach und komfortabel zu lösen. Ich möchtedie folgende Lösung anbieten:Schritt 2: Die „Nadeln“Die Nadeln der Windrose sind grob gesagt einfacheDreiecke, die in der Mitte geteilt sind, damit wir die eineHälfte anders füllen können als die andere.Mithilfe der Transformationspalette (Shift+F8) dreheich das Dreieck um 90° und skaliere es auf meinegewünschte Breite und Höhe. In diesem Fall sind es60 mm x 20 mm.48PSD-Tutorials.de COMMAG 12 | 13

How-toIch ziehe mir eine Linie und platziere sie horizontal mittigauf dem Dreieck. (siehe Bild oben) Dazu wähle ichdie Linie und das Dreieck aus und klicke abermals aufdas Dreieck. Das Dreieck wird so zum Basisobjekt. DieAuswahllinie wird fett.Nun wähle ich in der Ausrichtenpalette (Shift+F7) dieOption „Vertikal zentriert ausrichten“. Die Linie springtin die Mitte des Dreiecks.Als Nächstes benötige ich den Pathfinder(Shift+Apfel+F9). Mit der Option „Fläche aufteilen“trenne ich das Dreieck an der Stelle der Linie auf underhalte somit zwei gleiche Dreiecke. Diese Dreieckesind noch gruppiert.Bei ausgewähltem Objekt könnt ihr die Gruppierungmit Shift+Apfel+G lösen.Schritt 4: Die SchraffurUm eine Fläche mit einer Schraffur zu füllen, erzeugeich mir ein entsprechendes Farbfeld. Dazu gehe ichwie folgt vor: Ich ziehe eine Linie, die lang genug ist,um mein zu füllendes Objekt abzudecken. Damit esspäter gezeichnet aussieht, wähle ich den Pinsel Bleistiftund fülle die Kontur mit Schwarz.Nun öffne ich den Effekt Transformieren und erstelle32 Kopien des Striches im Abstand von 2,5 mm. DerAbstand und die Anzahl der Kopien richtet sich nachdem zu füllenden Objekt.Schritt 5: Die schraffierte FüllungNachdem der Transformieren-Effekt mit OK bestätigtwurde, ziehe ich dieses neue Objekt in meine Farbfelder-Palette.So wird aus meinem Muster ein Farbfeld,mit dem ich die Nadeln füllen kann.Per Doppelklick auf dieses neue Farbfeld öffnet sichdas Farbfeldoptionenfenster, in dem man dem Farbfeldeinen Namen geben kann. Ich nenne es „Kompass-Schraffur“.Schritt 6: Zutaten zum KompassNun ist ein Großteil der Objekte schon erzeugt. Dennochist der Kompass noch nicht komplett.Für den kompletten Kompass benötige ich zunächstzwei Kreise (einen mit 40 mm und einen mit 50 mmDurchmesser) und zwei unterschiedliche Nadeln (dieblaue mit 60 mm Höhe, die schraffierte mit 50 mm).Diese werden in den folgenden Schritten zusammengefügt:49PSD-Tutorials.de COMMAG 12 | 13

How-toSchritt 7: Die Viertel- und die Achtel-NadelnIch beginne mit den blauen Viertel-Nadeln.Mit Apfel+Y wechsele ich zur Pfadansicht und zoomeetwas hinein, um die Kanten der Nadeln direkt auf denKreis positionieren zu können. Dies muss wirklich sehrgenau gemacht werden, denn jede Abweichung würdespäter auffallen.Achtel-Nadeln vor. Sollten sich die Objekte aus irgendwelchenGründen nicht um die gewünschten 45° drehenlassen, lohnt sich ein Blick in die Voreinstellungen(Apfel+K>Intelligente Hilfslinien).Deswegen löse ich diese Aufgabe mit dem Transformiereneffekt.Damit die Nadeln nicht wild durch dieGegend „fliegen“ und auch wirklich das gewünschteErgebnis dabei herauskommt, ist es wichtig, dem Objekteinen Bezugspunkt zu geben, um den es „kreisen“soll. In diesem Fall reicht ein Ankerpunkt, der 30 mmunter der Unterkante der kleinen Nadel gesetzt wird.Ist die erste Nadel positioniert, kopiere ich diese durchZiehen bei gedrückter Alt+Shift-Taste auf die gegenüberliegendeSeite. Die Shift-Taste sorgt dafür, dass dasObjekt seine y-Koordinaten beibehält, die Alt-Taste istfür die Kopie zuständig. Anschließend drehe ich beigedrückter Shift-Taste die Nadel in 45°-Schritten umdie eigene Achse und positioniere die Ecken abermalspassgenau auf der Kontur des Kreises.Nun wähle ich beide Nadeln aus, kopiere sie undfüge sie deckungsgleich wieder ein (Apfel+C, dannApfel+F), um sie mit gedrückter Shift-Taste um 90°zu drehen.Ebenso wie bei den Viertel-Nadeln gehe ich bei denSchritt 8: Weitere UnterteilungenEs ist nun zwar schon ein netter Kompass, aber für einerichtige Windrose sieht es noch etwas mager aus.Weitere Unterteilungen lösen das Problem. Zu diesemZweck erstelle ich mir kleine, weitere Nadeln, indemich eine der bereits erstellten Nadeln kopiere, skaliereund mit einem kleinen Strich darüber versehe.Da zwischen den Achtel- und Viertelnadeln 8 Lückensind, möchte ich 8 dieser kleinen Nadeln um einenUmfang von 60 mm positionieren. Nun wäre es müßig,wie im vorherigen Schritt die einzelnen Nadelnimmer wieder genau zu positionieren und zu kopieren.Nun wird dieser Ankerpunkt und die Nadel mit Strichdarüber gruppiert (Apfel+G). Anschließend nehme ichfolgende Einstellungen im Transformiereneffekt-Fenster(Effekte>Verzerrungs- und Transformationsfilter>Transformieren) vor: Ursprung: unten Mitte; Kopien: 8;Winkel: 45° (360°/8). Meine Einstellungen bestätige ichmit OK.Nun liegen diese Nadeln aber deckungsgleich überden bereits erstellten Viertel- und Achtelnadeln, sodassdieser Kreis aus Nadeln um, sagen wir mal -22°,50PSD-Tutorials.de COMMAG 12 | 13

How-togedreht werden muss. Zuvor muss allerdings das Aussehendieses neuen Objekts umgewandelt werden, dasich das Drehen auf den Transformations-Effekt auswirkenwürde.Ein weiterer Kreis mit Kontur und ein Stern (beideWerkzeuge verbergen sich hinter dem Rechteckwerkzeugin der Werkzeugpalette) geben dem Inneren einpaar mehr Details.Nun noch ein nettes Logo oder Symbol in die Mitteund fertig ist der innere Kreis.Schritt 10: Der äußere RingFür die kleinen Rauten im äußeren Ring verwende ichwieder den Transformiereneffekt, wie bereits in Schritt8 und 9 beschrieben.sich übrigens durch Ziehen ebenso wie Ebenen in ihrerReihenfolge verschieben.Zum Schluss kommt noch das Pfadtext-Werkzeug zumEinsatz, um den Text in den äußeren Ring zu schreiben.Dazu benötigt man allerdings abermals einen Kreis, aufdessen Pfad der Text geschrieben werden kann.Schritt 11: Weiter geht‘s in PhotoshopLetztlich habe ich die komplette Windrose kopiert undin Photoshop auf einen passenden Hintergrund eingefügt.Um es etwas besser wirken zu lassen, habe ichdie Windrose mit einem Schlagschatten versehen. VielErfolg wünscht Kai von vollstark.de.Schritt 9: Der innere RingNun möchte ich noch das Loch in der Mitte füllen. Dazuerzeuge ich einen Kreis aus einfachen Linien, denenauch wieder die Bleistiftpinselspitze zugewiesenist. Der Transformiereneffekt sorgt abermals dafür, dassdie Striche im Kreis angeordnet werden.Des Weiteren ziehe ich eine kreisrunde Ellipse auf, derenDurchmesser dem Abstand der Achtelnadeln vonSpitze zu Spitze entspricht. Diesem Kreis weise ichmehrere Konturen zu, indem ich in der Aussehenpalette(Shift+F6) unten links auf das Symbol Neue Konturhinzufügen klicke. Die einzelnen Konturen lassen51PSD-Tutorials.de COMMAG 12 | 13

How-toSchritt für Schritt zum perfekten LayoutIm folgenden Auszug aus dem Buch „Adobe InDesign CS6 - Schritt für Schritt zum perfekten Layout“ (Galileo) erläutert die Autorin Andrea Forst praxisnah undin kleinen Lektionen, wie man durch gezielte Füllmethodenanwendung interessante Effekte erreichen und Schlagschatten für mehr Tiefe einsetzen kann. Auchwenn das Commag die direkte Du-Ansprache wählt, verbleiben wir bei Buchauszügen bei der vom Buch gewählten Anrede, und in diesem Fall ist es die Sie-Form.VorherNachherAusgangsdatei (Download)Die Flächen überlagern das Bild.© © Foto: Andrea ForstDeckkraft und FüllmethodenWenden Sie die Füllmethoden gezielt an. ReduzierenSie hier die Deckkraft einer Fläche und setzen Sie danachverschiedene Füllmethoden ein. Es lassen sichauf diese Art tolle Effekte erzielen. Spielen Sie mit denFüllmethoden und auch mit anderen Farben.Bearbeitungsschritte»»Deckkraft reduzieren»»Füllmethoden anwenden52PSD-Tutorials.de COMMAG 12 | 13

How-to12Schritt 2: Die Deckkraft reduzierenÖffnen Sie nun die Datei »Fuellmethoden.indd«. WählenSie hier den gelben und den roten Rahmen mitdem Auswahlwerkzeug aus. Die Deckkraft reduzierenSie im Effekte-Bedienfeld auf »50 %« 4. Dadurch erreichenSie, dass das Bild durch die Flächen durchscheint.Spielen Sie mit anderen Deckkraft-Werten und sehenSie sich die Wirkung an.37Schritt 1: Das sollten Sie beachtenIn der obigen Abbildung sehen Sie zwei Beispiele, dienicht mehr druckbar sind: Beide Flächen wurden in derDeckkraft auf »90 %« 2 reduziert. In dem hellen Bereich1 sind fast alle Bereiche des Bildes nicht mehr sichtbar.Das Wenige, was Sie noch sehen können, wird nichtmehr gedruckt. Der dunkle Bereich 3 dürfte zu dunkelsein, um gedruckt zu werden, da zu viel Farbe auf dasPapier gebracht wird.56Schritt 4: Negativ multiplizierenIch hoffe, Sie haben beide Rahmen noch in der Auswahl.Wählen Sie nun die Füllmethode Negativ multiplizieren7 aus. Diese hellt jetzt die Flächen auf. Hier fordereich Sie zum Spielen mit anderen Farben auf. Ichhabe mal mit den Farben »Cyan« und »Grün« gespielt.4Schritt 3: MultiplizierenÜber die Füllmethoden kann man der Transparenz einanderes Aussehen verleihen. Mit der Methode Multiplizieren5 wird das Bild verdunkelt, aber die Zeichnungdes Bildes bleibt erhalten. Wählen Sie daher wiederbeide Rahmen aus und stellen Sie Multiplizieren ein.Achten Sie besonders auf die rote Fläche. Hier sehenSie den Unterschied deutlich 6.853PSD-Tutorials.de COMMAG 12 | 13

How-toSchritt 5: IneinanderkopierenDas Ineinanderkopieren 8 ist ein Mix aus den FüllmethodenMultiplizieren und Negativ multiplizieren. Vereinfachtgesagt werden hier die hellen Bereiche negativ multipliziertund die dunklen Bereiche werden multipliziert.Dieser Effekt ist oft eine Alternative zur Deckkraftreduzierung.Es hängt jedoch von der oben liegendenFarbe ab, ob das Bild dahinter heller oder dunkler wird.10Schritt 8: FarbtonMit der Füllmethode Farbton 11 erzeugen Sie wiederandere Farben, die sich aus dem Hintergrundbild mitseinen hellen Bereichen und der darauf liegenden Flächeergeben. Probieren Sie auch hier die Füllmethodemit anderen Farben und einer anderen Deckkraft aus.9Schritt 6: Hartes LichtJe nachdem, welche Farbe dunkler oder heller ist, wirddiese bei der Füllmethode Hartes Licht 9 als neue Farbegewählt. Dabei werden die Farben des Bildes und derFläche gleichermaßen berücksichtigt. Die Wirkung solldem Anstrahlen des Bildmaterials mit grellem Scheinwerferlichtentsprechen. Spielen Sie auch hier wiedermit der Deckkraft und den Farben.Schritt 7: Farbig nachbelichtenNur zum Spaß ein Zitat der Adobe-Hilfe: »Die Grundfarbewird verdunkelt, um die Angleichungsfarbe widerzuspiegeln.Ein Füllen mit Weiß ergibt keine Änderung«.Verstehen Sie das? Am besten probieren Sie esselbst: Unser Beispiel arbeitet mit zwei unterschiedlichenFlächen, und deshalb ist auch die Wirkung desFilters unterschiedlich. Stellen Sie Farbig nachbelichten10 ein und betrachten Sie das Ergebnis. Verändern Siewieder die Farbe und die Deckkraft.1112Schritt 9: FarbeMit der Füllmethode Farbe 12 werden nur der Farbtonund die Deckkraft der beiden Flächen übernommen,die hellen Bereiche aus dem Hintergrundbild werdendabei jedoch mit eingerechnet. In unserem Beispielwerden die Flächen auch mit eingeschlossen.Wir danken dem Galileo Verlagfür diesen Artikel, der ein Auszugaus folgendem Buch ist:Andrea ForstAdobe InDesign CS6 - Schritt fürSchritt zum perfekten Layout54PSD-Tutorials.de COMMAG 12 | 13

Yoann Madec und Solène Renaudin - Pseudonym „Düne und Sosoa“Unfinished Sympathy, ureigenste Gefühle während der Schwangerschaft

VorgestelltGeburt des ersten Kindes wird zum Bild!Zum Ende ihrer zweiten Staffel kehrt Fotolias TEN Collection zu ihrem Ursprung zurück und präsentiert eine Kreation des französischen Künstlerpaars Yoann Madecund Solène Renaudin, bekannt unter ihren Pseudonymen Düne und Sosoa: „Unfinished Sympathy“ ist zugleich der zweite „Special Edition“-Beitrag des Kreativprojekt,da er sowohl mit Adobe Photoshop als auch mit Illustrator entstanden ist. Die offenen PSD- und AI-Dateien des Motivs können am Dienstag, 10. Dezember, für24 Stunden gratis auf der TEN Website heruntergeladen werden.Düne und SosoaAls stolze Teilnehmer der TEN Collection 2013haben sich Düne und Sosoa bei der Wahl desMotivs von einem höchst persönlichen Ereignis anregenlassen: der Geburt ihres ersten Kindes. „Wir hattendabei aber nicht unsere Rolle im Blick, sondern vielmehrdie Flut an Emotionen, die bei Eltern entsteht:Aufregung, Liebe, Glück, aber auch Angst“, erklärt Düne.Starke und widersprüchliche Gefühle prägen daherihre Kreation „Unfinished Sympathy“. Auch die Musikihrer Lieblingsband „Massive Attack“ hat ihnen dabeigeholfen, die beiden gegensätzlichen Kräfte darzustellen,die sich aufeinander zubewegen und sich im zentralenElement, dem Herz, letztlich vereinen.„Sie repräsentieren unsere ureigensten Gefühle währendder Schwangerschaft. Die linke Hand ‚Unfinished‘steht für die materielle Seite der Dinge, wie sie in unsallen steckt. Dieses Begehren von Besitz, Reichtum undschönem Aussehen nährt die Vorstellung, unvollkommenzu sein. Die rechte Hand ‚Sympathy‘ versinnbildlichteine eher spirituelle Haltung, die das Geben demNehmen vorzieht“, beschreibt Sosoa ihr Werk.Um ein solch detailliertes Ergebnis zu erhalten, musstedas Künstlerpaar seine Workflows ändern. Gewöhnlichmischen sie traditionelle Werkzeuge mit modernerSoftware wie Adobe Illustrator, Photoshop, InDesignoder auch Corel Painter. Für TEN hingegen haben Düneund Sosoa fast ausschließlich mit Illustrator und Bildernaus der Fotolia-Datenbank gearbeitet.„Dass wir zu zweit an Projekten arbeiten, ist sicherlichein Vorteil für uns. Wenn wir am Anfang eines Entwurfsstehen, sind wir mit dem Ansatz des anderen oft nichteinverstanden. Aber nach und nach kommen wir dadurchzu einem perfekten, interessanten und sehr kreativenKompromiss“, erklärt Sosoa. „Wir können konstruktiveKritik äußern und haben jeder für sich einenunverzerrten Blick auf die Botschaft, die wir vermittelnwollen“, ergänzt Düne.Das Prinzip des permanenten kreativen Austauschshaben sie konsequent ausgeweitet, bis es 2006 in dieGründung des „Gang Corporate Collective“ und derMarke „That’s Gang!“ gemündet ist. Diese Gruppierungbesteht mittlerweile aus neun Künstlern, von denen jederseine speziellen Erfahrungen und Fähigkeiten miteinbringt.Dank dieses Zusammenspiels von Talenten können sieals Team das gesamte kommunikative Spektrum bedienen(Video, Foto, Sound Design, Web Developmentund Web Design, Motion Design, Street Art und vielesmehr) sowie mit etablierten und größeren internationalenAgenturen konkurrieren – mit einem „französischenTouch“, wie sie betonen. Vermutlich ist das derSchlüssel für den Erfolg des „Gang Corporate Collectives“,das namhafte Kunden wie Le Studio SRF, SNCF,Adobe, Wacom, Dior, Lacoste oder MTV von seiner Arbeitüberzeugen konnte.56PSD-Tutorials.de COMMAG 12 | 13

InterviewWie es beim TEN Projekt üblich ist, geben auch Düneund Sosoa ausführliche Einblicke in ihr Leben undWirken als Digital Artists. Dazu wurden zwei Videos,jeweils mit Untertiteln in zwölf Sprachen, in ihrer französischenHeimat gefilmt. Eines zeigt ihre Inspirationsquellen,ihren Alltag sowie Eindrücke aus ihrem privatenUmfeld und ist seit dem 05. Dezember auf derTEN Facebook Seite zu sehen. Das zweite Video, in demdas Künstlerpaar seine Tricks und Kniffe sowie den Entstehungsprozessseines Werks Schritt für Schritt erläutert,ist ab dem 10. 12. auf dem YouTube TEN CollectionChannel sowie der TEN Collection Website abrufbar.TEIL 1: VORSTELLUNG DES KÜNSTLERS• Bitte stellt euch kurz vor.Dune: Hallo, mein Name ist Yoann Madec. Ich bin jedochbesser bekannt als „Düne“. Sosoa: Und ich heißeSolène Renaudin. Mein Spitzname ist „Sosoa“. Wir lebenund arbeiten seit sechs Jahren zusammen. • Erzählt uns etwas über eure Ausbildung: Verliefsie formal oder autodidaktisch?D: Ich würde sagen, dass beides zutrifft. Seit ich einkleiner Junge war, hatte ich schon immer eine Vorliebefürs Zeichnen, Farben, einfach für alles, was mitder Bilderwelt zu tun hat. Als ich meinen Bachelor abschloss,entschied ich mich spontan, noch vier Jahrean der PIVAUT School (Superior School of Applied Artsin Nantes) zu studieren. Danach arbeitete ich drei Jahreals Grafik-Designer in einer Kommunikationsagenturmit zwei oder drei Zwischenstationen in größerenAgenturen wie Euro RSCG. Seit nun fünf Jahren arbeiteich als freiberuflicher Grafik-Designer und Illustrator.S: Ich fühlte mich schon immer von Kunst angezogen,seit ich denken kann. Daher absolvierte ich ebenfallsein vierjähriges Studium an der PIVAUT Applied ArtsSchool. Direkt im Anschluss habe ich damit begonnen,57PSD-Tutorials.de COMMAG 12 | 13

Interviewals freiberufliche Grafik-Designerin zu arbeiten. Diesist nun schon zehn Jahre her.• Arbeitet ihr für eine Agentur oder als Freelancer?Warum?S: Ich habe schon immer als Freelancerin gearbeitet.Es war Bestimmung. Als ich mein eigenes Unternehmengegründet habe, war dies notwendig. Damalswar der Markt noch nicht so übersättigt. Das hat dieDinge vereinfacht. D: Wie eben erwähnt, habe ich anfangsin Agenturen gearbeitet. Darüber hinaus lernteich technische Dinge bereits im Studium oder beimpersönlichen Experimentieren. All diese Erfahrungenermöglichten mir, eine Menge über grafische Verkettungenzu lernen: vom direkten Kundenkontakt undanfänglichem Briefing über das Projekt-Monitoringmit den Druckern bis zu der Arbeit im Team. Dies allesschaffte die Voraussetzungen für mein Debüt undhalf mir bei meiner Weiterentwicklung, um jetzt alsFreelancer tätig sein zu können. S: Unabhängigkeiterlaubt uns, unsere Berufswahl noch einmal zu unterstreichen.Uns für unsere Ideen einzusetzen. Das motiviertuns am meisten und ist auch der aufregendsteTeil unseres Jobs. Wenn wir auf die Bedürfnisse derKunden eingehen, erfordert das Kompromisse. Es istjedoch essenziell für uns, den kreativen Prozess zuführen. D: „Unabhängigkeit“ bedeutet für uns nicht,alleine zu arbeiten! Neben unserer binomischen Arbeitsind wir die Mitbegründer des „Gang Corporate“Kollektivs und der Marke „Ça c‘est Gang!“ (Bedeutung:„Das ist die Gang!“) Es fing alles damit an, alswir Antony Legrand, Jérôme Bareille („Izidesign“) undBertrand Biss trafen. Aus einem beruflichen Meetingwurde Freundschaft. Dann schlossen sich Pavlé Savic,Nicolas Scauri („Skio“), Nicolas Dorretti und AxelGuenoun der Gruppe an. So wurden wir neun zum„Gang Corporate“ Kollektiv. Jeder mit seinen Kompetenzendeckt fast das ganze kommunikative Spektrumab: Video, Foto, Sound Design, Entwicklung, WebDesign, Motion Design, Street Art und so weiter. Dadurchkönnen wir große Projekte wie eine klassischeKommunikationsagentur abdecken und für Kundenwie Le Studio SFR, SNCF, Adobe, Wacom, Dior, Lacoste,MTV tätig sein. • Wie gestaltete sich euer Weg zur digitalen Illustration?D: Mein Ausgangspunkt war immer der traditionelleBleistift- und Papier-Job, aber aus beruflicher Perspektiveund aus produktiven Gründen wurde die digitaleKreation unverzichtbar in unserem Bereich. MeinerMeinung nach gibt es nicht Besseres, als zu traditionellenund akademischen Techniken zurückzukehren,beispielsweise zum Papier und anderen Materialien,um die Dinge wieder in die richtige Perspektive zu rücken.S: Ich habe schon immer digital gearbeitet. DieSoftware-Vielfalt (von Illustrator über Photoshop bis58PSD-Tutorials.de COMMAG 12 | 13

Interviewhin zu Painter) mit ihren unbegrenzten Möglichkeitenkombiniert, machen den Computer zu einem ultrakreativenWerkzeug.• Was hat euch inspiriert und beeinflusst?S: In unserem Job ist man permanent gezwungen,auf neue Technologien und Trends zu achten. Das istder Grund, warum die grafische Wachsamkeit inhärentmit der Kreation ist. Dadurch entdecken wir ständigneue Künstler, die wir lieben und die uns zweifellosbeeinflussen, wie z.B. Benjamin (Zhang Bin), AlexTrochut, David Kinsey, etc. D: Es ist unmöglich, alleEinflüsse zu nennen. Es gibt viele großartige Künstler,die unsere Arbeit beeinflusst haben. Aber Inspirationkann man auch im Kino, durch Cartoons oder auchVideospiele erlangen. Interessant ist zudem, dass Inspiration,wie auch bei vielen anderen Kreativen, nichtbeim Bild aufhört. Auch Musik spielt in unserem Büroeine wichtige Rolle. Wenn ich nicht so stark in dem BereichGrafik- Design und Illustrationen involviert wäre,wäre ich bestimmt in der Musik-Branche gelandet.• Wirken sich eure Einflüsse und Inspirationen direktauf euren Stil und eure Arbeit aus?S: Selbstverständlich beeinflussen sie unsere Arbeit.Sie erlauben, uns fortwährend zu erneuern, uns selbstzu übertreffen und unsere Visuals zu verfeinern undzu perfektionieren. D: Ich persönlich bleibe innerhalbdes musikalischen Rahmens. Ich glaube, Musik hatwirklich einen großen Einfluss auf meine Arbeit. Musikund meine grafische Arbeit sind in der Tat beide Echos.Meine Arbeit beeinflusst auch meine Musik-Wahl.""Die Spontaneund der Perfektionist• Wie würdest ihr euren Stil definieren?D: Ich denke nicht, dass wir einen bestimmten Stil haben.Wenn wir einen Stil definieren müssten, würdees unsere Kreativität einschränken. Natürlich hinterlassenwir einen grafischen Eindruck, den die Leuteab und zu wiedererkennen. Momentan würde ichbehaupten, dass wir zu gerne neue Wege erkunden,als uns auf einen bestimmten Stil festzulegen. Wirsind sehr enthusiastisch, dass wir von Illustration zuWebdesign oder GUI (Graphical User Interface) überTypografie switchen können. Wir genießen zurzeitdiese Vielfalt.• Welches Wort oder welcher Satz beschreibt eucham besten?D: Da wir beide diese Frage beantworten müssen,würde ich es lustiger finden, einfach den anderen zudefinieren. Sosoa würde ich mit dem Wort „spontan“beschreiben. S: Und zu Düne passt der Begriff „Perfektionist“.• Habt ihr ein bestimmtes Muster, nach dem ihrarbeitet und könntet ihr es uns Schritt für Schrittschildern?S: Unsere Arbeiten entstehen meistens durch Diskussionen.Wir debattieren und hinterfragen alles von59PSD-Tutorials.de COMMAG 12 | 13

InterviewAnbeginn, sogar bevor wir den Stift auf das Papieroder das Tablet führen. Da wir zu zweit sind, könnenwir Konzepte und Ideen bestätigen, die wir in einemProjekt vorschlagen möchten. Wir teilen nicht immerdie gleiche Meinung, was auch gut so ist, aber nachund nach verfeinern wir unsere Vorschläge und machenSkizzen, bis wir den interessantesten Kompromissfinden. Sobald das Storyboard fertig ist, teilen wirdie Aufgaben auf und jeder von uns weiß, was er/siezu tun hat. Das hält uns jedoch nicht davon ab, auchwährend der Realisation des Projektes Dinge immerwieder zu hinterfragen. Wir gucken uns auch gegenseitigüber die Schulter und beurteilen, sowohl im negativenals auch im positiven Sinne, die Schwächenund Stärken des anderen. D: Das ist es! Aufrichtigkeit.Wir müssen aber noch Vorkehrungen treffen, umKämpfe zu vermeiden (lacht).• Mit welchen Kunden arbeitet ihr am liebsten?Und warum?D: Ohne zu zögern – mit denen, die uns vertrauen.Natürlich bedeutet Vertrauen nicht, dass uns die Erwartungendes Kunden egal wären, ganz im Gegenteil.Aber es gibt nichts Schlimmeres als Kunden, dienicht genau wissen, was sie möchten oder die Dingeimmer wieder hinterfragen, obwohl sie bereits beschlossenwurden. Vielleicht verschließen wir uns dadurchbereits geöffnete Türen und viele werden sichhier selbst erkennen. Aber wie wir vorher erwähnten,wir hinterfragen immer alles zusammen; wir beidenzusammen mit dem Kunden. Es ist wirklich ärgerlich,wenn Kunden ihre Meinung über Nacht ändern. Aufder anderen Seite erlaubt es uns, Vorschläge zu machenund die maximale Erfahrung aus solchen Projektenherauszuholen. Aber es ist nicht sehr vorteilhaft,insbesondere wenn die Arbeit bereits sehr umfangreicherledigt wurde, mit der „kleiner-Geldbeutel-Entschuldigung“ abgespeist zu werden (lacht). S: Diesalles betrifft selbstverständlich die grafische Perspekti-60PSD-Tutorials.de COMMAG 12 | 13

Interviewve. Wir lieben Kunden, die mit neuen Herausforderungenan uns herantreten, mit Projekten, die wir nochnie zuvor gemacht haben und die wir mit 100%igerBereitschaft meistern möchten.• Welche Pläne habt ihr für die nächsten Monate?S: Gerade erst wurde meine Tochter geboren, daherbin ich momentan im Mutterschaftsurlaub. Aber ichhabe auch persönliche Projekte, an denen ich zwischenzwei Windeln arbeiten kann! Da das Interviewerst am Ende des Jahres veröffentlicht wird, werde ichvoraussichtlich wieder im Geschäft sein. D: Ich versuchegerade gleichzeitig für Sosoa, meine Tochter undfür meine kommenden Projekte da zu sein. Ich habegerade ein GUI Design Projekt für eine mobile iPhoneundAndroid-App fertiggestellt. Nun schlittere ich inein Illustrationsprojekt, bei dem ich 14 Charaktere fürein Spiel kreieren werde.So können wir neue Wege einschlagen, Grenzen verschiebenoder einfach nur bereits Bekanntes erkunden.Im Klartext: Wenn man einen leidenschaftlichenJob ausübt, ist es essenziell, in der Lage zu sein, sichselbst immer wieder neu kennenzulernen.• Die Kultur und Geschichte eures Heimatlandessind sehr vielfältig. Inwieweit haben sie eure Arbeitbeeinflusst?D: Wir sind, wer wir sind, einerseits durch die Augender Anderen und andererseits durch das Bild, das siezurücksenden. Es ist immer witzig, dies aus der bildlichenPerspektive zu betrachten. Unsere französischeKultur ist immer noch sehr populär, heute genausodurch Cartoons wie damals durch die Malerei. Mannennt es den „französischen Touch“! Gleichzeitig sinddie Franzosen in einigen Teilen der Welt nicht so beliebt:Sie gelten als arrogant, rebellisch, protestierend- und zugleich amüsant, kreativ und revolutionär. Esgibt einfach so viele Bestandteile, die nicht wirklichgut zusammenpassen, aber das beste Rezept ergeben.Neben unserem künstlerischen und kulturellen• Ist es euch wichtig, neben euren professionellenProjekten auch zusätzlich an persönlichen Projektenzu arbeiten? Warum?S: Definitiv. Die Antwort ist ja. Da kann ich für unsbeide sprechen. Wenn wir es zeitlich schaffen, selbstverständlich.Besonders wichtig ist uns, dass wir dieseMöglichkeiten überhaupt haben, um ein wenigDruck und Stress abzubauen. So können wir ohneEinschränkungen und Grenzen kreativ sein, außer beidenen, die wir uns selbst auferlegen. Auf diese Weisekönnen wir auch mal den Frust, der sich während bestimmterProjekte aufgestaut hat, einfach rauslassen.61PSD-Tutorials.de COMMAG 12 | 13

InterviewErbe hat der Aufstieg des Internets alle kulturellenGrenzen geöffnet. Wir gehören zu der Generation, diefast schon heißhungrig auf „andere“ Kulturen ist. Wirlieben unsere französische Typografie, aber auch dieamerikanischen Comics sowie die japanischen Animationen…Zusammengefasst: Wir sind, wer wir sind - auch dankder „Anderen“.• Denkt ihr, dass, wenn ihr in einer anderen Umgebung/Kultur/Landaufgewachsen wärt, euer Stilund eure Arbeit jetzt anders sein würden?S: Keine Ahnung. Wahrscheinlich schon. Düne hat esja bereits in der vorherigen Antwort angedeutet. Wirwären wahrscheinlich genauso neugierig auf andereKulturen, die unsere Arbeit nähren, wie wir es heutesind. D: Es ist natürlich alles eine Frage der Bildung,Kultur und der eigenen Erfahrungen. Ich weiß nicht,was wir tun würden, wenn wir nicht in Frankreich lebenwürden. Es wäre zweifellos anders. Vielleicht wäreich nicht einmal Grafik-Designer oder Illustrator.TEN Collection zumindest diese Fragen visuell zubeantworten versucht.• Warum nehmt ihr am TEN Projekt teil?S: Zunächst war es eine Ehre für uns, dass ihr unsereArbeit berücksichtigt habt und euch entschiedenhabt, uns zu vertrauen, vor allem angesichts der Qualitätund des Ruhms der Künstler aus der vorherigenStaffel. Dies gilt noch mehr für die 2. Staffel, wenn mandie internationale Reichweite des Projektes beachtet.D: Wir waren wirklich bereit, uns dieser Herausforderungzu stellen.• Was denkt ihr beiden im weitesten Sinne überKreativität?S: „Nichts geht verloren, nichts wird gewonnen, dennalles transformiert sich nur“ – Lavoisier. D: O-ton BreakingBad. (lacht) • Was sind eurer Meinung nach die wichtigstenQualitäten eines großen Künstlers / Grafik-Designers?Welchen Rat würdet ihr angehenden jungenKünstlern geben, die eurem Beispiel folgen möchten?D: Ich bin mir nicht sicher, ob wir in der richtigen Positionsind, um solche Ratschläge zu geben. Was für unsfunktionierte, war immer: Hinterfrage dich selbst, sooft es nur geht, und zögere nicht, deine Arbeit durchdie Augen Anderer beurteilen zu lassen. Dadurch erhältstdu häufig konstruktive Kritik und du erkennst,• „Wo komme ich her?“ und „Wohin werde ich gehen?“:Spiegeln sich diese Fragen in euren Kreationenwieder?D: Ich kann mich nicht daran erinnern, dass ich mirbei meiner Arbeit über diese Fragen Gedanken gemachthätte. Wenn überhaupt, dann eher unbewusst.Andererseits haben wir seit der Geburt unsererTochter und der Teilnahme an der 2. Staffel der62PSD-Tutorials.de COMMAG 12 | 13

Interviewob deine beabsichtigte Botschaft lesbar ist und deineIntentionen verstanden werden. S: Ich würde auch sagen,dass Geduld und Demut essenzielle Qualitätensind. Ich meine das ganz allgemein, ob es sich um einbestimmtes Projekt oder um die Weiterentwicklungin unserem Beruf handelt.• Sonstige Gedanken?D & Sg: Vielen Dank an Fotolia, dass wir die Möglichkeitbekommen haben, an der 2. Staffel der TEN Collectionteilzunehmen. Wir hoffen, dass unser Werkeuch genauso viel Freude bereitet wie wir bei derErstellung hatten.TEIL 2: DIE ANGEWANDTE TECHNIK• Erzählt uns etwas über eure bevorzugten Tools:(Hard- und Software)D: Aus Effizienzgründen arbeiten wir sehr viel mit dengleichen Computern, und zwar mit der letzten Generationdes iMac27. Das ermöglicht uns einen gutenAustausch, wenn wir an denselben Projekten arbeiten.Ich bin der Meinung, dass das von vielen anderenfreiberuflichen Grafik-Designern auch so gehandhabtwird. Es ist eine der besten Lösungen für eine Gerät-Bildschirm-Kombination. Außerdem besitzen wir beideein Tablet. Das ist absolut notwendig in unserem Business.Wir haben uns für das Wacom Intuos 4, aber auchfür das Cinitiq21 entschieden, da es für einige Illustrationsprojektesehr interessant ist. S: Bei der Software benutzenwir die Adobe Creative Cloud, insbesondere Illustrator,Photoshop und InDesign, aber auch ziemlichhäufig Painter von Corel. Bei der Herstellung unseresVisuals für die 2. Staffel der TEN Collection haben wiruns exklusiv auf die Nutzung von Illustrator beschränkt.Normalerweise kombinieren wir aber unterschiedlicheSoftware, um aus jeder das Beste herauszuholen. • Welches Gefühl oder welche Idee möchtet ihrmit euren Kreationen vermitteln?D: Nachdem bei Fotolia bereits so viele imposanteThemen behandelt wurden, haben Sosoa und ich unsdazu entschieden, anders als ursprünglich geplant aneinem sehr persönlichen Thema zu arbeiten: der bevorstehendenGeburt unseres Kindes. Wir wollten nichtso sehr über uns sprechen, sondern über die Gefühle,die bei werdenden Eltern aufkommen, wenn ein neuerLebensabschnitt beginnt: Zweifel, Aufregung, Liebe. S:In unserem Visual mit dem Titel „Unfinished Sympathy“(in Anspielung auf Massive Attack) stehen sich zweiunterschiedliche Kräfte gegenüber, sie treten einanderentgegen und fließen zusammen, da beide nach ihremIdeal suchen. Sie repräsentieren unsere primitivsten Instinkte,die wir während der Schwangerschaft gespürthaben. Die linke Hand „Unfinished“ symbolisiert diematerielle Seite, die wir alle in uns haben: Inbesitznahme,Gier und das perfekte Äußere, das ständige Gefühlder Unvollständigkeit. Die rechte Hand, „Sympathy“,verkörpert Spiritualität, die eher darauf wartet, zu emp-63PSD-Tutorials.de COMMAG 12 | 13

Interviewfangen als zu nehmen. Wir wollten ein Gleichgewichtzwischen diesen beiden Kräften aufzeigen.• Das Fotolia Kreativbriefing hat sich für kreativeFreiheit ausgesprochen. Bevorzugt ihr es, nach einervorgegebenen Kunstrichtung oder lieber ohnebestimmte Vorgaben zu arbeiten?S: Es ist ein Trugschluss, zu denken, dass das Kreierenmit meiner “carte blanche” einfacher sei als mit einigenEinschränkungen. Im Falle des TEN Projektes war unsbeiden schnell klar, dass wir dieses Thema behandelnwerden, da es uns beide zu diesem Zeitpunkt beschäftigthat. Im Allgemeinen, insbesondere bei unserer alltäglichenArbeit, sind wir bei völliger kreativer Freiheitetwas misstrauisch. Es kommt nicht gerade selten vor,dass wir bei einem Projekt frei agieren können und unsvertraut wird, doch im Endeffekt ist der Kunde danachnicht immer zufrieden. D: Ich denke, wir mögen beideVorgehensweisen. Worin sie sich unterscheiden, ist Artund Umfang der vorgelagerten Reflexion.• Verratet ihr uns noch mehr Informationen bzw.„Tricks“ über eure Arbeit und die Techniken, die ihrin euren Werken anwendet?D: Illustrator ist kein Tool wie alle anderen. Es verfügtüber zahlreiche Qualitäten, das ist klar. Aber es istdurchaus starrer und anspruchsvoller als Photoshop,das mehr Spontaneität zulässt. Das ist auch der Grund,warum wir normalerweise unterschiedliche Softwarekombinieren. Die Verwirklichung solcher Illustrationenhat dann auch Performance-Charakter. Deshalbbeginnen wir unsere Arbeiten auch zunächst auf demPapier, bevor wir mit dem Computer loslegen. S:Sobald die Illustration mit Linien entworfen und derkomplette Scan durchgeführt wurde, zeichnen wirdie gesamte Skizze mit Illustrator. Keine dynamischenVektorisierungen! Wir sind uns darüber im Klaren, dassdie Konzeption dadurch mehr Zeit verschlingt, aberaufgrund unserer Liebe zum Detail und dem Wunsch,auch noch Dinge während der nächsten Schritte hinzufügenzu können, arbeiten wir die meiste Zeit mitdem Zeichenstift am Entwurf. Dann verlassen wiruns auf die dicken und dünnen Striche des Breitenwerkzeugs.D: Dann fahren wir mit der Färbung fort.Dazu benutzen wir das Stift-Werkzeug, mit dem wirFormen zeichnen können, die später die Beleuchtungund Schattierung jedes Elementes der Kompositionfestlegen. S: Abschließend ist der nützlichste Tipp dieVerwendung der “Recolour Artwork” Funktion. DiesesTool erleichtert es uns, die Farben jedes Elements zuwechseln, um die Komposition zu homogenisieren,ohne jedes Mal die „Global Colours“ Funktion zu benutzen.• Habt ihr eure regulären Techniken angewendetoder auch Neues ausprobiert?S: Es kommt eher selten vor, dass wir für eine gesamteKomposition Illustrator nutzen. Ja, wir mussten beidiesem Visual viele unserer Gewohnheiten ändern. D:Wir haben uns von Beginn an abgesprochen, welcheFunktionen wir erläutern und benutzen möchten.Einerseits, um effizient zu sein, und andererseits, umglaubhaft rüberzubringen, was wir kreieren möchten.Das ist auch der Grund, warum wir die „Recolour Artwork“Funktion benutzt haben. Sie hat uns zunächstmehr Raum gelassen, um die Belichtung der Objektein der Komposition festzulegen, ohne uns wirklichüber den chromatischen Aspekt Gedanken machenzu müssen.Yoann Madec und Solène RenaudinDünes Portfolio, Sosoas Portfolio,Website des Gang Corporate Collective,Ca c‘est GangFotolia & TEN LinksWebsite, Facebook, YouTube Channel,Fotolia auf Facebook64PSD-Tutorials.de COMMAG 12 | 13

Fotorätsel73. FotorätselFür euch mit der Kamera unterwegs:RetinaAuch diesen Monat haben wir wiederein Fotorätsel für euch vorbereitet.Viel Spaß damit!123Lösungsvorschläge können wie üblichim Rätsel-Thread in unserem Forumgepostet werden.Lösung des letzten Rätsels1. Füller2. Buch3. SIM-Karte4. Zerstäuber Fensterreiniger5. Spritze6. Kordel der Fensterjalousie45665 PSD-Tutorials.de COMMAG 12 | 13

Virtuelle Heft-CDDas Monats-GoodieWeihnachtsgrußkarte zur individuellen AnpassungWir sind im dritten Jahr mit der virtuellen Heft-CD. In jeder Ausgabe findet ihr einen Link zum Download von praktischen Goodies. Ob Presets, Arbeitsmaterialienzu Tutorials aus dem Commag, Texturen-Pakete, Video-Trainings oder PDF-Tutorials: Jeden Monat gibt es schmackhafte Downloads für euch in dervirtuellen Heft-CD. Der Downloadlink enthält das Monats-Goodie bis zum Erscheinen des nächsten Commags. Danach wird der Inhalt aktualisiert!In unserer 35. virtuellen Heft-CD und anlässlich des bevorstehenden Weihnachtsfests möchtenwir euch eine Weihnachtsgrußkarte zur freien Verwendung schenken. Das Format basiertauf einer InDesign-Datei und ist auf DIN A6 hoch ausgelegt. Bildelemente sind eingebettetund es bleibt genügend Spielraum für individuelle Anpassungen. Verwendeter Font: EdwardianScript ITC. Zum Download (ca. 6 MB). Wir wünschen viel Spaß damit!© © shockfactor & abcmedia - fotolia.com66 PSD-Tutorials.de COMMAG 12 | 13

ReviewIllustratorWorkshop-DVDDu möchtest die Vektorbearbeitungmit Illustratorbeherrschen wie ein Profi?Dann haben wir das Richtige für dich: Mitder Illustrator Workshop-DVD lernst duden Funktionsumfang des Programms vonA bis Z kennen. Hol dir das Know-how fürden fortgeschrittenen Workflow.Mit allenNeuerungenaus der CreativeCloud!Jetzt Trailer ansehen!• 27 Stunden Video-Training• 60 Tutorials mit über 1.500 PDF-SeitenKnow-how• Schritt für Schritt Illustrator erlernen• Lösungen für beliebte Effekte• Illustrator Special: Website layouten undslicen• Geeignet ab Illustrator CS367PSD-Tutorials.de COMMAG 06 | 13

Contests2D-Einsteiger November 2013/INovember - der Monat, der nur trübes Wetter beschert, der einen ganzen Tag zum Trauern bereithält und der Monat, der die Menschen auf den Winter einstimmt.Was lässt sich an solchen Tagen also Besseres machen, als seine Pixellust an seinem Lieblingsprogramm auszutoben und einmal wieder an einem Contestteilzunehmen? Genau das müssen sich auch noch mehr User überlegt haben, denn bei den Einsteigern hatten wir 41 Teilnehmer, so viel, wie schon lange nichtmehr. Mit einem Verhältnis von 28:13 zwar etwas einseitig auf einen Contest verteilt, aber Konkurrenz belebt ja bekanntermaßen das Geschäft.Den Anfang machen wir in diesem Monat mit demContest-Teil, in dem es den Schmetterling zu verarbeitengalt. Schmetterlinge scheinen sehr beliebt zu sein,denn genau hier trafen sich am Ende 28 Einreichungenim Contestmodul und wetteiferten um die Stimmender Voter.Ein sehr schönes Bild lieferte SwanNebula ab. Das Ergebniskann sich sehen lassen und erinnert ein wenigan ein Gemälde, ohne jetzt wirklich gemalt zu wirken.Das hängt wohl auch mit den verwendeten Farben zusammen,denn die sind wirklich vortrefflich gewählt.Selbst bei genauerem Hinsehen fallen mir keine wirklichenSchnitzer bei diesem Bild auf.Daher „Daumen hoch“ für dieses Werk. Erstklassige Arbeit,technisch perfekt und auch der Bildaufbau gefälltmir sehr gut. Die 642 Punkte gab es hier zu Recht.Glückwunsch an SwanNebula zu ihrem ersten Sieg ineinem Contest. Ich glaube, da können wir für die Zukunftnoch auf einige weitere Erfolge hoffen.Platz 1: SwanNebula68PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: picron - 592 PunktePlatz 3: _Marion - 573 PunktePlatz 4: unrungs - 547 PunktePlatz 5: SuicideOmen - 500 Punkte69PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 6: heikehk - 454 PunktePlatz 8: AJADAN_xD - 302 Punkte Platz 7: Pixella - 400 Punkte Zur Übersicht70PSD-Tutorials.de COMMAG 12 | 13

Contests2D-Einsteiger November 2013/IIIm zweiten Teil des Einsteiger-Contestsging es um die Bearbeitung einesalten Tuck Tucks, eines jener Personen-Transportmittels,die vorwiegendim asiatischen Raum in Einsatz sind.13 Einreichungen gab es hier und gewinnenkonnte in diesem Monat blunderboremit 370 Punkten, der darausein Schreibtisch-Auto bastelte.Die Spiegelung finde ich ganz gelungen(wenn auch nicht 100%), denn beischräg stehenden 2D-Objekten mussin Photoshop schon getrickst werden,um das einigermaßen treffend darzustellen.Lediglich einen kleinen Verlaufam Ende der Spiegelung hätte ernoch anbringen können und das Spiegelbildetwas „stauchen“. Auch kommtmir das etwas zu „klar“ vor.Glückwunsch zu diesem Erfolg.Platz 1: blunderbore71PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: suessi - 329 PunktePlatz 3: Lambert - 210 PunktePlatz 4: BlackArrow - 201 PunktePlatz 5: Shilona - 192 Punkte72PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 6: pixelmanie - 181 PunktePlatz 7: Pixel_Maniac - 174 PunktePlatz 8: Rocco - 156 Punkte Platz 9: PhotMaxe - 133 Punkte Zur Übersicht73PSD-Tutorials.de COMMAG 12 | 13

Contests2D-Fortgeschrittene November 2013Was haben eigentlich ein Sessel und eine exotische Baumfrucht mit Geometrie zu tun? Richtig - nichts. Genau das war aber auch die Schwierigkeit beim Fortgeschrittenen-Contestin diesem Monat, denn die vorgegebenen Stockbilder mussten mit dem Thema in Einklang gebracht und in ein Composing verwandelt werden.Ich muss zugeben - mir selbst ist dazu nichts Vernünftigeseingefallen. Aber die Einsendungen haben michdann doch positiv überrascht. In welcher Art und Weiseman das Thema „Geometrie“ dann doch in Verbindungmit einer Riesen-Erdnuss oder einem Sessel veranschaulichenkann, ist schon bemerkenswert. DenVogel abgeschossen hat dabei aber Schnecke79 mitihrem „Baum des Pythagoras“, der mit seinen 399 Punkteneinen satten Vorsprung hatte und als Sieger durchden Zieleinlauf ging.Ein tolles Motiv, eine schöne Lichtstimmung, guterBildaufbau und harmonische Farben. Einziger (klitzekleiner)Kritikpunkt von mir wären diese weißen Fädenan den Baumfrüchten, die mir dann doch etwas zugleich (und gespiegelt) aussehen. Das ist dann aberwirklich das Einzige, was man hier ansprechen könnte.Dass die Stämme im zusammengesetzten Zustandnicht stimmig sind, kann durchaus gewollt sein, wenndie Elemente einzeln so wachsen würden.Glückwunsch zu diesem außergewöhnlichen „Abräumer-Bild“und dem ersten Sieg in F-Contest.Platz 1: Schnecke7974PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 3: 1stesahne - 226 PunktePlatz 2: Naila - 310 PunktePlatz 5: jackykfm - 132 Punkte75PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 4: Vlled - 147 PunktePlatz 6: Cass - 128 PunktePlatz 7: AndraKa - 115 Punkte Platz 8: Talirion - 79 Punkte Zur Übersicht76PSD-Tutorials.de COMMAG 12 | 13

Contests3D-November 2013 - WeihnachtenImmer wieder für Überraschungen gut, unsere 3Dler - schon im November einen Weihnachts-Contest zu veranstalten, um dann im eigentlichen Weihnachtsmonateinen Roboter zu basteln (der Contest läuft gerade). Aber unser Moderator, Herr keul3, hält sich da strikt an das Abstimmungsergebnis seiner 3dler - Volkes Wille eben :-)„Winner on points“ ist natürlich, wiekönnte es bei diesem Thema auch anderssein, der Weihnachtsmann. Dass derKlaus heißt, wissen wir nun auch endlich,seit vivi3 uns das bei der Vorstellung seinesModells verraten hat.877 Punkte gab es am Ende für dieseschöne Idee, die auch noch sehr nettumgesetzt wurde. CINEMA 4D und Illustratorsei dank.Herzlichen Glückwunsch, vielleicht verräter uns ja dann nach Weihnachten, wasin diesem kleinen, grünen Päckchen war.Platz 1: vivi377PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: TherionDracos - 710 PunktePlatz 4: Dineria - 602 PunktePlatz 3: Siedepunkt - 662 Punkte Platz 5: annabar - 398 Punkte Zur Übersicht78PSD-Tutorials.de COMMAG 12 | 13

Contests26. Foto-Kreativcontest - Baum„Mein Freund, der Baum...“ - schon dieverstorbene Schlagersängerin Alexandrawusste ein Lied davon zu singen.Mächtig und eindrucksvoll zeigten sichdie Exemplare, die unsere Fotokünstler inihrem 26. Kreativcontest zur Bewertungeinreichten. Und die fiel nicht geradeleicht, denn insgesamt 57 dieser Holzlieferantenwurden am Ende im Contestmodulvorgestellt.Michel1966 hat dabei ein besondersschönes Exemplar erwischt, hinter demsich gerade zum Zeitpunkt der Aufnahmedie Sonne verabschiedete.„Mein Freund, der Baum...“ hat wohl aucher am Ende dieses Votings gesungen,brachte er ihm doch die erste Medaillein einem Contest ein. Mit 424 Punktenund einem satten Vorsprung vor demnächsten Verfolger ein nie gefährdetererster Platz.Herzlichen Glückwunsch.Platz 1: Michel196679PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 4: sabok - 306 PunktePlatz 3: gerika - 310 PunktePlatz 2: AnkeP - 348 PunktePlatz 5: Jagoditsch Günter - 276 Punkte80PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 6: ZwenD - 232 PunktePlatz 7: Sprotte69 - 199 PunktePlatz 8: kywo - 153 PunktePlatz 9: Korfu03 - 147 PunkteZur Übersicht81PSD-Tutorials.de COMMAG 12 | 13

Contests76. Foto-Contest - Wasser/FlüssigkeitenIn die Runde 76 ging es diesen Monat bei unseren Fotofreunden. Flüssigkeitenund Wasser stand auf dem Programm, jene Substanz, von der dieHamburger und die Küstenbewohner derzeit in Überfluss haben, nachdemXaver hier alles durcheinandergepustet hat.Aber hier war weniger das Katastrophen-Szenario gefragt, als mehr diekünstlerische Darstellung dieses Elements.Gewinnen konnte hier wieder einmal Giga_01, mit einem ihrer typischenBilder, bei denen man sich im ersten Moment zwangsläufig fragt, wie siedenn das nun wieder geschafft hat.Schöne Farben, das richtige Licht und eindrucksvoll in Szene gesetzt. Dassind die Bilder, aus denen die ersten Plätze gemacht sind und die dannmit einem großen Vorsprung gewinnen. 471 Punkte und damit über 130Punkte vor dem nächsten Verfolger in diesem Fall.Glückwunsch zu diesem Bild.Platz 1: Giga_0182PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: Lachsy - 335 PunktePlatz 4: CassandrasBox - 273 PunktePlatz 3: conner - 310 Punkte83PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 5: Reddy61 - 248 PunktePlatz 6: Christian1980 - 190 PunktePlatz 7: PetraWo - 113 Punkte Platz 8: reitzvoll - 108 Punkte Zur Übersicht84PSD-Tutorials.de COMMAG 12 | 13

Contests27. Foto-Kreativkontest - „Von vorne“Sehr viel Freiheit hatten unsere Fotografenbeim 27. Kreativcontest, in dem das Thema„von vorne“ lautete. Und von vorne kannman bekanntlich alles fotografieren. Eigentlichnicht ganz verständlich, dass hier dann„nur“ 25 Bilder zusammenkamen, im Gegensatzzu den 58 Bildern im Baum-Contest. Vielleichtlag es ja am Novemberwetter.Bunt gemischt waren dann auch die Einreichungenin diesem Monat. Gewinnen konnteder Stubentiger von ZwenD, der hier offensichtlichauf der Pirsch ist.Perfekter Schärfepunkt, schöner Unschärfeverlaufin Vorder- und Hintergrund und dersatte Farbkontrast des schwarzen Fells zurgrünen Wiese ergaben am Ende 432 Punkteund damit fast 100 Punkte vor dem zweitenPlatz.Glückwunsch an ZwenD, da ist wohl eine Extra-PortionFutter für das Model fällig.Platz 1: ZwenD - 432 Punkte85PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: Giga_01 - 338 PunktePlatz 3: 1stesahne - 286 PunktePlatz 4: Bertha - 272 PunktePlatz 5: Carp1 - 227 Punkte86PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 8: Vetter_62 - 168 PunktePlatz 6: PetraWo - 196 Punkte Platz 7: conner - 181 Punkte Zur Übersicht87PSD-Tutorials.de COMMAG 12 | 13

Contests5. HDR/LDR 2013 - Herbstlandschaft“Auf den ersten Blick ein etwas ungewöhnlichesThema für einen HDR-Contest. Beigenauerer Hinsicht aber eignen sich auchherbstlich eingefärbte Landschaften hervorragendfür die Umsetzung als HDR-Bild.Aber auch hier gilt: Weniger ist oft mehr. Einzu starkes Tonemapping ist immer der Todeines jeden guten Bildes. Mittlerweile beherrschenunsere Fotofreunde das allerdingssehr gut und nur noch selten sieht man dieseübertriebenen „Augenkrebs“-HDR-Bilder.Gewinner des Monats November ist Archbside,der uns ein stimmungsvolles Seebildpräsentierte, das in einem kühlen Blautonden Betrachter verzaubert.435 Punkte gab es dafür und damit ganz klarPlatz 1. Herzlichen Glückwunsch.Platz 1: Archbside88PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: sabok - 374 PunktePlatz 3: istantaneofoto - 322 PunktePlatz 4: Himpelchen - 307 PunktePlatz 5: 1stesahne - 213 Punkte89PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 6: Smaddin - 172 PunktePlatz 7: Jagoditsch Günter - 164 PunktePlatz 8: Giga_01 - 158 Punkte Platz 9: Vetter_62 - 152 Punkte Zur Übersicht90PSD-Tutorials.de COMMAG 12 | 13

ContestsSmudge Painting - „Mittelalter“Das Smudgen erfreut sich nach wie vor großerBeliebtheit bei unseren Usern. Dabei hat„smudgen“ weniger mit Malen an sich zu tun,als vielmehr damit, mittels des Wischfingersdiesen Look zu vermitteln. Zeitlos aktuell istdas Tutorial dazu von Tattoomaus78, die dieseTechnik in den Grundlagen vermittelt. Weralso Lust bekommt, das selbst einmal zu probieren,sollte sich diese Anleitung näher ansehen.In dem Smudge-Contest im November ginges um das Thema „Mittelalter“, zu dem aus einembeliebigen Bild ein Pseudo-Gemälde erstelltwerden sollte.Gewinnerin wurde am Ende play_art, die unsein Bild von Galileo Galilei zeigte und hiereindrucksvoll die Smudgetechnik demonstriert.Dass dieser Herr ein paar Jahre nachdem Mittelalter lebte, sehen wir dann auchnicht so eng.Mit 704 Stimmen hatte play_art jedenfalls einengroßen Vorsprung von dem Verfolgerfeld.Herzlichen Glückwunsch.Platz 1: play_art91PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 2: Pixella - 567 PunktePlatz 5: Marlene Müller - 446 Punkte Platz 3: svaniland - 469 Punkte Platz 4: Nyatria - 449 Punkte92PSD-Tutorials.de COMMAG 12 | 13

ContestsPlatz 6: einstein64k - 417 Punkte Platz 7: sepiaschale - 392 Punkte Platz 11: 1stesahne - 348 PunktePlatz 9: SuicideOmen - 376 Punkte Platz 10: ilonatanase - 356 Punkte Platz 8: JPausDanderE - 384 Punkte Zur Übersicht93PSD-Tutorials.de COMMAG 12 | 13

ContestsCover-Contest - „Adventskalender“Beenden wollen wir die Contestumschau natürlich, wiees sich für eine Dezemberausgabe gehört, mit etwasWeihnachtlichem.Auch in diesem Jahr haben wir wieder einen Adventskalenderin unserem Forum, der viele Überraschungenbereithält. Wer ihn noch nicht kennt, sollte sich das unbedingteinmal ansehen.Für das Cover veranstalten wir alljährlich ebenfalls einenkleinen Contest und in diesem Jahr hatte Naila mit ihremBild die Nase vorn. Schade, dass wir immer nur ein einzigesBild verwenden können, denn auch die anderenEinreichungen waren gut. Wenigstens hier im Commagkönnen wir dann einige dieser Werke noch einmal zeigen.Und weil nur die Teilnahme zählt, alles ohne Punkteund Platzierungen :-)Allen Lesern des Contest-Teils wünsche ich dann damitein frohes Weihnachtsfest und schon jetzt schon einenguten Rutsch in ein neues, kreatives Jahr 2014.Bleibt alle gesund und behaltet die Freude an der Pixeleiund am Forum.Euer pepexxCover 2013: Naila94PSD-Tutorials.de COMMAG 12 | 13

ContestsSuicideOmenjackykfm1stesahneFloriBo95PSD-Tutorials.de COMMAG 12 | 13

ContestsBerthaMrCatheikehk_Marion96PSD-Tutorials.de COMMAG 12 | 13

Contestsdi_GradagestandeneFrauStille_WasserGambathyZur Übersicht97PSD-Tutorials.de COMMAG 12 | 13

Gossip2014 - ein AusblickIn der Januarausgabe 2013 habe ich einen kleinenAusblick gegeben, was wir im Team für diesesJahr in Angriff nehmen wollten. Und in der Tat: Diemeisten Punkte haben wir (an-) gepackt. Im Jahresrückblickvon Stefan Riedl fehlt der Punkt der „Reaktivierung“unseres Bildungsprojektes Grafik macht Schule.Auch das war uns zum Jahresbeginn ein Anliegen,welches wir im Mai realisiert haben. Seitdem haben wir33 Schulen mit einem Trainingspaket zu Photoshop,InDesign und Illustrator unterstützt - im Schnitt wurdejede Woche eine Schule versorgt. Das gefällt mir!Es ist oft wichtig, dass man sich seine Ziele auch notiert.Es hilft bei der Erfolgskontrolle, weist aber auchschon einmal den Weg, wohin man sich überhaupt bewegenmag. Mir fällt dazu ein Zitat aus „Fight-Club“ vonChuck Palahniuk ein: „Wenn man nicht weiß, was manwill, steht man am Ende mit vielem da, was man nichtwill.“ Tatsächlich zücke ich dieses Zitat hin und wiederund quäle damit zumeist Stefan, wenn wir wankelmütigsind und eine Entscheidung her muss.Nun möchte ich einen Ausblick geben, was wir uns für2014 vorgenommen haben, welche Ziele wir erreichenwollen und wohin es einerseits mit PSD gehen soll undwas für mich mein persönlicher Wunsch für das kommendeJahr ist.Stefan hat es ja nun schon oft genug im Editorial angekündigt,dass eine neue Forumsoftware ansteht. Tatsächlichist das ein wichtiger Punkt, um forumseitigtechnisch auch weiterhin up to date zu bleiben. DieFunktionen und Bedienmöglichkeiten für User bleibenin etwa die gleichen; das Backend wird schlanker.Für uns ist es am wichtigsten, dass die Forumsoftwareanbieterbei der Sache sind. Leider hat vBulletinin der Vergangenheit seine Hausaufgaben ein wenigvernachlässigt. Vom Hack sind wir nicht betroffen, weiluns schon die letzten Updates nicht überzeugt und wirauf neuere und schnellere Versionen gewartet haben.Nun wechseln wir den Anbieter komplett und setzenunsere Hoffnung auf die Software xenforo, welche vonehemaligen vBulletin-Mitarbeitern entwickelt wurdeund weiterhin betreut wird.Die mobile Optimierung von PSD-Tutorials.de ist nochnicht wirklich optimal gelungen und in diesem Punktmüssen wir noch einige Fortschritte erzielen. Das wirdsicher gleich in den erstenMonaten des JahresMatthiasein Thema. Vorher wird aber noch, wie bereits StefanR. im Jahresrückblick angekündigt hat, unser Shop miteinem neuen Antlitz das Licht der Welt erblicken. Nebeneiner schlankeren Optik wird es endlich auch eineZahlung mit Kreditkarte und mit Bankeinzug ermöglichen.Auf den neuen Shop bin ich wirklich schon sehrgespannt, weil wir in den letzten Monaten auch inhaltlichmit den vielen Trailern zu den Trainings einigesvorbereitet haben.Sehr freue ich mich auf das Usertreffen im Mai. Grundsätzlichdenken Stefan und ich, dass es sinnvoll wäre,wenn wir neben eigenen Veranstaltungen auch einpaar mehr Einladungen zu den Events unserer Partneroder anderer Macher im Netz annehmen. Ob nach derPubkon in Berlin, der Mediale in Hamburg oder jüngstbeim WEKA-Jubiläum in Augsburg, jedes Mal sagenwir uns: Es hat sich doch gelohnt, den Weg (und dieKosten) auf uns zu nehmen. Neue Kontakte und eininspirierender Austausch mit Partnern und Freundentragen oft ungeahnte Früchte. Daher glaube ich, dasswir 2014 doch noch ein Stück mehr in Deutschland98PSD-Tutorials.de COMMAG 12 | 13

Gossipunterwegs sein und vielleicht auch den einen oder anderenPSD-Stammtisch besuchen werden.Bereits vor einigen Monaten haben wir unsere erste„PSD-App“ auf den Weg gebracht. Diese wurde mitAdobe PhoneGap entwickelt. Allerdings haben wir dieArbeiten daran nicht ganz abgeschlossen. Jetzt maleine Frage an euch: Brauchen wir das? Braucht PSDeine App, die euch über die neuen Inhalte informiert?Vermisst ihr so eine App für unser Portal? Ich bin malehrlich, traurig bin ich nicht, wenn ihr sagt: Nö, alles istgut, wie es läuft.Schön wäre auch, wenn wir ein bisschen mehr Kontinuitätin die Durchführung von Webinaren bekommen.Aktuell scheitert es noch daran, dass wir nochnicht den einen Softwarepartner haben, mit dem dieRahmenbedingungen vollends stimmen. Zusammenmit Franzis hat es bisher immer super geklappt, dochdürfen wir unseren Partner auch nicht zu sehr strapazieren.Flexibler sind wir, wenn wir eigenständig agierenkönnen. Ich bin zuversichtlich, dass wir dieses Themanoch im ersten Halbjahr zufriedenstellend lösenkönnen. Zum Jahresausgang konnten wir eine Sponsoringlösungfür „Adobe Connect“ voranbringen, beider der aktuelle Status frei mit „in der Mache“ definiertwerden kann.Inhaltlich haben wir seit jeher immer viel Gas gegebenund konnten die Freischaltfequenz neuer Inhalteauf 4 pro Tag erhöhen. Wir wollen, dass es auch 2014mit mindestens drei täglich neuen Freischaltungenvon Tutorials, Video-Trainings oder Downloads weitergeht.Konkret werden kann ich schon zu folgendenThemen: Von Uli Staiger werden wir eine Videoserie zuBodyPaint 3D freischalten, Jens Brüggemann steuertzwei Tutorialserien bei - eine zur Modelfotografie undeine zur Konzertfotografie. Marco Kolditz wird weitereVideo-Trainings erstellen zum Compositing mit Photoshop.Auch wird Irina Beck (ehemals Ivenzia Art) Tutorialszur Porträt-Retusche und zum Compositing beisteuern.Wir werden sicher ein umfassendes Trainingzum modernen Webdesign auflegen, ggf. auch weitereentwicklungsspezifische Trainings wie etwa zu Bootstrap,zu Web-Apps und ein weiteres zum CMS Word-Press. Weiterhin sind in unserer Pipeline bereits jetztInhalte zu Adobe Acrobat, zu Corel PaintShop Pro, zuAdobe InDesign und natürlich auch einige Photoshop-Inhalte. Ihr seht, auch 2014 wird für euch ein gehaltvollesund kreatives Content-Jahr. Ich selbst werde in denkommenden Wochen ein Training aufnehmen zumThema Präsentieren mit Prezi. In den letzten Monatenwar ich im Rahmen unserer Agenturtätigkeit (4eck-media.de)auf mehreren Pitches und habe dort zum Aha-Erlebnis der Teilnehmer Prezi als Präsentationssoftwareeingesetzt. So habe ich schon mehrere Praxis-Prezis,die ich direkt in meinem Training zu Prezi verwertenmöchte, um euch eine wirklich effektive und kreativeAlternative zu PowerPoint nahezulegen. Wer Prezinicht kennt, ist beim ersten Mal einfach beeindruckt.Ich weiß selbst noch, wie angetan ich von einem Vortragbei der TION in Köln war, bei der Prezi verwendetwurde. Im Januar erscheint dazu mein Training.Generell wird unsere Agentur 2014 eine zunehmendwichtiger werdende Rolle für unser Team spielen. Ihrbekommt davon in der Regel eher weniger mit. Abund zu zeigen wir in unseren Trainings Projekte, die tatsächlichim Kundenauftrag entstanden sind. Und so istes auch unsere Messlatte, dass wir in unseren Tutorialsund Video-Trainings nur die Qualität in den Arbeitsergebnissenzeigen, die möglichst nah an der Praxisorientiert sind und die wir auch bedenkenlos unserenAgenturkunden anbieten könnten.Mein persönlicher Traum ist es, dass ich Stefan nachWaren an die Müritz gelockt bekomme. Mal schauen,ob es klappt. Ich werde im kommenden Dezembergern unsere Ziele für 2014 auswerten.Allen Lesern des Commags wünsche ich nun eineschöne Weihnachtszeit, viel Freude im Beisein der Familie,genügend Zeit für Müßiggang und reichlich gutesEssen. Ich danke allen engagierten Usern und vorallem unseren Moderatoren für ihren unermüdlichenEinsatz für diese wunderbare Community. Ohne euchwäre hier alles einfach nichts. Mein tief empfundenerDank gilt euch.Herzlichst,euch Matthias99PSD-Tutorials.de COMMAG 12 | 13

LeserbriefeKOMMENTARE +++ KOMMENTARE +++ KOMMENTARE +++ KOMMENTAREHinweis zum Commag:Das Commag finanziert sich allein mit der angezeigtenWerbung. Welche Werbung? Richtig, hier gibt esja kaum Werbung. Wir sind nämlich ein ideelles Redaktionsteamund sind glücklich mit dem, was wirmachen. Das Commag, unser Online-Magazin fürBildbearbeitung, ist daher seit jeher kostenlos undpunktefrei.Aber: Trotz all unserer Ideale sind wir dennoch offenfür Werbeanzeigen. Am Preis des Magazins ändertsich dadurch nichts. Es bleibt kostenlos.Werbung schalten:Wir veröffentlichen themenrelevante Werbung zugünstigen Konditionen. Die Werbung darf farbigsein. Für die Auflösung der Grafik reichen 72 DPI (Bildschirmanzeige).Neben Textelementen sind ebensografische Werbeangebote willkommen. Nur solltendiese nicht zu kurvenreich sein, heißt: Wir schaltennur seriöse Werbung, keine Erotik und dergleichen.Kontakt siehe Impressum.lichtwerkerg: Gratulation zur 100sten Ausgabe. Ein wirklich klasse Magazin und eine klasse Webseitehabt ihr hier mit PSD-Tutorials geschaffen.AngelikaKruseg: Herzlichste Glückwünsche zur 100 Ausgabe und vielen Dank an das Team für dieMühe, die Ihr Euch macht um uns immer zu informierenmsblackyg: Herzlichen Glückwunsch zu der 100. Ausgabe auch von mir. Wie immer sehr interessanteArtikel / Interviews, freue mich auch auf jede neue Ausgabe und habe sie alle bei mir gespeichert,macht weiter so.Heilkraeuterg: Vielen Dank an die Commag-Redaktion. Weiter so! 100 ist ein grandioser Meilenstein.Wir freuen uns auf viele weitere Ausgaben :-)Tus_neldmg: Ein Hoch auf „Mutter Petri“, denn anscheinend war sie die Antreiberin und nun könnenwir euch schon zur 100sten Ausgabe gratulieren.Toll!!! Gesundheit für euch „Macher“ und dasihr immer Lust habt uns mit so viel Interessantem zu versorgen. Gratulation und herzlichen Dankfür eure Arbeit.Kilkeeg: Herzlichen Glückwunsch zum Heft 100! Eigentlich bekommt das Geburtstagskind etwas, ihrdreht den Spieß um, der Leser wird bedacht, danke. Für die folgenden Jahre alles Gute und bleibtso frisch und munter!Hardy36g: 100-ste Ausgabe, was für ein Jubiläum. Alles super gemacht. Meine herzlichste Gratulation!Weiterhin viel Erfolg! Über die 100 Punkte kann man sich sehr freuen, ein großes Dankeschön dafür.schwarzwaldhaseg: Vielen Dank für die tolle kostenlose online Zeitschrift! Ich bin begeisterter Leserund muss sagen, Ihr macht das einfach super, weiter so!!!!barnetg: Eine echt übermenschliche Leistung. Jedes gewöhnliche Lob würde dieser Leistung nichtgerecht werden. Nur welche Worte finden? Ok: einfach SUPER. Ein aufrichtiges Dankeschön an denVerfasser! Unnachahmlich! Einzigartig! Kostbar!KOMMENTARE +++ KOMMENTARE +++ KOMMENTARE +++ KOMMENTARE100PSD-Tutorials.de COMMAG 12 | 13

AusgabenarchivDie letzten sechs AusgabenKlicke hier, um alle Ausgaben zu sehen!101 PSD-Tutorials.de COMMAG 12 | 13

TeamDie Commag-RedaktionStefan PetriEditorialStefans charmante Willkommenswortebilden den AuftaktMatthias PetriGossip, TitelthemaMatthias sorgt für das bleibendeSchlusswort am EndeStefan RiedlLayout, SchlussredaktionStefan ist leitender Redakteurdes CommagsKatharina JmouhLayout, KameratestKatharina layoutet monatlichunsere beliebten KameratestsMarie HubaldLektoratMarie leistet den wertvollenDienst der lektorischen PrüfungPeter DankeContestsPepe stemmt monatlich dasMammutprojekt der ContestsWir bedanken uns bei:Patrick Glaser alias vivi3 für das schöne Cover, Productivedreams.com (Social-Media-Icons) und Pekchar - Fotolia.com (Teamicon Sissi)102PSD-Tutorials.de COMMAG 12 | 13

TeamDie Commag-RedaktionDennis KovarikRedaktionCarsten JüngerInterviewsMaurizio RudariLayoutDennis betreut den BereichDesign und WebentwicklungCarsten ist immer auf der Suchenach neuen InterviewpartnernMaurizio layoutet und packt an,wo die Dinge in Form gehörenStavros VlahopulosKoordinierender RedakteurChris RandacekInterviewsSissiLayout / RedaktionStavros hilft bei der Koordinationder Inhalte und layoutet fleißig mitHumor und kommunikativesVerhalten sind Chris‘ StärkenAktuelle Kennzahlen»»349.369 Registrierte Mitglieder»»2.121.272 Foreneinträge»»25.454 Facebook-Fans»»2.928 Twitter-Follower»»3.806 Google+»»4.470 YouTube Abonnenten»»11.187 Commag-Leser (PDF)»»101 Commag-Ausgaben»»1.107 abgeschl. Contests»»2.398 Video-Trainings»»3.288 Tutorials»»2.470 DownloadsAnbieterkennzeichnung - das Commag wird herausgegeben vonPSD-Tutorials.de, betrieben von:USt-IdNr: DE8151330314eck Media GmbH & Co. KGSitz Viereck, AG Neubrandenburg, HRA 2067Hauptstraße 20, 17309 ViereckKomplementärin:Telefon: 0551-276596114eck Media Verwaltungsgesellschaft mbHE-Mail: webmaster@psd-tutorials.de Sitz: Viereck, AG Neubrandenburg, HRB 7234GF: Stefan Petri (ViSdP), Matthias Petri Zusammengefasste Bildquellenangabe.103PSD-Tutorials.de COMMAG 12 | 13

Anzeige