Das ultimative 4 in 1 Webdesigner- & Webentwickler-Bootcamp!

Installiert bitte aus der Adobe Creative Cloud die folgende Software: Adobe Photoshop CC, Adobe Illustrator CC und wer möchte, der kann auch Adobe XD installieren. Hiermit zeigen wir euch, wie sich einzelne Elemente (zum Beispiel die einer One-Page-Seite) gestalten lassen und wie sie sich ebenfalls auch verhalten können. Welche Software ihr für die Webumsetzung benötigt, erzählt euch Jannis in der nächsten Lektion.

Bevor es los geht, keine Panik! Hier besprechen wir in aller Ruhe vorab die Tastaturbefehle, damit im weiteren Verlauf keine Fragen aufkommen.

Photoshop Standard-Tastaturbefehle: https://helpx.adobe.com/de/photoshop/using/default-keyboard-shortcuts.html

Starten wir Photoshop und verschaffen wir uns einen ersten Blick.

In dieser Lektion lernen wir die Dokumentenvorgaben in Photoshop kennen und erstellen uns ein eigenes, neues Dokument für die Gestaltung einer One-Page Design-Website. Damit wir gleichzeitig auch mobil gestalten, fügen wir dem Dokument eine weitere Zeichenfläche hinzu.

Eine wichtige Lektion zu Beginn: Bitte speichert regelmäßig eure Projektdateien/Bildkompositionen als PSD um einen möglichen Datenverlust vorzubeugen und eine spätere Bearbeitung zu ermöglichen.

In dieser Lektion lernen wir die Arbeitsbereiche in Photoshop kennen.

Lineale und Hilfslinien sind gerade im Bereich des Webdesigns durchaus sinnvoll. Wie man mit diesen umgeht, zeigen wir Dir hier gleich zu Beginn des Kurses.

Ein wirklich grober Überblick über die Funktion der berühmten Werkzeugleiste am linken Bildschirmrand.

Die Ebenen machen Photoshop zu dem was es heute ist. Wir lernen sie in diesem Video kurz kennen und bauen uns ein Verständnis dafür auf. Ich zeige euch auch, wie man neue Ebenen erstellt, nutzt, löscht, umbenennt und gruppiert.

Sicherlich passieren immer mal wieder Fehler. Aber diese kann man sehr leicht wieder rückgängig machen. Nutzt dafür eine Tastenkombination (Windows: STRG+ALT+Z / MacOS CMD+OPT+Z) und das Protokollfenster. 

Wenn ihr ziemlich genau gestalten möchtet, macht es Sinn die Ausrichtungsfunktionen von Photoshop kennenzulernen. In dieser Lektion richten wir eine Form relativ zentriert zur Hintergrundform aus.

In dieser Lektion erklären wir das Textwerkzeug im Detail. Dazu gehen wir auf die Schriftkantenglättung ein und nutzen auch das Zeichenfenster für weitere Schrift-Settings.

Oft benötigen wir noch zusätzliche Schriftfamilien, die wir bei unserer Gestaltung berücksichtigen wollen. Hierzu laden wir und dann bei Google gerne weitere Fonts herunter und installieren diese.

Formen lassen sich grafisch um einiges besser darstellen. Dazu nutzen wir in dieser Lektion die Ebenenstile und lernen sie kennen.

In dieser Lektion lernen wir, wie wir einen Ebenenstil kopieren und auf andere Formen anwenden können.

Smartobjects sind wirklich sehr nützlich und helfen die Qualität einer verkleinerten Datei beizubehalten. Aber seht selbst in dieser Lektion.

Hier der Link zum Bild: https://unsplash.com/photos/wX64_Gjbclg

In dieser Lektion lernen wir, wie wir Schnittmasken und Ebenenmasken erstellen und wo es Unterschiede gibt.

Kreisrunde Fotos lassen sich mit Masken nun wirklich sehr einfach umsetzen. Wie einfach das wirklich geht, zeige ich in diesser Lektion.

In dieser Lektion gehen wir praxisbezogen auf das Verlaufswerkzeug und das Pinselwerkzeug ein und schauen mal, wie wir in wenigen Minuten einen realistischen Himmel zeichnen. Hierzu hilft auch die Website brusheezy.com.

Durch die gestalterische Umsetzung einer Sprechblase, lernen wir ganz einfach weitere Formen kennen und wissen dann auch, wie wir diese einsetzen können.

Richtig rein- und rauszoomen erleichtert uns im späteren gestalterischen Verlauf eine Menge Arbeit und Zeit. Hier lernen wir, wie es richtig geht.

In dieser Lektion bearbeiten wir ein Bild und stellen hier die Helligkeit, den Kontrast, den Farbton und die Sättigung ein.

Wir erstellen einen Button mit Glanz und leichtem 3D Effekt. Diesen färben wir dann schnell und bequem mittels Farbfilter-Ebene um.

Wir wenden die Farbeigenschaften und die Ebeneneffekte auf andere Formen an. Hierzu nehmen wir uns beispielsweise einen Kreis.

Eine letzte Form zeichnen wir noch als Störer. Dazu nutzen wir das Polygon-Werkzeug.

Farbinspirationen sind immer hilfreich um moderne und schöne Gestaltungen zu ermöglichen. Hier geben wir einen ersten Tipp.

Widmen wir uns mit dieser Lektion mal wieder etwas mehr dem Pinsel. Hier können wir nochmal ein paar Einstellungen zur Größe und Härte des Pinsels vornehmen. Das Ganze zeige ich euch auch via Tastenkombination.

Die Pinselsettings könnt ihr, sofern das Pinselwerkzeug aktiv ist, auch via Rechtsklick öffnen.

Wenn Du deine Bilder für Websites einsetzen möchtest, dann solltest Du die Bilder nicht auf normalem Wege abspeichern. Nutze dann die Exportfunktion in Photoshop.

Klassisches Freistellen mit Photoshop ist ganz einfach, erfordert jedoch ein wenig Zeit. In dieser Lektion gehen wir genauer ins Detail. Ladet euch hierzu das passende oder ein ähnliches Bild herunter: www.unsplash.com

Originalbild:

https://unsplash.com/photos/aUmq85-2V7I

In dieser Lektion nutzen wir für die Freistellung das Schnellauswahlwerkzeug und die Motivmaskierung. Das hier genutzte Bild könnt ihr hier downloaden (unsplash): https://unsplash.com/photos/8gWEAAXJjtI

Das Freistellen mit dem Zauberstab klappt nicht so gut, wie die vorher gezeigten Methoden. Zur Vollständigkeit sei diese Lektion jedoch trotzdem sehenswert. Denn man will ja Photoshop ja auch in Gänze kennenlernen und man weiß ja nie, wann der Zauberstab genau das Richtige und passende Tool ist.

Hier stelle ich euch weitere Auswahlwerkzeuge in Photoshop vor.

Man kann mit dem Freistellungswerkzeug ganz schnell Bilder zuschneiden. Wie schnell das wirklich geht, zeige ich in dieser Lektion.

In dieser Lektion entfernen wir ein Piercing aus einer Nase. Dazu nutzen wir das Stempel und das Pinselwerkzeug.

Link zum Bild: https://unsplash.com/photos/Fxm_xTZ1HhM

Ein Gesicht kann man, wenn man möchte, mit Photoshop leicht verändern oder völlig verfremden. Wir nutzen hierfür das Verflüssigen-Werkzeug.

Wir starten die Banner-Gestaltung.

Bevor wir mit der Gestaltung von Werbebannern beginnen, blicken wir noch mal kurz in die gängigsten Bannergrößen: https://support.google.com/google-ads/answer/7031480?hl=de

Hier erstellen wir die Dokumenten-Vorlage für unsere Bannerflächen.

Anbei eine kleine, nachträgliche Korrektur der Zeichenflächengröße für den den Banner 300x250px.

Für die grafische Erstellung des WErbebanners benötigen wir etwas Input. Also holen wir uns mal ein Bild und eine passende Schrift. Hier geht es zum Bild: https://unsplash.com/photos/WM2frq8vnG8

In dieser Lektion schließen wir die Gestaltung des ersten Werbebanners ab.

Werbebanner-Zeichenflächen innerhalb eines Dokuments kann man sehr einfach und in einem Rutsch abspeichern. Wie das geht, zeige ich in dieser Lektion.

In dieser Lektion gibt es unser Design-Material, welches ihr hier kostenlos herunterladen könnt. Damit werden wir im Laufe der nächsten Lektionen arbeiten.

Bevor wir drauf los gestalten, sollten wir wissen, welche Bestandteile für eine einfache Under Construction Site notwendig sind. Diese gehen wir in dieser Lektion durch.

Wir scribbeln bevor wir gestalten. Im Prinzip kann man dafür natürlich auch Stift und Papier einsetzen. Damit es für euch aber etwas visueller rüber kommt, setze ich das Ganze am Computer um. Wir legen die Positionen für unsere vorher festgelegten Bestandteile fest.

Wir legen in dieser Lektion noch grob fest, wie die Positionierung unserer Elemente in der mobilen Ansicht aussehen soll. Danach geht es dann ran an die Gestaltung.

Das Hilfslinienlayout hilft uns unsere Seite sauber und ordentlich aufzuteilen. So können wir wie bei einem Web-Framework wie zum Beispiel Bootstrap, die selben Spalten exemplarisch darstellen und darin gestalten.

Wir positionieren in dieser Lektion das Logo und achten auf ordentliche Abstände. Desweitern kümmern wir uns um die Abgrenzung der rechten Seite.

Bitte nie vergessen: Regelmäßig speichern und immer schön die Ordnung halten. ;)

Wir fügen in dieser Lektion schon die wichtigsten Informationen hinzu und sind dann schon ziemlich weit mit unserer "Under-Construction" Page.

Solange die Website noch nicht im vollen Umfang verfügbar ist, ist nach wie vor auf einfachste Art und Weise jedoch eine Kontaktmöglichkeit gegeben. Hierzu gestalten wir einen Call 2 Action Button, einen sogenannten Handlungsaufruf direkt eine E-Mail zu schreiben.

Wir platzieren nun im rechten Bereich ein Bild von unsplash und versehen es mit einem Farbverlaufseffekt. Damit das so klappt, lernen wir den Mischmodus kennen.

Zur Verfeinerung unserer Desktop-Design Ansicht, fügen wir noch das Launch-Datum unserer neuen Website hinzu.

Wir müssen das Rad für die mobile Gestaltung nicht neu erfinden. Wir können uns die einzelnen Elemente aus der Desktop-Ansicht für die mobile Ansicht herausziehen und mit einer anderen Anordnung neu verwenden.

Das Design ist fertig - aber wir sind noch nicht ganz am Ziel. Denn wir müssen noch die Vorbereitung für die HTML- und CSS-Umsetzung vornehmen. Nebenbei gibt es dieses Design auch als PSD hier zum Download.

Wir müssen unser Design jetzt für die Umsetzung vorbereiten und wichtige Infos auch mal notieren. Wie wir da vorgehen, zeige ich euch im ersten und zweiten Teil der Umsetzungsvorbereitung.

Wir setzen Teil 2 fort und lernen dabei auch das Slice-Werkzeug kennen. Am Ende dokumentieren wir noch all unsere Dateien und Umsetzungsinfos und könnten dann im Prinzip schon mit der Umsetzung loslegen. Viel Spaß dabei!