Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, 4 August 2017

Designing your own Blog Graphics with Canva


designing for your blog with canva by silvermoss

Designing and creating your own graphics, banners, and buttons online is nothing new and is, in many ways, easier than ever. On this blog I've previously created my own banner heading as well as the side buttons for quick links to collections of blog posts - see them on the right hand side.

I also created the main image, above, for this blog post using Canva, after playing around with some of their templates and changing colours and font.

I've dabbled with using both PicMonkey (the free version) and an old copy of Photoshop Elements, plus recently I've also been looking further afield and that has included Canva. Yes, you do have to sign up to use it, but you also have to do that for PicMonkey now as well - PicMonkey used to be handy for 'quick' edits when I didn't want the hassle of either signing up or signing in, trying to remember my password, failing, having to reset it, etc... Now, however, both PicMonkey and Canva both require an account, even for their free versions.

While Canva is, obviously, different from PicMonkey, many of the tools and techniques they use work in a similar enough way that means it's easy enough to pick things up quite quickly if you've used the other, and if you've not utilised online image editing before (and even if you have!) then a brief web search on a specific problem can provide answers.

It's often better to learn as you try to create something (this applies to jewellery too!) than to try and gain a working knowledge without using it practically, so to teach myself a bit about Canva I decided to spend some time experimenting. I began by trying to create a new side button for my blog, and then ended up creating a whole set of them.

Here's what I made first:

first jeweller interview canva blog button by silvermoss


And here's what I made when I'd worked out what I was doing and decided to be a little more ambitious and create something more specific to my overall blog design:

jeweller interviews canva blog button by silvermossjewellery book reviews canva blog button by silvermoss


I created a custom-sized template and used one of Canva's own backgrounds, before adding text and choosing font, size, and colour. I may well re-do the buttons with an image of my own, to make it more personalised to my blog.

At the end of this flurry of time on Canva I very quickly chose a template for this post (see the first image, above) and adapted that to use some of my own blog colours, taking just a few minutes to complete.

I created all my images using used free components on Canva although they do have a paid version as well, with more options. I prefer the free version of such applications and tend, in general, to avoid paid versions as they often involve subscription models (as Canva does) and they just don't suit me - I'd rather pay up front and own something than hire it. Also, I don't create enough images to justify paying a fee and so it is helpful that places like Canva have a good and usable free version.

Canva allows you to upload your own images to incorporate into design elements, and although you can also upload your own fonts this is unfortunately only available on the paid version. One very handy part of Canva is that is has the facility for you to copy an image you're working on and adapt it or alter it slightly, without having to start over again - you can also chart your own progression as you do this, and change your mind and use an earlier version without having to undo changes you've made.

If you've never used this kind of graphic design and image editing software before then, when you first start out, it will take a little while to create anything you're happy with, but using a web application like Canva will, with a little practise, allow you to make banners and buttons and pretty much any graphic you care to without much fuss at all. If you are more adept in using such software then you should adapt to this quite fast and may well enjoy having some different options for new designs.

PS. I designed this alternative post banner as well, a few days after I'd created the above graphics, just to see how much I remembered. It was still very easy and also a lot of fun.

designing for your blog with canva by silvermoss

~~~~~

Please note - I was contacted by a representative of Canva about creating this post. However all the content has been designed and created by me and I have received no payment of any kind and am not connected with the company in any way. Nor are any of the links in the post affiliate links. The opinions in the post are, as always, my own, and have been given honestly.

Wednesday, 16 October 2013

How to add a background to your blog


how to add a background to a blog - silvermoss
As part of a currently ongoing redesign I'm doing of my blog I've been working in a test blog, but I am also making some changes in my blog here.

I've added a new background to my blog, replacing the plain background I used to have. Now it may not seem amazingly different or remarkable but, as part of the overall new design, it should look just right in the end.

I think it's important to remember that it's a background and so is meant to be subtle and not draw attention away from the main point of any blog, which should be the content; what you write and the images you include.

For this simple background change I’ve used the system Blogger has in place. And yes, this is another how-to for Blogger. If you’re using Wordpress then check this tutorial out, and for Typepad look here. For other platforms, do some googling, read through a few tutorials, and always back up your template before doing anything.

Here's how I started.


Finding a background image


After working through a design for how I want my blog to look, I did some hunting for a suitable background image online. Yes, it is possible to make your own image, but the resources available on the web are incredible, and it’s fun and inspiring to look through them. Of course, I found lots of images I loved but I managed to be good and stick to my original plan...

Blogger itself offers images to use as backgrounds so if you don’t feel confident enough to download images from the net then you can still change the way your blog looks - see note 3 below for more information .

You can use an image that spans the width of your blog (or rather, the screen size it’s displayed on) but do bear in mind that such a large file will will slow down the time your blog takes to load. If you use a lot of photos/images on your blog anyway, it might be wiser to chose a small image file that is repeated - this tiling of images is commonly used to allow a seamless background without a large file size. It makes everyone happy.

The website Subtle Patterns is a wonderful resource, has over 300 images available, and is a real goldmine for blog backgrounds. They’re all free to use, although the site does like credit given, which is fair enough. This is where I found the image I’m using at present. Browse around until something catches your eye and then preview it to see what it looks like full screen. Do bear in mind the colour and design of your own blog may make it look different when in situ.

Here's what I did, after downloading my image of choice.


Changing the background image


1. First, I backed up my template. Just in case... Then, in the Blogger dashboard, I went to Template, and clicked on Customize.





2. I clicked on Background, and then on the little downward pointing arrow set to the side of the Background image box.





3. A pop-up then opened with a whole host of blogger backgrounds on offer - you can use one of these if you'd prefer; just click on it, click Done, then Apply to Blog and that's it, it's your new background.

I had the image I'd downloaded from Subtle Patterns already saved on my computer so I clicked on Upload image.






4. I browsed to where I’d saved the image to on your computer. Make sure you save it somewhere that’s simple to find, like your desktop - you can move it later. I then clicked on Done and the image uploaded.






5. Check how the image looks on both the miniature in the screen preview shown under the Background image heading, and further down the page, where a mock up of your blog is shown, with your new background.




The Alignment button doesn’t matter too much if your image is abstract and a small one. If it has a right way up, then make sure it’s displaying that way, and adjust the alignment if you need to by clicking on the tiny downward arrow next to the word.

My image was a small one that I wanted repeated/tiled so I chose Tile to ensure it tiled across and down the entire background of my blog.

I’ve kept Scroll with page checked as I find background images that remain static while the content moves can be a little distracting, but feel free to uncheck the box or to experiment and see what you prefer. Scroll with page means the background will move as the page scrolls down.


It's as simple as that. Click on Apply to Blog if you’re happy, and check your blog out to see the finished effect.




I experimented a little with some other background images to see how much changing it can affect how a blog looks.

The green background image, below, was one I found on the wonderfully named Squidfingers site -





The purple background image shown here, below, was created by me at BGPatterns, which is a clever site allowing you to adjust colours, symbols and transparency, amongst other variables -



Both these backgrounds are small images that take very little time to download from the net, and are used tiled.

As I say, I wanted something pretty neutral in both colour and pattern, but it’s still fascinating to see how different images can alter what a blog looks like, and the perception of what it’s about. So do experiment, but do back things up so you know you can always go back if you need to!

More Info - 


Sites for backgrounds used in this tutorial - 

Subtle Patterns

Squid Fingers

BG Patterns


Also, do some googling for backgrounds, and check out Pinterest too.

And if you’re feeling adventurous, you can also check out this tutorial about how to change the colour or transparency of images found at subtle, to personalise them and make them suit your blog even more.

Blogger's own brief tutorial about backgrounds.

Let me know if this has been any help, or you have any queries and I'll do my best to help. And do leave a comments if you follow the tutorial - I'd love to see your revamped blog!

Monday, 7 October 2013

Pretty my blog

Image from one of my Pinterest boards, via The Graphics Fairy

I've decided to embark on a redesign of my blog. I want to change the way it looks - colours and fonts etc - and the way it works, to allow things to flow more smoothly and to make them easier to find.

I did a course or two in web coding and design a while back and have done a couple of redesigns of other people's sites, but haven't paid much interest to my own. So now I think it's time.

I'll be staying with the Blogger platform for now, partly because it's free, but also because, despite the rise of Wordpress, Tumblr, etc, it's still managed to hold its own, perhaps mainly because so many people use it, but that in itself means innovations keep happening, and I still see some wonderful designs on blogger blogs, not just on other platforms.

So that will hopefully explain some of the changes you'll see around here, and may also make the little blogging tutorials that keep popping up a little more understandable - I figured they'd help remind me of things I'm doing, and changes I'm making, and if I'm going to record that information, then I might as well share some of it as I go along.

I hope you enjoy the changes...!

(linking up with Handmade Harbour's Handmade Monday)