Photoshop

Homepage-Baukasten: 40 fertige Elemente für das Webdesign mit Photoshop

11. Juni 2013
von

Zahlreiche Web-Elemente können zunächst als eine Art Prototyp in Photoshop gestaltet werden. Klar ist, dass weite Bereiche oder gar das komplette Element später eine große Packung CSS erhalten wird, doch für den schnellen Entwurf ist für viele Webdesigner Photoshop die erste Wahl. Schnell lassen sich auf Basis weniger Grundformen hochwertige User Logins, Buttons, Slider, Video-Player oder gar ganze Webseiten erzeugen.

Login Form V2

Website: facecjf.com
Urheber: chris farina
psd-datei21

© chris farina

Dark Login Box

Website: 365psd.com
Urheber: Haziq Mir
psd-datei2b

© Haziq Mir

Blueish Cloud Growl Style

Website: premiumpixels.com
Urheber: Victor Erixon
psd-datei3b

© Victor Erixon

Unique Green & Blue Buttons

Website: 365psd.com
Urheber: Frantisek Krivda
psd-datei4

© Frantisek Krivda

Modern Image Slider (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei5

© Rafi

Speech Bubbles

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei6b

© Bart Ebbekink

Settings Panel (PSD)

Website: premiumpixels.com
Urheber: Haziq Mir
psd-datei7b

© Haziq Mir

Image Carousel

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei8

© Bojana Cakic

Light Video Player PSD

Website: pixelsdaily.com
Urheber: Nguyen Van Thy
psd-datei9

© Nguyen Van Thy

App Store Buttons

Website: 365psd.com
Urheber: latrucoteca.com
psd-datei10b

© latrucoteca.com

Photoshop-Tipp #1: Grundformen als Basis einsetzen

01 Grundform aufziehen

Möchten Sie die Wirkung der ausgewählten Farben für eine Website schnell testen, so erzeugen Sie mit wenigen Grundformen eine Grafik, welche dieses Gefühl schnell vermitteln kann. Hier wurde etwa über einer einfachen Hintergrundtextur mit dem Ellipse-Werkzeug in der Farbe #4499bb (RGB 68, 153, 187) und mit gedrückter Strg-Taste eine Kreisform aufgezogen. In der Optionsleiste war Form, statt Pfad oder Pixel, ausgewählt.

Auch bei dem Zeichenstift-Werkzeug war Form in der Optionsleiste ausgewählt. So konnte ich leicht die runde Form mit nur drei Klicks für ein Dreieck in eine Sprechblase verwandeln.

webelement-a1

02 Weitere Formen

Mit dem Rechteck-Werkzeug und gedrückter Strg-Taste wurde ein Quadrat aufgezogen und ebenso in eine Art Sprechblase verwandelt. Ist die Ebene mit dem Quadrat aktiv, so kann diese über Strg+J leicht kopiert werden. Mit dem Verschieben-Werkzeug, gedrückter Umschalttaste und der Pfeiltaste nach links wurde die Kopie dann positioniert.

Ein Doppelklick auf die Ebenenminiatur ermöglicht es, die Farbe des Quadrates anzupassen. In einem weiteren Rot-Ton wurde mit dem Rechteck-Werkzeug ein kleines Rechteck aufgezogen und über Ebene > Schnittmaske erstellen an die darunter liegende Form angepasst.

webelement-a2

03 Beschriftung

Da das Rechteck-Werkzeug gerade aktiv war, habe ich noch zwei Zierlinien in den verwendeten Farben oben wie unten eingefügt. Mit dem Text-Werkzeug und weißer Farbe wurden die Elemente beschriftet. Schon jetzt bekommt man ein gutes Gefühl dafür, wie die Farben, der Stil und die Hintergrundtextur zusammen wirken.

webelement-a3

Free PSD UI Kit: Super Buttons

Website: sixrevisions.com
Urheber: Josh Katherman
psd-datei11b

© Josh Katherman

Profile PSD

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei12

© Bojana Cakic

Settings Panel PSD and CSS

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei13

© Ali Asghar

Lock / Unlock Slider

Website: 365psd.com
Urheber: Andrew Forrester
psd-datei14

© Andrew Forrester

The Freebies

Website: kbsportfolio.com
Urheber: Kb’s portfolio
psd-datei15

© Kb’s portfolio

Dark Toolbar

Website: 365psd.com
Urheber: Rob Smittenaar
psd-datei16

© Rob Smittenaar

Learn How To Create A Stylish Twitter Modal Box

Website: photoshop-plus.co.uk
Urheber: photoshop-plus.co.uk
psd-datei1

© photoshop-plus.co.uk

Hanging Note Sign Psd

Website: www.pixeden.com
Urheber: www.pixeden.com
psd-datei17

© www.pixeden.com

Music Widget

Website: 365psd.com
Urheber: Ben Muschol
psd-datei18b

© Ben Muschol

Night/Day Slider

Website: 365psd.com
Urheber: Kuba Holuj
psd-datei19

© Kuba Holuj

Map GUI kit (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei20b

© Rafi

Detailed Price Tag

Website: pixelsdaily.com
Urheber: Liam McCabe
psd-datei22

© Liam McCabe

Free PSD – Chat UI PSD Concept

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei23

© blazrobar.com

Colorful Pricing Tables PSD

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei24b

© Ali Asghar

Pump – A free website psd template

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei25b

© blazrobar.com

Map Markers PSD

Website: dribbble.com
Urheber: Jeff Broderick
psd-datei26

© Jeff Broderick

File Upload Widget

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei27

© Bart Ebbekink

Mini Slider Free

Website: dribbble.com
Urheber: Dan Edwards
psd-datei28

© Dan Edwards

Drop Zone UI

Website: dribbble.com
Urheber: Michael Donovan
psd-datei29

© Michael Donovan

Thumbnail Hover State Overlay (PSD)

Website: premiumpixels.com
Urheber: premiumpixels.com
psd-datei30

© premiumpixels.com

Photoshop-Tipp #2: Menübar gestalten

01 Grundform mit Verlauf

Ziehen Sie die Grundform der Menübar mit dem Abgerundeten-Rechteck-Werkzeug auf, das in der Optionsleiste auf einen Radius von 20 Pixeln eingestellt ist. Damit die obere Seite gerade verläuft, wählen Sie das Rechteck-Werkzeug an und stellen in der Optionsleiste Vordere Form subtrahieren aus. Jetzt können Sie den oberen Bereiche durch eine weitere Form beschneiden. Aktivieren Sie einen Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von Weiß zu einem mittleren Grauton.

webelement-b1

02 Komplexer Schatten

Erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N, und ändern Sie die Ebenenreihenfolge so ab, dass diese neue Ebene unterhalb der Ebene mit der Form liegt. Aktivieren Sie das Polygon-Lasso-Werkzeug und wählen Sie mit wenigen Klicks die Form des Schattens aus. Füllen Sie die Selektion mit Schwarz. Heben Sie die Auswahl auf, etwa über Strg+D, und wenden Sie den Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner so an, dass der Schatten weich verläuft.

webelement-b2

03 Trennung

Eine Trennlinie soll verschiedenste Bereiche abgrenzen. Erstellen Sie dazu eine neue Ebene, etwa über Ebene > Neu > Ebene. Wählen Sie mit dem Auswahlrechteck-Werkzeug einen Bereich aus und das Verlaufswerkzeug an. Wählen Sie einen etwas dunkleren Grauton aus und in der Optionsleiste den Verlauf Vordergrundfarbe zu Transparent. Ziehen Sie einen kurzen Verlauf zu einer Seite hin auf. Wiederholen Sie diesen Schritt, so das der Verlauf zu beiden Seiten hin spiegelverkehrt zu sehen ist. Drücken Sie Strg+D zum Aufheben der Auswahl.

webelement-b3

04 Punkte

Ziehen Sie mit dem Ellipse-Werkzeug und gedrückter Strg-Taste eine Kreisform auf. Aktivieren Sie den Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von #88aacc (RGB 136, 170, 204) zu #5588aa (RGB 85, 136, 170). Zusätzlich aktivieren Sie einen Ebenenstil > Kontur mit folgenden Werten: Größe 2 Pixel, Position Außen, Farbe #889090 (RGB 136, 144, 144).

Unterhalb dieses Buttons erstellen Sie mit dem Ellipse-Werkzeug eine weitere, aber etwas größere Form. Diese erhält eine Verlaufsüberlagerung von einem dunkleren zu einem helleren Grauton. So wirkt der Button wie eingedrückt in die Oberfläche der Menübar.

webelement-b4

05 Beschriftung

Die beiden Buttons wurden noch mit einem fortlaufenden Buchstaben gekennzeichnet und die Flächen beschriftet. Dazu setzen Sie das Text-Werkzeug ein. Hier kam die Schritart Dekar zum Einsatz.

webelement-b5

Orange Graph Widget

Website: 365psd.com
Urheber: Alexandre Naud
psd-datei31b

© Alexandre Naud

Primary School Website Theme (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei32

© blugraphic.com

Upload File Interface PSD (Metro Style)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei33

© Rafi

Web Weather Forecast Widget (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei34

© blugraphic.com

Notification Centre UI PSD & CSS

Website: pixelsdaily.com
Urheber: Martijn Otter
psd-datei35

© Martijn Otter

HTC Sense Clock PSD

Website: livven.deviantart.com
Urheber: Livven
psd-datei36

© Livven

Sleek Search Box Pack

Website: design3edge.com
Urheber: sada
psd-datei37

© sada

Spotify Login Window

Website: dribbble.com
Urheber: Gavin Anthony
psd-datei38

© Gavin Anthony

Freebie PSD: Flat UI Kit

Website: dribbble.com
Urheber: Riki Tanone
psd-datei39

© Riki Tanone

Verticle Navigation

Website: dribbble.com
Urheber: Khurram Raza
psd-datei40

© Khurram Raza

(dpe)

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Tags: , ,

3 Kommentare zu „Homepage-Baukasten: 40 fertige Elemente für das Webdesign mit Photoshop
  1. [...] schönen Online-Magazin Dr.Web wurde gerade der Artikel Homepage-Baukasten: 40 fertige Elemente für das Webdesign mit Photoshop veröfentlicht. Ganz frische Inspiration für den Webgrafik-Fan. Noch heiß, also erst [...]

  2. Yannick am 12. Juni 2013 um 07:20

    Schöne Auswahl von netten Elementen. Das Ein oder Andere werde ich beim nächsten Projekt einsetzen. Danke für die Übersicht.

    • Dirk Metzmacher am 12. Juni 2013 um 11:50

      Sehr, sehr gerne!

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!