Social Media Dimensions Cheatsheet PSD

Social Media Dimensions Cheatsheet PSD

There are no shortage of tutorials and services that allow you to customise your social profiles but i still find myself double checking dimensions all the time and manually creating images in photoshop. I decided to semi-automate that approach though and i’ll share my new workflow…

The Problem

Rarely do you design for a specific social network at a given time… most design work is done across the board as part of a general brand overhaul or specific campaign… most brands don’t chop and change profile designs regularly on a whim for several reasons but mainly because they want visual consistency & quality across their entire social presence. That’s difficult to achieve if you’re changing designs on a regular basis…

dimensions

A big problem on Facebook for designers is also Facebook’s image optimisation… your pixel perfect design that looks fine in photoshop, will look frustratingly pixelated once it makes it way on to a Facebook page. It’s particularly noticeable with text-heavy images. No matter what image you upload, there’ll be a certain amount of compression, but uploading images in recommend dimensions will give you the best shot of having things turn out ok.

Google+ crop your profile photo in to a circle and with twitter, background sizes can cause some headaches, particularly if you want to display text or readable information there. So if you’re a designer tasked with implementing change across a company’s entire social presence, you need to be aware of all these nuances. A quick Google search will pull up all the info you need but i usually find myself doing the same things over and over and thinking to myself “i really should automate this or create some template for me to work with”…

The Solution

That’s exactly what i decided to do… create my own cheatsheet to save myself time. I created a large psd file with lots of well organised groups and layers along with pixel perfect slices. You can access it on github: https://github.com/seanmacentee/Social-Media-Dimensions-Cheatsheet¬†

If you don’t know your way around photoshop, then this file probably won’t mean much to you but if you’re familiar with slicing and clipping masks, then hopefully you’ll see the value in it..

cheat-sheet

Once you open it up, you’ll see 11 images of varying size specifically created for Facebook, Twitter, Google+, Youtube & LinkedIn.

all user slices

If you ‘save for web’ without editing anything, then click on ‘save’ and change the ‘slices’ setting to ‘All User Slices’, the following folder will be saved, containing all 11 images, named appropriately and at perfect dimensions.

images folder

So the idea here is that you can just drop photos in, pull them around and you don’t have to worry about cropping, naming files, creating new files etc… it’s all automated. It’s quite a large file (93mb) so i’ve zipped it down to under 70mb and thrown it up on github:¬†https://github.com/seanmacentee/Social-Media-Dimensions-Cheatsheet

 

Leave a Reply