Designed to make it easy to test your avatar & header image designs across multiple sizes. Just modify the shared .psb files and see updates applied across all files/sizes.
License: These files have been produced with the intention of helping fellow designers. We therefore request you do not repost them as your own downloadable resources, do not host the files in any other location, or attempt to sell these assets for personal gain. Share the love and spread the word.
Desktop, Tablet and Mobile Photoshop files
The Twitter.com UI is responsive and so the exact proportions of the interface at different screen widths varies greatly. So we have selected 3 common widths covering desktop, tablet and mobile. The twitter profile image file dimensions are 500 x 500 px, which get resized into various smaller sizes for application throughout the UI. This higher resolution must allow for retina versions to be used in apps and is only seen by the user directly when they click on your profile image form your piffle page. The files have been well organised and labelled to help you when modifying it for you needs. These PSDs have been made using the most recent versions of Adobe Photoshop CC, if you have an older some features of the file may not work as expected. The UI in all GUI PSDs have been remade from scratch using vector shapes, allowing the entire file to be scaled to any resolution. Wherever possible we have used shared .psb assets that can be replaced in one location and propagate everywhere across the separate files for each size; change once, applied everywhere. The only thing Photoshop cannot do is change the theme colour globally. If you wish to simulate this in the mockups, you’ll have to of through and change the colour value manually.
We try to keep these files as up to date as possible. We’ll always endeavour to update them quickly if changes affect the assets you need to create in order populate a profile. Sketch GUI PSDs coming soon…
This new page is a slightly more dynamic that previous twitter profiles. The size of the cover This new page is a slightly more dynamic that previous twitter profiles. The size of the cover image is responsive flexing with the browser width, so we picked a width that represents the header photo asset at 100%. Any images you create and export will be at the required size for uploading. The size represented in the Twitter GUI PSD shows how the image will appear at 1500px wide, which in a browser will crop the top & bottom. Strangely twitter only show the full image height when it is scaled beyond 100% width, the source asset you are looking to upload will be 1500x500px – the size we have created the smart object in the PSD.
Download Twitter GUI PSD
At this narrower width the header photo shrinks considerable and the avatar image covers much more of the bottom-left corner – so take this into consideration when designing your twitter profile header photo. The right column also wraps to under the left, but this should not effect the assets you need to create. Twitter’s responsive desktop site only scale as far down as 950px (dispite the header navigator continuing to adapt its form below this width). Accessing twitter.com in a browser on a mobile device invokes a separate mobile website. The assets you create will look quite different here, but we would recommend designing you header photo to best suit the desktop and mobile widths, as these are by far the most common use cases and we fully expect twitter to replace the mobile web version of it’s service later this year – it’s clearly a low priority to them.
Download Twitter GUI PSD
The most common use of twitter on mobile is via the native apps. The same assets are still used on every platform, but past desktop this is the second most common view of the assets you create, so we suggest making them scale down well to this size. This is where the header photo becomes a little problematic when trying to display finer details as it been made so small, and UI has also been overlaid. We therefore recommend not adding small text into your header photo (avoid using text altogether unless large & short) as it it will likely be illegible at this size.
This is what these files are for – testing your designs an ensuring they work across all sizes.