Richard Stelmach - Web Design and Multimedia Portfolio

It’s only taken me a year and a half to get round to adding these but here they are:

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.

I always like to show people work I’m proud of, maybe to ego trip or for an innocent pat on the back, I’m not sure. Lately I haven’t been able to share much I have done either as I’ve had to be secret or the sites haven’t gone live yet, hence the stagnated blog :-/

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/

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.

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!

You don’t have to look far nowadays to see what’s becoming a typical feature on many sites, the horizontal javascript slider. Either through mootools, jquery or some other javascript framework, they make it easy to achieve effective results through little code.

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!

If you’ve read my two previous posts you may get the feeling I’m liking illustration of late.

I often go through design phases which to some extent I don’t like as I believe I shouldn’t be constrained to a certain style but at the same time I think it’s unavoidable for any designer.

As well as experiment I’ve also been looking at sites such as grainedit that has awesome daily posts on vintage illustration and design. I’ve always been interested in vintage design which you may be able to see in these: halloween, summer sale, kitchen and jack la lanne. But illustration is another step forward.

I recently had a nice subject matter of a rail offer and I found myself using flat shapes and along with my love for giving texture to designs, it seemed a great combo.

If you can’t see a train running along with smoke coming out, you probably haven’t got flash player installed! Either that or banners aren’t as good as I thought they were!

The banners provided an extra challenge of having a side and front on view. I gave texture by creating a transparent png in Photoshop and placing it on the top layer in the flash movie.

It’s hard to measure the impact of interesting or good design opposed to an in your face super mega tack approach but I would like to think the originality of the banners would attract people to possibly read them or give them a click.

[sorry for this horrendously large white space, but the banner is so high, i’m sorry!]

Today I’ve continued to try and improve my illustration by choosing an illustrative style for a design. The theme was ‘added extras’ so I wanted to create an illustrative montage, quite a common technique, I imagine originating from pop art. This was my initial illustration.

However, I found that the black and white didn’t quite work with the design so I needed to add colour. Also as the design needed a heading and strap line with it the text on the illustration made it too busy.

The illustration progressed to this:

I again enjoyed bringing it into Photoshop to add texture and a watercolour feel. I like how it has a nice friendly feel to it so was fairly pleased with the result.

I followed the style throughout the page by creating the following illustrations representing various things.

I love Photoshop brushes and now I love illustration so I really enjoy combining the two. Finally I couldn’t resist over stylising the main illustration as an experiment.

I’m still planning on doing some artwork around the chav/knife theme. Also I want to buy some ‘how to draw characters’ books to try and improve my character drawing skills.

Of late I have more and more been wanting to get good at illustration. Illustration is very handy in design and although I can do illustrations I have definitely not mastered it.

There are a few things that attract me to illustration. Firstly the expressionistic aspect. I imagine you can just put pen to paper and let your ideas and emotions flow, without need to even have something in front of you to base your drawing on. Secondly I’m a big fan of manga and anime which often inspires me to try it out myself.

This confuses me a little. I did A-Level Art and I think I’m pretty good at drawing real life stuff, especially with the pen. But I’ve never been good drawing off the top of my head. This is not to say I don’t have a good imagination. I can design and have always had a creative imagination, sometimes a bad thing when I watch horror films or Ghost Hunters International! If it is the case that illustrators have such a vivid imagination that helps them draw, I definitely envy them!

On the other hand it could also be practise, much like the BBC programme the other night “The Making of Me: Vanessa-Mae”. It explored the nurture or nature debate and settled on 50/50 which I think I’d agree with.

So there could be hope for me yet! I’ve been thinking on getting some ‘how to illustrate’ books. I’ve always liked drawing so it could be fun even if I’m just recreating characters in the books etc. One things for sure, i really need a small scanner!!! Last time I desperately photographed some drawings, what a crap idea that was…

I have been yearning for a creative project of late so illustrating could feed my hunger. I’ve already had some ideas to do some drawings about chavs and knife crime along with some depressing strap lines, so I’m really pining to do that. Hopefully i’ll have something up here soon.

Earlier I had to do a banner of the 02 arena, I saw a good excuse to use illustration opposed to photographic. Later I stylised it more. I love the combination of bringing it into Photoshop to add texture, giving it an authentic feel. I also experimented with lighting effects (filters > render > lighting).

Here are some nice links for illustrations i’ve noticed lately:

• 58 Wonderfully Cute Illustrated Monster Characters
• Will Murai

I saw some others but can’t remember where now Sorry for the crap list!

O and one last thing, I did manage to get top for Pontefract Web Design! Woo, a small victory, atleast for my ego. Though I didn’t get top for Web Design Pontefract, how bizarre.

As some will know I am from Pontefract, the home of sweets, liquorice and many a happy memory.

The allure of Pontefract, is, lets say, quite subtle, an acquired taste. Perhaps it’s the bald lobster men (as ponte-folk have been described) drinking on a summer’s day with bloated stomachs that have been finely developed with many a pie or the dilapidated castle, a reminder of our former glory that puts people off. Ironically, it was the wise Ponte-folk that knocked it down themselves, sick of all the fighting it attracted. An important part of their lives, this peaceful chasm would need to be filled with drunken brawls erupting from the fine array of drink pits that Pontefract prides itself on. (pictured right: the unhappy flag is perhaps meant to detract people’s eyes from the ‘castle’)

“Bloody Pomfret”, Shakespeare said, a more apt name than recently described on the Pontefract Liquorice Trust site:

“…this gem is almost hidden from the rest of the world.”

Almost hidden, unfortunately not quite.

Yet it does have many a redeeming feature. Historic buildings, cobbled streets and green fields. I can’t help but love it.

Not famous for it’s abundance of web designers, perhaps in a moment of self importance, only a moment, I thought I may have good google rankings for Ponte related web design. Yet in moment of terror I realised I don’t even get on the list for Pontefract. Most disappointing. I realised I didn’t have any meta action, which seems to have become important again.

With my legendary victory over Ed Stelmach many eons ago, I thought my battles were over. But once again I must tussle the unforgiving realms of SEO to claim my deserved place at the top of “Pontefract Web Design” google rankings. I will let you know if I am successful.

Until then you will have to gaze at my latest website, mach4cs.co.uk, he really does do beasty (as in powerful) cheap computers. This and some other recent additions has left my first portfolio page looking its bestest ever. I’ll just have to make sure I don’t put something crap on now to spoil it.

Of late I have been enjoying the beauty of logo design. Looking through my blog posts this love sprouted it’s seductive roots about a year ago when I did these logo designs for a company in Leeds.

Soon after, these roots grew stronger and wrapped their loving grasp around my heart, squeezing creative juices onto my Photoshop, virtual computer canvas. Unfortunately my logo skillz had not quite developed and it sprung some mediocre logos I did for Dan Atkinson. The shame. Luckily I am not yet an arrogant designer and can say that many a crap design must be produced to attain beauty.

Then, a strange thing happened, I actually made the effort of moving my hand away from the mouse and picked up a pen! Yes, now I moved not only my wrist but my hand, fingers, arm, everything, to utilise an ancient device called the pen! By using this pen and the more familiar comupter, I managed to create a logo for idolised.co.uk, an unused masterpiece.

I don’t believe that using a pen is always necessary, but in this case I found it useful in developing the symbol which I could then cleanly re-create in Illustrator.

Shortly follwed by an unappreciated French Meridian logo. Luckily for the logo, it snuggeld up in its new fluffy home of creative binge, a sanctuary for many a rejected design!

Okay, now let’s get to the good stuff.

The great thing about logos is that they are the epitome of design. In one graphic you are expressing a message. It’s the core or essence of design. 100s of choices go into creating this small piece that could maybe only consist of a symbol. As well as creating the brand, it often makes or breaks a web design. Allot can depend on a good logo. And it is these things that I have find challenging and consequently satisfying.

My latest logos are:

and

yayyy…

For both I’m doing interweb spaces for.

Other bingers of note go again to my Rough Edges Photoshop brush set that has now got over 48,000 downloads and 180 votes to say its good! Woo! It also features here.

O and I also got interviewed by Hello! magazine….okay, maybe only for uk2.net, a hosting company…and they did say I own my own company (which I don’t) but hey, maybe some people have read my nonsensical thoughts! Click here to read. Ba bye.