Creating web graphics in Photoshop

In this brief and illustrated tutorial you will learn how to create most commonly used web graphics in Photoshop. Techniques explained in this tutorial, can be used in other similar programs as well. In this tutorial I will try to explain how to create a menu, like the one explained in the article CSS image replacement techniques” and then I will guide you through the process of creating a custom submit button.

To complete this tutorial you should be familiar with the basics of Photoshop like dragging guidelines, creating layers and applying the effects to them, changing opacity, and using a Tool Menu.

Starting notes

Photoshop is great for web development, because of its many features. If you do not have the latest release, never mind. You could use the older one instead, because the main features never change.

Most common features I use in PS are layers, sets, guidelines and rulers. I create my graphics using overlaying layers. With that, you have numerous possibilities for creating engaging web graphics including backgrounds and buttons. To group similar layers you use “sets”. They act like a directory on which you can drag and drop layers. When you create a new web site you could use sets to create many different backgrounds just for comparison. When you need a specific background, you could just hide the other ones. That way, you save time and money. Guidelines and rulers are helpful when you want to create something of exact size, like background, buttons or menus.

Creating web graphics in Photoshop

Creating a menu

Watch the pictures below, to better understand the process.

  1. Create a new document (600 x 400 px)
  2. Drag the vertical guidelines to the desired position (180px, 200px, 220px)
  3. With a “Rectangular Marquee Tool (M)” (this is one of the selection tools available in PS) draw a selection between the guidelines and both edges of document. When done so, fill it with desired color
  4. To create a “rounded effect” of the menu, we will use two of PS effects — Drop Shadow and Inner Shadow. Double click on a layer in the layer controls and you will get a “Layer Style” comes up. We will use these values: Drop Shadow — Opacity 30%, Distance 0px, Size 5px; Inner Shadow — Opacity 30%, Distance 0px, and Size 15px. By lowering the opacity to 30% the effects are not very visible, what is exactly what we want. To visible effects wouldn’t be so nice :)
  5. Now, drag one horizontal guideline to 100px, and the other to 250px. By doing that we will create a place for a button
  6. To create a button in the menu, just create a new layer above the current one. Then select the area between the guidelines (do you see a rectangle?), and fill it with white color (or any color you like). Now, change the opacity to 30%
  7. Type a text on the button and center it (to center it correctly you should drag horizontal guidelines)

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

You created your menu. Try different effects, overlay modes (Soft Light could be applied in this example) and opacity values to create more menus.

Creating a button

Watch the pictures below, to better understand the process.

  1. Create a new document (600 x 400 px)
  2. Drag the vertical guidelines to the desired position (180px, 190px, 200px, 210px, 220px)
  3. Drag the horizontal guidelines to the desired position (100px, 110px, 175px, 240px, 250px)
  4. Now, we will use a Pen Tool to create a submit button. Start at second guideline intersection, and add one anchor point at the every second intersection (count them clockwise)
  5. To create rounded corners, you will use a Convert Point Tool (it is located in the Pen Tool, just hold down the mouse button). Click on the second anchor point (upper right) and click and drag it with Convert Point Tools selected. If you did everything correctly, you created your first rounded corner
  6. Now, apply the same effects as in the example above, and voila – you are – almost done :)
  7. Select a layer containing a button (CTRL + layer) and then use a Rectangular Marquee Tool to subtract half of the button from the selection (If you want to use a shortcut here, you can use ALT + mouse drag to subtract a selection)
  8. Create a new layer and fill the selection with Paint Bucket Tool (with white color). Lower the opacity to 15%. And now you are done. (Don’t forget to write a text on that button :)

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Creating web graphics in Photoshop

Emanuel Blagonić

A Designer and Developer in one. With years of experience in design and front-end development, nowadays he is more of a project manager than a designer. Specialized in responsive design and UI design for touch–screen interfaces, Emanuel is also strongly connected with WordPress.

blog comments powered by Disqus