• Photoshop CS6 ExtendedPhotoshop CS6 Extended

Vom 07. bis 11. April 2014 findet an der VHS Braunschweig ein Ganztagsseminar (Bildungsurlaub) mit dem Thema "Photoshop für das Webdesign" statt. In Form eines praxisorientiertem Seminar mit der letzten Creative Suite Version CS 6 wollen wir uns die nötigen Techniken für attraktive und stimmige Webdesigns aneignen. Das Seminar ist als Workshop angelegt und wendet sich an Interessenten an weiterführende Photoshop-Technken.

Hier die Rahmendaten unseres Seminars:

Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11
Zeiten: Mo. 07.04. bis Fr. 11.04.14; jeweils 08.30 - 16.00 Uhr

Als besonderes "Schmankerl" stehen den Teilnehmern an VHS-Kursen verschiedene Adobe Software Angebote - bis hin zu den Creative Suites -  im Rahmen eines gesonderten Lizenzprogramms über den DVV und Cobra-Shop zur Verfügung:

Adobe VHS-Kursteilnehmer Lizenzen über DVV / Cobra-Shop

Hier folgt jetzt auch wieder unser "Roter Faden" für die Seminarwoche...
Ihr Trainer Joe Brandes

 

Tag 01 - Montag

Montag, 07.04.2014, 08.30 - 16.00 Uhr

  • Orientierung / Seminar- und TN-Themen
    Kurzanm. zu Themen der Woche: recht passend zu der Ausschreibung (s.u.)
    Hinweis auf Adobe-VHS-Lizenzen über den Cobra-Shop
  • Ausschreibung VHS Braunschweig
    Gute und erfolgreiche Webseiten leben auch von einem attraktiven und stimmigen Design.
    Unser Workshop zeigt die wichtigsten Aspekte der Grafikerstellung für das Web mit der professionellen Bildbearbeitung Photoshop.
    • Optimierung von Bildern für das Web
    • Farben wählen und kombinieren (Farbkonzepte)
    • Bilder mit Transparenz und Freistellungseffekten
    • Design von Icons, Buttons und Hintergründen
    • Schriften darstellen (Fonts, Textdesign, Effekte, Typografie)
    • Komplettes Webprojekt mit Photoshop (Umsetzung von A bis Z)
  • Photoshop Versionen
    Aktuell CS6 ist Version 13 / CC - Creative Cloud zur Monatsmiete -  dann Versionen 14ff; Einführung der CS (Creative Suite) nach Version 7; Extended Version mit zusätzlichen Fähigkeiten bei 3D, Video, Statistik und Medizin-technischen Zusatzfunktionen; Versionen für Schüler/Studenten/Firmen;
    seit Ende 2013: es gibt wieder CS6 Versionen zu guten Konditionen beim Cobra-Shop
  • Einstellungen von Photoshop CS6 auf Webbearbeitung
    Konzentration der Einstellungen auf webkonforme Größen: Pixel, RGB, Webfarben
    Beispiele:
    Voreinstellungen - Benutzeroberfläche (Farbdesigns mittels Umschalten F1/F2 dunkler/heller), keine Rahmungen
    Voreinstellungen - Maßeinheiten & Lineale (Strg + K oder direkt über Menü)
    Voreinstellungen - Hilfslinien, Raster und Slices (Hinweis auf 320 Pixel als Kleinstmaß für Viewports - siehe Website mediaqueri.es)
    Palette Info: RGB, Webfarben, Dokumentmaße in Pixeln
    Lineale: Strg + R, Maße in Pixeln, Nullpunkt setzen; auch: Hilfslinien aus Lineal herausziehen
    Paletten Zeichen / Absatz: keine speziellen Zeichformatierungen (z.B. Ligaturen) nutzen, weil diese nicht per CSS nutzbar sind, Laufweiten können genutzt - aber sollten dann unbedingt dokumentiert werden, damit sie in CSS landen; bei Absätzen ohne Silbentrennung arbeiten
    Vektor-/Form-/Pfad-Werkzeuge: "An Raster ausrichten" - dann klappt es auch mit Pixelgenauer Rasterung
  • Arbeitsbereiche
    Paletten (umstellen, konfigurieren), Toolbox (Werkzeugkasten) mit Eigenschaftenleiste
    Arbeitsbereiche erstellen und wiederherstellen, Erscheinungsbild der Programmoberfläche einstellbar
    eigene Arbeitsbereiche speichern und ändern; inklusive Tastaturbefehle, Menüs (Sichtbarkeit, Farben)
    siehe Beispiele für CS6: Arbeitsbereich "Neu in CS6"
    Fenster managen mit Tab (Ausblenden Toolbox / Paletten) und F (Fenstermodi)
  • nicht invasive / nicht "Pixel-verändernde" Techniken:
    Ebenen kopieren; Smartobjekt Ebenen in Kombination mit Smartfiltern; Einstellungsebenen (siehe Gradationskurven, Farbton/Sättigungn) statt der direkten Bearbeitung (Bild - Korrekturen); Vektorformen nutzen (siehe Abteilung in Toolbox mit Textwerkzeug)
  • Ebenen Palette
    Ebene kopieren Strg + J (funktioniert jetzt auch mit Gruppen)
    Ebenen benennen (Tipp: bei Umbennen-Modus kann jetzt mit Tab weiter gesprungen werden), neue transparente Ebene einfügen (Umschalten + Strg + N), Ebenen ein-/ausblenden (Auge vor Ebene)
    Ebenenstile lassen sich jetzt auch auf Gruppen anwenden
    Gruppe für mehrere Ebenen, Gruppen/Ebenen einfärben, Reihenfolge von Ebenen manipuliert
    Tipp: Alt-Taste und Klick auf "Auge" blendet alle anderen Ebenen aus/ein
    Neue Filter-Mechanismen nach Art, Name, Effekt, Modus, Atribut, Farbe
    Alle fx (Ebeneneffekte) lassen sich mit Alt + Klick in einem Schritt ein-/ausblenden
    Schnittmasken nutzen bei Einstellungsebenen und Filtern (siehe Übungen "Text mit Verläufen / Bildern füllen")
  • Protokoll Palette
    Schnappschüsse verwalten und Rückgängig-Funktionalität von Photoshop
    Anm.: Verläufe in Protokoll und die Schnappschüsse nur während Bearbeitung nutzbar
  • Pinsel (B)
    eigene Palette, effiziente Einstellung von Durchmesser und/oder Härte mittels Rechter Maustasten-Menü oder über Alt + Rechte Maus mit Ziehen hor./vert. für Durchmesser/Härte; neue Pinsel (erodierbare, drucksensitive - funktioniert nur mit Tablets als Eingabegerät)
  • Pipette (I), Farbfelder
    Farbaufnehmer für Vorder- und Hintergrundfarben (mit Alt-Taste), Paletten Farbe und Farbfelder
    eigene Farben definiert, über Webportale wie kuler.adobe.com oder www.colorschemedesigner.com lassen sich Farbschemen erzeugen, analysieren und für Photoshop exportieren (*.aco - Photoshop Adobe Color Dateien)
    Kuler auch direkt in Photoshop über Fenster - Erweiterungen - Kuler als Palette verfügbar
    Farbfelder über Palettenoptionen verwaltbar: Vorgaben-Manager...
    Trick Pipette: Farben außerhalb von Photoshop mit gehaltener Maustaste aufnehmen
    Pipette über Rechte Maus auf Aufnahme-Durchmesser ändern (min 11x11 Pixel), Farben lassen sich als HTML- oder Webcode kopieren
    Mozilla Firefox AddOn: Colorzilla
  • Reborn-Karte / Hardwareabsicherung der TN-PCs
    Laufwerk C: immer nach Neustart zurückgesetzt; Lösung: Sicherung der Benutzerprofil-Ordner für Photoshop CS6:
    Pfad: C:\Benutzer\Teilnehmer\AppData\Roaming\Adobe\Adobe Photoshop CS6
    Ordner dort auf Datenlaufwerk D: sichern und dann morgen wieder ersetzen!
  • Letzter Tipp vor "Dienstschluss"
    Einfaches "Reparieren" von Bildbereichen mittels Lasso um Stelle und dann mittels "Fläche füllen - Umschalten + F5" die neue Technik "inhaltsbasiert" füllen

 

  • KulerKuler
  • SchnittmaskenSchnittmasken
  • PalettenPaletten
  • VoreinstellungenVoreinstellungen
  • PixelPixel
  • Photoshop CS6Photoshop CS6
 

Tag 02 - Dienstag

Dienstag, 08.04.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    Themen Montag gezeigt; Hinweis Seite terrashop (www.terrashop.de)
  • Wiederherstellung Arbeits-/Benutzerprofil Photoshop
    siehe Ende Montag mit Pfad "AppData"; Tipp für Sicherung der Photoshop-Umgebung
  • Freistellungswerkzeug (C)
    möglichst alle Erstreparaturen am Bild (Zuschneiden, Drehen, Ausrichten) in einem Arbeitsschritt mit Croptool
    Empfehlung: die äußeren Bildpunkte nicht löschen lassen (nicht-destruktiv arbeiten)
  • Inhaltsbasiert skalieren
    ein erstaunliches Werkzeug (Menü Bearbeiten) zum Strecken/Stauchen von Bildbereichen
  • Pixelgenaues Arbeiten
    an Formwerkzeugen die Auswirkungen von Konturen (außen, innen, Rundungen) ermittelt und mit Pixel-Masken-Bereichen verglichen; auf Aktivierung von "Kanten ausrichten" achten
    saubere Linien mit dem Bleistift (nicht Pinsel!); gerade Linien mit Umschalten-Taste
  • Saubere Verläufe mit Schattenkanten
    Deaktivierung von Globalem Licht (bei Webtechnik meist angeraten) und 90 bzw. -90 Grad Winkel
    Transformation der geschatteten Objekte über die Dokumentgrenzen, damit die Verläufe der Schatten sauber sind
  • Flächen aufwerten
    Nutzung von Radialverläufen mit Grundfarbe und zweiter Zielfarbe
    Nutzung von Werkzeug O: Abwedler, Nachbelichter (während der Arbeit mit Alt umschaltbar)
    Anm.: heute noch destruktiv in Flächen gearbeitet
    Glanzlicht mit Extra-Ebene (Radialverlauf Weiß - Transparenz, Weiches Licht, Deckkraft verringern)
  • Photoshop Bücher (dicke Wälzer zum Grundthema Photoshop)
    H. Neumeyer zum Thema
    Photoshop CS6 „Handbuch für Bildbearbeiter“
    ISBN: 978-3-8273-3168-7
    1056 Seiten; erschienen 26.9.2012 beim Addison-Wesley-Verlag (Pearson)
    Sibylle Mühlke zum Thema
    Adobe Photoshop CS6 und CC: Das umfassende Handbuch
    ISBN: 3836218836
    1219 Seiten; Galileo Verlag Design, Auflage: 1 (28. November 2012)
  • Maskieren - Freistellen
    Zauberstäbe (W - Wizard): Schnellauswahlwerkzeug, klassischer Zauberstab
    Maskierungsmodus (Q) - mittels Rotliche aus klassischer analoger Dunkelkammer Visualisierung der Maskierungsbereiche; Wichtig: bitte daran denken wieder auszuschalten!
    Technik "Kante verbessern" nutzen, Auswahl umkehren (Umschalten + Strg + I), Ebenenmaske erstellen per Klick in Ebenenpalette (Menü unten), Ebenenmaske invertieren (Strg + I)
  • Histogramm
    statische Analyse der Bildpunkte; wichtige Info für Bildanpassungen (Helligkeit, Farbkorrektur, ...)
    Online-Hilfe Adobe (Link)
  • Tonwertkorrektur vs. Gradationskurven
    Online-Hilfe Adobe (Link)
    Aritkel zu beiden Korrekturen auf webmasterpro.de (Link)
  • Bildkorrekturen (Aufhellungen - Farbstiche)
    Korrekturebene Gradationskurve mit Maske; Speichern und Laden von Gradationskurven als *.acv Dateien über die Paletten-Menüs

 

  • PixelgenauPixelgenau
  • BleistiftBleistift
  • Flächen aufwertenFlächen aufwerten
  • GlanzlichGlanzlich
  • EbenenmaskeEbenenmaske
  • Info Palette F8Info Palette F8
 

Tag 03 - Mittwoch

Mittwoch, 09.04.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Forts. Übungen zum Maskieren und Freistellen
    die Maskenwerkzeuge (M, W, L); Kombinieren über Umschalten (Addieren-Modus) und Alt-Taste (Subtrahieren-Modus), Maskierungsmodus (Rot-Licht der klassischen Dunkelkammer), immer: Kante verbessern...; Erstellen von Ebenenmaske über Symbol in Palette Ebenen; Auswahl umkehren / invertieren (Umschalten + Strg + I)
    Praktische Übung unter Einsatz von Zoom-Nutzung (Z) und temporärem Hand-Werkzeug (Leertaste) zum Verschieben des Arbeitsausschnitts
  • Auswahl (Maskierung) Farbbereich
    Übung: Farbe wechseln für ""Leuchtturm und Boje"; Nutzung von alternativer Maskierungstechnik (Auswahl - Farbbereich...) und Farben wechseln über Einstellungsebene (Korrekturebene) Farbton/Sättigung; wieder Nutzung/Einsatz der Ebenenmasken zur Verfeinerung
  • Videotutorials "Haare freitstellen"
    siehe Linksammlung Photoshop; Techniken mittels Ebenenmodi (Pavel Kaplun - photoshop-profis.de) oder über Kanäle
  • Forts. Flächen aufwerten
    Werkzeug (O) - Abwedler / Nachbelichter; jetzt über neue Ebene "50 % Grau" im Ebenenmodus "Weiches Licht" als Schnittmaske
    mittels Neue Ebene Erstellen (Umschalten + Strg + N oder Alt - Klick in Ebenenpalettensymbol "Neue Ebene" können gleich alle nötigen Werte eingestellt werden
  • Icon gestalten
    ein einacher runder Kleber nach Anleitung aus Buch "Böttigheimer" erstellt; hier neu: neue Ebene aus Auswahl mittels Rechtsklick
    typische (quadratische) Größen ab 16, 32, 48, 64, ..., 256 oder auch mittlerweile 512 Pixel
    allgemeine Infos Wikipedia zum Thema Icons (Link); Grafikformate hier: *.ico, *.png (oder auch später *.svg)
    Anm. zu *.ico Format: Nutzung als Favicon für Website; Photoshop benötigt Plugin, um Favicons erstellen zuu können; einfache Lösung: Favicon Generatoren im Web
    Tipp: Einsatz von "Spezial-Fonts" als Icons im Web am Beispiel von Projekt "Fontawesome"
  • Farbräume (und Tiefe in den Kanälen in 8 / 16 / 32 Bit) - nur kurz Thema angerissen - hier mehr weiterführende Infos
    RGB - Rot, Grün, Blau; Monitordarstellung; Wikipedia-Link
    CMYK - Cyan, Magenta, Yellow, "Schwarz"; Grundtechnik für Drucken (Stichwort: Druckvorstufen, Farbseparation); Wikipedia-Link
    Lab - Helligkeit und Koordinaten für Farben a / b; Geräteunabhängigkeit; Stichwort: Alle Farben; Wikipedia-Link
    Tests mit Farbproof (Strg + Y)  bzw. Farbumfangwarnung (Umschalten + Strg + Y)
    Gegenüberstellung / Vergleich der Farbräume sRGB, CMYK und "Alle Farben Lab" siehe Wikipedia-Info-Grafik aus Lab-Artikel
  • Monitorkalibrierung - nur kurz Thema erwähnt- hier mehr weiterführende Infos
    Beispielvideo (Eizo) zum Thema Kalibrierung: Link; Wikipedia-Artikel (Link); Website mit ausführlichen Technikdarstellungen zu Monitoren und Tests auf Portal prad.de (Link)
  • Grafikdateitypen (Grafikformate)
    Übersicht im Hand-Out (später Download hier im Beitrag); Übersicht Wikipedia (Link);
    Konzentration auf bmp, jpg, gif, png (png-8, png-24), tif; Einschätzung hinsichtlich Techniken Komprimierung, Ebenen, Tranparenz
    Speziell: Animated Gifs (als Übung dann Do)
    Verschiedene Qualitäten jpg den entstandenen Dateigrößen gegenübergestellt
  • Für Web (und Geräte) speichern ...
    spezieller Dialog zum Optiemieren und Anpassen der Grafikexporte: Dateityp, Typeigenschaften, Farbanzahl bei indizierten Farben (siehe gif / png), Transparenzen, Bilddimensionen in Pixel (Webbilder - Größenbereiche: Vollformate ca. 600 - 800 px Breite mit max. 100 kB)

 

  • 50% Grau50% Grau
  • IcondesignIcondesign
  • Lab FarbenLab Farben
  • Masken kombinierenMasken kombinieren
  • EbenenEbenen
  • JPEG KomprimierungenJPEG Komprimierungen
 

Tag 04 - Donnerstag

Donnerstag, 10.04.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    Forts. Übung Dateitypen: Animated Gifs
  • Für Web (und Geräte) speichern ...
    Hinweis und Infos zu Auflösungen in ppi (respektive dpi - Dots per Inch); Monitorauflösungen historischen 72 ppi (daher auch Standardpunkte pt ≡ 1/72 Zoll) für die ersten WYSIWYG Techniken (What You See Is What You Get), Webexport von Photoshop schreibt 96 ppi, aktuelle Hochauflösungsmonitore (siehe z.B. Retina Displays von Apple) haben deutliche höhere Auflösungen, was Konsequenzen für die Bereitstellung von qualitativ hochwertigen Bildern hat!
  • Animated Gifs
    Übung "Ladenbalken": Erstellung von verschachtelten runden Langformen und Füllung mit geeignetem Muster (engl. Pattern)
    Direkte Eingabe von Formwerten durch Klick in Arbeitsfläche
    Tipp: Erstellung von Mustern (hier: 20 x 20 px) mit Hilfe eines Streifengenerators (www.stripegenerator.com); dann mit Photoshop über Bearbeiten - Muster festlegen... (*.pat Dateien)
    Zeitleisten Palette (einblenden) und auf Modus "Frame-Animation" einstellen; Frames durch Verschieben der Füllmuster mit passenden Abständen erstellen (hier: 4 Frames mit 10 px Schritten); per "Für Web speichern..." als Gif mit und ohne Transparenz speichern
    Fertige Animationen lassen sich zu hauf im Web finden - z.B. www.ajaxload.info oder auch in aktuellen HTML/CSS Frameworks integriert
    Verbesserte Version (nach Vorlage Jonas Hellwig) für TN bereitgestellt (Effekte, Glanz, Hintergrundebene durch Rauschen und Glanzlicht aufgewertet)
  • Buttons (Schaltflächen)
    einfache Verläufe überarbeitet mir mehrstufigen Verläufen; hier die Doku zu unserer "Grünverlaufs-Schaltfläche":
    49b151 (0); 49b251 (50); 259a2e (51); 2d9934 (100) - Verstärken mit Abgefl. Kante und Relief (kein globales Licht - 90Grad - 1000 Tiefe -  Größe/Weichzeichnen 0; unten Normal - Weiß - Deckkraft ggf. anpassen)
    Styling in der Website dann per CSS entweder manuell oder über Tools (nur 2 Beispiele):
    CSS3Ps - ein Plugin für Photoshop (Link); Installation einer zxp-Datei über den Extension-Manager von Adobe
    Ultimate CSS Gradiant Generator (Link) - ein Webtool mit Einstellungmöglichkeiten wie in Photoshop-Verläufen
    Tipp: Verläufe in Photoshop lassen sich speichern und somit wiederverwenden
  • Schlagschatten manuell optimieren
    Form mit Schlagschatten (gelb) mit Schlagschatten; Ebenenstile auflösen: Über Kontext zu fx - Ebenen erstellen
    Export der transparenten Strukturen verglichen: gif, png-8, png-24
  • Aktionen Palette
    Übersicht über den Aufbau der Palette - Satz (beinhaltet die Aktionen) und einzelne Aktionen; Aufzeichnung von Aktionen
    Übung: Aufzeichnung einer einzelnen "Für Web speichern..."-Aktion: automatisierte Nutzung mit Hilfe von "Datei - Automatisieren - Stapelverarbeitung; Vollautomatik mit Hilfe von Automatisieren - Droplets...
    Anm.: beim Nachvollziehen auf meinen Systemen konnte ich keine Probleme bei der Anwendung von Dateiumbennungen erkennen!
    Laden von Aktionen für die Umsetzung des 960.gs-Gridsystems (Download enthält *.atn Datei, die sich über die Aktionen Palette als Satz von 3 Aktionen laden lässt
  • Entwurfslayouts für Websites
    Eine Annäherung an die ersten "groben" Layouts mit beispielhaftem Gridsystem 960.gs (Link)
    Bereitstellung von PDF mit den Teilungssystemen mit 12, 16 oder auch 24 Spalten/Grids

 

  • Muster - PatternMuster - Pattern
  • LadebalkenLadebalken
  • CSS3Ps PluginCSS3Ps Plugin
  • GrafikformateGrafikformate
  • CSS3 VerläufeCSS3 Verläufe
  • TransparenzenTransparenzen
 

Tag 05 - Freitag

Freitag, 11.04.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Automatisieren, Skripten
    Komplettierung der Umsetzungen mittels Stapelverarbeitung, Droplets, Skripten (Dateien per Stapel laden) oder auch Bildprozessor
    Spezial: HDR (1. technisch: 32-Bit Kanäle; 2. künstlerisch: starke, prägnante Bilder - siehe Google Recherche HDR Bilder)
  • Icon, Navigationen, Formulare als Gesamtentwurf
    Bereitstellung einer PSD mit sauber erarbeiteten Oberflächen (UI - User Interface): Modern menu & GUI elements PSD (Link)
    Wichtig: Lizenzen der "frei" erhältlichen Quellen beachten!
    Schriften (Fonts): häufig müssen Schriften extra beachtet / installiert werden (auch hier Lizenzen beachten - gute Quelle für freie Fonts: Google Fonts (Link)
    Tipp: zielgerichteter "Export" einzelner Bildbereiche mittels Umschalten + Strg + C (Kopieren alle Ebenen in die Zwischenablage) und dann mittels Datei - Neu - Zwischenablage automatisch richtige Bilddimension und Strg + V
    Alternative: komplette Ebenen/Stile/Effekte mittels Drag & Drop ziehen
  • Texteffekt Spezial: Letterpress Effekt
    alle Effekte nur als Ebeneneffekte/Stile - siehe Fläche für Textebene auf 0 gesetzt
    Tipp: alle Effekte mittels Palette Ebene Stile als Stil festlegen und dann gerne auch speichern (*.asl)
    beispielhafte CSS3-Umsetzungen: z. B. Link
  • Geamtkonzeption Website
    Buch Jens Jacobsen (www.benutzerfreun.de): Grob- und Feinkonzepte, ...
    Dokumentation mittels Styleguide (PSD-Beispiel im Seminar) oder eigener Konstruktion
    Scribble oder Mockups: Grundskizzen des Website-Entwurfs; Beispielsoftware: Pencil (als Installation oder Firefox-Addon); Kaufsoftware: z.B. Balsamiq (Link)
    Grundkonzepte Website Layout (Frameworks): am Beispiel 960 Gridsystem (960.gs) als PSD-Vorlagen oder Photoshop-Aktionen
  • Komplette Site mit Photoshop
    Ein Photoshop Tutorial (Autor: Pixelmetrie) mit einer kompletten Website aus dem Online-Portal www.psd-tutorials.de
    Hinweis: alle Tutorials häufig nur mit Kurzanleitungen und Lösungsansätzen, die gerne auch immer alternativ durch eigenen Umsetzungen eingetauscht werden
    Besondere Technik: mit "Buntglas-Mosaik" die Hautpfarben einer Grundgrafik ermitteln
    Empfehlung: Grafikelemente mittels Datei - Platzieren als SmartObjekte nutzen und damit nachträglich mittels "Inhalt ersetzen..." die Grafik einfach austauschen
  • Slices
    Nutzung aktuell: Bereitstellung von Websitedarstellungen für Sie selbst oder Kunden bereits in Webtechnik
    Nutzung klassisch: Herstellen von Grafikelementen für die "alten Tabellenlayouts / Fixlayouts"; heute wollen wir alles mit CSS stylen!
    Werkezug zum Schneiden von Webseiten in Bildbereiche; maßgeschneidertes Exportieren der Slices über "Für Web speichern..." in den gewünschten Formaten und Qualitäten; Orientierung von Schnittlinien mit Hilfslinien: fertige Grid-Systeme für Webdesign und Photoshop (z.B. 960 Gridsystem)
    Wichtig: ich empfehle die Optimierung des "Speichern" der "Bilder und Webseite" auf Auslieferung mittels CSS, damit die Darstellung auch bereits sauber mittels CSS-Styles angepasst werden kann...
  • Coding: aus PSD wird HTML & CSS
    Beispieltutorial von http://www.1stwebdesigner.com/wordpress/psd-to-html-tutorial-code-photoshop/ mit einer beispielhaften Herangehensweise einen grafischen PSD-Entwurf schrittweise in eine sauber kodierten HTML / CSS / JS Konstruktion umzusetzen
  • TN-Bescheinigungen, Feedback, letzte TN-Fragen

 

  • PSD to HTML/CSSPSD to HTML/CSS
  • BildprozessorBildprozessor
  • Google FontsGoogle Fonts
  • benutzerfreun.debenutzerfreun.de
  • StyleguideStyleguide
  • Scribble - MockupsScribble - Mockups

Ich habe über die Jahre ein paar Infos (siehe Anhang Tastenkombinationen / Tastenkürzel) zum Thema "Photoshop" zusammengestellt, die Sie in dem folgendem Download als PDF downloaden können:

 

Vielen Dank für Ihr freundliches Feedback und Ihr Interesse an weiteren Seminaren (s. a. Illustrator).
Ihr Trainer Joe Brandes

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben