Tag Archives: gradients

Photoshop CS5: Blending Two or more Images with Gradients

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… (more…)

Photoshop CS5: Applying Multiple Gradient Masks to an Image

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.… (more…)

Photoshop CS5: Blending Images into a Website Background

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… (more…)

Stylish CSS3 Buttons

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… (more…)

CSS Background Images in Corners

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%.… (more…)

CSS Hover Menu’s without Images

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… (more…)

Multiple Background Images CSS

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… (more…)

CSS3 Website Background Gradients

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… (more…)

Castle Fictoria

Also earlier in the year we were given an assignment to create a website for a fake hotel called “Castle Fictoria”. All images and content were provided for us. We then had to create the site using a text editor. Then later on we had to redo it in dreamweaver as well. Although both my sites looked similar this is… (more…)

  • Ripper Web Design