Software contains bugs and this is the inevitable truth. This week, I will share some open source bug tracking software that will streamline the process of raising, managing and fixing these issues, as they arise
It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.
We all know that gaining Twitter followers is down to how often you tweet and what you tweet about – or if you’re a website owner and use Twitter, a way to communicate with your readers. However, there are additional ways to increase the chances of new stumblers to follow you, one of them being by having an interesting background.
This isn’t a quick route to Twitter success, but it most certainly does help. By designing your own interesting Twitter background you can express your personality through images. One example is if you’re a creative person (which you probably are as you’re on Psdtuts+!) you would likely be able to put your skills to use and produce something beautiful that other creatives will appreciate. If they like your profile page, the chances are they’ll like your tweets, therefore following you!
Twitter doesn’t offer a whole lot of functionality when it comes to designing backgrounds, but there are a bunch of ways to work around this. You can change the color of the background, sidebar and links, and add background images – fixed or tiled. The biggest problem with Twitter backgrounds is the fact that the majority of your image will be hidden behind Twitter’s timeline and menu, leaving only the space between the edges of your browser and Twitter’s foreground, as seen below:
The above screenshot was taken on my 13″ MacBook Pro with a screen resolution of 1280×800 pixels. The amount of space for a background with this resolution is reasonably good, however with smaller screens or older laptops with a lower resolution the space can decrease dramatically and you will need to be able to work around this.
The obvious thing you need to do is to design your background around Twitter’s foreground content so that when you upload your image it won’t be hidden beneath the timeline.
There are a few different types of backgrounds in terms of image sizes:
Chris Spooner has summed up these examples of Twitter backgrounds with a bunch of great examples, which can be seen along with a Twitter background tutorial: “Twitter Background Design How-To and Best Practices“.
After that quick introduction to Twitter backgrounds, we’re now going to look at a small selection of some lovely examples of backgrounds. We’re going to look at one design at time, and follow it up with a “Twitter Background Tip” that you can keep in mind when designing your own. We’ll also be outsourcing to some other articles and tutorials for a more in-depth look at particular subjects.
Please note that these tips may or may not be used together. Ideally only a few of these tips should be put into practice at any one time, as they don’t all work together.
We all know about how important it is to have a clear and strong brand, whether you’re an individual, a freelancer or a full-blown company. Envato has made their Twitter profile represent their main website by using the same beautiful digital bokeh background and the strong green color scheme.
If you like Envato’s bokeh background, check out some of the following resources!
If you’re going to use a repeated/tiled image as your background, be sure to keep it interesting, or alternatively make it match your brand identity. Daniesq uses a lovely vector-style floral tiled image that fits together perfectly.
If you want to go for a repeating background, some of the following resources may come in handy!
After all everyone wants to know what you look like! Your profile picture is often to small to really represent yourself, or you may be using it to display your brands logo or another image. Although your profile picture can be enlarged, most people choose not to view larger versions of your pictures, therefore this is where your background profile can come in handy if you feel a picture of yourself is vital for your online identity. Chris Spooner for example uses a portrait of himself (which is important for his identity as he posts vlogs [video blogs]) with some of his infamous vector shapes to give his Twitter profile a highly-personalised touch.
There’s no point including a photo of yourself in your background. Even if it is “just Twitter” you need to keep your standards up at a professional level. The below resources should help you do that.
Including your logo in your Twitter background isn’t really necessary if you are already using your logo as your profile picture, but if not there isn’t really anything better you can do – it not only shows off your skills but also advertises your brands image! Vpieters uses a beautiful illustration (also used in the header of their blog) along with the Veerle logo in their Twitter background to make their website and Twitter profile fit together like two peas in a pod.
If you don’t yet have a logo for yourself it is recommended even if you aren’t a freelancer as it helps to identify you as an individual, and it’s something else to show off! Here are a few good logo resources:
Twitter is very well known for its simple Twitter bird mascot (as you can see in the following post: “Splendid Twitter Accessories and Products“, the Twitter bird is very well known and pretty sweet!), so why not embed it into your own design mixed with any of the above or below features? KrisColvin uses the bird to her advantage to produce a stunning “big image” background.
If you want to include a Twitter bird in your background, check out these resources.
If you have a reasonably unique name that you use for your online identity, then why not expand on that and base your Twitter profile picture and background around that name? Mut1ey uses a rather cool picture of Muttley the dog from an old popular TV show as the profile picture, and expands on this by using a great illustrated piece of the character, along with an actual picture of the man behind the Twitter account and some contact information.
It is important to keep the consistency of your brands image throughout your marketing material and social networking sites. Here are a couple of informative and helpful articles:
Your background space is a great way to share a little more information about yourself with your followers without being restricted by the character limit Twitter gives you in the primary biography area. Oridusartic embeds her blogs URL, email address and a list of her passions within a simple but stylish vector-based illustration that merges into a solid color. This helps new stumblers decide whether or not the user is going to be tweeting about things that are interesting to them.
Using a restricted color palette (especially in tiled backgrounds) is a great way to show off your skill, as it requires patience and great compositions to make it look good. Willbryantplz uses a beautiful illustrated background merged with a grayscale texture to "wow" his followers and make the white Twitter foreground pop out from the screen. To really make this style work, the same colors should also be used as your font and sidebar colors.
If you’re going to use a limited color scheme, choose it wisely. Make it match your branding. Below are a few great color scheme websites well worth checking out!
Images are one of the best ways to share your personality and interests with people that somehow land on your Twitter page. Ericsteuten uses a wonderful illustration to represent his characteristics; clearly a happy, funny and imaginative guy.
Illustrated characters in your background are one of the best ways to show off your personality to your Twitter profile viewers; it shows off your skills too! Below are a few resources to help with character illustration.
If you have a mascot for your brand your Twitter profile is an excellent place to show him, her or it off! It’s not only fun and entertaining, but is a great way to link your Twitter profile with your brand. One superb example of this is MailChimp’s Twitter profile, who use their infamous MailChimp character to really jazz up their page.
By putting some of these Twitter background design tips into practice, you’ll be improving your design skills as you’ll learn how to work around design limitations which more than often do turn up in personal and client projects, as well as producing a great, attractive background that will appeal more people to hit the follow button when visiting your profile page!
Do you feel you have a good Twitter background? Share it with us in the comments section below!
Here is a list of over 50 tools and resources that you may find useful in your web development and design work. We all know that us web developers and designers are very busy and often overworked! Therefore, it is important to use tools and resources to help us work that much better and more efficiently. These tools not only make our work easier, but they have the ability to improve the quality of our work as well.
Jonas Wagner has ported the Flash 2D physics engine Box2DFlash to JavaScript:
In his demo Jonas uses the Canvas tag to map the physics simulations on. Click on it to create explosions:
Jonas talks about the approach he used to convert the original library from ActionScript to JavaScript:
At first I thought this conversion would be trivial as both actionscript and javascript are dialects of ECMAScript. Well, I was wrong. Nevertheless I continued to follow my regex based approach, basically trying to ram my head through a wall. After a few attempts I succeeded to convert Box2DAS3 to javascript. It had a nasty bug though. Two solid cubes were able to penetrate each other when they fell on their edges. The reason? ActionScript supports 'properties'. I didn't know about this and the conversion script does not support it. In the end I fixed the few properties in the translated code by hand because I was too lazy to add support for getters and setters to the conversion script. Now it seems to work pretty well. Please keep in mind, this is not a generic actionscript to javascript compiler, it's just a script that happens to work for box2dflash.
The explosions in the demo are simulated by shooting out a few tracer particles with a high density and velocity. The benefit over just applying an impulse to each object is that the strength of the impulse is proportional to the surface area. Also the force of the explosion will to some extent be redirected to the side by the floor. When using this in production code you would probably want to destroy the tracer particles after their first collision or a few seconds.
You can grab the converted JavaScript yourself. There isn't any current documentation but you can follow the existing Flash box2dflash documentation.
Here's what the explode function looks like in Jonas' test demo for example:
This library is useful for games and fancy user interfaces using HTML5.
I’ve reviewed some of the things that can be done using Word 2007 – but it is not a web tool. Well, it’s not necessarily a web tool.
What if you are stuck and need a simple web banner? You can actually create web banner ads directly in Microsoft Word. The following tutorial shows you how to do just that.
Open up Word 2007. You will automatically have a new blank document. Go to the tab Page Layout, choose Size and choose More Paper Sizes at the bottom.
From the pop-up window Page Setup, choose Paper, Paper Size and then Custom Size. There enter 7in by 2 in. This gives you approximately 195px by 680px. You can turn on showing pixels when shapes or boxes are inserted. Simply go to the Office button, choose Word Options and then click Advanced. There you have to scroll down until you see Display, then tick the Show Pixels for HTML features box.
Next click on the Margin Tab and set all margins to zero.
Then click on the Layout Tab and set the size for the header and footer to zero as well.
Go back to the Page Layout Tab and set the Page Color to a blue.
Now we want to add some visuals. Since the background is blue, let’s add some clouds. Go to the Insert Tab and select Shape and insert round shapes filled with white and no outline color. Align those along the bottom of the banner.
Let’s add an easy gradient to the background. Go back to the Page Color in the Page Layout Tab and select Fill Effects from the drop down.
Choose your gradient from the pop up window. You have tons of choices here. I chose a horizontal blue to light gradient.
Go back to the Insert Tab and insert a Simple Text Box.
Add some text, give it a styling and make it stand out. Place it to the left, or wherever you think it would be noticed.
Now you will notice that the text gets aligned to the top in the text box. To change the vertical alignment, right click on the text box and choose Format AutoShape.
Now you can choose top, center or bottom alignment from the pop up window.
I’ve added more shapes (e.g. a speech bubble – cloud shape) and added more text. You can also change the transparency of shapes and their fill color. To do so, repeat the previous step and play with the transparency slider. It works kind of backwards in Word, meaning 0% is opaque and 100% is transparent.
The end result is your very own web banner. The only way to get a gif, jpg or png is to either export it as a PDF or hit the PrintScreen button on your keyboard and paste it into MS Paint. There you can crop and change it and save it as an image.
CSS3 is opening up a lot of possibilities for designers and developers. Things that used to require images, JavaScript or Flash can now be done with the power of CSS. Unfortunately, in most cases these developments are more useful for experimentation and learning at this point since they are not supported by all of the major browsers. However, if you’re interested in learning more about the capabilities of CSS3 it can be a valuable use of your time to see what is being done.
In this post we’ll feature 25 experimentations and demos from various designers/developers using CSS3. Some have more practical real-world uses than others, but all of them demonstrate what can be done with CSS3 and some creativity.
Old School Clock with CSS3 and jQuery
A Colorful Clock with CSS & jQuery
Use CSS3 to Create a Dynamic Stack of Index Cards
Experiment: Realistic iPod with CSS3
CSS3 Loading Spinners without Images
CSS3 Background-Clip & @Font-Face
Create a Vibrant Digital Poster Design with CSS3
Multi 3D Cubes with Animation Using CSS
Animations Using CSS Transforms
Easily Turn Your Images into Polaroids with CSS3
jQuery DJ Hero – CSS3 and jQuery Fun
CSS3 Animations Demonstrated with Snow
How to Create Depth and Nice 3D Ribbons Only Using CSS3
Apple’s Navigation Bar Using Only CSS
Rotating Image Gallery Using CSS Transform and Transition
For more web development resources please see:
