Category Archives: tutorials

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 !

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 !