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.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.Gimp (
) is a free, open source image editing and compositing tool that has many of the layering and filtering abilities of Photoshop.
) also offers a free, “lite,” web-based version of the popular editor.
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:
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.
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 whatismyscreenresolution.com.
For FireFox users, the 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.
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:
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:
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 PhotoBucket (
) and 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, Facebook () and 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
Whether you’re blogging for business or pleasure, now is the time to take your little corner of the web to the next level. Social media makes your blog more visible and valuable than ever, and the amount of resources available to beautify and streamline your blog is enormous, and ever growing. The best part is, you don’t have to be a designer or a programmer to create a great looking blog, but you should know where to find the right resources, and how to align your blog’s design with its purpose.Learn Some HTML
A basic understanding of the web’s nuts and bolts will allow you to make custom design tweaks, fix template problems, and format your posts more precisely. Rest assured, there’s no need to sign up for classes. Everything you need to know about the web is right here on the web.
A great place to start is W3Schools, a site that provides great free tutorials on web development. The HTML tutorial covers exactly the core basics you should know. While you won’t need to code your new blog design from the ground up, understanding how tags, text formatting, and embedding work will be extremely valuable when you want to start customizing the pre-built boxes and widgets on your site.
Blog (
) customization is an experimental, learn-by-doing process. With a little bit of coding knowledge, a wealth of options will be open to you. If there’s something you’d like to achieve, or something that’s not quite working in your template, a Google Search can be your best friend. Chances are, someone else has had the same problem, and posted an answer or code snippet on the web that you can use.Find the Right Template
The world of blog design has come of age, and the web is bursting with beautiful, free design resources that are easy to plug right into your platform of choice. There’s no need to settle for simple color scheme changes or built-in layouts. Brilliant designers are sharing their custom-built templates on the web in droves.Here are a few resources that you can browse in your search for the perfect design. Not sure which platform to set up your blog on? Hopefully some of the designs cataloged on these sites will inspire you in one direction or another.
Wordpress
WordPress Theme Directory
Blogger
Deluxe Templates
Tumblr
Tumblr Theme Garden
Posterous
Posterous Themes
) themes are also compatible with Posterous ().Layout
Shopping for your template can be a lot of fun, but as you start narrowing down your top choices, it’s time to ask yourself: What is the purpose of my blog, and how can the design facilitate it?Think about utility and user experience when choosing your layout.
Will you be embedding lots of YouTube (
) videos or large graphic elements in your posts? Then perhaps a one or two column template, with lots of horizontal space, is your best bet.Are you planning to display a lot of content side by side, with links to other posts and advertising? Consider a three column template.
The key to good blog design is to strike a balance between content and clutter. You want to present yourself artfully, without being distracting.
One Column
Simple and straightforward, a one column blog is all about the posts, with no sidebars or other distractions. If the most important content on your blog is always at the very top, a one column layout might be a great choice.Blue Basic (WordPress)
Two Column
The blogging standard these days, two column layouts leave plenty of real estate for your content, but also a lot for sidebars full of links, contact info, and other information your readers might find useful.356 Days of Astronomy (WordPress)
Three Column
Use three columns if you plan to spread lots of content, links, and ads out onto your page. But, be wary of clutter. Be sure to choose a three column layout with ample spacing and breathing room for content.Typography (Blogger)
Outside the Box
For something a little more interesting, break out of the column mold and consider some unique layouts like these.Art In My Coffee (Tumblr)
Be a Layout Sleuth
Have you stumbled upon a blog design that you’ve absolutely fallen in love with? It’s possibly a template that you might be able to use for your own blog. If so, there are a few ways to figure out where it came from, and how to get it.Many templates are free under a Creative Commons license, and as such, include a link back to the source or designer. Scroll to the very bottom of the blog’s home page and look for a template attribution. There you may find the name of the theme, a link where to find it, and the platform on which the blog is hosted (WordPress (
), Blogger (), etc.).If there’s no attribution on the page itself, a little detective work can help. On the blog’s home page, use your browser to view the source code. There may be clues, including the blog platform, attribution notes about the template, and possibly a URL where you can find it. Use the “Find” function (Control + F in Windows (
), Apple + F on a Mac) to search for key words like Theme, Template, Tumblr, or WordPress to find any clues in the code.Of course not all templates are free. Some are custom built, or purchased from designers, and won’t necessarily have attributions.
Make It Your Own
Now that you’ve implemented your beautiful new blog template, it looks exactly like the 3,000 other users who have downloaded the same one.Use your blog’s back-end bells and whistles, in combination with your new HTML knowledge, to add your own brand to the design. The first thing you can do is add a simple logo or moniker in the header of your blog.
Find the box, widget, or code at the top of your blog that contains the template graphic, and replace it with your own. Be sure to keep the size and shape of the image consistent with the template to avoid layout issues. The key to making it ‘fit’ into your new design is to use complimentary colors and fonts.
Sample the color(s) from your new design and input it into Color Scheme Designer 3, a great tool that will generate complimentary and tertiary colors you can use for headers and additional graphic elements.
If you’re not a designer, simple is better. Let your new template do the talking, and keep your header image clean and basic. Looking for a great logo font to express your blog’s content? Check out 1001 Free Fonts and FontSquirrel for some great looking freebies.
For the Non-Designer: Go Minimalist
If you’re not design-minded, but in the market for a slick looking blog that you can manage aesthetically, think simple. Minimalist themes often use neutral colors, clean layouts, and lots of white space, making them ideal for easy customization.Don’t fret over color schemes and texture cohesion. Simply pop your logo into a good minimalist theme and let the white space speak for itself. Check out these examples.
Shalom*Typo (WordPress)
Need More Inspiration?
The blogosphere is jam packed with extraordinary designs — clever, functional, and just plain gorgeous. Even if you’re already set with your own new layout, it’s always fun to just kick back and enjoy the creative work of others. Here are some more designs that may get your ideas and creativity churning.Work Awesome
Have any more tips on building a more beautiful blog? Be sure to share them in the comments below.
Series supported by Web Designer Depot
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 webdesignerdepot.com. Follow on Twitter (): twitter.com/designerdepot. Subscribe to RSS feed: webdesignerdepot.com/rss.htm.