Are you designing a custom logo? That sounds amazing, doesn’t it? And Way too easy! Indeed? Is it that easy? Thinking that designing a custom logo is an easy process. That is a delusion. A logo design is not just some fonts, colors, some fancy lines and symbols, put together. A logo is a brand’s […]
To create a logo or other design material, professional logo designers follow a proper design process. A well-thought-out and systematic design process minimizes the chances of errors, resulting in an impactful and professional logo. However, if you don’t follow a design process, then you might face serious problems, which may undermine the credibility of your […]
With such an abundance of free Photoshop tutorials online many UI designers tend to ignore the benefits of Adobe Illustrator. Vector workflow is one of the best methods for creating full-scale website mockups, icons, mobile apps, and really anything related to interface design.
Each of the following tutorials focuses directly on interface design from the perspective of vector shapes. With practice and repetition you’ll be able to master Adobe Illustrator and outperform yourself in just a few months’ time. Check out these examples and see which ones catch your attention. Remember that progress occurs over time so you’ll always want to push yourself into new areas whenever possible.
Building website mockups in Photoshop is a lot like using Q-tips to clean your ears. Not exactly the original purpose but it works great! However unlike the household cotton swab, Photoshop is a large graphics editing program that takes hours of practice to learn even rudimentary tasks. For web designers this process can feel like a hopeless pipe dream.
But one of the quickest ways to start learning Photoshop is by creating your own simple mockups with existing PSD elements. You’ll find yourself editing shapes and colors to fit into a layout while organizing the composition from your imagination. In this post I’d like to share ideas for using free PSD files in Photoshop to get familiar with creating website mockups.
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.
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.