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.
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.
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.
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.
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.
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.
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.