Free iPhone GUI PSD kits include a lot of the primary elements needed for app design. But sometimes it’s necessary to build your own custom interface elements. I always preferred the older iOS 5-6 UI above the more flat-looking iOS7. Specifically I fell in love with this Microsoft Word app for iPhone created by the very talented Victor Erixon.
In this tutorial I want to demonstrate how to recreate a couple of these same MS Word interface elements from scratch. Building with shapes and paths will allow for an easier process of scaling the graphics to larger sizes. You don’t even need to know a whole lot about Photoshop to follow along with this tutorial. Plus you can download a copy of my PSD file to check out the final result.
Clean minimalist portfolios have been popular for years. Since the goal is to get people focused on your work, minimalism can remove distractions and keep attention where it belongs. Granted more aesthetic features can prove you to be a more competent designer – but they need to be elegant and complementary to the layout.
I’ve put together a series of white-colored portfolio websites ranging in theme from minimalist to fanciful. You can find dozens of examples in this post which elucidate the critical features of a great portfolio. Some examples are personal websites for a single designer while others are made for companies and creative studios. Overall you’re bound to find a few designs which catch your eye and provide some inspiration for future website projects.
I recently purchased a MacBook Pro with the infamous retina screen display. Everything does look beautiful and there is a noticeable difference in comparison to non-retina icons. However I noticed a problem using Photoshop that others in the web design field have also likely noticed.
Every new document is shown at half-size while the document view claims to be 100%.
Anyone running CS5 or below should not find this to be much of a problem. But CS6 and CC have been updated to include retina-based icons and interfaces. This creates a pixel-dense display in Photoshop(and other Adobe programs) where new documents appear twice as small instead of “regular size”. Another way to put this is @1x images will appear tiny because retina Photoshop only uses @2x documents.
Designing in Adobe Photoshop is a different experience compared to building websites right in the browser. It requires an understanding of the various tools, effects, and positioning techniques. One major difference is how you would create interactions such as hover and click events.
In this tutorial I want to demonstrate how you might go about designing interactive states with Photoshop Layer Comps. These behave like document states where you can rearrange elements and save a snapshot of each particular style. I’ve also released my PSD file for free which you can download and modify for your own needs.
Page 1 of 4312345...»Last »