FutureProof Digital

Castlerea, Co. Roscommon, Ireland

Website Graphic Design

Some of what I do day-to-day can be a little dull, I enjoy it of course, but it doesn't make for the best reading, in posts like this. But over the past year I've designed and developed some pretty interesting websites, for some very interesting businesses. Some involved some Website Graphic Design, the most fun part of this job. So, I thought I would collate some of the best examples together in this post.

I do the vast majority of this type of work in Adobe Photoshop, although I do use Illustrator sometimes, logo design for example. It's a lifetime of learning, working with Photoshop. It's highly enjoyable, and I would advise any business owner to give it a try, or go on a course, even if it's just to design some of your own promotional material.
share this post...
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

We use SiteGround for all our Web Hosting, we think you should to. Check them out...

We use SiteGround for all our Web Hosting

We think you should to. Check them out...

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

Website Graphic Design - Contact Section

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.  

Website Graphic Design

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.

Hi, I’m Adam, thank you for being here at FutureProof Digital. We publish regular content including blog posts, guides, reviews and updates on our latest projects. To stay up to date with everything we publish, sign-up for the newsletter.

Adam @ FutureProof Digital

Thank you for reading this post, Website Graphic Design.

If you run a business and you need a website (pro tip = you do) or your current website doesn’t look the way you want it to, function the way it should or perform how you need it to, get in touch. I don’t charge a penny for consultation, so finding out about what your business needs and what can be achieved for your budget is completely free. Use this form… we can meet in person, have a phone or Skype call or use email, it’s up to you.