ricardocabellov5.5

One of the things you can't do when you work on a team is to adapt the new technologies as fast as you can as when you work by your own.

This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well...

Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one.

When you design the flatscreens for a standard website, you end up doing it in 2 ways:

1st way:

projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

So each .psd has the content and layout for each section.

Benefits: You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast.
Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it.

2nd way:

projectname_design.psd (with folders inside it for each section)

Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part).
Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder.


Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see:

3rd way: (the good one)

includes/projectname_header.psd
includes/projectname_footer.psd
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd

The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;)

How-to:

1. Create a new file.
2. Add a text inside it.
3. Save it as footer.psd.
4. Create another file.
5. Create a layer (I named it footer container).
6. Draw anything inside the created layer.
7. Go to Image / Variables / Define...
8. On the layer selector, select the layer that you created.
9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is".
10. Click on next (Data sets), and then click on that little disk with an arrow pointing down.
11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button.
12. Select the file footer.psd
13. Click on Apply and then OK

At this point you should be seeing whatever content you had on that external file replacing the layer you created.

Clean, fast, and without duplications.