Your Customers are Mobile, you will be too …

gradients

I will show you how to add multiple transparency gradients to an image in Photoshop CS6. This is more of just a quick simple tip than an actual tutorial and the process should be the same or very similar in other versions of Photoshop. Although we are not actually applying multiple gradient masks we are able to add multiple gradients. Often one gradient in one direction doesn’t acheive the effect we are looking for.

I know I myself tried searching for this recently for a project I was undertaking but couldn’t find much to help out so after much research here is the best way to go about doing it. Continue reading

In this tutorial we will show you how to blend two or more images into one using gradients masks. The process is fairly simple but as I have noticed quite a few searches coming into my blog looking for information on it I will do it anyways. I have grabbed a couple of creative commons images to use and when finished my image will look something like this:

However your can look however you like as you will most likely be using your own images. As you can see looking at my finished product I have used 3 images in total two blended with a linear gradient and another blended into it all with a radial gradient. Continue reading

Note: This tutorial has been checked and moved for CS6. For the CS6 tutorial view this tutorial.

I will show you how to add multiple transparency gradients to an image in Photoshop CS5. This is more of just a quick simple tip than an actual tutorial and the process should be the same or very similar in other versions of Photoshop. Although we are not actually applying multiple gradient masks we are able to add multiple gradients. Often one gradient in one direction doesn’t acheive the effect we are looking for.

I know I myself tried searching for this recently for a project I was undertaking but couldn’t find much to help out so after much research here is the best way to go about doing it. 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

In this tutorial we will be create some stylish buttons for your website using CSS3. These buttons degrade gracefully and will still look great on browsers that do not support the CSS3 standards.Simple changes to the css will change the button colors rather than having to swap images or use a sprite image and positioning.

We will be using just 1 image to give the button a shine but the color of the buttons can be changed just by altering the background color in the CSS. The image will be a 1 pixel by 20px high gradient image going from with at the top down to transparent part the way down. This way any background color we chose for the background with come through leaving the white to give our buttons a nice shining finish.

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 a few of you may already know I tend to try to avoid images in my designs where ever possible. I do this to avoid unnecessary HTTP calls and bandwidth usage. It is not always possible as some browsers may not like it so where possible we should then have a fallback method to render the effect as close as possible. In this tutorial I will show one method for creating a menu that does not use images unless it encounters an old browser that does not support the CSS3 used to create our menu. This way no matter what browser views the page our menu will look at the same. Only difference is newer browser will load the page faster with minimal resource costs to your client. 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: