Sketchbook v Photoshop

Why I Open my Sketchbook Before Photoshop

With so many aspiring graphical artists eagerly purchasing Adobe Photoshop and Illustrator and artist tablets, it is easy to forget about one of the most useful and vital tools an artist can have: their sketchbook. Some people might even argue that physical media (such as drawing and sketching) is a dying art form. While I [...]

Read more

How to Create a Favicon in Photoshop

A Favicon is a tiny image we usually see next to a website’s URL. It is a custom icon made for a particular website we visit which shows up in navigation bar, bookmarks, tabs, and even as a shortcut in a Window’s desktop. A Favicon can also be your website logo but only reduced to [...]

Read more
Design a sleek navigation bar in Photoshop

Design a sleek navigation bar in Photoshop

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

Read more
Designing a five-star rating system in Photoshop

Designing a five-star rating system in Photoshop

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

Read more

Don’t lose and confuse your guests – custom 404 error page

Yesterday I wrote a post on how to add a custom 404 error page to Concrete5.  It has since been pointed out to me that I should show how it is done outside of a CMS. Why should we create a custom 404 error page anyway? Well, it’s just nicer to your site visitors – [...]

Read more
custom 404 error page

Concrete 5: wysiwyg editable, visitor-friendly, custom 404 page.

I was just in the situation where I had moved a website over to a completely new design and had moved the website from an old Joomla installation into a new Concrete5 one. This was a product / brochure website rather than an e-commerce website and all of the product listings were changing as well.  [...]

Read more

Design a stylish vertical navigation menu in Photoshop

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

Read more

Bringing a form up to date – accessible, usable, beautiful. Part 1: the (x)html

OK – so beautiful might be a bit of an overstatement.  I’ve just been updating a shipping and billing address form that was probably written in the last century and updating it from a table-based layout to something more accessible and usable and with the css set so it should be possible to style it [...]

Read more

Design a slot machine style number rotator in Photoshop

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

Read more

Javascript: Quick back button

 Another Javascript Quickie today. Sometimes you just want your website visitor to go back to the previous page in your website but you don’t want or aren’t able to link to the actual page – you want to use the browser’s history instead. This is easily achieved using javascript, the following examples show different methods using either [...]

Read more