Please note this article was first published in 01 Oct 2009. Its content may now be out of date. We recommend taking a look at more recent website building blog posts or check out our comprehensive support pages. If you are looking for information on our 14 day free website builder trial we have a large number of webpages that guide you throug the process.
Images are an integral part of your Website for several reasons. When you build a website, images provide; visual aesthetics; visual information; they improve your page design; helping to create a web page which is easy on the eye and encourages visitors to stick around longer; they are vital in making best use of one of the Reason8 Search Engine Optimisation processes, which entails all images being tagged with your top key phrase., etc., etc., etc. We looked at the various options you have when placing your images but we’ve recently been asked if it is possible to add a shadow to your images?
Absolutely, YES you can. You’ll need to add your shadow to your image with an Image Editing Programme before uploading it to your Image Library. It’s a great way to add extra dimension to your pages and really shows off your images nicely. Shadowed images really only work well on websites with a white background. The advantage here though is that if you have images with a white background, a shadow can make them appear to be floating straight off the page – as you can see here.
There are several Image Editing Programmes, one of the most popular being Paint Shop Pro. We’ll look at other programmes over the next few blogs but lets start with PSP for the first step by step. (This step by step was based on PSP Photo X but many of the functions are very similar in older versions of the programme.)
As mentioned above, shadow only really works well on websites with white or very light backgrounds. For very light backgrounds, you’ll need the colour HTML code before you start. (Paste a screen print / screen grab of your home page into your editing programme, then use the colour dropper tool to get the HTML code).
Open your image in your editing programme. Make sure it’s the right size for your web page. It should be less than 400 pixels wide, an average size would be somewhere between 150 - 300 pixels wide.
We first need to give ourselves enough room to add our drop shadow, so Click - Image > Canvas Size and enter a size roughly 15-20 pixels larger than the original for both height and width. (If you hover your mouse over the original image, it’s size will be shown in the bottom right corner of your work window). Once you've set the new Width and Height, change the placement settings to show "0" in both top and left, as we only need the extra space right and bottom to accommodate the shadow. Select the same background colour as your website and click OK.
Next, using the "Magic Wand Tool" (on a tolerance setting of around 25), click to select the background - NOT the image.
Then go to: Selections > Invert. The Image should now be selected leaving the extra space outside the selection. (Alternatively, you could use the selection tool and carefully select the image yourself, making sure no background is included in the selection)
Now Click - Effects > 3D Effects > Drop Shadow > Select the best shadow size for vertical and Horizontal (guide: 3-5), Choose the Blur setting (guide: 7-10), choose a mid grey for the colour and click OK.
How does it look? To go back and tweak it, simply click Undo and change the shadow settings. Once you're happy. Cut away the excess white space and Click File > Export > Jpeg Optimiser (compression 1-3), click OK and save it in your preferred folder.
Using the "Magic Wand Tool" (tolerance setting 25), click to select the background - NOT the image. Don't forget to select any background, which shows through any gaps in the image - hold down the shift key to select multiple areas.
If the edge of your image isn’t very smooth, you can correct this by going to Selections > Modify > Smooth. Play about with the "Smoothing Amount" and the "Corner Scale" until you’ve achieved a nice smooth edge. With the new smoothed selection showing, click Ctrl C to copy, then right click and paste the new cut-out image anywhere onto the blank PSP workscreen. You should now have a nice smooth edged image with a transparent background. Make sure you have enough space to add your shadow. Then as before use the Magic Wand to select the background - NOT the image, again not forgetting any gaps.
Then go to: Selections > Invert. Selections > Modify > Contract by , to ensure a clean selection. The Image should now be selected leaving the background outside the selection.
Now Click Effects > 3D Effects > Drop Shadow and choose the best shadow settings.
Once you're happy. Cut away the excess white space and Click File > Export > Jpeg Optimiser (compression 1-3), click OK and save it in your preferred folder.
Now simply upload your new image to your Website and place on your pages in the normal way.
Please remember, this article was first published 01/10/2009. The content may be out of date and you cannot post comments any more. Please check out our new blog.
We have been in business since 2003. Back when the founders of Facebook were still in college, we were writing code and helping our users create great websites.
If you need help, why not check out our huge selection of videos, step-by-step guides and knowledge papers.
We have helped many thousands of our customers create great looking websites. Take a look at a few examples, created using our website builder.
These days, websites without background videos run the risk of appearing old-fashioned. Even dinosaurish,
There’s nothing wrong with dinosaurs, or with looking like one. Dinosaurs are cool. Unless they’re chasing you of course.
But our new background videos have landed, exploded and changed the game. They have wiped out the old standards for beautiful websites, and have replaced them with a new standard that will leave all other websites looking like fossils.
Luckily, both our existing clients and our new ones have access to this brilliant new feature we’ve introduced, and we’d like to share its benefits with you today.
A superhero is only super because he or she stands out amongst the crowd. If we were a planet of flying, teleporting, time-freezing super-strong aliens, then we wouldn’t think there was anything super about us. When it comes to using formatting methods such as bold, italics, capitals or centering, all of these little text-enhancing superheroes will only stand out if they are used sparingly, in the right place, and when absolutely necessary…
Reviews, testimonials, recommendations – we all seek reassurance in them. We might even skip past the good ones just to see if there are any bad ones.Other people are sources of information for us. They can tell us whether this product or service is actually any good or not. Reading their testimonials builds trust in your business.
If I have multiple domain names, will my website rank better on the search engines? Will I be more likely to draw in extra traffic? Will my website become a supercharged powerhouse bursting with domain names that will become a magnet for new business? The answer might not be quite as positive as you would expect, but hopefully we can answer your questions during this article…
Choosing a domain name for your new business may not be as simple as you think. Most people just use their company name, but unless your branding is well recognised, this may work against you…
Is it possible for your business website to look too good? Too polished? Too slick? Too posh?
Perhaps it depends on how slick and posh you already are.
“If a customer fills out a form and adds their email address, what can I do with it?” This is a terrible question, asked by non-GDPR compliant cavemen and cavewoman who still think it’s OK to treat other people’s info as if it’s their own…
You are building a GDPR-friendly email list, and now you want to start sending out newsletters, the professional way. Where do you start?
“Don’t sell your product. Solve their problems.” Mark Cuban’s wise words sum up the art of selling – it is about helping people, fixing problems and improving the lives of others…
iF we’re honest, not many people will accuse you of clownery for not having a proper business email address. But they might not call you professional either…
Building a professional website to grow your business should be easy and seamless from start to end. We offer to build your business website for you, in four easy steps…
When July 2018 hits, Google Chrome will make sure a strong warning will pop up on any website that has not yet updated from “http” to “https”. The warning will include something along the lines of “Website Not Secure”. Here’s how to avoid it.
We are the DotGO: where everything is included and everything is managed for you, all at no extra cost.
We design websites to grow your business and wow your customers.
We are a UK company filled with passionate website designers and clever writers.
Friendly, professional and fast customer service is at the heart of everything we do. Our designers and unique technology make your website quick, responsive and secure, giving you the best chance of ranking well on Google.
If you need a shop, our own powerful ecommerce platform integrates beautifully. We train you to use our simple tools to update your website yourself. Our UK support team are on hand to provide sensible support and advice whenever you need it. We even power your professional email service, so you stay in contact with your customers by phone, tablet or computer.
Oh, and the best bit? It's cheaper than you may think, and we can get started right now.