The Cosy Bar - Local Pub Website
At the start of each contract I look at the diary and pencil in an approximate amount of time that the work will take, and a provisional date for going live with the site. A website for a local pub would only take two or three weeks, ordinarily, but for The Cosy Bar, in my local town, I wanted to do something a little extra. So I added a week to the schedule, and we added some Website Graphic Design elements.
Photoshop Neon Sign
One of the pages we created is to advertise the pub as a party venue, and we wanted to make a splash. Type “photoshop neon sign” into YouTube, you’ll find videos teaching you how to do this, so I won’t go through it step by step, but in short…
- First, download a large image of a brick wall, or any wall. For stock images I use Envato Elements, they have thousands of high quality design elements, including stock photography for a small monthly fee. But I’m sure you’d find a brick wall image on a free image website. Apply a vignette, so that the centre of the image is much brighter than the edges.
- Find a font that looks most like a neon sign. You will find some already installed with Photoshop, but again, Envato Elements is great for this. Something modern, with not a lot of embellishment, and then reduce the letter spacing so that they connect to each other.
- Draw the cocktail glass in a slightly larger line width to the text.
- Then it’s a combination of colours and layer styles. Check out YouTube for the exact steps. Give it a go yourself, it’s a lot of fun.
Painting on Board Effect
A relatively simple process, for an eye catching effect. That’s why Website Graphic Design is so important to me, it adds that little bit of sparkle, and uniqueness.
A variety of Photoshop techniques used here. We start with an image of a wooden board. On top of this we overlay an image of the pub, and the logo. We then mask the darkest areas of the board and delete the image from those areas, and reduce the opacity of the pub image until it looks like it was painted on the board.
Retro Pub Signs
These signs were created in a very similar way to the wooden board effect above, but this time we started with a blank, rusty metal sign. For Sky Sports the steps were almost the same, but with a higher image opacity, and a few areas erased, like the paint had rubbed off the sign in places.
The Guinness Sign was created in exactly the same way as the painting on board effect, but the texture of the metal sign left the image less visible. I was very pleased with how both of these turned out.
The Diablos Vape Club Website
Diablos Vape Club, based in Essex, UK, was one of my personal highlights from 2020. It was the largest website I built last year, but that doesn’t mean there were o Website Graphic Design elements.
This is a still shot of the homepage. When you land there the screen is mostly black, but after a second or two a puff of smoke rises from below and reveals the logo. This is achieved with stock footage as a background and the blending mode of the logo.
Website Graphic Design - Personal Touches
This 3rd example is way more subtle than the other, but no less effective. I am currently working on a website for Bliss Beauty, Health & Nutrition in Castlerea, Co. Roscommon. We started work together towards the end of last year, and the work continues. This site will go live next month, all going well. This small element is a classic piece of buyer psychology. Next to every instance of the website’s contact form and opening hours we have an image of the owner, and her signature.
The image was created by masking the background, then adding a gradient layer, from white at the bottom to transparent at the top. The signature was scanned into a Photoshop document, and again the background was removed by selecting the ink areas and filling with dark grey, deleting the rest.
I don’t normally describe myself as a graphic designer, and I don’t really think of myself as one. But a while back I found out that not all web designers/developers do the type of work we have looked at in this post, I call it Website Graphic Design. The client, in many cases would have to employ another person, or agency to create images, logos etc. I’m very happy about this to be honest, because it’s these aspects of the job that I enjoy the most, and it gives me an advantage over the competition.
See you next time on the FutureProof Digital Blog.