Adobe Photoshop CC: Der große Webdesign-Praxis Kurs!

Starten wir Photoshop und schauen uns die Dokumentenvorlagen mal genauer an.

Wir starten Photoshop CC und werfen in diesem Video einen Blick in die leeren Dokumentenvorgaben aus Web, Print, Video und mehr. 

Die Benutzeroberfläche von Photoshop

Die Benutzeroberfläche von Photoshop ist wirklich sehr detailreich und kann je nach Einsatzzweck nochmals mit alternativen Fenstern und Werkzeugen verwendet werden. Das klingt jetzt wirklich viel. Aber in diesem Video nehme ich euch die Angst, denn wir lernen Werkzeuge und Fenster Schritt für Schritt zu jeder Aufgabe kennen. Man muss also nicht alles auf einmal können um Photoshop zu nutzen.

Werkzeuge ausprobieren und Fehler rückgängig machen

Am besten lernt man Dinge, die man selbst ausprobiert hat. Nach dieser These verfahren wir in diesem Video, bevor es dann ans Eingemachte geht. Vorher erklären wir auch, dass man seine künstlerischen Ergüsse natürlich auch Schritt für Schritt wieder rückgängig machen kann. Dazu gibt es eine Tastenkombination oder das Protokoll-Fenster. 

Lernen wir mal genauer die Ebenen und Gruppen kennen und schauen genau, wofür sie gut sind.

Textwerkzeug und Schriftkantenglättung

Die Schrift sieht bei der Verwendung des Textwerkzeugs krusselig aus? Dann gilt es auch einen Blick in die Kantenglättung zu werfen. Diese behandeln wir in diesem Video.

Wo erhalte ich neue Schriftarten? Und wie installiere ich diese?

Wir sorgen schon mal vor und suchen uns bei Google Fonts passende Schriftarten. Diese laden wir herunter und installieren diese in unser System. Details im Video.

Wie lege ich ein Bild über eine Form so an, dass das Bild, die Form annimmt? 

Diese Frage stellt sich zu Beginn jeder und somit sind wir an der Reihe die Schnittmasken und Ebenenmasken kennenzulernen. In Photoshop führen viele Wege nach Rom. In diesem Video seht ihr zwei davon.

In den Ebenensettings befindet sich auch ein Symbol für Farbkorrekturen, Helligkeit/Kontrast, Dynamik und Co. - diese wenden wir jetzt beispielhaft allgemein und innerhalb einer Form an. 

Ebeneneffekte anwenden und kennenlernen. Wir können auf jeder beliebigen Ebene Effekte wie Schatten, Verläufe, Muster, Farbüberlagerungen, Glanz, Kanten und Reliefe einstellen und anpassen. In diesem Video zeige ich euch, wie das schnell geht.

Wir erstellen in dieser Lektion unsere erste Grafik: Einen Störer / Badge

Wir erstellen einen einfachen Störer mit Glanz und Text und wenden dabei das soeben Gelernte an. 

Nach dem einfachen skeumorphistischen Störer kommt jetzt ein Störer mit Zacken und im Flat-Design.

Wie wir diesen erstellen, erfahrt ihr in diesem Video. 

Was sind Smartobjects und wofür sollte ich diese verwenden?

Hier ein kleines Beispiel, warum Smartobjects oft sehr sinnvoll sind. Im Laufe des Kurses gehen wir immer wieder auf Smartobjects ein. Hierbei zeige ich euch nicht nur Bilder, die ich als Smartobjects anlege. 

Ganz einfache Übung: Wir erstellen mal kurz eine Sprechblase für die wunderbare Wildgans auf dem Foto! 

Bildgröße ändern

Dazu gibt es in Photoshop viele Wege. Bei einem vorgegebenen Bild wählt man am einfachsten den Punkt "Bildgröße". Werfen wir im Video mal einen genaueren Blick ins Thema Bildgröße.

Um einen echt wirkenden Himmel zu zeichnen, benötigt man nicht viel: Nur das Verlaufswerkzeug und eine erweiterte Pinselauswahl.

In diesem Video erstellen wir innerhalb in unter 5 min. einen realistischen Himmel mit Wolken.

Du willst ein Bild für deine Website speichern? Bei einem großen Farbspektrum und vielen Details solltest du dich für das Format JPG entscheiden. Damit erhältst du die beste Kompression. Diese kannst du mit Photoshop auf Wunsch selbst in der Qualität anpassen und abspeichern.

Bilder mit transparentem Hintergrund für Web speichern

Wenn ihr ein Bild für eure Website mit transparentem Hintergrund abspeichern wollt, so empfehlen sich die hier im Video vorgestellten Dateiformate: GIF, PNG-8, PNG-24 (Favorit).

Bildteile aus Bildkomposition mit dem Slice-Werkzeug abspeichern

In diesem Video nutzen wir erstmals das Slice-Werkzeug und speichern unterschiedliche Bildteile in unterschiedlichen Formaten ab.

Hier ein wirklich kurzer Blick in die Filtergalerie von Photoshop

Ich persönlich nutze sie nicht so oft und wenn dann gehe ich über den Punkt Filter direkt zum eigentlichen Filter den ich nutzen möchte. Die Filtergalerie ist jedoch sinnvoll, wenn man jeden Filter mal genauer kennen lernen möchte. Hier lautet die Empfehlung: Probieren geht über Studieren. ;)

Bild oder Ebene horizontal spiegeln

Ein Bild und somit die gesamte Arbeitsfläche zu spiegeln ist einfach. Eine bestimmte Ebene zu spiegeln ebenfalls, jedoch geht man hierzu etwas anders vor. Mehr dazu im Video.

Du bist mit der Farbe eines im Bild befindlichen Elementes nicht zufrieden und möchtest es umfärben? Kein Problem. Das geht mit Photoshop perfekt, sehr schnell und einfach. Mehr dazu im Video.

Einen Kater mal richtig schön blöd aussehen lassen

Ihr kennt die Szene aus Shrek mit dem gestiefelten Kater? Wo er plötzlich die Augen ganz weit aufreißt und versucht dadurch Mitleid zu erzeugen? Mit Photoshop lassen wir auch den eigenen Kater so richtig schön blöd aussehen. Dazu vergrößern wir seine Augen und verkleinern seine Mundpartie.

Verändere eine Luftaufnahme so, dass diese aussieht, als wäre es ein Foto aus einem Miniaturwunderland. 

In diesem Video nutzen wir dazu den Tilt-Shift-Effekt.

Viele Wege führen nach Rom: Das gilt auch fürs Freistellen

In diesem Beispiel stellen wir ein Bildelement mit Hilfe des Pfad-Werkzeugs frei.

Für Faule und wenn es mal schnell gehen muss:

Nicht jedes Bild eignet sich für die Freistellung mit dem Schnellauswahlwerkzeug. Wenn es schnell gehen muss, lassen sich aber auch damit, bei nicht zu hohen Bilddetails und Auflösungen, schnelle Resultate erzielen. 

Wer Eier als Grafik benötigt, der muss sich diese nicht unbedingt "einkaufen". Mit Photoshop erstellst du ganz einfach eigene Eier als Grafik.

Und wie einfach das wirklich geht, das zeige ich Dir in diesem Video. 

Man muss kein Profi sein um Figuren mit Photoshop zu erstellen - Wir zeichnen einen Hasen!

Es ist wirklich super einfach mit ein wenig Phantasie einen Hasen zu erstellen. Wie das geht, das zeige ich euch hier. 

Eine kurze Einleitung zum Thema "Werbebanner".

Die gängisten Anzeigengrößen für Werbebanner

Wir schauen uns in diesem Beispiel die gängigsten Anzeigengrößen für Werbebanner an, legen dann eine Dokumentenvorlage für Photoshop an und öffnen dazu ein neues Dokument um zu beginnen.

Diesen Werbebanner bauen wir in den folgenden Videos nach.

Werbebanner in unter 10min erstellen

In diesem Beispiel erstellen wir in unter 10min einen Werbebanner. Dabei verwenden wir nur ein Ausgangsbild und gestalten uns den Rest mit Formen, Text und Button selbst dazu.

Speichert den Werbebanner. Nun nehmen wir kleinere Optimierungen vor.

Zum Beispiel stellen wir hier den Text von metrisch auf optisch um und positionieren den Text mittig.

Werbebanner als GIF animiert darstellen

Wir erstellen nun mit Photoshop eine kleine GIF-Animation und simulieren dabei eine Lichthupe am Fahrzeug.

Hier beginnen wir mit der Gestaltung eines weiteren Werbebanners - nachfolgend mit Werbebanner II gekennzeichnet.

Viel Spaß! 

Werbebanner im Elektronikmarkt-Werbestil: Hintergrund und Schriftzug

In diesem Video beginnen wir mit der Erstellung eines Werbebanners im Elektronikmarkt-Stil. Wir starten hier mit dem Hintergrund und dem Schriftzug.

Werbebanner fertigstellen: Produktbild, Funkeleffekt und Preis hinzufügen

Wir schließen den Werbebanner optisch ab und fügen ein Produktbild, einen kleinen Funkeleffekt und letztlich den Preis hinzu.

Versucht zur Übung diese Aufgabe mal selbstständig zu lösen. Falls ihr nicht weiter kommt, dann schaut euch das nachfolgende Erklärvideo dazu an.

Lösung:

Der Preis des Banners hat sich kurz vergrößert und funkelte. In diesem Video löse ich auf, wie ich den Banner animiere.

Damit das GIF auch einsetzbar ist, müssen wir dies noch abspeichern. Wer kein animiertes GIF benötigt, speichert das Bild als JPG oder PNG ab.

Kostenlose, kostenpflichtige, gute Bildquellen und ebenso gute Designinspirationen sind wichtig.

Daher stelle ich Dir in diesem Video ein paar nützliche Links und Websites vor, die Du dir vor der Gestaltung ansehen kannst.

Spare Zeit und mache Dir vorher ein paar Gedanken über die Gestaltung der Website. Setze Regeln und beantworte offene Fragen.

Diese Regeln und Fragen sind gold wert und sparen Dir dann während der Umsetzung viel Zeit. Zusätzlich erreichst du hiermit am Ende das beste Ergebnis für Dich und deine Kunden.

Die hier im Video vorgestellte Website werden wir gestalten

Dabei werden sich in den folgenden Lektionen immer mal wieder Dinge wiederholen (das kopieren der einzelnen Ordner oder Zeichenflächen, die Elemente u.s.w.). Bitte habt hier Nachsicht. Im letztem Video des Abschnitts, biete ich die Photoshop-Datei zum Download an. 

In diesem Video legen wir ein neues Photoshop-Dokument an und speichern es als Vorlage ab. Dabei legen wir uns innerhalb des Dokumentes auch weitere Zeichenflächen für die mobile- und Tablet-Ansicht an.

Mehr dazu im Video.

Farbpalette vorbereiten

Zu jeder Website gehören gewisse Hauptfarben, die es uns ermöglichen, schon beim  Entwurf die richtigen Farben auszuwählen. Hilfreich ist eine weitere Zeichenfläche, die uns unsere Farben soweit vorgibt und anzeigt. In diesem Video, bereiten wir und das mal vor.

Farben mit Webtool "Colourco*de" definieren

Wer jetzt Probleme hat, sich selbst passende Farben zu definieren, der ist mit Tools wie Colourcode gut beraten. Im besten Fall besteht allerdings schon ein Styleguide mit fest definierten Webfarben, auf die ihr zugreifen könnt bzw. müsst.

Los gehts: Wir gestalten den Header der Website mit Logo und Navigation.

Mit der richtigen Vorbereitung kommt man schnell ans Ziel. In diesem Video gestalten wir den Header mit Logo und Navigation.

Social Media Icons zur Navigationsleiste hinzufügen 

Beginnen wir mit der ersten Detailarbeit: Die Social Media Icons. Ein Beispiel, wie man solche hinzufügen kann, zeige ich euch in diesem Video. 

Header gruppieren und Big-Teaser Bild einfügen

Zur besseren Ordnung unserer Photoshop-Datei gruppieren wir jetzt unseren Header (die Navigationsleiste) und fügen ein erstes Bild in unsere Website ein.

Willkommenstext in eine Ellipse schreiben und platzieren

In diesem Video begrüßen wir nun den Besucher der baldigen Website in Form eines Begrüßungstextes. Diesen fügen wir in eine Ellipsenform ein und platzieren diese an geeigneter Stelle.

Section definieren und Headline mit Text in der nächsten Section gestalten und platzieren

Wie die Überschrift sagt, schaffen wir wieder etwas Ordnung und gestalten eine neue Headline für den nächsten, darunter liegenden Bereich. Nebenbei lernen wir noch den Loremipsum-Generator kennen.

Agentur-Feature-Bereich gestalten

Wir gestalten den Feature-Bereich mit einem Bildelement und der Anzeige von Features.

Feature-Bereich abschließen und neuen Bereich mit Headline gestalten

Im Kurzdurchlauf erkläre ich, wie wir die Features unserer fiktiven Agenturseite noch schnell ergänzen und mit Icons versehen. Dann schaffen wir noch etwas Ordnung und beginnen den nächsten Section-Container zu zeichnen. Diesen versehen wir mit einer leichten Schräge und einer weiteren Headline.

Referenzen-Section gestalten

Neben der Headline mit kurzem Text platzieren wir auch drei Container. In diesen Bildcontainern möchten wir unsere neuesten Referenzen vorstellen. Wir vertiefen dabei unser Wissen über Schnittmasken und Ebenenmasken.

Ebenen in Ordern sortieren und Button hinzufügen

Wir sortieren jetzt unsere Ebenen und fügen beim Showroom einen Call 2 Action Button hinzu.

Team "Über uns"-Section gestalten

Vor dem Footer gestalten wir noch eine letzte "Über uns" Section, die uns zur Team-Seite der Website führen soll. 

Das Allerletzte: Der Footer Teil 1

Zum guten Schluss unserer PC-Ansicht, gestalten wir noch den Footer. Dazu legen wir uns erstmal den Bereich fest und passen die Hintergrundfarbe an. Auch das Logo können wir bereits platzieren.

Footer mit weiteren Elementen abschließen

Wir fügen zum Logo noch die Adresse, Social Media Icons, einen Block über die letzten Artikel und einen Block mit den wichtigsten Links hinzu.

Letzte kurze Feinschliffarbeiten

Wir schauen uns mit ein wenig zeitlichen Abstand die bisherige Gestaltung an und optimieren das Design.

Mobile Ansicht: Header & Teaser mit Hamburger Menu

Jedes Webdesign benötigt heute mehrere Ansichten, da der Kunde gerne bereits vorab einen Überblick haben möchte, wie seine Website auch mobile aussehen könnte. Das bedeutet für uns zwar mehr Arbeit, ist aber mit Photoshop CC und den Zeichenflächen gar nicht so schwer. 

Features von der PC-Ansicht in die mobile Ansicht übertragen und anpassen

Die Hand mit dem Smartphone lassen wir diesmal weg, da dies für uns nur ein schmückendes Beiwerk war. Alles andere ist ähnlich wie in der vorherigen Lektion.

Showroom in die mobile Ansicht übertragen und anpassen

Im Prinzip wiederholt sich hier unser Prozedere. Wir kopieren den Ordner aus unserer Desktop-Ansicht in die mobile Ansicht und passen alles Schritt für Schritt an.

Mobile Ansicht der Startseite fertig gestalten

Ihr kennt das Prinzip. Wir kopieren den jeweiligen Sections-Ordner aus der Desktop-Ansicht in die mobile Ansicht und passen alle Elemente an. Überflüssige Elemente lassen wir weg. 

Zeichenfläche kopieren und für die Gestaltung einer Unterseite vorbereiten

Wir kopieren die Zeichenfläche der Desktop-Ansicht (Startseite) und entfernen nicht benötigte Ordner und Elemente. Die Navigation und der Footer werden noch gebraucht.

Wir gestalten den Titel unserer Unterseite

Wir gestalten in dieser Lektion den Titelbereich der Unterseite (Über uns) und platzieren in diesem Bereich auch einen Breadcrumb. 

Text-/Bild-Container und Sidebar mit Kontaktinfos

Wir gestalten unter dem Title-Bereich nun einen Text- und Bildbereich und daneben eine Sidebar mit Kontaktinfos. Sorry für das etwas längere Video. ;) 

Wir schließen die Gestaltung der Unterseite mit Facts-Bubbles ab und sprechen ein Problem der Formen und Ebenen an.

Die Unterseite sieht noch etwas karg aus. Hier fügen wir jetzt mal Facts-Bubbles ein, die wir mit ein paar Infos über die Agentur füllen. Desweiteren spreche ich ein Problem an, welches man erhält, wenn man aus einer Form heraus in der selben Ebene eine weitere Form erstellt. 

Weitere Unterseite mit fertigen Titel und Footer gestalten

Ihr müsst das Rad nicht immer wieder neu erfinden. Nutzt die Ebenen, Ordner und Zeichenflächen und kopiert euch diese so, dass ihr effizient schnell eine weitere Unterseite gestalten könnt. Im Video erkläre ich euch, wie das ganz fix geht. 

Mobile Ansicht: Unterseite gestalten

Wir nehmen uns die Elemente aus der Desktop-Ansicht und nutzen diese in der mobilen Ansicht mit leichten Veränderungen weiter. So haben wir sehr effizient und im Nu die mobile Unterseite fertig gestaltet. Wer mag, der kann jetzt so weitere Seiten gestalten.