Using PSD Freebies to Create Fast & Efficient Website Mockups
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.
Deconstructing UI Elements
Firstly I’d recommend downloading a few PSDs or UI kits that catch your interest. There are lots of great websites like 365psd or Freebiesbug you can browse. Then by digging through these PSD files you can learn how a designer created each individual element.
During this reverse engineering process you’ll learn a lot about Photoshop for web design. Look over many different files to get a broad sense of how certain elements are created. Since there is often more than one way to perform a task you should learn which way is the quickest method.
Aside from analyzing the design process you’ll also grow familiar with the many diverse palette windows. Layers and layer effects are huge in web design. It is worth internalizing these different effects and how they change or mold a shape layer.
Icons & Interfaces
Website interface elements and icons are two of the most difficult items to create from scratch. Most of the great UI kits available online should include one(if not both) of these items. There are even some tutorials which expound the creation process in detail.
Generally the most common interface elements are buttons, input fields, nav menus, or image/content rotators. Icons are useful in almost every piece from the navigation to the actual page content. It just requires a little ingenuity to find exactly what you’re looking for.
Plenty of free websites like Iconfinder list free open source iconsets for use in design projects. Many of the icons are released as full sets with other icons designed in a similar style. Sometimes these icons can be great for new websites that need a little extra kick – but even just practicing mockup design with related icons can be fun and educational.
When looking for PSDs try to stay project-oriented. Think specifically about what you need and why you need it. Plus since you’re working with PSDs the elements should be amenable to whatever the situation. This means you can often change drop shadows, colors, text, and even the shape of elements as needed.
Reusing Common Effects
Aside from just copying shape layers I’d also recommend you learn to copy layer effects as well. Each PSD freebie will likely have a few layers with different effects denoted by the tiny “fx” symbol on the side of the layers palette. Clicking the drop-down arrow will expand a full list of effects that you can edit.
To copy a layer effect simply alt+click and hold on the tiny “fx” symbol over to the right-hand side, then drag to another layer and release. You’ll know if the effect is being copied because when dragging you’ll see the same “fx” symbol following your mouse cursor. This is a quick and efficient technique to apply pre-rendered effects onto your own page elements.
This is also a handy trick to use when learning how to craft your own layer effects. Nobody is just born with an innate understanding of Photoshop or the plentiful cornucopia of layer effects. Most of the learning process is achieved through trial and error. But obviously you can expedite the process by copying what others have done and learning from professionals.
Recently I put together a brief tutorial explaining how to design iOS buttons from shape layers. This covers some of the more basic effects you might find in any typical freebie. But starting with the basics is always a good first step!
Overall just keep yourself from getting discouraged at the massive library of possibilities. Adobe software is quite intimidating because of the blatantly large opportunity for mistake. But the only way to improve is to keep practicing and learning from these mistakes. Thankfully PSD freebies can help get the ball rolling in a positive direction.
Keep a Collection
One of the simplest actions you can take is to start saving PSDs locally on your computer. Make an organized collection of your favorite freebies split into folders based on their purpose(forms, buttons, UI kits, full templates, etc.). This folder will be useful if any links go offline and you don’t have access to download a particular freebie anymore.
Along with these tips I also want to share a collection of PSD freebies which should help anyone trying to improve their design skills. Each of the examples below are free to download and use on any number of projects. Start small but think big – over time you’ll realize how certain page elements fit into the overall layout.