Tutorial Details
- Technology: Photoshop
- Difficulty: Beginner
- Estimated Time: 20 Minutes
Repetitive tasks can quickly become tedious. As a designer, you probably often find yourself designing the same elements over and over from scratch. STOP!
Wasting time is so old-fashioned. It also means you’re wasting money! So, let’s review some ways that you can automate and systematize your Photoshop workflow. And be sure to download the project base for all of your new designs!
File Tree & Re-usable Project Base
The first step in systematizing your workflow is to organize your files. Identify all common elements you use within your designs.
You may come to a list such as the following:
- Home Page template
- About Page
- Contact Page
- Services Page
- Fonts
- Assets
The Project Base
Consider how your final deliverables are used. If they are shipped to a coding business, be as organized and thorough as possible, including notes and fonts where applicable.
You can ensure that you have perfectly organized themes by creating a package that allows you to “fill in the blanks”, so to speak. Simply copy this folder, assign it to the project by renaming it to the project and get working. This is a very simple and efficient way to work, and means that websites you built four years ago can easily be edited, because everything is packed into its very own place.
In the zip file, you’ll find a simple re-useable template starting point. This file contains elements such as dividers, buttons and a pre-gridded template to speed up your design workflow.
See how simple starting a new project is now? It may take a couple of minutes to set-up, but the time saved later is more time for you to be doing what you love best – designing!
Now that we have a solid base to build upon, we can starting filling out our ‘boiler-plater’ with specific files and concepts.
Web Template
The sample template will allow you to create a page of your most used elements, ready for quick inclusion in your latest project.
If you’re a web designer in particular, you’ll find that a lot of your projects, even those different in every possible way – use and re-use common elements.
Begin by building a few re-usable templates. Don’t worry about which elements you wish to include just yet, because you can always go back and look at your previous projects and analyze more popular features – then re-create them here.
Personally, I use just one template. I have a home page (this contains elements such as news bulletins, blog post stylings, menus, logos and call to actions). I can modify this template to suit blog pages, buy it now forms and more.
The page also has a 960.gs pre-applied. This has been included for download at the end of the article, in the template boilerplate.
Once you’re set-up with this concept, you can build designs very quickly. However, you should definitely consider developing your own, and tailor it to your clients and team. You could go further by adding icons, search elements and online store related items – anything to suit your client base.
Grouping & Organizing
The above image demonstrates the tangible difference between an organized layer palette, and a messy one!
When you’re in a real creative flow, it can be difficult to stop and start naming and grouping layers. Photoshop doesn’t really help in this area by default either!
So, take the time as you go to name and group layers. This will help you later when coding the design, or if you ship if off for coding elsewhere.
Name each layer, and try to use a descriptive and short word – such as ‘menu’ for the navigation. Group specific areas, such as the header or a contact form.
This has a two-fold benefit.
- You can toggle whole areas (or the whole design) on or off in order to work on the background or other elements.
- You can move sections of a design without the need for moving each element. This can save hours per project!
So, take the time to stop every five minutes or so, and name and group each element. You’ll be glad you did!
Make good use of the select tool! You can toggle the select mode between layers and groups. This facilitates mass updating and re-aligning designs, so don’t forget it!
Actions
If you don’t use actions in your work-flow, then you should begin using them immediately.
Photoshop actions are entirely configurable lists of actions Photoshop should carry out automatically. You can create your own, or choose from the bounty available online. If you work on Photographs for example, and have 400 pictures to edit and resize, this would take a long time. Instead, you can create an action that adjusts the contrast, alters the size and then saves the file in .jpg format, blasting through 400 files in seconds! You must use actions!
If you do not have the knowledge, or experience to create your own actions, GraphicRiver has a large selection of actions available for purchase from $1!
The actions on sale range from simple photo effects to this action which can add various pre-formatted text sections such as contact details or blog posts in seconds.
Start using Actions and you will notice a significant increase in your productivity and reduce the amount of times you need to repeat monotonous tasks over and over.
Creating and Using an Action
Making your own action is easy. As an example, we’ll create a simple action to re-size several images at once, then save them.
First off, you need to hit the new action button, on the actions palette.
You shouldn’t need to change any settings as standard, bar changing the name for better organization. Photoshop is now recording your actions. So, all you need to do is re-size the image. Go to image size, and alter the dimensions. The action will change any image to these dimensions. Then hit save.
Finally, press stop on the action palette.
Now, when you press play on the action you’ve created, Photoshop will follow the list of defined actions on your image. Although very simple, an action such as this one could save you hours of monotonous resizing photos and images. This is only a very simple look at actions. They can do so much more, so take your time to get to know them and really use them. The beauty of them is in how you can record basically any action in Photoshop – selecting, changing styles, transforming, re-sizing and saving.
iPhone & UI Design
Do you work with user interfaces? If so, you really need to download a GUI element pack for Photoshop.
There are many available for most popular operating systems and mobile platforms.
For example, if you work with the iPhone, you can download the iPhone GUI pack that contains all elements available in the iPhone interface library, and then simply start designing your app. Simple, quick and much easier than attempting to create these from scratch.
Android GUI Kit
http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/
Teehan Lax Kits
The agency, Teehan Lax have several high quality, life-like UI kits. These are great for building an iphone app sales site, or designing the actual UI of an app. Kits are available for the iPhone, Palm Pre and Browsers.
Palm Pre
http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/
iPhone
http://www.teehanlax.com/blog/2008/11/06/iphone-gui-psd-update-13/
Browser Elements
http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/
Conclusion
I hope we’ve given you some tips that you can use to improve your productivity and efficiency. Photoshop is a wonderful tool, but, if we’re not careful, we can find ourselves repeating the sames tasks over and over. So be sure to implement the above tips and start saving time, money and your sanity!
Download the Project Base
Do you have any Photoshop time-saving tips? Have any ideas on other tasks that could be automated to save time and repetition? Feel free to share them with the community via the comments.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very nice article.
The iPhone thing is amazing
The cell phone templates are really nice. I had to make a video for a class I was taking that required me to pitch an idea for a cell phone app. I made a mockup of the app using the iPhone template from teehan+lax. It turned out pretty well… kinda looked like the iPhone or Palm Pre commercials.
Cool, I really like this tut. Awesome design!
Thanks for the tips! I highly recommend following a common folder structure, especially if you work with a team. I used to be real cantankerous about following a rigid folder structure, but when you get used to it, then start hopping back and forth between your projects and others, knowing exactly where to locate the necessary files itself can save some real headaches (especially since humans are *very* creative with our ability to name and structure folders in totally goofy ways!).
Completely agree with you here. I’ve found that simply following a set folder structure is probably the most time-saving practice one can get in to.
Nice tips, luckily, I follow 99% of them.
If people are intersted in Photoshop’s Actions, you should definitely look at Droplets too: http://www.designioustimes.com/tutorials/how-create-droplet.html
Excellent article! Just what I was after…I’m planning to work on a few big projects soon so will need some of these resources. Will start creating more PS Actions from now on…Thanks!
I really like this post :) . It’s gonna save a lot of times when you design :)
nXqd
Thanks for tips. This will save my time. Download!
Thank you for your tutorial, I use Fireworks actions I created on many occasions.
Nice tuts thanks.
Awesome! More like this please!
So is Tuts+ free now?
I don’t understand.
the paid site is now called “premium”
It is a really good idea and I recommend it, creating a default folder used to organize your projects data. This is what I do on a day to day basis and it really does save mad time!
Interesting that this is mostly photoshop on a web development blog – seriously, because I need help with these sorts of things!!!
I sort of use a similar approach but not through being clever, more that I am lazy and copy and paste “whatever I did last time”
Good tut.
Huh a photoshop tut on nettuts?
Having a pretty solid work flow when designing websites is so helpful! This was a good read, as I’m always willing to learn new ways to better myself as a designer. While on the topic of workflows, it would be awesome if someone created a tutorial over at photo.tutsplus on creating a workflow with Bridge, Lightbox or Aperature and Photoshop.
:)
Hi,nice tips :)
but,this is not related to this thread…i have one thing that bothers me soo much and that is,why dont we have shy layers like we do in after effects?
that one little thing would make my life much easier in photoshop…i dont believe that people in adobe didnt see this before me,but the question is,why isn’t that implemented?
is it too hard to integrate or they are just lazy or something third?
Great advice. Over the past year I’ve slowly been building up a number of folders, photoshop templates, code snippets, questionnaires and email templates. I can’t count the number of hours I’ve saved.
One thing I am not too experienced with is Photoshop Actions, though I do have a bunch lying around. This reminded me to try them out. Thanks!
Nice refresher, this “Web Template” with some gray elements are more suitable for Fireworks or your wireframing app though.
Advices from me:
- Use Ctrl+Shift+N to name the layer when you create it – then you don’t need to name them later.
- When creating a new group, hold Alt to name it instantly – then you don’t need to name them later.
- If you already have a wireframe (and even if you don’t), look at it for a minute and then pre-create you groups – saves a lot of time and even reminds you what to do next. You can also create some basic layers.
- When you need some layer to have the same styling as another one (for example you need two layers with the same border and shadow settings but you can’t duplicate them because the have different content), use right click on the layer -> Copy layer style, then Paste layer style on the desired layer.
- Try to develop for yourself a good naming convention – for example when creating a website you have to create a basic layer for a button – name it “Base” and do this forever. When you make a new website, name the same type of layer “Base”, do NOT name it “Background”, “Bg” or “Main”. It helps your orientation and navigation – respectively your workflow.
- Download a cheatsheet about Photoshop shortcuts and go through it for a while – for example this one or these.
Loving the Photoshop Actions. Had never used them before. Thanks.
nice tips and thanks for the kit..!
slick compilation!
There are many tools in Photoshop that can improve your efficiency and workflow, and utilising these such as shown here will make a difference to your project time. I think of all the examples the grid system will be the most useful as this not only sorts out your template elements but helps you to create an even layout that keeps everything even and inline.
Photoshop actions are also extremely useful, allowing you to automatically undertake large repetitive tasks with ease. These combined with a modern computer will allow you to save substantial time and effort.
I’ll be interested to read more suggestions from readers on how to improve efficiency and workflow. I imagine there are many more approaches to saving time and being better organised.
Great writeup. I’m a big fan of the 960 grid.
As a finishing touch I often apply an extra browser layer to the design. That way the design is presented to the customer in a better context.
http://tinyurl.com/yacthuw
I prefer illustrator…
Very nice tips :)
Great recommendation on how to get organized and more productive with PS.
Deliverables? lol wut?
on minute spent on organizing, saves hours on execution
cool tips :)
Cool article. Especially your download is very helpful!
Great article. Especially good to see someone else endorsing a neat, tidy, and structured Layer palette. Like others, with their crappy iPhones, the Android template got me a little inspired but it’s only based on 1.5 which is very old in the Android world. I never thought to think of thinking there’d be PSDs of the Android interfaces, so I will have to go look for some more later.
Cool. The project base was a good tip, but I think in html and css files. Maybe show the project base folders thinking in this kind of file was more complete.
Thanks!
@bluebirdesign
cool tutorial
Tut not showing? I see no images and the zip file dont exsist on the server
This is the wonderful thing i spend long time to find it.
Good article. It is worth to take into consideration to spend time on preparing the universal file for every project.
Thanks for the psd file.
nice bt problem iz that no idea abt project base templete how to save time at the designing time
Thanks for Sharing.
Thanks for tips. its so nice