Designing your own Blog Graphics with Canva

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:

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:

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.

~~~~~

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.

How to link to individual Tweets

Twitter is a big place with lots of opportunities to network and make friends and contacts and generally hang out and chat, but it's also a big place that's pretty confusing.

The first few times I was asked for a link to a particular tweet, I scratched my head for a while and then needed to hunt around to find the instructions on how to do this.

When you know how to do it, then it's pretty simple, but otherwise it's one of those things which isn't exactly that obvious... hence this little post about it.





1. Firstly, you need to click right on the particular tweet in question - not the user name of the person who tweeted it.




2. A little more information appears around the tweet - at the bottom you'll see the magic word 'Details' - click on this.




3. You'll then be taken to a page displaying the tweet and here you can simply copy the url in the address bar at the top of the page, and paste it where you need to.



Hope this is some help and comes in handy...!

How to add a background to your blog

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!

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)

How to create a Blogger Favicon

You know when you open a blog in a tab, and you have a little icon to the left of the blog title in that same tab? Well, that's a favicon. It also shows up in bookmarks, and sometimes next to the blog name itself in the address bar on your browser.

If the blog is a Blogger blog, then the default setting for the favicon is a not-very-attractive white stylised 'B' on an orange background. This standard favicon is eye-catching but not necessarily for the right reasons...

Even if you do think that design is pretty, it still does nothing to distinguish your blog from any other Blogger blog someone may be reading. It just tells everyone your blog is a Blogger blog.

To help you stand out, and to make the overall design of your blog a little more cohesive, you can, using your own images, create your own favicon and use that to replace the Blogger one.

Interested?

Read on...

Chose your image

 

You can use a stock image (either free or paid for, but do check conditions of use) for a favicon, but for the purposes of this post I'm going to assume you have a pile of your own photos that you use widely on your shop and blog. A good idea can be to take a detail from the header you use on your blog, and that way common colours and images it may display will also be apparent in your favicon.

Size is everything

Do bear in mind that favicons are tiny. I know, that's kind of obvious, but it does have a bearing if you wish to use an image of something specific, rather than just a colour or a letter - it needs to be well defined enough that people can recognise what it is. And if that isn't possible, then the colours it displays should make sense within your banner or blog colour scheme.

What I did... 

 

Chose a photo 

 

I decided to stick with my current muted colour-scheme of silver and grey, and so chose this image from my virtual stack of photos -

 

Edit the image

1. I uploaded it to picmonkey, rotated it, and then cropped it square.

I lost a little bit of the top and bottom of the leaf, but figured it would be easier to work with if it was a square photo from the outset, as favicons are always square. Making the dimensions exact can be tricky in picmonkey, so just get them as close to equal as you can.


2. Then I resized it to around 70px square, to make uploading it later on easier - it's only going to get smaller, so image quality loss isn't an issue here. Also, resizing at this stage gives you an idea of how small the photo is going to get, and how well, or not, your chosen image may work. Concentrate on light, shade, and colour and that should give the best result - you can always resize the image even smaller in picmonkey, to see how it works as a tiny image.

I saved the image to my computer in picmonkey, using a simple filename that made sense. Also I saved it to my desktop, somewhere I could easily find it again as I needed it straight away

Create the favicon

Next I opened up favicon.cc - this site helps you actually create the favicon itself, turning the small photo into a favicon.

3. On the left hand side of the page, I clicked on Import Image.

4. Then I was taken to an upload page - (this is why you need to know where you've stored the image) - to browse and find my edited photo.

Here I also chose Keep dimensions as I'd already made my photo square, but if you haven't cropped it already, you can chose Shrink to square icon - if you think your image is too far from square, despite your best cropping efforts, then chose this option, but do bear in mind it may well change the way it looks a little too much.

Next I clicked on Upload. My file size was small so this didn't take long.


5. The site took me back to its main page... and my extremely pixelated favicon...

This is normal. And correct. The favicon is so tiny that it can easily be shown pixel by pixel like this.

(It also gives you the opportunity to experiment with changing the colour of pixels, if you wish, by using the Color Picker to the right of the favicon. This is fun, if potentially disastrous! I couldn't find a back or undo button although I would imagine one exists somewhere.)

Save the favicon

Anyway, I then saved the favicon by scrolling down the page and clicking on Download Favicon. When given the option in the pop-up download screen, I clicked on save. (The file was saved to my downloads on my computer automatically - I wasn't given the option to chose where I wanted to save it, as happens on picmonkey. If you have trouble finding where your downloads are, and consequently the favicon, you're looking for a tiny file named favicon.ico)

Upload favicon to blog

The final thing I had to do was upload the favicon to my blog.

6. I went to layout in Blogger, and clicked on edit in the Favicon box

7. I then browsed to where the favicon.ico file was - I'd moved it to my desktop - and clicked on save to upload it to blogger.  

8. My new favicon showed up on my blogger layout screen straightaway but took a little longer to filter through the system and show up when I opened a new tab, so give it time if this delay also happens to you.

You can edit or change your favicon whenever you like. I redid mine after the first attempt looked vague and unclear when downsized to such a small size. I also edited using the pixels on the favicon site, adding brightness where the leaf was a little shady. I'm still not entirely convinced I'll stick with this one, but it's good enough to be getting on with.

Do leave a message if you've made a new favicon, I'd love to go and have a look at it!

More info

You can do a lot more with the favicon.cc website. You can find and use favicons that other people have created (click on Latest favicons and Top Rated favicons on the favicon.cc site), and that have been released under a CC (Creative Commons) license which means you are able to use other people's work. Or you can try creating your own favicon from scratch, by filling in pixels with various colours. If it's any good you can use it on your site or release it for others to download and use.

Happy pixelling!

How to back up your blog content and template

One of the most important pieces of advice that I've been given is, before you even think of making any changes to your blog design, to back it up. And, perhaps more importantly, also back up your content. Here's why.

Back up content because it's valuable to us, we spend time writing and creating it, and it would be awful to lose it. Plus, if you blog on Blogger, then you don't own your blog site. This means that your blog could be removed without warning (not likely, but not impossible), or inadvertently deleted. Both of these would be catastrophic if you have no backups of work you've created in the blog.

To avoid this, backup your content, perhaps once a week, and that way your words and images will be safe. At present Blogger still hosts my photos but this is something I'm planning on changing soon. I do however hold onto copies of all the images I use on my blog. But I often write my posts in Blogger, from scratch, and don't have any separate copy of them unless I back up my blog. If anything does happen to my blog, I can start again, using the backups to rebuild the blog. That's the theory anyway. It's an insurance policy really, and chances are I, and you, will never have to use it.

Back up the template in case you inadvertently make alternations that you can't undo, and that change the look of your blog irreparably. Once it's done, it's done and such mistakes can happen even when you're trying to do something else. If you back up the template before you make any changes, even very simple ones, then you never have to worry about having to start from the beginning again.

I have made this mistake in the past, playing around with my blog and then discovering I couldn't change back what I'd done - this doesn't always involve opening the template up and editing it. Sometimes a simple widget addition can alter things in a way you don't want, so having a backed up template means you can retrace your steps with ease and not hours of angst instead...


Here's how to go about backing up your blog.

To backup the content

1. First, in your blog's Dashboard, click on Settings, and then Other.

2. Then click on Export blog - this will export all the posts, images, and comments from your blog in an .xml file - to open this again you'll need a blog platform, either Blogger, Wordpress, or Typepad perhaps. Other platforms are available!

 

3. Download your blog to your computer.

4. Save the file - it will save wherever your downloaded files normally save. I move my saved file to the folder I keep everything for my blog in, so I know where it is, and I rename it something I'll recognise easily. It's also worth putting it on a memory stick as well, as extra backup. Well, you never know...

To backup the template

a. Find Template and click on it. Then click on Backup/Restore.

b. Download full template - again, it will save to your downloaded files area. And again, it's worth moving it somewhere you know you'll be able to find it easily, renaming it, and backing it up yet again as extra insurance.


I think once you get into the habit of doing this, it doesn't take too much time and effort. We all know we should backup and we never do it enough. I know I have some photos on my computer that are only on my computer at the moment...and that makes me nervous. I must back up!

Hope this has been some help.

Further information

https://support.google.com/blogger/answer/97416  - Basic Google/Blogger instructions

Geekalicious -

No-reply blogger, no-reply comments, what does it mean?

Just so you know, this post is about using the Blogger/Blogspot platform. If you blog on TypePad, WordPress, Tumblr, or any other platform then this doesn't apply, but you can still read it if you fancy though... ;)

(Also, to avoid any confusion, if you use Google+ then your default setting is to be a no-reply blogger. Check out this tutorial and this one to help you change this situation.)

What does being a no-reply blogger mean?

Like a lot of people, I only found out I was a no-reply blogger when someone told me. Before then I had just merrily posted and commented and had no idea of this other way of blogging that was going on around it. It may be the same for you. If you are a no-reply blogger then, when you leave a comment on another blog, it will be impossible for the blog writer to drop you an email, saying hello, thank you, or anything at all.

When you write a post on your own blog and some nice person leaves you a comment, then that comment is also emailed to the address that is connected to your blog. You can respond to their comment on your blog, but if you want to be sure they get your response (without returning to your blog) then you can email them straight from your inbox. Except... if on their blogger account they have no publicly visible email address. This means that they are a no-reply blogger.

How to find out if you're a no-reply blogger

A couple of ways exist to discover if you are a no-reply blogger -

1) You can leave yourself a test comment (don't worry, you can delete it afterwards) and then check your inbox - you'll have a notification of the comment you left, and if you are a no-reply blogger then you'll also be able to find the words 'noreply-comment@blogger.com' next to it.

2) Another easy way to check your no-reply status is to click onto your blogger profile page.
To find this when you're logged in to Blogger, go to the top right hand of the page where it displays your name, your chosen icon, and a little downward facing arrow. If you click on this area a drop-down will appear, containing the words 'Blogger profile'. Click on this.

Hover your mouse on your profile page...

On the page that opens, beneath your photo on the left hand side, you should find an area which says 'Contact me'. Beneath this should be a link to your email address - if you hover over 'Email' (see image to the right) then your email address should appear in the bottom left hand corner of your screen. If it does, then you are NOT a no-reply blogger. You're okay, people can find you and contact you (and also spam you, but, hey, that's a whole other post).

How to stop being a no-reply blogger

If you have no email link, and you want to (because half the fun of blogging is contacting and chatting to other bloggers), then here's what to do.

In the top right hand corner of your blogger profile page you'll see a button that says 'Edit Profile'. Click on it. On the page that opens, the second line down will say 'Show my email address'. Tick the box next to this. Scroll down and click 'Save Profile'.

And that's it. Now when you leave comments, people can respond to you via your inbox.

A bit more info...

If you need anything clarifying then do contact me in the comments section and I'll try to help, or check out this post, this one, this one as well, and this one too, for other tutorials.

And if you're not sure you want to have people respond to your comments, then stay as you are - the web is a bog place, it takes all sorts, and you're as entitled to your view as anyone else!