Christmas flash games

The ski and particularly the snowball game were quite tricky to create but I was really happy with the results at the time. The idea was to help entice customers onto the christmas special area and spend spend spend! My programming friends also allowed people to enter a prize draw if they submitted they’re score.

Beneath the evil marketings ideas I also enjoyed making the games! And I hope you like them too, despite their unseasonal timing.

This showcase is about the hand drawn, web design style:

http://www.myinkblog.com/2009/05/16/a-showcase-of-popular-web-design-trends/

I agree that is useful sometimes to give a site a personal touch. While a site may often need to appeal to a wide audience, you can still strike a balance between fully personal and expressionistic design, and wide-appealing, user friendly design. This is especially useful in a personal site such as mine which I believe should contain some individualism as it is ultimately, about me.

I managed to appear on this post about breaking design rules. I don’t really see myself as the biggest of rebels, though there is no denying, the Maverick(from Top Gun) - esque connotations are appealing.

http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/

It is definitely true that if you do something original it will stand out, and sometimes breaking the trend or ‘design rules’ is a way of doing this. Also it highlights the old addage that there is always an exception to the rule.

And another illustrative showcase:

http://www.hongkiat.com/blog/60-beautiful-hand-drawn-web-design/

Illustration isn’t as common in websites for one reason or another, so I guess it’s no surprise that the illustrative header on this site has helped it stand out.

But anyway, I should explain the reasoning behind the ‘yay!’.

I’ve had 2 morale boosters which is always good.

(1) Recently I did a post on ‘top 10′ type lists overwhleming digg.com. Well I’ve kind of come to the conclusion that I usually tend to dislike them unless I appear on them!

http://sixrevisions.com/web_design/30-creative-examples-of-illustrations-in-web-design/

It’s pretty cool that I managed to get on this as I’m trying to further my illustration skills and it’s nice to know this site is still getting some attention even though I designed it over a year ago. + extra morale booster for appearing in the same list as a bunch of design agencies and famous designer Andy Clarke.

(2) Second morale booster is that mach4cs.co.uk, a site I did for Pontefract based, computer repair company got on a design gallery site, generating a few hundred visits, which is bound to help the site’s SEO:

http://www.cssdrive.com/index.php/main/galleryitem/mach4_computer_services/

Not sure how will advertise this but I’ve started by posting on the Leeds Music Scene website, for what I think is a pretty damn cheap price of 450 quid.

Having done band sites before I’ve developed a decent CMS, created in PHP, that amongst other things allows bands to upload their own photos which automatically get resized and optimised. I’m also interested in taking on logo designs which I enjoy as they purely focus on concepts and design rather than any techincal lark.

Click on the thumbnail below to see a design of a site I recently did for a friend:

I need to improve my skillz somehow I reckon. “How? They’re already so good?” I hear you say. My design skills seem to naturally progress aslong as I keep myself busy but I’d like to improve some aspect of my skills further to gain the satisfaction or stop any niggling doubt in my own ability.

Last year I guess I mainly moved forward by learning javascript and now I’m glad that I’m pretty good with jquery and mootools, able to write pretty handy stuff, including AJAX, that is a necessary skill nowadays with javascript able to create very useful features. I’ve also learned Illustrator and improved my illustration skills.

Anyway, as probably most people do, I have a large abundance of ideas that i’d like to do but from either lazyness, procrastination or busyness I probably won’t: fill my new moleskine with amazing drawings, become an amazing ASP.NET programmer, redesign my portfolio and get on all the gallery sites again, be as good at graphic design as I am web design. But hey ho, hopefully I’ll achieve something.

This year I got on design galleries for 2 websites and created a popular photoshop brush set, I need to atleast match that or is that showing some kind of obsessive, masochistic behaviour, I’m not sure.

Atleast I am going to be playing the drums in a band again, this should definitely feed my creative hunger (forgive connotations, I’ve been reading vampire books lately), and now I am wiser, the music could even be good!

• ‘e-motivator’ - okay this probably isn’t that strange as I do have probably the best e-motivator device around, I hope the people who found it were motivated.
• ‘crap design for multimedia’ - it’s unfortunate my site comes up first when you search for this
• ‘best multimedia portfolio websites 2008′ - luckily this one cancels out the last one and I think this one is definitely more applicable!
• ‘can whales breath out of water’ - simple answer, no they can’t….or can they, actually I’m not sure but my blog doesn’t provide the answer for this anyway, it does tell you about liquefaction.
• ‘gay handshake’ - if you have ever shook my hand, you will know this is a ridiculous search term to find my site with seen as though it was created by me, who has an incredibly powerful manly handshake. I even did a picture about a ‘firm’, yes ‘firm’, un-gay handshake here.
• ‘high tack graphics pontefract’ - I’d like to think I’m not the source of any tacky graphics found in Pontefract but it seems someone must have been enraged by the low level of graphic design in Pontefract perhaps!?
• ‘john bunnell dick’ - he is a bit of dick but also an undeliberate comedy legend - find out why here.
• ‘what will i look like as an old person’ - unfortunately I don’t know. Because of the success of my facebook picture, I have vast amount of facebook and age related search queries. Check it out here if you want, but don’t expect it to have any kind of prophetic abilities.

I guess the moral of the story is that Google rankings don’t necessarily correspond with the truth, such as searching for what is the meaning of life, Google tells me it is “the fourth studio album from German thrash metal band Tankard”…. I’m pretty sure I won’t find the answer there :-/

I wouldn’t read TOO much into this picture. I did the heart and knife before, a litttleee bit expressionistic perhaps, but I wouldn’t worry about my sanity, I’m pretty much a certified sane person. Maybe I’m taking away any validity from this picture but more than anything I wanted to make something look good rather than make some amazing political statement, and the text fitted well rather than touch youth knife culture of Britain. :-/ Other text I considered - ‘abandon all hope’, ‘the children are our future’, ‘Do you feel anything’.

I like the knife and heart action but the picture isn’t quite there.

Maybe this picture would be better if I just kept my mouth shut. Atleast it draws attention away from my last post which was a bit below par.

No, I haven’t lost the ability to logically structure a set of words, also known as a sentance, this really is the top, top collections of top 10 lists! What’s better than the hundreds of top list posts that swamp sites such as digg.com? A post of the top 10 lists? Hey that’s getting pretty good, but NO, a list of the list of the list….awesome, now that’s good.

1. Top 10 Stupidest Lists - You’re right, they are pretty stupid, but that’s why we love them, ever thought about what to do with a newspaper, you may say read it, no retard, there’s about 10 more awesome things you can do with it than that - find out here, it will change your life.
2. The Top 10 of Top 10s - GOD I love top 10 lists, they provide INCREDIBLE information in bite size chunks. If you’re unable to read anything that’s not in a list, you will treasure this ‘article’, including literary greats such as Top 10 Crazy Science Things You Didn’t Know, it sounds absolutely mental.
3. The Ten Best Top-Ten Lists - We are blessed by so many great top 10 lists sometimes its handy to break them down further. The Ten Best is quite a statement, top ten lists are always incredible so the ten best must be something special. Yes they are, the ten most looked up words in 2007, something I have always wanted to know, almost as much as the meaning of life, and the word is ‘integrity’… I feel complete.
4. Most Popular Top 10’s of 2008 - 1000s of lists have likely been compiled this year to enrich our lives, what could be the most popular? Top 10 Obscure Google Search Tricks, sorry to swear, but I f*cking love searching on Google and with this list I could likely search all day until I collapse in a mess of drool and excitment induced perspiration.
5. Sun Sport’s Top 10s List - With top 10 lists probably being the highlight of all written word in the universe produced this year, you would wonder why they don’t get published in newspapers and the like, but they do! The Sun, pioneers of literary greatness have jumped at the chance. It cleverly has discussion links because that’s another reason I love top ten lists, they cause debate… “who’s the best Star Wars character?”, “It’s Luke of course, he is very skilled with the light saber etc”, “No it’s Chewbacca, he’s huge and has lots of hair, your Star Wars knowledge is horrendous”…. and so on, I love it.
6. Top 6 List of Programming Top 10 Lists - You may be thinking his article would have been better as a top 10 and I would have to agree, it has to be 10. Can you make room for hilarity, handy tips and sheer crazyness in just a list of 6?! Of course not, maybe the mundaness of reading top 10 lists got to him and he just couldn’t make it to the end…..arggg, have to keep going…
7. Top10lists.com - Being a top 10 list, I thought this post would not only be the best article I’ve ever written but maybe also change the world, but then I found this. An entire site dedicated to the dream that is top 10 lists. A dream born from an insane moment of inspiration and revelation perhaps?
8. Top 10 Lists from Brain of Brian - Brian’s brain must be an absolutely mental place to be, he’s a head case! Not only does he have a page which lists what top 10 lists he’s got but doesn’t actually lead to any of the lists, just to something called ‘Funny Boards’, he has Silly Postcards, Funny Philosophies. I wish I had Brian’s brain.
9. Interesting Top 10 Lists - debatable, personally I find all top 10 lists interesting and fulfilling but maybe these are particularly interesting, when viewing I found myself pondering in intrigue, a whole new top 10 experience.
10. Top 10 Weirdest Top 10 List - If I like a top 10 list, then a weird top 10 list is even better. ‘Top 10 Odd College Courses’, now that is weird, I am so freaked out right now I love it!

Complete, a sense of satisfaction, why have I wasted my time for so long with none-list posts when I could be producing material like this. I feel tarnished like I have sinned but it feels soooo good, adrenalin, excitement pumping through me, knowing that I will improve people’s lives with this sh*t.

And if you don’t get the sarcasm, I deeply apologise
If you hate top 10 lists as much as I do, please use the links below!

Adding texture and realism to web designs is a very popular current trend. You don’t have to look far for examples:

• http://alifelski.com/
• http://meaganfisher.com/
• http://www.wallswaps.com/

Photoshop is the obvious tool for texture, as well as the 1000s of Photoshop brushes and textured stock images that can be handy, Photoshop’s array of filters and blending options make it an incredible tool!

Creating light and contrast in online designs can be tricky and here I will show you a useful technique for creating a glittery effect, just in time for Christmas!

Step 1

Create a layer, select a goldy looking colour (try #A79058) and fill the layer (ctrl+D). Add a mask to the layer. Select the mask and go to ‘filters>noise>add noise’. I would go for about 150% for the ‘amount’, uniform or Gaussian doesn’t really matter, press ok.

You should have something looking like this:

Now, repeat step 1 about 5 times, using different colours for each layer. You need a contrast between light and dark shades of gold (I used #755F2B,#C58014, #DDD49F,# 9A8146 . Sometimes adding a colour overlay to the layer to tweak the colour is handy. Try and vary the level of noise between 100% to 200%.

Step 2:

What the texture is lacking now is the variety of colours and lighting that glitter has. So what I did was find a nice abstract lighting image to place over the top: http://www.sxc.hu/photo/1102636.

Copy the image and paste onto a new layer. Depending on the size of your document you may need to duplicate the image (ctrl+J), flip horizontal to join up with the other image repeat so that it covers your canvas. Then (if duplicated), merge the layers down so that the lighting image is on one layer (ctrl+E).

Now, blur the image a bit by going to filters>blur>Gaussian blur.

In your layers panel, select the blending options and choose ‘multiply’ and maybe bring the opacity down a bit to 95% or so. Some of the other blending options work quite nicely too so pick which one you like best.

Now its starting to look better.

Step 3

I wanted more contrast so I created a new layer, filled it with any colour then take the layer ‘Fill’ down to 0%, found in the layers panel.

Double click the layer to bring up the layer style and select ‘inner shadow’ with settings of opacity 100% and size 161px.

Step 4

Now I felt it had lost some contrast in the glitter so to improve this I created a new layer below the lighting image.

Fill the layer with a lightish yellow (#F7EFD7), add a mask and add noise.

Now repeat the following about 8 times –
- right click on the layer and select ‘apply mask’.
- Create a new mask and add noise.

This way you create a less uniform a sparser array of speckles.

Its now looking quite sparkly.

This can be a useful texture as it is but I find that a spray or dusting effect of glitter is even better.

For the next part you need a custom brush set: http://www.brusheezy.com/brush/850-Wisps. Download the brushes and unzip. Copy the brush file into C:\Program Files\Adobe\Photoshop CS\Presets\Brushes or your equivalent folder.

Load the brushes by selecting the brush tool, opening the brush panel, click on the side arrow to bring up the options and click on Load Brushes.

Step 5

Create a layer folder and place all your layers other than your background layer and inner shadow layer (which should be at the top) inside it.

Take off your inner shadow layer.

Add a mask to the folder

Select one of your new splatter brushes.

Use the colour black and click once to add a new splay to the mask.

It should look like this:

Now invert the folder mask by click on it in the layer panel and pressing CTRL+I.

Voila! You have a beautiful glitter spray as if someone had dusted glitter on a table.

Now you have your glitter other tricks can be used such as:
- Add a glitter texture to text (merge the glitter down, place above text and use the text as a mask – ctrl+click the text layer to get its selection and then add mask on the glitter).
- Or change the colour of the glitter. Merge the glitter down and change its hue/saturation (image>adjustments>hue/saturation)

Hope you find it useful, especially with the abundance of sparkly heaven that Christmas brings!

The slide serves many purposes but I guess it’s a great way of getting extra information into a compact space. Intuitive controls such as forward and back arrows or numbering also make sliders easy to use and can offer handy functionality to users.

I’ve just developed my own slider using jquery for mach4cs.co.uk. Originally I developed a form for users to fill out so that mach4cs.co.uk could design a bespoke computer using the information provided by the customer. However, the form was quite long so the slider was a perfect way of simpliflying the process. Although the content is the same, splitting the form up into 5 bite size chunks makes it less daunting and easier to read.

You are welcome to use the javascript found here: http://mach4cs.co.uk/js/slider.js.

You will also need to download jquery.

You will also need to look at the html and css used on the page: mach4cs.co.uk. The relevant CSS starts at 272 and ends on line 342.

Probably should have displayed all the relevant code here, but hey, I’m lazy!

Let me know if you find the slider useful!