I bet your website has got an absolutely killer home page. Am I right? People spend hours, days even, on creating the perfect blend of images and copy to make sure they make a big impact. And then, as visitors excitedly click through to get your essential info…to be honest, things often get a bit meh…
I call the interior pages of a website, the unloved children. We’ve all got them (neglected pages – not children). Is your pricing page lacking polish? Do your client testimonials look a little lonely? The missing ingredient is usually graphics. And I don’t mean just a simple stock image, slapped on a page. I’m talking about well-designed graphic elements that reinforce your brand and showcase you and your work in a stylish and professional way.
Let me show you a few examples…
This page is headed by a cropped image with a black, rectangle and some overlaid type. Simple but so much more effective than the usual WordPress generated page heading.
Or how about this romantically framed About Me picture? Using your brand elements in your page graphics reinforces your brand message throughout the site.
How about a simple collage which allows you to showcase several images in one graphic area?
Now, I’ve been using words like ‘simple’ to describe these graphic elements, but it’s only simple if you know how. Not only am I going to show you some easy ways to create attractive graphic elements, but newsletter subscribers can download the layered PSD file and practise with it. Let’s go!
1. MEASURING YOUR SPACE
Before you do anything, you need to know the size of the space you are trying to fill. There is fantastic little desktop ruler tool that I use dozens of times a day called Pixus Air. It’s an on-screen ruler that you can float over your screen to measure space in pixels. You can download it for free right here. Pixus works really well on a Mac, but there is a Windows version, along with plenty of other alternatives for PC users. You can check some of them out here.
2. USING A DESIGN PROGRAM
Most graphic designers will use Photoshop to prepare graphic elements for websites, because of the layer system and the ability to create simple masks (more about those in a minute). But there are now plenty of alternatives – I’ve given Canva a quick try and, whilst it doesn’t have the same features as Photoshop, it’s a fairly decent alternative with lots of pre-made template layouts to try and certainly a good option for whipping up blog and social media graphics.
However, for the purposes of this tutorial, I’m going to use Photoshop. In the tutorial video below, I’m going to show you how to:
- Create simple shapes and use them to crop images in place.
- Add borders and fills
- Add your own graphic elements
- Use brushes to add detail
- Use layer masks to edit colours
- Save your graphic element for web
3. PREPARING YOUR CANVAS
Before we dive into the tutorial, I want to make sure you’re comfortable with opening up a new canvas in Photoshop. We’re going to be creating this simple graphic you could use for your About or Information pages.
If you’d like your graphic to look EXACTLY like mine, then you’ll need to download a couple of things, if you want.
1. The Signerica handwriting font. It’s free for personal use (ie. non-profit making) but if you want to use it for anything business-related, be sure to buy the commercial license.
2. These awesome free watercolour brushes which are free for commercial use from the good people at QBrushes. Simply download the file and unzip to find the .abr file.
Open the brushes palette in Photoshop and choose load brushes. You’ll be prompted to upload the .abr file. (Shown in video.)
4. THE TUTORIAL VIDEO
How to Create Cool Graphics For Your Website from The Design Space on Vimeo.
If you have any questions, leave them in the comments below. If there’s is something you’d like to learn next, make sure you tell me and I’d love to see links to the awesome graphics you’re creating.
If you’d like to download the layered PSD file to use or play with, don’t forget to sign up to our newsletter. We don’t send it out that often, but when we do, it’s packed with awesome things and you get 20% off your first Design Space purchase.
Melissa, once again, you have contributed massively to this wordpress and web design community. I am so pleased that you have done this I will share it as much as I can.
AP
Thanks Andrew
It’s a pleasure to create these.
Brilliant stuff Melissa! I love that font. I’m now using it as my signature. I will be using the graphic as my profile photo once I have modified it. Thanks for your awesomeness 😉
I loved the tutorial! Lots of fun! I appreciate you sharing! 🙂
Really enjoyed this post, as I do all your posts. Very, very informative – brilliant Catherine Connor – Aspire
Thank you for this terrific tutorial and especially sharing all the free tools and fonts.
You made this brilliantly easy to understand, and your voice is like music to my American ears. 🙂 Thanks for sharing!!
Thank you Melissa, that is beautiful! I can’t wait to give it a try.
Hey Melissa, did this tutorial last night…. really clear and easy to follow along! Thank you for providing this fabulous tutorial, very helpful. <3
Hello Melissa, here’s what you inspired! I think I got a little overexcited by the watercolour brushes (I love a new toy!!), but it’s one of my most creative “coming soon ” pages. The client loved it. So big thank you! http://www.momentumyachting.com.au
Hey wow! That’s awesome.
wow – great tuts – glad I found the site – Pixus tool looks great – but finding a working download link or finding it on adobe marketplace is proving futile for me – any ideas how/where to find it and download
thanks
Hey Steve
This is the link I use. The link is towards the bottom. I don’t know why it’s so hard to find either!
http://mac.softpedia.com/get/Graphics/Pixus.shtml
I struggle to come up with new interesting graphics for my site – I’m a website designer and there are only so many graphics of computer screens that you can create! Any ideas welcome….
Great tutorial! Thanks for the easy and beautiful tips 🙂 Love the work you do.
Hi there , Melissa! . That Pixus app will not install on my Mac. I’ve tried downloading it from a few places. I bought Euclid in the Mac store, but it is measuring the space far too large. Maybe about 3 times. Any suggestions?
I should clarify. I’m working on a small screen right now. 13 inches. I’m feeling like I should be sizing these images for a 1900px screen the max size Pro Photo will display. The graphics we are measuring will be size dependent of our monitors yes? I still don’t know why Euclid is sizing so large. the screen we’re on, yes?
Great tutorial. Just wanted to add a note that the watercolor brushed linked are absolutely NOT licensed for commercial use. Just don’t want someone getting in trouble using them for a commercial project. Granted someone working a commercial project should also be verifying all licenses themselves.
Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)
https://creativecommons.org/licenses/by-nc-sa/3.0/
Thanks Leon. I’ve checked and they are definitely are fine for commercial use. “May be used for commercial artwork – No credits required.”
That’s awesome! Really enjoyed this post, as I do all your posts. Very, very informative.