Showing posts with label Design Tutorials. Show all posts
Showing posts with label Design Tutorials. Show all posts

Monday, 10 June 2013

Adding Your Watermark

Sorry for doing another Design Tutorial straight away, but this is more a blogging tip than a design tutorial. Don't click off  because if you are a blogger, this important. Recently, the lovely Dana from +Wonder Forest had a horrid case with copyrighting. But thanks to her trusty water marks and her copyrighting, the site was taken down. To avoid this happening to you, and you not being able to claim your photos, you should add your watermark. I just did this yesterday (yes it did take a while). This tutorial is for Blogger users as it uses Google's free photo hosting service called Picasa Web. 

When you upload a photo to a blogger post, it automatically goes to your Picasa Web Album - named after your blog. Just go here to find it. Once you have found your photo that you want to add your watermark too click edit.


Once you are in Creative Kit (it may take away to load by the way) you can add text in any font, colour and opacity with your blog address on it and press save. In order for this to show up on your blogger weblog, select replace original photo.

So it may take a while to do all of your photos, but it might be worth it if you get photos stolen from your blog in the future. Better safe than sorry. You can also do this in photoshop as you go, but you can just add it every time you add a photo. 

See you soon
Harri xx

Sunday, 2 June 2013

Make Your Own: Blogger's Button

Make your Own: Grab a button
Hello Everyone......As you know, I've been working on lots of design stuff lately and I thought as I am always learning new things in the blogging world (also known to bloggers as HTML coding, design, and other difficult and confusing stuff) I should share it with you in the easiest way possible. Lots of "help websites" aren't very helpful as I have learnt from previous experiences.

For my first tutorial, I thought I should share how to make a bloggers button (or a, "Grab My Button"). You know, those fancy pictures with boxes of code underneath. Those ones you see on really professional blogs. You don't have to be either professional or have design skills (I know I don't have much yet) Some ways are really long and complicated, but this way is quick and easy, especially if you need to whip up a different size for someone in a rush!!

First of all, upload your image (correct size of course) made in Photoshop or fireworks etc, to a image hosting server. I use Google Picasa Web Albums but Wordpress media upload and PhotoBucket could work. Now this is the important step. Make sure you find the correct file URL. This can be hard to find on Picasa, but the easiest is probably to open the image and right click to "copy image URL".

One of my links looked like this

https://lh3.googleusercontent.com/-h5_m45Pfn2A/Uap7VefXZBI/AAAAAAAABqE/8sbmElH3AD8/w200-h120-no/200x120.png

Tip: Note the last bit. If it doesn't end with your file name and .png or .jpg it won't work

Now the HTML coding stuff, I'm going to try and make this as clear as possible (I hope)


<div align="center" style="padding: 5px;"><img src="IMAGE URL ADDRESS"  title="BLOG NAME" alt="BLOG NAME" /></div><pre style="background:#ffffff;border:solid 1px #8f8f8f; color: #000000; font-size:90%; height: 50px; margin:auto; text-align: left; padding: 10px; display: block; overflow: auto; white-space: pre-wrap;  width: 150px;">&lt;div align="center">&lt;a href="BLOG URL ADDRESS" title="BLOG NAME" target="_blank"&gt;&lt;img src="IMAGE URL ADDRESS" alt="BLOG NAME" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></pre>

Okay, want me to explain that confusing code up there. All the colored stuff needs to be edited to your customizations. The image link that you just copied needs to replace the red writing (IMAGE URL ADDRESS). The blue is pretty self explanatory as it's your blog name (BLOG NAME). And the red/brown (BLOG URL ADDRESS), is your blog address (eg. http://yourblog.com). Once you made all the changes, paste full code into page, or sidebar. Wherever you want to put it, but make sure you are in HTML mode on the page or gadget. And you're done, simple see. 

Hope this is easy to understand, and I hope you enjoy that tutorial, even if you aren't using it. I'll try to do more of these tutorials and I'll post them under my Design Tutorials label (link to page). Please comment on what you think of this post. I do hope you think it's okay.

Harri xx

(Google Reader is going away, follow me on Bloglovin to stay updated)