Jul 10 2013

Homepage Construction Kit: 40 Ready-made Elements for Web Design with Photoshop (+ how to create your own)

Advertisement

It is quite common to prototype web designs in Adobe Photoshop. Although the final product will consist of large amounts of CSS driven looks, it usually turns out to be faster to use an image-editor for the first drafts. Photoshop still is designer’s first choice in many cases. Using very few basic shapes and forms you are able to creative high-grade user logins, buttons, sliders, video-players or even whole web sites.

Login Form V2

Website: facecjf.com
Created by: chris farina
psd-datei21

© chris farina

Dark Login Box

Website: 365psd.com
Created by: Haziq Mir
psd-datei2b

© Haziq Mir

Blueish Cloud Growl Style

Website: premiumpixels.com
Created by: Victor Erixon
psd-datei3b

© Victor Erixon

Unique Green & Blue Buttons

Website: 365psd.com
Created by: Frantisek Krivda
psd-datei4

© Frantisek Krivda

Modern Image Slider (PSD)

Website: graphicsfuel.com
Created by: Rafi
psd-datei5

© Rafi

Speech Bubbles

Website: 365psd.com
Created by: Bart Ebbekink
psd-datei6b

© Bart Ebbekink

Settings Panel (PSD)

Website: premiumpixels.com
Created by: Haziq Mir
psd-datei7b

© Haziq Mir

Image Carousel

Website: 365psd.com
Created by: Bojana Cakic
psd-datei8

© Bojana Cakic

Light Video Player PSD

Website: pixelsdaily.com
Created by: Nguyen Van Thy
psd-datei9

© Nguyen Van Thy

App Store Buttons

Website: 365psd.com
Created by: latrucoteca.com
psd-datei10b

© latrucoteca.com

Photoshop-Tip #1: Forms as Basic Elements

01 Drawing the Basic Form

If you want to quickly check the effect of the chosen color palette in a preview, you could create a graphic, using few basic forms, which will convey an impression quickly. Here I took a simple background texture and pulled up a circle, using the Ellipse Tool and the color #4499bb (RGB 68, 153, 187). Remember to keep the CTRL key pressed while pulling up the shape or else you will end up with an oval.

In the options bar I chose Shape, not Path or Pixels.

The same option was active while I used the Pen Tool. That way I was able to change the circle into a speech bubble with only three clicks.

webelement-a1

02 More Shapes

Using the Rectangle Tool I created a square (keep CTRL pressed) and changed it to a speech bubble accordinglyund gedrückter Strg-Taste wurde ein Quadrat aufgezogen und ebenso in eine Art Sprechblase verwandelt. While the lyer with the square is active, copy it easily pressing CTRL+J and position it using the Move Tool. While holding Shift pressed, use the left arrow key to move the layer to the desired prosition. Double-click on the layer thumb to be able to adjust the color of the shape. Afterwards use the Rectangle Tool again to draw up a smaller rectangle in another shade of red and adapt it to the underlyíng shape using Layer > Create Clipping Mask.

webelement-a2

03 Labeling

With the Rectangle Tool still active I took the chance to insert two stripes representing the two used colors to the upper as well as to the lower part of the image. Using the Horizontal Type Tool and white color I labeled the speech bubbles and the calendar element. Already at this point we get a pretty good impression of how good colors, shapes and texture work together.

webelement-a3

Free PSD UI Kit: Super Buttons

Website: sixrevisions.com
Created by: Josh Katherman
psd-datei11b

© Josh Katherman

Profile PSD

Website: 365psd.com
Created by: Bojana Cakic
psd-datei12

© Bojana Cakic

Settings Panel PSD and CSS

Website: pixelsdaily.com
Created by: Ali Asghar
psd-datei13

© Ali Asghar

Lock / Unlock Slider

Website: 365psd.com
Created by: Andrew Forrester
psd-datei14

© Andrew Forrester

The Freebies

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

© Kb’s portfolio

Dark Toolbar

Website: 365psd.com
Created by: Rob Smittenaar
psd-datei16

© Rob Smittenaar

Learn How To Create A Stylish Twitter Modal Box

Website: photoshop-plus.co.uk
Created by: photoshop-plus.co.uk
psd-datei1

© photoshop-plus.co.uk

Hanging Note Sign Psd

Website: www.pixeden.com
Created by: www.pixeden.com
psd-datei17

© www.pixeden.com

Music Widget

Website: 365psd.com
Created by: Ben Muschol
psd-datei18b

© Ben Muschol

Night/Day Slider

Website: 365psd.com
Created by: Kuba Holuj
psd-datei19

© Kuba Holuj

Map GUI kit (PSD)

Website: graphicsfuel.com
Created by: Rafi
psd-datei20b

© Rafi

Detailed Price Tag

Website: pixelsdaily.com
Created by: Liam McCabe
psd-datei22

© Liam McCabe

Free PSD – Chat UI PSD Concept

Website: blazrobar.com
Created by: blazrobar.com
psd-datei23

© blazrobar.com

Colorful Pricing Tables PSD

Website: pixelsdaily.com
Created by: Ali Asghar
psd-datei24b

© Ali Asghar

Pump – A free website psd template

Website: blazrobar.com
Created by: blazrobar.com
psd-datei25b

© blazrobar.com

Map Markers PSD

Website: dribbble.com
Created by: Jeff Broderick
psd-datei26

© Jeff Broderick

File Upload Widget

Website: 365psd.com
Created by: Bart Ebbekink
psd-datei27

© Bart Ebbekink

Mini Slider Free

Website: dribbble.com
Created by: Dan Edwards
psd-datei28

© Dan Edwards

Drop Zone UI

Website: dribbble.com
Created by: Michael Donovan
psd-datei29

© Michael Donovan

Thumbnail Hover State Overlay (PSD)

Website: premiumpixels.com
Created by: premiumpixels.com
psd-datei30

© premiumpixels.com

Photoshop-Tip #2: Designing a Menubar

01 Basic Form with Gradient

Choose the Rounded Rectangle Tool, set its radius to 20 px and draw the basic shape of our menu bar. To change the upper side of the bar to straight edges choose the Rectangle Tool and set Subtract Front Shape from the options bar. Activate Layer > Layer Style > Gradient Overlay and set the gradient from white to grey.

webelement-b1

02 Complex Shadow

Create a new lyer using Shift+CTRL+N and change the layer order in a way that the new layer lies beneath the layer with our basic menu bar. Now activate the Polygonal Lasso Tool and click the basic shape of a shadow. Fill the selection with black. Deselect (CTRL+D) and use Filter > Blur > Gaussian Blur to add a soft touch to our shadow.

webelement-b2

03 Divider

Dividers are supposed to – well – divide areas from other areas. We will use them to build a navigational structure on them. First we create a new layer using Layer > New > Layer. Then we activate the Rectangular Marquee Tool, draw a shape and choose the Gradient Tool. Using a darker grey we select Foreground Color To Transparency and draw a short gradient to the side. Repeat that step to the other side. Press CTRL-D to deselect.

webelement-b3

04 Inset Circle-shaped Buttons

Chosse the Ellipse Tool, hold CTRL pressed and draw a circle. Activate Layer > Layer Style > Gradient Overlay with a gradient flowing from #88aacc (RGB 136, 170, 204) to #5588aa (RGB 85, 136, 170). Add a Layer Style > Bevel & Emboss > Contour with the following values: Size 2 px, Outer Bevel, color #889090 (RGB 136, 144, 144).

Below these buttons create another circle, but a little bigger than the first one. This circle gets a Gradient Overlay from darker to lighter grey. This makes for the optical illusion of an inset button.

webelement-b4

05 Labeling

I labeled the buttons with consecutive letters and put some descriptive text besides each button. Both is achieved using the Horizontal Type Tool. I chose the font Dekar.

webelement-b5

Orange Graph Widget

Website: 365psd.com
Created by: Alexandre Naud
psd-datei31b

© Alexandre Naud

Primary School Website Theme (Psd)

Website: blugraphic.com
Created by: blugraphic.com
psd-datei32

© blugraphic.com

Upload File Interface PSD (Metro Style)

Website: graphicsfuel.com
Created by: Rafi
psd-datei33

© Rafi

Web Weather Forecast Widget (Psd)

Website: blugraphic.com
Created by: blugraphic.com
psd-datei34

© blugraphic.com

Notification Centre UI PSD & CSS

Website: pixelsdaily.com
Created by: Martijn Otter
psd-datei35

© Martijn Otter

HTC Sense Clock PSD

Website: livven.deviantart.com
Created by: Livven
psd-datei36

© Livven

Sleek Search Box Pack

Website: design3edge.com
Created by: sada
psd-datei37

© sada

Spotify Login Window

Website: dribbble.com
Created by: Gavin Anthony
psd-datei38

© Gavin Anthony

Freebie PSD: Flat UI Kit

Website: dribbble.com
Created by: Riki Tanone
psd-datei39

© Riki Tanone

Verticle Navigation

Website: dribbble.com
Created by: Khurram Raza
psd-datei40

© Khurram Raza

(dpe)

About the Author

Dirk Metzmacher is a professional Photoshop trainer, book author and designed with over 10 years of experience. He is also a creative mind behind Photoshop Weblog, a blog about techniques, tutorials and resources related to Adobe Photoshop.

Homepage

Comments and Discussions
  • Alan Smith, 11 July 2013

    Can you please suggest me from where i can use “Blueish Cloud Growl Style”

  • Naveed, 05 August 2013

    Very useful for beginners… I always find here such nice and helpful collection of tutorials give me lot to learn… but today I can’t resist myself to comment. So keep sharing ..

    Thanks!

  • eddie, 03 December 2013

    Gracias! Genial el Diseño, muy Cool!

  • Veslebert, 24 April 2014

    Amazing pack! THANKS.

search form
 
image description image description