While I do think that most art these days is constructed digitally, I also believe that many of the most prolific and refined artists still consult physical media often, even when creating a completely digital work.

While you certainly can create great designs and ideas initially in Photoshop, I benefit so much more with both time management and idea refinement with using a sketchbook that I actually consider starting a design from scratch on Photoshop might even be detrimental to a design.

Visual Brainstorming

Without a doubt, the number one reason that I love using my sketchbook is that it is the quickest, most free method of visual brainstorming. Even if you know the Adobe Suite inside and out with every shortcut memorized and custom macro commands in use, I’m still willing to wager it would take you longer to put together a prototype than a skilled artist on a sketchbook.

Because of the speed in which I can produce prototypes on a sketchbook, I am able to more quickly determine which design choices work for a project and which don’t simply through process of elimination. In the couple times that I have designed prototypes straight from Photoshop, I felt less inclined to scrap ideas I already had on screen because of the longer time it took to get the screen how I wanted it. The more design options you are able to visually consider for a project, the better your project will be.

Fewer Constraints

Even if you are super speedy on Photoshop, I would argue that it is much more difficult to think outside of the box when working through a design program that is marketed toward thousands of artists. You are working with a similar set of tools and a similar interface to so many other artists, so naturally your vision will be skewed towards the convenience of the program. Perhaps you will rule out a visual idea because it would be too tedious to work out on the software.

When working with pencil and paper, you don’t have to construct your design through the tools and interface of a program. Sure, you may have to creatively problem solve as to how you can implement a sketched design into Photoshop or Illustrator at some point later down the road of the project, but simply having that openness of options and possibility can be a huge benefit to planning and creating a visual project.

Supremely Mobile

One of the hugest benefits I receive from keeping a sketchbook is that I can take it anywhere with me; it is incredibly mobile. While this mobility is currently being contested by improving smartphone and tablet software, there is still the issue of battery charge and precision of tools on the touch screen. Perhaps one day there will be an electronic day that can legitimately replace a sketchbook, but at the moment they seem to fall short of my needs and process.

This guest post is contributed by Lauren Bailey, who regularly writes for best online colleges. She welcomes your comments at her email Id: blauren99 @gmail.com.

To get started, open Photoshop and set your canvas size into a perfect square of any even number such as 60×60 pixels as working with a 16×16-pixel canvas would be very difficult.

Now, begin designing your own favicon. Set your background color. Always make sure that the colors you use for your favicon is the same set of colors you use in your website.

As for the details of your design, you can either make a simple image or use your typography skills in designing your favicon. Always remember that the size of your favicon is too small to contain all the details you want to place in the image. Just keep it simple yet captivating.

Because the standard size of a favicon is at 16×16 pixels, you must reduce your current image size for you to be able to use the image as a favicon. Go to the Image tab > Image Size

To upload your Favicon to your server, open your FTP and go to the root directory of your site and look for favicon.ico. Now, go to any website that helps you convert any .png or .jpg format to .ico. After converting your Favicon image to favicon.ico, delete and replace the ones in your server with your new favicon.ico file or just upload the new favicon.ico file if there is no existing favicon.ico file in the server.

Step 1

Open up Photoshop and go to File > New to create a new document. I used a document size of 570×400 pixels set to RGB at 72dpi (the standard for on-screen work). Fill your background with a light/medium colour. I’ve chosen a light sky blue, using HEX code #77D1EE.

Step 2

Create a new layer and select the Brush Tool. Select a soft brush, and set your foreground colour to white. Paint a blob of white on to your new layer like below. Now select a blue that is slightly darker than your background colour, and paint a blob or two onto your canvas. You can see me darker blue to the left of the below screenshot.

Step 3

With your new paint layer still selected, decrease the opacity to around 35%. This will add some subtle depth to your background, making it more visually appealing.

Step 4

Select the Rounded Rectangle Tool. Change the corner radius of your tool to 5px (this can be done in the toolbar above your canvas whilst the tool is selected). Draw a long rectangle like the one below.

Step 5

Right-click on your new shape layer and select the Blending Options option to open up your Layer Styles window. Select the Gradient Overlay tab and change your overlay from a light grey to an even lighter grey (almost white). Click OK.

Step 6

Click on the Drop Shadow tab. We’re going to use the this to create what actually looks more like a thick stroke. Using the drop shadow effect however gives us much more control. Change the opacity of your layer to 7%, your distance to 0px, spread to 100% and size to 6px. Having the spread set to 100% and the size to 6px essentially creates a 6px stroke. WIth the opacity set to just 7%, we will be able to see through to our background, making a lovely backdrop for our navigation.

Step 7

Select the Rectangle Shape tool and change your foreground colour to black. Create a very thin shape that covers the lower portion of your navigation bar, as seen below.

Step 8

Right-click on your new black shape layer and click on Rasterize Layer. This will turn your layer into a pixel object rather than a shape, which means we can remove areas of it.

Step 9

Hold down your Cmd-Key (or Ctrl-Key) and click on the preview image next to your main navigation bar shape in the layers panel. This will make a selection of the shape. Select the Rectangular Marquee Tool and right-click on your canvas. Select the Select Inverse option to select everything but the original navigation bar shape.

Step 10

Select your black shape layer and then hit the Delete-key. This will remove all of the black shape that overlaps your navigation bar. Lower the opacity to around 5-10%. You should end up with something similar to below.

Step 11

Add some text to your navigation bar. I used a font called Lekton, which you can download for free from Google Web Fonts.

Select the Line Tool and draw a black line as seen below. Duplicate the line and change the colour of your new line to white. Nudge it to the right of your black line by one pixel by pushing the right cursor-key once.

Step 12

Drop the opacity of the two lines to somewhere between 20-50%. Experiment with this as the results will vary depending on the colours you have used in your navigation bars gradient. These two lines will appear as an indented line in our navigation bar, separating the different icons.

Step 13

Zoom back out to 100%. You should have something that looks like this…

Step 14

Select the Shape Tool and draw a rectangle the same width and height as one of your button sections. Change the gradient to white and decrease the opacity. This is the buttons hover/active state.

Step 1

Open up a new Photoshop document/canvas. I used a 600×350 pixel document set to RGB at 72dpi. Change the background colour of your document to a dark blue. I used colour #18262A.

Step 2

The first thing we’re going to do is add some subtle texture to our canvas background using a built-in Photoshop tool. Go to Filter > Noise > Add Noise to open up the window seen below. Change the amount field to 1. Make sure the Uniform and Monochromatic checkboxes are selected and hit the OK button.

Step 3

Download some icons from the web, making sure they have a star icon included – I downloaded the Glyphish Icon Set. Once downloaded, go to File > Place and locate your icons. Select the star icon (28-star.png in this case) and click the place button.

Step 4

Go to Edit > Free Transform and in the toolbar at the top of your screen, change the width (w) and height (h) to 18px.

Step 5

Duplicate your star layer and shift the new layer 20px to the right by holding the Shift-key and pressing the right Cursor-key twice. Repeat this step until you have five stars.

Step 6

Right-click your first stars layer and select Blending Options. Click on the Gradient Overlay tab and apply a medium to light grey gradient set to 100% opacity and with an angle of 90 degrees.

Step 7

Now click on the Drop Shadow tab. Increase the opacity to 100%, and decrease the distance to 1px and the size to 2px. Leave everything else set to default. Click OK.

Step 8

Right-click on your star layer (the one with the styles applied to it) and select the Copy Layer Style option.

Step 9

Select all of your other star layers. Right-click and select Paste Layer Style. This will apply the same gradient and drop shadow styles to all of your stars.

Step 10

At this point you should have something that looks similar to below.

Step 11

Right-click on your first stars layer and select Blending Options once more. Change the gradient so that it goes from a medium orange to a bright yellow and then click OK.

Step 12

Copy the layer style and paste it onto a couple of your other star icons. Place an image into your document. Resize and position it so it sits above your stars, like below. Try adding a stroke to make it look more complete.

Step 13

Select the Type Tool and draw a text box above your image. Type in a title or caption of your image. I used “Vroom, Vroom!” using the typeface Georgia (a web-friendly font) set to italic. I also added a drop shadow to the type, using a distance of 1px and a size of 1px, set to 75% opacity.

Step 14

Duplicate all of your files; you should end up with something similar to below!

Why should we create a custom 404 error page anyway?

Well, it’s just nicer to your site visitors – if you read usability guides it is always cited that a custom 404 page is imperative.  The standard one that comes with your browser tends not to be very nice or friendly.
Depending on what has caused the error you can get some odd behaviour and messages in firefox.

Fortunately it is dead easy to do: all you need to do it edit your .htaccess file.

Your page can be called whatever you want: in this example I’ve called it 404.php and my entry in my .htaccess file is as follows:

ErrorDocument 404 /404.php

This is pointing to the file 404.php in the root of your website so you’d better make sure that is where you uploaded it.

With this added and uploaded your custom file will be displayed every time a 404 error is encountered – which hopefully will not be that often. 

You can also use this method to handle other errors – 500, 400, 401 etc so that in the event they occur they never scare off your visitors.

Of couse if you can also add script (as in our example above – this is a php file) to your custom error page then you can also do some more clever stuff like log the referrer details, send you an email etc.  You can put whatever you like on the page and encourage your visitors to persevere with the site.

This was a product / brochure website rather than an e-commerce website and all of the product listings were changing as well.  Every product on the site would be completely new.

Normally when moving a website we’d look at which pages were the same and redirect them through to the new ones.  In this case they didn’t match.  This meant that until the new pages are indexed visitors will be taken to a 404 page when they click on outdated links from the search engines.

This is hardly very visitor-friendly and considered a big no-no from a usability point of view.

Not only this but the basic Concrete5 404 page is (I’m afraid to say) a little nasty and not conducive to keeping prospective customers on your website.

It is easy enough to change though – and this is how we do it.

Step 1

Copy the file root/concrete/single_pages/page_not_found.php

to your website’s root single_pages directory i.e
root/single_pages/

(in doing this we are creating our own version of the file that overrides the default Concrete5 version – thus we do not alter any files from the base installation).

Step 2

as this is a system page – next we need to let Concrete5 know to use the new file:

Edit /root/config/site_theme_paths.php

add the line:

$v->setThemeByPath(‘page_not_found’, “yourtheme”);

replace yourtheme with the handle of your theme as it is shown in the Concrete5 admin area.  In this case my theme is called wfh so I copied in

$v->setThemeByPath(‘page_not_found’, “wfh”);

The website should now be using your copied page.  Now, we just need to make it look better.

Step 3

In this case I wanted the 404 page to be as user-friendly as possible.  I wanted to have the site navigation on it so that visitors can easily get back into the site taxonomy and I wanted it to look like part of the site.

In my theme directory I copied my default.php and renamed the copy to page_not_found.php

copy  /root/themes/default.php -> /root/themes/page_not_found.php

This is now our third file with this name and this will be used for the presentation and to hook it into our website structure.

Step 4

Remove the main content area in your new page_not_found.php (/root/themes/page_not_found.php)

in my case the corresponding code is:

      <?php
                        $a = new Area(‘content’);
                        $a->display($c);
                     ?>

and replace it with:

   <?php
                print $innerContent;
                ?>
           <?php  if (isset($error) && $error != ”) { ?>
   <?php 
   if ($error instanceof Exception) {
      $_error[] = $error->getMessage();
   } else if ($error instanceof ValidationErrorHelper) {
      $_error = $error->getList();
   } else if (is_array($error)) {
      $_error = $error;
   } else if (is_string($error)) {
      $_error[] = $error;
   }
 
      ?>
      <ul>
      <?php  foreach($_error as $e) { ?><li><?php echo $e?></li><?php  } ?>
      </ul>
   <?php 
} ?> 

This code autoimatically calls the file /root/single_pages/page_not_found.php for the page not found message. 

Step 5

The beauty of this method is that we can now log into the admin side of our C5 website and change the page.

Go to Single Pages and edit our page_not_found single page as though it were a normal page in our website using the WYSIWYG gui to add a nicer message and maybe even add an autonav just like the main part of the site so the visitor has somewhere to go within the site.

We can edit this whenever we like or if we do not edit the site we can pass it over to our web design client who will have wysiwyg control over their 404 page and put any message they like on there.

Step 6

Test that all is ok by going to a page on our website that does not exist to see that we get our new page not found page.

Check the headers of this page to make sure it is giving a 404 message.  Googling ‘check server headers’ will bring up a number of tools you can use.

Just key in the url of your non-existent page and make sure the result shows:

HTTP/1.0 404 Not Found….

In the server response.  And that’s it.  A much more user-friendly 404 error page that will keep customers and that the website editor has control over.

Step 1

Open up Photoshop and create a new document. Fill in the background and select the Rectangle Shape Tool. Draw a shape measuring 250×40 pixels as seen below.

Step 2

Duplicate the shape and nudge it down four times using the Shift+Cursor-Key combinations. Keep on repeating this step. Arrange your shapes as seen below – I changed the colours to make mine visible.

Step 3

Select one of your shapes and duplicate it. Go to Edit > Free Transform and resize your shape so it touches the top and bottom of your Photoshop canvas. Keep the width of the shape the same. Right-click on your layer and select Rasterize Layer, then go to Filter > Blur > Gaussian Blur > 5 pixels.

Step 4

Nudge your shape behind your other shape layers and lower the opacity to around 25-50%. This will act as a shadow to our navigation menu.

Step 5

Right-click on your first single-line shape layer and select Blending Options. Select the Gradient Overlay tab and change the gradient from dark to medium grey.

Step 6

Select the Inner Shadow tab and change the blend mode to ‘Normal’, the opacity to 5%, the angle to -90, distance to 1px and size to 0px. Leave everything else to default. Change the colour from black to white. This should create a 1px stroke at the bottom of your shape, as seen below.

Step 7

After clicking OK to close your Blending Options window, right-click on your shape layer with the styles applied and select the ‘Copy Layer Styles’ option. Select all of your other single-line shape layers, right-click and select Paste Layer Style.

Step 8

Right-click on your larger shape layer beneath your first single-line shape layer and select Blending Options. Click on the Gradient Overlay tab and change the gradient to a very light grey to a medium grey with an angle of 90.

Step 9

Click on the Inner Shadow tab and change the opacity to 25%. Change the distance to 2px and the size to 0px to add a 2px stroke at the top of your shape.

Step 10

Select the Inner Glow tab and apply a black glow with an opacity to 5%. Click OK to save your settings.

Step 11

Select the Type Tool and draw a text box at the top of your navigation bar. Type your sites name – I used the typeface Helvetica. Right-click on the type layer and select Blending Options. Select the Drop Shadow tab, change the opacity to 50%, distance to 2px and size to 1px to add a subtle but important shadow to your header.

Step 12

Select the Type Tool once more and draw a text box over your first single-line bar. Type ‘Home’. Duplicate the type layer and nudge it down over your next single-line shape. Change the text to ‘About’. Repeat this over and over again until all of your bars have labels.

Step 13

Open the Blending Options for your first text layer and apply a Drop Shadow using an opacity of 20%, distance of 2px and size of 1px.

Step 14

Reopen the Blending Options for your open labelled bar. Select Gradient Overlay and change it to a brighter colour. This shows that the bar is currently active/open.

Step 15

Also change the colour of the text on this bar so that it stands out better. Add some sub-labels in your grey box like below. These can only be seen when your bar is open.

Step 16

Last but not least, select the Rectangular Marquee Tool to and draw a small box beneath one of your sub-labels. This will only be seen when that current page is being viewed. Here is our final result…

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 to be a bit more beautiful.

Below is a possible end-result with some stylisation added in:

The form is an e-commerce style shipping and billing information input form.

We want to record some shipping info:

• First Name
• Last Name
• Street Address 1
• Street Address 2
• City
• County
• Postcode
• Country

Our form also has the following requirements:

• must record the same fields for billing info which may or may not be the same as the shipping info.
• must record the email of the person filling the form
• confirm that they agree to the website’s terms and conditions.
• must be cross-browser compatible and accessible
• must validate to w3c guidelines for (x)html and css.

This means that in designing our form we are going to use:

• fieldsets – to group form elements
• legends – to describe our fieldsets
• labels – to describe our form fields
• tabindex – to aid usability so that users can easily tab to the relevant fields
• <ol> ordered lists – for ease of styling and some degree of semantic correctness (this is debatable – there are a number of ways we could do this)
• an image with appropriate alt text to indicate mandatory fields

Just by way of example as to how these things work we are splitting the form into a number of different fieldsets:

• Shipping Name – the first and last name of the person the items are shipped to
• Shipping Address – the address lines the items will be shipped to
• Billing Name – the first name and last name of the person to be billed
• Billing Address – the address lines of the person being billed
• Website terms and Submission – terms and conditions checkbox and clear and submit buttons

Step 1

We declare our form

Step 2

We create the shipping fields for the form according to the requirements we set out above:

So there we have the shipping part of our form.
* note that the tabindex is in order – I’ve just incremented each one by 10 in case I’ve messed up and need to add another field in between the existing ones.

Step 3

Rather than create the billing fields longhand I copied this text into textpad and did a replace to replace the word shipping with the word billing – hey presto we instantly have our equivalent billing fields.

Step 4

We add our final fieldset including the terms and conditions checkbox and submit button.

Step 5

Close our form

Step 6

It is possible that our shipping and billing address and person will be the same so we also want to add a checkbox that our visitor can click that will use some javascript to copy the data entered into the shipping address fields over to the matching billing address fields.

We add this is above the billing details:

Our html

Should look something like this:

End Result

Here is our unstyled form – as yet it lacks any css or javascript.  In the next post we’ll look at adding CSS to make it look drastically different.

So far we’ve created the html and catered for accessibility elements in the form – is there anything I’ve missed?  Could some of this have been done in a better way?

Step 1

Open up Photoshop and create a new document. My document size measured 640 by 300 pixels. Select the Rectangle Tool and create a shape measuring 60 (height) by 40 (width) pixels. Duplicate the shape three times and position the shapes next to each other with a gap of exactly 3 pixels.

Step 2

Right-click on your original shape layer and select Blending Options. Select the Gradient Overlay tab and increase the opacity to 100%. Select reflected from the style drop-down menu, and change the angle of your gradient to 90 degrees. Click on your gradient editor/bar and pick a medium grey to a very dark grey (almost black).

Step 3

Now select the Stroke tab from the Layer Style window. Change the size of the stroke to 2 pixels, and the opacity to 100%. Select gradient from the stroke fill type, and apply a light/medium to dark grey (almost black) gradient. Make sure your light/medium grey is a little lighter than the grey we used in our main gradient. Click OK.

Step 4

With your layer styles now applied, right-click on your first shape layer and select the Copy Layer Style option.

Step 5

Select all of your shape layers at the same time (you can do this whilst clicking on the top one, holding down the Shift-key and then clicking on the bottom one). Right-click and select the Paste Layer Style option. This will apply the same styles we have just created (the gradient overlay and gradient filled stroke) to all of your shapes.

Step 6

Select the Type Tool and draw a text box over your first shape. Make sure it is well aligned to your shape, and then select the Text Align Centre option from your overhead task bar. Type a number, duplicate your type layer and reposition it over your second shape. Repeat this two more times until you have a number over each of your shapes.

Step 7

Right-click on your first type layer and select Blending Options to open up the Layer Styles window. Select the Gradient Overlay tab and use the same settings we used in our shapes gradient overlay (100%, reflected style at 90 degrees). Use white to very light grey.

Step 8

Now click on the Drop Shadow tab. We’re going to create a sharp (no blur) shadow for our type. Keep the standard multiply blend mode option applied set to 75% black. Change the angle to 135 degrees, the distance to 2px and everything else to 0px. Click the OK button to apply your style to the first letter.

Step 9

Copy the layer style for your first type layer in the same way we did previously with the shape layers. Now select all of your type layers, right-click and select Paste Layer Style to apply the same styles to all of your numbers. I change my numbers from ’0000′ to ’0752′ at this point in time.

Step 10

Select the Rectangle Tool and draw a shape like the red one below. My shape is 172px wide and 66px high. If you used the same measurements as me for your original shapes this size will work for you, too.

Step 11

Change your red layer to black. This shape is going to act as the backdrop for our rotating number wheel.

Step 12

Fill in your main white background layer with a dark grey. I used #333333. Go to Filter > Noise > Add Noise and change the amount of noise to 2% with the uniform and monochromatic options checked. Hit the OK button.

Step 13

Choose the Brush Tool and select a small soft (faded) brush. Select a pure white colour and draw a straight line (hold the Shift-key whilst painting to keep your line straight) on a new layer above your background layer but below all of your other layers, as seen below. Select the Rectangular Marquee Tool and make a selection similar to the one seen below, selecting the left and right sides of the brush stroke we just created that are overlapping the wheels backdrop shape.

Step 14

Select the Move Tool and using the Cursor-keys, nudge your brush layer up a few pixels so it looks similar to below.

Step 15

I increased the contrast and decreased the brightness of my overall design a little before finally getting to this final image.

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 a button, a straight text link or an image:

Example 1

Using the javascript window history object with go

Using the go method we can ask our browser to go back a number of pages into it’s history:  in this case 1 page to the previous page

Using a standard html button

Using a text hyperlink

Using an image link

Or we can simply use history.back which always takes us back one page.

Using a standard html button

Using a text hyperlink

Using an image link

It is important to note that using the browser history can sometimes confuse things and your browser might not end up exactly where you want.

Best thing to do is give it a go, try each method out in different browsers with your webpages and see what works.

S4TQJGDFB3Z8