Tag Archives: tutorial

Adjusting Brightness And Contrast With Gimp

My first youtube video and I was really nervous. This is just a quick tutorial using mainly the colors menu to adjust the brightness and contrast using Gimp in various ways.

sample image for video tutorial

Image taken along the Niagara river in Niawanda Park Tonawanda NY. Feel free to download and use for the above video tutorial. To download full size image just double click image, then when image opens, right click image and save to your hard drive. Click the back arrow to return to the tutorial.

If you found this image looking for a snowy park scene, feel free to use it, but a link back to the tutorial would be appreciated.

Youtube Gimp Text To Path

Here’s a quick and easy Youtube video that explains using Text To Path with Gimp.

To get curved text with Gimp to either wrap around an image or spruce up a graphic all you need to understand is how to Text To Path. This video explains it in a few easy steps. Once you figure out the basics, just use your imagination and the sky is the limit.

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.

CSS Create A Scalable Image Class

Here’s a simple way to scale images in your responsive web design using CSS, two classes and some html.

The CSS

I created two classes one named .image-wrapper and the other I named .scale-image.

First, lets create the two classes. We will name the first one .image-wrapper and this will be used as a div.

.image-wrapper
{
position: relative;
}

Next we will make the .scale-image class. This class will scale the image inside the image-wrapper div. You can play around with the max-width percentage based on your design.

.scale-image
{
display: block;
width: auto;
max-width: 75%;
}

The HTML

Place the image code inside the div of the image wrapper you created and then use the scale-image class to scale the image based on the device or browser size.

<div class="image-wrapper">
<img src="image_name.jpg" class="scale-image" />
<div />

That’s it your done. If you want to see the code in use you can check out a clients site I’m doing here.