The Ultimate Guide to Version Control for Designers

For most developers, version control tools are the most important tools in their toolbox. Every development project starts with choosing the right version control system. However the majority of designers are still not familiar with the concept of version control, and a very few designers actually use some versioning tools in their work.

This article will help you to understand why version control is important for designers and help you to start using it for your projects.

What is version control?

The easiest way to understand the concept of version control is to think of it as of the file history in Photoshop. PixelNovel Timeline is an example of a version control for designers. However, version control is much better than history in Photoshop: you also get a never-ending “undo”, effortless backup, peace of mind, and a more organized way of storing different versions of your work.

You can have all of these things simply by taking a few minutes to read this article to understand what version control systems are. With version control systems, file versions are stored in a special database (usually called a repository). The fact that the history of a file is stored separately from the file itself adds extra safety: even if the file becomes corrupted, you can always restore any of its other versions from the history.

One more advantage of using version control is that you can store the versions of your files on a shared resource such as a computer in your local network, or an internet-based repository. Therefore, you can edit the same file together with other designers in your team without the fear of overwriting each other’s changes–both yours and your colleague’s changes will be saved. In order to submit a new version of a file–or get an existing one from your repository–you will need to use a client application that connects to your version control system.

Whenever you feel you have done something worth saving, click the submit button (it may also be called commit, or check in in some systems) to update your repository. Now this version of the file is saved in the repository and you can always get it from there. When you get an older version of a file, the client application usually replaces the file on your computer with the version from the repository.

How can designers benefit from using version control?

There are multiple benefits of using version control, and some of the benefits make it especially attractive for designers. The most obvious benefits are: It helps you keep your files structured and tidy – you don’t need to create multiple copies of the same file and cluttering your hard drive. Hassle-free backup – all your files are securely stored in the repository along with all their versions.

Centralized and shared storage of all your assets – this feature becomes important when you are working on a project in a team environment, as everyone always knows where to get the latest version of some asset. Some benefits that are especially important for designers: The ability to easily save multiple versions of the same file – this is ideal for brainstorming. Simplified collaboration with developers – if you are working on a web project together with developers who use Subversion (SVN) or Mercurial (which are a couple of popular versioning systems that we’ll talk about later) for the source code, then you can use the same SVN/Mercurial server as they do.

This will help your team keep all project files organized in one place and securely backed up.

What version control tool is right for you?

Are you ready to give version control a go? Read on to help you decide what tool is the best for you.

Tools for designers

First, we will review the tools that were made specifically for designers, and then we will discuss generic tools suitable for both designers and developers.

Adobe Version Cue

The first tool aimed at designers is Adobe Version Cue. Adobe Version Cue is the Adobe’s version control system.

Version Cue is a part of Adobe Creative Suite family and is not sold separately, so in order to enjoy Version Cue you will need to have some edition of Creative Suite. Version Cue also dependent upon other Adobe applications from the Creative Suite package (namely Adobe Bridge and Adobe Drive), so it’s not a standalone solution. However, it’s pretty powerful and is integrated into Photoshop, InDesign and Illustrator very well as they’re all made by the same company.

Here is a very brief guide on how to start using it. First, you will need to set up a Version Cue server. The server may run on the computer where you do your design work or it can run on a dedicated machine.

You don’t need to buy another Creative Suite license for the server, as it doesn’t require activation. To create a server, you need to open the Version Cue settings in the System Preferences (Mac OS) or Control Panel (Windows). You will need to enter the name and visibility for the server (private or accessible by other users).

Now press Start and finish server configuration by providing the admin password. Once the server is started, you can connect to it using Adobe Drive: Start Adobe Drive on the computer where you will be doing your design work and you should see the newly created server on the Visible servers page. Select the server, enter your user name, password and press Connect.

Now you will need to create a project for your files. A Project is just a folder with logically related files or subfolders. For example, you can have one project for each of your clients, or for each advertising campaign.

To create a Project, open Adobe Bridge and select the Version Cue item on the Favorites tab. You should see your server in the Content panel. Double-click it and go to Tools > Version Cue > New Project…

item from the main menu. Now choose the name and description for your project and click the Share the project with others option if you want this project to be visible to others. Once the project is created, you can drag and drop a file into it, and it will be automatically become checked in; this means that the first version of this file will be saved on the server.

You will need to add a comment for the first version to give it some contextual information that can be used for reference later on. If you right-click your file in the project and open it in Adobe Photoshop, you can make some modifications to it. Select the File > Check in menu item to save the second version.

Go back to Adobe Bridge, and you will see that the file now is at Version 2. Right-click the file in Adobe Bridge and select View versions from the context menu; this will display both of your versions in the Content panel. You can right-click the first version and select Promote to Current Version to get the first version and replace the current file with it. To read more about Version Cue please visit Adobe website section on Adobe Version Cue.

PixelNovel Timeline

The second version control tool made for designers is PixelNovel Timeline.

Timeline is a Subversion client integrated into Photoshop. Though it is not a version control system as such (it’s just a front-end for Subversion), it is interesting because of the user interface. It features a unique UI that makes versioning as intuitive and as user-friendly as possible, integrating very well with Photoshop.

One more advantage of Timeline is that it comes with a hosted online repository on PixelNovel that you can use straight away, avoiding the efforts needed to set up a Subversion repository server. This makes Timeline the ideal choice for those who want to try version control for the first time and don’t want to put too much effort in setting it up. To start using Timeline with the PixelNovel online repository, you will first need to sign up for an account:

• Sign up for a free account on PixelNovel

After confirming your email address and choosing your account settings, you will be able to download and install the Timeline plug-in. After you install it, Timeline Project Assistant will be started. Timeline Project Assistant creates a mapping between the folders on your machine containing your files and the folders in the repository.

Just choose the folder on your computer that contains all the files related to one project, and provide a name for this project. Now you can open any file from the selected folder in Photoshop, and you will see an uncommitted (not yet submitted) revision in Timeline panel. Click Submit to commit the current version of the file to your repository.

The preview of the first version will be displayed in Timeline panel. Now you can edit the file and Timeline will display the uncommitted revision once again. You can press Submit once more to submit your second version, and so on.

You can view your files online if you log into your account at PixelNovel. Timeline is also available in a standalone variant that can be used with your own repository. Being a Subversion client, Timeline inherits all the pros and cons of Subversion that are covered in the next section.

To find out more about Timeline visit PixelNovel website.

Generic Version Control Systems

If you are not happy with the version control solutions oriented towards designers, you may want to consider a generic version control system suitable for any type of files. Using a generic VC system may also be a good choice if you work on a cross-functional project involving both designers and developers.

I will cover the three systems that are most popular right now: Subversion, Git and Mercurial (Hg).

Subversion (SVN)

Subversion is the most popular version control system used in many high-scale open source projects, though it has started to lose its positions to Git more recently. A Subversion server is reasonably easy to set up, and there are plenty of hosted online servers ready to use.

Some SVN hosted solutions are tuned for designers such as PixelNovel and Beanstalk. Subversion is liked for…

• being easy to understand.
• reliability.
• it’s abundance of clients that are readily available.

Subversion is disliked for…

• being slow.
• weak support of branching and merging.
• not being distributed.

More Subversion resources:

• The official Subversion project page
• Subversion for Designers – a brief introduction into Subversion

Mercurial (Hg)

Mercurial is a distributed version control system designed with speed in mind. Distributed version control system means that it may have multiple repositories branched from each other and synchronized on a regular basis. Distributed version control systems offer many benefits to teams of developers spread out across multiple locations.

Unfortunately, this feature gives little benefit to designers. The reason for this is as follows: synchronization between multiple repositories usually involves merging operations. Merging means manually choosing the best parts from two different versions of a file.

This operation can only be done on text files such as source code. However, designers usually work with binary files (such as .psd, .ai, .swf and so on), and if the same binary file is edited in two repositories, one set of modifications will be lost. Still, Mercurial is a great and fast system so it may well be used for design projects.

There are a number of hosted online Mercurial repositories such as freeHg.org and bitbucket.org that you can use to avoid setting up your own repository. There are also some great Mercurial GUI clients such as TortoiseHG for Windows and Mac OS X. More Mercurial resources:

• Mercurial – the official Mercurial project page
• Intro to Distributed Version Control (Illustrated)

Git

Git is a creation of the programming superstar, Linus Torvalds.  As with most of Linus’ creations, Git quickly became fashionable amongst programmers. It has a number of advantages compared to SVN, but it’s fairly complicated to use and is not the best tool for beginners.

If you are new to version control, I would recommend that you to start with either Subversion or Mercurial. Git also has a number of hosted online services, Github being the most popular one. Git’s strengths are…

• It’s a distributed system with strong support of branching.
• It’s faster than SVN.

More Git resources:

• Git – the official Git project page.
• Intro to Git for Web Designers – a brief introduction into Git.

More version control resources

• A Visual Guide to Version Control
• SVN vs. Mercurial vs. Git For Managing Your Home Directory – performance comparison for SVN, Git and Mercurial based on binary files.

Your thoughts?

Should all designers use version control systems? Do you have experiences in using version control? What are the negatives of using version control systems? Share your opinions in the comments.

Related Content

• 10 Excellent Feedback Tools for Web Designers
• Why Designers Should Learn How to Code
• 7 Applications to Make Working with MySQL Databases Easier