web design blog

In this tutorial we’ll be using Adobe Photoshop to design a simple but sleek and elegant Web 2.0 style navigation bar that you can use in your own web design mock-ups, or embed in to your existing website. Step 1 Open up Photoshop and go to File > New to create a new document. I [...]

In this tutorial we are going to be using Adobe Photoshop to create a 5-star rating system that you will be able to develop and use as a way for users to rate your images, articles or products (or indeed anything). Step 1 Open up a new Photoshop document/canvas. I used a 600×350 pixel document [...]

In this tutorial we’re going to be creating a mobile-style navigation bar that can be used for both web sites and mobile applications. We will be using several Photoshop techniques to design the sliding bars. Let’s get started! Step 1 Open up Photoshop and create a new document. Fill in the background and select the [...]

In this tutorial we’re going to be using Adobe Photoshop to create a slot machine style number rotator which you will be able to develop into a working user element for web or mobile. Step 1 Open up Photoshop and create a new document. My document size measured 640 by 300 pixels. Select the Rectangle [...]

In this tutorial we’re going to use Adobe Photoshop to create a sleek and modern RSS feed subscribe button using various tools in Photoshop. Step 1 Create a new document. I used sizes 640 by 300 pixels. Download a texture (Lost & Taken is my favourite site for free textures). Go to File > Place, [...]

In this tutorial we’re going to be using Adobe Photoshop to design an ON/OFF user interface switch which can then be sliced and developed into a working switch for the web. Step 1 Create a new document. I’ve used an RGB document set to 1000 by 300 pixels. Fill the background with a dark grey. [...]

In this tutorial we will be using Adobe Photoshop to create a sleek wooden interface slider which you can then develop into a working slider which could be used for several elements, such as volume or an ‘amount selector’, for example to limit the maximum price on an online auction or eCommerce search. Step 1 [...]