Archive for the ‘Photoshop’ Category

Twitter GUI Photoshop PSD Template

September 24th, 2012

Twitter just rolled out a new profile design that allows you to add your own header banner. However, it’s hard to tell what looks best without fidgeting with it. To make it easier on you, I’ve updated my Twitter PSD Photoshop template to the new design.

The profile images in the template utilize smart objects to make it easier to update all of the images in the template at once. The name/username’s in the tweets also utilize smart objects. Double-click to edit, then edit the contents and it will update all of the smart objects synced with it.

This template was built closely to Twitter’s current layout as of September 20th, 2012. Download the template below. Please share the PSD with others.

You should Follow @ShelbyWhite on Twitter. Enjoy!

Twitter UI Photoshop PSD (2.5 MB) | Version 1.0 Last updated on September 23th, 2012

Download File
23Comments

Unblur images in Photoshop Sneak Peak

October 11th, 2011

YouTube Preview ImageThis is impressive. I can’t even imagine the processing that gets done behind the scenes on a feature like this. This feature—though not promised in the new Photoshop spec—was demoed at the Adobe Max 2011 event hosted by Rain Wilson.

We’ve all seen hard-to-believe examples of photos being blown up and zoomed on shoes like CSI, but this would make a lot of that possible on a consumer level. I think this feature would be used quite a bit more than the previous “mind-blowing” Content-aware scaling.

Also, did you happen to see that the guys were sitting in Eames Lounge chairs?

3Comments

Twitter Background UI Photoshop PSD

August 28th, 2011

Updating your Twitter profile live is silly. Change, save, refresh. Change, save, refresh. After searching thoroughly for an alternative to editing live, it was clear that there weren’t any great solutions or intentions by anyone to create a pixel-perfect template for anyone to use. Not to mention, a template that would stay up-to-date as the website evolved.

This PSD includes grouped elements by name respective of their location in the html of Twitter.com. The profile images utilize smart objects to ease the pain of changing images. Update the image once and it will proportionally scale the images across the whole PSD.

This template was built closely to Twitter’s current layout as of August 2011. You can download this template below. Please share the PSD with others. Hope this template makes mocking up your profile a lot easier, enjoy!

Version 1.2 PSD update changes:
• Added Twitter’s new “Recent Images” section to sidebar of profile
• Updated alignments of “Similar to you” section

Version 1.1 PSD update changes:
• Profile image uses smart objects: replace once and changes all in psd (Update thanks to Scott Benish)
• Added Verified badge icon to PSD

Twitter UI Photoshop Psd (4.9 MB) | Version 1.2 Last updated on August 28th, 2011

Download File
22Comments

Facebook GUI PSD

July 26th, 2010



SurgeWorks just released this free Facebook GUI PSD. The kit was is under creative commons so it can be modified as you wish without any restrictions. I always like these kits (iPhone kit released not long ago) because you can see how other PSD’s are compiled.

The kit has everything from the site: logo, UI elements, main window with the header, menu, chat window, modal components, comment boxes, buttons, message boxes, tabs, the whole works. The components are even built using vectors and blending options, so that scaling and editing the objects will not be a problem.

Download the .zip-package (zip, 6.5 Mb)
Alternative download link (zip, 5.1 Mb)

5Comments

iPhone GUI PSD V4

June 16th, 2010


Updated: This download is for the Retina Display Version.

This version of the template has been completely redesigned from the ground up by Teehan + Lax. The template is based on iOS4 and includes all the elements you need to design proof-of-concepts or production ready assets. Previous versions of this file had issues like blurry edged buttons and incorrect “bevels”, but they have been addressed as best they can using Photoshop’s shape layers and layer styles.

As a note from the TL, if you’re modifying any of the vector elements be sure the shapes are sitting on full pixels or your assets will begin to look blurry. Also the file is still formatted for 480×320 resolution so you may have to wait if you’re designing for iPhone 4’s Retina Display feature.

Download the template here.

2Comments