Creating a 125 x 125 Badge Using a Custom Image

As a follow-up to yesterday's post, today I will show you how to use a custom image to create a unique 125 x 125 badge. Once you have created a couple of badges you will see how easy it is. Here are the steps to make your own custom badge using Photoshop

Original Image

Open your original picture in your photo editing software. Go to Image/Image Size and note the size of the image. The size for the image I started with as pictured was 3456 px x 2592 px. To create a square image the smaller pixel size is going to be the limiting factor. Close Image Size. The original image will be locked so duplicate the image forming a new layer. Now go to File/New and create a new transparent image with equal size height and width according to the smallest size of the original image. This prevents any distortion problems. In this case I created a 2592 px x 2592 px transparent image. Use the move tool to drag the duplicated layer on the original to the new image. Note that it will not all fit so use the move tool to adjust the positioning of the image layer as desired.

Square Image

The adjusted image as pictured is now a 2592 px x 2592 px square. From this point is all about design to get the look you want. Close the original image as you will only be working on the adjusted image.

For illustrative purposes I decided to play with filters and opacity so for this step I had to create a new layer then fill with white and drag that below the layer I was applying the filter and opacity changes to. This allowed me to see what I was doing. I adjusted the opacity of that layer to 35% and renamed the layer to opacity. Then I duplicated the opacity layer and used Filter/Filter Gallery/texturizer and renamed that layer filter. Next I duplicated the original background layer and added a 100 px black stroke using Edit/Stroke then dragged that layer to the top layer position. Using the magic wand tool I clicked on the black stroke to select then Select/Inverse that selected the inside portion of the image, hit delete and named this layer frame. I applied a 20 px ring bevel to the frame level using Layer Style/Bevel and Emboss. Next I used the text tool Brush Script std, 288 px to write the text and the move tool to position as desired. I applied Layer Style/Bevel and Emboss in size 20 px and Level Style/Drop Shadow distance 5, spread 5, size 70, contour linear. For the purposes of this blog I added my copyright using a custom made brush. Finally I was ready to turn the image into a badge.

Custom Made Badge

Before going any further I saved the work as a .psd file to preserve the layers so if I want to edit the work in the future I can do so. Then I flattened the image using Layer/Flatten followed by File/Save for Web, clicked save and named my file. Once saved I uploaded it to this blog.

The image would be of little use if an URL was not added. So I clicked the image to highlight then clicked link button on the editing toolbar in Blogger. Now if you click on the image it will take you to the home page of this blog. If you want to add an URL to an image that is not part of a published post, upload your image as normal. This gives you an image location. Add the desired URL then go to Edit Html in blogger and copy the code to use where you want. Save the post as draft so if you need to use it again you always have the code.

Garden Gnome
©2006-2010

Creating a Plain 125 x 125 Badge

The 125 x 125 badge is currently one of the most popular advertising card size in the blogosphere. If you are unsure of what a 125 x 125 badge looks like there are several in the side bar including under the I Also Author section. There are online sources that will make these badges for you but they are generic, restricted to their designs and fonts. Your 125 x 125 is your advertising card so you want it to be unique, something that will serve as your brand. Design is important as the badge should not be changed once it has been in use for any length of time. Changing the badge confuses readers who visit your blog via your badge.

A plain 125 x 125 is surprisingly quite easy to make. Here are the steps using Photoshop but would be similar in any photo editing software:

1. Create a new image in any square size you want but big enough to see what you are doing, so 600 px x 600 px.
2. Create a new layer then fill with colour of your choice using the colour pallet or hex number - Edit/Fill then choose black, white or colour, double click on colour to get to colour pallet and hex number
   
3. If desired add a stroke in desired colour - Edit/Stroke, choose colour and pixel size desired
4. Use text tool to add any desired text. Position test as desired. Add shadow by Layer/Layer Style/Drop Shadow, change colour of drop shadow as desired.
5. Merge layers - Layer/Merge
6. Apply bevel if desired - duplicate layer, working on duplicated layer choose Layer/Layer Style/Bevel and Emboss, choose desired bevel
7. Flatten image - Layer/Flatten
8. Resize image - Image/Image Size, be sure constrain proportions is checked, change width and height to 125 and 125 respectively.
9. Save your image - File/Save for Web, name file and save to folder of your choice

That is how easy it is to make a fairly simple 125 x 125 badge. Tomorrow's post will show you how to make a badge using a custom image.

Garden Gnome
©2006-2010

How to Make Your Own Scrolling Blog Background

Every blogger wants his or her blog to stand out from the crowd. This means stepping away from the generic blog templates that get you started. A couple of weeks ago I was surfing blogs and noticed a few scrolling type blog designs made by The Cutest Blog on the Block. The many designs were indeed cute and placing the backgrounds on the blog involved only the of a simple script. Adding the background in this method meant you would not lose any of your sidebar information which was a real plus. However, I saw two immediate problems for me. First I wanted to create and use my own designs and second by using one of their designs the script pointed to their Photobucket Album which meant if they closed that album the background would immediately disappear. So I wanted control of where the background was. With all this in mind I set about making new backgrounds for my blogs with the exception of my cooking blog that is using one of their designs temporarily [now my own © design].

I'm always looking for ways to use Photoshop® so as soon as I saw their backgrounds, I knew I could easily make my own. Making your own scrolling background and customized headers are easily done using Photoshop®, Photoshop Elements® or Paint Shop Pro®. This technique can also be used to create custom made backgrounds and elements for digital scrapbooking. I'm going to give you the basics of what I did so you can see how easy it is along with the script needed to install the background in Blogger. Their instructions said you set your template to Minima but I got my backgrounds to work using Rounders 2.

Background

Note: This background is © Garden Gnome and is for illustration purposes only. Please do not copy.

The first thing I did was to determine the necessary sizes by opening one of their backgrounds. After that I was on my own. Note that creating the background uses layers so when saving save as .psd file for later modification and as a .jpg for using as the background.

Create a new image 1450 x 1100 pixels. This will be your main background. Fill this layer with white. Create a new layer. Fill this layer with a pattern of your choice from the pattern selector. In this case I used a basket weave pattern. Create a new layer and fill this layer with the colour of your choice. I used a red that I liked using the colour picker. When you decide on the colour you want write the colour code down so you can co-ordinate other elements on your background, header and blog. Adjust the opacity on this layer to get the effect you want. Create a new layer and click on gradient overlay. Draw the gradient from top to bottom and adjust the opacity to get the effect you like. Leave the image open and create a second image 795 x 1100 pixels. This will be the panel where your header, posts and sidebar appear. Fill this layer with the colour or pattern of your choice. In this case I chose white and adjusted the opacity to the desired effect. Save this image as a .psd file for further modification. Merge the layers then use the move tool and drag the image onto the maid background. Centre the panel. Add a drop shadow to the centre panel adjusting as desired. Using the line tool create a line 20 pixels wide spanning the entire length of the centre panel. Fill with desired colour. Bevel and emboss as desired. Duplicate this layer. Use the move tool to move the duplicated layer to the other side of the panel. At this point you can now add any further embellishments you desire using additional layers. I chose not to add any but if you check out my personal blog you can see how I added a ribbon I made and use that as a guideline for placement. Other embellishments such as flowers, buttons and etc. can be found on a lot of scrapbooking websites or you can make your own using the shape tool.

Very important: Save your file as a .psd for Photoshop® and Photoshop Elements® or as a .psp for Paint Shop Pro®. This will preserve the layers so you can later modify any layer you choose to create a new background. Save the file again as a .jpg for uploading to a photo hosting website. If using Photobucket, upload the image at the 1 meg setting.

To install your background, upload it to a photo hosting site such as Photobucket. Copy the url location. Paste the location into the following script and save. Open the layout tab of your blog in Blogger. In the top header section, click on add a gadget. Click on html/javascript. Copy and paste the script into the box. Click save then preview to see your new, custom made background then click save.

Here's the code you need to install the background on Blogger:



Header

Now that you have made a custom background you can make a custom header. This is also very easy to do. Create a new image 700 x 300 pixels. You can leave this transparent if you want to use the background colour of your blog. If left transparent, the final header should be saved as a .gif and uploaded to a photo hosting site then placed on your blog using the header tool on your layout and the url. This will preserve the transparency on Blogger. In this case I used the colour of my blog background that came from the lightest pantone of the red. To get to the pantone I put the colour code of the red into the colour selector then clicked custom to bring up pantone. The border was created using stoke with the red I wanted. Then I duplicated the layer and used the marquee tool to outline the inner section and deleted that on one layer. This created the red frame. Then I inversed the selection to work on the frame and used the bevel and emboss style to create the raised effect. To get the vellum effect I created a new layer and used the marquee tool to create a smaller rectangle. I filled that with white. Then I used a fuzzball brush to go around the edges and added a drop shadow. I used the font brush script to write the title of my blog then beveled and embossed it and added a light drop shadow. Save the file as either a .psd or .psp as well as .jpg.

To install the header: Go to layouts, page elements for your blog and click on header. Click on add picture from your computer or you can choose from url if you uploaded to a photo hosting website. Click on your header file .jpg. In a couple of seconds you should see your header. Under placement click instead of title and description then click save. Hit preview to see how your new blog header looks. The blog header background will still be present around the image. There are three ways of dealing with this. The first is the easiest by just leaving as is. The second method is to go into layout then html and expand widgets. Change the background colour as desired. The third method is to delete the header background

I hope you found this method useful for creating your own uniquely designed backgrounds and headers for your blogs. If you use this method please leave a comment with your url so I can see what you came up with.


Garden Gnome
©2006-2008