Category Archives: tutorials

What you do when you overwrite a website with an older version.

So last night I’m up working on stuff till about 6 a.m. Around 4 in the morning I decide I’m going to tweak my Tumblr blog real quick. I have a special blog on there that I use as a test lab. I make configurations, add stuff, tweak and when every thing looks A O.K. I copy and paste the code into my other blogs that are using the same theme.

So I tweak the theme a bit, I’m happy, I copy the code and paste it into my other blogs not realizing that there were unsaved changes from a previous edit. This was a couple hours work at least, and in a moment of acute stupidity that only took a couple seconds to perpetrate , I overwrote all the changes I had made at an earlier date. To add insult to injury, I couldn’t even find the graphics I had used in my backup. My heart sunk, I was tired, feeling really stupid, and couldn’t believe what I had just done.

Frantically I scoured through the directories on my hard drive, in hopes that I could find the backup files to no avail. In a state of panic I calmed myself and said out loud to no one in particular “o.k. stupid think !” Then it dawned on me, in my moment of desperation I recalled someone talking about a program called time machine or something like that, that stores cached copies of websites on there servers. You just type in the url of the site you want to see, and it pulls up its last cached version of the website. I did a search engine search and low and behold discovered http://www.cachedpages.com/.

I quickly typed in my url and clicked on the Google cache button. To my amazement there was my old site,exactly as I had designed it before my momentary lapse in judgement. The graphics, the new search box, the links, the Twitter widget, the hours of work I had done on the sidebar were all there ! I right clicked on the header image and saved to where I thought the back up file was. I then right clicked on the page again and clicked “view page source” and copied all the code I had overwrote. At last, my world made sense again ! There truly is a God and I gave thanks ! Cachedpages.com saved my REAR and if this ever happens to you, try this because it worked great for me.

Once I got my code and graphics the problems were fixed in under 10 minutes. Words can’t describe how relieved I was. The moral of this story is to always keep backups. I usually do and if this had been a clients page I’m sure I would of known exactly where they were. I tend to be more careful with other peoples stuff, than my own. Plus my Tumblr blogs are just a hobby and somewhere to play when I’m relaxing. I usually keep backups of my backups which go back two changes. So I have the original on the server, a copy on my hard drive, and a copy of the old copy named sitename.bak before changes were made. Using this system, if something goes wrong, 99.9 % of the time it’s completely recoverable.

With that said keep backups, but if the worst should happen check out cachedpages.com or a similar site as a last resort. It really saved my ass !

Youtube Video – Create Old Paper Effect In Gimp

With all the web designing, social networking and trying to get my site up and functioning, I just haven’t had time to do any graphic design work. According to twitter, today is #NationalDrinkWineDay so I decided to crack open a bottle of wine when I got home from my day job, and play around with one of my favorite graphics programs, Gimp. My idea of a little rest and relaxation.

I wanted to do something a little different and came across this video on Youtube of a guy creating a old paper type of effect. The end result looks like an old pirate map. He uses the basic program, with the basic filters, the only thing you might need is a good set of grunge brushes, so if you don’t have those, go to your favorite search engine,search Gimp grunge brushes, and then watch the video. Enjoy.

Add A Twitter Feed To Your Blog Or Website.

I wanted to make my blogs, and websites a little more interactive, and also give people another way to interact with and or contact me. I decided on creating a twitter widget to put in the sidebars of my blogs, and also add to the front page of the website. The process was surprisingly easy. Here’s what you do.

If you don’t have a twitter account you want to go to twitter.com and create an account. O.K. we’ve got our account set up, now go to https://twitter.com/settings/widgets . If you’re not logged into your account, twitter will ask for your username and password and then it should open to a page that has a box that say widgets with a radio button that says “Create New”. Click on create new, and the next page that opens will be the configuration page. Put your @twiiterUserName where it asks for it, and then configure it. If you want replies to show up in your time line then uncheck that box, click whether you want your photo’s to auto-expand or not, adjust your height, theme color, enter your link color hex code or stick with the default, and click create widget. Thats it your done, when the next page loads, cut and paste the code into your blog or website and you’ll have a cool twitter feed, posting all of your updates in real time.

I placed the twitter feed on my Tumblr blog in the sidebar. It’s a custom theme I created so, you’ll have to read the Tumblr documentation to install it in yours. For Tumblr I basically just created another side box and pasted the code into it.

On my website, I did some rewriting of my css to make it responsive to both browsers and phone screens, and using the @media code the widget will even be omitted from smaller displays so the page still displays properly in most devices.

On this wordpress blog, using the 2012 theme, I just clicked on appearance, widgets, dragged a text box over to my sidebar, and pasted the code in the text box. It really couldn’t of been any simpler with wordpress and this is one of the reasons I’m really glad I decided to give WordPress a try. Between the website, Tumblr, and this WordPress blog, WordPress was hands down the easiest to install the widget in !

If you want to get a bit crazy with this project and really customize the heck out of the timeline and make it your own, you can check out the developers page here.

This was a really, easy, fun project, and I think it’s a great way to add a little interactivity to your blog or website. Any questions, please feel free to comment, or tweet it from the side bar. Thanks for reading and good luck !

Create A Seamless Fall Leaf Background Using Gimp

autumn_leaves.jpgIn true Buffalo N.Y. fashion September arrives and the weather starts to change quickly. I woke up this morning to dark cloudy skies, rain, and already the leaves are starting to change from brilliant hues of green to the lovely autumn rusts of fall. It put me in the perfect mood to work on the blog, and make some seasonal changes. I figured I’d kill two birds with one stone and also post a simple Gimp tutorial on making a seamless background for your website, or blog.

The image I’m using for this tutorial can be found here. Image credits go to CarolinaJG at morguefile.com. If you’ve never used Morguefile.com before it’s a great place to find stock photography for your graphic design projects.

O.K. this should be pretty simple to follow. I’m hoping you have a basic idea of how Gimp works. In the future I’ll post some more in depth tutorials on the different tools and functions Gimp has to offer. For now I’m just going to post the basics of how to make a seamless tile using Gimp.

Step 1) Download the image from morgue file, or find one of your own. You’re going to turn the image into a seamless background, so the image should have some sort of pattern to it to begin with.

Step 2) Open the image in Gimp.

Step 3) Now in the toolbox that is usually placed on the left hand side of your screen, click on the rectangle select tool, click on fixed aspect ratio in the toolbox options and then make a perfect square on a section of the image. This can be achieved by clicking on the upper left hand corner of the image and then dragging it down to the lower right hand corner. Click on the center of the square and this will allow you to place the square on the section of the image you want.

Step 4) Now at the top of the screen  click on the image drop down  and in the drop down click on crop to selection.

Step 5) Now return to the top of the screen, click on the image drop down again, and this time select scale image and resize the image to 250 x 250 pixels.

Step 6) Now again at the top of the screen, click on filters, map, and select make seamless.

That’s it ! Your done. Save or Export the file as a .jpg image depending on what version of Gimp you’re using. You now have a seamless tile that you can use on a blog, website, or pattern fill in Gimp.

Some additional things I did to the image.

At the top of the screen I clicked on Colors and selected the color balance and adjusted the various color levels to bring out the reds, oranges and autumny colors of the leaves. I also changed around the brightness and contrast levels a bit.

Use Gimp to center a Google profile or avatar picture.

I got the company set up on Google plus the other night. There’s nothing there right now, but I figured I may as well do it sooner than later. A few things have changed over there, and the avatar or profile image is a little different. I thought I’d do a quick Gimp tutorial on centering a profile picture or user avatar on Google Plus.

The profile picture is still 250 x 250 however the image is circled now, so friends, family, and followers will only see the center of the image posted. This easy tutorial will teach you how to center the image just right, and if you use something other than Gimp like Photoshop, or Paint Shop you should be able to make this work as well.

Open Gimp or the image manipulation program of your choice and make a new document, 250 x 250. Now use your fill tool and select the color you want to use as a background and click inside the document. Now open up the image you want to use as the profile pic as a new image or document. Click copy, and then paste it as a new layer in the profile document. Press the scale tool and scale the image to 250 x 250. Now with the ellipse tool start at the upper left hand corner of the document and drag it down to the bottom right hand corner of the document. This should give you a circle of dotted lines or marching ants that just touch each side of the document. You’re really just using the ellipse tool as a guide, to place your image in. The circle is exactly how your image will be centered. Now click on the move tool, center your image, and your done. At the top of your window, go to Select, and click none. This removes the ellipse, and then click file, export, and name the file whatever you_want.jpg. Your done, you now have a perfectly centered profile or avatar pic for Google Plus.

nad_a_tarHere’s how mine came out. You can see it in action here. While you’re there make sure to add us if you found this helpful. Hoped this helped and thanks for reading !