Tag Archives: graphic design

New Twitter Header Dimensions

Twitter now gives you a 1500 x 500 px header image for your profile page. The new look of twitter is great and that’s a lot of real estate to fill. I decided to play around with it a bit and here’s what I discovered.

Going to the twitter help page https://support.twitter.com/articles/127871-customizing-your-profile# They give you the suggested dimensions for the new header of 1500 x 500 px. I used Gimp 2.8 and opened up a new image, 1500 width by 500 height. I added my spacey background, and then opened up some of my old header xcf files from Facebook and G+ and copied and pasted together a quick header image. I added the alien from some clipart, and copied and pasted the rest of the design from some other headers I created for the New Aeon Design. The whole project took about a half an hour.

twit_head1

The new header 1500 X 500 px shown in open browser. This was just a quick experiment. I would suggest adding some business keywords, url, and company logo. Keep it simple.

Once the file was completed I saved it as a png file and uploaded it to twitter. The first thing I discovered about the suggested 1500 x 500 px is that there is about a 50 px border from the top edge and along the bottom edge that will cut out on you. So I had to move the url found on the upper left hand corner of the image down about 50 px. I also moved all the images and graphics along the bottom edge up 50 px. This took care of the problem and when the browser window is resized it still shows all the graphics. However, when I redo this I will probably add another 10 px border for browser resizing. When the browser is resized I noticed that a very tiny amount of the lettering got cut off. Nothing major, and everything was still readable.

Now I tried to get creative and put a little u.f.o. with a light shining over my twitter avatar. I really liked the way this looked when the browser is set to full screen, however when the browser is resized the avatar doesn’t scale with the header image and off sets the u.f.o. I’m leaving it for now, but this has to be changed down the road.

twit_head2

Notice that when the browser window is resized the twitter avatar doesn’t scale with header image. This offset the U.F.O just enough to be annoying and unprofessional. When I update this header, that will have to be changed.

Outside of the avatar issue, the new header dimensions are great. That’s a lot of real estate to fill with information about your company, brand, or product. When creating your header I would suggest adding your url to the design, a couple keywords about what your company does, like “Web Design”, or “Wholesaler of World Class Widgets”, your logo and business name. Keep it clean and simple. In the world of headers less is sometimes more ! If anyone wants a header designed for their business message me on twitter with what you want, and I’ll shoot you a quick price. Most designs start around $40.00 bucks.

new-aeon-twit_sm

The header as it was designed. Notice the 50 px border along the sides. If you don’t move everything in about 50px you will have parts of the image cut out when you upload the final product.

Hope these tips help, and happy tweeting everyone ! If you have any further suggestions please comment, and if you’re on twitter folllow me and I’ll probably follow back .

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.

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.

Free Social Media Graphic Icons

35-circle-social-iconsI was looking for some social networking icons and came across these. I downloaded them for a customers website I’m working on and they look great. If you’re looking for some social networking icon graphics to use on your website, blog, or graphics project give these a try. They come in a zip file,in both png and psd format. Available for commercial and personal use.

Download and license information available here.

Link

After recovering from my first Linux disaster, I promise I’ll post more on that in the next couple days. I wiped Windows from my system and did a minimal install of Fedora 18 KDE. So long Windows ! After the install, I played around a bit to see exactly what was pre-installed in my computer, removed the packages I had no use for, and found a couple interesting surprises. My favorite one is KColorChooser.

One of the things I love about Linux is all the great software available for graphic design, and web design. KColorChooser is another great example of some of the great software available for designers. This is a really simple program that allows you to select colors from either the color pallete, or anywhere on the screen. Now that I’ve been doing a lot of web design I’ve wanted to look for a program just like this. This is the perfect program to use when you’re developing your color schemes on web pages, and graphics. Read More Here.