Designing Custom iOS App Interface Elements using Photoshop

by Jake Rocheleau
on September 15, 2014

in Tutorials

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.

dark photoshop ios buttons and select menu preview

Read More

40 Examples of White Portfolio Web Designs for Inspiration

by Jake Rocheleau
on September 8, 2014

in Web Design

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.

Vadim Sherbakov

personal white portfolio made by vadim sherbakov

Read More

Pixel-Perfect Design using Photoshop on a Retina Display

by Jake Rocheleau
on September 2, 2014

in Photoshop

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.

Read More

How To Design Hover Effects for UI Elements in Photoshop

by Jake Rocheleau
on August 25, 2014

in Tutorials

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.

photoshop layer comps button nav menu screenshot

Read More
Page 1 of 4312345...Last »