Different Uses of Contrast in Web Design

This article primarily looks at the use of contrast when designing websites. However, the tips can be used in any design process for good effect.

When you want something to stand out on a website, contrast is great for setting apart one element from another. When hearing the word contrast, most people only consider colour. However, you can also use contrasting sizes, shapes and positions to make elements of your website stand out from themselves. This article looks at the different ways you can use contrast in web design.

All of the images in this post were created using Photoshop. We offer a wide variety of creative courses including Photoshop Training for learning how to create and edit images (including shape and colour) and Photoshop for Web Graphics training if you want a course specifically tailored for web graphic design. Other print design courses include Illustrator training and InDesign training .


There are two main methods of contrasting colours: bright and dark and opposing colours on a colour wheel:



Here are three example of using contrasting colours: Read the rest of “Different Uses of Contrast in Web Design”

Photoshop Tutorial – Save for the Web

Images are the main cause of websites taking an age to load. Slow websites not only annoy users but can affect a website’s Google ranking.

Speed is often overlooked by graphics and web designers because as digital pioneers they are usually hooked up to the fastest connection available. A graphic designer’s goal is to produce high quality images that look great so they want their images to be as sharp as possible. As a factor in Google’s algorithm, speed should be taken seriously – images are often the largest files on a site so are key to bringing down the load time of a page.

This isn’t just something that concerns SEOs but anyone who produces images for the web. We offer a Photoshop for Web Graphics course for a more in-depth look into how to optimise images for the internet.

For advice on SEO for Images read our guide on getting your images ranked on Google Image Search.

Handily, Adobe Photoshop has a feature that allows you to optimise your photos for websites without affecting how an image looks. The tutorial uses a photo as an example but can be used for other images too. I will show you how I turned a 13mb photo direct from a camera into an 86kb photo suitable for the web.

save for web final product

0.6% file size of the original image without compromising on quality

Photoshop’s Save for Web & Devices Feature

‘Save for Web & Devices’ is a commonly overlooked but very useful tool. Most people just use File>Save which does contain resize bar and will tell you the resulting file size. That’s okay but Photoshop has a much better feature that is usually ignored – ‘Save for web & devices’. Read the rest of “Photoshop Tutorial – Save for the Web”

Tutorial: How to Make a Lightsaber in Photoshop


Photoshop Lightsaber Tutorial

Find out how to create your own Photoshop lightsaber with this easy step-by-step tutorial!

Last year my good friend (and self-confessed Sci-Fi fan) Jen went to the London Film Museum, and got a great snap of herself with a lightsaber.

However – the prop lightsaber was just a white stick – and I remembered a nice method in Photoshop to add a glowing lightsaber blade effect.

I’ve included a step by step tutorial on how to achieve the lightsaber effect in Photoshop below. If you’d like to lean Photoshop in depth, check out our Photoshop courses.


How to Make a Lightsaber in Photoshop CS5

So – we’re starting with the original image, which looks like this. You can use your own image, or click on the one below for a larger version which you can download (right click > save image as…)


1) Open the image in Photoshop

2) Next we need to make a new layer to add the effect to (so we’re not changing the original image) Select Layer > New > Layer.

3) Now we’re going to draw a white line over the blade. To select the line tool, choose the pen tool from the main toolbar . Then choose the line tool from the new menu at the top of the screen:

Read the rest of “Tutorial: How to Make a Lightsaber in Photoshop”

Page 1 of 212