Posts tagged youtube

href=”http://api.tweetmeme.com/share?url=http://mashable.com/2010/01/14/custom-twitter-youtube-myspace-backgrounds/&service=bit.ly”> width=”51″ height=”61″ src=”http://api.tweetmeme.com/imagebutton.gif?url=http://mashable.com/2010/01/14/custom-twitter-youtube-myspace-backgrounds/” align=”right”/>

rel=”nofollow” href=”http://www.webdesignerdepot.com/” > src=”http://cdn.mashable.com/wp-content/uploads/2010/01/wdd3.jpg” alt=”" title=”webdesigner depot logo” width=”94″ height=”64″ class=”alignleft size-full wp-image-183925″ />This series is supported by Webdesigner Depot, a popular web design blog covering tutorials, design trends, blogging and inspirational posts. You can visit WDD at rel=”nofollow” href=”http://www.webdesignerdepot.com/” >webdesignerdepot.com and follow WDD on Twitter rel=”nofollow” href=”http://twitter.com/designerdepot” >@designerdepot.

src=”http://cdn.mashable.com/wp-content/uploads/2010/01/painting.jpg” alt=”painting image” class=”alignright size-full wp-image-143936″/>If you’re using your social media profiles to promote your personal brand or business, chances are that pre-made themes and watermarked templates just won’t cut it. You need a custom design to make your profile stand apart from the rest and convey important information about who you are. id=”more-183277″>

Some of our favorite social networks afford us this customization, but there are a few tricks that may save you some time and frustration when creating a custom profile background. While none of these can replace the eye of a great graphic designer, they should help you get a sense of the layout you’re after.

Choose an Image Editor />

---

To start, you’ll need an image editor. Photoshop is probably best suited for the task, but there are plenty of free alternatives on the web.

href=”http://gimp.org” >Gimp is a free, open source image editing and compositing tool that has many of the layering and filtering abilities of Photoshop.

href=”http://aviary.com” >Aviary’s Phoenix is another great free tool that is entirely web based. You can edit and layer images in a Photoshop-like environment right in your web browser, then save the finished product to your desktop.

href=”http://photoshop.com” >Photoshop.com also offers a free, “lite,” web-based version of the popular editor.

Once you’ve chosen your tool, it’s time to get to work.

Twitter />

---

A great Twitter background makes an impression on potential followers. It should communicate who you are and what people should expect from your tweets. Here are some examples of great Twitter backgrounds:

Dimensions: The column that contains your tweets and profile information will always take up about 760 pixels of screen real estate. What’s left for the background will be determined by the user’s monitor. Everyone viewing your profile will see it a little differently, depending on the resolution of their screen. A safe bet to ensure that your background will not be cut off or tiled at most resolutions is a 1680 x 1200 pixel image. The image resolution should be web standard 72 dpi.

Maximum File Size: 800 KB

Layout: Accounting for the 760 pixel center column, the space left over on either side will depend on the visitor’s resolution. The space at the top for the Twitter logo will remain constant at about 65 pixels, and a good rule of thumb is to leave about 200 pixels at the left for your design. This will accommodate most monitor resolutions.

Twitter aligns the background image to the top left, so it is important to focus your main content in that area as shown. The further to the left an element appears, the least likely it will be cut off on a low resolution monitor.

There are a few tools that may help you determine what your layout will look like at different resolutions. To quickly determine your own resolutions as a reference point, jump over to href=”http://www.whatismyscreenresolution.com/” >whatismyscreenresolution.com.

For FireFox users, the href=”https://addons.mozilla.org/en-US/firefox/addon/60″ >Web Developer add-on will resize your browser to fit common monitor resolutions so you can see what your layout might look like for other users.

href=”http://www.screen-resolution.com” >Screen-resolution.com is also a handy tool for popping URLs into resolution-specific browers windows.

Design Tip: Don’t clutter your background with too much information. Because URLs are not clickable in a background, this space is better suited for logos, photos, or other clean graphic elements that express who you are. If you’re encouraging people to connect with you outside of Twitter, make sure the one URL in your profile links to your contact information.

Also, be sure to choose text and link colors that compliment your background.

How To Add It:

YouTube />

---

A branded YouTube channel is a great way to identify yourself to viewers when they land on your video pages. Here are some examples of great YouTube channel designs:

Dimensions: YouTube channel backgrounds work similarly to Twitter backgrounds in that they must account for the fixed width of the channel content. The area that displays your videos and profile information is 960 pixels wide. Note that the top area that displays the YouTube logo and search is not taken into account with regard to your background. Your background image will begin below the white YouTube bar, so all content should be started near the top of your image.

Like Twitter, screen real estate depends on monitor resolution. A good image size to work with is 2000 x 2200 pixels total.

Maximum File Size: 256 KB

Layout: It is important to understand that YouTube will center your background image behind your channel content. This means that your important image content should appear just to the left and right of the 960 pixel center column. It also means that people with large or widescreen monitors will see much more of your image stretching out to the right and left of their screen. This is why it’s good to use a very wide image (2000 pixels, in this example).

Whereas your Twitter background should be focused as far to the left as possible, the content in your YouTube background should be as close to the central 960 pixel column as possible without going behind it. Again, test different resolutions with the tools above to see where viewers might be cropping your image and adjust accordingly to account for variation.

Design Tip: Because widescreen monitors may view much more of your image on the left and right, it may be useful to incorporate a fade to a solid color on each end. Then, make the page background that same color to avoid an unsightly “break” in the design.

Also, be sure to implement complimentary box and text colors.

How To Add It:

MySpace />

---

Though MySpace has fallen out of vogue in recent years, it is still a viable platform for younger users and a destination for many bands and music sharers.

If you’re looking to make a statement with your MySpace page, a well-tailored background could do the trick.

Here are some impressive ones:

Dimensions: MySpace’s “Profile 2.0″ customization is actually very flexible and allows a few options. You can change your content size between 960 pixels, 750 pixels, or 100% (which wipes out the background entirely). Decide which layout you like best and build your background to match. The full size should account for large monitors, so something in the neighborhood of 2000 x 2200 pixels should work here as well.

Maximum File Size: Any, but best to keep it under 500K for quick load times.

File hosting: Unlike Twitter and YouTube, Myspace will not host your background file, but simply reference it from a URL. If you don’t own web space, there are plenty of places you can host an image for free, including href=”http://photobucket.com” >PhotoBucket and href=”http://imageshack.us/” >ImageShack. Upload your image to one of these sites and paste the image URL into MySpace’s layout editor.

Layout: Again, MySpace is surprisingly flexible, and the advanced layout editor allows you to align your background against any quadrant of the screen, or center it. It’s up to you how you want to approach the layout. Simply account for your content column (750 or 960 pixels) and design around it. Then position your image accordingly. The best designs fit their graphic elements snugly against the content column so that they’ll be visible at any resolution.

How To Add It:

Others />

---

The two other big dogs of social networking, href=”http://mashable.com/tag/facebook”>Facebook and href=”http://mashable.com/tag/linkedin”>LinkedIn, don’t offer background customization options. While this may be a disappointment to some, many would argue that the clean, uniform look of these sites has contributed to their success.

Do you have any tips, tricks, or resources you use when designing a custom profile? Share them in the comments below.

/>Series supported by Web Designer Depot />

rel=”nofollow” href=”http://www.webdesignerdepot.com/” > src=”http://cdn.mashable.com/wp-content/uploads/2010/01/wdd.jpg” alt=”" title=”webdesigner depot logo” width=”150″ height=”100″ class=”alignnone size-full wp-image-183897″ />

Webdesigner Depot is one of the most popular web design blogs in the world. It covers tutorials, design trends, blogging as well as inspirational posts. It’s run by Walter Apai, a web designer from Vancouver, Canada. The blog is a great resource for both beginners and advanced designers looking to expand and improve their knowledge. The site is visited by Fortune 500 companies and is used as a reference by many design schools. Visited by almost 2 million readers per month, WDD is a prime resource for both graphic and web designers. Visit WDD at rel=”nofollow” href=”http://www.webdesignerdepot.com/” >webdesignerdepot.com. Follow on Twitter: rel=”nofollow” href=”http://twitter.com/designerdepot” >twitter.com/designerdepot. Subscribe to RSS feed: rel=”nofollow” href=”http://webdesignerdepot.com/rss.htm” >webdesignerdepot.com/rss.htm.

---

More social media resources from Mashable: />

---

- href=”http://mashable.com/2009/05/04/twitter-designers/”>85+ of the Best Twitterers Designers Should Follow /> – href=”http://mashable.com/2009/03/16/design-inspiration/”>100 Great Resources for Design Inspiration /> – href=”http://mashable.com/2009/12/21/social-media-fashion/”>5 Ways Social Media Changed Fashion in 2009 /> – href=”http://mashable.com/2009/12/09/5-tips-online-friendships/”>5 Tips for Building Lasting Online Friendships /> – href=”http://mashable.com/2009/11/13/social-media-book-review/”>Top 5 Must-Read Social Media Books /> – href=”http://mashable.com/2009/11/15/world-changing-social-media/”>Social Media Can Change The World Through Common Ground

Image courtesy of rel=”nofollow” href=”http://www.istockphoto.com/mashableoffer.php”>iStockphoto, rel=”nofollow” href=”http://www.istockphoto.com/user_view.php?id=652260″>skodonnell

/>Reviews: href=”http://www.blippr.com/apps/336650-Facebook” >Facebook, href=”http://www.blippr.com/apps/337484-GIMP” >GIMP, href=”http://www.blippr.com/apps/337065-ImageShack” >ImageShack, href=”http://www.blippr.com/apps/337623-LinkedIn” >LinkedIn, href=”http://www.blippr.com/apps/336652-MySpace” >MySpace, href=”http://www.blippr.com/apps/337064-Photobucket” >Photobucket, href=”http://www.blippr.com/apps/393947-Photoshopcom” >Photoshop.com, href=”http://www.blippr.com/apps/336651-Twitter” >Twitter, href=”http://www.blippr.com/apps/336658-YouTube” >YouTube, href=”http://www.blippr.com/apps/393797-iStockphoto” >iStockphoto

Tags: href=”http://mashable.com/tag/customization/”>customization, href=”http://mashable.com/tag/design/”>design, href=”http://mashable.com/tag/how-to/”>how to, href=”http://mashable.com/tag/myspace/”>myspace, href=”http://mashable.com/tag/photoshop/”>Photoshop, href=”http://mashable.com/tag/social-media/”>social media, href=”http://mashable.com/tag/twitter/”>twitter, href=”http://mashable.com/tag/twitter-background/”>twitter background, href=”http://mashable.com/tag/youtube/”>youtube