Create your own Cross Stitch Twitter Icon

Create your own Cross Stitch Twitter Icon

twitter website icon

twitter website iconYou might have noticed the redesign of the Cross Stitch Ideas website if you are one of our regular visitors. Since the main website design is not really a cross-stitch theme I wanted to add some of my own custom cross-stitch elements. This tutorial will show you how to create your own twitter Icon for your website or forum signature that you can use to increase your followers and build friendships with other stitchers.

The twitter design I created only uses one thread colour and is a small cross stitch design so is suitable for beginners. There are however a few fractional stitches but would make a good introduction to them. You could either stick to the twitter colours or be more creative and change the colours or add a pattern to the design. If you need help with getting started with cross stitch refer to our beginner friendly cross stitch instructions.

Twitter IconAfter you have stitched your design you will need a camera to take a photo of your stitching. The key here is to try and get the photo as clear and as straight as possible to make it easier once we use a graphics package to edit the image. You do not want the settings to take a detailed photo as possible since the design will only be about an inch square but we will want to see the stitches.

Now you have your photo you will want to upload the image to your computer and open it in your graphics program of choice. I have used Gimp which is a free program which has all the features I need. You will need to crop your photo so it only has the square of stitching in it. If you have resized or zoomed in when taking your photograph you can resize the image in your graphics programs. You will want your finished image to be an inch square or a bit smaller depending on what you are planning to use your image for. I am going to use my image as a button on my website so I have resized my design to 2cm or ¾ of an inch.

You could also add a border to make your image stand out if you wanted to.

twitter icon croppedOnce you have your finished design cropped and resized save your image. To have your image available online we will upload it to an image hosting site. I have used but you can use an alternative. I have uploaded my image and chosen to not resize the image as we have already done that in our graphics program.

The next part is to write the code to get our image to go to our twitter account when clicked. This might be unfamiliar if you have never used any coding on websites or forums before but I have include some to copy and paste below.

If you are going to use the image on your website we will need to use html code. Have a look at the code below. It might look scarry but we only need to change two things to make it work.

The first part

you need to go to your twitter account profile page and copy the website url then paste it between the speech marks.

I have changed the first part to my twitter account below. You can see it points to my Cloud nine digital marketing account. Your link should be similar with your twitter username at the end.

Now all we need to change is the link to your image. When you uploaded your image to you should have been given a link to your image. You will need to use the direct link which has.jpg or your image extension at the end. You then copy and paste this between the second set of speech marks after src=.

You can see my full code below.

You can now copy and paste this code and add it to your website to appear where you want it to. I use wordpress for my website so I can insert it into a post by selecting the html editing mode rather than the visual one and pasting in the code we have created above. You can also install a html plugin such as ____ and add the code in your sidebar if you are using wordpress. If you need some help with your code or adding it to your website contact me and I will help you out.

To add the image to a forum signature requires some different code as it uses BBCode rather than html.

Here is an example of the code [url=][img]http://image.jpg[/img][/url] It is the same process by changing the url links in the code to the ones we have copied above.

Change the yoursite part to your twitter profile page as we did above. The image.jpg part is the one we change with the link to your image from

You will find where you change your signature on your forum of choice, mine is and paste the code you have created. You can see an example of how it will look in my signature.

If you want to do the same for your facebook, RSS, Pinterest, Instagram, Tumblr, DeviantArt, Flickr, Blogger, WordPress, YouTube, Google Plus and webshots use the charts coming soon on our website and follow the same instructions here. All your fans will know where they can chat with you and see your work.