So gestaltest du eine Website in Photoshop | Daniel Scott | Skillshare

Playback-Geschwindigkeit

1.0x

  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

    • 1.

      Einführung

      1:43

    • 2.

      Was sollten wir am Ende unseres Projekts abliefern

      0:49

    • 3.

      Welche Rolle spielt Photoshop bei der Gestaltung einer Website

      0:55

    • 4.

      Was sind die Produktionsvideos

      0:24

    • 5.

      So bereitest du deinen Arbeitsbereich für UI-Aufgaben vor

      0:45

    • 6.

      So stellst du deinen Photoshop Voreinstellungen ein

      2:04

    • 7.

      Lade die Übungsdateien herunter

      0:45

    • 8.

      So verstehst du dynamisches Design für Mobilgeräte und Tablets

      1:44

    • 9.

      So verstehst du Rastersysteme und Bootstrap

      6:28

    • 10.

      Tipps zum Zoomen und Navigieren deines Dokuments

      2:02

    • 11.

      Tools zum Messen und zur Einstellung von Abständen

      3:53

    • 12.

      Shortcuts für Ebenen, die du kennen musst

      2:48

    • 13.

      Das Pipettenwerkzeug

      1:28

    • 14.

      Das Transformationswerkzeug

      1:40

    • 15.

      Die 'f'-Taste

      1:34

    • 16.

      Bildschirmgrößen für Desktop, Tablet und Mobilgeräte

      1:51

    • 17.

      Tests auf iPhone und iPad mit Adobe-Gerätvorschau

      5:46

    • 18.

      Was im Webdesign technisch möglich ist

      3:05

    • 19.

      Verwendung von Zeichenflächen

      3:48

    • 20.

      Seitenhöhen

      1:18

    • 21.

      Seitenraster, Spalten und Lineale

      2:14

    • 22.

      Auswahl der Farben für die Website

      3:42

    • 23.

      So strukturierst du deine Website mit Vektorformen

      4:04

    • 24.

      Produktionsvideo – so strukturierst du dein Webdesign

      3:12

    • 25.

      Textfelder in Photoshop, die sich anpassen oder fixiert sind

      3:12

    • 26.

      So erstellst du Web-geeignete Schriftarten über Google Fonts

      4:07

    • 27.

      Platzhaltertext mit Lorem Ipsum

      1:23

    • 28.

      Produktionsvideo – so fügen wir unseren kompletten Text hinzu

      6:16

    • 29.

      So passt du deine Seitenkannten an

      1:28

    • 30.

      So findest du kostenlose Bilder für kommerzielle Zwecke

      2:10

    • 31.

      Solltest du deine Bilder einbetten oder verlinken?

      2:12

    • 32.

      So verwendest du eine Schnittmaske

      3:04

    • 33.

      So verwendest du Masken für abgerundete Ecken und Kreise

      2:52

    • 34.

      So erstellst du große Hintergrundbilder

      5:00

    • 35.

      Produktionsvideo – Hinzufügen unserer Bilder

      9:24

    • 36.

      So findest du kostenlose Symbole zur kommerziellen Verwendung für dein Webdesign in Photoshop

      5:03

    • 37.

      Produktionsvideo – Hinzufügen unserer Symbole

      2:29

    • 38.

      So schaffst du ein sauberes Bild mit Gruppierung der Ebenen

      4:34

    • 39.

      So findest du schnell, was du brauchst, mit der Ebenensuchfunktion

      1:28

    • 40.

      So benennst du deine Ebenen wie ein Profi

      1:11

    • 41.

      So gestaltest du ein Formular für deine Website

      4:12

    • 42.

      So erstellst du einen Fußzeile für deine Website

      1:17

    • 43.

      Produktionsvideo – Fertigstellung unserer Desktop-Version

      1:19

    • 44.

      So gestaltest du die mobile Version

      7:56

    • 45.

      Produktionsvideo – Fertigstellung unserer Version für Mobilgeräte

      16:46

    • 46.

      So exportierst du deine Webbilder

      8:43

    • 47.

      So exportierst du CSS aus Photoshop

      2:47

    • 48.

      So verwendest du Adobe Generate, damit deine Bilder optimal exportiert werden

      4:49

    • 49.

      Ich will nicht, dass das schon vorbei ist. Was kommt als Nächstes, Dan?

      0:50

So gestaltest du eine Website in Photoshop

Daniel Scott, Designer & Teacher

Über diesen Kurs

Hallo – mein Name ist Dan und ich werde dich durch diesen Kurs führen, wie du professionelle Website-Mockups mit Photoshop erstellst.

Dies sind die Fähigkeiten, die Arbeitgeber erwarten. Und UI/UX-Design-Kenntnisse sind die bestbezahlten Jobs.

Ich habe diesen Kurs für Anfänger:innen entwickelt, die sich fürchten, ihre Karriere in das Webdesign zu wechseln. Für Menschen, die neu in der Welt des Internets sind – sowie für Entwickler, denen keine Designkenntnisse fehlen.

Wir decken alles ab, was du für die Gestaltung deiner ersten Web-Mockups brauchst, ohne zu technisch zu werden. Während des Kurses erstellen wir diese Website für eine fiktive Kreativagentur – mit mobilen und Desktop-Versionen.  

Übungsdateien kannst du herunterladen und mit mir arbeiten. Ich habe auch druckbare Notizen, damit du mitmachen und deine eigenen persönlichen Notizen schreiben kannst.  

Ich zeige dir, wie du deine neuen Dokumente einrichtest – wie man mit der mobilen, Tablet- und Desktop-Ansicht arbeitet.  

Du kannst ganz einfach websichere Farben und Schriftarten für deine Website auswählen und sie auf deinem iPhone oder iPad in der Vorschau anzeigen.

Du lernst, wie man Bilder zuschneidet und Hintergründe erstellt, bis hin zum Export aller richtigen Dateien für deine Website.

Ich werde dir helfen. Wenn du bereit bist, kannst du mir deine Arbeit schicken und ich werde sehen, ob ich Vorschläge machen kann.  

Jetzt ist es an der Zeit, deine Fähigkeiten zu verbessern, einen besseren Job zu bekommen und deine Kunden zu beeindrucken.

Lade die Übungsdateien hier herunter.

Daniel Walter Scott 
Zertifizierter Photoshop-Ausbilder, zertifizierter Photoshop-Experte, Photoshop Certified Associate (Visuelle Kommunikation). 

Kursprojekte Alle anzeigen (27)

Bitte beachte, dass dieser Kurs nur für persönliche Bildungs- und Informationszwecke zur Verfügung gestellt wird, allgemeiner Natur ist und nicht als Ersatz für professionelle, rechtliche oder medizinische Beratung gedacht ist. Lies mehr darüber in unseren Nutzungsbedingungen.