Photoshop Variables - How To Import External PSD Smartly - On Extra Pixel - Web Design & Development Online Magazine

5/24/12
Photoshop Variables: How to Import External PSD Smartly? | Onextrapixel - Web Design & Developm
Advertise with us (http://buysellads.com/buy/detail/15363/)
Photoshop Variables: How to Import External PSD Smartly

(http://w w w .onextrapixel.com /2010/01/27/photoshop-variables-how -to-im port-external-psd-sm artly/)
January 27th, 2010 by Yaron Schoen (http://w w w .onextrapixel.com/author/yaron-schoen/) | Tutorials (http://w w w .onextrapixel.com/category/tutorials/) | 25 Comments (http://w w w .onextrapixel.com/2010/01/27/photoshop-variables-how -to-importexternal-psd-smartly/#comments)
When working on large projects, with many mock-ups and style-sheets, even the smallest change on a re-occurring component can take quite some time. Going through the many mock-ups and adjusting a color or font on that re-occurring component can be a grueling task. If you have an intern that does those things for you, you are in luck, but what about us freelancers?
Do we just sit there and endure the pain? Well, not anymore! A while back, I discovered a system that enables designers to say goodbye to opening 23 PSD files just to change the header color. Instead, we can work smart, like our counter parts the developers, and import external files with something called - Variables. This allows us to put the re-occurring component into one external file and simply import that file into all of our mock-ups. When a change is required, we can just change it in one place.
What is a Photoshop Variable?

Here is Adobes technical explanation for a variable. A variable is basically used to define which elements in a template change. There are three ways to define a variable. 1. Visibility Variables - Shows or hides the content of a layer. 2. Pixel Replacement - Variables that replace the pixels in the layer with pixels from another image file. 3. Text Replacement - Variables that replace a string of text in a type layer. You can read more about variables here: Photoshop Define Variables
(http://help.adobe.com/en_US/Photoshop/11.0/WSfd1234e1c4b69f30ea53e41001031ab64-7414a.html)
For our needs, we are going to focus solely on Pixel Replacement, since what we want to do is import an external stylewww.onextrapixel.com/2010/01/27/photoshop-variables-how-to-import-external-psd-smartly/ 1/16
5/24/12
sheet into our PSD.
Lets Get Started

Step 1 - Setting up your files
In this step we need to decide which component in our homepage deserves a variable. In most cases, it is better off creating a variable for a component that re-appears in many different mock-ups. These components can be headers, footers, various sidebar widgets, and anything that re-occurs in the project. In our example, we will use the global header.
There are usually many different states to a component (for example, most common is logged in / logged out). This being the case, style-sheets are created for the component, illustrating the states. Ideally, we want to import the component s style-sheet and make it fit seamlessly into the mock-up. This will provide us with one file acting both as a style-sheet, and as an embedded file that will be imported into all the mocks the component appears in.
www.onextrapixel.com/2010/01/27/photoshop-variables-how-to-import-external-psd-smartly/
2/16
5/24/12
I have created a fake style-sheet for the global header called 'Component_GlobalHeader.psd'. To continue on with the rest of the steps, please Download (http://w w w .onextrapixel.com/dow nload/photoshop-variables.zip) it.
Step 2 Setting up grounds

Lets open our homepage mock-up and create a new layer. We will give it the same name as the style-sheet's file name, in our case 'Component_GlobalHeader.psd'. Lets call this new layer 'Component_GlobalHeader'. This is the layer we will be importing the external file to.
Step 3 Creating the variable

Now its time to create the variable. We do this by going to image > variables > define. A popup will appear and we are going to edit some of the parameters. First of all, always double check that the layer is indeed the correct one (the one we just created). You can check that in the Layer field. If it is the incorrect layer, it may cause a bit of a mess later on.
3/16
5/24/12
Since we are focusing on importing, we will go straight to the 'Pixel Replacement' option. In the 'Name' field, enter the same name as the layer and external style-sheet. It is healthy to keep every name the same as this will help with organization in the future.
4/16
5/24/12
Next, we are going to focus on Method. We are going to choose a method for scaling the replacement image/file. There are a few options here: 1. Fit - scales the image so that it fits in the bounding box (which may leave parts of the bounding box empty). 2. Fill - scales the image so that it fills the bounding box entirely (which may cause the image to extend beyond the bounding box). 3. As Is - applies no scaling to the image. 4. Conform - scales the image disproportionally so that it fits in the bounding box. What we want is 'As Is' since we do not want to manipulate our external style sheet.
5/16
5/24/12
The 'Alignment' can be left as the default middle, but this is a personal preference as well as a component consideration. I have aligned top-left in the past as well. It really depends on you. Lets leave 'Clip to Bounding Box' unchecked. Click Next.
Step 4 The actual importing

In order to import the file, we need to either choose or create a new 'Data Set'. Data sets are collections of variables and associated data. You define a data set for each version of the graphic you want to generate. So if you have many different sidebar widgets in your mock-up, all generated from the same external file, you would only need one data set called 'sidebar_widgets'. Since we dont have any previously created data sets, lets start by creating a new one. To do this, click on the small disk/arrow icon on the left of the trash icon. Now that we have created a new data set, lets give it a name. Yep, you guessed it. Lets give it the same name as the variable, layer, and external style-sheet file. As Ive said before, they should all be the same name.
6/16
5/24/12
7/16
5/24/12
Now thats done, we can upload the external file. Click on the 'select file' button in the 'Value' section, and choose 'Component_GlobalHeader.psd'. Notice that if you have 'Preview' checked (on the right, under the apply button), you will see the new style sheet appear on your homepage mock-up. Super important: always remember to click 'apply' before clicking on 'OK'. If you do not do this, all that we have gone through would be lost and you would need to redo everything. So remember CLICK 'APPLY', then click 'OK'.
We have successfully imported the external style sheet into our homepage mock-up! Yay! But wait! We now have this massive layer, but need only part of it.
8/16
5/24/12
Step 5 Masking
Since we dont want the whole style-sheet to appear in our mock-up, we can basically mask the part we need and hide the rest. We will do this by creating a new shape layer in the same dimensions as the component we want to show. Now to get the shape layer to mask it, all we need to do is drag the mask onto the component layer. You will now see the whole screen filled by the shape layer since we removed its mask. Delete the un-masked shape.
9/16
5/24/12
Step 6 - Updating
Now that you have an external file, let me show you how this is useful. Lets say that the red selected state on your global header just isnt working for you and youd like to switch it to blue. Simple! Go to your original style-sheet 'Component_GlobalHeader.psd' and change the selected color to blue. Save the file and go back to the homepage mockup. Click on image > apply Data Sets and choose the data set that you would like to update. You will automatically see the change right away.
10/16
5/24/12
Disadvantages
Along with its potential, keep in mind that this is still considered a hack. Until Adobe decides to create a built-in system for importing external PSDs there will never be a foolproof way to do it. One major disadvantage is that changing a component PSD and saving it will not automatically change it in the mock-ups associated with it. For example, this means that you will always need to 'apply data sets', when opening the homepage mock-up. Though this is something I have not tried, this problem might be able to be solved by creating an action of some sort, making the PSD open and automatically apply data sets. Another disadvantage is the folder structure. Moving a file into a new folder tends to mess up the configuration thus creating an error when 'applying data sets'. Since it is random I havent found a way to work around it. With those issues in mind, I still believe that this system saves countless hours of grueling hard labor. You need to know when to use it. Most of the time, it is used only with projects that contain more than 15 to 20 mock-ups.
Conclusion
This example is just the tip of the iceberg. You can see for yourself the amazing potential this system has. Be creative and experiment. Why not try adding sidebar widgets with only one data set?
www.onextrapixel.com/2010/01/27/photoshop-variables-how-to-import-external-psd-smartly/ 11/16
5/24/12
Previous (http://w w w .onextrapixel.com/2010/01/26/w orking-w ith-flash-tips-tricks-to-create-a-detailed-image/) Random (http://w w w .onextrapixel.com/random/) Next (http://w w w .onextrapixel.com/2010/01/29/give-your-resume-a-creative-boost/)
Advertise with us (http://buysellads.com/buy/detail/15363/)
Author
(http://w w w .yaronschoen.com)
Yaron Schoen (http://w w w .onextrapixel.com /author/yaron-schoen/) Yaron Schoen is an experienced designer, art director and digital artist living in Manhattan, New York. Specializing in many different fields of design with a primary interest in Web & Application Design, Yaron is a veteran in the field and has been in the industry for 11 years. Currently, his focus is on freelance work and entrepreneurship. 1 article published to date. Visit my Website (http://w w w .yaronschoen.com) Follow me on Twitter (http://tw itter.com/yarcom)
12/16
5/24/12
1. RasterBoy January 28, 2010 at 5:24 am Nice article. Thanks for the information. 2. Olisen January 28, 2010 at 3:10 pm Great! I'm sure to try these techniques out. Thanks for sharing! Appreciate it! 3. Skeku (http://w w w .criteriondg.info) January 28, 2010 at 6:06 pm For things like this I recommend use Fireworks. A tool like "Find & Replace" is a great time saving for changing fonts, colours, objects... Just and idea. Nice article BTW :) 4. Jacob M (http://w w w .nyide.nu) January 28, 2010 at 6:18 pm Is this "trick" just the same as the "Place" function? Yaron Schoen (http://w w w .yaronschoen.com) January 29, 2010 at 9:17 am Yes it is very similar, but the variables trick is a bit more powerful. You can create multiple layers that use the same data set for example. This is good for side bar widgets, for example. Kostas Di January 30, 2010 at 3:09 am With "Place" the external file becomes useless and any updates must happen inside the smart object created. This can be memory intensive from time to time and each time you save, the main file has to update too. Although this method has more steps into it, it allows you to work on each component independently and store them as separate files. 5. Poonit Patel (http://w w w .thew ebhostingdir.com/) January 29, 2010 at 3:30 pm Hi Yaron Thanks for sharing this with detailed stuff with snapshots. 6. Brandon (http://bybrandonbrow n.com) June 4, 2010 at 2:52 am Thanks for this. I've always wanted to check out the variables but never came around to it. I'm however running into an issue that I can not solve. Each time I close my document, it loses all of the data sets I created. Is there a place that I can save these and/or stop them from disappearing at the end of every work session? 7. Mark (http://w w w .w astedtalent.nl) June 17, 2010 at 2:37 am Thanks for sharing this! I've made an action in photoshop to apply data sets. From this action i created a droplet (File > Automate > Create Droplet). Now i only have to drag my PSD's that have to be altered on this droplet, and they are updated in a blink of an eye. It saves a lot of time! Chris Hart (http://chrishart.co) September 23, 2010 at 12:23 am I just added a keyboard shortcut to 'Apply Data Sets' just press enter and they all update. 8. Hans July 2, 2010 at 2:26 am Thanks, this is really usefull. One question: Every time I re-open my photoshop files containing the header which is
5/24/12
a variable I need to define the dataset again. Is this just the way it works or am I doing something wrong? I also tried to automate the process but the actions done in the dataset are not recorded in my action. Anybody know what that is? Mark (http://w w w .w astedtalent.nl) July 4, 2010 at 6:21 am Hans, Defining the dataset every time you re-open a Photoshop file isn't supposed to be needed. It seems like you're missing one of the steps above? If everything is set up the right way, you only have to use the 'image > apply data set...' option in order to update your PSD containing the header PSD variable if it has been altered. 9. Kevin August 4, 2010 at 3:43 am Hi Yaron Great tutorial - I design many admin areas with frequesnt components so this is proving a real time saver! HOWEVER! I have the same problem as Hans - if I close a document then re-open, the APPLY DATA SETS links is greyed out and I have to re-define the data set from scratch. This happens every time I quit a PSD or Photoshop itself - the documents never seem to remember their data sets once re-opened. And yes, I have made sure I click 'apply' before clicking OK! Best Kevin 10. Chris Hart (http://chrishart.co) September 23, 2010 at 12:29 am I'm not sure this really is all that different to using smart objects, the extra steps appear in different places but they pretty much do the same. Place your external file into your mockup and if if needs updating you just right click and replace contents and select the file again. I prefer this new variables method because I'm still in CS3 with that lovely "No Linking Layer Masks with Layers Rule" :) But I fear the set up windows are a little baffling for the average Joe in my studio. Both are frustrating, since they highlight how close we are to something so useful. Being able to 'place' external psd's within each other and update them all in one go. Why they don't using proper stylesheets ala inDesign/CSS for objects and text as well is baffling. 11. Chris Hart (http://chrishart.co) September 23, 2010 at 12:58 am And another slight negative with this method is that the layers look like regular layers, ideally they should have they're own little icon, ala smart objects. 12. pasxal (http://pasxal.nl) September 28, 2010 at 3:43 pm I have to agree with Chris Hart.... When someone else uses my PSD's, they will never know that I have used this smart technique. I also prefer to use the smart objects technique. You can easily replace the smart object with an updated version. But always nice to explore new Photoshop techniques, thanks for bringing this to my attention! 13. Music Producing Programs (http://musicproducingprograms.com/) November 23, 2010 at 11:29 pm
5/24/12
Oh man you guys saved me. This is the tut I have been searching for. I started my search with very little hope, and bam here it is. Thank you so much! I bookmarked your site because it has so much useful information. You guys are awesome, I really appreciate your help! Keep up the good work! 14. Yan Chatel February 21, 2011 at 5:58 am Hi, the data-driven graphics are best used for creating templates. Once you decided wich parts are going to change, then you can create endless number of images based on simple text files. Let's say for creating a business cards template bank that holds 200 different models, when ordered, the customer choose what template to use and custom logo and information to show in filling an online form, then online form generates the text files to use for that customer's order and the graphic designer simply import, verify that all is good and finaly proceed to the printing, all of this in less than 20 minutes.... 15. Alex (http://alexkrivov.com/) May 1, 2011 at 4:40 pm You can write the Action (Image Apply Data Set...) and add to Script Event Manager (Open Document). When document will be open, all layers will UPDATED. or you are can install Includes.jsx scripts for Photoshop and use it. You must PLACE .psd document in your psd template and call File Scripts Includes Download Includes.jsx: http://alexkrivov.com/includes (http://alexkrivov.com/includes) Doug Downing (http://home.roadrunner.com/~dow ning/) June 30, 2011 at 6:58 am @Alex: Great script!!! May I make a suggestion? Smart Objects can be exported, and by default have a .psb file extension. However, the current version of your "Includes" script looks for .psd files only, so it won't work if trying to update content based on a placed Smart Object .psb file. The script would be much more robust if you added support for the .psb file format, as well. The great thing about your script is that it allows for quick updating of layers, much like with Variables, but using Smart Objects insteadwhich offer greater layout flexibility. (There's also no need to define variables and data sets with this method.) Again, by adding support for .psb files, the script will be even more powerful. A Smart Object created in one file could be exported into an external library, where it could then be placed into other documents, as needed. Editing the external version of the Smart Object and then running the Includes script in each file where it was placed would allow for quick updating of those files. This even works in CS2! Awesome. Thanks for sharing. Doug Downing (http://home.roadrunner.com/~dow ning/) July 1, 2011 at 2:40 am Alex: I've created a crude alteration of your "Includes.jsx" script that adds support for PSB and AI files: http://tinyurl.com/3ugea6z (http://tinyurl.com/3ugea6z) . I'm certain the syntax of this version could be improved. I've tentatively renamed the script "Update Smart Objects.jsx", as that seems more descriptive of its function. An interesting note is that this script updates Smart Objects that have been placed from external files, as well as Smart Objects that may have been created within the documentif they've been exported and stored within the same folder as the document itself. As you know, the script scans the active Photoshop document for Smart Object layers, then attempts to match the names of those layers to files within the same folder as the document. If it finds such a file, it uses a Smart Objects > Replace Contents command to automatically update the contents of the corresponding layer. The key to using this script in a workflow is either to edit Placed files or Smart Objects externally, or to edit them in the document (as Smart Objects) but then use the Smart Objects > Export Contents command (or Save As...) to also save those files externally, for inclusion into other documents within
5/24/12
the same project folder. Jiovanie Velazquez (http://jiovanie.com) December 10, 2011 at 4:48 am Excellent work Alex and Doug! I have modified my version to support more image formats (the usual jpg, png, etc). Would you guys mind if I made this available on my site and other places (like CG Hub) with credit and a link to you guys and your sites? 16. ansari n mobin (http://8511843234) November 20, 2011 at 1:47 pm ok 17. Pan Cheng Yu (http://consommedartiste.hyperreel.net) February 7, 2012 at 5:40 am Thank you so much, this great tuto helps me a lot, thank you ! 18. Chris April 3, 2012 at 12:48 am Great tutorial, however I'm having an issue where every time time I apply the new data set it shifts my "placed" artwork down and to the left a few pixels. Any ideas what could cause this? Thanks! Please note that comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names. Kindly do not spam, and do not advertise!
16/16

Photoshop Variables - How To Import External PSD Smartly - On Extra Pixel - Web Design & Development Online Magazine

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Photoshop Variables - How To Import External PSD Smartly - On Extra Pixel - Web Design & Development Online Magazine

Încărcat de

Drepturi de autor:

Formate disponibile

5/24/12

Advertise with us (http://buysellads.com/buy/detail/15363/)

Photoshop Variables: How to Import External PSD Smartly

What is a Photoshop Variable?

sheet into our PSD.

Lets Get Started

Step 2 Setting up grounds

Step 3 Creating the variable

Step 4 The actual importing

Advertise with us (http://buysellads.com/buy/detail/15363/)

S-ar putea să vă placă și