I've seen these photos posted on the internet before and thought they were a great example of creative advertising. Since then, of course, I've not stumbled across them so haven't been able to post. But, the other day - whilst on Snopes.com - 'Bagvertising' - I found them, so here they are in all their might:
The last example is probably by favourite, but it's a tough call - they're all great!
This is pretty funky - nice idea! This comes from Simon Heys Website, so take a look at his other stuff too! I've seen a fair few designs for funky clocks recently (animated and real), seems to be a bit of a trend - everyone likes to know what time it is I guess!
I needed a new loading GIF for the image loader on this blog and searched the net for a good resource. Then I stumbled upon a very useful site - Ajaxload.info - which allows you to customise a loading GIF for you site, with loads of designs to choose from:
If you ever need a loading image, this is the place to go!
Tagging images is a practice seen more and more across the internet as social networking sites have allowed vast networks of people to share media content. Tagging via social networking usually centres around ideentifying individuals, but other uses are cropping up all the time. On Flickr, for example, landscape features and photographic styles are often highlighted using tags and image maps, sometimes even adding narrative to the photo itself.
So you may be wondering, how hard is it for me to make my own tags / image maps? Well, the answer is: not very hard at all - it's just simple CSS. Below is an example showing a photo from the coast of Argyll, with 3 regions 'tagged'. I've added a bit more than CSS to this example by making 3 overlay images (in black and white with a label) that appear on a mouseover event. These images are simply included in the CSS as a hover event.
First up, here is a working example of tags and tag boxes - with mouseover events:
Now, I'm sure you'd like to know how it's done, so let's get cracking! I'll show the code for one box, rather than repeating it for all three, but the values to change are pretty obvious, just make sure you rename the CSS class (say from, #tag1 to #tag2) throughout the document.
First up, define your image in your CSS - the image will be defined as a background for a div element. Remember to change the file name and dimensions when using this example yourself:
#image { position: absolute; width : 500px; height: 333px; background: url(filename.jpg) top left no-repeat; }
Next up, you need to define the tag box itself, in this case adding a hover event as well:
All the above code should be placed in a CSS declaration in the <head> of your document. The final step is to place some code in the <body> of your document that will display the image and tags:
Well, it's been over 8 months since the company blog was set up and since then I've made it to 50 posts, hopefully providing some useful stuff along the way! I thought I'd celebrate this benchmark my launching a new Beats! Design service: 2 Degrees. It's called 2 Degrees as it's a search tool that brings back results seperated from your original term by 2 degrees of seperation.
This isn't a hugely serious service and isn't useful when a specific result is desired, but more designed to provied a link to a new website vaguely related to one you know of before. For example, if you enter "Sony" into 2 Degrees, the URL it brings back for you is "www.epson.co.uk", as the initial search harvested keywords including 'products' which was pumped back into the search to bring a different commercial supplier.
So you can see how 2 Degrees works, by entering one term, you will be taken to another site that links in some way to your original search. This link may not always be that obvious, but that's the joy of the service, a sense of exploration! And as search results change with the times, so will 2 degrees, always up-to-date and ready! The background service runs a script that connects to Microsoft Live Search, bringing back results and requesting results before being displayed in-line on the 2 Degrees results page.
Enjoy playing around with it anyway and thanks for visiting, another 50 posts here we come!
A lot of the posts on this blog centre around design techniques for business and commercial use, but sometimes it's good to just have a bit of fun. When I'm not working on a commercial project, it's nice to put a little bit of effort into making a fun profile picture for a website or social networking site.
I realised I've created a number of 'arty' (and some stupid..) pictures for my Facebook profile page and thought I'd stick them all together for all to see. These are by no means design classics (!) but thought I'd share them anyway, hopefully inspiring others to make stupid profile pictures and make me look less stupid!
Photoshop can often be a confusing piece of software and sometimes seems to excel in making the easy seem complex. I still use Photoshop in combination with MS Paint at times to save a bit of time when doing simple jobs (curved lines for example!).
But when you need to do something new or more complex, an online tutorial can be just the ticket and there are loads of great ones out there.
I had a go myself, using a couple from tutorial 9:
I've tried to add my own touches to these designs rather than simply repeating the instructions and the results are below:
Firstly, I used a photo I took from a Micah P Hinson gig to make the Apple-style design [click to enlarge]:
Secondly, I've played around with the colours when making the sparkling dust picture [just one size]:
Both tutorials were simple to follow and produced great effects, so why not give them a go yourself? It's also a great way to learn new Photoshop techniques - meaning MS Paint might one day be removed altogether! :p
