I'm currently in the mood for sharing - It's so easy to do the same old things on the internet and never really explore for anything new. But the best way to find new content is to ask others for their recommendations, so I thought it was time I reversed the process and gave some tips of my own.
My last post centred on computer and web browser modifications, so this time I'm moving on to web content and offering up the 9 blogs I visit most (and would thoroughly recommend). There's a nice range here - not all will be to everyone's tastes, but I'm sure some will, and I've tried to avoid any hugely popular sites that most will know of already. The rest should be self-explanatory, so sit back and enjoy. Oh, but don't forget to keep visiting this site too! :)
Category: Language
Update Freq: ~25x per week
URL:click here | RSS:here
The BBC Magazine Monitor blog has features such as Web Monitor, Paper Monitor, daily letters and a quote of the day.
Category: Comedy
Update Freq: ~5x per week
URL:click here | RSS:here
Emails from Crazy People is a pretty self-explanatory blog, and a very funny one at that.
Category: Comedy
Update Freq: ~30x per week
URL:click here | RSS:here
Failblog posts pictures and videos of people failing, and has a unique user community, often more baffling than the content!
Category: Image Design
Update Freq: ~1x per week
URL:click here | RSS:here
Tutorial9 is a website that provides really good quality Photoshop tutorials, with free PSDs available to download.
Category: Maps, History
Update Freq: ~1x per week
URL:click here | RSS:here
Strange Maps does what it says on the tin, but has suprisingly thought-provoking posts with some really interesting maps.
Category: Image Design
Update Freq: ~7x per week
URL:click here | RSS:here
Photoshop Disasters highlights awful image editing in the world of visual media, naming and shaming culprits!
Category: Video
Update Freq: ~15x per week
URL:click here | RSS:here
The Best of Youtube posts a wide-range of videos, most of which are certainly worth a watch - a good 'youtube guide'.
Category: Video
Update Freq: ~1x per week
URL:click here | RSS: N/A
Another 'best of youtube' site, canada.com posts the most talked-about videos of each week.
Category: Video, Sport
Update Freq: ~1x per week
URL:click here | RSS:here
The Guardian Youtube Sport Archive posts a group of videos based on that week's sporting events.
Whenever I install a new OS (thanks to XP, it's been a while), I always install a few applications / modifications to make everything run more smoothly and look a bit better. So this post is really just a list of 7 simple changes you can make to your (XP) computer / Firefox browser to bring it up-to-date and add some useful features:
1. Get the Image Resizer PowerToy This is really simple, but also really useful - A tool that lets you right-click on any image and resize it, making a copy or changing the original. You can also select multiple images and change them all at once. It's perfect for quickly reducing image size to email, or resizing a batch of photos from a digital camera to upload to a photo-sharing website, for example - for every fresh OS install, this gets put back straight away. Clicking the 'more info' link below will take you to a page with all the PowerToys on - another I find useful is the RAW Image Viewer (link), but this is only likely to be useful for D-SLR users.
2. PowerOff Auto-Shutdown Software I'm sure I'm not the only one who occasionally falls asleep with my computer on (mostly as it acts as my TV) so installing this simple piece of software can save you electricity and therefore money! I tend to just install it and set it to auto-shutdown at 3am every day, just in case - if you're still up, it warns you and you can cancel the action, so you've nothing to lose really. I wouldn't recommend leaving unsaved files open, but then that's never a good idea anyway :)
3. Foxdie Graphite Firefox Theme After trying out a considerable amount of Firefox themes, I came to the conclusion that all of them are rubbish and sticking to the default is the way to go. Then I was using a friends Mac and liked the brushed metal effect that the Mac Firefox has, so thought I'd see if anyone has replicated it for Windows. Well, they haven't exactly, but it did lead me to a theme that is similar and usable too - It's now my default theme. So, if you're going to try any Firefox theme, try this one! NB This theme works with Firefox 3.0, but no later (beta) versions as yet.
4. Image Tweak Firefox Add-on When you look at image files using a web browser, the default white background of the browser and the fact that pixels set to invisible are shown as white means that you can't tell if you have a picture with any invisible sections or not. Say you wanted a PNG / GIF of the Firefox logo, so you could drop it into some design work without having to clip round it first. You might do an image search for 'Firefox logo png' but you can't tell if any of them are cropped or have white backgrounds. That's where ImageTweak comes in as it puts a dark grey background behind all image files when viewed directly (therefore not affecting images within webpages). Now it's simple to see if you have a PNG/GIF with invisible sections or not:
5. Web Developer ToolBar For anyone who develops websites, or even anyone who wants to find out more info about a webpage, this tool really is a must. It's been a staple of Firefox for many years and it remains the best way to get underneath pages you are viewing as well as offering a huge variety of tools to help test, develop and debug websites and web apps. There are similar add-ons out there that may do individual tasks, but this really has them all. Once installed, it can easily be turned off and on (right click on top-menu and de-select), meaning you can query pages when you like.
6. Spaz & Abode AIR Adobe Air is a nice runtime environment that combines the worlds of web and software development by allowing you to build desktop software apps using HTML, CSS, Flash, AJAX and JavaScript. These "apps" are a huge growth market and products like the iPhone have shown how popular they can be, when you can download them to a hardware device, rather than just locate them online.
So I thought I'd explore some of the programs currently built on Adobe AIR and found something I'd been looking for for ages: A great, customisable desktop twitter app, called Spaz (not a UK name!). You simply get it installed (after installing AIR) and then log in and everything's pretty self-explanatory. It sits on your desktop (can be minimised to the system tray) and gently alerts you of any updates on your twitter account, whilst letting you easily reply, forward and send messages. Before Spaz, my twitter usage was minimal and I was struggling to see the point of it, but now it makes much more sense!
7. Textpad Textpad is a simple text editor, with none of the whiz-bang of word, but has most of its useful functions and plenty additional ones. This isn't a program to make fancy documents on, but more for simple text editing and coding.
If you do any programming whatsoever, Textpad is a god-send. Even if you don't, I regularly use it just to open documents in their simplest form and if they are text-based, it always seems to display them as they were intended.
One of its best features is the macro creation tool, whereby tasks can be recorded and replayed across a large file. Equally, regular expressions are accepted so complicated editing tasks can be performed automatically.
When I was writing my post on Google Labs - Similar Images, I didn't spend a lot of time checking out the competition, idly presuming Google would be ahead of their competitors.
Well, I've since discovered a number of services doing exactly what Google is offering, as well as a bit more - so here's a wee low-down:
TinEye First up is TinEye - An operational beta service that has quite a few followers already. This site can pitches itself as a 'reverse search engine', that lets you find similar images based on giving it a source - any image on the web and (crucially) any image you upload to it.
This lets you find out what something is when you have a picture but no details and therefore performs the one major feature that the Google service was missing.
The Newspeak Blog shows the power of this service, using TinEye to prove campaign leaflet 'voter photos' were in fact stock photography, available to buy on the web:
As you can see, they have good video resources and a blog about the service, so it should all make sense on there - even demonstrating an album cover search using a mobile phone...check out the plugins too:
Gazopa Gazopa is in a registration-only beta (free & quick to sign up though) and offers an image search based on keyword, an uploaded image or a sketch. The sketch feature is a nice touch, but results are mixed. My search for a basic guitar shape brought up a few guitars, but my sketch with a man playing a guitar wasn't so successful (see below):
Gazopa is a sketch-only image search and searches via flickr only. However, it has a nice interface (results update as you sketch) and can be a nice way to see a variety of photos based on a rough colour theme. As they explain:
All-in-all, these services offer some interesting results, and of the three, TinEye certainly has the most polished and reliable service. However, this is a growing field and these services will improve and others will surface and it won't be long until one comes to dominate them all - I'm sure Google is keeping it's eye on the competition!
I'll start this post by saying I used to be an avid reader of the SciencePunk blog and this post was inspired by a post I saw there. However, it's recently been given a facelift (and is now part of Science Blogs) and even though on paper it's now much better, I don't visit as much now - it's a bit less personal somehow. Maybe I just don't like change! ;)
So how many times have you thought, 'man, I wish I had a paper model of the Pope..'? Well, now you're in luck! And not only one, but two glorious models - as well as a bonus model of the Hoff! Oh yes :)
These 2d cut-out models of the Pope and the Hoff come courtesy of Rob Nance's website, 'Art for Robots' and are by no means the only thing worth looking at on the site, so please take a visit. You get a rough idea of the type of thing we're dealing with in the picture below, but click on the links below to get the PDFs of modelly-goodness!
Finally, if that isn't good enough for you, why not make your very own 3D model of the Pope? With the help of the Spanish blog 'Recortables', you can - I've put a link to the blog post below, but unless you speak Spanish, it's probably easier to juct click the link below it to the 3D model itself:
It's always worth keeping an eye on the Google Labs website, as that's where you get to find out about any potential new Google services. They might not all be particularly useful, but the latest edition is a service I've been waiting for for ages.
It's called Similar Images and simply allows you to search for images as normal, but when you get the results, you can select an item you like and ask for similar results. This is particularly useful for searches that are skewed by more popular results (e.g. when searching for 'wallpaper' (as in the stuff you paste on your wall), most results will be computer wallpaper images and therefor not quite what you were looking for).
Google Labs - Similar Images
To show it's power, I'll show you an example that I used today for some design work. Often I need to send screenshots of development work to client and like to show what is being clicked on by adding the hand icon used in windows. However, when searching for this 'hand icon', you don't get very useful results:
Standard Image Results For "Hand Icon"
As you can see, not many of the results are what I was after. The fourth one is sort of right, but it's not quite the angle I was looking for. So I can click on the "similar images" link below it to be taken to a new results page:
Similar Image Results For Chosen Image
As you can see, I now have a number of choices that fit the bill and my image search is completed in two steps.
I'll be even more interested in this service if it allows you to import your image to search for similar images, as this would bring image recognition services to the masses - not long now, I imagine (and hope)!
Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.
Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.
So, firstly we need to link to these JavaScript files in the <head> of our HTML document:
Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).
Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:
We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.
Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:
<tr id="trOne" onClick="FuncShowHideOne()">
Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:
Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:
So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:
I've posted a couple of times about things I've seen on the Strange Maps Blog (see: Old School GPS & Hoaxe Island and Pop vs Soda (USA)) and another post recently caught my eye. It's a decent blog, but occasionally things stand out - I'll try to add some context here too.
This time, it's a map of the world using typography to fill in the land area with the name of each country. It was created by Vlad Studio (a wallpaper design guy) and some countries were obviously considerably harder to work with than others. Firstly, some of them have awkward shapes, secondly, a lot of countries are way to small to fit readable type inside and thirdly, some countries names are way too long! It seems people didn't have such a task in mind when creating their states.
Looking at the image in detail (click to enlarge), It's fair to say any country smaller than Ireland has little chance of making the readability grade - leaving 111 countries out of the picture. As there are around 230 countries (too disputable to be 100% accurate!), this leaves only half the world's countries on the map - but I still love the look of it:
After seeing this, I thought it would be fun to find some other unusual maps - and not just modern designs but a few older maps that saw the world in a slightly different way.
First up, here's a map of the world with north at the bottom - and as space doesn't really have an up or a down, this map is just as accurate as any other - but it's strange how wrong it looks. Growing up in the UK, I also find it weird seeing maps that don't have GMT (and hence the UK) in the middle:
In fact, the first map of the world - The Fra Mauro Map of 1459 - used a similar system, although as was commonplace in the 15th century, a circular space was used rather than a more modern rectangular projection system. Fra Mauro was obviously a pretty impressive mapmaker though, as his map is not only beautiful, but he was described as "geographus incomparabilis":
Finally, here's a map that doesn't invert any display directions, but simply inverts land and sea - it's hard to imagine us all living on one massive chunk of land with a few huge lakes in the middle - but it might be fun:
So that's a little round up of some unusal maps - I'm sure there are plenty more examples out there and the Strange Maps blog is always a good place to start!
So, the title of this post may not be the most enlightening - but it's hard to sum up in 6 or 7 words! I was recently told about a web project called Ten Thousand Cents, that split an image of a $100 bill into 10,000 segments and got people to draw a copy of each segment before putting them back together to recreate a $100 bill.
The concept was pretty simple: using Amazon's Mechanical Turk system (where people are paid to perform basic tasks) and a customised drawing / animation tool, people were paid 1 cent for every segment they re-created and their efforts were "recorded" by the software so their brush strokes could be shown as an animation.
So what they ended up with was a drawing of a $100 bill that cost $100 to create. So far, so good:
You can see in the picture above that a video is playing showing the image segment (left) and the user-created replication (right). Look carefully and you can see a small red traingle showing which segment is being represented. All of the 10,000 segments can be selected and viewed in this way - and it's fair to say there is a variation in the quality of the user's work, as can be seen in the photos and animation below:
But put all this work together and you get a pretty glorious whole, with only the odd error being visible (mostly where the background was left white). The results of this project were put on display at Ars Electronica 2008 in Linz, Austria:
But this whole project had a bigger purpose than just that of a piece of art - the reproduced $100 bills were printed and sold for $100, with all proceeds going to the One Laptop per Child Foundation (OLPC). I had a brief look at the technology behind the project and other than Flash, a lot was done using a coding language I'd not heard of before, called Processing (1.0). It seems an interesting language, but I'll leave it to the creators to explain what it's for:
Their website is full of examples of its use and some of them are really interesting. I've touched on similar themes in this blog before (see: Dynamic Abstraction - Joshua Davis) and think there is a lot of room for mixing programming and graphic design - maybe Processing could fill the open-source gap created by the prominence and proprietary nature of Flash. I've shoved a screenshot of one of the Processing projects I found below - called Platonic Solids - but the site is a nice one, so feel free to find more interesting things for yourself!
As always, that was a bit of a journey but I hope there are a few useful things in there - a great project, a benefiting charity and an open source graphical programming language - now it's time to think of a snappier title! :)
Ok, so website statistics aren't exciting. Everyone knows that. But, pretty much every client I've worked for requires them and the requests are getting more specific ("How many people downloaded this video?", "How many people opened this document AND saved it to the computer?").
So I give them what they want, but try to do it in a mildly stylish way - stats don't have to look boring as well. Website stats used to centre around "hits" but thankfully most people are now aware of the different type of statistics produced - hits, unique hits, page loads etc. I've always preferred my stats to show daily unique page loads - This shows how many different people went to your website each day and how many pages they looked at.
My stats are produced dynamically - I made a script to do that - but come out as a colour coded graph as well as a table of numbers [click to enlarge]:
This script can easily be manipulated to produce graphs for web display, giving users an idea of current website use - As you can see from my stats, this blog has gradually getting more popular - with over 2000 unique page loads being reached for the first time a month or so ago...may the rise continue!
This is a simple concept but brilliant as well - It just takes someone to think of it. I'm pretty sure the image is a mockup but I'm duely tempted to stick an old enter key to my doorbell and give it a go...
...Alright, I couldn't resist - I did the only decent thing and replaced my doorbell for the better. Great design, nice concept and pretty much free to implement :)
I'm a bit of a fan of the BBC Horizon programme. For the uninitiated, its a long running BBC Science series, highlighting current scientific research and making it accessible to the public. It systematically gets criticised from some quarters for being 'un-scientific' and it's true that over time it has perhaps lost its way a bit with this regard, but I think it's important to put it into context - These days it is much, much easier to look up more information on scientific topics and the programme still offers a great introduction to a lot of scientific topics.
Anyway, without going into that argument too much, I thought I'd take a look at some of the logos used over time and suggest one of my own. As you can imagine, the logos often use a curved horizon as a theme (not long until they use an event horizon!), although the most recent logo is pretty simple ("modern").
The last one there is from a strategy game called horizon but I put it in as I thought it wouldn't look out of place at the start of the programme! The penultimate one is my design - it was only a 10 minute job but it's ok - I don't think I'll be sending it off to the BBC though! The pattern in the background is actually a graphic representation of a mathematical equation and the original was titled 'Math Horizon'. If you want more detail on the pattern, here's the creator explaining it in more detail:
Well, there you go - a look at a few of the logo designs over time. If you want more info on BBC Horizon, then check out the links at the bottom of the page. There are loads of episodes available online, so have a look and check some out - I've posted one video below, which you'll need to register with veoh.com to watch in full - but should give you a good idea.
Well it's been a while getting here, but here is the 100th post on the Beats! Design Blog. I was tempted to do a review or 'best of' the last 99 posts, but in the end I decided just to be nice and simple. Somehow, I feel this image sums things up pretty well [click to enlarge]:
I've seen this cartoon posted on a few other sites, but there never seems to be a source - or each site pretends it's there own work (naughty!). I think I've now tracked down the original post now, so take a look at their site: Wellington Grey - This Modern Life
This blog has been up and running for over a year now and there's plenty more to come. In the next few months, watch out for the conclusion of Earth Stories series, some more Beatslinks and hopefully a few more examples of customised online mapping - I'll get working on it!
I like learning new things to do on Photoshop and there are loads of great tutorials out there. My favourite site is Tutorial9 and I've posted the results of one of their tutorials before (Article #48: Apple Artwork & Dust). This time, I thought I'd try a text effect...and I'm pretty pleased with the result [click to enlarge].
It was nice and easy to follow and as always, they provide a PSD file in case you get stuck - click the links below if you fancy trying it yourself.
I was recently checking out an article of new AJAX services as I've not done much work in that area before. The list was interesting but most things offered relatively small increases in functionality for the work I do, not giving me as much incentive to change my ways as I'd hoped.
There were, however, a number of great photographic design ideas at varying levels of completion. Some of the best were still 'in construction' with just teasing demos showing off their potential. One such tool was JCrop, a service that allows images to be cropped in real-time directly on a webpage, with various aesthetically-pleasing functionality. The only problem was that the API was only partially completed and only for the more basic functions.
However, I played around with the service and have come up with a nice demo of my own - who needs APIs, eh? The concept was to hide a hidden message beyond a character string that would animate the message if the string was entered correctly.
Obviously, I'm not vindicating its use for genuinely secure information, but as a fun tool it might just work. So, I hit upon the idea of having my mobile phone number revealed if you enter some information that only my friends / clients are likely to know.
All you have to do is enter my two home-towns and my phone number will be displayed, one digit at a time:
I've customised the use of this service, moving away from any cropping purpose, to just use the animation and highlight functions, set to an image map and link id values, assigned to the correct animation and location.
The background image can be changed very easily as well, meaning each coded message could look different. I'm considering expanding the idea as a service (similar to Photowords), but we'll see if I have time!
The way webpages are shown on company sites has varied over time, from simple screenshots and drop-shadow thumbnails to iTunes-style reflections and increasingly, perspective shots.
The principal is simple - take a screenshot of your webpage and add a reflection, but instead of a face-on view, take a side view in perspective. Some of you may be wondering how best to go about doing this yourselves - and thankfully, it's pretty easy in Photoshop.
Let me start by showing you an example I created, using my Fringe 2008 Site as the template [click to enlarge]:
The effect is a nice one and allows your work to be showcased in a stylish manner. Here's a quick run-down of how it's done:
1. Open up a new document, roughly 2000x2000 and add a background colour.
2. Open the webpage you are showcasing and press 'Print Screen' - open a new document and paste this in.
3. Cut out your webpage from the screen grab using the rectangular marquee - paste it into the first document.
4. Hold CTRL and use your mouse to resize the webpage, keeping both sides straight and the bottom angle bigger than the top (see example).
5. Duplicate this layer and use the same technique as above to make this layer a rough reflection of the first. Reduce the height of the layer of a bit to enhance the reflection effect.
6. Set your foreground colour the same as your original background and set the gradient tool as foreground / invisible.
7. Finally, use the gradient tool to fade out the end of the reflected image until you get a good fade-out - again, check the example for reference.
I hope that makes some sense - Good luck in creating your own :)
I've looked at making a nice, Flash-free image switcher before and have had some success but thought I'd adapt it a bit for a new set of pictures.
My previous image switcher efforts used a menu system, but this time I'd like to use 'forward' and 'back buttons, meaning creating an image map for each photo. I've also opted to use an iFrame this time, guaranteeing all the files are in the right place!
I think it works pretty well and is a code-light app, so nice and easy to replicate!
You may have already heard about Garfield Minus Garfield as I saw it described earlier today as an "internet phenomenon" - However, it was new to me so I thought it was worth a post!
The premise is simple - remove Garfield from the original Garfield comic strips and create a new comic about one man's insanity....it really works rather well :)
I've put together a sample of 4 strips below, but there are loads more on the official site (link below)
There has been a fair amount of buzz about the new BBC series, 'Britain from Above', in which satellite imagery and geo-tagged data are combined to help tell the story of Britain.
Well, that's what they'd like you to think - of course, none of the promotional imagery is anything other than computer-generated, albeit from geniune data sources. People like to believe that satellite images are standard photographs, when the truth is a lot of standard imagery is false-colour. Although the images provided to promote the series are intruiging, they are really just graphical representations of data on top of an altered satellite image.
I've nothing against this type of representation per se, but I do think that data is more readily accepted when it looks pretty. These images and maps offer brightly coloured lines and dots and the appearance of a fast-moving, exciting world. Often the images look great and you think 'wow, look how interesting that is' without really thinking about whether it shows anything at all.
Take a look at the 3 images below and have a think what they REALLY show you - and whether it's an unlikely outcome or just a nice represenatation of a fairly obvious principle [click on each image to enlarge]:
These images are certainly interesting - especially because I created the 2nd image on photoshop in 5 minutes. All it actually shows is lots of green and white lines on a tinted satellite image. I'm not sugegsting that any of the other images are faked or misleading, but just a word of warning - think about what the data actually shows and how relevant it is as it's not hard to make a pretty picture that illustrates nothing!
I was reading an article on Wikipedia about Tutankhamun (Tutankhamun Entry), when I stumbled across an image of Egyptian iconogrpahy depicting Tutankhamun at war.
It just seemed to have a striking resemblance to the Bayeaux Tapestry (1000s of years seperate their creation!) - The top and bottom borders, the fight scenes, the characters dotted around the space. I guess good design is good design in all cultures!
The lack of support for invisibility in PNG files across web browsers is a constant irritation for web designers. It's amazing that a proper solution still hasn't been sorted, with browsers hopping in and out of support for this function.
It seems simple enough...you want to create high quality graphics for a website that can be any shape yet blend in with any background. Curved tables, free-standing text, any shape that isn't a rectangle...there's a lot of scope for this function to be useful. And then, once created, the graphics for a website would be independent of any stylistic changes to the background. A bit like the situation we currently have with GIFs, but allowing good quality graphics.
So - after a lot of searching - I've come across what I think is the best solution to this problem. Of course, modern web browsers should display (or not display!) invisibility in PNGs without an issue, but you don't need to go back far to realise this solution hasn't been in existence long.
So, to solve the problem, I found a solution involving a link to an HTC file and then setting div tags for a background png image and bunging it in a table. I'll explain this below, but first I'll show you the problem. Below is the same image shown twice, on top without any HTC file and below with the link set up. If both images show invisibility, then you're using an up-to-date browser, but try opening this page in another piece of software and you may well see why this problem is so frustrating!
Then put the following lines of code in the <head> of your document, changing the code to represent your png file(s). For multiple files, just repeat with a new class name:
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!
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
Adverts appear all over the web and often take a similar form, constrained by the size and shape advertising space is given on websties. The most common of these is the banner, normally with a width-length ratio of between 1:6 and 1:8.
I've been asked to make these for various companies before, often to send out to other companies as part of an advertising or link-sharing deal. I've had some experience with Flash before, but I was interested to see how quickly a simple banner could be made to get a simple point across quickly.
For the sake of simplicity (and cost...there's a free demo version), I like to use KoolMoves - Flash Creation Software. This is the easiest piece of Flash software I've used and I would especially recommend it for beginners.
So, I set about making a banner detailing a special offer for a fictional company - FauxCorp - to see how quickly a simple message could be put across. It took me 10 minutes to create this, but anyone new to the software would maybe need 2 hours first to explore the software.
This banner uses very simple effects:
1. A full size rectangle with gradient fill to create the background.
2. Four text boxes for the various messages
3. Two shapes to create the FauxCorp logo
4. An image of a gift
4. Fade in/out, slide and zoom effects on the various text boxes
5. Slide in and fade out effects on the FauxCorp logo
6. Spiral effect on the gift image
So, it can be quick and easy to make an animated advertising banner using the right software. The free version adds a watermark to the swf file, but older versions allowed full use (except saving to propreitary format).
Tag Clouds are often bypassed by users and really only function as a brief glimpse into the content of a blog. After posting about stylised tag clouds recently, I searched for a service on the web that might aid their creation.
It's an interesting service that creates tag clouds from a block of text or your Digg links. I ran the service for all the words in this entire blog and tinkered with the settings to create three new tag clouds [click on any of them to bring up an enlarged version.]
First up, the one you'd most expect - this cloud contains the top 80 words on the blog:
Next up, I tried it with the top 1000 words, giving a slightly ridiculous - but still quite fun - tag cloud:
And lastly, I gave it a go with only the top 9 words:
So there we have it. They're not too bad either, with the general themes appearing most often. I altered the style settings on each one to make them more aesthetically pleasing - why not give it a go yourself?
I'm interested as to how many people use Tag Clouds for anything useful? Are they an idle graphic or a beneficial tool? I imagine most of us will have come across Tag Clouds and similar web 2.0 gadgets before...
...I normally look at a tag cloud to grasp a general of idea of the data / users I'm looking at / blogging with. Therefore, why not play with the idea a little bit and create a nice tag cloud graphic, showing the most popular topics within a blog.
This will instantly give the user an idea of what the blog is about and also which topics dominate proceedings...
This is the tag cloud for the Beats! Design Blog as of June 2008. Font size is scaled with the number of tags for each word (from blog posts) and all the tags are jumbled together in a slanty cloud.
I've added it to the new blogbar at the right of the blog, just so people can see roughly what the blogs about. As this is a bit small, clicking on the cloud will take you to this post...simple :)
I was quite pleased with the results (well, for 20 mins work) but the main reason I tried it out was the ability of photoshop to move images in a 3D space...(try pressing CTRL in a free transform).
It's an interesting tool - and one I'll use more and more - that can really help with designing various image products. This function has been in photoshop for a while but I've only just got to grips with it, yet it seems pretty effective..
I'll keep you updated as to the results of the competition - fingers crossed my ideas are appreciated, but there's a lot of talented peeps out there so I'm not expecting anything! :)
UPDATE [10/06/08]: Success! My design was the first feature in the competition results - great stuff!
Photosynth is a Microsoft acquisition which first surfaced in 2006. It brings in photos from a variety of sources on a specific subject and aligns them in a 3D space, bringing together these various shots into an explorable whole.
Rather than giving an extended description, it's best to watch the video from the 2006 TED conference, seen below:
Although it's seen little further development (in the public arena, anyway) since its introduction, it still blows me away in 2008. As this is a Microsoft Labs project, there is a large amount of information on the official website detailing the service, so I'll let you explore at will (you need a small download to view it).
I really hope this technology has further use - it did feature in a Nasa project in 2007 - as it still has no contemporaries in the web world.
I was reading up on a few design agencies, following on from an article about the London 2012 Olympic Logo.
This took me to the (highly-praised) website of the designers, Wolff Olins. I browsed through some of their work and found a recent campaign on behalf of Sony Ericsson, of which I had seen a number of the adverts in the past months. However, I found one slighly bizarre; not only because I initially didn't 'get it' but when i did 'get it' i still didn't 'get it'!
"I love sheep?", I thought. OK, it was then spelled out to me that it was "I love you" - but still, I'm none the wiser as to how that sells phones...oh well, each to their own!
I was recently traveling on a train and saw an advert for free wireless on all National Express train services. The advert conveyed the point simply whilst using the photographic background to get across the slogan.
A low-res version of this image is below - the advert used this with the National Express Logo and the slogan "Free Wireless - Your Gateway to the World":
This got me thinking about the possibilities of using a similar technique for a simple advertising campaign. So...I got Photoshop open and made a fake ad for a made=up company, 'Fauxcorp'.
The premise was of a lady "sitting on the fence", which paints the picture of why you may need Fauxcorp: Decision-making. It was just a 5 minute job, but it shows what can be achieved when the picture tells most of the story.
Recently, I was looking at a site in Edinburgh that was being regenerated (in fact, at the moment a lot of our open spaces are being 'redeveloped') and it made me think about how the public can get involved in such schemes.
Let's be honest, generally these things seem to occur with only the smallest amount of public involvement. Of course, I'm sure the council would disagree, but that's generally how the public feel.
The main problem is that Joe Public is unlikely to be a trained architect, so submitting ideas is difficult. Now, with the aid of Google Earth as a base map and Google SketchUp as an urban design tool, the public could submit ideas and changes to planned schemes, with relative ease.
Google SketchUp is a free program that allows design in a 3D environment, with simple links to Google Earth, allowing designs to be placed in the current built reality of any city.
The image above shows my creation of a simple skyscraper that has been placed in a city (Boulder, USA) and a few snapshots taken. Every element of this building is editable and this was a VERY simple example to show you what can be done.
Now, go and practice and give the council a shock at the publics urban design skills!
There's been a lot of press coverage of the work of Banksy recently and to be honest, I don't like jumping on bandwagons, especially as there must be some reason all media sources are suddenly talking about him.
But, ignoring who he is, what he does, why he does it etc, I just rather liked this work that's recently sprung up on Pollard Street in London:
Brightens things up a bit in my opinion and a nice, effective design without being too complicated. I'd certainly smile if I walked past it!
It's nice to use Photoshop and similar programmes to fine tune your photography or to make nice designs for websites etc, but combining the two can also be fun!
Here, I've taken a photo from my collection and applied a simple Photoshop filter - the stained glass effect. Then, applying it at different levels, I have saved 4 images that vary from difficult to comprehend to the original image.
This feature could easily be used to hide the identity of a photo for a guessing game or competition on a website - with the half-way images used for clues when the competitor is stuck. The setting used for each shot are shown at the bottom of the photo. Just go to Filter -> Texture -> Stained Glass.. to eneter the effects menu:
There are a variety of ways to create sepia effects on photos using a simple photo editing programme. Some seem more complicated than others, but they don't need to be - here's a very simple technique for creating a nice sepia effect using photo shop - starting with a standard colour digital photograph.
First, choose an image and open it up in Photoshop. The following image will be used in this tutorial, so the effect can be seen from start to finish:
Firstly, remove the colour from the image. This can be done by converting it to black and white, but can just as easily be done by following this menu path: Enhance -> Adjust Colour -> Remove Colour.
Next, add a new adjustment layer and use an orange colour similar to #9b6921. Now, in layer options simply select 'Soft Light' rather than 'Normal' and you have yourself a nice sepia image.
**For an even simpler (but slightly less effective) method, simply add a new fill layer with the colour above and set the opacity to around 15%.
Due to the christmas break, the blog may well have a week or two off so I thought I'd leave on a Christmassy note! So here's a wee christmas message from Beats! Design:
The following example is quite self-explanatory, just click the labels to get a zoomed in image at full resolution:
After exploring techniques for showing multiple-layer images on the web, it occurred to me that this technique could be applied to add content to an image by zooming into higher detail areas.
The following example is quite self-explanatory, just click the labels to get a zoomed in image at full resolution:
Well after discussing the possibilities of multi-layer photographs using JavaScript and HTML, I felt the system could be quite effective with a bit of fine-tuning.
The following an image taken from Nelson's Monument in Edinburgh and 5 layers are included and are toggled using the little key in the top right hand corner. The same applies for the image below, which is of the coastal view from Culross, Fife but this uses a blog key toggle as an alternative. I may use this system in the future as it is nice and simple and doesn't require any plugins, such as Flash (although does require a JavaScript-enabled browser - but they're pretty common!).
The letters in the key refer to: (c) colour image, (s) sepia image, (b) black and white image, (a) artistic image, (i) inverted image.
After many, many hours of fine-tuning, I've created a nice little system for displaying multiple photographic layers withing one image. This is great when you have multiple versions of one image (say a colour and b&w copy) and want to be able to easily flick between layers.
This uses a relatively simple piece of JavaScript as well as HTML image maps, but the reason it took so long to perfect was because of problems using this script across different internet browsers. Instead of setting the multiple layers to invisible div tags, they have to have the setting 'display:none'. This allows the layers to be pre-loaded without the HTML displaying a blank space where the image should be. Secondly, a lot of issues were encountered when using multple instances of the same script on one page, but again these issues have been resolved.
The first example shows a black & white image and a colour image of Napier University's Craighouse campus:
The second example shows a different image of the same campus, but this time using four layers with different tints applied in Photoshop. This allows the effects of various photographic filters to be reviewed:
The final example shows a slightly more intuitive use of this code, using a little bit of image design to alter a night time photo by adding 'lighting' to an image. Clicking the lamp will turn on the lights and increase the image brightness:
At the moment, I'm going to leave this example without script details. It took so long to perfect that I can't face explaining all the code right now, but feel free to view the page source to have a wee look at the process. I'll update this post with detailed instructions in the next few days!
Adobe Photoshop is a great design tool, but - like any program - can be put to both good and bad uses. Sometimes, the desired effects take a lot of time, so I thought I'd introduce a couple of very quick and easy techniques that can create great design looks!
First up, creating custom brushes.
All you need to do here is grab a picture of a shape you want to use and isolate this using the select or magic wand tool (see picture below, left). Then go to the edit menu and select Edit > Define Brush from Selection. Now, save the shape and go to the paint brush tool. Now, select the brush you just created from the bottom of the paint brush drop-down menu.
You can play around with it as much as you like. Here, i used a hot air balloon for my brush and made a little image for the made-up (although it may exist!) organisation 'Ballooning UK'. This has a gradient background, 2 layers with a bigger balloon and smaller balloon and a bit of text:
Next up, iTunes-style reflections.
This is much easier than you might think! First up, grab a photo of an album cover or anything really. Either use a two-tone background or all black, but make sure the bottom half is all black. Copy the photo in and let the bottom land just below the half way mark.
Now, duplicate the layer and (using the free transform tool) drag it down so it is the reflection of the image above. Now, select this layer and apply a gradient to it. Edit the gradient tool so it is 'foreground to transparent' and set the foreground colour as black. Apply this tool in different ways until the bottom half of the reflection fades into the black background.
On the left of the picture below, a simple vertical reflection is used and on the right, the reflection image is slightly rotated (and slightly edited) to give an off-centre reflection. try it and see!
This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script).
The script then fades between these images using a dark colour fader:
Either save this and link to it on your ftp server, or replace SOURCE with http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js
The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:
Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image.
The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary.
Make sure the 'NAME' is the same as for the rollover image set up earlier:
That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above.
One thing to keep in mind is that retrievr doesn't do object/face/text recognition of any kind, so if you're drawing an outline sketch of a chair, it almost certainly won't get you one back. It helps to think of it as matching the most pronounced shapes and slabs of colors. 
