Twitter’s new XL profile page layout

Like it or not, the new Twitter layout is here.  Historically, social media overhauls are not well-received — ex: the infamous rollout of Facebook’s news feed. Twitter users have expressed a wide range of reactions to the new look, from excitement to pure hatred. Inevitably, we must all adapt and embrace (or simply endure) the changes.

Emotions aside, and for the sake of professional diplomacy, this post will only quickly focus on a few key points.

Key Updates:

  1. Larger profile images (400 x 400 pixels)*
  2. Larger header images (1500 x 500 pixels)*
  3. Best tweets (basically the more popular the larger the font size)
  4. Pinned tweet (pin a favorite tweet to the top of your profile page)
  5. Tweet filters (view tweets only, tweets and replies, or tweets with photos and/or videos)
  6. Grid view (for your followers, who you’re following and photos/videos)

twitter-layout-guide

Image tips (trial and error; repeat):

The profile photo will remain static at 400 x 400 pixels, while the header graphic will scale and zoom in response to the width of the browser window.

Twitter Profile Photo:

  1. You may need to set up a bleed (15 to 20 pixels of padding), because the image appears in a thickly-bordered container with rounded corners.
  2. Remember, the image size will be reduced to 75 x 75 pixels and 50 x 50 pixels (and possibly even smaller in some cases), so be sure to check for quality and legibility at all these sizes until you find the right balance.

Twitter Profile Header (can be tricky):

  1. Twitter recommends 1500 x 5oo pixels, but depending on what content appears in your header you’ll need to keep adjusting the image to fit various widths.
  2. A top and bottom padding of about 20 to 30 pixels is recommended for any important content because the top and sub navigation of the page will slightly cover up your header image.

Remember to check everything out on mobile devices (particularly smartphones) because the width and height on these devices will crop your image in various ways.

We can help:

If all of this is way over your head, contact us and we’ll set your branding up right, not only on Twitter, but across all of the social media platforms you use.

*These are the recommended pixel dimensions at the time of this writing.

“Stock farming” Google images for designers

Google images is powerful, really powerful. It can also be extremely helpful to the concept design process.

Quick tip: We call it “stock farming“.

  1. Download all the stock image comps you need for your next project via iStockphoto, Masterfile or any of the various stock vendor sites
  2. Go to Google images
  3. Drag and drop each of your stock files into the Google images search bar (below) and wait for the results

google-images

Several things can happen at this point:

    1. Google finds the exact file with the watermark
    2. Google finds the exact image without the watermark at higher or lower qualities than you need
    3. Google finds nothing because the image is too faint, abstract or unpopular

The examples below show the original watermarked image on the left and the farmed Google images on the right.  In the “builder” example, multiple images were found, all larger.  In other cases, like the middle example of “board members”, the search resulted in a smaller image.  Finally, in the “sunrise” example, multiple sizes were found including 1024 x 768, 1600 x 1200 and 2560 x 1600.

stock-farming

Stock farming is especially helpful if only a portion of the image is needed because the larger, non-watermarked version will be easier to extract from than the stock comp. This process is also beneficial while working under a shortened deadline, as all designers know well, it can be difficult and time consuming to remove or work around a watermark in order to produce a high quality concept.

Google images is sometimes even better at finding visually similar images than the stock photography site hosting the original image.

So you farmed all the non-watermarked images you need, now what?  Did you outsmart the system?  NO!

YOU MUST PURCHASE THE IMAGE LICENSE if it makes it into the final design.  *This would be a good time to mention that Peacetime Propaganda has purchased the rights to use each of the images in this demonstration.

Stock farming gives designers the ability to deliver a better quality concept without having to purchase potential design elements before they are approved by the client.  Many times as designers we feel very strongly about a particular concept but presenting low quality imagery to the client may not result in the same level of enthusiasm.

Watermarks are completely necessary, and as designers we must understand copyright protection.  Be ethical; always support each other’s crafts; it’s never okay to steal someone’s work.  If your moral compass is a little disoriented in this area, imagine yourself being sued as the grim alternative.

Post-it® Tool Tips for Adobe Tools

Post-it notes are extremely helpful around the home and office and very versatile.  One of our favorite uses is creating fly-out cheat sheets for various Adobe interfaces in order to help commit the hotkeys/commands to memory.  This method is better than having a separate sheet to refer to; by aligning the Post-it with the toolbar your eye is focusing on the tool and the associated letter simultaneously.  This method can be applied to virtually any tool/toolbar/hotkey/command-heavy program out there.

Simple Post-It hotkey cheat sheet for Adobe Photoshop   Simple Post-It hotkey cheat sheet for Adobe Photoshop CS6

If you have an iMac then you have a virtual Post-it docking station under your display.  In addition to the obvious, here are 8 more really great Post-it uses for designers:

  1. Custom Photoshop action commands you’ve created
  2. Current project fonts and their settings
  3. Useful Photoshop adjustment layer and smart filter parameter settings
  4. Current project color values (RGB, CMYK, hexadecimal)
  5. Current project CSS classes and descriptions
  6. Important recurring pixel height/width dimensions for web design
  7. Short CSS, HTML or Java code snippets you wish to commit to memory
  8. Username/password cheat sheet for frequented sites and FTP servers

Always try to get the longest life from your Post-its and reuse them when you can. When the stickiness starts to fade, use it to clean the little cracks in your keyboard or as coaster for your coffee cup before recycling it for good.