25 Sketch Freebies for Web & Graphic Designers

Anyone who’s been keeping up with design news should know about Sketch. It’s a tightly-focused piece of software with an emphasis on UI design. The program is developed for OS X by Bohemian Coding with a palette of tools that mirror Photoshop and Illustrator. Although the program is meant for interfaces you can build anything including icons and simple graphics.

This gallery includes 25 freebies released for Sketch. Although not everyone is using Sketch, many designers are jumping onto the bandwagon because it’s cheaper and easier than Adobe products. These freebies provide a deeper look at the design process and offer some great tools for newbies just getting into the software.

AirDrop Icon

airdop icon sketch freebie

How To Design Hover Effects for UI Elements in Photoshop

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

Getting Started with Graphics Design for the Web

Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.

macbook imac desk designer photo

If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.

Tips for Building Clean Website PSD Mockups in Photoshop

If you’re a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it’s quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It’s crucial that you learn how to organize these assets into a complete, unified design.

adobe photoshop blue icon app redesign

In this article I’d like to cover methods of organizing PSD files in Photoshop. Whether you’re a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.

30 Webpage Layout Designs for Popular TV Shows

Television shows are often given their own webpage hosted on the TV network. FOX, Comedy Central, and HBO are just a few examples which support their own programming. These TV shows are also given a custom layout design featuring official artwork and character promo shots.

In this gallery I’ve put together 30 inspirational webpage layout designs for TV shows. You may recognize many of these popular titles from western media. But the design sense is also fairly critical when comparing the success or failure of any TV personality. You can learn great design techniques from showcases of unusual websites. If you like this collection and want to share ideas you can post a comment in the discussion area below.

Workaholics

Designing a Custom iPhone App Navigation Bar

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices.

It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place.

Featured image - custom iPhone app navigation bar

Download Source Code

28 Fresh E-mail Newsletter Designs for Graphic Inspiration

Webmasters are often wise to consider running a small e-mail newsletter. There are tons of free systems such as MailChimp which automatically collect subscribers and send out messages for you. But one aspect which does require some work is the design and layout.

Most e-mail messages are written in basic HTML code. Campaign Monitor is a great website which collects tips and tricks for building outstanding newsletters. Below I have collected 28 totally fresh e-mail designs for some great inspiration. If you know of similar layouts please let us know in the discussion area below.

VTalk