Tag 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 !

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 !

Create a Color Changing Copyright Signature Brush in Gimp

I’m not really sure the exact direction the blog is going to take. I plan on creating a compendium of all things graphic design, web design, and probably photography related as well. I also want a place to showcase the work of new-aeon-design.com. This afternoon I thought about doing a picture a week of some different photography produced here. Although I’ve posted images all over the internet with out a copyright signature, I thought now that I have the domain I should probably sign and copyright every image posted here. Then I thought , if I do that I may as well post my first Gimp tutorial. So, today I will teach you how to create a Copyright Signature brush to use on all your designs, and photography.

barn.

This is an image of a barn at rest area found just outside of Ellicotivlle N.Y.

I’m using Gimp2.8 for this tutorial, however if you use Photoshop, or any of the other programs out there you can probably follow along and make this work.

First thing you want to do is load up Gimp2.8 and go to FILE ,CREATE NEW.

Set the width to 300 and height to 200.

Click on ADVANCED OPTIONS, change COLOR SPACE to GREYSCALE and Fill BACKGROUND COLOR. By default it should be set to white.o.k.

Now for the copyright symbol you want to find a character map. I’m pretty sure every operating system comes with one of these pre installed. I use Linux with KDE and used KcharSelect. In Windows I think there is a character map in accessories. If you’re using KDE just open up your terminal program, type kcharselect, and the program should open for you. Now , once you have your character map open, search for the Ⓒ symbol and copy it to clipboard.

Return to Gimp, click on the TEXT TOOL, select your font, and type your signature into your work space. Then click to the beginning of the text and paste the copyright symbol at the beginning of your signature. Highlight all the text in the text box, size it to your desired size, at the top of your window click IMAGE, AUTOCROP IMAGE. We’re almost done.

Now we want to save the file as a .gbr file and place the file in the Gimp brushes folder. This will very from system to system depending on how you have yours set up. On my computer it’s in the home/username/.gimp2.8/brushes folder. So at the top of the window go to FILE, click on EXPORT, and then save it to /home/username/.gimp2.8/brushes/ and export it as signature.gbr which will save the file and make it a gbr or brush file for you.

Now click refresh button found at the bottom of the brushes dialog box and the brush should appear. Open up a new photo, create a new transparent layer, adjust your brush size and try out your new copyright signature brush ! Happy Photographing !

Convert BMP Image Into SVG Inkscape

This is a great tutorial that shows you how to take any bitmap image and convert it in Inkscape to make a Scalable Vector Graphic or SVG. Inkscape basically traces the image and with some tweaking you can use this trick to make brushes, outlines, and it also comes in handy when trying to scale clip art for different projects.