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

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

Dark Login Box

Website: 365psd.com
Created by: Haziq Mir

Blueish Cloud Growl Style

Website: premiumpixels.com
Created by: Victor Erixon

Unique Green & Blue Buttons

Website: 365psd.com
Created by: Frantisek Krivda

Modern Image Slider (PSD)

Website: graphicsfuel.com
Created by: Rafi

Speech Bubbles

Website: 365psd.com
Created by: Bart Ebbekink

Settings Panel (PSD)

Website: premiumpixels.com
Created by: Haziq Mir

Image Carousel

Website: 365psd.com
Created by: Bojana Cakic

Light Video Player PSD

Website: pixelsdaily.com
Created by: Nguyen Van Thy

App Store Buttons

Website: 365psd.com
Created by: 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.

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.

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.

Free PSD UI Kit: Super Buttons

Website: sixrevisions.com
Created by: Josh Katherman

Profile PSD

Website: 365psd.com
Created by: Bojana Cakic

Settings Panel PSD and CSS

Website: pixelsdaily.com
Created by: Ali Asghar

Lock / Unlock Slider

Website: 365psd.com
Created by: Andrew Forrester

The Freebies

Website: kbsportfolio.com
Created by: Kb's portfolio

Dark Toolbar

Website: 365psd.com
Created by: Rob Smittenaar

Learn How To Create A Stylish Twitter Modal Box

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

Hanging Note Sign Psd

Website: www.pixeden.com
Created by: www.pixeden.com

Music Widget

Website: 365psd.com
Created by: Ben Muschol

Night/Day Slider

Website: 365psd.com
Created by: Kuba Holuj

Map GUI kit (PSD)

Website: graphicsfuel.com
Created by: Rafi

Detailed Price Tag

Website: pixelsdaily.com
Created by: Liam McCabe

Free PSD - Chat UI PSD Concept

Website: blazrobar.com
Created by: blazrobar.com

Colorful Pricing Tables PSD

Website: pixelsdaily.com
Created by: Ali Asghar

Pump - A free website psd template

Website: blazrobar.com
Created by: blazrobar.com

Map Markers PSD

Website: dribbble.com
Created by: Jeff Broderick

File Upload Widget

Website: 365psd.com
Created by: Bart Ebbekink

Mini Slider Free

Website: dribbble.com
Created by: Dan Edwards

Drop Zone UI

Website: dribbble.com
Created by: Michael Donovan

Thumbnail Hover State Overlay (PSD)

Website: premiumpixels.com
Created by: 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.

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.

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.

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.

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.

Orange Graph Widget

Website: 365psd.com
Created by: Alexandre Naud

Primary School Website Theme (Psd)

Website: blugraphic.com
Created by: blugraphic.com

Upload File Interface PSD (Metro Style)

Website: graphicsfuel.com
Created by: Rafi

Web Weather Forecast Widget (Psd)

Website: blugraphic.com
Created by: blugraphic.com

Notification Centre UI PSD & CSS

Website: pixelsdaily.com
Created by: Martijn Otter

HTC Sense Clock PSD

Website: livven.deviantart.com
Created by: Livven

Sleek Search Box Pack

Website: design3edge.com
Created by: sada

Spotify Login Window

Website: dribbble.com
Created by: Gavin Anthony

Freebie PSD: Flat UI Kit

Website: dribbble.com
Created by: Riki Tanone

Verticle Navigation

Website: dribbble.com
Created by: Khurram Raza

(dpe)