Your Customers are Mobile, you will be too …


In this tutorial we show you how to create and install your own custom background image for your YouTube channel. We will be doing this in Photoshop CS5.5. Unfortunately we can’t do the entire web-page in Photoshop just the background. The rest of the details like border colors, typography etc need to actually be set in your YouTube channel itself. You do not have access to CSS for this so you are limited in these options, however the background itself you can do pretty much what ever you want within reason.

As an example I have put one up on my YouTube for you. Feel free to take a look and comment.

Continue reading

In this tutorial we will show you how to create your own Youtube Theme (or template what ever you prefer to call them)in Fireworks CS5.5. First we will show you the best way to set up your background image and then we will go into putting it in on your YouTube account and adding the final touches that have to be done actually in YouTube.

Remember we do not have access to CSS in a YouTube theme so we are limited in a lot of ways when it comes to our custom themes however with a little imagination you will still be able to create amazing profiles.

As an example I have put one up on my YouTube for you. Feel free to take a look and comment.

Continue reading

In this tutorial we will be showing how to create an amazing background blending images into a standard gradient background. For this we will be using the color dodge tool and a gradient mask in Photoshop CS5. We will then combine a few CSS tricks to create our background for a website.

When Completed we should have a back ground image that looks something like this:This is down one side of a website I am working on. The background itself slide under the edge of the page itself where the shadow can be seen.


Continue reading

We all know that the biggest killer of bandwidth on our websites is the use of images, but how do we go about reducing this. What tricks can we use to create the same effect but without the expensive bandwidth totaling up rapidly on us. In this tutorial we will look at a number of methods available to us to reduce our bandwidth whilst maintaining the look and feel of our site.

Continue reading

A common problem encountered by web developers first starting out is making the background of all their columns go full height. Often when we give say our left column one background and our content another the left column’s(or right column) background does not go all the way to the bottom of the page. This throws out the look of the site. So we are told to use a background image in our wrapper that has the same width of the column.

But what happens when we are using a fluid layout? we can’t create an image to be the exact same width of our column if the column width will vary from browser to browser and screen size to screen size. Can we still make our background go all the way to the bottom of the page with a variable width column? Yes we can.

We can even do this for a 3 column liquid layout.

Continue reading

In this tutorial I will showing you how to have an image in the background of a page in both corners so that when you re-size your browser window the images will scroll with it maintaining their correct position, without being squashed as they would do if you used one large image stretched to fit the page width of 100%.

First step for this is editing the image we want in the opposite corner. CSS does have limitations and one of them is there is no way to flip a background image (content images are possible but not background images). So we need to open Photoshop, Fireworks, Gimp or any other image editing software you prefer to use and flip the image we are using over so that it is a mirror image of the one we have ready for use. Then save it under a different name. Also a good thing to do at this point is to ensure you have opacity set to say 60 to 80% on these 2 images. This help them to blend in with the rest of the background and creates a more professional finish to the finished product. Continue reading

As designers we sometimes come across situations in which we want to put a background in that consist mainly of a texture or a gradient with another image element or two that doesn’t repeat. Too often I see websites where this is done using either a large image larger than the common screen resolutions OR they repeat the background texture gradient and then place a div to hold the other image.

With the large image method this is an unnecessary use of bandwidth. It can be done better by having the background texture repeating as in the second method and using a second image (which we can use as you will see below)

With the second method the draw back to it is it can throw out a layout on different size screens particularly if you not careful. Even if you are careful this is still the long way to go round it and more time consuming than it should be. Continue reading

In this tutorial we will be explaining the best way to add a gradient to the background of any webpage element using a method that improves page loading times over other method you may currently use simply by using CSS3 (with fall backs of course)

As designers we all use gradients in backgrounds all the time. To add texture to our designs or make our menu button look fancy for example.

Up until recently this has always been done with images and the most effect method involved just a small slice of a gradient image repeated up or across the image we are adding the background too. However this method involves loading the image (bandwidth) as well the server having to handle the request to get the image (HTTP requests). If we can remove these request particularly for popular website with large amounts of web traffic we should really be trying to do so. Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: