Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Learn to composite graphics in Adobe Photoshop using variables and a simple text file. This Design the Web installment shows how to automate your production workflow by combining separate graphic files, typography, and Photoshop effects into custom, ready-to-use graphics. This workflow allows you to generate hundreds, even thousands, of unique graphics suitable for websites, interactive projects, or even print. All you need to begin is a layered Photoshop file.
The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.
Now that we have variables defined inside of our Photoshop file. Next, we need to create a data set, which is basically a series of values that associate to those variables. So to do that, let's come down to the Image menu. Let's come down to Variables and choose Data Sets. Now, inside of this dialog box, we can come in here and create sets of data. You might also notice the drop down in the upper lefthand corner. The definition of the variables and the data sets are actually in the same dialog box here. So, down on Data Sets, let's come down here and create a data set inside of our Photoshop file.
So let's come over here and click on this icon here. This will create a data set. And the default data is going to be based on whatever we have inside of our Photoshop file currently. So notice that the city variable has a value of city, which matches the city text we have in our Layers panel. Let's first come up here and rename this data set to Aruba. Let's copy that. Let's come down here for the variables plus city let's put Aruba in here as well. Let's come over here to the right, let's click on Preview. What Preview is going to do is show us a live representation on the stage of whatever data is in this data set.
So if I turn this off, this goes back to saying city. If I turn this back on, it changes to be Aruba. Let's come down to the Variables. Let's come down and choose Price. It's picking up the zero from the Layers panel. Let's put in $649. Then to see this on the stage, let's come over and click Apply. You'll see that $649 has replaced the zero on the stage. Let's come back to our variables. Let's come down to PhotoBase. Now this is a case where we defined the variable as a pixel replacement. And then notice down here we have a Select File option.
So let's come over here, click the Select File. That's going to prompt us to go find an external file. So let's go into our Exercise Files. Let's go into Photos, let's grab the Aruba.jpeg file. Let's click Open. We'll see that the Aruba JPEG has now been bought into the background as well. Now for the last one let's come down and choose PhotoClip. We'll do the same thing, let's choose Select File. Let's grab the same JPEG file. Let's click Open. And that's going to put the photo in the clipped area. So now we're going to get that effect that we worked on earlier, where the photograph is clipped into the text.
So now we get the illusion of a cutout here but the data of the price is dynamically driven from that variable. So we can change the price and always get the effect of having that cut-through effect. And now the other thing we can see in the variables' dialog box, is down here we can see all of the different layers and what all of the values are being associated to. So PhotoBase is pointing to the Aruba JPEG, same for the clip. Price is being set to 649, and the city is being set to Aruba. Next, let's come over here. Click Apply so that Photoshop will remember this particular data set when we open the file again.
And then come over here and click OK. So now at this point, we have a Photoshop file that's got four variables to find, and we have associated values for each one of those individual variables. But now the data set is stored inside of the Photoshop file. Next, we're going to take a look at how we can take the data sets out of Photoshop and put them into an external text file.
There are currently no FAQs about Design the Web: Automating Web Graphics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.